/* The Desk (24 Sep 2026 redesign): KPI strip · list | chat (the only white surface) | plain-line card. Tokens from app.css. */
.dk-page { min-width: 0; display: flex; flex-direction: column; height: 100%; min-height: 0; background: var(--ground); }
.page.wa.dk { flex: 1; min-height: 0; display: grid; grid-template-columns: 320px minmax(0, 1fr) 280px; padding: 0; overflow: hidden; }
.page.wa.dk:not(.has-thread) { grid-template-columns: 320px minmax(0, 1fr); }
.page.wa.dk > * { min-width: 0; min-height: 0; }

/* KPI cards: one quiet row; colour only when a number is off target */
.kpis { display: flex; gap: 0; align-items: stretch; border-bottom: 1px solid var(--line); background: var(--panel); overflow-x: auto; min-height: 66px; }
.kpi { display: flex; flex-direction: column; justify-content: center; gap: 1px; padding: 10px 18px; border: 0; border-right: 1px solid var(--line); background: none; text-align: left; min-width: 118px; flex: none; }
button.kpi:hover { background: var(--fill); }
.kpi-l { font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); font-weight: 600; white-space: nowrap; }
.kpi-v { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.2; white-space: nowrap; }
.kpi-v.red { color: var(--red); } .kpi-v.amber { color: var(--amber); }
.kpi-s { font-size: 12px; color: var(--muted); white-space: nowrap; }
.kpi-per { margin-left: auto; display: flex; align-items: center; gap: 2px; padding: 0 14px; }
.kpi-per button { border: 0; background: none; border-radius: 999px; padding: 4px 10px; font-size: 13px; color: var(--ink-2); }
.kpi-per button.on { background: var(--ink); color: var(--ground); }

/* list */
.wa-list { border-right: 1px solid var(--line); overflow-y: auto; background: var(--ground); }
.dk-top { padding: 16px 16px 6px; }
.dk-top h1 { margin: 0; }
.dk-status { font-size: 12px; color: var(--muted); margin: 4px 0 8px; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.dk-status .red { color: var(--red); } .dk-status .amber { color: var(--amber); font-weight: 600; }
.dk-tools { display: flex; gap: 6px; }
.dk-search { flex: 1; min-width: 0; border: 0; background: var(--fill); border-radius: 10px; padding: 8px 12px; font-size: 14px; }
.dk-search:focus { outline: 2px solid var(--acc-soft); background: var(--card); }
.dk-sort { border: 0; background: var(--fill); border-radius: 10px; padding: 0 8px; font-size: 13px; color: var(--ink-2); max-width: 40%; }
.dk-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 16px 10px; }
.dk-chips .chip { border: 0; background: var(--fill); color: var(--ink-2); min-height: 28px; padding: 3px 10px; font-size: 13px; white-space: nowrap; }
.dk-chips .chip.on { background: var(--ink); color: var(--ground); }
.dk-chips .chip.red:not(.on) { background: var(--red-soft); color: var(--red); }
.dk-chips .chip .n { font-variant-numeric: tabular-nums; opacity: .85; }
.wa-empty-list { padding: 14px 16px; line-height: 1.5; }
.wa-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: start; width: 100%; text-align: left; padding: 10px 16px; border: 0; border-top: 1px solid var(--line); background: none; }
.wa-row:hover { background: var(--panel); }
.wa-row.on { background: var(--card); box-shadow: inset 3px 0 0 var(--acc); }
.dk-av { width: 28px; height: 28px; border-radius: 50%; background: var(--fill); color: var(--ink-2); font-size: 12px; font-weight: 600; display: grid; place-items: center; }
.dk-row-main { display: flex; flex-direction: column; min-width: 0; }
.dk-t { font-weight: 500; font-size: 15px; }
.wa-row.unread .dk-t { font-weight: 600; }
.dk-m { color: var(--muted); font-size: 13px; }
.wa-row.unread .dk-m { color: var(--ink-2); }
.dk-s { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; max-width: 110px; }
.dk-who { font-size: 11.5px; color: var(--faint); }
.wa-state { font-size: 12px; text-align: right; line-height: 1.3; }
.wa-state.red { color: var(--red); font-weight: 600; } .wa-state.amber { color: var(--amber); font-weight: 600; }
.wa-state.acc { color: var(--acc-text); font-weight: 600; } .wa-state.grey { color: var(--muted); }
.wa-test { margin: 14px 16px; font-size: 13px; }
.wa-test summary { cursor: pointer; color: var(--muted); }
.wa-test input, .wa-test textarea { width: 100%; margin-top: 6px; border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; background: var(--card); }
.wa-test button { margin-top: 6px; }

/* conversation: the white surface */
.wa-convo { display: flex; flex-direction: column; min-height: 0; height: 100%; background: var(--card); }
.wa-empty { display: flex; align-items: center; justify-content: center; height: 100%; background: var(--card); }
.dk-head { display: flex; align-items: baseline; gap: 12px; padding: 14px 22px 12px; border-bottom: 1px solid var(--line); min-width: 0; }
.dk-head b { font-size: 17px; flex: none; max-width: 40%; }
.dk-meta { color: var(--muted); font-size: 13px; min-width: 0; }
.dk-win { margin-left: auto; font-size: 12px; flex: none; }
.dk-subline { padding: 4px 22px; border-bottom: 1px solid var(--line); }
.wa-back { display: none; }
.wa-needs { display: flex; align-items: center; gap: 8px; padding: 7px 22px; font-size: 14px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.wa-needs .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.wa-needs .dot.red { background: var(--red); }
.wa-msgs { flex: 1; overflow-y: auto; padding: 18px 22px; display: flex; flex-direction: column; gap: 10px; }
.wa-msg { max-width: 70%; align-self: flex-start; }
.wa-msg.out { align-self: flex-end; text-align: right; }
.wa-bubble { display: inline-block; text-align: left; padding: 9px 13px; border-radius: 16px 16px 16px 6px; background: var(--fill); white-space: pre-wrap; font-size: 14.5px; line-height: 1.4; }
.wa-msg.out .wa-bubble { background: var(--you); border-radius: 16px 16px 6px 16px; }
.wa-msg .muted.small { font-size: 11.5px; margin-top: 2px; }
.wa-msg.note { align-self: center; max-width: 80%; text-align: center; }
.wa-msg.note .wa-bubble { background: var(--amber-soft); color: var(--amber); font-size: 13px; border-radius: 10px; }
.wa-thumb { display: block; max-width: 240px; max-height: 240px; border-radius: 10px; }
.wa-doc { display: inline-block; padding: 4px 0; color: var(--acc-text); text-decoration: none; font-weight: 500; }
.wa-bubble audio { max-width: 260px; display: block; }
.wa-tick { color: var(--muted); font-size: 12px; letter-spacing: -2px; }
.wa-tick.read { color: var(--blue); }
.wa-fail { color: var(--red); font-weight: 500; }
.wa-pi { margin: 0 22px; }
.wa-compose { padding: 12px 22px 16px; border-top: 1px solid var(--line); background: var(--panel); }
.dk-why { font-size: 13px; color: var(--muted); margin-bottom: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dk-why b { color: var(--acc-text); font-weight: 600; }
.dk-why.amber { color: var(--amber); white-space: normal; }
.wa-compose textarea { width: 100%; border: 0; border-radius: 14px; padding: 12px 14px; resize: vertical; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); font-size: 14.5px; }
.wa-compose textarea:focus { outline: none; box-shadow: inset 0 0 0 2px var(--acc); }
.wa-actions { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; align-items: center; }
.wa-closed-line { margin-bottom: 8px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.wa-sheet { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.wa-sheet input, .wa-sheet select { border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; background: var(--card); min-width: 0; }
.wa-sheet input.grow { flex: 1; }
.btn.sm { height: 32px; padding: 0 10px; font-size: 13px; }
.wa-badges { display: inline-flex; gap: 2px; }

/* the card beside the chat, as plain lines */
.ds { border-left: 1px solid var(--line); background: var(--panel); overflow-y: auto; padding: 18px; }
.ds-fold { display: none; }
.ds section { margin-bottom: 20px; }
.ds h4 { margin: 0 0 8px; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.ds .kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; font-size: 14px; }
.ds .kv .k { color: var(--muted); }
.ds .kv .hl { color: var(--acc-text); font-weight: 600; }
.ds .kv .red { color: var(--red); font-weight: 600; } .ds .kv .amber { color: var(--amber); font-weight: 600; } .ds .kv .muted { color: var(--muted); }
.ds-note { margin: 8px 0 0; font-size: 13px; color: var(--ink-2); }
.ds-sent { margin: 0 0 4px; font-size: 13.5px; color: var(--ink-2); white-space: pre-wrap; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.ds-link { border: 0; background: none; padding: 0; margin-top: 10px; color: var(--acc-text); font-weight: 600; font-size: 14px; }

@media (max-width: 1100px) { .page.wa.dk { grid-template-columns: 280px minmax(0, 1fr) 240px; } }
@media (max-width: 760px) {
  .kpis { min-height: 0; max-width: 100vw; }
  .page.wa.dk { width: 100vw; }
  .dk-status { overflow: hidden; }
  .kpi { padding: 8px 12px; min-width: 104px; }
  .kpi-v { font-size: 17px; }
  .dk-page.has-thread .kpis { display: none; }
  .page.wa.dk, .page.wa.dk:not(.has-thread) { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .page.wa.dk.has-thread .wa-list { display: none; }
  .page.wa.dk.has-thread .ds { order: -1; }
  .page.wa.dk:not(.has-thread) .wa-convo, .page.wa.dk:not(.has-thread) .wa-empty { display: none; }
  .page.wa.dk:not(.has-thread) { grid-template-rows: minmax(0, 1fr); }
  .wa-back { display: inline-block; }
  .dk-head { padding: 8px 12px; flex-wrap: wrap; row-gap: 2px; }
  .dk-head b { max-width: 60%; }
  .dk-win { margin-left: 0; }
  .wa-msgs { padding: 10px 12px; }
  .wa-msg { max-width: 88%; }
  .wa-compose { padding: 8px 12px 10px; }
  .wa-needs, .dk-subline { padding-left: 12px; padding-right: 12px; }
  /* the card folds to one line of chips at the top of the conversation; a tap opens it */
  .ds { border-left: 0; border-bottom: 1px solid var(--line); padding: 6px 12px; max-height: 55vh; }
  .ds-fold { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; width: 100%; border: 0; background: none; padding: 2px 0; text-align: left; font-size: 13px; color: var(--ink-2); }
  .ds-fold i { font-style: normal; background: var(--fill); border-radius: 999px; padding: 2px 9px; }
  .ds-fold i.miss { background: var(--red-soft); color: var(--red); font-weight: 600; }
  .ds-more { margin-left: auto; color: var(--acc-text); font-weight: 600; }
  .ds:not(.open) .ds-body { display: none; }
  .ds.open .ds-body { padding-top: 10px; }
}
.wa-card.wa-pi { margin: 0 22px 10px; padding: 10px 14px; border-radius: 12px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); font-size: 14px; }
@media (max-width: 760px) { .wa-card.wa-pi { margin: 0 12px 8px; } }

/* several enquiries in one chat: one line each, the ones just answered in bold */
.ds-reqs { margin: 0; padding-left: 20px; font-size: 13.5px; }
.ds-reqs li { padding: 4px 0; border-bottom: 1px solid var(--line); color: var(--ink-2); }
.ds-reqs li.on { color: var(--ink); font-weight: 600; }
.ds-req { margin-right: 6px; }
.ds-st { font-size: 11.5px; font-weight: 600; padding: 1px 7px; border-radius: 999px; white-space: nowrap; }
.ds-st.ok { background: var(--green-soft); color: var(--green); }
.ds-st.wait { background: var(--amber-soft); color: var(--amber); }

/* enquiry cards (24 Sep 2026): grey = the AI / customer has it, red = a person is needed; one strip under the header */
.es { border-bottom: 1px solid var(--line); background: var(--panel); padding: 8px 22px 10px; }
.es-row { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; }
.es-card { flex: none; max-width: 260px; text-align: left; border: 0; border-radius: 10px; padding: 6px 10px; background: var(--card);
  box-shadow: inset 0 0 0 1px var(--line); display: flex; flex-direction: column; gap: 1px; }
.es-card.on { box-shadow: inset 0 0 0 2px var(--acc); }
.es-card.red .es-w { color: var(--red); font-weight: 600; }
.es-card.off { opacity: .55; }
.es-l { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.es-w { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.es-hand { margin-top: 8px; font-size: 13.5px; padding: 8px 10px; border-radius: 10px; background: var(--red-soft); }
.es-hand b { color: var(--red); }
.es-btns { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.es-ok { margin-top: 6px; }
.dk-tag { display: block; font-size: 11px; font-weight: 600; color: var(--muted); margin-bottom: 2px; }
.wa-msg.dk-sel .wa-bubble { box-shadow: inset 3px 0 0 var(--acc); }
.dk-about { margin-bottom: 6px; }
.dk-group { display: flex; justify-content: space-between; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  padding: 10px 16px 6px; border-top: 1px solid var(--line); }
.dk-group.person { color: var(--red); } .dk-group.ai { color: var(--muted); }
@media (max-width: 760px) { .es { padding: 6px 12px 8px; } .es-card { max-width: 200px; } }