/* S1 Messages (s1-messages.js). Only .s1msg-* rules; everything else is the shared kit (s1-kit.css).
 * Ink means action and "me", colour means status: the one hue here is the unread dot/count (wait blue) and the PHI
 * note's amber edge. */
.s1msg-host { display: block; }
.s1msg { gap: 14px; }

.s1msg-phi { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border: 1px solid var(--s1-line); border-left: 4px solid var(--s1-soon); border-radius: 10px; background: #fff; color: var(--s1-ink-2); font-size: 13px; }
.s1msg-phi .k-icon { color: var(--s1-soon); flex: none; }
.s1msg-phi p { margin: 0; }
.s1msg-phi b { color: var(--s1-ink); font-weight: 700; }

.s1msg-shell { display: grid; grid-template-columns: minmax(300px, 360px) minmax(0, 1fr); height: clamp(500px, calc(100dvh - 320px), 780px); background: var(--s1-panel); border: 1px solid var(--s1-line); border-radius: var(--s1-radius-panel); box-shadow: var(--k-shadow-card); overflow: hidden; min-width: 0; }

/* ---- list side ---- */
.s1msg-side { display: flex; flex-direction: column; min-height: 0; min-width: 0; border-right: 1px solid var(--s1-line-soft); background: var(--s1-panel); }
.s1msg-side-top { display: grid; gap: 10px; padding: 12px; border-bottom: 1px solid var(--s1-line-soft); background: var(--s1-panel-head); }
.s1msg-tabs { width: 100%; }
.s1msg-tabs button { flex: 1; justify-content: center; }
.s1msg-search { position: relative; display: flex; align-items: center; gap: 8px; }
.s1msg-search > .k-icon { position: absolute; left: 11px; color: var(--s1-mute); pointer-events: none; }
.s1msg-search .k-input { padding-left: 34px; flex: 1; min-width: 0; }
.s1msg-unread { flex: none; }
.s1msg-list-wrap { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.s1msg-pad { padding: 14px; }

.s1msg-threads, .s1msg-notes { list-style: none; margin: 0; padding: 0; }
.s1msg-threads > li + li { border-top: 1px solid var(--s1-line-soft); }
.s1msg-row { all: unset; box-sizing: border-box; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; cursor: pointer; position: relative; transition: background var(--k-dur, 120ms); }
.s1msg-row:hover { background: var(--s1-column); }
.s1msg-row:focus-visible { outline: 2px solid var(--s1-ink); outline-offset: -2px; }
.s1msg-row.is-active { background: var(--s1-column); box-shadow: inset 3px 0 0 var(--s1-ink); }
.s1msg-rmain { display: grid; gap: 2px; min-width: 0; }
.s1msg-rtop { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.s1msg-name { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.s1msg-row.is-unread .s1msg-name { font-weight: 800; }
.s1msg-rtop time { margin-left: auto; flex: none; font-size: 11.5px; color: var(--s1-mute); font-variant-numeric: tabular-nums; }
.s1msg-row.is-unread .s1msg-rtop time { color: var(--s1-wait); font-weight: 650; }
.s1msg-grp { display: inline-flex; align-items: center; gap: 3px; flex: none; font-size: 11px; font-weight: 650; color: var(--s1-mute); }
.s1msg-prev { color: var(--s1-mute); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s1msg-prev i { font-style: normal; color: var(--s1-ink-2); }
.s1msg-row.is-unread .s1msg-prev { color: var(--s1-ink-2); font-weight: 550; }
.s1msg-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--s1-wait); flex: none; }

.s1msg-stack { display: inline-flex; flex: none; }
.s1msg-stack.is-two .k-av + .k-av { margin-left: -14px; box-shadow: 0 0 0 2px #fff; }
.s1msg-stack.is-two .k-av:first-child { align-self: flex-start; }
.s1msg-stack.is-two .k-av:last-child { align-self: flex-end; }
.s1msg-row .s1msg-stack.is-two { width: 42px; height: 40px; align-items: stretch; }
.s1msg-row .s1msg-stack:not(.is-two) { width: 40px; }
.s1msg-row .s1msg-stack .k-av { width: 34px; height: 34px; }
.s1msg-row .s1msg-stack:not(.is-two) .k-av { width: 40px; height: 40px; font-size: 13px; }
.s1msg-row .s1msg-stack.is-two .k-av { width: 28px; height: 28px; font-size: 10.5px; }

.s1msg-skel { list-style: none; margin: 0; padding: 4px 0; }
.s1msg-skel li { display: flex; gap: 12px; align-items: center; padding: 12px 14px; }
.s1msg-skel i { width: 40px; height: 40px; border-radius: 50%; background: var(--s1-column); flex: none; }
.s1msg-skel span { display: grid; gap: 7px; flex: 1; }
.s1msg-skel b, .s1msg-skel em { display: block; height: 10px; border-radius: 5px; background: var(--s1-column); }
.s1msg-skel b { width: 45%; } .s1msg-skel em { width: 80%; }

.s1msg-note { display: flex; gap: 12px; padding: 12px 14px; align-items: flex-start; }
.s1msg-note + .s1msg-note { border-top: 1px solid var(--s1-line-soft); }
.s1msg-note-i { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--s1-column); color: var(--s1-ink-2); }
.s1msg-note > div { display: grid; gap: 2px; min-width: 0; }
.s1msg-note-t { font-size: 13.5px; font-weight: 600; color: var(--s1-ink); text-decoration: none; overflow-wrap: anywhere; }
a.s1msg-note-t:hover { text-decoration: underline; text-underline-offset: 3px; }
.s1msg-note-m { font-size: 12px; color: var(--s1-mute); text-transform: capitalize; }
.s1msg-note.is-unread .s1msg-note-t { font-weight: 800; }
.s1msg-note.is-unread .s1msg-note-i { background: color-mix(in srgb, var(--s1-wait) 10%, #fff); color: var(--s1-wait); }

/* ---- conversation pane ---- */
.s1msg-pane { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: #fff; }
.s1msg-blank { margin: auto; display: grid; justify-items: center; gap: 8px; text-align: center; padding: 24px; max-width: 340px; color: var(--s1-mute); }
.s1msg-blank .k-icon { width: 30px; height: 30px; color: var(--s1-ink-2); }
.s1msg-blank h2 { margin: 4px 0 0; font: 800 18px/1.2 var(--k-font-display); color: var(--s1-ink); letter-spacing: -.01em; }
.s1msg-blank p { margin: 0 0 8px; font-size: 14px; }

.s1msg-phead { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--s1-line-soft); background: var(--s1-panel-head); min-width: 0; }
.s1msg-back { display: none; }
.s1msg-who { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; }
.s1msg-who-t { min-width: 0; display: grid; gap: 4px; flex: 1; }
.s1msg-who-t h2 { margin: 0; font: 800 16.5px/1.2 var(--k-font-display); letter-spacing: -.01em; outline: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s1msg-who-t h2 a { color: inherit; text-decoration: none; }
.s1msg-who-t h2 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.s1msg-role { font-size: 12.5px; color: var(--s1-mute); margin-top: -2px; }
.s1msg-chips { display: flex; flex-wrap: wrap; gap: 4px 6px; max-height: 56px; overflow: hidden; }
.s1msg-phead .s1msg-stack.is-two { width: 54px; height: 44px; }
.s1msg-phead .s1msg-stack.is-two .k-av { width: 30px; height: 30px; }
.s1msg-pact { display: flex; align-items: center; gap: 8px; flex: none; }

.s1msg-msgs { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; list-style: none; margin: 0; padding: 14px 16px 10px; display: flex; flex-direction: column; gap: 3px; outline: none; scroll-behavior: auto; }
.s1msg-msgs:focus-visible { box-shadow: inset 0 0 0 2px var(--s1-line); }
.s1msg-none { margin: auto 0; }
.s1msg-day { display: flex; justify-content: center; margin: 12px 0 6px; }
.s1msg-day span { font: 650 11.5px var(--k-font-ui); color: var(--s1-mute); background: var(--s1-column); border-radius: 999px; padding: 3px 11px; }
.s1msg-msg { display: flex; align-items: flex-end; gap: 8px; max-width: 100%; }
.s1msg-msg:not(.is-run) { margin-top: 9px; }
.s1msg-msg.is-mine { justify-content: flex-end; }
.s1msg-msg-av { width: 24px; flex: none; align-self: flex-start; padding-top: 1px; }
.s1msg-msg-main { display: grid; gap: 3px; min-width: 0; max-width: min(640px, 82%); }
.s1msg-msg.is-mine .s1msg-msg-main { justify-items: end; }
.s1msg-msg-meta { display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; }
.s1msg-msg-meta a { color: var(--s1-ink); text-decoration: none; }
.s1msg-msg-meta a:hover { text-decoration: underline; text-underline-offset: 3px; }
.s1msg-msg-meta b { font-weight: 700; }
.s1msg-msg-meta time { color: var(--s1-mute); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.s1msg-bwrap { display: flex; align-items: center; gap: 4px; max-width: 100%; min-width: 0; }
.s1msg-msg.is-mine .s1msg-bwrap { flex-direction: row-reverse; }
.s1msg-b { margin: 0; padding: 8px 12px; border-radius: 14px; background: var(--s1-column); border: 1px solid var(--s1-line-soft); color: var(--s1-ink); font-size: 14.5px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; min-width: 0; }
.s1msg-b a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.s1msg-msg.is-mine .s1msg-b { background: var(--s1-ink); border-color: var(--s1-ink); color: #fff; }
.s1msg-msg:not(.is-mine):not(.is-run) .s1msg-b { border-top-left-radius: 5px; }
.s1msg-msg.is-mine:not(.is-run) .s1msg-b { border-top-right-radius: 5px; }
.s1msg-msg.is-pending .s1msg-b { opacity: .7; }
.s1msg-msg.is-failed .s1msg-b { opacity: 1; background: #fff; color: var(--s1-ink); border-color: var(--s1-late); }
.s1msg-pstate { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--s1-mute); }
.s1msg-msg.is-failed .s1msg-pstate { color: var(--s1-late); }
.s1msg-del { flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 8px; background: none; color: var(--s1-mute); cursor: pointer; opacity: 0; transition: opacity 120ms, background 120ms; }
.s1msg-msg:hover .s1msg-del, .s1msg-del:focus-visible { opacity: 1; }
.s1msg-del:hover { background: var(--s1-column); color: var(--s1-late); }
.s1msg-del[disabled] { display: none; }
@media (hover: none) { .s1msg-del { opacity: .55; } }

.s1msg-composer { padding: 10px 14px 12px; border-top: 1px solid var(--s1-line-soft); background: #fff; display: grid; gap: 6px; }
.s1msg-cbox { display: flex; align-items: flex-end; gap: 8px; }
.s1msg-cbox textarea { flex: 1; min-width: 0; resize: none; min-height: 42px; max-height: 160px; line-height: 1.4; padding: 10px 12px; overflow-y: auto; }
.s1msg-send { flex: none; height: 42px; padding: 0 16px; }
.s1msg-chint { display: flex; justify-content: space-between; gap: 10px; font-size: 11.5px; color: var(--s1-mute); min-height: 14px; }
.s1msg-count { font-variant-numeric: tabular-nums; }
.s1msg-ro { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 12.5px; color: var(--s1-mute); }

/* ---- compose modal ---- */
.s1msg-compose { display: grid; gap: 16px; }
.s1msg-existing { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 8px 12px; border-radius: 9px; background: var(--s1-column); border: 1px solid var(--s1-line-soft); font-size: 13px; color: var(--s1-ink-2); }
.s1msg-existing .k-icon { flex: none; color: var(--s1-ink-2); }
.s1msg-existing[hidden] { display: none; }
.s1msg-existing span { flex: 1; min-width: 0; }
.s1msg-mhint { display: flex; align-items: center; gap: 6px; }
.s1msg-mhint .k-icon { color: var(--s1-soon); flex: none; }
.s1msg-mhint span:nth-child(2) { flex: 1; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---- phones: one pane at a time ---- */
@media (max-width: 760px) {
  .s1msg.has-thread { padding-top: 10px; gap: 10px; }
  .s1msg.has-thread [data-s1msg-head], .s1msg.has-thread .s1msg-phi { display: none; }
  .s1msg.has-thread .s1msg-shell { height: calc(100dvh - 190px); }
  .s1msg-shell { grid-template-columns: minmax(0, 1fr); height: calc(100dvh - 250px); min-height: 460px; }
  .s1msg-shell .s1msg-pane { display: none; }
  .s1msg-shell.has-thread .s1msg-side { display: none; }
  .s1msg-shell.has-thread .s1msg-pane { display: flex; }
  .s1msg-side { border-right: 0; }
  .s1msg-back { display: inline-grid; flex: none; }
  .s1msg-phead { padding: 10px 12px; }
  .s1msg-pact .k-btn span, .s1msg-pact .k-btn { font-size: 0; gap: 0; padding: 7px; }
  .s1msg-pact .k-btn .k-icon { font-size: 16px; width: 16px; height: 16px; }
  .s1msg-msg-main { max-width: 88%; }
  .s1msg-msgs { padding: 12px; }
  .s1msg-send span { display: none; }
  .s1msg-send { padding: 0 13px; }
  .s1msg-composer { padding: 8px 10px 10px; }
  .s1msg-chips { max-height: 28px; }
  .s1msg-phi { font-size: 12.5px; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) { .s1msg-del, .s1msg-row { transition: none; } }