/* AI tutor chat drawer — fixed at bottom of viewport, collapses to a 46px strip,
   expands to ~80vh on click. Mirrors scholary.ai's pattern with the SI palette. */

.tutor-drawer {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 1040;
  background: var(--si-dark-2, #131421);
  border-top: 1px solid var(--si-border, #2A2B40);
  font-family: var(--font-body, system-ui, sans-serif);
  display: flex;
  flex-direction: column;
  transition: max-height 0.25s ease;
  max-height: 46px;
}
/* Pages that render the drawer get bottom padding equal to the collapsed drawer
   height, so the page footer stays visible above the drawer when scrolled to end. */
body:has(.tutor-drawer) {
  padding-bottom: 46px;
}
.tutor-drawer[data-state="expanded"] {
  max-height: 80vh;
  box-shadow: 0 -8px 32px rgba(0,0,0,0.35);
}
body.bg-light .tutor-drawer {
  background: #FFFCF6;
  border-top-color: #DDD5C4;
  box-shadow: 0 -4px 24px rgba(120,100,60,0.08);
}
body.bg-light .tutor-drawer[data-state="expanded"] {
  box-shadow: 0 -8px 32px rgba(120,100,60,0.18);
}

/* ── Toggle strip (always visible) ─────────────────────────────── */
.tutor-drawer__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 46px;
  padding: 0 1.25rem;
  background: none;
  border: 0;
  color: var(--si-silver);
  font-size: 0.85rem;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}
.tutor-drawer__toggle:hover { color: var(--si-gold); }
.tutor-drawer__label::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  background: var(--si-gold);
  border-radius: 50%;
  margin-right: 0.6rem;
  vertical-align: middle;
}
.tutor-drawer__chevron {
  font-size: 0.7rem;
  color: var(--si-silver);
  transition: transform 0.25s;
}
.tutor-drawer[data-state="expanded"] .tutor-drawer__chevron { transform: rotate(180deg); }

body.bg-light .tutor-drawer__toggle { color: #6A6050; }
body.bg-light .tutor-drawer__toggle:hover { color: var(--si-gold-dark); }

/* ── Expanded content ──────────────────────────────────────────── */
.tutor-drawer__expanded {
  display: none;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.tutor-drawer[data-state="expanded"] .tutor-drawer__expanded { display: flex; }

.tutor-drawer__messages {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.tutor-msg {
  max-width: 88%;
  padding: 0.6rem 0.9rem;
  border-radius: 10px;
  font-size: 0.92rem;
  line-height: 1.55;
  word-wrap: break-word;
}
.tutor-msg--user {
  align-self: flex-end;
  background: rgba(201, 168, 76, 0.12);
  border: 1px solid rgba(201, 168, 76, 0.3);
  color: var(--si-gold-light);
}
.tutor-msg--assistant {
  align-self: flex-start;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--si-border);
  color: #E8E4DC;
}
.tutor-msg p { margin: 0 0 0.6em; }
.tutor-msg p:last-child { margin-bottom: 0; }
.tutor-msg ul, .tutor-msg ol { margin: 0.4em 0 0.6em 1.2em; }
.tutor-msg code {
  background: rgba(154,126,42,0.12);
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 0.86em;
  font-family: var(--font-mono, monospace);
}
.tutor-msg pre {
  background: rgba(0,0,0,0.25);
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  overflow-x: auto;
  font-size: 0.82rem;
}
.tutor-msg a { color: var(--si-gold-light); }
.tutor-msg h1, .tutor-msg h2, .tutor-msg h3, .tutor-msg h4 {
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  margin: 0.8em 0 0.3em;
  line-height: 1.25;
}
.tutor-msg h1 { font-size: 1.25rem; }
.tutor-msg h2 { font-size: 1.10rem; color: var(--si-gold-light); }
.tutor-msg h3 { font-size: 1.0rem; }
.tutor-msg blockquote {
  border-left: 2px solid var(--si-gold);
  padding-left: 0.7rem;
  margin: 0.6em 0;
  color: var(--si-silver);
  font-style: italic;
}
.tutor-msg hr {
  border: 0;
  border-top: 1px solid var(--si-border);
  margin: 1em 0;
}
.tutor-msg table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.6em 0;
  font-size: 0.85rem;
  overflow-x: auto;
  display: block;
}
.tutor-msg th, .tutor-msg td {
  padding: 0.35rem 0.55rem;
  border-bottom: 1px solid var(--si-border);
  text-align: left;
}
.tutor-msg th {
  color: var(--si-gold);
  font-weight: 600;
  border-bottom: 2px solid var(--si-gold);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
body.bg-light .tutor-msg th { color: var(--si-gold-dark); border-bottom-color: var(--si-gold-dark); }
body.bg-light .tutor-msg blockquote { color: #6A6050; border-left-color: var(--si-gold-dark); }
.tutor-msg .cite-ref {
  display: inline-block;
  font-size: 0.7em;
  color: var(--si-gold);
  text-decoration: none;
  vertical-align: super;
  padding: 0 2px;
  font-weight: 600;
}
.tutor-msg .cite-ref:hover { color: var(--si-gold-light); }

.tutor-msg--assistant.is-streaming::after {
  content: '▌';
  display: inline-block;
  color: var(--si-gold);
  animation: tutor-blink 1s step-start infinite;
}
@keyframes tutor-blink { 50% { opacity: 0; } }

body.bg-light .tutor-msg--user {
  background: rgba(154,126,42,0.10);
  border-color: rgba(154,126,42,0.3);
  color: var(--si-gold-dark);
}
body.bg-light .tutor-msg--assistant {
  background: #FAF6EC;
  border-color: #E0D8C8;
  color: #2E2820;
}

/* ── Suggestion chips ──────────────────────────────────────────── */
.tutor-drawer__suggestions {
  padding: 0.5rem 1.25rem 0.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.suggestion-chip {
  background: transparent;
  border: 1px solid var(--si-border);
  color: var(--si-silver);
  font-size: 0.78rem;
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.15s, color 0.15s;
}
.suggestion-chip:hover { border-color: var(--si-gold); color: var(--si-gold); }
body.bg-light .suggestion-chip { border-color: #D0C8B8; color: #6A6050; }
body.bg-light .suggestion-chip:hover { border-color: var(--si-gold-dark); color: var(--si-gold-dark); }

/* ── Input ─────────────────────────────────────────────────────── */
.tutor-drawer__form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem 0.9rem;
  border-top: 1px solid var(--si-border);
}
body.bg-light .tutor-drawer__form { border-top-color: #E0D8C8; }

.tutor-qa-suggest {
  margin-bottom: 0.6rem;
  padding: 0.5rem 0.75rem;
  background: rgba(201, 168, 76, 0.06);
  border: 1px solid rgba(201, 168, 76, 0.3);
  border-radius: 6px;
}
.tutor-qa-suggest[hidden] { display: none; }
.tutor-qa-suggest__label {
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--si-gold);
  font-weight: 600;
  margin-bottom: 0.4rem;
}
.tutor-qa-suggest__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 0.4rem 0.2rem;
  font-family: inherit;
  font-size: 0.85rem;
  color: #E8E4DC;
  cursor: pointer;
  border-bottom: 1px solid rgba(201, 168, 76, 0.15);
}
.tutor-qa-suggest__item:last-child { border-bottom: 0; }
.tutor-qa-suggest__item:hover { color: var(--si-gold); }
.tutor-qa-suggest__q { flex: 1; }
.tutor-qa-suggest__hint {
  font-size: 0.7rem;
  color: var(--si-silver);
  white-space: nowrap;
}
body.bg-light .tutor-qa-suggest { background: rgba(154,126,42,0.05); border-color: rgba(154,126,42,0.3); }
body.bg-light .tutor-qa-suggest__item { color: #2E2820; }

.selected-quote {
  font-size: 0.78rem;
  color: var(--si-silver);
  background: rgba(201, 168, 76, 0.06);
  border-left: 2px solid var(--si-gold);
  padding: 0.35rem 0.65rem;
  border-radius: 0 4px 4px 0;
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
}
.selected-quote__close {
  background: none; border: 0; color: var(--si-silver);
  cursor: pointer; padding: 0 0.25rem; font-size: 1rem; line-height: 1;
}
.selected-quote__close:hover { color: var(--si-gold); }

.tutor-drawer__input-row {
  display: flex;
  gap: 0.5rem;
  align-items: flex-end;
}
.tutor-drawer__input {
  flex: 1;
  resize: none;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--si-border);
  border-radius: 8px;
  color: #E8E4DC;
  font-family: inherit;
  font-size: 0.9rem;
  padding: 0.55rem 0.75rem;
  min-height: 40px;
  max-height: 120px;
  line-height: 1.4;
}
.tutor-drawer__input:focus { outline: none; border-color: var(--si-gold); }
body.bg-light .tutor-drawer__input { background: #FFFFFF; border-color: #D0C8B8; color: #2E2820; }

.tutor-drawer__send {
  height: 40px;
  width: 40px;
  border: 0;
  border-radius: 8px;
  background: var(--si-gold);
  color: #000;
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s;
}
.tutor-drawer__send:hover { background: var(--si-gold-light); }
.tutor-drawer__send:disabled { background: var(--si-border); cursor: not-allowed; color: var(--si-silver); }

.tutor-drawer__footer {
  font-size: 0.7rem;
  color: var(--si-silver);
  padding: 0 1.25rem 0.5rem;
  text-align: center;
  letter-spacing: 0.02em;
}
body.bg-light .tutor-drawer__footer { color: #9A9080; }

.tutor-context-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: 0.75rem;
  cursor: pointer;
  user-select: none;
  font-size: 0.7rem;
  color: var(--si-silver);
}
.tutor-context-toggle input { accent-color: var(--si-gold); }
.tutor-context-toggle:hover { color: var(--si-gold); }

.tutor-empty-state {
  padding: 2rem 1rem;
  text-align: center;
  color: var(--si-silver);
  font-size: 0.88rem;
  font-style: italic;
}

/* ── Selection popover ("Ask about this") ──────────────────────── */
.selection-popover {
  position: absolute;
  z-index: 1050;
  background: var(--si-dark);
  color: var(--si-gold);
  border: 1px solid var(--si-gold);
  font-size: 0.8rem;
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  transition: opacity 0.12s, transform 0.12s;
}
.selection-popover:hover { background: var(--si-gold); color: #000; }
body.bg-light .selection-popover { background: #FFFCF6; box-shadow: 0 4px 12px rgba(120,100,60,0.15); }
body.bg-light .selection-popover:hover { color: #000; }

.tutor-error {
  color: #E07050;
  font-size: 0.85rem;
  font-style: italic;
}

/* ── Inline module nudges (ask / calc / email / consult) ──────── */
.nudge {
  display: block;
  margin: 1.5rem 0;
  padding: 1rem 1.15rem;
  border-radius: 6px;
  border-left: 3px solid var(--si-gold);
  background: rgba(201, 168, 76, 0.05);
  font-family: var(--font-body, sans-serif);
}
.nudge--email   { border-left-color: #6A95C4; background: rgba(106, 149, 196, 0.05); }
/* Planner-flavored nudges (calc + consult) cross over from education (gold)
   to personalised planning (teal). The colour change is deliberate — readers
   should feel the boundary cross when a query becomes "about my numbers". */
.nudge--planner { border-left-color: var(--si-planner); background: rgba(46, 139, 139, 0.06); }
/* Belt-and-braces: keep legacy nudge--calc / nudge--consult selectors
   working even if the planner class isn't on the element. */
.nudge--calc    { border-left-color: var(--si-planner); background: rgba(46, 139, 139, 0.06); }
.nudge--consult { border-left-color: var(--si-planner); background: rgba(46, 139, 139, 0.06); }

.nudge__eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--si-gold);
  font-weight: 700;
  margin-bottom: 0.3rem;
}
.nudge--planner .nudge__eyebrow,
.nudge--calc .nudge__eyebrow,
.nudge--consult .nudge__eyebrow { color: var(--si-planner); }
.nudge--email .nudge__eyebrow   { color: #6A95C4; }

.nudge__body {
  font-size: 0.92rem;
  line-height: 1.55;
  color: #E8E4DC;
  margin-bottom: 0.65rem;
}
body.bg-light .nudge__body { color: #2E2820; }

.nudge__cta {
  display: inline-block;
  background: transparent;
  border: 1px solid var(--si-gold);
  color: var(--si-gold);
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.nudge__cta:hover { background: var(--si-gold); color: #000; text-decoration: none; }
.nudge--planner .nudge__cta,
.nudge--calc .nudge__cta,
.nudge--consult .nudge__cta { border-color: var(--si-planner); color: var(--si-planner); }
.nudge--planner .nudge__cta:hover,
.nudge--calc .nudge__cta:hover,
.nudge--consult .nudge__cta:hover { background: var(--si-planner); color: #fff; }
.nudge--email .nudge__cta   { border-color: #6A95C4; color: #6A95C4; }
.nudge--email .nudge__cta:hover { background: #6A95C4; color: #fff; }

body.bg-light .nudge { background: rgba(154,126,42,0.04); }
body.bg-light .nudge--planner,
body.bg-light .nudge--calc,
body.bg-light .nudge--consult { background: rgba(46, 139, 139, 0.06); }
body.bg-light .nudge--email   { background: rgba(70,110,160,0.05); }

/* ── Quota nudges + upgrade card ───────────────────────────────── */
.tutor-drawer__nudge {
  font-size: 0.78rem;
  padding: 0.5rem 1.25rem;
  color: var(--si-silver);
  border-top: 1px solid var(--si-border);
}
.tutor-drawer__nudge[hidden] { display: none; }
.tutor-drawer__nudge--soft { color: var(--si-silver); }
.tutor-drawer__nudge--soft a {
  color: var(--si-gold);
  text-decoration: none;
  font-weight: 600;
}
.tutor-drawer__nudge--soft a:hover { color: var(--si-gold-light); }

.tutor-quota-badge {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 1px 7px;
  background: rgba(201, 168, 76, 0.10);
  border: 1px solid rgba(201, 168, 76, 0.3);
  border-radius: 999px;
  color: var(--si-gold);
  font-size: 0.68rem;
  letter-spacing: 0.02em;
}
.tutor-quota-badge:empty { display: none; }

/* Upgrade card (replaces input row when quota exhausted) */
.tutor-upgrade-card {
  margin: 0.75rem 1.25rem 1rem;
  padding: 1rem 1.1rem;
  background: rgba(201, 168, 76, 0.08);
  border: 1px solid rgba(201, 168, 76, 0.4);
  border-radius: 8px;
  color: #E8E4DC;
  font-size: 0.9rem;
  line-height: 1.5;
}
.tutor-upgrade-card h4 {
  margin: 0 0 0.4rem;
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-size: 1.1rem;
  color: var(--si-gold);
  font-weight: 600;
}
.tutor-upgrade-card p { margin: 0 0 0.7rem; color: var(--si-silver); }
.tutor-upgrade-card .btn-upgrade {
  display: inline-block;
  background: var(--si-gold);
  color: #000;
  padding: 0.4rem 0.9rem;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.85rem;
}
.tutor-upgrade-card .btn-upgrade:hover { background: var(--si-gold-light); }
body.bg-light .tutor-upgrade-card { background: rgba(154,126,42,0.06); border-color: rgba(154,126,42,0.35); color: #2E2820; }
body.bg-light .tutor-upgrade-card p { color: #6A6050; }