/* =====================================================================
   clean.css - the chat and the Tutor, with the furniture taken out.

   The bar is ChatGPT's: you open it, there is a place to type, and the
   answer is text on the page. Before this sheet a single reply carried a
   tinted card, a border, two shadows, an accent stripe, a glow behind it,
   four follow-up chips and three tool icons - on every reply, not just the
   newest - and the empty chat stacked starter cards, four slash-command
   chips, a tips line and a keyboard legend on top of each other.

   What this sheet does:
     - a reply is plain text on the page; your message is a quiet bubble
     - follow-up chips ride the newest reply only
     - copy / share icons on older replies appear on hover (always visible
       on touch, where there is no hover)
     - no "You" / "Aluma" labels, no avatars, no keyboard legend
     - the Tutor page drops the tagline, the Refresh button and the stats
       tiles until there is something to count, and the search + filters
       until there is enough to filter

   Nothing is deleted from the DOM: every control is still reachable where
   it matters (slash commands by typing "/", tips via /tips).
   Composes redesign.css tokens, mints none, sets no radius - shape stays
   rounded.css's (tests/test_beta_redesign.py holds all three).
   Selectors carry body:not(#_) - one ID's worth of weight - because the
   rules they replace are six classes deep and !important in styles.css.
   ===================================================================== */

/* ── empty chat: greeting + three starters + the composer ─────────────── */
body:not(#_) .welcome .welcome-slash,
body:not(#_) .composer-hint {
  display: none !important;
}

/* The starters are three plain pills - a line of text each, no icon, no
   caption, no halo behind the greeting. */
body:not(#_) #welcome.welcome::before,
body:not(#_) #welcome.welcome::after {
  display: none !important;
}
body:not(#_) .welcome .suggestion-icon,
body:not(#_) .welcome .suggestion-desc {
  display: none !important;
}
body:not(#_) .welcome .suggestion-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 8px !important;
  max-width: none !important;
}
body:not(#_) .welcome .suggestion {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
  justify-content: center !important;
  min-height: 0 !important;
  padding: 10px 16px !important;
  box-shadow: none !important;
  background: transparent !important;
}
body:not(#_) .welcome .suggestion-title {
  font-weight: 500 !important;
  white-space: nowrap !important;
}

/* ── messages ─────────────────────────────────────────────────────────── */
body:not(#_) .msg .msg-role,
body:not(#_) .msg:not(.chat-skel-msg) .msg-avatar {
  display: none !important;
}
body:not(#_) .msg.user,
body:not(#_) .msg.assistant {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
body:not(#_) .msg.user .msg-body {
  margin-left: auto !important;
  background: var(--bg-subtle) !important;
  border: 0 !important;
  box-shadow: none !important;
  max-width: min(78%, 640px) !important;
}

/* The answer is the page, not a card on it. */
body:not(#_) .msg.assistant::after,
body:not(#_) .msg.assistant .msg-body::before {
  display: none !important;
}
body:not(#_) .msg.assistant .msg-body {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 2px 0 !important;
  width: 100% !important;
}

/* Follow-ups belong to the answer you are reading, not to every answer. */
body:not(#_) .msg.assistant:has(~ .msg) .msg-suggests {
  display: none !important;
}
body:not(#_) .msg-suggest-btn {
  background: transparent !important;
  box-shadow: none !important;
}

/* Three follow-ups at most, words only. */
body:not(#_) .msg-suggest-btn:nth-child(n + 4),
body:not(#_) .msg-suggest-btn .msg-sg-ico {
  display: none !important;
}
/* Copy / explain / share: bare icons, not three outlined circles. */
body:not(#_) .msg-tool-btn {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Tool icons: quiet until you reach for them. Touch has no hover, so on a
   phone they stay put. */
@media (hover: hover) {
  body:not(#_) .msg.assistant:has(~ .msg) .msg-tools {
    opacity: 0;
    transition: opacity var(--d-fast, 140ms) var(--ease-out, ease);
  }
  body:not(#_) .msg.assistant:hover .msg-tools,
  body:not(#_) .msg.assistant:focus-within .msg-tools {
    opacity: 1;
  }
}

/* The composer floats on the page - no band, no rule line above it. */
body:not(#_) .view-chat .composer {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border-top: 0 !important;
}

/* ── Tutor page ───────────────────────────────────────────────────────── */
body:not(#_) .tt-browse .tt-note,
body:not(#_) #ap-dash-refresh {
  display: none !important;
}
/* Tiles reading "0" and "Not set" are not information. */
body:not(#_) .tt-browse.tt-none .tt-widgets {
  display: none !important;
}
/* A search box and three dropdowns over two rows is a control panel for
   nothing. They come back once there is a real list to narrow. */
body:not(#_) .tt-browse.tt-few .tt-bar {
  display: none !important;
}

/* ── Test Prep wizard ─────────────────────────────────────────────────── */
/* The button row carried a top rule on a 26px-rounded box, which painted an
   empty arc above the buttons that read as a covered-up control. And the
   title and subtitle were inset 24px while the chips and date field under
   them were not, so every step looked knocked out of line. */
body:not(#_) .tp-custom-modal .modal-actions {
  border-top: 0 !important;
}
body:not(#_) .tp-custom-modal .tp-custom-step .modal-title,
body:not(#_) .tp-custom-modal .tp-custom-step .modal-sub {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* An empty Tutor is one sentence and one button, not a dashed box around an
   icon around a heading - and "0 sessions" beside the title says nothing. */
body:not(#_) .view-autopilot .tt-empty {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
/* "Start a session" only clicked "+ New session", which is already in the
   header - two buttons for one action. */
body:not(#_) .view-autopilot .tt-empty .ico,
body:not(#_) .view-autopilot #tt-empty-new,
body:not(#_) .view-autopilot:has(.tt-browse.tt-none) #tt-count {
  display: none !important;
}

/* ── Every modal: one left edge, one right edge, no arc ───────────────── */
/* The card pads 28px. styles.css then pads the title, the subtitle and a
   catch-all of direct children (`.modal > label, p, div:not(...)`) a further
   24px each, while inputs, textareas and callouts are reset elsewhere - so
   text started at 53px and the boxes under it at 29px. Measured on all 30
   modals at 430px and 1440px: every one had at least two left edges. The card
   already pads; its children do not pad again. Real boxes keep their inside
   padding (a callout's text must not touch its own border), and the
   connector browser, which pads its own header and list, is left alone. */
body:not(#_) .modal:not(.conn-browser-modal):not(.proof-sprint) > :is(.modal-title, .modal-sub, label, p,
    div:not(.modal-actions):not(.tutor-note):not(.feedback-route):not(.warn-box):not(.import-result):not(.login-wait):not(.auth-error)),
body:not(#_) .modal:not(.conn-browser-modal) :is(.tp-custom-step, .school-step) > :is(.modal-title, .modal-sub, label, p),
body:not(#_) .modal:not(.conn-browser-modal) :is(.modal-title, .modal-sub) {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
body:not(#_) .modal:not(.conn-browser-modal) .modal-title {
  padding-top: 0 !important;
}
/* The survey's close button is absolute in the top-right corner; its title
   keeps the clearance it was designed with, or it runs under the x. */
body:not(#_) #feedback-survey-backdrop .feedback-survey-modal > .modal-title {
  padding-right: 36px !important;
}
/* A callout is a box: its own inset, not the old catch-all's 24px. */
body:not(#_) .modal > .tutor-note {
  padding-left: 13px !important;
  padding-right: 13px !important;
}
/* The footer is a row of buttons, not a rounded box with a rule on top of it
   - that rule on a 26px-rounded box painted an empty arc above Cancel on 28
   of the 30 modals. */
body:not(#_) .modal .modal-actions {
  border-top: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* "Before you start" had no width of its own, so it shrank to its longest
   word: 183px on a phone, the title broke over two lines and Cancel sat on
   the card's edge. */
body:not(#_) #tp-setup-backdrop .tp-setup-modal {
  width: min(440px, calc(100vw - 32px)) !important;
}

/* ── Tutor sessions in the chat ───────────────────────────────────────── */
/* The student's bubble keeps its line breaks ("Walk me through X", then what
   they typed). Without this the two ran together into one line. */
body:not(#_) .msg.user .msg-content {
  white-space: pre-wrap !important;
}
/* A walkthrough's next step is the row under it, not the generic chips. */
body:not(#_) .msg.tutor-reply .msg-suggests {
  display: none !important;
}
/* The row under a walkthrough: plain, readable (the boxed panel set its
   labels at 8-10px), and no box around it. */
body:not(#_) .guided-workbar.gwb-min {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  margin: 12px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
body:not(#_) .guided-workbar.gwb-min :is(.gwb-next, .gwb-link, .stp-btn) {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 34px !important;
  padding: 0 14px !important;
  border: 1px solid var(--border-strong) !important;
  background: transparent !important;
  color: var(--text) !important;
  font: inherit !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  cursor: pointer;
}
body:not(#_) .guided-workbar.gwb-min .gwb-next {
  border-color: transparent !important;
  background: rgb(var(--accent-rgb)) !important;
  /* The theme's ink: white on the light accent, near-black on the dark one
     (white on the dark accent measured 1.7:1). */
  color: var(--accent-ink) !important;
}
body:not(#_) .guided-workbar.gwb-min .stp-btn.is-on {
  border-color: rgb(var(--accent-rgb) / 0.55) !important;
  color: var(--accent) !important;
}
body:not(#_) .guided-workbar.gwb-min [data-gwb-stp]:empty {
  display: none !important;
}

/* ── One header, not two ──────────────────────────────────────────────── */
/* A session is one topbar row: the class, "Tutor: <title>", Mark done, the
   bell. renderTutorHead moves #th-done up here and keeps the second row
   (#tutor-head) hidden - it repeated the class and the title in 12px type,
   plus a "Fast" pill that duplicated the composer's picker. */
body:not(#_) .tutor-head :is(.th-class, .th-mode) {
  display: none !important;
}
body:not(#_) .topbar-right .th-done[hidden] {
  display: none !important;
}
body:not(#_) .topbar-right .th-done {
  min-height: 34px !important;
  padding: 0 14px !important;
  border: 1px solid var(--border-strong) !important;
  background: transparent !important;
  color: var(--text) !important;
  font: inherit !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  cursor: pointer;
}
body:not(#_) .topbar-right .th-done.is-done {
  border-color: var(--success) !important;
  color: var(--success) !important;
}
/* Mastered is the student's own call on the skill this chat is on - it reads
   as the positive action beside Mark done. */
body:not(#_) .topbar-right .th-done.th-mastered:not(.is-done) {
  border-color: rgb(var(--accent-rgb) / 0.55) !important;
  color: var(--accent) !important;
}
body:not(#_) .tutor-head:not([hidden]) {
  background: transparent !important;
  border-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 6px !important;
}
/* The streak lives on Home. In the chat it was one more badge in the corner. */
body:not(#_) .view-chat #streak-badge {
  display: none !important;
}
/* The bell takes the chat topbar's corner. (This zeroed a 104px lane kept
   for Lumi's badge on every topbar; that lane is gone - see soft.css §5 - and
   this stays as the chat's own statement that nothing pads its corner.) */
body:not(#_) .view-chat .topbar-right {
  padding-right: 0 !important;
  margin-left: auto !important;
}

/* ── Notifications ────────────────────────────────────────────────────── */
/* 360px and one line per notification cut every sentence mid-word ("Pick a
   study goal? You have no goal, so Aluma is not tracking your progress. Pi").
   Wider, and each notification wraps to three lines; the expanded view shows
   all of it. */
body:not(#_) .notif-panel {
  width: min(420px, calc(100vw - 32px)) !important;
}
body:not(#_) .notif-panel-head {
  gap: 8px !important;
}
body:not(#_) .notif-panel-head > strong {
  margin-right: auto !important;
}
body:not(#_) .notif-panel-list {
  max-height: min(460px, 70vh) !important;
}
body:not(#_) .notif-item :is(strong, span) {
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  text-overflow: clip !important;
  max-width: 100% !important;
}
body:not(#_) .notif-item span {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 3 !important;
  overflow: hidden !important;
}
body:not(#_) .notif-expand {
  display: inline-grid !important;
  place-items: center !important;
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  padding: 0 !important;
}
body:not(#_) .notif-expand .ne-close,
body:not(#_) .notif-panel.is-expanded .notif-expand .ne-open {
  display: none !important;
}
body:not(#_) .notif-panel.is-expanded .notif-expand .ne-close {
  display: block !important;
}
/* Expanded: the same anchor as the dropdown (the topbar's blur makes it
   the containing block, so `fixed` was measured from the topbar and the
   panel jumped sideways off the bell), only bigger - and every notification
   in full. */
body:not(#_) .notif-panel.is-expanded {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  right: 0 !important;
  width: min(640px, calc(100vw - 32px)) !important;
  max-height: calc(100vh - 104px) !important;
  display: flex !important;
  flex-direction: column !important;
}
/* While it is open the panel is the top layer: above the overdue banner
   (z 950, pinned at the same height, it covered the panel's header) and the
   phone/tablet bottom nav (it covered the last notification). */
body:not(#_) .view-chat > .topbar:has(#notif-panel:not(.hidden)) {
  z-index: 960 !important;
}
body:not(#_):has(#notif-panel:not(.hidden)) .deadline-banner {
  display: none !important;
}
@media (max-width: 900px) {
  body:not(#_) .notif-panel.is-expanded {
    max-height: calc(100vh - 104px - var(--mnav-clear, 72px)) !important;
  }
}
body:not(#_) .notif-panel.is-expanded.hidden {
  display: none !important;
}
body:not(#_) .notif-panel.is-expanded .notif-panel-list {
  max-height: none !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
}
body:not(#_) .notif-panel.is-expanded .notif-item span {
  -webkit-line-clamp: unset !important;
  display: block !important;
}
body:not(#_) .notif-panel.is-expanded .notif-item {
  padding: 14px 16px !important;
}
body:not(#_) .notif-panel.is-expanded .notif-item strong {
  font-size: 15px !important;
}
body:not(#_) .notif-panel.is-expanded .notif-item span {
  font-size: 14px !important;
}
/* Solid, not glass: behind a list of sentences, the chat showing through
   read as text printed over text. */
body:not(#_) .notif-panel {
  background: var(--surface-strong, var(--bg-elev-1)) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* A checkbox is a box, not a field: the modal input rule stretched the
   feedback screenshot checkbox across the row and stranded it mid-line. */
body:not(#_) .modal input:is([type="checkbox"], [type="radio"]) {
  width: auto !important;
  flex: 0 0 auto !important;
  min-height: 0 !important;
  margin: 3px 0 0 !important;
}

/* ── Modal spacing, the rest of the ragged edges ─────────────────────── */
/* Home's "Customize" pill is fixed above the modal scrim (z 130 vs 100): it
   floated undimmed over every dialog opened from Home, on top of the Guided
   walkthrough's own "Walk me through it" button on a laptop screen. */
body:not(#_):has(.modal-backdrop:not(.hidden)) .hw-bar {
  display: none !important;
}
/* In the wizard steps the subtitle is not a direct child of the modal, so it
   missed the gap every other modal has and sat on the control below it. */
body:not(#_) .modal :is(.tp-custom-step, .school-step) > .modal-sub {
  margin-bottom: 14px !important;
}
/* A label belongs to the field under it. The column's 14px top margin on the
   field plus the label's 6px put the label nearer the field above. */
body:not(#_) .modal > label + :is(input, select, textarea, .tp-dd) {
  margin-top: 0 !important;
}
/* "Before you start" padded 16/18px while every other Test Prep modal pads
   28px - its title crowded the corner. */
body:not(#_) #tp-setup-backdrop .tp-setup-modal {
  padding: 28px !important;
}
/* The feedback route chip kept the old catch-all's 24px instead of its own
   inset, so its text stood 10px right of the textarea's under it. */
body:not(#_) .modal > .feedback-route {
  padding-left: 14px !important;
  padding-right: 14px !important;
}
/* Practice with Lumi: the input's 10px bottom margin rode it 5px above Send. */
body:not(#_) .tp-topic-chat-form input {
  margin-bottom: 0 !important;
}
/* Import memory: dark-theme white-alpha on a white card drew no edge, so the
   prompt looked cut off mid-line and Copy read as a caption. */
body:not(#_) .mem-import-modal .mem-codebox {
  background: var(--bg-elev-2) !important;
  border: 1px solid var(--border) !important;
}
body:not(#_) .mem-import-modal .mem-copy {
  background: var(--surface-strong, var(--bg-elev-1)) !important;
  border: 1px solid var(--border-strong) !important;
  color: var(--text) !important;
}
@media (max-width: 520px) {
  body:not(#_) .mem-import-modal .mem-codebox {
    display: flex !important;
    flex-direction: column !important;
  }
  body:not(#_) .mem-import-modal .mem-copy {
    position: sticky !important;
    top: 0 !important;
    order: -1 !important;
    align-self: flex-end !important;
    margin: 0 0 8px !important;
    width: max-content !important;
  }
  body:not(#_) .mem-import-modal .mem-codebox pre {
    padding-right: 0 !important;
  }
}
/* Its step connector was measured off the number, not the step: an 11px
   stub under each number pointing at nothing. */
body:not(#_) .mem-import-modal .mem-num::after {
  display: none !important;
}
/* "Scanning your apps..." printed twice - once in the markup, once again
   from a pseudo-element. */
body:not(#_) .import-loading::after {
  content: none !important;
}

/* ── Chat: nothing floats over the conversation ───────────────────────── */
/* The overdue banner pinned itself over the top of the chat and covered the
   student's first message. Deadlines are on Home and in the bell; the banner
   still shows on every other page (only a click on it spends the day's
   reminder, so hiding it here loses nothing). */
body:not(#_)[data-view="chat"] .deadline-banner {
  display: none !important;
}

/* ── Guided walkthrough launcher on a short screen ────────────────────── */
/* On a 1366x657 Chromebook the card was 590px tall around 735px of content,
   and "Walk me through it" sat below its bottom edge. The buttons stay
   pinned to the bottom of the card; on a short screen the reassurance box
   (the same promise the subtitle area makes) steps aside for the form. */
body:not(#_) #task-run-backdrop .modal-actions {
  position: sticky !important;
  bottom: 0 !important;
  z-index: 2 !important;
  background: var(--surface-strong, var(--bg-elev-1)) !important;
  padding-top: 12px !important;
  padding-bottom: 4px !important;
}
@media (max-height: 800px) {
  body:not(#_) #task-run-backdrop #task-run-warn {
    display: none !important;
  }
  body:not(#_) #task-run-backdrop #task-run-instructions {
    min-height: 64px !important;
    height: 64px !important;
  }
}

/* A title in a modal with a close button in its top-right corner keeps
   clear of it (the survey above, and the Mastery topic card). */
body:not(#_) .modal:has(> :is(.disc-modal-close, .proof-close)) > .modal-title {
  padding-right: 36px !important;
}

/* ── Test Prep build progress ─────────────────────────────────────────── */
body:not(#_) .tp-build-progress {
  display: grid;
  gap: 8px;
  margin-top: 18px;
}
body:not(#_) .tp-build-progress .tpb-track {
  height: 10px;
  overflow: hidden;
  background: var(--bg-elev-3);
}
body:not(#_) .tp-build-progress .tpb-fill {
  display: block;
  height: 100%;
  width: 0;
  background: rgb(var(--accent-rgb));
  transition: width 600ms var(--ease-out, ease);
}
body:not(#_) .tp-build-progress .tpb-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
  color: var(--text-secondary);
}
body:not(#_) .tp-build-progress .tpb-pct {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--text);
}
/* The set that just arrived, pointed at once in the Test Prep list. */
body:not(#_) .tp-just-built {
  box-shadow: 0 0 0 2px rgb(var(--accent-rgb)) !important;
  transition: box-shadow 400ms ease;
}
/* The buttons step aside for the bar while a set is being built. */
body:not(#_) .tp-custom-step .modal-actions[hidden] {
  display: none !important;
}
/* Admin data backup: download link and restore picker side by side. */
body:not(#_) .admin-backup-note {
  margin: 0 0 12px;
  color: var(--text-dim, inherit);
}
body:not(#_) .admin-backup-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
body:not(#_) .admin-backup-row .ghost-btn {
  cursor: pointer;
  text-decoration: none;
}
body:not(#_) .admin-backup-status {
  margin-top: 10px;
  min-height: 1.2em;
}