/* Layers, menus, owner sheet, inbox, floor and agent chat presentation. */
  /* ——— layers: the drawer off the hamburger, the sheet off the owner.
     Journal hangs at the bottom of the shelf. Inbox lives under the
     owner, not as a second icon. ——— */
  .scrim {
    position: fixed; inset: 0; z-index: 8;
    background: rgba(0, 0, 0, 0.18);
    opacity: 0; transition: opacity 220ms ease;
    touch-action: none;
  }
  /* A layer freezes the room behind it; the sheet's own log keeps its
     scroll to itself. */
  body.layered main { overflow: hidden; }
  .chatlog { overscroll-behavior: contain; }
  .scrim.on { opacity: 1; }
  .drawer {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 9;
    width: min(78vw, 320px);
    background: rgba(249, 249, 251, 0.92);
    -webkit-backdrop-filter: blur(24px) saturate(1.5);
    backdrop-filter: blur(24px) saturate(1.5);
    border-right: 0.5px solid var(--line);
    border-radius: 0 16px 16px 0;
    box-shadow: 0 12px 40px rgba(30, 32, 38, 0.22);
    padding: calc(env(safe-area-inset-top) + 0.9rem) 0.9rem
             calc(env(safe-area-inset-bottom) + 1rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(-103%);
    transition: transform 280ms cubic-bezier(0.32, 0.72, 0.36, 1);
  }
  .drawer.on { transform: none; }
  .drawer-right {
    left: auto; right: 0;
    border-right: none; border-left: 0.5px solid var(--line);
    border-radius: 16px 0 0 16px;
    transform: translateX(103%);
  }
  .drawer-right.on { transform: none; }
  .entrypane { width: min(88vw, 360px); }
  .entrylist { display: flex; flex-direction: column; margin-top: 0.35rem; }
  .entry {
    padding: 0.85rem 0.75rem;
    border-top: 0.5px solid var(--line);
  }
  .entry:first-child { border-top: none; }
  .entrywhen {
    font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.03em;
    color: var(--ink2);
  }
  .entrytitle {
    margin: 0.2rem 0 0;
    font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em;
  }
  .entryblurb {
    margin: 0.25rem 0 0;
    font-size: 0.875rem; line-height: 1.45; color: var(--ink2);
  }
  /* Inbox is another table: a row is who, how long ago, and the context.
     The same row is drawn under the owner and under the card. */
  .inboxlist { display: flex; flex-direction: column; }
  .inboxrow {
    display: flex; flex-direction: column; gap: 0.22rem;
    width: 100%; text-align: left;
    padding: 0.7rem 0;
    border-top: 0.5px solid var(--line);
  }
  .inboxrow:active { opacity: 0.55; }
  .inboxrow:first-child { border-top: none; }
  .inboxmeta {
    display: flex; align-items: center; gap: 0.5rem;
  }
  .inboxfrom {
    display: inline-flex; align-items: center; gap: 0.4rem;
    flex: 1; min-width: 0;
    font-size: 0.875rem; font-weight: 600;
  }
  .inboxfrom svg { width: 14px; height: 14px; color: var(--ink2); flex: 0 0 auto; }
  .inboxwhen {
    display: inline-flex; align-items: center; gap: 0.28rem;
    flex: 0 0 auto;
    font-size: 0.75rem; font-weight: 500; color: var(--ink2);
  }
  .inboxwhen svg { width: 12px; height: 12px; }
  .inboxctx {
    font-size: 0.875rem; line-height: 1.35; color: var(--ink2);
  }
  /* A chat row's last word: one truncated line, the Messages habit. */
  .inboxlast {
    font-size: 0.8125rem; line-height: 1.35; color: var(--ink3);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  /* The floor reuses the inbox's rows; its one word of its own is the
     live marker — the seat holding the governor this second. */
  .floorwrap { padding: 0 1rem; }
  .floorlive {
    flex: 0 0 auto; margin-left: 0.15rem;
    font-size: 0.6875rem; font-weight: 700; color: var(--tint);
    text-transform: uppercase; letter-spacing: 0.04em;
  }
  /* The calling card's sections: small-caps labels, plain values. */
  .chatdets { display: flex; flex-wrap: wrap; gap: 0.3rem 0.8rem; }
  .chatdet {
    display: inline-flex; align-items: baseline; gap: 0.3rem;
    font-size: 0.75rem; font-weight: 500; color: var(--ink);
  }
  .chatdetlab {
    font-size: 0.625rem; font-weight: 600; letter-spacing: 0.05em;
    text-transform: uppercase; color: var(--ink3);
  }
  /* One tap unfolds the preview well; the next opens the chat. */
  .chatentry .inboxrow { border-top: none; }
  .chatentry + .chatentry, .chatentry + .inboxrow, .inboxrow + .chatentry {
    border-top: 0.5px solid var(--line);
  }
  .chatentry .chatwell { display: none; }
  .chatentry.open .chatwell {
    display: flex; flex-direction: column; gap: 0.45rem;
    padding: 0.15rem 0 0.6rem;
  }
  .chatwell .chattext { font-size: 0.8125rem; }
  .chatwell .emptyline { padding: 0.2rem 0; text-align: center; }
  /* A session row inside the chat's history: when, how long, last word. */
  .sessrow {
    display: flex; flex-direction: column; gap: 0.2rem;
    width: 100%; text-align: left;
    padding: 0.65rem 0.2rem;
    border-bottom: 0.5px solid var(--line);
  }
  .sessrow:active { opacity: 0.55; }
  .sessmeta { font-size: 0.875rem; font-weight: 600; }
  .ownertabrow { display: flex; justify-content: center; margin: 0.7rem 0 0.2rem; }
  .ownertabs button {
    padding: 6px 14px;
    font-size: 0.8125rem; font-weight: 600;
  }
  .ownertabs button[aria-pressed="true"] {
    background: var(--card); color: var(--tint);
    box-shadow: 0 1px 3px rgba(30, 32, 38, 0.14);
    border-radius: 8px;
  }
  .card > .inboxlist {
    margin-top: 0.65rem;
    padding-top: 0.15rem;
    border-top: 0.5px solid var(--line);
  }
  #board[data-view="grid"] .inboxctx {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  @media (prefers-reduced-motion: reduce) {
    .scrim, .drawer { transition: none; }
  }
  .menuhead {
    font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink2);
    margin: 1.1rem 0.25rem 0.45rem;
    min-height: 28px;
    display: flex; align-items: center;
  }
  .drawer .menuhead:first-child { margin-top: 0.4rem; }
  .menurow {
    display: flex; align-items: center; gap: 0.65rem;
    width: 100%; text-align: left;
    padding: 0.65rem 0.75rem;
    font-size: 0.9975rem;
  }
  .menurow + .menurow { border-top: 0.5px solid var(--line); }
  .menurow:active { background: rgba(118, 118, 128, 0.06); }
  .menuglyph { color: var(--tint); display: inline-flex; flex: 0 0 auto; }
  .menulabel { flex: 1; min-width: 0; }
  .sheetavatar {
    width: 64px; height: 64px; margin: 0.6rem auto 0.4rem;
    display: flex; align-items: center; justify-content: center;
    background: var(--fill); color: var(--ink2);
    border-radius: 50%;
  }
  .sheetname { text-align: center; font-weight: 600; margin: 0; }
  .sheetsub {
    text-align: center; font-size: 0.8125rem; color: var(--ink2);
    margin: 0.2rem 0 0;
  }

  /* ——— the chat behind an agent chip: one seat, one icon, a transcript
     and a composer. The pane is a flex column so the log scrolls inside
     it instead of the drawer scrolling as a page. ——— */
  .chatpane { display: flex; flex-direction: column; overflow: hidden; }
  .chathead {
    flex: 0 0 auto;
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.35rem 0.15rem 0.7rem;
    border-bottom: 0.5px solid var(--line);
  }
  .chatface {
    width: 40px; height: 40px; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    color: #8E44AD; background: rgba(175, 82, 222, 0.13);
  }
  .chatname { text-align: left; margin: 0; }
  .chatsub { text-align: left; margin: 0.1rem 0 0; }
  /* The owner rides the chat head's right end — same face, same badge
     as the top bar, so the pending inbox stays in sight whoever is
     being spoken to. Tapping it opens the owner's sheet. */
  .chatowner {
    position: relative;
    margin-left: auto;
    width: 38px; height: 38px; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--fill); color: var(--ink2);
  }
  .chatowner:active { opacity: 0.7; }
  .chatowner .msgbadge { top: -4px; right: -7px; }
  .chatlog {
    flex: 1; min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: flex; flex-direction: column; gap: 0.55rem;
    padding: 0.7rem 0.1rem;
  }
  .chatmsg { display: flex; flex-direction: column; gap: 0.15rem; }
  .chatwho { font-size: 0.6875rem; font-weight: 600; color: var(--ink2); }
  .chattext {
    font-size: 0.9375rem; line-height: 1.4;
    background: var(--fill); border-radius: 16px;
    padding: 0.5rem 0.75rem;
    align-self: flex-start; max-width: 86%;
    overflow-wrap: anywhere;
  }
  /* The owner's words ride blue on the right, the iMessage way — and
     need no name tag: the side and the colour already say who. */
  .chatmine .chatwho { display: none; }
  .chatmine .chattext {
    background: var(--tint); color: white;
    align-self: flex-end;
  }
  /* An error entry reads as one; a pending line is the seat visibly
     thinking, never dressed as an answer. */
  .chaterr { color: #C0392B; font-style: italic; }
  .chatpend { color: var(--ink2); font-style: italic; }
  .composer {
    flex: 0 0 auto;
    display: flex; gap: 0.5rem;
    padding-top: 0.6rem;
    border-top: 0.5px solid var(--line);
  }
  .chatinput {
    flex: 1; min-width: 0;
    font: inherit; color: var(--ink);
    background: var(--fill);
    border: none; border-radius: 999px;
    padding: 0.55rem 0.9rem;
  }
  .chatsend {
    width: 38px; height: 38px; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--tint); color: white;
  }
  .chatsend:active { opacity: 0.7; }