/* ═════════════════════════════════════════════════════════════════════════
   CHAT — the redesign (23.10.2026), from the Claude Design "Chat" file.
   A sidebar of saved chats (date, trash with an inline "delete?"), a header with the
   Professor and the lab switch, an empty state with suggestion cards, the question in an
   ink bubble and the Professor's answer unframed (subheads, numbered leads, numbers in
   the display face), a note with "try again", the "answering" bar and the composer.
   Square corners, ink as the one action colour; the league colour is only the ring around
   the Professor. Phone: the sidebar is a drawer from the start edge.
   ═════════════════════════════════════════════════════════════════════════ */

#screen-chat {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  overflow: hidden !important;
  background: var(--ds-bg);
  color: var(--ds-ink);
  font-family: var(--ds-font);
  --cs-acc: var(--ds-lg-nba);
}
#screen-chat.hidden { display: none !important; }
#screen-chat *, #screen-chat *::before, #screen-chat *::after { box-sizing: border-box; }
#screen-chat .hidden { display: none !important; }
#screen-chat button:focus-visible, #screen-chat textarea:focus-visible { outline: 2px solid var(--ds-ink); outline-offset: 2px; }

.cs-auth-gate, .cs-main { flex: 1; min-height: 0; width: 100%; }

/* ── Buttons ── */
.cs-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--ds-h-btn); padding: 0 16px;
  border: 1.5px solid var(--ds-ink); border-radius: 0; background: transparent; color: var(--ds-ink);
  font: 800 var(--ds-fs-14) var(--ds-font); cursor: pointer; transition: background var(--ds-t-ctrl) ease;
}
.cs-btn:hover { background: var(--ds-soft); }
.cs-btn--solid { background: var(--ds-ink); color: var(--ds-card); }
.cs-btn--solid:hover { background: var(--ds-ink); opacity: .9; }
.cs-btn--danger { border-color: transparent; background: var(--ds-live); color: #fff; }
.cs-btn--danger:hover { background: var(--ds-live); opacity: .9; }
.cs-icon-btn {
  flex: none; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 0;
  background: none; color: var(--ds-ink); cursor: pointer;
}
.cs-icon-btn:hover { background: var(--ds-soft); }

/* ── The guest card (signed out) ── */
.cs-auth-gate { display: flex; align-items: center; justify-content: center; padding: 24px 16px; overflow-y: auto; }
.cs-guest {
  display: flex; flex-direction: column; gap: 14px; width: 100%; max-width: 360px; padding: 22px 20px;
  border: 1.5px solid var(--ds-line); background: var(--ds-card);
}
.cs-guest-av { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px var(--cs-acc); }
.cs-guest-t { margin: 0; font: 900 var(--ds-fs-20)/1.3 var(--ds-font); text-wrap: balance; }
.cs-guest-perks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.cs-guest-perks li { display: flex; align-items: flex-start; gap: 10px; font: 600 var(--ds-fs-14)/1.45 var(--ds-font); }
.cs-guest-perks svg { flex: none; margin-top: 1px; }

/* ── Layout: sidebar + chat ── */
.cs-main { position: relative; display: flex; overflow: hidden; }

.cs-sidebar {
  flex: none; width: clamp(240px, 24vw, 300px); display: flex; flex-direction: column; gap: 12px; padding: 18px 14px;
  border-inline-end: 1px solid var(--ds-line); background: var(--ds-card); overflow-y: auto;
}
.cs-side-head { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.cs-side-title { flex: 1; font: 900 var(--ds-fs-17) var(--ds-font); }
.cs-side-close { border: 1.5px solid var(--ds-line); display: none; }
.cs-new {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: var(--ds-h-btn-l);
  border: 0; border-radius: 0; background: var(--ds-ink); color: var(--ds-card); font: 800 var(--ds-fs-15) var(--ds-font); cursor: pointer;
}
.cs-new:hover { opacity: .9; }
.cs-saved-label { margin-top: 6px; font: 800 var(--ds-fs-12) var(--ds-font); letter-spacing: .04em; color: var(--ds-ink2); }
.cs-sessions-list { display: flex; flex-direction: column; }
.cs-session-item { display: flex; align-items: center; gap: 2px; border-bottom: 1px solid var(--ds-line); }
.cs-session-item.active { background: var(--ds-bg); }
.cs-session-item.confirm { background: var(--ds-soft); }
.cs-session-open {
  flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 60px; padding: 10px 12px;
  border: 0; background: none; color: var(--ds-ink); text-align: start; cursor: pointer; font: inherit;
}
.cs-session-title {
  font: 600 var(--ds-fs-14)/1.35 var(--ds-font); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cs-session-item.active .cs-session-title { font-weight: 800; }
.cs-session-time { font: 600 var(--ds-fs-13) var(--ds-font); color: var(--ds-ink2); }
.cs-session-del { color: var(--ds-ink2); }
.cs-confirm-row { flex: 1; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 10px; }
.cs-confirm-q { flex: 1 1 120px; font: 800 var(--ds-fs-14) var(--ds-font); }
.cs-no-sessions { padding: 12px 2px; font-size: var(--ds-fs-14); color: var(--ds-ink2); }

.cs-sidebar-backdrop { display: none; }

.cs-chat-area { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* ── Header ── */
.cs-header {
  flex: none; display: flex; align-items: center; gap: 8px; padding: 10px 20px;
  border-bottom: 1px solid var(--ds-line); background: var(--ds-bg);
}
.cs-sidebar-toggle { display: none; }
.cs-header-id { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
.cs-header-av { flex: none; width: 36px; height: 36px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--cs-acc); }
.cs-header-title { font: 900 18px/1.2 var(--ds-font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.cs-lab {
  flex: none; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 4px; border: 0; background: none;
  color: var(--ds-ink); cursor: pointer; text-align: start; font: inherit;
}
.cs-lab-txt { display: flex; flex-direction: column; line-height: 1.2; }
.cs-lab-name { font: 800 var(--ds-fs-14) var(--ds-font); white-space: nowrap; }
.cs-lab-sub { font: 600 var(--ds-fs-12) var(--ds-font); color: var(--ds-ink2); white-space: nowrap; }
.cs-track {
  position: relative; flex: none; width: 44px; height: 26px; border-radius: 999px; border: 1.5px solid var(--ds-ink2); background: transparent;
  transition: background var(--ds-t-ctrl) ease, border-color var(--ds-t-ctrl) ease;
}
.cs-knob {
  position: absolute; top: 2.5px; inset-inline-start: 2.5px; width: 18px; height: 18px; border-radius: 50%; background: var(--ds-ink2);
  transition: inset-inline-start var(--ds-t-ctrl) ease, background var(--ds-t-ctrl) ease;
}
.cs-lab.on .cs-track { border-color: var(--ds-ink); background: var(--ds-ink); }
.cs-lab.on .cs-knob { inset-inline-start: 20.5px; background: var(--ds-bg); }

.cs-lab-tag {
  flex: none; padding: 1px 7px; border: 1px solid currentColor; font: 800 var(--ds-fs-12)/1.45 var(--ds-font-num); letter-spacing: .12em; text-transform: uppercase;
}
.cs-lab-banner {
  display: flex; align-items: center; gap: 8px; padding: 7px 16px; background: var(--ds-ink); color: var(--ds-bg);
  font: 700 var(--ds-fs-13)/1.4 var(--ds-font);
}

/* ── The thread ── */
.cs-scroll { position: relative; flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
.cs-col { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 28px; padding: 32px 24px; }
.cs-thread { display: flex; flex-direction: column; gap: 28px; }

.cs-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding-top: 36px; }
.cs-empty-av { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 4px var(--ds-bg), 0 0 0 7px var(--cs-acc), 0 18px 40px rgba(0, 0, 0, .25); }
.cs-empty-t { margin: 10px 0 0; font: 900 var(--ds-fd-40)/1.1 var(--ds-font); letter-spacing: -.02em; text-wrap: balance; }
.cs-empty-s { margin: 0; font-size: var(--ds-fs-15); color: var(--ds-ink2); }
.cs-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: 100%; max-width: 560px; margin-top: 16px; }
.cs-chip {
  display: flex; align-items: center; gap: 12px; min-height: 68px; padding: 12px 16px; border: 1.5px solid var(--ds-line); border-radius: 0;
  background: var(--ds-card); color: var(--ds-ink); cursor: pointer; font: inherit; text-align: start; transition: background var(--ds-t-ctrl) ease;
}
.cs-chip:hover { background: var(--ds-bg); border-color: var(--ds-ink2); }
.cs-chip svg { flex: none; }
.cs-chip-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cs-chip-t { font: 800 var(--ds-fs-15)/1.3 var(--ds-font); }
.cs-chip-sub { font: 600 var(--ds-fs-13)/1.35 var(--ds-font); opacity: .8; }
.cs-chip--dark { border-color: var(--ds-ink); background: var(--ds-ink); color: var(--ds-bg); }
.cs-chip--dark:hover { background: var(--ds-ink); opacity: .92; }

/* Messages */
.cs-msg--user { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.cs-reply-cap { max-width: min(560px, 85%); display: flex; gap: 6px; font: 700 var(--ds-fs-13)/1.4 var(--ds-font); color: var(--ds-ink2); }
.cs-reply-q { border-bottom: 1.5px dashed var(--ds-line); }
.cs-bubble {
  max-width: min(560px, 85%); padding: 12px 16px; border-radius: var(--ds-r-bubble); border-end-end-radius: 4px;
  background: var(--ds-ink); color: var(--ds-bg); font: 600 var(--ds-fs-15)/1.55 var(--ds-font); white-space: pre-wrap; overflow-wrap: anywhere;
}
.cs-msg--prof { display: flex; flex-direction: column; gap: 10px; }
.cs-msg-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cs-msg-av { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--cs-acc); }
.cs-msg-name { font: 800 var(--ds-fs-14) var(--ds-font); }
.cs-lab-note { font: 600 var(--ds-fs-13) var(--ds-font); color: var(--ds-ink2); }
.cs-body {
  display: flex; flex-direction: column; gap: 14px; font-size: 16.5px; line-height: 1.75; padding-inline-start: 42px;
}
.cs-body p { margin: 0; text-wrap: pretty; }
.cs-body b { font-weight: 800; }
.cs-sub { margin-top: 4px; font: 800 var(--ds-fs-13)/1.3 var(--ds-font); letter-spacing: .06em; }
.cs-li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 8px; align-items: baseline; }
.cs-li-n { font: 800 24px/1 var(--ds-font-num); }
.cs-n { font-family: var(--ds-font-num); font-weight: 700; font-size: 1.16em; line-height: 1; direction: ltr; unicode-bidi: isolate; white-space: nowrap; }
.cs-body .term-link {
  display: inline; padding: 10px 0; margin: -10px 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer;
  text-decoration: underline dashed; text-decoration-thickness: 1.5px; text-underline-offset: 5px; text-decoration-color: var(--cs-acc);
}
.cs-body .term-link:hover { background: var(--ds-soft); }

/* Lab mode: the answer sits on graph paper */
.cs-msg--lab {
  gap: 12px; padding: 16px 18px 18px; border: 1px solid var(--ds-line); background-color: var(--ds-card);
  background-image: linear-gradient(var(--ds-soft) 1px, transparent 1px), linear-gradient(90deg, var(--ds-soft) 1px, transparent 1px);
  background-size: 22px 22px;
}
.cs-msg--lab .cs-msg-av { width: 28px; height: 28px; filter: grayscale(1) contrast(1.1); box-shadow: 0 0 0 1.5px var(--ds-ink); }
.cs-msg--lab .cs-body { gap: 10px; font-size: 15.5px; line-height: 1.7; padding-inline-start: 0; }

/* Waiting */
.cs-msg--wait { display: flex; flex-direction: column; gap: 10px; }
.cs-wait { padding-inline-start: 42px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.cs-dots { display: flex; gap: 6px; align-items: center; height: 12px; padding: 14px 18px; box-sizing: content-box; border-radius: var(--ds-r-bubble); border-start-start-radius: 4px; background: var(--ds-card); border: 1px solid var(--ds-line); }
.cs-dots span { width: 8px; height: 8px; border-radius: 50%; background: var(--ds-ink2); display: inline-block; animation: csDot 1.2s infinite ease-in-out; }
.cs-dots span:nth-child(2) { animation-delay: .16s; }
.cs-dots span:nth-child(3) { animation-delay: .32s; }
@keyframes csDot { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.cs-wait-note { font: 600 var(--ds-fs-14)/1.5 var(--ds-font); color: var(--ds-ink2); }
.cs-wait-note:empty { display: none; }

/* A failed question */
.cs-err {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px 14px; padding: 16px 18px; background: var(--ds-card);
  color: var(--ds-ink2); border: 1.5px solid var(--ds-ink2);
}
.cs-err--busy { color: var(--ds-ink); border-color: var(--ds-ink); }
.cs-err--ans { color: var(--ds-live); border-color: var(--ds-live); }
.cs-err svg { flex: none; margin-top: 1px; }
.cs-err-t { flex: 1 1 200px; min-width: 0; font: 700 var(--ds-fs-15)/1.5 var(--ds-font); color: var(--ds-ink); }
.cs-err-retry { flex: none; border-color: currentColor; color: inherit; }

/* ── The composer ── */
.cs-comp { flex: none; border-top: 1px solid var(--ds-line); background: var(--ds-bg); padding: 14px 24px 16px; }
.cs-comp-col { max-width: 720px; margin: 0 auto; }
.cs-context {
  display: flex; align-items: center; gap: 10px; padding: 4px 4px 4px 12px; padding-inline-start: 12px;
  background: var(--ds-card); border: 1.5px solid var(--ds-line); border-bottom: 0;
}
.cs-context-ic { flex: none; }
.cs-context-line { flex: 1; min-width: 0; font: 700 var(--ds-fs-14)/1.4 var(--ds-font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-context-label { color: var(--ds-ink2); }
.cs-box { display: flex; align-items: flex-end; gap: 8px; padding-block: 6px; padding-inline: 12px 6px; background: var(--ds-card); border: 1.5px solid var(--ds-line); }
.cs-box.lab { border-color: var(--ds-ink); }
.cs-box-tag { align-self: center; }
.cs-input {
  flex: 1; min-width: 0; min-height: 44px; max-height: 120px; padding: 11px 4px; border: 0; outline: none; resize: none; background: transparent;
  color: var(--ds-ink); font: 500 var(--ds-fs-15)/1.4 var(--ds-font);
}
.cs-input::placeholder { color: var(--ds-ink2); opacity: 1; }
.cs-ask {
  flex: none; display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border: 0; border-radius: 0;
  background: var(--ds-ink); color: var(--ds-card); font: 800 var(--ds-fs-15) var(--ds-font); cursor: pointer;
}
.cs-ask.idle, .cs-ask:disabled { opacity: .45; cursor: default; }
.cs-hint { margin-top: 8px; font: 600 var(--ds-fs-12) var(--ds-font); color: var(--ds-ink2); text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .cs-dots span { animation: none; opacity: .6; }
  .cs-track, .cs-knob, .cs-chip, .cs-btn { transition: none; }
}

/* ── Phone: the sidebar is a drawer from the start edge ── */
@media (max-width: 759px) {
  .cs-sidebar {
    position: absolute; z-index: 40; top: 0; bottom: 0; inset-inline-start: 0; width: 86%; max-width: 320px; padding: 16px 14px;
    background: var(--ds-bg); box-shadow: 0 0 40px rgba(0, 0, 0, .35);
    transform: translateX(var(--cs-hide, 100%)); visibility: hidden; transition: transform var(--ds-t-layer) ease, visibility 0s linear var(--ds-t-layer);
  }
  #screen-chat[dir="ltr"] .cs-sidebar { --cs-hide: -100%; }
  .cs-sidebar.open { transform: none; visibility: visible; transition: transform var(--ds-t-layer) ease; }
  .cs-side-close { display: grid; }
  .cs-sidebar-backdrop { display: block; position: absolute; inset: 0; z-index: 39; background: rgba(5, 8, 15, .58); opacity: 0; pointer-events: none; transition: opacity var(--ds-t-layer) ease; }
  .cs-sidebar-backdrop.open { opacity: 1; pointer-events: auto; }
  .cs-sidebar-toggle { display: grid; }
  .cs-header { gap: 4px; padding: 6px 10px; }
  .cs-header-id { gap: 6px; }
  .cs-header-av { width: 32px; height: 32px; }
  .cs-header-title { font-size: 16px; }
  .cs-lab { gap: 6px; }
  .cs-lab-sub { display: none; }
  .cs-col { gap: 22px; padding: 20px 16px 24px; }
  .cs-thread { gap: 22px; }
  .cs-empty { padding-top: 14px; }
  .cs-empty-av { width: 92px; height: 92px; }
  .cs-empty-t { font-size: 28px; line-height: 1.15; }
  .cs-chip { flex-direction: column; align-items: flex-start; gap: 10px; min-height: 96px; padding: 14px; }
  .cs-body { font-size: 16px; padding-inline-start: 0; }
  .cs-wait { padding-inline-start: 42px; }
  .cs-comp { padding: 10px 12px; }
  .cs-hint { display: none; }
}

/* ── A screenshot attached to a question (signed-in readers) ── */
.cs-attach { flex: none; inline-size: 44px; block-size: 44px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--ds-ink2); cursor: pointer; }
.cs-attach:hover { color: var(--ds-ink); background: var(--ds-soft); }
.cs-attach:focus-visible { outline: 2px solid var(--ds-ink); outline-offset: -2px; }
.cs-attach-prev { display: flex; align-items: center; gap: 10px; margin-block-end: 8px; padding: 6px 8px; border: 1.5px solid var(--ds-line); background: var(--ds-card); color: var(--ds-ink); font: 600 13px/1.3 var(--ds-font); }
.cs-attach-prev.hidden { display: none; }
.cs-attach-prev img { inline-size: 48px; block-size: 48px; object-fit: cover; border: 1px solid var(--ds-line); }
.cs-attach-prev span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-msg-img { display: block; max-inline-size: 220px; max-block-size: 220px; margin-block-end: 6px; border: 1px solid var(--ds-line); }

.cs-attach-wrap { position: relative; flex: none; }
.cs-attach-menu { position: absolute; inset-block-end: calc(100% + 6px); inset-inline-start: 0; z-index: 30; min-inline-size: 190px; display: flex; flex-direction: column; background: var(--ds-card); border: 1.5px solid var(--ds-ink); box-shadow: 0 8px 24px rgba(0, 0, 0, .25); }
.cs-attach-menu.hidden { display: none; }
.cs-attach-menu button { min-block-size: 48px; padding: 0 16px; border: 0; border-block-end: 1px solid var(--ds-line); background: transparent; color: var(--ds-ink); font: 700 15px var(--ds-font); text-align: start; cursor: pointer; }
.cs-attach-menu button:last-child { border-block-end: 0; }
.cs-attach-menu button:hover, .cs-attach-menu button:focus-visible { background: var(--ds-soft); outline: none; }
.cs-box.is-drop { outline: 2px dashed var(--ds-ink); outline-offset: 3px; }