:root {
  --medu-ai-ink: var(--text-primary, #152033);
  --medu-ai-copy: var(--text-secondary, #667085);
  --medu-ai-line: var(--border-color, #e1e7ef);
  --medu-ai-panel: var(--background-primary, #fff);
  --medu-ai-soft: var(--background-secondary, #f5f7fb);
  --medu-ai-accent: var(--primary-color, #ff641f);
}

/* The Notes reader does not load question-bank-platform.css, so its shared AI
   panel needs local fallbacks. Keep these aliases off :root: question-bank
   pages own the --qb-* palette, including their darker study background. */
.note-reader-body {
  --qb-ink: var(--medu-ai-ink);
  --qb-muted: var(--medu-ai-copy);
  --qb-line: var(--medu-ai-line);
  --qb-panel: var(--medu-ai-panel);
  --qb-soft: var(--medu-ai-soft);
  --qb-orange: var(--medu-ai-accent);
  --qb-orange-soft: color-mix(in srgb, var(--medu-ai-accent) 10%, var(--medu-ai-panel));
}

.medu-ai-selection-popup {
  position: fixed;
  z-index: 52000;
  filter: drop-shadow(0 10px 24px rgba(15, 23, 42, .22));
  animation: medu-ai-popup-in .14s ease-out;
}
.medu-ai-selection-popup[hidden] { display: none !important; }
.medu-ai-selection-popup button {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  border: 1px solid color-mix(in srgb, var(--medu-ai-accent) 55%, transparent);
  border-radius: 11px;
  color: #fff;
  background: linear-gradient(135deg, var(--medu-ai-accent), color-mix(in srgb, var(--medu-ai-accent) 78%, #a83d11));
  font: 700 .7rem Poppins, sans-serif;
  cursor: pointer;
}
.medu-ai-selection-popup .material-symbols-outlined { font-size: 18px; }
@keyframes medu-ai-popup-in { from { opacity: 0; transform: translateY(5px) scale(.97); } }

.qb-ai-composer { grid-template-columns: minmax(0, 1fr) auto auto !important; }
.qb-ai-speech-button {
  width: 42px;
  min-width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--qb-line) !important;
  border-radius: 13px;
  color: var(--qb-muted) !important;
  background: var(--qb-soft) !important;
  cursor: pointer;
}
.qb-ai-speech-button.is-listening { color: #fff !important; background: #d9485f !important; animation: medu-ai-listening 1s ease-in-out infinite; }
@keyframes medu-ai-listening { 50% { box-shadow: 0 0 0 7px rgba(217, 72, 95, .15); } }

.qb-memory-button {
  display: inline-flex !important;
  min-height: 36px;
  align-items: center;
  gap: 5px;
  padding: 7px 9px !important;
  border: 1px solid color-mix(in srgb, #7554d9 34%, var(--qb-line)) !important;
  border-radius: 10px !important;
  color: #7554d9 !important;
  background: color-mix(in srgb, #7554d9 8%, var(--qb-panel)) !important;
  font: inherit;
  cursor: pointer;
}
.qb-memory-button .material-symbols-outlined { font-size: 19px; }
.qb-memory-button small { font-size: .52rem; font-weight: 900; letter-spacing: .04em; }

/* Side chat also works inside the Notes PDF reader, which does not load the
   full question-bank stylesheet. These rules intentionally mirror that panel. */
.qb-ai-assistant-modal { z-index: 51000; place-items: end; padding: 74px 18px 82px; pointer-events: none; }
.qb-ai-assistant-modal .study-modal-backdrop { background: transparent; pointer-events: none; }
.qb-ai-assistant-modal .study-modal-card {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto auto;
  width: min(430px, calc(100vw - 36px));
  height: min(720px, calc(100dvh - 156px));
  min-height: min(470px, calc(100dvh - 156px));
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--qb-orange) 22%, var(--qb-line));
  border-radius: 22px;
  color: var(--qb-ink);
  background: var(--qb-panel);
  box-shadow: 0 28px 90px rgba(4, 11, 24, .3);
  pointer-events: auto;
}
.qb-ai-chat-header { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 16px 17px; border-bottom: 1px solid var(--qb-line); background: color-mix(in srgb, var(--qb-orange) 5%, var(--qb-panel)); }
.qb-ai-agent-avatar { position: relative; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 14px; color: #fff; background: linear-gradient(145deg, color-mix(in srgb, var(--qb-orange) 78%, #fff), var(--qb-orange)); }
.qb-ai-agent-avatar > i { position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border: 2px solid var(--qb-panel); border-radius: 50%; background: #2ac66d; }
.qb-ai-pro-label { display: flex; align-items: center; gap: 7px; margin: 0 !important; color: var(--qb-muted); font-size: .55rem !important; font-weight: 850; letter-spacing: .07em; }
.qb-ai-chat-header h2 { margin: 2px 0 0; color: var(--qb-ink); font-size: .95rem; }
.qb-ai-chat-header small { display: flex; align-items: center; gap: 5px; margin-top: 3px; color: var(--qb-muted); font-size: .59rem; }
.qb-ai-chat-header small i { width: 6px; height: 6px; border-radius: 50%; background: #2ac66d; }
.qb-ai-chat-header .study-modal-x { position: static; width: 35px; height: 35px; display: grid; place-items: center; border: 1px solid var(--qb-line); border-radius: 10px; color: var(--qb-muted); background: var(--qb-soft); cursor: pointer; }
.qb-ai-context { margin: 10px 12px 0; border: 1px solid var(--qb-line); border-radius: 11px; background: var(--qb-soft); }
.qb-ai-context summary { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 7px; padding: 9px 11px; color: var(--qb-muted); font-size: .66rem; font-weight: 750; cursor: pointer; list-style: none; }
.qb-ai-context summary::-webkit-details-marker { display: none; }
.qb-ai-context summary .material-symbols-outlined { font-size: 17px; }
.qb-ai-question-preview { max-height: 110px; overflow: auto; margin: 0; padding: 0 11px 11px; color: var(--qb-ink); font-size: .67rem; line-height: 1.55; }
.qb-ai-thread { min-height: 0; display: flex; flex-direction: column; gap: 13px; overflow-y: auto; padding: 15px 13px; }
.qb-ai-message { max-width: 88%; color: var(--qb-ink); font-size: .7rem; line-height: 1.6; }
.qb-ai-message.is-user { align-self: flex-end; padding: 10px 13px; border-radius: 15px 15px 4px 15px; color: #fff; background: var(--qb-orange); }
.qb-ai-message.is-assistant { align-self: stretch; display: grid; grid-template-columns: 27px minmax(0, 1fr); align-items: flex-start; gap: 7px; max-width: 94%; }
.qb-ai-message-avatar { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 9px; color: var(--qb-orange); background: var(--qb-orange-soft); font-size: 16px; }
.qb-ai-message.is-assistant > div { padding: 10px 12px; border: 1px solid var(--qb-line); border-radius: 4px 15px 15px; background: var(--qb-soft); }
.qb-ai-message p,.qb-ai-message ul { margin: 0; }
.qb-ai-message section { margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--qb-line); }
.qb-ai-message section strong { display: block; margin-bottom: 3px; color: var(--qb-orange); font-size: .58rem; letter-spacing: .05em; text-transform: uppercase; }
.qb-ai-message ul { padding-left: 17px; }
.qb-ai-follow-up { margin-top: 9px !important; color: var(--qb-orange); font-weight: 700; }
.qb-ai-message.is-typing > div { animation: medu-ai-thinking 1.05s ease-in-out infinite; color: var(--qb-muted); }
@keyframes medu-ai-thinking { 50% { opacity: .45; } }
.qb-ai-quick-prompts { display: flex; gap: 7px; overflow-x: auto; padding: 0 13px 9px; scrollbar-width: none; }
.qb-ai-quick-prompts button { flex: 0 0 auto; padding: 7px 10px; border: 1px solid var(--qb-line); border-radius: 999px; color: var(--qb-muted); background: var(--qb-panel); font: inherit; font-size: .61rem; font-weight: 700; cursor: pointer; }
.qb-ai-composer { display: grid; align-items: end; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--qb-line); background: var(--qb-panel); }
.qb-ai-composer textarea { width: 100%; min-height: 42px; max-height: 110px; box-sizing: border-box; resize: vertical; padding: 10px 12px; border: 1px solid var(--qb-line); border-radius: 13px; outline: 0; color: var(--qb-ink); background: var(--qb-soft); font: inherit; font-size: .69rem; }
.qb-ai-composer button[type="submit"] { width: 42px; min-width: 42px; height: 42px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 13px; color: #fff; background: var(--qb-orange); cursor: pointer; }
.qb-ai-safety { display: flex; align-items: center; gap: 5px; padding: 0 13px 11px; color: var(--qb-muted); font-size: .54rem; }
.qb-ai-safety .material-symbols-outlined { color: #2ac66d; font-size: 14px; }

.medu-memory-aid-modal { z-index: 51500; }
.medu-memory-aid-modal .study-modal-card { position: relative; z-index: 1; width: min(620px, calc(100vw - 28px)); max-height: calc(100dvh - 34px); overflow: auto; padding: 25px; border: 1px solid var(--medu-ai-line); border-radius: 22px; color: var(--medu-ai-ink); background: var(--medu-ai-panel); box-shadow: 0 28px 90px rgba(4, 11, 24, .3); }
.medu-memory-aid-modal header { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-bottom: 17px; border-bottom: 1px solid var(--medu-ai-line); }
.medu-memory-aid-modal header > div { display: flex; align-items: center; gap: 11px; }
.medu-memory-aid-modal header > div > .material-symbols-outlined { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 13px; color: #7554d9; background: color-mix(in srgb, #7554d9 10%, var(--medu-ai-panel)); }
.medu-memory-aid-modal header small { color: #7554d9; font-size: .6rem; font-weight: 850; letter-spacing: .08em; }
.medu-memory-aid-modal header h2 { margin: 2px 0 0; font-size: 1.15rem; }
.medu-memory-aid-modal header button { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--medu-ai-line); border-radius: 10px; color: var(--medu-ai-copy); background: var(--medu-ai-soft); cursor: pointer; }
.medu-memory-aid-modal [data-memory-aid-content] { padding-top: 19px; }
.medu-memory-source-type { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; border-radius: 999px; color: #7554d9; background: color-mix(in srgb, #7554d9 9%, var(--medu-ai-panel)); font-size: .65rem; font-weight: 750; }
.medu-memory-source-type .material-symbols-outlined { font-size: 17px; }
.medu-memory-technique { margin: 16px 0 9px; color: var(--medu-ai-ink); font-size: 1rem; font-weight: 700; line-height: 1.65; white-space: pre-line; }
.medu-memory-explanation,.medu-memory-aid-modal li { color: var(--medu-ai-copy); font-size: .76rem; line-height: 1.7; }
.medu-memory-aid-modal ol { display: grid; gap: 7px; padding-left: 22px; }
.medu-memory-sources { display: grid; gap: 6px; margin-top: 17px; padding: 13px; border-radius: 12px; background: var(--medu-ai-soft); font-size: .68rem; }
.medu-memory-sources a { color: var(--medu-ai-accent); overflow-wrap: anywhere; }
.medu-memory-disclaimer { display: block; margin-top: 14px; color: var(--medu-ai-copy); font-size: .6rem; line-height: 1.55; }
.medu-memory-loading { display: grid; min-height: 180px; place-content: center; justify-items: center; gap: 9px; color: var(--medu-ai-copy); text-align: center; }
.medu-memory-loading.is-error > .material-symbols-outlined { color: #d9485f; }

/* Unified Medu AI */
.medu-ai-page { min-height: calc(100vh - 74px); padding: 26px; color: var(--medu-ai-copy); background: radial-gradient(circle at 85% 8%, color-mix(in srgb, var(--medu-ai-accent) 10%, transparent), transparent 30rem), var(--medu-ai-soft); }
.medu-ai-layout { display: grid; grid-template-columns: 250px minmax(0, 860px); justify-content: center; gap: 22px; min-height: calc(100dvh - 126px); }
.medu-ai-sidebar,.medu-ai-chat { border: 1px solid var(--medu-ai-line); border-radius: 22px; background: var(--medu-ai-panel); box-shadow: 0 18px 50px color-mix(in srgb, #0f172a 8%, transparent); }
.medu-ai-sidebar { display: flex; flex-direction: column; gap: 18px; padding: 18px; }
.medu-ai-new-chat { display: flex; min-height: 44px; align-items: center; justify-content: center; gap: 7px; border: 1px solid var(--medu-ai-line); border-radius: 12px; color: var(--medu-ai-ink); background: var(--medu-ai-panel); font: 700 .72rem Poppins, sans-serif; cursor: pointer; }
.medu-ai-sidebar h2 { margin: 0; color: var(--medu-ai-ink); font-size: .78rem; }
.medu-ai-tool-list { display: grid; gap: 5px; }
.medu-ai-tool-list button { display: flex; width: 100%; min-height: 39px; align-items: center; gap: 8px; padding: 7px 9px; border: 0; border-radius: 10px; color: var(--medu-ai-copy); background: transparent; font: 650 .65rem Poppins, sans-serif; text-align: left; cursor: pointer; }
.medu-ai-tool-list button:hover,.medu-ai-tool-list button:focus-visible { color: var(--medu-ai-accent); background: var(--medu-ai-soft); outline: none; }
.medu-ai-tool-list .material-symbols-outlined { font-size: 18px; }
.medu-ai-privacy { margin-top: auto; padding: 12px; border-radius: 12px; background: var(--medu-ai-soft); font-size: .58rem; line-height: 1.55; }
.medu-ai-chat { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-height: 680px; overflow: hidden; }
.medu-ai-chat-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 21px; border-bottom: 1px solid var(--medu-ai-line); }
.medu-ai-chat-brand { display: flex; align-items: center; gap: 11px; }
.medu-ai-chat-brand > span { width: 43px; height: 43px; display: grid; place-items: center; border-radius: 14px; color: #fff; background: linear-gradient(145deg, var(--medu-ai-accent), color-mix(in srgb, var(--medu-ai-accent) 70%, #9c3812)); }
.medu-ai-chat-brand h1 { margin: 0; color: var(--medu-ai-ink); font-size: 1rem; }
.medu-ai-chat-brand p { margin: 2px 0 0; font-size: .62rem; }
.medu-ai-access { padding: 6px 9px; border-radius: 999px; color: #16805a; background: color-mix(in srgb, #22a06b 9%, var(--medu-ai-panel)); font-size: .59rem; font-weight: 750; }
.medu-ai-thread { min-height: 0; display: flex; flex-direction: column; gap: 18px; overflow-y: auto; padding: clamp(20px, 4vw, 42px); }
.medu-ai-welcome { width: min(100%, 610px); margin: auto; text-align: center; }
.medu-ai-welcome > span { width: 58px; height: 58px; display: grid; place-items: center; margin: auto; border-radius: 19px; color: var(--medu-ai-accent); background: color-mix(in srgb, var(--medu-ai-accent) 10%, var(--medu-ai-panel)); font-size: 30px; }
.medu-ai-welcome h2 { margin: 15px 0 6px; color: var(--medu-ai-ink); font-size: clamp(1.3rem, 3vw, 2rem); }
.medu-ai-welcome > p { margin: 0 auto 20px; max-width: 520px; font-size: .72rem; line-height: 1.7; }
.medu-ai-starters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.medu-ai-starters button { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 9px; min-height: 52px; padding: 10px 12px; border: 1px solid var(--medu-ai-line); border-radius: 13px; color: var(--medu-ai-ink); background: var(--medu-ai-panel); font: 650 .65rem Poppins, sans-serif; text-align: left; cursor: pointer; }
.medu-ai-starters button:hover { border-color: var(--medu-ai-accent); background: color-mix(in srgb, var(--medu-ai-accent) 5%, var(--medu-ai-panel)); }
.medu-ai-starters .material-symbols-outlined { color: var(--medu-ai-accent); font-size: 20px; }
.medu-ai-message { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-self: flex-start; gap: 9px; width: min(100%, 680px); color: var(--medu-ai-ink); font-size: .75rem; line-height: 1.7; }
.medu-ai-message.is-user { display: block; align-self: flex-end; width: auto; max-width: min(80%, 610px); padding: 10px 14px; border-radius: 15px 15px 4px 15px; color: #fff; background: var(--medu-ai-accent); }
.medu-ai-message-avatar { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 10px; color: var(--medu-ai-accent); background: color-mix(in srgb, var(--medu-ai-accent) 10%, var(--medu-ai-panel)); font-size: 17px; }
.medu-ai-message-copy { white-space: pre-line; }
.medu-ai-message-copy p { margin: 2px 0 0; }
.medu-ai-message.is-thinking .medu-ai-message-copy { color: var(--medu-ai-copy); animation: medu-ai-thinking 1.05s ease-in-out infinite; }
.medu-ai-route-card { display: grid; gap: 12px; margin-top: 12px; padding: 12px; border: 1px solid var(--medu-ai-line); border-radius: 16px; background: var(--medu-ai-soft); white-space: normal; }
.medu-ai-route-card-heading { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.medu-ai-route-card-heading > .material-symbols-outlined { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 11px; color: #fff; background: var(--medu-ai-accent); font-size: 21px; }
.medu-ai-route-card-heading strong,.medu-ai-route-card-heading span { display: block; }
.medu-ai-route-card-heading strong { color: var(--medu-ai-ink); font-size: .72rem; }
.medu-ai-route-card-heading div > span { margin-top: 2px; color: var(--medu-ai-copy); font-size: .6rem; line-height: 1.45; }
.medu-ai-route-card a { display: inline-flex; align-items: center; gap: 5px; color: var(--medu-ai-accent); font-size: .6rem; font-weight: 750; text-decoration: none; white-space: nowrap; }
.medu-ai-route-card a .material-symbols-outlined { font-size: 16px; }
.medu-ai-inline-tool-frame { display: block; width: 100%; height: min(760px, 74dvh); border: 1px solid var(--medu-ai-line); border-radius: 12px; background: var(--medu-ai-panel); }
.medu-ai-suggestions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.medu-ai-suggestions button { padding: 6px 9px; border: 1px solid var(--medu-ai-line); border-radius: 999px; color: var(--medu-ai-copy); background: var(--medu-ai-panel); font: 600 .59rem Poppins, sans-serif; cursor: pointer; }
.medu-ai-composer-wrap { padding: 13px 18px 16px; border-top: 1px solid var(--medu-ai-line); background: var(--medu-ai-panel); }
.medu-ai-composer { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: end; gap: 8px; max-width: 720px; margin: auto; padding: 7px; border: 1px solid var(--medu-ai-line); border-radius: 16px; background: var(--medu-ai-soft); }
.medu-ai-composer textarea { width: 100%; min-height: 42px; max-height: 130px; box-sizing: border-box; resize: none; padding: 10px 4px; border: 0; outline: 0; color: var(--medu-ai-ink); background: transparent; font: 500 .75rem Poppins, sans-serif; line-height: 1.5; }
.medu-ai-composer button { width: 42px; height: 42px; display: grid; place-items: center; border: 0; border-radius: 12px; color: var(--medu-ai-copy); background: transparent; cursor: pointer; }
.medu-ai-composer button[type="submit"] { color: #fff; background: var(--medu-ai-accent); }
.medu-ai-composer button:disabled { opacity: .5; cursor: wait; }
.medu-ai-composer-note { margin: 7px auto 0; max-width: 720px; text-align: center; font-size: .54rem; }

@media (max-width: 760px) {
  .qb-ai-assistant-modal { padding: 62px 7px 68px; }
  .qb-ai-assistant-modal .study-modal-card { width: 100%; height: calc(100dvh - 130px); min-height: 0; border-radius: 18px; }
  .qb-memory-button > span:not(.material-symbols-outlined),.qb-memory-button small { display: none; }
  .medu-ai-page { padding: 10px; }
  .medu-ai-layout { grid-template-columns: 1fr; min-height: calc(100dvh - 94px); }
  .medu-ai-sidebar { display: none; }
  .medu-ai-chat { min-height: calc(100dvh - 94px); border-radius: 17px; }
  .medu-ai-chat-header { padding: 13px; }
  .medu-ai-thread { padding: 19px 13px; }
  .medu-ai-starters { grid-template-columns: 1fr; }
  .medu-ai-message.is-user { max-width: 88%; }
  .medu-ai-route-card { margin-right: -3px; margin-left: -39px; padding: 8px; }
  .medu-ai-route-card-heading { grid-template-columns: auto minmax(0, 1fr); }
  .medu-ai-route-card-heading > a { grid-column: 2; justify-self: start; }
  .medu-ai-inline-tool-frame { height: min(780px, 72dvh); }
  .medu-ai-composer-wrap { padding: 10px; }
  .medu-ai-access { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .medu-ai-selection-popup,.qb-ai-speech-button.is-listening,.medu-ai-message.is-thinking .medu-ai-message-copy { animation: none !important; }
}