/* The chat continues the landing's night sky: same navy, same stars, serif headings, slightly larger. */
:root[data-theme="dark"] {
  --bg-main: #0a0f24;
  --bg-sidebar: #0d1430;
  --bg-card: #121a36;
  --text-main: #eef1fb;
  --text-muted: #aab3cf;
  --text-light: #7e88a8;
  --line: #26304f;
  --line-focus: #3a4670;
  --primary: color-mix(in srgb, var(--accent) 45%, #fff);
  --primary-hover: color-mix(in srgb, var(--accent) 30%, #fff);
  --primary-light: color-mix(in srgb, var(--accent) 24%, transparent);
  --primary-border: color-mix(in srgb, var(--accent) 55%, transparent);
  --user-bubble-bg: color-mix(in srgb, var(--accent) 72%, #0a0f24);
  --user-bubble-text: #fff;
  --bot-bubble-bg: rgb(255 255 255 / .05);
  --bot-bubble-text: #eef1fb;
  --footer-gradient-start: rgb(10 15 36 / 0);
  --footer-gradient-end: #0a0f24;
}
:root[data-theme="dark"] body { background: var(--bg-main); }
:root[data-theme="dark"] .sky-bg { color: #dfe6ff; }
:root[data-theme="dark"] .sky-layer { opacity: .3; }
:root[data-theme="dark"] .chat-header { background: color-mix(in srgb, var(--bg-main) 82%, transparent); }
:root[data-theme="dark"] .msg-bubble { box-shadow: inset 0 0 0 1px rgb(255 255 255 / .08); }
:root[data-theme="dark"] .chat-input-form { background: #121a36; }

/* A little larger than before, closer to the landing's reading size. */
.chat-viewport { max-width: 1080px; }
.msg-bubble { font-size: 16px; padding: 18px 22px; border-radius: 18px; }
.user-bubble { border-radius: 18px; }
.chat-input-form { border-radius: 999px; padding: 8px 8px 8px 22px; }
.chat-input-form input { font-size: 16px; min-height: 44px; }
.msg-avatar { width: 46px; height: 46px; border-radius: 50%; }
.chat-brand-mark { width: 52px; height: 52px; }

/* Once the student has built a constellation, it becomes Apolo's icon everywhere. */
.has-constellation :is(.msg-avatar, .welcome-emoji, .chat-brand-mark) {
  color: transparent;
  background: var(--apolo-icon) center / 80% no-repeat, radial-gradient(circle, #1b2452, #0a0f24 72%);
  border-color: rgb(223 230 255 / .25);
}
.has-constellation .chat-brand-mark span { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .has-constellation .chat-brand-mark { animation: apolo-icon-turn 90s linear infinite; }
}
@keyframes apolo-icon-turn { to { rotate: 360deg; } }
@media (max-width: 640px) {
  .msg-bubble { font-size: 15.5px; padding: 15px 17px; }
  .chat-brand-mark { width: 40px; height: 40px; }
  .msg-avatar { width: 38px; height: 38px; }
}
:root[data-theme="dark"] .demo-banner { background: rgb(245 184 96 / .12); color: #f5d9ad; box-shadow: inset 0 0 0 1px rgb(245 184 96 / .3); }

/* Answers read like the landing's reading, not like stacked cards (Intelligent UI's rule: compose a page,
   use a surface only to group a block). Flat colours, hairlines, serif titles, no gradients. */
.message-bot .msg-bubble { padding: 4px 0; background: none; box-shadow: none; border: 0; }
:root[data-theme="dark"] .message-bot .msg-bubble { box-shadow: none; }

/* Careers: one quiet group of rows split by hairlines, like a list in the landing, not a pile of boxes. */
.cards-stream { gap: 0; max-width: 620px; padding: 4px 20px; border-radius: 22px; background: rgb(255 255 255 / .04); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .08); }
.cards-stream > .chat-career-card { padding: 16px 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.cards-stream > .chat-career-card + .chat-career-card { border-top: 1px solid rgb(255 255 255 / .08); }
.chat-career-card:hover { box-shadow: none; }
.chat-career-card .card-top { flex-wrap: wrap; gap: 8px; align-items: baseline; justify-content: flex-start; }
.chat-career-card .inst-pill, .chat-career-card .match-pill { padding: 0; border: 0; background: none; color: var(--text-light); font: 500 13px/1.3 system-ui, sans-serif; text-transform: none; letter-spacing: 0; }
.chat-career-card .match-pill::before { content: "· "; }
.chat-career-card .card-title { margin: 4px 0 6px; font: 400 22px/1.2 Georgia, "Times New Roman", serif; }
.chat-career-card .card-why { padding: 0; border: 0; background: none; color: var(--text-muted); }
.chat-career-card .card-actions { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 8px; }
.chat-career-card .btn-action { padding: 0; min-height: 44px; border: 0; background: none; box-shadow: none; color: var(--primary); font-weight: 600; }
.chat-career-card .btn-action:hover { background: none; text-decoration: underline; }

@media (prefers-reduced-motion: no-preference) {
  .ui-answer, .cards-stream { animation: answer-in .5s ease both; }
  .ui-answer rect { animation: bar-grow .8s ease-out both; transform-origin: bottom; transform-box: fill-box; }
}
@keyframes answer-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes bar-grow { from { transform: scaleY(0); } }

/* Visual answer blocks (web/src/ui/blocks.js) under Apolo's text. */
.ui-answer { display: grid; gap: var(--ui-section); max-width: 560px; margin-top: 12px; }
.ui-rows { display: grid; gap: 4px; }
.ui-source { color: var(--ui-faint); font-size: 13px; }
.ui-source summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; color: var(--ui-muted); }

/* Course access gate (school pilot) */
.access-gate {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: grid;
  place-items: center;
  padding: 16px;
  background: color-mix(in srgb, var(--bg-main) 92%, transparent);
}
.access-gate-card {
  display: grid;
  gap: 12px;
  width: min(100%, 380px);
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-card);
  color: var(--text-main);
}
.access-gate-card h2 { margin: 0; font-size: 1.25rem; }
.access-gate-card p { margin: 0; color: var(--text-muted); }
.access-gate-card input {
  padding: 10px 12px;
  border: 1px solid var(--line-focus);
  border-radius: 8px;
  background: var(--bg-main);
  color: var(--text-main);
  font-size: 1rem;
}
.access-gate-card button {
  padding: 10px 12px;
  border: 0;
  border-radius: 8px;
  background: var(--primary);
  color: var(--bg-main);
  font-weight: 600;
  cursor: pointer;
}
.access-gate-card .access-gate-error { color: #ffb4b4; }