/* Round 7: ask and search in one field, mentions, chats in the rail, the camera following them,
   and the live row of calls. Loaded after styles.css and round6.css. */

/* ================================================================== the mention field */

/* A contenteditable line (mentions.js) dressed like the inputs it replaces. */
.mfield-wrap { position: relative; flex: 1; min-width: 0; }
.mfield { outline: none; color: var(--ink); font-size: 14px; line-height: 22px; white-space: pre-wrap; word-break: break-word; cursor: text; caret-color: var(--accent); }
.mfield:empty::before { content: attr(data-placeholder); color: var(--ink-3); pointer-events: none; }
.has-ghost .mfield:empty::before { content: ''; }

/* A chip: the entity's face or glyph and its name, one atom in the text. */
.mchip { display: inline-flex; align-items: center; gap: 4px; vertical-align: -3px; max-width: 220px; padding: 1px 7px 1px 2px; margin: 0 1px; border-radius: 999px; font-size: 12.5px; line-height: 18px; font-weight: 500; color: var(--accent-ink); background: color-mix(in srgb, var(--accent-soft) 80%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent); cursor: pointer; user-select: none; -webkit-user-select: none; white-space: nowrap; }
.mchip > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.mchip .face { --s: 16px !important; font-size: 7px; }
.mchip .face .face-ch { display: none; }
.mchip:hover { box-shadow: inset 0 0 0 1px var(--accent); }
.mchip.k-site, .mchip.k-asset, .mchip.k-team { color: var(--ink); background: color-mix(in srgb, var(--ink) 7%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 14%, transparent); }
.mchip.k-todo, .mchip.k-doc { color: #6a4b16; background: color-mix(in srgb, #e7c977 26%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, #c9a24a 40%, transparent); }
:root[data-theme='night'] .mchip.k-todo, :root[data-theme='night'] .mchip.k-doc { color: #f0d79a; }
.mchip.cmd { padding: 1px 8px; color: var(--card); background: var(--ink); box-shadow: none; font-weight: 600; cursor: default; }
.msg.me .mchip, .cm.me .mchip { color: var(--ink); background: color-mix(in srgb, var(--card) 88%, transparent); box-shadow: none; }
.msg.me .mchip.cmd, .cm.me .mchip.cmd { color: var(--card); background: color-mix(in srgb, var(--card) 22%, transparent); }
/* A glyph tile for things without a face (buildings, assets, teams, todos, documents, actions). */
.m-tile { --s: 22px; width: var(--s); height: var(--s); flex: none; border-radius: 6px; display: inline-grid; place-items: center; color: var(--ink-2); background: color-mix(in srgb, var(--ink) 7%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 9%, transparent); }
.mchip .m-tile { --s: 16px !important; border-radius: 4px; background: transparent; box-shadow: none; }

/* Picker and results rows (the dock's sheet and the chat's pop-up share them). */
.dock-results, .ch-pick { list-style: none; margin: 0; padding: 6px; }
:is(.dock-results, .ch-pick) [role=option] { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 8px; cursor: pointer; color: var(--ink-2); min-height: 34px; }
:is(.dock-results, .ch-pick) [role=option] > strong { font-weight: 500; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60%; }
:is(.dock-results, .ch-pick) [role=option] > small { margin-left: auto; color: var(--ink-3); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:is(.dock-results, .ch-pick) [aria-selected="true"] { background: var(--accent-soft); }
.m-row-text { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.3; }
.m-row-text strong { font-weight: 500; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-row-text small { font-size: 11px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-kind { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); flex: none; }
.m-head { display: flex; align-items: baseline; gap: 6px; padding: 6px 8px 4px; font-size: 11px; color: var(--ink-2); }
.m-head b { font-weight: 700; color: var(--accent-ink); }
.m-head span { margin-left: auto; font-size: 10px; color: var(--ink-3); }
.dock-results .r-group { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); font-weight: 600; padding: 9px 8px 3px; }
.dock-results .r-empty, .ch-pick .r-empty { padding: 8px 10px; }
.dock-results .r-ask { margin-bottom: 2px; }
.dock-results .r-ask > .ai-glyph { width: 13px; height: 13px; margin: 0 5px; }
.dock-results .r-ask strong { font-weight: 600; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.dock-results .r-mention { display: flex; align-items: center; gap: 10px; padding: 5px 8px; }

/* The mini card a chip shows on hover. */
.mcard { position: fixed; left: 0; top: 0; z-index: 70; width: 248px; padding: 10px 12px; border-radius: 13px; border: 1px solid var(--line); background: var(--card); box-shadow: var(--shadow); pointer-events: none; display: flex; flex-direction: column; gap: 5px; font-size: 12px; line-height: 1.4; animation: pop 120ms var(--ease); }
.mcard .mc-top { display: flex; gap: 9px; align-items: center; }
.mcard .mc-top > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.mcard .mc-top b { font-weight: 600; font-size: 13px; }
.mcard .mc-top small { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); }
.mcard p { margin: 0; color: var(--ink-2); }
.mcard .mc-hint { font-size: 10.5px; color: var(--ink-3); border-top: 1px solid color-mix(in srgb, var(--ink) 8%, transparent); padding-top: 5px; margin-top: 2px; }

/* ================================================================== the dock: ask + search */

.dock-field { display: flex; align-items: center; min-height: 34px; overflow: hidden; }
.dock-field .mfield { width: 100%; white-space: pre; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; padding: 6px 0; }
.dock-field .mfield::-webkit-scrollbar { display: none; }
.dock-kbd { flex: none; opacity: 0.8; }
.dock.has-text .dock-kbd, .dock.listening .dock-kbd { display: none; }
/* The results sheet opens upward from the bar, in the same glass; the chat steps aside for it. */
.dock-find { border: 1px solid var(--line); border-radius: 14px; background: var(--card); box-shadow: var(--shadow); max-height: min(55vh, 520px); display: flex; flex-direction: column; overflow: hidden; animation: rise-l 160ms var(--ease); }
.dock-find .dock-results { overflow: auto; min-height: 0; flex: 1; }
.df-foot { display: flex; gap: 12px; flex-wrap: wrap; padding: 6px 12px 7px; border-top: 1px solid color-mix(in srgb, var(--ink) 8%, transparent); font-size: 10.5px; color: var(--ink-3); }
.df-foot kbd { font-size: 9.5px; padding: 1px 4px; }
.dock.picking .df-foot { display: none; }
.dock.finding .dock-sheet { display: none; }
:root[data-glass] .dock-find.glass { border-radius: 14px; }
@media (max-width: 860px) {
  .df-foot span:nth-child(n + 3) { display: none; }
}

/* ================================================================== hover: a light and a name */

.ptip { position: fixed; left: 0; top: 0; z-index: 64; display: flex; gap: 7px; align-items: center; padding: 5px 10px 5px 6px; border-radius: 11px; border: 1px solid var(--line); background: var(--card); box-shadow: var(--shadow-sm); pointer-events: none; max-width: 280px; animation: pop 120ms var(--ease); }
.ptip > span:last-child { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.ptip b { font-size: 12px; font-weight: 600; }
.ptip small { font-size: 10.5px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-hit.p-hov { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent), 0 0 18px 4px color-mix(in srgb, var(--accent) 35%, transparent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.pf.p-hov .face, .r-face.p-hov .face { box-shadow: 0 0 0 2px var(--accent), 0 0 12px 2px color-mix(in srgb, var(--accent) 45%, transparent); }

/* The chat's glow on whoever it is with, in the world. */
.chat-glow { position: absolute; left: 0; top: 0; border-radius: 50%; pointer-events: none; box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--accent) 70%, transparent), 0 0 26px 8px color-mix(in srgb, var(--accent) 30%, transparent); background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 16%, transparent), transparent); animation: chat-glow 2.4s ease-in-out infinite; }
.chat-glow.site { border-radius: 18px; }
@keyframes chat-glow { 50% { box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--accent) 45%, transparent), 0 0 34px 12px color-mix(in srgb, var(--accent) 20%, transparent); } }

/* ================================================================== the rail: list, live row, chat */

.r-list { flex: 1; min-height: 0; display: flex; flex-direction: column; }
body.chatting .r-list { display: none; }
body.chatting .rail { width: var(--chat-w, 344px); }
body.narrow.chatting .rail.open { width: var(--chat-w); z-index: 31; box-shadow: 0 24px 60px -12px rgba(20, 28, 40, 0.45), inset 1px 1px 0 var(--glass-hi); }
/* Until round 6 the calls pushed the rail down; it keeps its full height now. */
.rail { top: 62px; }

/* The live row: one avatar per call (and later any live activity). */
.r-live { display: flex; align-items: flex-start; gap: 6px; padding: 2px 8px 8px 12px; margin-bottom: 4px; border-bottom: 1px solid color-mix(in srgb, var(--ink) 9%, transparent); }
.r-live[hidden] { display: none; }
.lv-label { margin-top: 12px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); font-weight: 600; flex: none; }
.lv-avs { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; min-width: 0; }
.lv-av { position: relative; width: 36px; height: 36px; border: 0; padding: 0; background: transparent; border-radius: 50%; display: grid; place-items: center; cursor: pointer; flex: none; touch-action: none; }
.lv-av .cs-face { --s: 28px !important; }
.lv-av .cs-face.ringing::before, .lv-av .cs-face.ringing::after { display: none; }
.lv-ring { position: absolute; inset: 1px; border-radius: 50%; border: 2px solid var(--line-2); pointer-events: none; }
.lv-av.ringing .lv-ring, .lv-av.ringing.out .lv-ring { border-color: var(--accent); animation: lv-ring 1.3s ease-in-out infinite; }
.lv-av.agent .lv-ring { border-color: #8fb3ef; }
.lv-av.agent.talking .lv-ring { border-color: #5b86d6; box-shadow: 0 0 0 3px color-mix(in srgb, #8fb3ef 35%, transparent); }
.lv-av.stuck .lv-ring { border-color: var(--orange); box-shadow: 0 0 0 3px color-mix(in srgb, var(--orange) 30%, transparent); animation: lv-ring 1.6s ease-in-out infinite; }
.lv-av.mine .lv-ring { border-color: var(--ok); }
.lv-av.held .lv-ring { border-style: dashed; }
.lv-av.missed .lv-ring { border-color: var(--danger); }
.lv-av.missed .cs-face { opacity: 0.75; }
.lv-av.folded { opacity: 0.86; }
.lv-av:not(.folded)::after { content: ''; position: absolute; left: 50%; bottom: -5px; width: 12px; height: 2px; border-radius: 2px; transform: translateX(-50%); background: var(--accent); }
.lv-agent { position: absolute; right: -2px; top: -2px; }
.lv-t { position: absolute; left: 50%; bottom: -3px; transform: translateX(-50%); font-size: 8.5px; line-height: 1; font-weight: 600; font-variant-numeric: tabular-nums; padding: 1px 3px; border-radius: 5px; background: var(--card); color: var(--ink-2); box-shadow: 0 0 0 1px var(--line); white-space: nowrap; }
.lv-av.missed .lv-t { color: #fff; background: var(--danger); box-shadow: none; }
.lv-av.stuck .lv-t { color: #7a4515; background: var(--orange-soft); }
.lv-hold { position: absolute; inset: -2px; border-radius: 50%; pointer-events: none; background: conic-gradient(var(--ok) calc(var(--hold, 0) * 360deg), transparent 0); -webkit-mask: radial-gradient(closest-side, transparent 82%, #000 84%); mask: radial-gradient(closest-side, transparent 82%, #000 84%); opacity: 0; }
.lv-av.holding .lv-hold { opacity: 1; }
.lv-av:hover .cs-face { filter: brightness(1.04); box-shadow: 0 0 0 2px var(--card), 0 0 0 3px color-mix(in srgb, var(--accent) 40%, transparent); }
.lv-all { margin-top: 5px; width: 26px; height: 26px; flex: none; border: 0; border-radius: 8px; background: transparent; display: grid; place-items: center; color: var(--ink-2); cursor: pointer; }
.lv-all:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--ink); }
@keyframes lv-ring { 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); } }
/* The strip: the avatars stack at its top. */
.rail:not(.open) .r-live { flex-direction: column; padding: 0 0 8px; margin: 0 8px 4px; }
body.chatting .rail .r-live { flex-direction: row; padding: 2px 8px 8px 12px; margin: 0 0 4px; }
.rail:not(.open) .lv-label { margin-top: 0; font-size: 7.5px; letter-spacing: 0.05em; }
.rail:not(.open) .lv-all { margin-top: 0; }
.rail:not(.open) .lv-avs { flex-direction: column; align-items: center; gap: 9px; }
.rail:not(.open) .lv-av:not(.folded)::after { left: auto; right: -5px; bottom: 50%; width: 2px; height: 12px; transform: translateY(50%); }
body.chatting .rail .lv-avs { flex-direction: row; }
body.chatting .rail .lv-av:not(.folded)::after { left: 50%; right: auto; bottom: -5px; width: 12px; height: 2px; transform: translateX(-50%); }

/* The call cards float beside the rail now, at the left of the canvas gap (and beside the chat
   pane when one is open), never over the rail, the side panel or the camera column. */
.callstack { left: calc(var(--gap-l) + 10px); top: 62px; width: min(300px, calc(var(--gap-w) - 80px)); max-height: calc(100vh - 150px); overflow-y: auto; overflow-x: hidden; scrollbar-width: none; padding: 1px; transition: left 220ms var(--ease); }
.callstack::-webkit-scrollbar { display: none; }
body.focus-mode .callstack { left: 10px; }
/* With cards in the gap, the depth control moves down to the lower left of the gap, above the dock row. */
body.has-calls .depthnav { top: auto; bottom: 118px; transform: none; }
.cs-pill.missed { box-shadow: 0 0 0 1px color-mix(in srgb, var(--danger) 45%, transparent), 0 14px 30px -14px rgba(150, 50, 40, 0.35); }
.cs-x { font-size: 15px; line-height: 1; background: color-mix(in srgb, var(--ink) 7%, var(--card)); color: var(--ink-2); }
.cs-x:hover { background: var(--ink); color: var(--card); }
body.narrow.chatting .callstack { left: calc(var(--chat-w) + 20px); width: min(300px, calc(100vw - var(--chat-w) - var(--rail-r) - 30px)); }
@media (max-width: 999px) {
  .callstack { width: min(300px, calc(100vw - var(--gap-l) - var(--rail-r) - 24px)); }
}

/* ------------------------------------------------------------------ the chat pane */

.chat { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.chat[hidden] { display: none; }
.chat > .ai-line { top: 0; }
.ch-head { padding: 0 10px 8px 12px; display: flex; flex-direction: column; gap: 6px; border-bottom: 1px solid color-mix(in srgb, var(--ink) 8%, transparent); }
.ch-bar { display: flex; align-items: center; justify-content: space-between; }
.ch-back { display: flex; align-items: center; gap: 4px; border: 0; background: transparent; padding: 4px 8px 4px 2px; margin-left: -4px; border-radius: 8px; cursor: pointer; font-weight: 500; color: var(--ink-2); font-size: 12px; }
.ch-back:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--ink); }
.ch-id { display: flex; gap: 10px; align-items: center; min-width: 0; }
.ch-face { border-radius: 50%; display: grid; place-items: center; flex: none; cursor: pointer; }
.ch-who { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.ch-who b { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-who small { font-size: 11px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; gap: 4px; align-items: center; }
.ch-who .ch-st { color: var(--ink-3); }
.ch-details { padding: 10px 12px; display: flex; flex-direction: column; gap: 10px; border-bottom: 1px solid color-mix(in srgb, var(--ink) 8%, transparent); max-height: 46%; overflow: auto; flex: none; }
.ch-details[hidden] { display: none; }
.ch-acts { display: flex; flex-wrap: wrap; gap: 4px; }
.ch-acts .btn svg { margin-right: 3px; vertical-align: -2px; }
.ch-log { list-style: none; margin: 0; padding: 10px 12px; flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 7px; }
.ch-log .cm { max-width: 90%; }
.ch-empty { color: var(--ink-3); font-size: 12px; padding: 18px 0; text-align: center; }
.ch-compose { position: relative; padding: 8px 10px 4px; border-top: 1px solid color-mix(in srgb, var(--ink) 8%, transparent); }
.ch-form { display: flex; flex-direction: column; gap: 6px; }
.ch-form .ghost-field { height: auto; min-height: 36px; max-height: 110px; overflow: hidden; border-radius: 11px; display: grid; }
/* The field and its ghost share one grid cell, so the box grows to whichever is longer. */
.ch-form .ghost-field > .mfield, .ch-form .ghost-field > .gh-layer { grid-area: 1 / 1; min-width: 0; }
.ch-form .mfield { padding: 7px 10px; font-size: 13px; line-height: 20px; max-height: 108px; overflow-y: auto; position: relative; z-index: 1; }
.ch-form .gh-layer { position: relative; overflow: hidden; pointer-events: none; }
.ch-form .gh { position: static; padding: 7px 10px; display: block; white-space: pre-wrap; word-break: break-word; font-size: 13px; line-height: 20px; }
.ch-tools { display: flex; align-items: center; gap: 6px; }
.ch-foot { flex: 1; min-width: 0; font-size: 10px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-foot .ai-glyph { margin-right: 2px; }
.ch-foot kbd { font-size: 9px; padding: 1px 3px; }
.ch-send { white-space: nowrap; }
.ch-send svg { margin-right: 4px; vertical-align: -2px; }
/* The picker pops up over the history, from the composer. */
.ch-pick { position: absolute; left: 8px; right: 8px; bottom: calc(100% + 4px); max-height: min(300px, 50vh); overflow: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--card); box-shadow: var(--shadow); z-index: 3; animation: pop 120ms var(--ease); }
.ch-pick[hidden] { display: none; }
.ch-pick .m-head span { display: none; }
/* The recorder, over the composer while a voice note is held. */
.voice.in-pane .v-pill { border-radius: 12px; padding: 8px 12px; justify-content: flex-start; }
.voice.in-pane .v-wave { flex: 1; min-width: 0; }
.voice.in-pane .v-hint { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45%; }
:root:not([data-glass='off']) body.dark :is(.mcard, .ptip, .ch-pick).glass { background-color: rgb(var(--glass-tint) / 0.9); }

@media (prefers-reduced-motion: reduce) {
  .chat-glow, .lv-av .lv-ring { animation: none !important; }
}

/* The stack scrolls, and a scroll container clips whatever spills past its padding box, so the cards'
   shadows were cut at its edges. Room for the shadow on every side, cancelled by an equal negative
   margin so the cards stay where they were; content-box keeps the widths above meaning the cards' width.
   The padding is click-through because the stack itself has pointer-events: none. */
.callstack { box-sizing: content-box; padding: 16px 24px 32px; margin: -16px 0 0 -24px; max-height: calc(100vh - 198px); }

/* ------------------------------------------------------------------ the quick message (round 7 follow-up)
   Hover a face in the people rail: a small field opens beside the rail, level with the face
   (js/quick.js). Positioned with left/top, because the pop-in animation owns the transform. */
.qm { position: fixed; left: 0; top: 0; z-index: 62; width: min(340px, calc(100vw - 16px)); border-radius: 15px; padding: 10px 11px 8px; display: flex; flex-direction: column; gap: 7px; border: 1px solid var(--line); background: var(--card); box-shadow: var(--shadow); animation: qm-in 150ms var(--ease); }
.qm[hidden] { display: none; }
.qm > .ai-line { top: 0; }
@keyframes qm-in { from { opacity: 0; transform: translateX(-6px); } }
/* A small notch pointing back at the face. */
.qm-tail { position: absolute; left: -6px; top: calc(var(--ty, 24px) - 6px); width: 11px; height: 11px; transform: rotate(45deg); background: inherit; border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); border-radius: 0 0 0 3px; pointer-events: none; }
:root:not([data-glass='off']) .qm-tail { background: rgb(var(--glass-tint) / 0.92); border-color: var(--glass-rim); }
.qm-head { display: flex; align-items: center; gap: 9px; min-width: 0; }
.qm-who { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.28; }
.qm-who b { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qm-who small { font-size: 10.5px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qm-open { flex: none; font-size: 11px; padding: 4px 7px; margin-right: -4px; }
.qm-last { margin: 0; font-size: 11.5px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 5px 8px; border-radius: 9px; background: color-mix(in srgb, var(--ink) 4.5%, transparent); }
.qm-form { position: relative; display: flex; flex-direction: column; gap: 6px; }
.qm-form .ghost-field { height: auto; min-height: 34px; max-height: 92px; overflow: hidden; border-radius: 10px; display: grid; }
.qm-form .ghost-field > .mfield, .qm-form .ghost-field > .gh-layer { grid-area: 1 / 1; min-width: 0; }
.qm-form .mfield { padding: 6px 10px; font-size: 13px; line-height: 20px; max-height: 90px; overflow-y: auto; position: relative; z-index: 1; }
.qm-form .gh-layer { position: relative; overflow: hidden; pointer-events: none; }
.qm-form .gh { position: static; padding: 6px 10px; display: block; white-space: pre-wrap; word-break: break-word; font-size: 13px; line-height: 20px; }
.qm-tools { display: flex; align-items: center; gap: 6px; }
.qm-foot { flex: 1; min-width: 0; font-size: 10px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qm-foot .ai-glyph { margin-right: 2px; }
.qm-foot kbd { font-size: 9px; padding: 1px 3px; }
.qm-ok { display: inline-flex; align-items: center; gap: 4px; color: var(--ok); font-weight: 600; font-size: 11px; animation: pop 160ms var(--ease); }
.qm-mic { width: 30px; height: 30px; }
.qm-send { white-space: nowrap; }
.qm-send svg { margin-right: 4px; vertical-align: -2px; }
.qm.sent .qm-last { color: var(--ink); }
/* The picker opens above the field, or below it near the top of the window. */
.qm .qm-pick { left: 0; right: 0; bottom: calc(100% + 4px); max-height: min(260px, 40vh); }
/* Denser than the popover: it sits over the popover's own header. */
:root:not([data-glass='off']) .qm .qm-pick.glass { background-color: rgb(var(--glass-tint) / 0.96); }
.qm.pick-below .qm-pick { bottom: auto; top: calc(100% + 4px); }
:root:not([data-glass='off']) body.dark .qm.glass, :root:not([data-glass='off']) body.dark .qm-pick.glass { background-color: rgb(var(--glass-tint) / 0.9); }
/* "Sent" on the rail face; the unread it cleared hides until the rail reorders (once you leave it). */
.qm-read .r-badge, .qm-read .r-arc { display: none; }
.r-row.qm-read .r-text b { font-weight: 500; }
.r-sent { display: inline-flex; align-items: center; gap: 3px; flex: none; font-size: 10px; font-weight: 600; color: var(--ok); animation: pop 160ms var(--ease); }
.r-face .r-sent, .lv-av .r-sent { position: absolute; right: -3px; bottom: -3px; width: 15px; height: 15px; padding: 0; border-radius: 50%; justify-content: center; background: var(--ok); color: #fff; box-shadow: 0 0 0 2px var(--card); }
.r-face .r-sent span, .lv-av .r-sent span { display: none; }
.r-face .r-sent svg, .lv-av .r-sent svg { width: 9px; height: 9px; }
@media (prefers-reduced-motion: reduce) {
  .qm, .qm-ok, .r-sent { animation: none !important; }
}