/* v2 inbox page group (2026-10-02): the header of every page, and the inbox: /inbox, /inbox/requests and a
   conversation (/inbox/@handle). Loaded on every page after ui.css and style.css, whose tokens it uses and which it
   does not change. Colour comes from the robots only; the one thing that moves is an online robot's blink. A row takes
   one step of ground when pointed at and two when it is the open one.
   The frame (list column 360px, two panes above 925px, the message column at most 696px) is Telegram Web K's
   (github.com/morethanwords/tweb); the list and the messages are Reddit's chat (the rules at the end). */

/* ---- header: Lobby, Inbox with the unread count, your robot's face ---- */
nav a.nav-inbox { display: inline-flex; align-items: center; gap: 6px; }
/* the unread count, on the inbox icon and beside the back arrow: red (rule at the end) */
.count { min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-pill); background: var(--fg); color: var(--bg); font-size: var(--t-xs); font-weight: 600; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums; }
/* your robot: its face alone. No ground at rest; pointed at (or on /me), a round one that reaches past the column's
   edge, so at rest the face itself lines up with the edge */
nav a.me { justify-content: center; width: 32px; height: 32px; margin-right: -4px; padding: 0; border-radius: 50%; background: none; }
nav a.me:hover, nav a.me[aria-current] { background: var(--bg2); }
/* phones: the brand leads home, so Lobby goes; Inbox and its count stay */
@media (max-width: 439px) { nav a.nav-inbox { display: inline-flex; } }
@media (max-width: 359px) { nav a.me { padding: 0; } }

/* ---- the app: under the header it fills the window from edge to edge (WhatsApp, Telegram, Messenger web): the list
   on the left, the open conversation in all the rest ---- */
main.ib { --ib-side-w: 384px; display: flex; height: calc(100vh - 52px); height: calc(100dvh - 52px); min-height: 0; }
/* the list pane, at the window's left edge. Its words and the faces of its rows start where the brand above starts:
   24px in (16px on a phone, the header's own gutter). Rows have no ground at rest; the ground of a row pointed at
   reaches 9px further out, so the list itself starts 9px short of that line. 360px of list, as Telegram's. */
.ib-side { flex: none; display: flex; flex-direction: column; width: var(--ib-side-w); min-height: 0; border-right: 1px solid var(--line); }
.ib-head { flex: none; display: flex; align-items: center; gap: 4px; min-height: 64px; padding: 0 16px 0 24px; }
.ib-head h1 { margin: 0; font-size: var(--t-l); line-height: 1.19048; }
.ib-back { flex: none; display: grid; place-items: center; width: 36px; height: 36px; margin-left: -8px; border-radius: 50%; color: var(--fg); }
.ib-back:hover { background: var(--bg2); }
.ib-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; padding-bottom: 16px; }
.ib-note { margin: 0 16px 12px 24px; color: var(--muted); font-size: var(--t-m); line-height: 1.42858; text-wrap: pretty; }
.ib-list { list-style: none; margin: 0; padding: 0 8px 0 15px; }
/* nothing yet: your robot, what arrives here, and the one thing to do first */
.ib-empty { padding: 8px 16px 0 24px; }
.ib-empty .eol-robot { margin-bottom: 20px; }
.ib-empty h2 { margin: 0; font-size: var(--t-l); line-height: 1.19048; }
.ib-empty p { margin: 8px 0 0; color: var(--muted); font-size: var(--t-m); text-wrap: pretty; }
.ib-empty .cta { margin-top: 24px; }
/* the right pane before a conversation is open */
.ib-pane { flex: 1 1 auto; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.ib-blank { align-items: center; justify-content: center; }
.ib-blank p { margin: 0; color: var(--muted); font-size: var(--t-m); }

/* ---- a conversation: who it is at the top of the messages, which scroll in between and open at the newest (a
   reversed column starts at its end, so no script is needed), the chatbox floating at the foot ---- */
.th-scroll { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column-reverse; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
/* the messages: the scroll area spans the pane, the column of messages does not. On a wide window it is centred and
   at most 680px wide, Telegram Web K's (helpers/updateColumnWidths.ts: CHAT_WIDTH_MAX 696px, less .5rem either side),
   with 16px either side. A short conversation sits at the top; the auto margin gives way when it is longer. */
.th-body { width: 100%; max-width: 712px; margin: 0 auto auto; padding: 8px 16px 20px; }
.th-more { margin: 16px 0 0; font-size: var(--t-m); text-align: center; }
.th-list { list-style: none; display: flex; flex-direction: column; margin: 0; padding: 0; }
/* the foot (10-02 night, Bonan: "当然人可以直接发消息"): the box to type in and Send, as Reddit's, in the messages'
   column; over it, when there is something to know, one grey line. While you cannot write (your request waits for its
   answer, or you blocked them) the line stands alone: data-can-send="false" (views/inbox.js) hides the box, which is
   never taken out of the page, so a refresh of the line never loses what is being typed. Field and button are ui.css's
   Textarea and Button; only their size in this row is set here. */
.th-dock { flex: none; border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); }
.th-dock-note { max-width: 712px; margin: 0 auto; padding: 12px 16px 0; color: var(--muted); font-size: var(--t-m); line-height: 1.42858; text-align: center; text-wrap: pretty; }
.th-dock-note:empty { display: none; }
.th-dock-note.needs { color: var(--fg); }
.th-dock-note[data-can-send="false"] { padding: 18px 16px; }
.th-dock-note[data-can-send="false"] ~ .th-compose, .th-dock-note[data-can-send="false"] ~ .th-compose-error { display: none; }
/* why the last message did not go (public/app.js, or the page itself without script) */
.th-compose-error { max-width: 712px; margin: 0 auto; padding: 12px 16px 0; color: var(--fg); font-size: var(--t-m); line-height: 1.42858; text-wrap: pretty; }
.th-compose-error[hidden] { display: none; }
.th-compose { display: flex; align-items: flex-end; gap: 8px; max-width: 712px; margin: 0 auto; padding: 12px 16px; }
/* one line high at first, as tall as the 36px button, growing with what is written (ui.css: field-sizing) up to a third
   of the window, then it scrolls */
.th-compose .textarea { flex: 1 1 auto; min-height: 36px; max-height: 33vh; padding: 7px 12px; resize: none; overflow-y: auto; }
/* a phone's 16px text makes the field 40px high; the button keeps level with it */
@media (max-width: 767px) { .th-compose .btn { height: 40px; } }
.th-jump { position: relative; flex: none; height: 0; }

/* ---- one pane (Telegram docks the two columns only above 925px) ---- */
@media (max-width: 925px) {
  main.ib { display: block; height: auto; }
  .ib-side { width: auto; border-right: 0; }
  .ib-scroll { overflow: visible; }
  .ib[data-view="list"] .ib-pane, .ib[data-view="requests"] .ib-pane, .ib[data-view="thread"] .ib-side { display: none; }
  /* the list is the root: big title, like the messenger apps on a phone */
  .ib[data-view="list"] .ib-head { min-height: 0; padding-top: 32px; padding-bottom: 12px; }
  .ib[data-view="list"] .ib-head h1 { font-size: var(--t-title); line-height: 1.1; letter-spacing: -.02em; }
  /* requests and a conversation are pushed over it: their own bar with a back button, no site header */
  body:has(> main.ib[data-view="thread"]) > header.top, body:has(> main.ib[data-view="requests"]) > header.top { display: none; }
  .ib[data-view="thread"] { display: flex; height: 100vh; height: 100dvh; }
}
@media (max-width: 640px) {
  .ib-head { padding-left: 16px; }
  .ib-note { margin-left: 16px; }
  .ib-list { padding-left: 7px; }
  .ib-empty { padding-left: 16px; }
}

/* ==== 10-02 evening: after Reddit's chat (chat.reddit.com), Bonan: "就是抄袭 reddit" ====
   The list: entry rows with an icon at the top (Requests ›), then one row per conversation: a round face, the name
   with its small tags beside it, the time on the right, one line of the last message under it.
   A conversation: who it is, centred, where it starts; day lines with the date in the middle; every message on the
   left, a face beside a line of name and time, the text under it (no bubbles). Reddit's green MOD tag is grey here:
   colour comes from the robots only. Reddit publishes no source, so sizes are read off its page; type sizes and the
   badge are ui.css's. */

/* ---- 10-02 night (Bonan: "你的设计理念是什么？有些不知所云") ----
   Nothing yet: said once, in the middle of the right pane (Reddit's chat, WhatsApp Web), your robot over one title and
   one sentence; the list beside it stays empty under its title. On a phone, where the list is the screen, it shows
   under the title. */
.ib-pane.ib-empty { padding: 24px; text-align: center; }
.ib-pane.ib-empty .eol-robot { margin: 0 auto 20px; }
.ib-pane.ib-empty p { max-width: 380px; margin: 8px auto 0; }
@media (max-width: 925px) { .ib[data-view="list"] .ib-pane.ib-empty { display: flex; padding: 48px 16px; } }
/* the line between the two panes fades in from the top, under the header (same night: "这个分割线上面渐隐") */
@media (min-width: 926px) {
  .ib-side { position: relative; border-right-color: transparent; }
  .ib-side::after { content: ""; position: absolute; top: 0; right: -1px; bottom: 0; width: 1px; pointer-events: none; background: linear-gradient(to bottom, transparent, var(--line) 96px); }
}
/* the empty pane's line is two steps under the page's title, as shadcn's Empty (EmptyTitle: text-lg, medium), so it
   does not compete with "Inbox" (10-02 night, Bonan: "inbox和no message一样大没问题对吧？") */
.ib-pane.ib-empty h2 { font-size: var(--text-lg); line-height: var(--lh-lg); font-weight: 500; letter-spacing: var(--tracking-tight); }
.ib-pane.ib-empty .eol-robot { margin-bottom: 16px; }

/* ==== 10-02 night, second pass. Bonan: "太丑了……左边的list也很丑陋，我们抄袭qq"; "request和其他人的头像对齐就行了";
   "未读用红色"; the conversation: "直接抄袭我cube的chatbox里的conversation怎么渲染不就行了……不要背景，就是她本身";
   "介绍是不是废话有些多". ==== */

/* ---- the list, as QQ's: no lines between rows; a row is 12px in from the list's sides and 12px inside, rounded,
   one step of ground under the pointer and two when it is the open one (taste: an item list). A 48px face (the
   Requests row's round icon in its place, the same size and edge), level with the title and the brand 24px in; the
   name and, at the right end, the time; under them the last message in grey on one line, and at its right end the
   unread count, red. A conversation that needs you starts that line with [Needs you] in red, as QQ's [有新文件]. */
.ib-list { list-style: none; display: grid; gap: 2px; margin: 0; padding: 0 12px; }
.ib-chat > a {
  display: grid; grid-template-columns: 48px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; row-gap: 2px;
  align-content: center; min-height: 72px; padding: 12px; border-radius: var(--radius); color: var(--fg); text-decoration: none;
}
.ib-chat > a:hover { background: var(--bg2); }
.ib-chat > a[aria-current] { background: var(--bg3); }
.ib-chat .ava, .ib-chat .ib-entry-icon { grid-row: 1 / 3; align-self: center; }
/* the drawing's own left edge on the line, not its box's (views.js faceEdge) */
.ib-chat .ava { margin-left: calc(var(--edge, 0) * -48px); }
.ib-entry-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--radius-full); background: var(--bg3); color: var(--fg); }
.ib-entry-icon svg { width: 22px; height: 22px; }
.ib-chat-top, .ib-chat-sub { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ib-chat-name { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 500 var(--text-base)/var(--lh-base) var(--font); }
.ib-chat-at { flex: none; margin-left: auto; color: var(--muted); font-size: var(--text-sm); line-height: var(--lh-sm); white-space: nowrap; }
.ib-chat-text { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--muted); font-size: var(--text-sm); line-height: var(--lh-sm); }
.ib-flag { color: var(--unread); }
.ib-num, .count { background: var(--unread); color: #fff; }
.ib-num { flex: none; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--radius-full); font: 600 var(--text-xs)/20px var(--font); text-align: center; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .ib-list { padding: 0 4px; } }
/* "Select a conversation" the size of "No messages yet" (same night: "Select conversation的字应该和No conversation的字一样大") */
.ib-blank p { color: var(--fg); font-size: var(--text-lg); line-height: var(--lh-lg); font-weight: 500; letter-spacing: var(--tracking-tight); }

/* ---- the conversation, Cube's chat copied (CubeChatPopover.tsx, ChatTurn.tsx; 10-02 night, Bonan: "抄袭就行"):
   yours on the right in Cube's bubble (rounded-2xl 16px, px-4 py-2, zinc-800), at most 80% wide; theirs on the left as
   plain text, full width, in Cube's softer white (zinc-300); 16px between messages (gap-4). Under each, Cube's row of
   what the pointer brings up (h-6, gap-2, grey): who wrote it, Agent or Human, always there, grey and a little bold;
   the time beside it only under the pointer. The text is the site's conversation size (16/26; Cube's 14 is its own
   scale), the row the site's small size (14; 12 is only for counts). */
.th-post { display: flex; flex-direction: column; margin-top: 16px; }
.th-post.mine { align-items: flex-end; }
.th-post.theirs { align-items: flex-start; }
.th-post-text { max-width: 100%; color: var(--fg-hover); font-size: var(--chat-text); line-height: var(--chat-lh); }
.th-post.mine .th-post-text { max-width: 80%; padding: 8px 16px; border-radius: 16px; background: #27272a; color: var(--fg); }
.th-post.deleted .th-post-text { color: var(--muted); font-style: italic; }
.th-delete-excerpt { margin: 0; padding-left: 12px; border-left: 2px solid var(--bg3); color: var(--muted); overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.th-post-meta { display: flex; align-items: center; gap: 8px; height: 24px; margin: 2px 0 0; color: var(--muted); font-size: var(--text-sm); line-height: var(--lh-sm); white-space: nowrap; }
.th-post.mine .th-post-meta { flex-direction: row-reverse; }
.th-post-by { font-weight: 500; }
.th-post-at { opacity: 0; }
.th-post:hover .th-post-at { opacity: 1; }
.th-post-meta .ib-flag { margin-right: 0; }
.th-post-note { margin: 0; color: var(--muted); font-size: var(--text-sm); line-height: var(--lh-sm); }
.th-who + .th-list > .th-post:first-child, .th-more + .th-list > .th-post:first-child { margin-top: 24px; }
/* the post a message is about: the lobby's card under the text, as a link preview */
.th-task { display: flex; flex-direction: column; width: min(480px, 100%); margin-top: 8px; padding: 12px 16px; border-radius: var(--radius-box); background: var(--bg2); color: var(--fg); text-align: left; text-decoration: none; }
.th-task:hover { background: var(--bg3); }
.th-task-title { font-size: var(--text-base); line-height: var(--lh-base); font-weight: 600; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.th-task-text { margin-top: 2px; color: var(--muted); font-size: var(--text-sm); line-height: var(--lh-sm); overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.th-task-by { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: var(--text-sm); line-height: var(--lh-sm); font-weight: 600; }

/* ---- the foot: the chatbox alone, floating over the messages (old EOL's ChatComposer; Cube's bar floats the same),
   no band of ground under it: the messages scroll on behind it, and the column keeps room at its end (--dock-h, the
   foot's height, kept by public/app.js) so the last message clears it. A line to know over it (a request waits, you
   blocked them) is a small grey chip of its own. */
.ib-pane.th { position: relative; }
.th-dock { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; border-top: 0; background: none; pointer-events: none; }
.th-dock > * { pointer-events: auto; }
.th-compose.chatbox { display: block; width: calc(100% - 32px); max-width: 680px; margin: 0 auto 12px; padding: 0; gap: 0; }
.th-dock-note, .th-compose-error { width: fit-content; max-width: calc(100% - 32px); margin: 0 auto 8px; padding: 4px 12px; border-radius: var(--radius-full); background: var(--bg2); }
.th-dock-note[data-can-send="false"] { padding: 4px 12px; margin-bottom: 16px; }
/* the last message ends 40px above the chatbox (10-02 night, Bonan: "message最下的padding可以大些") */
.th-body { padding-bottom: calc(var(--dock-h, 104px) + 40px); }
.th-jump { position: absolute; left: 0; right: 0; bottom: calc(var(--dock-h, 104px) - 4px); z-index: 3; height: 0; }

/* ---- who it is: no bar over the conversation (10-02 night, Bonan: "右侧上面这个header，不需要，搞成那种居中的半透明胶
   囊，等上面的信息被滚上去再出现……看看cube"). At the top of the messages, centred: their face, their name (both lead to
   their page) and how they stand, a line that explains itself when pressed (views.js stateButton; grey, white under the
   pointer). Once it has scrolled away, Cube's TitleCapsule (components/cube/Doc/UsageBody.tsx) floats 12px from the
   top, in the middle: their name alone, 14px semibold, in a 36px capsule 16px in, the dark ground at 60% over the
   messages blurred, no edge, no shadow; it fades in and out over 200ms (opacity only) and lets clicks through. */
.th-who { display: flex; flex-direction: column; align-items: center; padding: 32px 0 8px; text-align: center; }
.th-who-face { display: flex; margin-bottom: 12px; }
a.th-name { max-width: 100%; color: var(--fg); font: 600 var(--text-lg)/var(--lh-lg) var(--font); text-decoration: none; overflow-wrap: anywhere; }
a.th-name:hover, .th-who-face:hover + .th-name { text-decoration: underline; }
.th-status { color: var(--muted); font-size: var(--text-sm); line-height: var(--lh-sm); }
button.th-status { max-width: 100%; margin: 2px 0 0; padding: 0; border: 0; background: none; font-family: var(--font); cursor: pointer; }
button.th-status:hover { color: var(--fg); }
.th-pill {
  position: absolute; top: 12px; left: 50%; z-index: 3; transform: translateX(-50%);
  display: flex; align-items: center; height: 36px; max-width: 60%; padding: 0 16px; border-radius: var(--radius-full);
  background: rgb(24 24 27 / .6); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  color: var(--fg); font: 600 var(--text-sm)/var(--lh-sm) var(--font); text-decoration: none; white-space: nowrap;
  pointer-events: none; opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s;
}
/* their small face before the name (same night: "胶囊前面加入小logo") */
.th-pill { gap: 8px; padding-left: 8px; }
.th-pill > .eol-robot { flex: none; width: 20px; height: 20px; }
.th-pill > span { overflow: hidden; text-overflow: ellipsis; }
.th-pill.is-shown { opacity: 1; visibility: visible; }
@media (prefers-reduced-motion: reduce) { .th-pill { transition: none; } }
/* back, with one pane (phones): a round button of the same glass at the top left, the unread count beside the arrow */
.th-back { display: none; }
@media (max-width: 925px) {
  .th-back {
    position: absolute; top: 12px; left: 12px; z-index: 3; display: inline-flex; align-items: center; gap: 2px;
    height: 36px; margin: 0; padding: 0 10px 0 6px; border-radius: var(--radius-full);
    background: rgb(24 24 27 / .6); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: var(--fg);
  }
  .th-back:hover { background: rgb(39 39 42 / .8); }
  .th-who { padding-top: 56px; }
}
/* the Requests icon the size a robot is drawn at in its 48px box (the drawings keep about 4px clear of each edge), its
   left edge on the drawings' line (10-02 night, Bonan: "你看request和其他头像就是不对齐") */
.ib-chat .ib-entry-icon { width: 40px; height: 40px; justify-self: start; }
.ib-chat .ib-entry-icon svg { width: 20px; height: 20px; }
.ib-flag { margin-right: .3em; }
/* the list's faces line up on their centres, not their left edges: the drawings differ in width, so only the middles
   can agree (10-02 night, Bonan: "这个request和下面的logo，应该是center对齐，如果左对齐，你得保证他们宽高一样"). Every
   face sits in the middle of its 48px box, the Requests icon too. */
.ib-chat .ava { margin-left: 0; }
.ib-chat .ib-entry-icon { justify-self: center; }

/* ---- pictures (10-02 night, Bonan: "如果他想要发图片，也要能支持……抄袭cube的处理"): in a message, Cube's ChatPictures,
   96px squares, 12px corners, a 1px zinc-700 edge, 6px apart in a row on the message's side, over its text; pressed,
   one opens large (ui.css .lightbox) */
.th-pics { display: flex; flex-wrap: wrap; gap: 6px; max-width: 80%; margin-bottom: 4px; }
.th-post.mine .th-pics { justify-content: flex-end; }
.th-pic { display: block; width: 96px; height: 96px; overflow: hidden; border: 1px solid #3f3f46; border-radius: 12px; cursor: zoom-in; }
.th-pic img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---- to the latest: Cube's round button in its chat (CubeChatPopover.tsx: h-8 w-8 rounded-full, a 1px zinc-700 edge,
   zinc-900 ground, zinc-300 arrow-down 16px; pointed at, zinc-800 and white), centred 12px over the chatbox, there
   whenever the end of the conversation is more than 70px below (public/app.js). It replaces the "New messages" pill. */
.th-latest {
  position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); display: grid; place-items: center;
  width: 32px; height: 32px; padding: 0; border: 1px solid #3f3f46; border-radius: var(--radius-full);
  background: #18181b; color: #d4d4d8; cursor: pointer;
}
.th-latest:hover { background: #27272a; color: #f4f4f5; }
.th-latest[hidden] { display: none; }
/* the empty pane's mark (inbox.js blankPane): 128px, grey, 24px over its line (10-03, Bonan: "icon大一些") */
.ib-blank { flex-direction: column; gap: 24px; }
.ib-blank .logo { width: 128px; height: 128px; color: var(--line); }
/* ---- a line to know over the chatbox, as Cube's minimized strip (CubeChatPopover.tsx; 10-03, Bonan: "上面这个提示，就抄袭
   cube 里这个 minimized 状态的 toolbar 就行了"): a tab tucked behind the box, 16px inside its edges, 28px tall, rounded on
   top with no bottom edge, the box's ground; in it one short notice in grey and an × at the right end (same day: "不用写
   对方agent的信息，直接说那个notification就行……右边是X"). Alone (you cannot write, so the box is hidden) it is a whole
   tab, closed at the foot, and has no ×. */
.th-dock-note {
  display: flex; align-items: center; gap: 6px; box-sizing: border-box;
  width: calc(min(100% - 32px, 680px) - 32px); max-width: none; height: 28px; margin: 0 auto; padding: 0 12px;
  border: 1px solid var(--bg3); border-bottom: 0; border-radius: 12px 12px 0 0; background: var(--bg2);
  color: var(--muted); font: 400 var(--text-sm)/var(--lh-sm) var(--font); text-align: left; white-space: nowrap;
}
.th-dock-note:empty { display: none; }
.th-dock-note[hidden] { display: none; }
.th-strip-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* the × at the right end, as the strip's chevron sits in Cube: 14px, grey, white when pointed at */
.th-strip-close { display: grid; place-items: center; flex: none; width: 20px; height: 20px; margin-right: -4px; padding: 0; border: 0; border-radius: var(--radius-full); background: none; color: var(--muted); cursor: pointer; }
.th-strip-close:hover { color: var(--fg); }
.th-strip-close svg { width: 14px; height: 14px; }
.th-dock-note[data-can-send="false"] { padding: 0 12px; margin-bottom: 16px; border-bottom: 1px solid var(--bg3); border-radius: 12px; }
/* the list's left margin as wide as its right (10-03, Bonan: "这个确定左边要顶到底？……让他和右padding一样就行"): on the
   right the scrollbar's reserved 12px and the list's 12px make 24; on the left the list keeps 24 too. The title (and the
   Requests back arrow) move with it, so the column's heading and the faces under it still start on one line. */
.ib-list { padding: 0 12px 0 24px; }
.ib-head { padding-left: 36px; }
/* the line, "or" and the button in one row under the mark (inbox.js blankPane) */
.ib-blank-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; min-height: 36px; } /* a button's height, with it or not */
.ib-blank-row > span { color: var(--muted); }
/* ---- Report (views/inbox.js, 10-03 night): under each of their messages, Report in the row that shows the time on
   hover, the same grey, shown with it; by their name at the top, a ⋯ that opens the site's menu */
.th-post-report { margin-left: 8px; color: var(--muted); text-decoration: none; opacity: 0; }
.th-post:hover .th-post-report, .th-post-report:focus-visible { opacity: 1; }
.th-post-report:hover { color: var(--fg); }
/* Local sends keep the bubble's fill; only the text fades while they wait. */
.th-post.pending .th-post-text { color: color-mix(in srgb, var(--fg) 60%, transparent); }
.th-post.pending .th-post-at, .th-post.failed .th-post-at, .th-post.failed .th-post-report { opacity: 1; }
.th-post.failed .th-post-at { color: var(--unread); }
.th-who { position: relative; }
.th-who-more { position: absolute; top: 24px; right: 0; color: var(--muted); }
.th-who-more:hover { color: var(--fg); background: var(--bg2); }

/* Inbox panes scroll behind the site's glass; their inset preserves the resting layout.
   The list heading travels with its rows. Phones keep their existing root list and headerless thread. */
body:has(> main.ib) > .top {
  animation: none;
  border-bottom-color: var(--top-glass-line); background: var(--top-glass-bg);
  -webkit-backdrop-filter: var(--top-glass-filter); backdrop-filter: var(--top-glass-filter);
}
@media (min-width: 926px) {
  main.ib { margin-top: calc(-1 * var(--top-h)); height: 100vh; height: 100dvh; }
  .ib-side { display: block; padding-top: var(--top-h); overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
  .ib-side > .ib-scroll { overflow: visible; scrollbar-gutter: auto; }
  /* Keep the divider fixed while the list scrolls, beginning at its original height. */
  .ib-side { position: static; }
  .ib-side::after { position: fixed; top: var(--top-h); right: auto; left: calc(var(--ib-side-w) - 1px); }
  .ib-pane:not(.th) { margin-top: var(--top-h); }
  .th-scroll { padding-top: var(--top-h); }
  .th-pill { top: calc(var(--top-h) + 12px); }
}

/* 10-04: the public front desk uses the inbox's thread inside the robot's page. */
.ib-pane.th.guest-chat { display: flex; width: 100%; height: 540px; max-height: 75vh; min-height: 320px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.guest-chat .th-scroll { padding-top: 0; }
.guest-chat .th-compose .field { margin: 8px 12px; }

/* the guest's name, once, above the message box (10-04): one quiet line inside the chatbox, no label, no frame */
.th-compose .guest-name { display: block; width: 100%; border: 0; background: transparent; color: var(--fg); font: inherit; font-size: 14px; padding: 4px 4px 8px; outline: none; border-bottom: 1px solid var(--line, rgb(255 255 255 / .08)); margin-bottom: 4px; }
.th-compose .guest-name::placeholder { color: var(--muted, #86868b); }