/* FILE: ticketbook/ui/detail.css
 *
 * One ticket, in a popover centred over the list (user, 2026-10-02): a
 * compact header of marks and short values, the THREAD with the requester on
 * the left, IT's private COMMENTS in a rail on the right, and a composer under
 * each — so where a sentence goes is a matter of where it was typed.
 *
 * Labels are tooltips (`data-tip`, drawn below) and accessible names, not
 * words in plain view; what must be seen — who reads the box, a truncation, an
 * error — is set in plain view and never only in a tooltip.
 *
 * The popover is the one surface on the desk that floats, so it is the one
 * that takes a larger corner and a shadow: everything else stays a ruled row
 * on its own ground.
 */

/* ── The dialog ──────────────────────────────────────────────────────────── */

.popover {
  width: min(1120px, calc(100vw - 48px));
  height: min(880px, calc(100dvh - 48px));
  max-width: none;
  max-height: none;
  margin: auto;
  padding: 0;
  overflow: hidden;
  color: var(--bone-1);
  background: var(--ink-1);
  border: var(--w-rule) solid var(--rule-3);
  border-radius: 10px;
  box-shadow: 0 24px 64px -16px rgb(0 0 0 / 0.5), 0 2px 8px rgb(0 0 0 / 0.18);
  view-transition-name: ticket;
}

.popover::backdrop {
  background: rgb(6 7 9 / 0.55);
}

:root[data-theme="light"] .popover::backdrop {
  background: rgb(24 26 32 / 0.28);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]):not([data-theme="light"]) .popover::backdrop {
    background: rgb(24 26 32 / 0.28);
  }
}

.popover__mount {
  height: 100%;
}

.pop {
  position: relative;
  height: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.pop .vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.detail__svg {
  display: inline-flex;
  line-height: 0;
}

.detail__svg svg {
  width: 14px;
  height: 14px;
}

/* ── Tooltips ────────────────────────────────────────────────────────────── */
/*
 * Drawn here rather than left to `title`, which waits a second and a half,
 * cannot be reached from the keyboard and cannot be themed. Shown on hover and
 * on keyboard focus, after a short pause so a pointer passing over a row does
 * not flicker labels at it.
 */

.pop [data-tip] {
  position: relative;
}

.pop [data-tip]:not([data-tip=""])::after {
  content: attr(data-tip);
  position: absolute;
  left: 0;
  top: calc(100% + 6px);
  z-index: 40;
  width: max-content;
  max-width: 300px;
  padding: 5px 8px;
  border-radius: var(--radius-sm);
  background: var(--bone-1);
  color: var(--ink-1);
  font-family: var(--font-text);
  font-size: var(--t-small);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: normal;
  text-transform: none;
  white-space: normal;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity 120ms ease-out, transform 120ms ease-out;
}

.pop [data-tip-end]::after {
  left: auto;
  right: 0;
}

.pop [data-tip]:hover::after,
.pop [data-tip]:focus-visible::after,
.pop [data-tip]:has(> :focus-visible)::after,
.pop [data-tip]:has(dd :focus-visible)::after {
  opacity: 1;
  transform: none;
  transition-delay: 350ms;
}

/* ── Header ──────────────────────────────────────────────────────────────── */

.pop__head {
  position: relative;
  z-index: 2;
  padding: var(--s-3) var(--s-5) var(--s-3);
  border-bottom: var(--w-rule) solid var(--rule-2);
}

.pop__bar {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 28px;
}

.pop__status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--bone-2);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pop__ref {
  font-size: var(--t-small);
}

.pop__tools {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.pop__icon {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bone-2);
  background: transparent;
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
}

.pop__icon[hidden] {
  display: none;
}

.pop__icon:hover {
  color: var(--bone-1);
  background: var(--ink-3);
}

.pop__icon .detail__svg svg {
  width: 16px;
  height: 16px;
}

.pop__title {
  margin: var(--s-1) 0 var(--s-3);
  max-width: 72ch;
  color: var(--bone-1);
  font-size: var(--t-head);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

/* Focus lands here when the popover opens; a pointer-driven open should not
   ring the title, a keyboard one should (the shared ring in app.css). */
.pop__title:focus:not(:focus-visible) {
  outline: none;
}

.pop__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
}

.pop__facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-1) var(--s-4);
  margin: 0;
  min-width: 0;
}

.pfact {
  min-width: 0;
  max-width: 100%;
}

.pfact[hidden] {
  display: none;
}

.pfact dd {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  min-height: 26px;
  flex-wrap: wrap;
  max-width: 100%;
  color: var(--bone-1);
  font-size: var(--t-base);
}

/* Values keep to one line where they fit and break where they do not: a
   directory address is longer than a phone is wide. */
.pfact dd > span,
.pfact dd > a {
  min-width: 0;
  overflow-wrap: anywhere;
}

.pfact__g {
  display: inline-flex;
  color: var(--bone-3);
  line-height: 0;
}

.pfact__g:empty {
  display: none;
}

.pfact__g .notch--urgent {
  color: var(--rubric);
}

.pfact__fig {
  font-family: var(--font-figure);
  font-size: var(--t-small);
  font-variant-numeric: tabular-nums;
}

.pfact__link {
  color: var(--bone-1);
  text-decoration: none;
}

.pfact__link[href]:hover {
  color: var(--live-ink);
  text-decoration: underline;
}

.pfact__quiet {
  color: var(--bone-3);
}

.pfact__quiet:empty,
.pfact__check[hidden] {
  display: none;
}

.pfact__check {
  display: inline-flex;
  color: var(--bone-3);
}

.pfact__check[data-check="mismatch"] {
  color: var(--rubric);
}

.pfact[data-check="mismatch"] .pfact__quiet {
  color: var(--rubric-ink);
}

.pfact__select {
  font: inherit;
  color: inherit;
  max-width: 18ch;
  margin-left: -4px;
  padding: 2px 4px;
  background: transparent;
  border: var(--w-rule) solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
}

.pfact__select:hover {
  border-color: var(--rule-2);
  background: var(--ink-3);
}

.pfact__select option {
  color: var(--bone-1);
  background: var(--ink-1);
}

.pop__claim {
  margin: 0;
}

.pop__claim .tbtn {
  padding: 6px var(--s-3);
}

.pop__claim .tbtn[hidden] {
  display: none;
}

/* ── Body: the thread and the comments rail ──────────────────────────────── */

.pop__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  min-height: 0;
}

.pop__chain,
.pop__rail {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-height: 0;
}

.pop__rail {
  background: var(--ink-2);
  border-left: var(--w-rule) solid var(--rule-2);
}

.pop__colhead {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin: 0;
  padding: var(--s-3) var(--s-5) var(--s-1);
  color: var(--bone-3);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pop__count {
  font-family: var(--font-figure);
  letter-spacing: 0;
}

.pop__scroll {
  /* Hidden across, not auto: a tooltip at rest still has a box, and an auto
     overflow drew a horizontal scrollbar for the width of one nobody hovered. */
  overflow-x: hidden;
  overflow-y: auto;
  min-height: 0;
  padding: 0 var(--s-5) var(--s-4);
  overscroll-behavior: contain;
}

.pop__hint {
  margin: var(--s-2) 0;
  color: var(--bone-2);
  font-size: var(--t-small);
}

.pop__hint:empty {
  display: none;
}

/* The thread ----------------------------------------------------------------- */

/* THE THREAD READS LIKE A MESSAGING APP (user, 2026-10-23), seen from the
   desk: our side — the bot and IT — speaks from the left, the requester
   answers from the right. Each message is a bubble with its speaker's glyph
   beside it; status events stay quiet single lines centred between them. The
   bubbles are the one rounded thing in the thread, and they are messages,
   not panels. */

.chain {
  list-style: none;
  margin: 0;
  padding: var(--s-2) 0 0;
}

.chain__item {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: start;
  gap: var(--s-2);
  padding: var(--s-1) 0;
}

/* A new speaker gets air; the same speaker's next MESSAGE stacks close, and
   their glyph is not drawn twice. Only words run on: a resolution, a file or
   the filed request carries a glyph of its own meaning, so it never joins a
   run (styles.test.js holds this). */
.chain__item:not([data-kind="event"]):not([data-kind="answer"]) {
  margin-top: var(--s-2);
}

.chain__item[data-side="bot"][data-kind="turn"] + .chain__item[data-side="bot"][data-kind="turn"],
.chain__item[data-side="desk"][data-kind="note"] + .chain__item[data-side="desk"][data-kind="note"],
.chain__item[data-side="requester"]:is([data-kind="turn"], [data-kind="note"]) + .chain__item[data-side="requester"]:is([data-kind="turn"], [data-kind="note"]) {
  margin-top: 0;
}

.chain__item[data-side="bot"][data-kind="turn"] + .chain__item[data-side="bot"][data-kind="turn"] .chain__g,
.chain__item[data-side="desk"][data-kind="note"] + .chain__item[data-side="desk"][data-kind="note"] .chain__g,
.chain__item[data-side="requester"]:is([data-kind="turn"], [data-kind="note"]) + .chain__item[data-side="requester"]:is([data-kind="turn"], [data-kind="note"]) .chain__g {
  visibility: hidden;
}

/* The requester's side: glyph on the outside, bubble against it. */
.chain__item[data-side="requester"]:is([data-kind="turn"], [data-kind="note"], [data-kind="file"]) {
  grid-template-columns: minmax(0, 1fr) 18px;
}

.chain__item[data-side="requester"]:is([data-kind="turn"], [data-kind="note"], [data-kind="file"]) .chain__g {
  grid-column: 2;
  grid-row: 1;
}

.chain__item[data-side="requester"]:is([data-kind="turn"], [data-kind="note"], [data-kind="file"]) .chain__main {
  grid-column: 1;
  grid-row: 1;
  justify-self: end;
}

/* The filed request is the bot's account of the ask, written for IT — not
   something the requester said, and not a chat line of ours. It stands as a
   record across the middle, square-tailed, between the chat and what
   followed. */
.chain__item[data-kind="filed"] {
  grid-template-columns: 18px minmax(0, 68ch);
  justify-content: center;
}

.chain__item[data-kind="filed"] .chain__main {
  justify-self: stretch;
  max-width: none;
  background: var(--ink-2);
  border-color: var(--rule-3);
  border-radius: var(--radius);
}

.chain__g {
  display: flex;
  justify-content: center;
  padding-top: 9px;
  color: var(--bone-3);
}

.chain__g .detail__svg svg {
  width: 16px;
  height: 16px;
}

.chain__item[data-side="desk"] .chain__g {
  color: var(--live-ink);
}

.chain__item[data-side="bot"] .chain__g {
  color: var(--bot-ink);
}

.chain__item[data-kind="resolution"] .chain__g .mark {
  color: var(--live-ink);
}

.chain__item[data-tone="correction"] .chain__g {
  color: var(--rubric);
}

.chain__main {
  min-width: 0;
}

/* The bubble. The corner nearest the speaker's glyph is tucked in, the way a
   message points at whoever sent it. `:where` keeps this the weakest rule
   here, so each side's ground and corner below win over it. */
.chain__item:where(:not([data-kind="event"]):not([data-kind="answer"])) .chain__main {
  justify-self: start;
  max-width: min(85%, 68ch);
  padding: var(--s-2) var(--s-3);
  background: var(--ink-3);
  border: var(--w-rule) solid var(--rule-2);
  border-radius: 4px 12px 12px 12px;
}

.chain__item[data-side="requester"]:is([data-kind="turn"], [data-kind="note"], [data-kind="file"]) .chain__main {
  border-radius: 12px 4px 12px 12px;
}

.chain__item[data-side="desk"] .chain__main {
  background: var(--live-wash);
  border-color: color-mix(in srgb, var(--live) 30%, transparent);
}

.chain__item[data-side="bot"] .chain__main {
  background: var(--bot-wash);
  border-color: var(--bot-rule);
}

/* What IT sent as the fix is the one desk message with a full blue edge. */
.chain__item[data-kind="resolution"] .chain__main {
  border-color: var(--live);
}

/* A file, or a picture opened full width, needs the bubble's whole width. */
.chain__item[data-kind="file"] .chain__main,
.chain__item .chain__main:has(.thumb[aria-expanded="true"]) {
  width: min(85%, 68ch);
}

.chain__meta {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 18px;
  margin-bottom: 2px;
}

.chain__who {
  color: var(--bone-1);
  font-size: var(--t-small);
  font-weight: 600;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* A tooltip cannot escape an element that clips its own overflow. */
.chain__who[data-tip] {
  overflow: visible;
}

.chain__item[data-side="desk"] .chain__who {
  color: var(--live-ink);
}

.chain__item[data-side="bot"] .chain__who {
  color: var(--bot-ink);
}

.chain__sent {
  display: inline-flex;
  color: var(--live-ink);
}

.chain__sent[data-sent="false"] {
  color: var(--rubric-ink);
}

.chain__time {
  color: var(--bone-3);
  font-family: var(--font-figure);
  font-size: var(--t-micro);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.chain__kb {
  margin: -3px -6px -3px auto;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bot-ink);
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
  opacity: 0;
}

.chain__item:hover .chain__kb,
.chain__kb:focus-visible {
  opacity: 1;
}

.chain__kb:hover {
  color: var(--bone-1);
  background: var(--bot-rule);
}

@media (hover: none) {
  .chain__kb {
    opacity: 1;
  }
}

.chain__text {
  margin: 0;
  max-width: 68ch;
  color: var(--bone-1);
  font-size: var(--t-base);
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* The bot's words are its own colour, as clear as anyone's — told apart by
   hue, never by being faded. */
.chain__item[data-side="bot"] .chain__text {
  color: var(--bot-ink);
}

/* Status events are the quiet lines between the messages: one line, small,
   centred — they punctuate the conversation rather than take part in it. */
.chain__item[data-kind="event"],
.chain__item[data-kind="answer"] {
  grid-template-columns: auto auto;
  justify-content: center;
  align-items: baseline;
  padding: var(--s-1) 0;
}

.chain__item[data-kind="event"] .chain__g,
.chain__item[data-kind="answer"] .chain__g {
  align-self: center;
  padding-top: 0;
}

.chain__item[data-kind="event"] + .chain__item:not([data-kind="event"]):not([data-kind="answer"]),
.chain__item[data-kind="answer"] + .chain__item:not([data-kind="event"]):not([data-kind="answer"]) {
  margin-top: var(--s-3);
}

.chain__event {
  margin: 0;
  color: var(--bone-2);
  font-size: var(--t-small);
  line-height: 1.5;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.chain__event .chain__time {
  margin-left: var(--s-2);
}

.chain__item[data-kind="answer"] .chain__event {
  color: var(--bone-1);
  font-weight: 500;
}

.chain__details {
  margin-top: var(--s-1);
  font-size: var(--t-small);
}

.chain__details summary {
  color: var(--bone-3);
  cursor: pointer;
}

.chain__details .chain__text {
  margin-top: var(--s-1);
  color: var(--bone-2);
  font-size: var(--t-small);
}

/* Attachments -------------------------------------------------------------- */

.file__bar {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-top: 2px;
}

.file__size {
  color: var(--bone-3);
  font-family: var(--font-figure);
  font-size: var(--t-micro);
}

.file__size:empty {
  display: none;
}

.file__download {
  padding: 3px 5px;
}

.file__note {
  margin: var(--s-1) 0 0;
  color: var(--bone-2);
  font-size: var(--t-small);
}

.file__note:empty {
  display: none;
}

.file__view {
  margin-top: var(--s-2);
}

.file__view[hidden] {
  display: none;
}

.file__img {
  display: block;
  max-width: 100%;
  max-height: 380px;
  background: var(--ink-2);
  border: var(--w-rule) solid var(--rule-2);
  border-radius: var(--radius);
}

.file__pdf {
  display: block;
  width: 100%;
  height: 520px;
  background: var(--ink-2);
  border: var(--w-rule) solid var(--rule-2);
  border-radius: var(--radius);
}

.file__csv {
  max-width: 100%;
}

.file__csv table {
  display: block;
  max-height: 320px;
  overflow: auto;
  border-collapse: collapse;
  border: var(--w-rule) solid var(--rule-2);
  border-radius: var(--radius);
  font-size: var(--t-small);
  font-variant-numeric: tabular-nums;
}

.file__csv th,
.file__csv td {
  padding: 4px var(--s-2);
  border-bottom: var(--w-rule) solid var(--rule-1);
  text-align: start;
  white-space: nowrap;
  max-width: 28ch;
  overflow: hidden;
  text-overflow: ellipsis;
}

.file__csv th {
  position: sticky;
  top: 0;
  color: var(--bone-2);
  font-weight: 600;
  background: var(--ink-2);
}

.file__trunc {
  margin: var(--s-1) 0 0;
  color: var(--bone-2);
  font-size: var(--t-small);
}

/* The comments rail -------------------------------------------------------- */

.notes {
  list-style: none;
  margin: 0;
  padding: 0;
}

.note {
  padding: var(--s-3) 0;
  border-top: var(--w-rule) solid var(--rule-1);
}

.note:first-child {
  border-top: 0;
}

.note__meta {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  margin-bottom: 2px;
}

.note__who {
  color: var(--bone-1);
  font-size: var(--t-small);
  font-weight: 600;
}

.note__body {
  margin: 0;
  color: var(--bone-1);
  font-size: var(--t-small);
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* A response's pictures, under its words. A press opens one full width. */
.chain__pics {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--s-2);
  margin-top: var(--s-2);
}

.chain__picsmark {
  align-self: center;
}

.thumb {
  display: block;
  padding: 0;
  background: var(--ink-2);
  border: var(--w-rule) solid var(--rule-2);
  border-radius: var(--radius);
  cursor: zoom-in;
}

.thumb:hover {
  border-color: var(--rule-3);
}

.thumb__img {
  display: block;
  max-width: 160px;
  max-height: 120px;
  border-radius: inherit;
}

.thumb__img:not([src]) {
  width: 96px;
  height: 64px;
  visibility: hidden;
}

.thumb[aria-expanded="true"] {
  flex-basis: 100%;
  cursor: zoom-out;
}

.thumb[aria-expanded="true"] .thumb__img {
  max-width: 100%;
  max-height: 380px;
}

/* ── Composers ───────────────────────────────────────────────────────────── */

.composer {
  margin: 0;
  padding: var(--s-3) var(--s-5) var(--s-4);
  border-top: var(--w-rule) solid var(--rule-2);
  background: var(--ink-1);
}

.composer--private {
  background: var(--ink-2);
}

.composer__modes,
.kbnote__kinds {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
}

.mode {
  position: relative;
  display: inline-flex;
}

.mode[hidden] {
  display: none;
}

.mode input {
  position: absolute;
  opacity: 0;
  inset: 0;
  margin: 0;
  cursor: pointer;
}

.mode span {
  padding: 4px 10px;
  border: var(--w-rule) solid transparent;
  border-radius: var(--radius);
  color: var(--bone-2);
  font-size: var(--t-small);
  font-weight: 500;
}

.mode:hover span {
  color: var(--bone-1);
  background: var(--ink-3);
}

.mode input:checked + span {
  color: var(--bone-1);
  background: var(--ink-3);
  border-color: var(--rule-3);
}

.mode input:focus-visible + span {
  outline: 2px solid var(--live-ink);
  outline-offset: 1px;
}

/* WHO READS THIS, in words, beside the box. The one thing in the composer that
   is never a tooltip: a response leaves the building and a comment does not. */
.composer__to {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: var(--s-2) 0 6px;
  color: var(--bone-2);
  font-size: var(--t-small);
  font-weight: 600;
}

.composer__needs-reply {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin: -.35rem 0 .65rem;
  color: var(--quiet);
  font-size: .82rem;
}
.composer__needs-reply input { accent-color: var(--accent); }

.composer__to[data-sent="true"] {
  color: var(--live-ink);
}

.composer__to[data-unreachable="true"] {
  color: var(--rubric-ink);
}

.composer__g {
  display: inline-flex;
}

.composer__box {
  display: block;
  width: 100%;
  min-height: 64px;
  max-height: 40vh;
  resize: vertical;
  padding: var(--s-2) 10px;
  color: var(--bone-1);
  background: var(--ink-0);
  border: var(--w-rule) solid var(--rule-2);
  border-radius: var(--radius);
  font: inherit;
  font-size: var(--t-base);
  line-height: 1.5;
}

.composer__box:hover {
  border-color: var(--rule-3);
}

.composer__box:focus-visible {
  outline: 2px solid var(--live-ink);
  outline-offset: -1px;
}

/* A box that sends wears the live colour on its edge, so the difference is
   visible even to somebody who never reads the line above it. */
.composer[data-mode="respond"] .composer__box,
.composer[data-mode="resolve"] .composer__box {
  border-color: color-mix(in srgb, var(--live) 55%, var(--rule-2));
}

.composer__box[aria-invalid="true"] {
  border-color: var(--rubric);
}

.composer__need {
  margin: 6px 0 0;
  color: var(--rubric-ink);
  font-size: var(--t-small);
}

.composer__need:empty {
  display: none;
}

.composer__foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--s-2);
  margin-top: var(--s-2);
}

.composer__keys {
  margin-right: auto;
  color: var(--bone-3);
  font-size: var(--t-micro);
}

.composer__go {
  padding: 6px var(--s-3);
}

/* Pictures staged for a response: the re-encoded picture, small, with its
   remove control on the corner. Dashed while ticketbook is still checking it. */
.composer__pics {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin: var(--s-2) 0 0;
  padding: 0;
  list-style: none;
}

.composer__pics[hidden] {
  display: none;
}

.pic {
  position: relative;
  width: 56px;
  height: 56px;
  background: var(--ink-2);
  border: var(--w-rule) solid var(--rule-2);
  border-radius: var(--radius);
}

.pic[data-state="staging"] {
  border-style: dashed;
  border-color: var(--rule-3);
}

.pic__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.pic__img:not([src]) {
  visibility: hidden;
}

.pic__remove {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: var(--bone-2);
  background: var(--ink-1);
  border: var(--w-rule) solid var(--rule-3);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.pic__remove:hover {
  color: var(--rubric-ink);
}

.pic__remove .detail__svg svg {
  width: 12px;
  height: 12px;
}

.composer__attach[hidden] {
  display: none;
}

/* A file held over the composer: the box says it will take it. */
.composer[data-drop="true"] .composer__box {
  border-style: dashed;
  border-color: var(--live);
}

@media (hover: none) {
  .composer__keys {
    display: none;
  }
}

/* ── Bot note ────────────────────────────────────────────────────────────── */

.kbnote {
  position: absolute;
  top: 48px;
  right: var(--s-5);
  z-index: 30;
  width: min(380px, calc(100% - 2 * var(--s-5)));
  padding: var(--s-4);
  background: var(--ink-1);
  border: var(--w-rule) solid var(--rule-3);
  border-radius: 10px;
  box-shadow: 0 16px 40px -12px rgb(0 0 0 / 0.45);
}

.kbnote[hidden] {
  display: none;
}

.kbnote__form {
  margin: 0;
}

.kbnote__head {
  margin: 0 0 var(--s-2);
  color: var(--bone-1);
  font-size: var(--t-base);
  font-weight: 600;
}

.kbnote__on {
  color: var(--bone-3);
  font-weight: 400;
  font-family: var(--font-figure);
  font-size: var(--t-micro);
}

.kbnote__kinds {
  margin-bottom: var(--s-2);
}

/* ── Narrow windows: a full-screen sheet ─────────────────────────────────── */

@media (max-width: 820px) {
  .popover {
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 0;
  }

  .pop__head {
    padding: var(--s-2) var(--s-4) var(--s-3);
  }

  .pop__title {
    font-size: var(--t-sub);
  }

  .pop__claim {
    width: 100%;
  }

  .pop__claim .tbtn {
    width: 100%;
    justify-content: center;
    padding: 10px var(--s-3);
  }

  /* One scroll for the whole sheet: the thread, its composer, then the rail. */
  .pop__body {
    display: block;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /* A phone has no Ctrl key to press. */
  .composer__keys {
    display: none;
  }

  .pop__chain,
  .pop__rail {
    display: block;
  }

  /* The rail's ground runs to the foot of the sheet, not just of its notes. */
  .pop__body {
    background: var(--ink-2);
  }

  .pop__chain {
    background: var(--ink-1);
  }

  .pop__rail {
    border-left: 0;
    border-top: var(--w-band) solid var(--rule-2);
  }

  .pop__scroll {
    overflow: visible;
    padding: 0 var(--s-4) var(--s-3);
  }

  .pop__colhead,
  .composer {
    padding-left: var(--s-4);
    padding-right: var(--s-4);
  }

  /* 16px stops a phone zooming the page in when the box takes focus. */
  .composer__box {
    font-size: 16px;
  }

  .file__pdf {
    height: 60vh;
  }

  .kbnote {
    position: fixed;
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    border-radius: 10px 10px 0 0;
  }
}

/* ── Paper ───────────────────────────────────────────────────────────────── */

@media print {
  .popover {
    position: static;
    width: auto;
    height: auto;
    border: 0;
    box-shadow: none;
    overflow: visible;
  }

  .popover::backdrop {
    display: none;
  }

  .pop,
  .pop__body,
  .pop__chain,
  .pop__rail {
    display: block;
    height: auto;
  }

  .pop__scroll {
    overflow: visible;
  }

  .pop__tools,
  .pop__claim,
  .composer,
  .chain__kb,
  .kbnote,
  .file__bar {
    display: none !important;
  }

  .pop [data-tip]::after {
    display: none;
  }
}