/* The DSP chat (both modes). The Chat page: the conversations at the left, the thread and the question box at the
   right. Where the page is narrower than 640px (a phone, or a window that also shows the case list) the list and the
   thread take turns, with "All conversations" between. The Ask pane of a case draws the same thread and question box
   (thread.js), marked .is-pane: there the pane's body scrolls, and the box sits in the pane's foot. While an answer
   is being written, Send becomes Stop for whoever may stop it. Files go with a question: chips over the box, and on
   the question once it is sent, each with its download button. A file the assistant made is a card in its answer,
   with its kind, rows and size and a Download button.
   Only base.css's tokens are used, so both themes read alike. */

.chat-page { container: chat / inline-size; }
.chat-shell { flex: 1; display: flex; height: 100%; min-height: 0; }

/* ---- the conversations ---- */
.chat-list {
  width: 248px; flex: none; display: flex; flex-direction: column; min-height: 0;
  border-right: 1px solid var(--line); overflow-y: auto; background: var(--side);
}
.chat-list-head { flex: none; display: flex; flex-direction: column; gap: 10px; padding: 14px 12px 10px; }
.chat-list-head h2 { color: var(--text-3); font-size: 12.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.chat-list-head .btn { width: 100%; }
.chat-list-body { padding: 0 6px 12px; }
.chat-list-note { padding: 6px 6px 4px; font-size: 13px; }
.chat-list-note .error { margin-top: 0; }
.chat-list-note .btn { margin: 4px 0 0 -8px; }
.chat-list-item {
  position: relative; display: block; width: 100%;
  margin: 1px 0; padding: 7px 10px 8px 12px;
  border: 0; border-radius: var(--r-m);
  background: transparent; text-align: left;
  transition: background var(--t-fast);
}
.chat-list-item:hover { background: var(--hover); }
.chat-list-item[aria-current="true"] { background: var(--press); }
.chat-list-item[aria-current="true"]::before {
  content: ""; position: absolute; left: 3px; top: 9px; bottom: 9px; width: 3px;
  border-radius: 3px; background: var(--accent-ink);
}
.chat-list-title {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  color: var(--text); font-size: 13.5px; line-height: 1.35; overflow-wrap: anywhere;
}
.chat-list-when { display: block; margin-top: 2px; color: var(--text-3); font-size: 12.5px; }

/* ---- the thread ---- */
.chat-main { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.chat-thread-head {
  flex: none; display: flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 24px;
  border-bottom: 1px solid var(--line);
}
.chat-thread-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 600; }
.chat-back { display: none; margin-left: -8px; }
.chat-thread { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 16px 24px; }
.chat-thread > * { max-width: 760px; margin-left: auto; margin-right: auto; }
/* in a pane the pane's body scrolls, not the thread */
/* In a pane the log is at least as tall as the pane's body, so a file dropped on the empty space below a short
   conversation lands on the conversation (thread.js takes files dropped on the log and on the box). */
.chat-thread.is-pane { flex: none; min-height: 100%; overflow: visible; padding: 14px 16px 20px; }

.chat-empty { padding-top: 16px; }
.chat-empty h1 { font: 600 20px/1.3 var(--font-display); margin-bottom: 4px; }
.chat-empty .page-lead { margin-bottom: 8px; font-size: 14px; color: var(--text-2); }
.chat-missing { font-size: 13px; }
.chat-said { margin-bottom: 16px; }
.chat-said .error { margin-top: 0; }
.chat-said .btn { margin-top: 8px; }
.chat-empty + .chat-turn { margin-top: 24px; }

.chat-turn { padding-bottom: 8px; }
.chat-turn + .chat-turn { margin-top: 24px; }
/* the question, as it was typed */
.chat-q {
  width: fit-content; max-width: 100%; margin-left: auto;
  padding: 8px 12px;
  background: var(--raised); border: 1px solid var(--line); border-radius: var(--r-m);
  white-space: pre-wrap; overflow-wrap: anywhere;
  font-size: 14px; line-height: 1.5;
}
.chat-q-when { display: block; margin-top: 4px; color: var(--text-3); font-size: 12.5px; white-space: normal; text-align: right; }
/* who asked, in a shared conversation: "You", or the person's name */
.chat-q-by { color: var(--text-2); font-weight: 600; }

/* the answer: the model's text, its reads, the knowledge it used */
.chat-a { margin-top: 12px; overflow-wrap: anywhere; }
.chat-a .md { max-width: 100%; }
.chat-a .md > :first-child { margin-top: 0; }
.chat-a .md pre { max-width: 100%; overflow-x: auto; }
.chat-a .md-table { max-width: 100%; }
.chat-link-off { color: var(--text-2); overflow-wrap: anywhere; }
.chat-tool { display: flex; align-items: flex-start; gap: 6px; margin: 4px 0; color: var(--text-3); font-size: 12px; line-height: 1.45; }
.chat-tool .icon { margin-top: 2px; }
.chat-tool[data-state="failed"], .chat-tool[data-state="not_set_up"], .chat-tool[data-state="limit"] { color: var(--warn); }
.chat-tool[data-state="running"] .icon { animation: chat-reading 1.4s ease-in-out infinite; }
@keyframes chat-reading { 50% { opacity: .3; } }
.chat-writing { margin-top: 8px; font-size: 13px; }
/* under an answer a person stopped: who stopped it */
.chat-stopped { margin-top: 10px; font-size: 13px; }
.chat-a .error { margin-top: 10px; }

/* a file the assistant made, where it was made in the answer: what it is, and its Download button */
.chat-made {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  margin: 8px 0; padding: 10px 12px;
  border: 1px solid var(--line-strong); border-radius: var(--r-m);
  background: var(--raised);
}
.chat-made-icon {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 34px; height: 34px; border-radius: var(--r-s);
  background: var(--accent-soft); color: var(--accent-ink);
}
.chat-made-text { display: flex; flex-direction: column; flex: 1 1 160px; min-width: 0; }
.chat-made-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font-size: 13.5px; font-weight: 600; }
.chat-made-meta { color: var(--text-3); font-size: 12.5px; line-height: 1.4; }
.chat-made-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; flex: none; }

.chat-kb { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--line); }
.chat-kb h3 { margin-bottom: 6px; color: var(--text-3); font-size: 12.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.chat-kb li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; padding: 3px 0; font-size: 13px; line-height: 1.45; }
.chat-kb code { padding: 1px 4px; border-radius: 4px; background: var(--sunken); color: var(--text-2); overflow-wrap: anywhere; }
.chat-kb-title { color: var(--text); }
.chat-kb .pill { padding: 0 8px; font-size: 12.5px; white-space: normal; max-width: 100%; overflow-wrap: anywhere; }
.chat-kb-date { color: var(--text-3); white-space: nowrap; }

/* ---- the question box ---- */
.chat-composer { flex: none; padding: 12px 24px; border-top: 1px solid var(--line); background: var(--pane); }
.chat-composer-in { max-width: 760px; margin: 0 auto; }
.chat-composer .textarea { resize: none; max-height: 40vh; overflow-y: auto; font-size: 14px; }
.chat-composer-foot { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.chat-composer-hint { flex: 1; min-width: 0; color: var(--text-3); font-size: 12.5px; }
.chat-send { min-width: 76px; }
/* while an answer is being written the button stops it: the same place, a quieter look */
.chat-send[data-mode="stop"], .chat-send[data-mode="stopping"] { min-width: 96px; }

/* ---- files with a question: the paperclip, the chips over the box, and the files a question carries ---- */
.chat-attach { margin-left: -6px; margin-right: auto; }   /* at the left, whether or not the hint is shown */
/* a file dragged over the conversation or the box: the box says it will take it */
.chat-composer.is-drop .chat-composer-in { outline: 2px dashed var(--accent-ink); outline-offset: 4px; border-radius: var(--r-m); }
.chat-files { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.chat-file {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-width: 0;
  padding: 2px 2px 2px 8px;
  border: 1px solid var(--line-strong); border-radius: var(--r-s);
  background: var(--raised); color: var(--text);
  font-size: 12.5px; line-height: 1.4; white-space: normal;
}
.chat-file > .icon { color: var(--text-3); }
.chat-file-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }
.chat-file-size { flex: none; color: var(--text-3); white-space: nowrap; }
.chat-file-remove, .chat-file-get {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 24px; height: 24px; padding: 0;
  border: 0; border-radius: 4px;
  background: transparent; color: var(--text-2);
  transition: background var(--t-fast), color var(--t-fast);
}
.chat-file-remove:not(:disabled):hover, .chat-file-get:not(:disabled):hover { background: var(--hover); color: var(--text); }
.chat-file-remove:disabled, .chat-file-get:disabled { opacity: .45; }
.chat-file[data-state="sending"] .chat-file-size { animation: chat-reading 1.4s ease-in-out infinite; }
.chat-file.is-refused { border-color: var(--warn); background: var(--warn-soft); }
.chat-file.is-refused > .icon, .chat-file.is-refused .chat-file-size { color: var(--warn); }
/* in the question's bubble, under its text: each file with its download button */
.chat-q-files { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; }
.chat-q .chat-file { background: var(--pane); }
.chat-q-files + .chat-q-when { margin-top: 6px; }
/* in a pane's foot, which draws the line above it */
.chat-composer.is-pane { padding: 10px 12px; border-top: 0; }
/* a narrow pane: the box, the paperclip and Send, without the hint; a file's name takes less room */
@container pane (max-width: 359px) {
  .chat-composer-hint { display: none; }
  .chat-composer-foot { justify-content: flex-end; }
  .chat-file-name { max-width: 150px; }
}
/* a narrow pane: a made file's buttons go under its name, Download the pane's width */
@container pane (max-width: 419px) {
  .chat-made-actions { flex: 1 1 100%; }
  .chat-made-get { flex: 1; }
}

/* ---- the Ask pane, while nobody has asked yet: what it is for, and three questions to start with ---- */
.ask-empty { padding-top: 2px; }
.ask-empty h3 { margin-bottom: 6px; font: 600 15px/1.35 var(--font-display); }
.ask-lead { color: var(--text-2); font-size: 13.5px; line-height: 1.5; }
.ask-note { margin-top: 8px; font-size: 13px; line-height: 1.45; }
.ask-off { color: var(--warn); }
.ask-starters { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 16px; }
.ask-starters .btn { max-width: 100%; justify-content: flex-start; text-align: left; overflow-wrap: anywhere; }
/* a narrow pane: each starter the pane's full width */
@container pane (max-width: 419px) {
  .ask-starters { align-items: stretch; }
}

/* ---- a narrow page: the list and the thread take turns ---- */
@container chat (max-width: 639px) {
  .chat-list { width: 100%; border-right: 0; display: none; }
  .chat-main { display: none; }
  .chat-shell.is-list .chat-list { display: flex; }
  .chat-shell.is-thread .chat-main { display: flex; }
  .chat-back { display: inline-flex; }
  .chat-thread-head { padding: 0 12px; }
  .chat-thread { padding: 12px; }
  .chat-composer { padding: 12px; }
}

/* ---- a phone: the same turns (for a browser without container queries), and a field that is not zoomed into.
        The box and the hint rules hold for the Ask pane's question box too. ---- */
@media (max-width: 639px) {
  .chat-list { width: 100%; border-right: 0; display: none; }
  .chat-main { display: none; }
  .chat-shell.is-list .chat-list { display: flex; }
  .chat-shell.is-thread .chat-main { display: flex; }
  .chat-back { display: inline-flex; }
  .chat-thread-head { padding: 0 12px; }
  .chat-thread { padding: 12px; }
  .chat-composer { padding: 12px; }
  .chat-composer .textarea { font-size: 16px; }   /* a phone does not zoom into a field whose letters are this size */
  .chat-composer-hint { display: none; }
  .chat-composer-foot { justify-content: flex-end; }
  .chat-file-name { max-width: 150px; }
  .chat-made-actions { flex: 1 1 100%; }
  .chat-made-get { flex: 1; }
}