:root {
  --sjsu-blue: #0055a2;
  --sjsu-blue-dark: #003b73;
  --sjsu-gold: #e5a823;
  --bg-main: #f3f6f9;
  --card-bg: #fff;
  --text-main: #172b43;
  --text-muted: #5c6d82;
  --line: #e1e7ef;
  --card-shadow: 0 1px 2px rgba(23, 43, 67, 0.04), 0 12px 32px rgba(23, 43, 67, 0.06);
  --radius-card: 16px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-main);
  color: var(--text-main);
  font-family: "Source Sans 3", Arial, sans-serif;
  font-size: 16px;
}

button, input, select { font: inherit; }
button, summary, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .48; }
button::-moz-focus-inner { border: 0; }

:focus-visible {
  outline: 3px solid var(--sjsu-blue);
  outline-offset: 3px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 10;
  padding: 12px 20px;
  background: white;
  color: var(--sjsu-blue-dark);
  border-radius: 8px;
}

.skip-link:focus { top: 12px; }
.hidden { display: none !important; }
.page-shell { min-height: 100vh; min-height: 100dvh; }

/* Header */
.site-header {
  position: relative;
  overflow: hidden;
  padding: 24px 0 28px;
  color: white;
  border-top: 5px solid var(--sjsu-gold);
}

.header-image {
  position: absolute;
  inset: 0;
  background: url('/static/images/sjsu-campus.jpg') center 42% / cover no-repeat;
}

.header-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    rgba(0, 28, 58, 0.96) 8%,
    rgba(0, 48, 92, 0.9) 58%,
    rgba(0, 59, 115, 0.72) 100%
  );
}

.header-content,
.main-layout {
  width: min(1200px, calc(100% - 48px));
  margin-left: auto;
  margin-right: auto;
}

.header-content { position: relative; }
.brand-row { display: flex; align-items: center; gap: 32px; }
.brand-left {
  flex-shrink: 0;
  padding-right: 32px;
  border-right: 1px solid rgba(255, 255, 255, 0.28);
}
.ischool-logo {
  display: block;
  width: 124px;
  height: auto;
  max-width: 100%;
  border-radius: 4px;
}
.brand-text { max-width: 680px; min-width: 0; }

.brand-kicker {
  margin: 0 0 8px;
  color: #f3c45d;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}

.site-header h1 {
  margin: 0 0 8px;
  font-size: clamp(1.85rem, 3vw, 2.5rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.6px;
}

.hero-subtitle {
  max-width: 600px;
  margin: 0;
  color: #e4edf6;
  font-size: 1.02rem;
  line-height: 1.5;
}

/* Main layout */
.main-layout {
  margin-top: 24px;
  margin-bottom: 40px;
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 24px;
  align-items: stretch;
}

.left-panel,
.chat-panel {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.left-panel { align-self: start; min-height: 0; }

.panel-card,
.chat-card {
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--card-shadow);
}

.panel-card {
  flex-shrink: 0;
  padding: 18px 20px 16px;
  border-top: 3px solid var(--sjsu-gold);
}

.topics-card { padding: 0; overflow: hidden; }
.topics-header { padding: 18px 18px 10px; }
.topics-header h2,
.links-card h3,
.status-card h3 {
  margin: 0 0 4px;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.3;
}
.topics-header p {
  margin: 0;
  color: var(--text-muted);
  font-size: .86rem;
  line-height: 1.45;
}
.topic-list { list-style: none; margin: 0; padding: 2px 8px 10px; }

.topic-btn {
  position: relative;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  padding: 8px 28px 8px 12px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  color: var(--text-main);
  transition: background .15s, border-color .15s;
}

.topic-btn::after {
  content: '›';
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-54%);
  color: #8996a7;
  font-size: 1.15rem;
  line-height: 1;
}

.topic-btn:hover { background: #f3f6fa; }
.topic-btn:focus-visible {
  outline: 2px solid var(--sjsu-blue);
  outline-offset: -2px;
}
.topic-btn.active {
  background: #eaf2fc;
  border-color: #c5daf0;
}
.topic-name { font-size: .94rem; font-weight: 600; line-height: 1.3; }
.topic-btn.active .topic-name { color: var(--sjsu-blue-dark); }
.topic-sub { color: var(--text-muted); font-size: .76rem; line-height: 1.35; }

.active-topic-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  color: var(--sjsu-blue-dark);
  background: #edf4fc;
  border-top: 1px solid #d5e4f4;
  font-size: .82rem;
  font-weight: 600;
}

.banner-dot {
  width: 7px;
  height: 7px;
  background: var(--sjsu-blue);
  border-radius: 50%;
  flex: 0 0 auto;
}

.resource-list {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.resource-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
  padding: 7px 2px;
  border-radius: 8px;
  color: var(--sjsu-blue-dark);
  font-size: .9rem;
  font-weight: 600;
  text-decoration: none;
}

.resource-list a::after { content: '↗'; color: var(--text-muted); font-weight: 500; }
.resource-list a:hover { background: #f3f6fa; }
.resource-list a:focus-visible { outline-offset: 1px; }

.status-card h3 { margin-bottom: 10px; }

#status-text {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: .95rem;
  font-weight: 700;
  line-height: 1.35;
}

#status-text::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #8b9aab;
  flex: 0 0 auto;
}

#status-text.is-ready::before { background: #1f7a45; }
#status-text.is-error::before { background: #b42318; }
#status-text.is-unavailable::before { background: #b54708; }

.small-muted {
  margin: 6px 0 0;
  font-size: .82rem;
  color: var(--text-muted);
  line-height: 1.45;
}

/* Chat */
.chat-panel { min-height: 100%; }
.chat-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  overflow: hidden;
  padding: 22px 22px 18px;
}

.chat-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.chat-header h2 {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -.3px;
  line-height: 1.25;
  margin: 2px 0 4px;
}

.chat-header p { color: var(--text-muted); margin: 0; font-size: .9rem; line-height: 1.4; }
.chat-header .chat-eyebrow {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: 1.4px;
  color: var(--sjsu-blue);
  margin: 0;
}
.header-actions { flex-shrink: 0; padding-top: 2px; }

.chat-tabs {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding: 12px 2px 2px;
  scrollbar-width: thin;
}

.chat-tab {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  max-width: 220px;
  min-height: 40px;
  padding: 4px 4px 4px 12px;
  border: 1px solid #d5e0ec;
  border-radius: 999px;
  background: #eef3f8;
  color: #24384f;
  cursor: pointer;
}

.chat-tab[aria-selected="true"] {
  background: #ffffff;
  border-color: #9db8d4;
  box-shadow: inset 0 -2px 0 var(--sjsu-gold);
}

.chat-tab-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 150px;
  font-size: .82rem;
  font-weight: 600;
  line-height: 1.2;
}

.chat-tab-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #3d5168;
  font-size: 1.05rem;
  line-height: 1;
}

.chat-tab-close:hover { background: #e4edf6; }
.chat-tab[aria-selected="true"] .chat-tab-close:hover { background: #e7f0f8; }

button.clear-btn {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid #c5d2e2;
  background-color: #ffffff;
  color: var(--sjsu-blue-dark);
  padding: 8px 14px;
  min-height: 40px;
  border-radius: 999px;
  font-size: .84rem;
  font-weight: 700;
  line-height: 1.2;
}

button.clear-btn:hover {
  background-color: #f4f8fc;
  border-color: #9db4cc;
}

button.clear-btn:focus {
  background-color: #ffffff;
}

button.clear-btn:focus-visible {
  background-color: #ffffff;
  outline: 3px solid var(--sjsu-blue);
  outline-offset: 2px;
}

button.clear-btn:active {
  background-color: #e7f0f8;
}

.conversation-stage {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 280px;
}

.empty-state {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 22px;
  padding: 22px 2px 8px;
}

.empty-kicker {
  margin: 0 0 6px;
  color: var(--sjsu-blue);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: 1.3px;
  text-transform: uppercase;
}

.empty-state h3 {
  margin: 0 0 8px;
  font-size: 1.28rem;
  font-weight: 700;
  letter-spacing: -.25px;
  line-height: 1.25;
}

.empty-lead {
  max-width: 62ch;
  margin: 0;
  color: var(--text-muted);
  font-size: .98rem;
  line-height: 1.55;
}

.scope-notice {
  max-width: 62ch;
  margin: 14px 0 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--sjsu-blue);
  border-radius: 10px;
  background: #fff;
  color: var(--text-main);
  font-size: .95rem;
  line-height: 1.45;
}

.scope-notice a {
  color: var(--sjsu-blue-dark);
  font-weight: 700;
}

.starter-label,
.sample-chips-label {
  margin: 0 0 10px;
  color: var(--text-main);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.starter-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.starter-chip,
.sample-chip {
  border: 1px solid #d5e0ec;
  background: #f8fafc;
  color: var(--text-main);
  border-radius: 12px;
  text-align: left;
  transition: background .15s, border-color .15s, box-shadow .15s;
}

.starter-chip {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-height: 76px;
  padding: 12px 14px 12px 16px;
}

.starter-chip::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--sjsu-gold);
}

.starter-topic {
  color: var(--sjsu-blue);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.starter-question {
  font-size: .92rem;
  font-weight: 600;
  line-height: 1.35;
}

.starter-chip:hover,
.sample-chip:hover {
  background: #ffffff;
  border-color: #8eb0d4;
  box-shadow: 0 4px 14px rgba(0, 59, 115, 0.06);
}

.starter-chip:focus-visible,
.sample-chip:focus-visible {
  outline: 3px solid var(--sjsu-blue);
  outline-offset: 2px;
  position: relative;
  z-index: 1;
}

.starter-chip:active,
.sample-chip:active {
  background: #eaf2fb;
}

.chat-box {
  height: clamp(280px, 42vh, 480px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 18px 2px 8px;
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}

.conversation-stage .chat-box {
  flex: 1 1 auto;
  height: auto;
  min-height: 180px;
  margin: 0;
}

.conversation-stage .chat-box.is-empty { display: none; }

.message {
  max-width: 86%;
  padding: 14px 16px;
  border-radius: 16px;
  margin-bottom: 14px;
  line-height: 1.55;
  overflow-wrap: anywhere;
  font-size: .96rem;
}

.message-label {
  font-size: .69rem;
  font-weight: 700;
  letter-spacing: .4px;
  margin-bottom: 5px;
  color: var(--text-muted);
}

.message-body { white-space: pre-wrap; }

.bot-message .message-body p,
.bot-message .message-body ul,
.bot-message .message-body ol {
  margin: 0 0 0.65em;
}

.bot-message .message-body > :last-child { margin-bottom: 0; }

.bot-message .message-body ul,
.bot-message .message-body ol { padding-left: 1.25em; }

.bot-message .message-body li + li { margin-top: 0.4em; }

.bot-message .message-body .md-heading {
  margin-bottom: 0.35em;
  line-height: 1.35;
}

.bot-message .message-body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.88em;
  background: rgba(23, 43, 67, 0.06);
  padding: 0.05em 0.3em;
  border-radius: 4px;
}

.bot-message {
  background: #f4f7fb;
  border: 1px solid #e6edf4;
  border-bottom-left-radius: 5px;
}

.user-message {
  background: var(--sjsu-blue);
  color: white;
  border-bottom-right-radius: 5px;
  margin-left: auto;
}

.user-message .message-label { color: #d6e8fa; }
.message-link { color: var(--sjsu-blue-dark); font-weight: 600; text-underline-offset: 3px; }
.message-link:hover { text-decoration-thickness: 2px; }

.sample-chips-area { padding: 12px 0 4px; }
.sample-chips { display: flex; flex-wrap: wrap; gap: 8px; }

.sample-chip {
  padding: 8px 12px;
  min-height: 40px;
  font-size: .84rem;
  font-weight: 600;
  color: var(--sjsu-blue-dark);
  background: #ffffff;
}

.composer { margin-top: 12px; }
.program-control {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin-bottom: 10px;
  color: var(--sjsu-blue-dark);
  font-size: .84rem;
}
.program-control label { font-weight: 600; }
.program-control select {
  flex: 1 1 240px;
  min-width: 0;
  max-width: 100%;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid #c6d1df;
  border-radius: 10px;
  background: white;
  color: inherit;
  font: inherit;
}
.program-control select:focus-visible {
  outline: 3px solid rgba(0, 85, 162, 0.4);
  outline-offset: 2px;
}
.input-row-wrapper { margin: 0; }

.input-container {
  display: flex;
  align-items: center;
  gap: 4px;
  position: relative;
  padding: 5px 6px 5px 16px;
  min-width: 0;
  border: 1px solid #c6d1df;
  border-radius: 999px;
  background: white;
  box-shadow: 0 1px 2px rgba(23, 43, 67, 0.04);
  transition: border-color .15s, box-shadow .15s;
}

.input-container:focus-within {
  border-color: var(--sjsu-blue);
  box-shadow: 0 0 0 3px rgba(0, 85, 162, 0.16);
}

#user-input {
  min-width: 0;
  flex: 1;
  width: 100%;
  padding: 10px 0;
  border: 0;
  background: transparent;
  color: var(--text-main);
  font-size: 16px;
  outline: none;
}

#user-input::placeholder { color: #5f6e82; }

.suggest-list {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 8px);
  z-index: 6;
  margin: 0;
  padding: 6px;
  list-style: none;
  max-height: min(280px, 42vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #fff;
  border: 1px solid #c6d1df;
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(23, 43, 67, 0.16);
}

.suggest-list[hidden] { display: none !important; }

.suggest-option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  border-radius: 10px;
  color: var(--text-main);
  text-align: left;
  line-height: 1.35;
  cursor: pointer;
}

.suggest-option[aria-selected="true"],
.suggest-option:hover {
  background: #eaf2fb;
}

.suggest-text { font-size: .95rem; font-weight: 600; }

.suggest-text mark {
  background: #fff4d2;
  color: inherit;
  font-weight: 800;
  padding: 0;
}

.suggest-topic {
  color: var(--sjsu-blue);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

body.is-embed .suggest-list { max-height: min(220px, 36vh); }

.prompt-list { display: flex; flex-direction: column; gap: 8px; }

.prompt-chip {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid #d5e0ec;
  border-radius: 12px;
  background: #f8fafc;
  color: var(--text-main);
  text-align: left;
  font-size: .92rem;
  font-weight: 600;
  line-height: 1.35;
}

.prompt-chip:hover { background: #fff; border-color: #8eb0d4; }

.prompt-more { margin-top: 10px; }

.prompt-more summary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  cursor: pointer;
  color: var(--sjsu-blue-dark);
  font-size: .84rem;
  font-weight: 700;
}

#send-button,
.composer-mic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  min-height: 42px;
  flex: 0 0 42px;
  border: 0;
  border-radius: 50%;
  padding: 10px;
}

#send-button { background: var(--sjsu-blue); color: white; }
#send-button:hover:not(:disabled) { background: var(--sjsu-blue-dark); }
#send-button:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--sjsu-blue-dark);
}
.composer-mic { color: #4d6076; background: transparent; }
.composer-mic:hover:not(:disabled) { background: #eef3f8; color: var(--sjsu-blue-dark); }

.composer-mic.listening {
  background: #ffe7e7;
  color: #9f1d1d;
  box-shadow: inset 0 0 0 1px #efaaaa;
}

.composer-mic svg,
#send-button svg { width: 20px; height: 20px; }

.composer-footer {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}

.voice-status {
  margin: 2px 4px 0;
  color: var(--text-muted);
  font-size: .78rem;
  line-height: 1.4;
}

.voice-status.error { color: #9f1d1d; }

.voice-tools { border: 0; padding: 0 4px; }
.voice-tools summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  list-style: none;
  cursor: pointer;
  color: #3d5168;
  font-size: .8rem;
  font-weight: 700;
  border-radius: 8px;
}

.voice-tools summary::-webkit-details-marker { display: none; }

.voice-tools summary::before {
  content: "";
  width: .4em;
  height: .4em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  margin-top: -2px;
  flex: 0 0 auto;
}

.voice-tools[open] summary::before {
  transform: rotate(45deg);
  margin-top: 2px;
}

.voice-tools summary:focus-visible { outline-offset: 3px; }

.voice-support-badge {
  float: none;
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 2px 8px;
  border-radius: 999px;
  background: #eef2f6;
  color: var(--text-muted);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.4;
}

.voice-support-badge.ready { background: #e8f6ee; color: #1b6b3a; }
.voice-support-badge.warning { background: #fbf3e4; color: #7a4e08; }

.voice-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 12px;
}

.voice-select-label,
.voice-toggle-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #3d5168;
  font-size: .82rem;
}

.voice-select-label select {
  min-height: 40px;
  max-width: 200px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px;
  background: white;
  color: var(--text-main);
}

.voice-toggle-label input { width: 17px; height: 17px; accent-color: var(--sjsu-blue); }

.voice-btn-secondary {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 12px;
  min-height: 40px;
  color: #3d5168;
  background: #f4f6f9;
  font-size: .81rem;
  font-weight: 600;
}

.voice-btn-secondary:hover { background: #e8eef5; }
.voice-privacy-note {
  color: var(--text-muted);
  margin: 10px 0 0;
  font-size: .75rem;
  line-height: 1.45;
}

.meta-row { display: flex; flex-wrap: wrap; gap: 6px; }
.meta-row:empty { display: none; }
.meta-pill {
  margin: 0;
  padding: 4px 8px;
  color: #52647b;
  background: #f1f4f8;
  border-radius: 6px;
  font-size: .73rem;
}

.chat-disclaimer {
  margin: 4px 0 0;
  border-top: 1px solid var(--line);
  padding-top: 10px;
  color: var(--text-muted);
  font-size: .75rem;
  line-height: 1.45;
}

/* Tablet: still two columns, a bit tighter */
@media (max-width: 1100px) {
  .main-layout { grid-template-columns: 260px minmax(0, 1fr); gap: 18px; }
  .header-content,
  .main-layout { width: min(1200px, calc(100% - 36px)); }
  .brand-row { gap: 22px; }
  .brand-left { padding-right: 22px; }
  .ischool-logo { width: 112px; }
  .chat-header h2 { font-size: 1.22rem; }
}

/* Stacked layout for tablet and large phones */
@media (max-width: 860px) {
  .site-header { padding: 24px 0 28px; }
  .header-content,
  .main-layout { width: min(1200px, calc(100% - 28px)); }

  .main-layout {
    display: flex;
    flex-direction: column;
    margin-top: 16px;
    margin-bottom: 28px;
    gap: 16px;
  }

  .left-panel { display: contents; }
  .topics-card { order: 1; }
  .chat-panel { order: 2; width: 100%; }
  .links-card { order: 3; }
  .status-card { order: 4; }

  .chat-card { padding: 18px 16px 16px; min-height: 0; }
  .conversation-stage { flex: none; min-height: 0; }
  .empty-state {
    justify-content: flex-start;
    gap: 16px;
    padding-top: 16px;
  }
  .conversation-stage .chat-box { min-height: 220px; }

  .topics-header { padding: 16px 16px 8px; }
  .topic-list {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    padding: 4px 14px 16px;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
  }
  .topic-list li { flex: 0 0 auto; scroll-snap-align: start; }
  .topic-btn {
    width: 188px;
    min-height: 64px;
    padding: 10px 12px;
    border-color: var(--line);
    background: #f8fafc;
  }
  .topic-btn::after { display: none; }
  .topic-name { white-space: nowrap; }
  .topic-btn:focus-visible { outline-offset: 2px; }
}

/* Phone */
@media (max-width: 640px) {
  .site-header { padding: 18px 0 22px; }
  .header-content,
  .main-layout { width: min(1200px, calc(100% - 24px)); }

  .brand-row {
    align-items: center;
    gap: 14px;
  }
  .brand-left { padding: 0; border: 0; }
  .ischool-logo { width: 96px; height: auto; object-fit: contain; }
  .brand-kicker {
    font-size: .64rem;
    letter-spacing: .12em;
    margin-bottom: 4px;
  }
  .site-header h1 { font-size: 1.32rem; letter-spacing: -.3px; margin-bottom: 4px; }
  .hero-subtitle { font-size: .88rem; line-height: 1.4; }

  .chat-header { gap: 10px; align-items: flex-start; }
  .chat-header h2 { font-size: 1.16rem; }
  .chat-header p { font-size: .84rem; }
  button.clear-btn { padding: 8px 12px; white-space: nowrap; }

  .empty-state h3 { font-size: 1.12rem; }
  .empty-lead { font-size: .92rem; }
  .starter-grid { grid-template-columns: 1fr; }
  .starter-chip { min-height: 64px; }

  .message { max-width: 94%; font-size: .92rem; padding: 12px 14px; }
  .input-container { padding-left: 14px; }
  .voice-tools summary { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* Conversation tabs */
.conversations-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 18px 2px 8px;
  color: #334d68;
  font-size: .78rem;
  font-weight: 700;
}

.conversations-label span {
  color: var(--text-muted);
  font-size: .71rem;
  font-weight: 400;
}

.chat-tabs {
  gap: 7px;
  padding: 5px 4px 10px;
  border-bottom: 1px solid var(--line);
  scroll-padding-inline: 4px;
  scrollbar-color: #bfd0e2 transparent;
}

.chat-tab {
  min-width: 130px;
  max-width: 240px;
  min-height: 44px;
  padding: 5px 5px 5px 13px;
  border-radius: 10px;
  background: #f5f7fa;
  border-color: #e1e7ef;
  transition: background .15s, border-color .15s;
}

.chat-tab:hover {
  background: #eaf1f8;
  border-color: #bbcee1;
}

.chat-tab[aria-selected="true"] {
  color: var(--sjsu-blue-dark);
  background: #eaf3fd;
  border-color: #95b8dc;
  box-shadow: inset 0 -3px 0 var(--sjsu-blue);
}

.chat-tab::before {
  content: '';
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  margin-right: 5px;
  border-radius: 50%;
  background: #b4c2d2;
}

.chat-tab[aria-selected="true"]::before {
  background: var(--sjsu-blue);
}

.chat-tab.is-working::before {
  background: var(--sjsu-gold);
  animation: replyPulse 1s ease-in-out infinite alternate;
}

.chat-tab-label {
  flex: 1;
  max-width: 172px;
}

.chat-tab-close {
  width: 30px;
  height: 30px;
  flex-basis: 30px;
  color: #526880;
}

.chat-tab-close:hover {
  background: #d7e5f3;
  color: #14395e;
}

/* Answer progress and controls */
.reply-progress {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 0;
  font-size: .79rem;
  color: var(--text-muted);
}

.reply-progress:has(#reply-status:empty):has(#reply-action[hidden]) {
  display: none;
}

#reply-action {
  border: 1px solid #c6d6e7;
  background: #f2f7fc;
  color: var(--sjsu-blue-dark);
  border-radius: 8px;
  padding: 7px 11px;
  min-height: 34px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

#reply-action[hidden] {
  display: none;
}

#reply-action:hover {
  background: #e3eef9;
}

.report-issue-button {
  display: inline-flex;
  align-items: center;
  margin-top: 10px;
  padding: 4px 2px;
  min-height: 32px;
  border: 0;
  background: transparent;
  color: var(--sjsu-blue);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .01em;
}

.report-issue-button:hover { text-decoration: underline; }

.report-dialog {
  width: min(440px, calc(100vw - 32px));
  max-height: min(640px, calc(100vh - 32px));
  max-height: min(640px, calc(100dvh - 32px));
  overflow-y: auto;
  padding: 0;
  border: 1px solid #d5e0ec;
  border-radius: 16px;
  color: var(--text-main);
  background: #fff;
  box-shadow: var(--card-shadow);
}

.report-dialog::backdrop {
  background: rgba(23, 43, 67, 0.45);
}

.report-dialog form,
.report-dialog #report-issue-thanks {
  padding: 22px 22px 18px;
}

.report-dialog h2 {
  margin: 0 0 8px;
  font-size: 1.25rem;
  line-height: 1.3;
}

.report-privacy {
  margin: 0 0 16px;
  color: var(--text-muted);
  font-size: .88rem;
  line-height: 1.45;
}

.report-reasons {
  margin: 0 0 14px;
  padding: 12px 14px 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.report-reasons legend {
  padding: 0 4px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.report-reasons label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 8px 0;
  font-size: .95rem;
  line-height: 1.35;
}

.report-dialog textarea {
  display: block;
  width: 100%;
  margin: 6px 0 14px;
  padding: 10px 12px;
  border: 1px solid #c5d4e4;
  border-radius: 10px;
  resize: vertical;
  min-height: 72px;
  color: var(--text-main);
  background: #fff;
}

.report-dialog form > label[for="report-issue-comment"] {
  font-size: .84rem;
  font-weight: 700;
  color: var(--text-main);
}

.report-toggle {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 12px;
  font-size: .92rem;
  line-height: 1.4;
}

.report-error {
  min-height: 1.2em;
  margin: 0 0 8px;
  color: #9f1d1d;
  font-size: .86rem;
}

.report-error:empty { display: none; }

.report-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.report-primary,
.report-secondary,
#report-issue-done {
  min-height: 40px;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: .88rem;
  font-weight: 700;
}

.report-secondary {
  border: 1px solid #c5d2e2;
  background: #fff;
  color: var(--sjsu-blue-dark);
}

.report-primary,
#report-issue-done {
  border: 0;
  background: var(--sjsu-blue);
  color: #fff;
}

.report-primary:hover:not(:disabled),
#report-issue-done:hover {
  background: var(--sjsu-blue-dark);
}

#report-issue-thanks p {
  margin: 0 0 16px;
  color: var(--text-muted);
  line-height: 1.45;
}

@media (max-width: 640px) {
  .report-dialog form,
  .report-dialog #report-issue-thanks { padding: 18px 16px 16px; }
  .report-actions { flex-direction: column-reverse; }
  .report-primary,
  .report-secondary,
  #report-issue-done { width: 100%; }
}

/* Cursor while the answer appears */
.is-revealing .message-body::after {
  content: '';
  display: inline-block;
  width: 6px;
  height: 14px;
  margin-left: 4px;
  vertical-align: text-bottom;
  border-radius: 2px;
  background: var(--sjsu-blue);
  animation: replyPulse .65s ease-in-out infinite alternate;
}

@keyframes replyPulse {
  from { opacity: .4; }
  to { opacity: 1; }
}

@media (max-width: 640px) {
  .conversations-label {
    margin-top: 14px;
    font-size: .75rem;
  }

  .conversations-label span {
    font-size: .65rem;
  }

  .chat-tab {
    min-width: 118px;
    max-width: 190px;
  }

  .chat-tab-label {
    max-width: 128px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .chat-tab.is-working::before,
  .is-revealing .message-body::after {
    animation: none;
  }
}

.export-chat-status { margin: 0 18px; color: var(--text-muted); font-size: .88rem; }
.export-chat-status:empty { display: none; }
#export-chat-button:disabled { opacity: .5; cursor: default; }
#chat-print-view { display: none; }

@media print {
  body > :not(#chat-print-view) { display: none !important; }
  html, body { background: white; color: black; height: auto; overflow: visible; }
  #chat-print-view {
    display: block;
    font: 12pt/1.5 sans-serif;
    color: black;
    overflow-wrap: anywhere;
  }
  #chat-print-view h1 { font-size: 18pt; }
  #chat-print-view h2 { font-size: 13pt; margin-bottom: 4pt; break-after: avoid; }
  #chat-print-view section { margin: 16pt 0; }
  .chat-print-message { white-space: pre-wrap; }
  #chat-print-view a { color: black; text-decoration: underline; }
  #chat-print-view a[href]::after { content: " (" attr(href) ")"; }
  #chat-print-view footer { border-top: 1px solid #888; padding-top: 10pt; font-size: 10pt; }
}

/* Phone controls and composer: keep these overrides after the base controls. */
.message-bubble,
.message a {
  overflow-wrap: anywhere;
}

@media (max-width: 640px) {
  .report-issue-button,
  .chat-tab-close,
  #export-chat-button,
  #clear-button,
  #user-input,
  #voice-listen-button,
  #send-button,
  .resource-list a,
  .report-primary,
  .report-secondary,
  #report-issue-done,
  #voice-language-select,
  #voice-stop-button,
  .suggest-option,
  .prompt-chip,
  .prompt-more summary {
    min-height: 44px;
    min-width: 44px;
  }

  .chat-tab-close,
  #voice-listen-button,
  #send-button {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
  }

  .chat-header { flex-direction: column; }
  .chat-header > div { width: 100%; min-width: 0; }
  .header-actions { display: flex; gap: 8px; }
  .header-actions button { flex: 1; }

  /* No overflow ancestor: sticky follows the viewport within the chat card.
     The composer stays in flow, leaving space after the final message. */
  .chat-card { overflow: visible; }
  .composer {
    position: sticky;
    bottom: 0;
    z-index: 2;
    flex-shrink: 0;
    background: #fff;
    border-top: 1px solid var(--line);
    box-shadow: 0 -4px 12px rgba(23, 43, 67, 0.08);
    padding: 12px 0;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }
  .chat-box { padding-bottom: 12px; scroll-padding-bottom: 170px; }
  .message { scroll-margin-bottom: 170px; }

  .program-control { flex-direction: column; align-items: stretch; }
  .program-control select { flex: none; width: 100%; font-size: 16px; }

  .brand-kicker,
  .chat-header .chat-eyebrow { font-size: 12px; }
  .conversations-label span,
  .topic-sub { font-size: 13px; }
  .starter-topic,
  .report-issue-button { font-size: 14px; }

  .report-reasons label,
  .report-toggle { min-height: 44px; align-items: center; }
  .report-dialog input[type="radio"],
  .report-dialog input[type="checkbox"] {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
  }
}

/* Advisor email drafts: touch-friendly controls in the composer and replies. */
.advisor-handoff { margin: 10px 0; }
.advisor-handoff-button {
  min-height: 44px;
  max-width: 100%;
  padding: 8px 14px;
  border: 1px solid #95b8dc;
  border-radius: 10px;
  background: #eaf3fd;
  color: var(--sjsu-blue-dark);
  font: inherit;
  font-size: .88rem;
  font-weight: 700;
  cursor: pointer;
}
.advisor-handoff-button:hover { background: #d7e5f3; }
.advisor-handoff-button:focus-visible {
  outline: 3px solid var(--sjsu-blue);
  outline-offset: 2px;
}
.advisor-handoff-note {
  margin: 5px 0 0;
  color: var(--text-muted);
  font-size: .78rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.advisor-handoff-note a { color: var(--sjsu-blue-dark); text-underline-offset: 3px; }

/* Program selection stays inside an assistant card on both frontends. */
.program-control[hidden] { display: none; }
.program-picker p { margin: 0 0 12px; }
.program-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.program-chip {
  max-width: 100%;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid #64748b;
  border-radius: 24px;
  background: #fff;
  color: #16334a;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.program-chip:hover, .program-chip[aria-pressed="true"] {
  background: #e6f0fa;
  border-color: #0055a2;
}
.program-chip:focus-visible { outline: 3px solid #0055a2; outline-offset: 3px; }

/* Follow-up suggestion chips under an assistant message */
.reply-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.reply-suggestion-chip {
  border: 1px solid #d5e0ec;
  background: #f8fafc;
  color: var(--text-main);
  border-radius: 999px;
  padding: 8px 14px;
  min-height: 36px;
  font: inherit;
  font-size: 0.9rem;
  text-align: left;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}

.reply-suggestion-chip:hover { background: #fff; border-color: #8eb0d4; }
.reply-suggestion-chip:focus-visible { outline: 2px solid #0055a2; outline-offset: 2px; }