/* ==========================================================================
   44.01 OpenAI Workspace: its own look, so it is never mistaken for the
   Claude Workspace. Clean and neutral in the style of a GPT chat app: white
   page, light grey sidebar, black primary buttons, one sans-serif throughout.
   44.01 Canyon stays in the logo and small details. Loaded after app.css and
   only overrides it.
   ========================================================================== */

:root {
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --brand-font: var(--font);
  --serif: var(--font);
  --radius-xl: 28px;
  --side-w: 260px;
  --col-w: 768px;

  /* Dark theme (default when the system is dark) */
  --bg: #212121;
  --bg-glow-1: transparent;
  --bg-glow-2: transparent;
  --side: #181818;
  --surface: #303030;
  --surface-2: #2a2a2a;
  --surface-3: #2f2f2f;
  --glass: #2a2a2a;
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.14);
  --text: #ececec;
  --text-2: #b4b4b4;
  --text-3: #8f8f8f;
  --accent: #ececec;
  --accent-hover: #ffffff;
  --accent-text: #f0a066;
  --accent-soft: rgba(255, 255, 255, 0.07);
  --accent-ring: rgba(255, 255, 255, 0.28);
  --on-accent: #0d0d0d;
  --user-bubble: #303030;
  --code-bg: #171717;
  --composer-shadow: 0 0 0 1px var(--border), 0 4px 16px rgba(0, 0, 0, 0.25);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #ffffff;
    --side: #f9f9f9;
    --surface: #ffffff;
    --surface-2: #f4f4f4;
    --surface-3: #ececec;
    --glass: #ffffff;
    --border: rgba(0, 0, 0, 0.08);
    --border-strong: rgba(0, 0, 0, 0.13);
    --text: #0d0d0d;
    --text-2: #5d5d5d;
    --text-3: #8f8f8f;
    --accent: #0d0d0d;
    --accent-hover: #2b2b2b;
    --accent-text: #b4561a;
    --accent-soft: rgba(0, 0, 0, 0.05);
    --accent-ring: rgba(0, 0, 0, 0.22);
    --on-accent: #ffffff;
    --user-bubble: #f4f4f4;
    --code-bg: #f9f9f9;
    --composer-shadow: 0 0 0 1px var(--border), 0 4px 16px rgba(0, 0, 0, 0.06);
  }
}
:root[data-theme="light"] {
  --bg: #ffffff;
  --side: #f9f9f9;
  --surface: #ffffff;
  --surface-2: #f4f4f4;
  --surface-3: #ececec;
  --glass: #ffffff;
  --border: rgba(0, 0, 0, 0.08);
  --border-strong: rgba(0, 0, 0, 0.13);
  --text: #0d0d0d;
  --text-2: #5d5d5d;
  --text-3: #8f8f8f;
  --accent: #0d0d0d;
  --accent-hover: #2b2b2b;
  --accent-text: #b4561a;
  --accent-soft: rgba(0, 0, 0, 0.05);
  --accent-ring: rgba(0, 0, 0, 0.22);
  --on-accent: #ffffff;
  --user-bubble: #f4f4f4;
  --code-bg: #f9f9f9;
  --composer-shadow: 0 0 0 1px var(--border), 0 4px 16px rgba(0, 0, 0, 0.06);
}

/* No coloured glow behind the page */
body::before {
  display: none;
}

/* ---------- Buttons: solid black (white in dark mode) instead of orange ---------- */
.btn.primary {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: none;
  border-radius: 999px;
}
.btn.primary:hover {
  background: var(--accent-hover);
}
.btn {
  border-radius: 999px;
}

/* ---------- Sidebar ---------- */
.sidebar {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-right: 0;
}
.side-head {
  padding: 14px 10px 6px 16px;
}
.brand-wordmark {
  height: 20px;
}
.brand-sub {
  font-family: "Poppins", var(--font);
  letter-spacing: 0.12em;
  font-size: 10px;
}
.side-actions {
  padding: 8px 8px 4px;
}
.side-new {
  color: var(--text);
  font-weight: 400;
  padding: 7px 10px;
  border-radius: 10px;
}
.side-new:hover {
  background: var(--surface-3);
}
.side-new-icon {
  width: 20px;
  height: 20px;
  background: none;
  color: var(--text);
  box-shadow: none;
}
.side-new-icon svg {
  width: 18px;
  height: 18px;
  stroke-width: 1.8;
}
.side-link {
  color: var(--text);
  padding: 7px 10px;
  gap: 10px;
}
.side-link:hover,
.side-link.active {
  background: var(--surface-3);
}
.side-group-label {
  font-size: 12px;
  font-weight: 400;
  padding: 16px 10px 4px;
}
.conv-item a {
  color: var(--text);
  font-size: 14px;
  padding: 7px 10px;
}
.conv-item:hover,
.conv-item.active {
  background: var(--surface-3);
}

/* ---------- Home: one plain line above the message box ---------- */
.home {
  padding-bottom: 18vh;
}
.greeting {
  margin-bottom: 26px;
}
.greeting h1 {
  font-weight: 400;
  font-size: clamp(24px, 3.4vw, 30px);
  letter-spacing: -0.01em;
}
.suggestions {
  margin-top: 14px;
  gap: 6px;
}
.chip {
  height: 32px;
  border-color: var(--border);
  background: transparent;
  backdrop-filter: none;
  color: var(--text-2);
}
.chip:hover {
  border-color: var(--border-strong);
  background: var(--surface-2);
  color: var(--text);
}
.chip svg {
  color: var(--text-3);
}

/* ---------- Message box: wide pill, round send button ---------- */
.composer {
  padding: 10px 10px 10px 18px;
}
.composer:focus-within {
  box-shadow: var(--composer-shadow);
}
.tool-btn {
  border-radius: 999px;
  border-color: var(--border-strong);
}
.tool-btn.on {
  color: var(--text);
  background: var(--accent-soft);
  border-color: var(--border-strong);
}
.model-btn {
  border-radius: 999px;
}
.send-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: none;
}
.send-btn:hover {
  filter: none;
  background: var(--accent-hover);
}
.send-btn:disabled {
  opacity: 0.25;
}
.send-btn.stop {
  background: var(--accent);
  color: var(--on-accent);
}

/* ---------- Messages: grey bubble for you, plain text for the assistant ---------- */
.msg-user .bubble {
  border-radius: 22px;
  padding: 10px 18px;
}
.msg-assistant {
  grid-template-columns: 1fr;
  gap: 0;
}
.msg-assistant .mark {
  display: none;
}
.msg-assistant .md,
.ap-doc {
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.75;
}
.msg-actions .icon-btn.active {
  color: var(--text);
}

/* Links and focus rings in neutral tones */
:focus-visible {
  outline-color: var(--accent-ring);
}