/* chat.css: the chat view (views/chat.js), Onyx.
 *
 * One column of conversation, a dock under it with the needs-you tray, the
 * composer and the footnote. Every colour is a shared token from app.css; the
 * two tokens that arrive with the Onyx sheet (--gold-text, --card-shadow) carry
 * a fallback so this file reads correctly on either sheet.
 *
 * app.css still carries the v2 transcript rules for .chat, .msg and .composer;
 * where a property here looks redundant it is resetting one of those.
 */

/* ── frame ────────────────────────────────────────────────────────────── */

.chat{
  display:flex;flex-direction:column;grid-template-columns:none;
  height:100%;min-height:0;min-width:0;position:relative;
}
.chat__scroll{
  flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;
  scrollbar-gutter:stable both-edges;scrollbar-width:thin;scrollbar-color:var(--line-2) transparent;
}
.chat__col{width:100%;max-width:816px;margin:0 auto;padding:18px 24px 12px}
.chat__dock{flex:none;width:100%;max-width:816px;margin:0 auto;padding:0 24px 12px}

/* ── the transcript ───────────────────────────────────────────────────── */

.chat__day{
  margin:0;padding-left:.12em;text-align:center;
  font:400 11px/16px var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
}
.chat__day:not(:first-child){margin-top:28px}
.chat__match{
  margin:0 0 6px;text-align:center;
  font:400 10.5px/16px var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
}

.chat .msg{display:block;max-width:none;margin-top:20px;padding:0;border:0;gap:0}
.chat .chat__day + .msg{margin-top:14px}
.chat .msg__text{
  font:400 15.5px/1.65 var(--font-body);color:var(--body);
  white-space:normal;word-break:normal;overflow-wrap:anywhere;
}
.chat .msg--you{display:flex;justify-content:flex-end;padding-left:0;border-left:0}
.chat .msg--you .msg__text{
  max-width:70%;padding:12px 16px;border-radius:18px;
  background:var(--surface-2);color:var(--ink);white-space:pre-wrap;
}
.chat .msg.is-error .msg__text{color:var(--risk)}
.chat .msg.is-stopped .msg__text{color:var(--muted)}
.msg__note{margin-top:6px;font:400 11px/16px var(--font-mono);color:var(--risk)}
.msg__note--quiet{color:var(--muted)}

/* what renderMarkdownLite emits, and nothing more */
.msg__text p{margin:0}
.msg__text p + p,.msg__text p + ul,.msg__text p + ol,
.msg__text ul + p,.msg__text ol + p,.msg__text ul + ul,.msg__text ol + ol{margin-top:.7em}
.msg__text ul,.msg__text ol{margin:0;padding-left:1.35em}
.msg__text li + li{margin-top:.25em}
.msg__text li::marker{color:var(--dim)}
.msg__text strong{font-weight:600;color:var(--ink)}
.msg__text code{
  padding:1px 5px;border-radius:4px;background:var(--surface-2);
  font:400 .86em/1 var(--font-mono);color:var(--ink);
}
.msg__text a{
  color:var(--ink);text-decoration:underline;text-decoration-color:var(--line-2);
  text-underline-offset:3px;overflow-wrap:anywhere;
}
.msg__text a:hover{text-decoration-color:var(--muted)}

/* the streaming caret: 2px of ink after the last word */
.msg.is-streaming .msg__text:empty::after,
.msg.is-streaming .msg__text > p:last-child::after,
.msg.is-streaming .msg__text > :is(ul,ol):last-child > li:last-child::after{
  content:"";display:inline-block;width:2px;height:1em;margin-left:2px;vertical-align:-.14em;
  background:var(--ink);animation:chat-caret 1.06s steps(1) infinite;
}
@keyframes chat-caret{50%{opacity:0}}

.msg__tools{display:flex;align-items:center;gap:2px;margin-top:8px;margin-left:-8px}
.msg__tool{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:32px;height:32px;border-radius:8px;color:var(--dim);
}
.msg__tool .ic{width:16px;height:16px}
.msg__tool:hover{background:var(--surface-2);color:var(--muted)}

/* ── the needs-you tray ───────────────────────────────────────────────── */

.tray{
  position:relative;margin-bottom:10px;padding:10px 14px 10px 16px;
  border:1px solid var(--line);border-radius:14px;background:var(--surface);
}
/* the inner left edge: gold only when the top item is one hold from going out */
.tray::before{
  content:"";position:absolute;left:-1px;top:13px;bottom:13px;width:2px;
  border-radius:0 2px 2px 0;background:var(--line-2);
}
.tray.has-draft::before{background:var(--gold)}
[data-theme="light"] .tray{border-color:var(--line-2);box-shadow:var(--card-shadow, none)}

.tray__head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;min-width:0}
.tray__mark,.traymini__mark{
  flex:none;margin:0;font:500 10.5px/16px var(--font-mono);letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);white-space:nowrap;
}
.tray.has-draft .tray__mark,.traymini.has-draft .traymini__mark{color:var(--gold-text, var(--gold))}
.tray__state{
  min-width:0;margin:0;font:400 10.5px/16px var(--font-mono);color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

.tray__item{padding:6px 0 10px}
.tray__top{display:flex;align-items:center;gap:20px}
.tray__text{flex:1;min-width:0}
.tray__title{
  margin:0;font:500 13.5px/18px var(--font-body);color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.tray__meta{
  display:flex;align-items:center;min-width:0;margin:3px 0 0;
  font:400 11px/16px var(--font-mono);color:var(--muted);
}
.tray__metatext{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tray__sep{flex:none;padding:0 .5em}
.tray__preview{
  display:inline-flex;align-items:center;gap:2px;flex:none;border-radius:4px;
  font:400 11px/16px var(--font-mono);color:var(--body);white-space:nowrap;
}
.tray__preview .ic{width:13px;height:13px;color:var(--dim)}
.tray__preview[aria-expanded="true"] .ic{transform:rotate(180deg)}
.tray__preview:hover{color:var(--ink)}

.tray__actions{display:flex;align-items:center;gap:8px;flex:none}
.tray .btn{
  display:inline-flex;align-items:center;justify-content:center;gap:0;
  height:32px;padding:0 12px;border-radius:8px;
  font:500 13.5px/1 var(--font-body);white-space:nowrap;
}
.tray .btn:disabled{opacity:.5;cursor:default}
.tray .btn--gold{padding:0 7px 0 12px;border:1px solid var(--gold);font-weight:600}
.tray .btn--plain{background:var(--surface-2);border:1px solid var(--line-2);color:var(--body)}
.tray .btn--plain:hover{color:var(--ink);border-color:var(--dim)}
.tray .btn--ghost{background:transparent;border:1px solid var(--line-2);color:var(--body)}
.tray .btn--ghost:hover{background:var(--surface-2);color:var(--ink);border-color:var(--line-2)}
.tray .btn__tag{
  display:inline-flex;align-items:center;height:18px;margin-left:8px;padding:0 3px 0 4px;
  border:1px solid currentColor;border-radius:4px;
  font:500 10.5px/16px var(--font-mono);letter-spacing:.12em;text-transform:uppercase;opacity:.6;
}
.tray .hold__track{top:calc(100% + 4px);bottom:auto;border-radius:2px}

.tray__draft{margin-top:8px;padding-left:12px;border-left:1px solid var(--line-2)}
.tray__draft[hidden]{display:none}
.tray__draftto{
  margin:0;font:400 11px/16px var(--font-mono);color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.tray__draftbody{
  margin:4px 0 0;font:400 13px/19px var(--font-body);color:var(--body);white-space:pre-wrap;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;
}
.tray__draftbody.is-full{display:block;-webkit-line-clamp:unset;max-height:min(40vh,320px);overflow-y:auto}
.tray__showall{
  margin-top:4px;border-radius:4px;font:500 12.5px/18px var(--font-body);color:var(--body);
}
.tray__showall:hover{color:var(--ink)}

.tray__morewrap{padding-top:6px;border-top:1px solid var(--line)}
.tray__more{
  display:flex;align-items:center;gap:8px;width:100%;height:32px;margin-bottom:-4px;
  padding:0 6px 0 0;border-radius:8px;text-align:left;
  font:400 13px/18px var(--font-body);color:var(--body);
}
.tray__morecount{flex:none;color:var(--muted)}
.tray__moretitle{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tray__more .ic{width:16px;height:16px;margin-left:auto;color:var(--dim)}
.tray__more:hover{color:var(--ink)}

.traymini{display:none}

/* ── composer ─────────────────────────────────────────────────────────── */

.chat .composer{
  display:flex;align-items:flex-end;gap:4px;padding:8px 10px 8px 14px;
  border:1px solid var(--line);border-radius:24px;background:var(--surface);
}
.chat .composer:focus-within{border-color:var(--muted)}
[data-theme="light"] .chat .composer{border-color:var(--line-2);box-shadow:var(--card-shadow, none)}
[data-theme="light"] .chat .composer:focus-within{border-color:var(--muted)}

.chat .composer__in{
  flex:1;min-width:0;height:36px;min-height:36px;max-height:none;margin:0;padding:6px;
  border:0;border-radius:0;outline:none;background:transparent;resize:none;overflow-y:hidden;
  font:400 15.5px/24px var(--font-body);color:var(--ink);
}
.chat .composer__in:focus,.chat .composer__in:focus-visible{outline:none;border:0}
.chat .composer__in::placeholder{color:var(--muted);opacity:1}
.chat .composer__in:disabled{background:transparent;color:var(--muted);cursor:not-allowed}

.composer__btn{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:36px;height:36px;border-radius:50%;color:var(--dim);
}
.composer__btn .ic{width:20px;height:20px}
.composer__btn:hover:not(:disabled){background:var(--surface-2);color:var(--ink)}
.composer__btn[aria-pressed="true"]{background:var(--surface-2);color:var(--ink)}
.composer__btn:disabled{opacity:.4;cursor:default}

.chat .composer__send{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:36px;height:36px;padding:0;border:0;border-radius:50%;background:none;color:var(--bg);
}
.composer__dot{
  display:grid;place-items:center;width:36px;height:36px;border-radius:50%;
  background:var(--ink);color:var(--bg);
}
.composer__dot .ic{width:18px;height:18px;stroke-width:2}
.chat .composer__send.is-empty .composer__dot,
.chat .composer__send:disabled .composer__dot{opacity:.4}
.chat .composer__send:disabled{cursor:not-allowed}

.chat__foot{margin:8px 0 0;text-align:center;font:400 12px/16px var(--font-body);color:var(--muted)}

/* ── the Fresh page confirm ───────────────────────────────────────────── */

.chat__confirm{
  display:flex;align-items:center;gap:12px;margin-bottom:10px;padding:8px 10px 8px 14px;
  border:1px solid var(--line-2);border-radius:14px;background:var(--surface);
}
[data-theme="light"] .chat__confirm{box-shadow:var(--card-shadow, none)}
.chat__confirm .ic{width:18px;height:18px;color:var(--dim)}
.chat__confirm p{flex:1;min-width:0;margin:0;font:400 13.5px/1.45 var(--font-body);color:var(--body)}
.chat__confirm .btn{
  display:inline-flex;align-items:center;height:32px;padding:0 12px;border-radius:8px;
  font:500 13.5px/1 var(--font-body);white-space:nowrap;
}
.chat__confirm .btn--plain{background:var(--surface-2);border:1px solid var(--line-2);color:var(--ink)}
.chat__confirm .btn--ghost{background:transparent;border:1px solid transparent;color:var(--muted)}
.chat__confirm .btn--ghost:hover{color:var(--ink);background:var(--surface-2)}

/* ── the empty state ──────────────────────────────────────────────────── */

.chat.is-empty .chat__col{
  display:flex;flex-direction:column;justify-content:center;min-height:100%;padding-bottom:56px;
}
.chat__hero{width:100%;max-width:720px;margin:0 auto;display:flex;flex-direction:column;align-items:center}
.chat__greet{
  margin:0;font:600 28px/36px var(--font-display);letter-spacing:-.015em;color:var(--ink);text-align:center;
}
.chat__sub{
  max-width:56ch;margin:10px 0 0;text-align:center;text-wrap:pretty;
  font:400 15px/1.55 var(--font-body);color:var(--muted);
}
.chat__chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:22px}
.chat__chip{
  display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px;
  border:1px solid var(--line);border-radius:999px;background:var(--surface-2);
  font:400 13.5px/1 var(--font-body);color:var(--body);white-space:nowrap;
}
.chat__chip:hover{color:var(--ink);border-color:var(--line-2)}
.chat__chipdot{width:6px;height:6px;flex:none;border-radius:50%;background:var(--gold)}
.chat__hero .composer{width:100%;margin-top:16px}
.chat__heromark{
  display:flex;align-items:center;gap:8px;margin:16px 0 0;
  font:400 10.5px/16px var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
}
.chat__heromark a{
  border-radius:4px;color:var(--muted);text-decoration:underline;
  text-decoration-color:var(--line-2);text-underline-offset:3px;
}
.chat__heromark a:hover{color:var(--ink)}

/* ── the topbar agent label and picker ────────────────────────────────── */

.agentpick{
  display:inline-flex;align-items:center;gap:8px;max-width:100%;height:32px;padding:0 8px 0 0;
  border-radius:8px;font:500 15px/20px var(--font-body);color:var(--ink);white-space:nowrap;
}
button.agentpick{padding:0 8px}
button.agentpick:hover{background:var(--overlay-1, var(--surface-2))}
.agentpick__dot{width:6px;height:6px;flex:none;border-radius:50%;background:var(--agent, var(--dim))}
.agentpick__name{min-width:0;overflow:hidden;text-overflow:ellipsis}
.agentpick__sub{font-weight:400;color:var(--muted)}
.agentpick .ic{width:14px;height:14px;color:var(--dim)}

.agentlist{display:flex;flex-direction:column;gap:2px;margin-top:4px}
.agentlist__item{
  display:flex;align-items:flex-start;gap:10px;width:100%;padding:9px 10px;
  border-radius:10px;text-align:left;color:var(--body);
}
.agentlist__item:hover{background:var(--surface-2)}
.agentlist__item.is-on{background:var(--surface-2)}
.agentlist__dot{width:6px;height:6px;flex:none;margin-top:7px;border-radius:50%;background:var(--agent, var(--dim))}
.agentlist__body{display:flex;flex-direction:column;min-width:0}
.agentlist__name{display:flex;align-items:baseline;gap:8px;font:500 14px/20px var(--font-body);color:var(--ink)}
.agentlist__busy{font:400 10px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.agentlist__act{
  font:400 12.5px/18px var(--font-body);color:var(--muted);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
}

/* ── slide-over bodies the chat opens ─────────────────────────────────── */

.slideover__body .chatso__lead{color:var(--muted)}
.chatso__facts{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 14px;margin:4px 0 6px;
  font:400 12px/1.5 var(--font-mono);color:var(--muted);
}
.chatso__facts dt{color:var(--dim)}
.chatso__facts dd{margin:0;color:var(--body);overflow-wrap:anywhere}
.slideover__body .chatso__mono{margin-bottom:4px;font:400 12px/1.5 var(--font-mono);color:var(--muted);overflow-wrap:anywhere}
.slideover__body .chatso__note{margin-top:10px;font:400 11px/1.45 var(--font-mono);color:var(--muted)}
.slideover__body .chatso__refusal{color:var(--risk)}
.chatso__draftbtn,.chatso__compose{
  display:inline-flex;align-items:center;height:32px;padding:0 12px;border-radius:8px;
  background:var(--surface-2);border:1px solid var(--line-2);
  font:500 13.5px/1 var(--font-body);color:var(--ink);white-space:nowrap;
}
.chatso__draftbtn:hover,.chatso__compose:hover{border-color:var(--dim)}
.chatso__draftbtn:disabled{opacity:.6;cursor:default}
.chatso__draftout:not(:empty){margin-top:12px}

/* ── phone ────────────────────────────────────────────────────────────── */

@media (max-width:820px){
  .chat__scroll{scrollbar-width:none;scrollbar-gutter:auto}
  .chat__col{padding:4px 16px 12px}
  .chat .msg{margin-top:18px}
  .chat .msg__text{font-size:16px;line-height:1.55}
  .chat .msg--you .msg__text{max-width:84%;padding:10px 14px}
  .msg__tools{margin-top:6px;margin-left:-12px;gap:0}
  .msg__tool{width:44px;height:44px}

  .chat__dock{padding:0 12px calc(12px + env(safe-area-inset-bottom, 0px))}
  .tray{display:none}
  .traymini{
    display:flex;align-items:center;gap:10px;width:100%;height:44px;margin-bottom:8px;
    padding:0 12px 0 14px;border:1px solid var(--line);border-radius:14px;background:var(--surface);text-align:left;
  }
  [data-theme="light"] .traymini{border-color:var(--line-2);box-shadow:var(--card-shadow, none)}
  .traymini__text{flex:1;min-width:0;font:500 13.5px/18px var(--font-body);color:var(--ink);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .traymini .ic{width:16px;height:16px;color:var(--dim)}
  /* the keyboard is up: the composer sits straight on top of it */
  .chat.is-composing .traymini{display:none}

  .chat .composer{gap:0;padding:3px 4px;border-radius:26px}
  .composer__btn,.chat .composer__send{width:44px;height:44px}
  .chat .composer__in{height:44px;min-height:44px;padding:10px 4px;font-size:16px}
  .chat__foot{display:none}

  .chat__confirm{flex-wrap:wrap;padding:10px 12px}
  .chat__confirm p{flex-basis:calc(100% - 30px)}
  .chat__confirm .btn{height:44px}

  .chat.is-empty .chat__col{padding:16px 16px 32px}
  .chat__greet{font-size:24px;line-height:32px}
  .chat__sub{font-size:15px}
  .chat__chip{height:44px}
  button.agentpick{height:44px}
  .agentlist__item{min-height:44px}
}

@media (prefers-reduced-motion: reduce){
  .msg.is-streaming .msg__text:empty::after,
  .msg.is-streaming .msg__text > p:last-child::after,
  .msg.is-streaming .msg__text > :is(ul,ol):last-child > li:last-child::after{animation:none}
}