/* Ask MQ: persistent-sidebar chat layout, MachineryQuotes-branded. */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700&display=swap');

* { box-sizing: border-box; }

:root {
  /* MachineryQuotes brand palette */
  --bg: #ffffff;
  --bg-alt: #f5f5f5;
  --ink: #1a1a1a;
  --body: #444444;
  --muted: #6e7079;
  --line: #e5e5e5;
  --user-bg: #f1f3f7;
  --accent: #1f7a6f;          /* MQ teal: primary CTAs and active states */
  --accent-hover: #185f57;
  --accent-soft: #e6f1ef;     /* light teal: hover/selection background */
  --accent-red: #d14535;      /* MQ red: eyebrow labels, urgency */
  --tier-b: #b86d00;
  --tier-b-bg: #fff5dc;
  --dark-band: #2c2c2c;
  --status-green: #2e8b57;    /* brochure on file */
  --status-orange: #e07b3c;   /* attached via vision check */
  --status-grey:  #c5c8d0;    /* no AU brochure yet */
  --sidebar-w: 280px;
}

html, body {
  margin: 0;
  padding: 0;
  font-family: "Sora", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
  height: 100%;
  -webkit-font-smoothing: antialiased;
}

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

.hidden { display: none !important; }

/* ---- top bar ---- */
.top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 22px;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  z-index: 2;
  gap: 16px;
}
.brand-title {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.01em;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
}
.brand-dot {
  width: 9px;
  height: 9px;
  background: var(--accent);
  border-radius: 50%;
  display: inline-block;
}
.stats {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  flex: 1;
  text-align: center;
}
/* Access gate — full-page split landing (library left, sign-up right) */
.gate-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--bg, #fff);
  display: flex;
  overflow: auto;
}
.gate-overlay.hidden { display: none; }

.gate-split { display: flex; width: 100%; min-height: 100%; }

/* Left: dynamic library showcase */
.gate-library {
  flex: 1 1 50%;
  background: linear-gradient(155deg, #12302b 0%, #1F7A6F 118%);
  color: #eaf3f1;
  display: flex;
  align-items: center;
  padding: 6vh 4.5%;
  overflow: auto;
}
.gate-lib-inner { width: 100%; max-width: 520px; margin: 0 auto; }
.gate-library .modal-eyebrow { color: #8fd6ca; }
.gate-lib-title {
  font-size: 30px; line-height: 1.2; margin: 10px 0 26px;
  text-wrap: balance; font-weight: 700;
}
.gate-stats { display: flex; gap: 28px; flex-wrap: wrap; margin-bottom: 26px; }
.gate-stat { display: flex; flex-direction: column; }
.gate-stat .num { font-size: 32px; font-weight: 800; line-height: 1; }
.gate-stat .lbl {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.09em;
  color: #a9cfc9; margin-top: 7px;
}
.gate-brandlist {
  display: flex; flex-direction: column; gap: 3px;
  max-height: 42vh; overflow: auto; margin-bottom: 18px; padding-right: 4px;
}
.gate-brand-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 9px 13px; border-radius: 8px;
  background: rgba(255,255,255,0.06); font-size: 14px;
}
.gate-brand-row .b-count { color: #a9cfc9; font-variant-numeric: tabular-nums; }
.gate-lib-foot { font-size: 12.5px; color: #a9cfc9; margin: 0; }

/* Right: embedded sign-up */
.gate-signup {
  flex: 1 1 50%;
  display: flex; align-items: center; justify-content: center;
  padding: 6vh 4.5%; overflow: auto;
}
.gate-card { background: var(--bg, #fff); width: 100%; max-width: 420px; }
.gate-card h2 { margin: 6px 0 10px; font-size: 24px; line-height: 1.25; text-wrap: balance; }
.gate-sub { color: var(--muted, #667); font-size: 14px; line-height: 1.5; margin-bottom: 16px; }
.gate-input {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  margin-bottom: 12px;
  border: 1.5px solid var(--line, #d8dcdc);
  border-radius: 9px;
  font-family: inherit;
  font-size: 15px;
}
.gate-input:focus { outline: none; border-color: var(--accent, #1F7A6F); }
.gate-code-input { letter-spacing: 6px; font-size: 20px; text-align: center; }
.gate-turnstile { margin: 6px 0 14px; min-height: 65px; }
.gate-btn { width: 100%; padding: 12px; font-size: 15px; }
.gate-consent { font-size: 12px; color: var(--muted, #889); margin-top: 14px; line-height: 1.45; }
.gate-consent a, .gate-resend a { color: var(--accent, #1F7A6F); }
.gate-resend { font-size: 13px; margin-top: 12px; text-align: center; }
.gate-error { color: var(--accent-red, #D14535); font-size: 13px; margin-top: 10px; min-height: 16px; }
.gate-step.hidden { display: none; }

.paywall-restore-line { margin-top: 22px; font-size: 13px; color: var(--muted, #667); }
.paywall-restore-link { color: var(--accent, #1F7A6F); cursor: pointer; text-decoration: underline; }
.paywall-error { margin: 0; font-size: 13px; color: var(--accent-red, #D14535); }
.paywall-error:not(:empty) { margin-top: 14px; }

.stats .au-flag {
  height: 13px;
  width: auto;
  vertical-align: -2px;
  margin-right: 5px;
  border-radius: 1px;
  box-shadow: 0 0 0 0.5px rgba(0,0,0,0.15);
}
.cta-quote {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--accent);
  color: white !important;
  text-decoration: none;
  border-radius: 6px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  transition: background 0.15s;
}
.cta-quote:hover { background: var(--accent-hover); }
.cta-quote .cta-label-short { display: none; }

/* shortlist chip in header */
.shortlist-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  color: var(--accent-red);
  border: 1.5px solid var(--accent-red);
  border-radius: 999px;
  padding: 4px 4px 4px 11px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
}
.shortlist-chip:hover { background: var(--accent-red); color: white; }
.shortlist-chip .chip-label { letter-spacing: 0.2px; }
/* When the count badge is hidden (nothing pinned), give the chip its
   normal symmetric pill padding so it doesn't look cramped on the right. */
.shortlist-chip:has(.chip-count.hidden) { padding: 4px 11px; }
.shortlist-chip .chip-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--accent-red);
  color: white;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1;
}
.shortlist-chip:hover .chip-count {
  background: white;
  color: var(--accent-red);
}

/* shortlist popover panel */
.shortlist-panel {
  position: fixed;
  top: 56px;
  right: 22px;
  width: 320px;
  max-width: calc(100vw - 32px);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 14px 40px rgba(0,0,0,0.15);
  padding: 14px 16px 12px 16px;
  z-index: 80;
  animation: fadeIn 0.15s ease-out;
}
.shortlist-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.shortlist-head strong {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ink);
}
.shortlist-close {
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 20px;
  cursor: pointer;
  width: 24px;
  height: 24px;
  padding: 0;
  border-radius: 50%;
  line-height: 1;
}
.shortlist-close:hover { background: var(--bg-alt); color: var(--ink); }
.shortlist-items {
  max-height: 260px;
  overflow-y: auto;
  margin: 0 -4px 8px -4px;
  padding: 0 4px;
}
.shortlist-empty {
  font-size: 12.5px;
  color: var(--muted);
  padding: 12px 0;
  text-align: center;
}
.shortlist-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 8px;
  border-radius: 6px;
  font-size: 13px;
  gap: 8px;
}
.shortlist-item:hover { background: var(--bg-alt); }
.shortlist-item .label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shortlist-item .label .brand-tag { color: var(--muted); font-size: 11.5px; margin-right: 4px; }
.shortlist-item .unpin {
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 17px;
  width: 22px;
  height: 22px;
  padding: 0;
  border-radius: 50%;
  line-height: 1;
}
.shortlist-item .unpin:hover { background: var(--line); color: var(--accent-red); }
.shortlist-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}
.link-btn {
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 12px;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
  font-family: inherit;
}
.link-btn:hover { color: var(--ink); }
.primary-btn {
  background: var(--accent);
  color: white;
  border: none;
  border-radius: 6px;
  padding: 7px 14px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: 0.02em;
}
.primary-btn:hover { background: var(--accent-hover); }
.primary-btn:disabled { background: var(--muted); cursor: not-allowed; }
.shortlist-foot {
  margin: 10px 0 0 0;
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.45;
}

/* Pin button on the model card */
.pin-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 5px 11px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  letter-spacing: 0.01em;
  transition: all 0.15s;
}
.pin-btn:hover { border-color: var(--accent-red); color: var(--accent-red); }
.pin-btn.pinned {
  background: var(--accent-red);
  color: white;
  border-color: var(--accent-red);
}
.pin-btn.pinned:hover { background: #b3382b; border-color: #b3382b; }

/* Compare-mode card */
.compare-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 10px;
}
.compare-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: 999px;
  padding: 4px 4px 4px 12px;
  font-size: 12.5px;
  font-weight: 600;
}
.compare-chip .remove-chip {
  background: transparent;
  border: none;
  color: var(--accent);
  cursor: pointer;
  font-size: 16px;
  width: 22px;
  height: 22px;
  padding: 0;
  border-radius: 50%;
  line-height: 1;
}
.compare-chip .remove-chip:hover { background: rgba(31,122,111,0.15); }
.compare-banner {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--accent-red);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

/* hamburger button — hidden on desktop, shown on mobile */
.hamburger {
  display: none;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--ink);
  width: 36px;
  height: 36px;
  padding: 0;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
}
.hamburger:hover { background: var(--bg-alt); }

/* backdrop overlay used when the sidebar drawer is open on mobile */
.sidebar-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20,20,20,0.45);
  z-index: 90;
  animation: fadeIn 0.15s ease-out;
}

/* info "i" toggle next to brand title */
.info-toggle {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--muted);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-family: "Sora", system-ui, sans-serif;
  font-style: normal;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  padding: 0;
  margin-left: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}
.info-toggle:hover {
  color: var(--accent);
  border-color: var(--accent);
}

/* "+ New chat" button in sidebar header */
.new-chat-btn {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 4px 10px;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  letter-spacing: 0.01em;
  transition: all 0.15s;
}
.new-chat-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}

/* about modal */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 20, 20, 0.55);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: fadeIn 0.18s ease-out;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.modal-card {
  background: var(--bg);
  border-radius: 12px;
  padding: 32px 36px 28px 36px;
  max-width: 620px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
}
.modal-close {
  position: absolute;
  top: 12px;
  right: 14px;
  background: transparent;
  border: none;
  font-size: 28px;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 50%;
}
.modal-close:hover { background: var(--bg-alt); color: var(--ink); }

.modal-eyebrow {
  display: block;
  color: var(--accent-red);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.modal-card h2 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 16px 0;
  line-height: 1.25;
  color: var(--ink);
}
.modal-card p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--body);
  margin: 0 0 12px 0;
}
.modal-card .modal-subhead {
  font-weight: 600;
  color: var(--ink);
  margin-top: 6px;
  margin-bottom: 6px;
}
.modal-card ul {
  margin: 0 0 18px 0;
  padding-left: 20px;
}
.modal-card li {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--body);
  margin: 3px 0;
}
.modal-cta-line {
  margin-top: 16px !important;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.modal-cta {
  display: inline-block;
  background: var(--accent);
  color: white !important;
  text-decoration: none !important;
  padding: 5px 12px;
  border-radius: 5px;
  font-weight: 600;
  font-size: 13.5px;
  margin: 0 4px;
}
.modal-cta:hover { background: var(--accent-hover); }

/* ---- layout: sidebar + main ---- */
.layout {
  flex: 1;
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  overflow: hidden;
}

/* ---- sidebar ---- */
.sidebar {
  background: var(--bg-alt);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.sidebar-title {
  padding: 12px 16px 8px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--muted);
  text-transform: uppercase;
}
.sidebar #search {
  margin: 0 14px 8px 14px;
  padding: 6px 10px;
  font-size: 13px;
  border: 1px solid var(--line);
  border-radius: 6px;
  outline: none;
  background: var(--bg);
}
.sidebar #search:focus { border-color: var(--accent); }

.brand-tree {
  overflow-y: auto;
  flex: 1;
  padding-bottom: 8px;
}

.brand-block { margin: 2px 0; }

.brand-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 14px 7px 10px;
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  user-select: none;
}
.brand-header:hover { background: rgba(0,0,0,0.04); }
.brand-header .left {
  display: flex;
  align-items: center;
  gap: 6px;
}
.brand-header .caret {
  font-size: 10px;
  width: 12px;
  color: var(--muted);
  transition: transform 0.12s ease;
}
.brand-block.open .brand-header .caret {
  transform: rotate(90deg);
}
.brand-header .count {
  font-size: 11px;
  color: var(--muted);
  font-weight: 400;
}

.category-group {
  display: none;
  padding-bottom: 4px;
}
.brand-block.open .category-group { display: block; }

.category-label {
  padding: 4px 14px 3px 28px;
  font-weight: 500;
  color: var(--muted);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.machine-row {
  padding: 5px 14px 5px 28px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 7px;
  line-height: 1.3;
  font-size: 13px;
}
.machine-row:hover { background: var(--accent-soft); }
.machine-row.selected {
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
  padding-left: 25px;
  font-weight: 600;
}

.dot {
  flex: 0 0 9px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--status-grey);
  display: inline-block;
}
.dot.has-brochure { background: var(--status-green); }
.dot.via-vision   { background: var(--status-orange); }
.dot.no-brochure  { background: var(--status-grey); }

.sidebar-foot {
  border-top: 1px solid var(--line);
  padding: 10px 16px;
  margin: 0;
  font-size: 11px;
  color: var(--muted);
  line-height: 1.7;
}
.sidebar-foot .dot { margin-right: 4px; vertical-align: 1px; }

/* ---- main / center pane ---- */
.main {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* model card at the top of the center pane */
.model-card {
  padding: 16px 22px;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.model-card .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.model-card .row .title h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}
.model-card .row .title .meta {
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 3px;
}
.model-card .clear-btn {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 12px;
  cursor: pointer;
  color: var(--muted);
  white-space: nowrap;
}
.model-card .clear-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.model-card .brochures {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.brochure-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 12.5px;
  color: var(--ink);
  text-decoration: none;
}
.brochure-link:hover { border-color: var(--accent); color: var(--accent); }
.brochure-link .pages { color: var(--muted); font-size: 11px; }

.no-brochure-note {
  margin-top: 8px;
  background: #fff5e1;
  border: 1px solid #f1d9a3;
  color: #8a5e1d;
  padding: 9px 12px;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.4;
}

/* ---- chat ---- */
.chat {
  flex: 1;
  overflow-y: auto;
  padding: 24px 22px 16px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.intro {
  width: 100%;
  max-width: 760px;
  margin-top: 5vh;
}
.intro .eyebrow {
  display: block;
  color: var(--accent-red);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.intro h1 {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 14px 0;
  line-height: 1.15;
  color: var(--ink);
}
.intro p {
  color: var(--body);
  font-size: 14.5px;
  line-height: 1.6;
  margin: 0 0 18px 0;
}
.examples {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.example {
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.12s ease;
}
.example:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}

/* messages */
.msg {
  width: 100%;
  max-width: 760px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.msg.user .bubble {
  background: var(--user-bg);
  border-radius: 14px;
  padding: 10px 14px;
  font-size: 14.5px;
  align-self: flex-end;
  max-width: 85%;
}
.msg.assistant .bubble {
  font-size: 14.5px;
  line-height: 1.6;
  padding: 4px 0 0 0;
  align-self: stretch;
}
.msg.assistant.thinking .bubble {
  color: var(--muted);
  font-style: italic;
}
.bubble p { margin: 6px 0; }
.bubble h1, .bubble h2, .bubble h3 { font-size: 15.5px; margin: 14px 0 6px 0; font-weight: 600; }
.bubble ul, .bubble ol { padding-left: 22px; margin: 6px 0; }
.bubble li { margin: 3px 0; }
.bubble a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px dotted var(--accent);
}
.bubble a:hover { border-bottom-style: solid; }
.bubble code {
  background: var(--bg-alt);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 13px;
}
.bubble table {
  border-collapse: collapse;
  margin: 10px 0;
  font-size: 13px;
}
.bubble th, .bubble td {
  border: 1px solid var(--line);
  padding: 4px 8px;
  text-align: left;
}
.bubble th { background: var(--bg-alt); }
.bubble strong { font-weight: 600; }

/* verification link (only when the bot is asking for a human read) */
.verify-note {
  margin-top: 10px;
  padding: 8px 12px;
  background: var(--tier-b-bg);
  border: 1px solid #e7c98a;
  border-radius: 6px;
  font-size: 12.5px;
  color: var(--tier-b);
}
.verify-note a {
  color: var(--tier-b);
  font-weight: 600;
}

/* ---- composer ---- */
.composer {
  width: 100%;
  max-width: 776px;
  margin: 0 auto;
  /* 35px gap above the textarea (between border-top line and field),
     60px breathing room below. */
  padding: 35px 14px 60px 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--bg);
  border-top: 1px solid var(--line);
}
.composer-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.composer-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.composer-chips:empty { display: none; }
.composer-chip {
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 12px;
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
  color: var(--ink);
  transition: all 0.12s ease;
}
.composer-chip:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}

.composer-disclaimer {
  margin: 4px 0 0 0;
  /* Offset by the button column (44px button + 8px gap = 52px) so the
     disclaimer text sits visually centred under the textarea, not under
     the textarea+button combo. */
  padding-right: 52px;
  text-align: center;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--muted);
}
.composer textarea {
  flex: 1;
  resize: none;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 14.5px;
  line-height: 1.45;
  outline: none;
  max-height: 220px;
  /* min-height for 2 visible lines of text out of the box */
  min-height: 70px;
  background: var(--bg-alt);
}
.composer textarea:focus {
  border-color: var(--accent);
  background: var(--bg);
}
.composer button[type="submit"] {
  background: var(--accent);
  color: white;
  border: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 44px;
}
.composer button[type="submit"]:hover { background: var(--accent-hover); }
.composer button[type="submit"]:disabled {
  background: var(--muted);
  cursor: not-allowed;
}

/* =========================================================
   Responsive breakpoints
   - >= 1024px : full desktop (default rules above)
   -  768-1023 : tablet — narrower sidebar, hide stats
   -  < 768   : phone — sidebar becomes off-canvas drawer
   ========================================================= */

@media (max-width: 1023px) {
  :root { --sidebar-w: 240px; }
  .stats { display: none; }
  .top-bar { padding: 12px 16px; }
  .chat, .model-card { padding-left: 16px; padding-right: 16px; }
}

@media (max-width: 767px) {
  .hamburger { display: inline-flex; }
  .top-bar { padding: 10px 12px; gap: 10px; }
  .brand-title { font-size: 14.5px; gap: 6px; }
  .brand-name { font-weight: 700; }
  .info-toggle { width: 20px; height: 20px; font-size: 12px; margin-left: 2px; }

  /* Smaller CTA label on phones */
  .cta-quote { padding: 7px 12px; font-size: 12.5px; }
  .cta-quote .cta-label-full { display: none; }
  .cta-quote .cta-label-short { display: inline; }

  /* Tighten the chip on phones but keep the "Compare" word visible.
     Hiding the word leaves an unlabelled pin icon, which is exactly the
     confusion we started with. There's enough room here for one short
     word; the tooltip alone isn't discoverable on touch devices. */
  .shortlist-chip { padding: 4px 4px 4px 10px; font-size: 12px; gap: 5px; }
  .shortlist-chip:has(.chip-count.hidden) { padding: 4px 10px; }

  /* Layout becomes single column. Sidebar slides over from the left. */
  .layout { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 86vw;
    max-width: 340px;
    z-index: 95;
    transform: translateX(-100%);
    transition: transform 0.22s ease;
    border-right: 1px solid var(--line);
    box-shadow: 4px 0 20px rgba(0,0,0,0.18);
  }
  .sidebar.open { transform: translateX(0); }

  /* Tighten the inside of the chat panel */
  .chat { padding: 16px 14px 12px 14px; }
  .intro h1 { font-size: 22px; line-height: 1.2; }
  .intro p { font-size: 14px; }
  .examples { gap: 6px; }
  .example { font-size: 12.5px; padding: 7px 10px; }

  .model-card { padding: 12px 14px; }
  .model-card .row .title h2 { font-size: 16px; }
  .model-card .row .title .meta { font-size: 12px; }

  /* Compose area: keep generous tap area but trim outer padding */
  .composer { padding: 18px 12px 32px 12px; gap: 8px; }
  .composer textarea { min-height: 56px; font-size: 15px; }
  .composer button[type="submit"] { width: 42px; height: 42px; flex-basis: 42px; }

  /* Modal: full-width minus small inset */
  .modal-overlay { padding: 16px; }
  .modal-card { padding: 22px 20px 18px 20px; border-radius: 10px; }
  .modal-card h2 { font-size: 19px; }

  /* Touch target sizes */
  .machine-row { padding-top: 9px; padding-bottom: 9px; }
  .brand-header { padding-top: 10px; padding-bottom: 10px; }
}

/* Very small phones (iPhone SE width) */
@media (max-width: 380px) {
  .brand-name { font-size: 13.5px; }
  .cta-quote { padding: 6px 10px; font-size: 12px; }
  .intro h1 { font-size: 20px; }
  /* Drop the pin icon (the word "Compare" is clearer than the icon)
     so the header doesn't overflow on iPhone-SE-sized screens. */
  .shortlist-chip svg { display: none; }
}