/* ── 3-column layout: sidebar | feed+quote | dm-panel ───────────── */
    @media (min-width: 1100px) {
      .layout {
        display: grid;
        grid-template-columns: 200px 1fr 420px;   /* wider Messages/Requests panel */
        align-items: start;
        gap: 0;
      }
      .home-center {
        display: flex;
        min-width: 0;
      }
      /* Twitter-style: a fixed ~600px readable feed column, left-aligned snug
         against the sidebar (no centering). The freed width becomes a gap to the
         RIGHT of the feed; .right-col gets margin-left:auto so "Pure Freedom"
         stays pinned in place and does not move. Mobile (<1100px) keeps the
         global centered single column, untouched. */
      .home-center .main-content {
        max-width: 700px;
        margin: 0;
      }
      /* ── Bigger, X-style posts (index desktop only) ──
         Wider column + larger text + more breathing room + bigger avatars.
         All scoped under .home-center so mobile (<1100px) and the board feed
         (which does not load this stylesheet) are untouched. */
      .home-center .thread-card        { padding: 16px; gap: 14px; }
      .home-center .tc-avatar-link .avatar { width: 48px; height: 48px; }
      .home-center .tc-head            { font-size: 15px; }
      /* X-style: post text stays normal reading size on desktop too (15px/1.4),
         not enlarged headline text. Weight stays 400 from the base rule. */
      .home-center .thread-card-title  { font-size: 15px; line-height: 1.4; }
      .home-center .thread-card-preview { font-size: 15px; line-height: 1.4; }
      .home-center .tc-actions .act-btn .act-ico { width: 21px; height: 21px; }   /* unified */
      .layout .right-col {
        display: flex;
        flex-direction: column;
        width: 260px;
        flex-shrink: 0;
        /* Sit directly to the right of the feed (no gap). */
        margin-inline-start: 0;
      }
      .home-dm-panel {
        display: flex;
        flex-direction: column;
        padding: 32px 20px;
        position: sticky;
        top: 48px;
        height: calc(100vh - 48px);
        height: calc(100dvh - 48px);
        overflow-y: auto;
        border-inline-start: 1px solid var(--border);
        width: 100%;
        margin-top: 0;
        box-sizing: border-box;
      }
    }
    /* Override global right-col hide (style.css hides it at 1280px) */
    @media (min-width: 1100px) {
      .layout .right-col { display: flex; }
    }
    @media (max-width: 1099px) {
      .home-dm-panel { display: none; }
      .layout .right-col { display: none; }
      .home-center { display: contents; }
    }

    .home-dm-tabs { display: flex; gap: 8px; margin-bottom: 14px; }
    .home-dm-tab {
      flex: 1; padding: 8px 14px; border-radius: 999px;
      background: transparent; color: var(--text2); font-weight: 600;
      cursor: pointer; border: 1px solid var(--border);
      font-family: var(--font); font-size: 13px;
      transition: background 0.15s, color 0.15s;
    }
    .home-dm-tab.active { background: var(--bg3); color: var(--text); border-color: var(--bg3); font-weight: 700; }

    .home-dm-search {
      width: 100%; padding: 8px 12px; border-radius: 8px;
      background: var(--bg3); border: 1px solid var(--border); color: var(--text);
      margin-bottom: 12px; font-size: 14px; box-sizing: border-box;
      font-family: var(--font); outline: none;
    }
    .home-dm-search::placeholder { color: var(--text3); }
    .home-dm-search:focus { border-color: var(--accent); }

    .home-dm-list { display: flex; flex-direction: column; }
    .home-dm-row {
      display: flex; align-items: center; gap: 10px; padding: 10px 6px;
      border-bottom: 1px solid var(--border); cursor: pointer; border-radius: 6px;
    }
    .home-dm-row:hover { background: rgba(255,255,255,0.03); }
    .home-dm-row .meta { flex: 1; min-width: 0; }
    .home-dm-row .dm-name {
      color: var(--text); font-weight: 600; font-size: 14px;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .home-dm-row .dm-handle {
      color: var(--text3); font-size: 11px; margin-top: 1px;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .home-dm-row .dm-snippet {
      color: var(--text2); font-size: 12px; margin-top: 2px;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .home-dm-row.unread .dm-name { font-weight: 700; color: var(--text); }
    .home-dm-row.unread::after {
      content: ''; width: 8px; height: 8px;
      background: var(--danger); border-radius: 50%; flex-shrink: 0;
    }
    .home-dm-empty { color: var(--text3); text-align: center; padding: 30px 0; font-size: 13px; }

    .home-req-actions { display: flex; gap: 4px; flex-shrink: 0; align-items: center; padding-inline-end: 8px; }
    .home-req-accept  { position: relative; background: var(--success); color: #fff; border: none; border-radius: 50%; width: 26px; height: 26px; cursor: pointer; font-size: 13px; line-height: 1; }
    .home-req-decline { position: relative; background: var(--bg3); color: var(--text2); border: 1px solid var(--border); border-radius: 50%; width: 26px; height: 26px; cursor: pointer; font-size: 12px; }
    /* a11y: 40px-tall tap area; widened only into the inter-button gap so adjacent
       accept/decline hit zones never overlap (which would cause mis-taps). */
    .home-req-accept::before, .home-req-decline::before { content: ''; position: absolute; inset-block: -7px; inset-inline: -2px; }
    .home-req-accept:hover  { background: var(--success-hover); }
    .home-req-decline:hover { border-color: #ef4444; color: #ef4444; }

    /* ── New posts pill ── */
    #new-posts-pill {
      display: none;
      position: fixed;
      top: calc(64px + env(safe-area-inset-top, 0px));
      left: 50%;
      transform: translateX(-50%);
      z-index: 200;
      background: var(--bg3);
      color: var(--text);
      border: none;
      border-radius: 999px;
      padding: 7px 18px;
      font-size: 13px;
      font-weight: 600;
      font-family: var(--font);
      cursor: pointer;
      box-shadow: 0 2px 12px rgba(0,0,0,0.25);
      white-space: nowrap;
      transition: opacity 0.15s;
    }
    #new-posts-pill:hover { opacity: 0.92; }
  
/* ── Pull-to-refresh indicator (mobile feed, built in js/index.js) ──
   Hidden parked behind the navbar (z-index 90 < navbar's 100); JS drives an
   inline translateY that follows the damped pull, then .u-spin while the feed
   reloads. .ptr-anim enables the snap-back/fade transitions (removed while the
   finger is down so the indicator tracks the pull 1:1). */
.ptr-indicator {
  position: fixed;
  top: 52px;                    /* navbar height — slides out from under it */
  left: 50%;
  margin-left: -18px;
  z-index: 90;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg3);
  border: 1px solid var(--border);
  box-shadow: 0 2px 12px rgba(0,0,0,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-60px);
  opacity: 0;
  pointer-events: none;
}
.ptr-indicator.ptr-anim { transition: transform .2s ease, opacity .2s ease; }
.ptr-indicator svg { width: 20px; height: 20px; color: var(--text2); display: block; }
@media (prefers-reduced-motion: reduce) {
  .ptr-indicator.ptr-anim { transition: none; }
}

/* ── CSP: classes replacing former inline style="" attributes ── */
.home-req-badge { background: #ef4444; color: #fff; font-size: 10px; font-weight: 700; border-radius: 10px; padding: 1px 5px; margin-inline-start: 4px; vertical-align: middle; }