/* Tutor refinements use MindCoda's existing palette and dimensional icon system. */
.app-view[data-view="ai"] {
  --tutor-edge: color-mix(in srgb, var(--mc-glass-border) 80%, var(--mc-blue));
  --tutor-film: color-mix(in srgb, var(--mc-glass-standard) 92%, var(--mc-mint));
  min-width: 0;
}
.app-view[data-view="ai"] .ai-tutor-layout {
  grid-template-columns: minmax(240px, .55fr) minmax(0, 1.6fr);
  gap: 22px;
  align-items: start;
}
.app-view[data-view="ai"] .ai-tutor-rail { grid-column: 1 / -1; }
.app-view[data-view="ai"] .ai-safety-card { display: flex; align-items: center; padding: 16px 20px; }
.app-view[data-view="ai"] .ai-safety-card h2 { font-size: 1rem; }
.app-view[data-view="ai"] .ai-safety-card p { margin: 0; font-size: .85rem; }
.app-view[data-view="ai"] .ai-conversation-card {
  position: relative;
  isolation: isolate;
  height: clamp(580px, calc(100dvh - 210px), 820px);
  min-height: 0;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  gap: 0;
  padding: 0;
  border: 1px solid var(--tutor-edge);
  border-radius: var(--mc-radius-xl);
  background: radial-gradient(ellipse at 4% 0%, color-mix(in srgb, var(--mc-mint) 24%, transparent), transparent 48%), linear-gradient(155deg, var(--mc-glass-highlight), transparent 35%), var(--tutor-film);
  box-shadow: 0 24px 60px color-mix(in srgb, var(--mc-deep-blue) 13%, transparent), 0 3px 10px color-mix(in srgb, var(--mc-deep-blue) 7%, transparent), inset 0 1px 0 var(--mc-glass-highlight), inset 1px 0 0 var(--mc-glass-highlight);
  -webkit-backdrop-filter: blur(var(--mc-glass-blur-strong)) saturate(145%);
  backdrop-filter: blur(var(--mc-glass-blur-strong)) saturate(145%);
}
.app-view[data-view="ai"] .ai-conversation-header {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 22px 24px;
  border-bottom: 1px solid var(--tutor-edge);
  background: linear-gradient(130deg, color-mix(in srgb, var(--mc-glass-highlight) 50%, transparent), transparent), var(--mc-glass-subtle);
  box-shadow: inset 0 1px 0 var(--mc-glass-highlight), 0 4px 16px color-mix(in srgb, var(--mc-deep-blue) 4%, transparent);
}
.app-view[data-view="ai"] .ai-conversation-header h2 { margin: 3px 0 6px; font-size: clamp(1.25rem, 2vw, 1.7rem); line-height: 1.15; letter-spacing: -.04em; overflow-wrap: anywhere; }
.app-view[data-view="ai"] .ai-conversation-header .eyebrow { font-size: .62rem; letter-spacing: .13em; color: var(--mc-ink-secondary); }
.app-view[data-view="ai"] .ai-conversation-header p:last-child { font-size: .8rem; line-height: 1.45; }
.app-view[data-view="ai"] .ai-orb,
.app-view[data-view="ai"] .ai-message__avatar,
.app-view[data-view="ai"] .ai-empty-icon {
  display: grid;
  place-items: center;
  color: var(--mc-blue);
  border: 1px solid var(--tutor-edge);
  background: radial-gradient(ellipse at 24% 8%, var(--mc-glass-highlight), transparent 62%), linear-gradient(145deg, color-mix(in srgb, var(--mc-mint) 54%, var(--mc-surface)), color-mix(in srgb, var(--mc-blue) 12%, var(--mc-surface)));
  box-shadow: inset 0 2px 0 var(--mc-glass-highlight), inset 0 -3px 5px color-mix(in srgb, var(--mc-blue) 12%, transparent), 0 7px 14px color-mix(in srgb, var(--mc-deep-blue) 13%, transparent);
}
.app-view[data-view="ai"] .ai-orb { width: 50px; height: 50px; border-radius: 17px; }
.app-view[data-view="ai"] .ai-orb svg { width: 25px; height: 25px; filter: drop-shadow(0 1px 0 var(--mc-glass-highlight)) drop-shadow(0 2px 2px color-mix(in srgb, var(--mc-blue) 25%, transparent)); }
.app-view[data-view="ai"] .ai-new-conversation { min-height: 48px; border-radius: 15px; color: var(--mc-ink); background: var(--mc-glass-standard); border-color: var(--tutor-edge); box-shadow: inset 0 1px 0 var(--mc-glass-highlight), 0 4px 8px color-mix(in srgb, var(--mc-deep-blue) 8%, transparent); }
.app-view[data-view="ai"] .ai-new-conversation svg { width: 18px; height: 18px; filter: drop-shadow(0 1px 0 var(--mc-glass-highlight)); }
.app-view[data-view="ai"] .ai-message-list { align-content: start; gap: 20px; padding: 24px; background: transparent; scrollbar-width: thin; }
.app-view[data-view="ai"] .ai-message { width: fit-content; max-width: 88%; padding: 17px 19px; border-radius: 22px; gap: 10px; }
.app-view[data-view="ai"] .ai-message--assistant {
  color: var(--mc-ink);
  border: 1px solid var(--tutor-edge);
  border-bottom-left-radius: 8px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--mc-glass-highlight) 25%, transparent), transparent 60%), var(--mc-ai-message-assistant);
  box-shadow: inset 0 1px 0 var(--mc-glass-highlight), 0 8px 20px color-mix(in srgb, var(--mc-deep-blue) 6%, transparent);
}
.app-view[data-view="ai"] .ai-message--student { border: 1px solid rgba(255,255,255,.22); border-bottom-right-radius: 8px; background: linear-gradient(145deg, #2459c6, #123f93); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.26), 0 8px 18px rgba(9,64,196,.14); }
.app-view[data-view="ai"] .ai-message--student .ai-message__content p { color: #fff; }
.app-view[data-view="ai"] .ai-message__identity { display: flex; align-items: center; gap: 8px; font-size: .71rem; font-weight: 750; letter-spacing: .015em; }
.app-view[data-view="ai"] .ai-message--student .ai-message__identity { color: rgba(255,255,255,.85); }
.app-view[data-view="ai"] .ai-message__avatar { width: 25px; height: 25px; border-radius: 9px; box-shadow: inset 0 1px 0 var(--mc-glass-highlight), 0 3px 6px color-mix(in srgb, var(--mc-blue) 10%, transparent); }
.app-view[data-view="ai"] .ai-message__avatar svg { width: 13px; height: 13px; }
.app-view[data-view="ai"] .ai-message--student .ai-message__avatar { color: white; border-color: rgba(255,255,255,.2); background: rgba(255,255,255,.12); box-shadow: inset 0 1px 0 rgba(255,255,255,.25); }
.app-view[data-view="ai"] .ai-message .ai-message__content p { font-size: .95rem; line-height: 1.7; }
.app-view[data-view="ai"] .ai-answer-section { padding-top: 13px; gap: 6px; }
.app-view[data-view="ai"] .ai-message-actions .mc-button { min-height: 44px; padding: 7px 10px; border-radius: 12px; }
.app-view[data-view="ai"] .ai-empty-conversation { align-self: center; justify-self: center; gap: 13px; margin: auto; max-width: 430px; padding: 24px 16px; border: 0; background: transparent; box-shadow: none; }
.app-view[data-view="ai"] .ai-empty-conversation h3 { font-size: clamp(1.3rem, 2vw, 1.65rem); letter-spacing: -.04em; }
.app-view[data-view="ai"] .ai-empty-icon { width: 68px; height: 68px; margin-bottom: 8px; border-radius: 23px; transform: rotate(-5deg); }
.app-view[data-view="ai"] .ai-empty-icon svg { width: 32px; height: 32px; filter: drop-shadow(0 2px 1px var(--mc-glass-highlight)); transform: rotate(5deg); }
.app-view[data-view="ai"] .ai-verify-note { margin: 0 24px; padding: 12px 0; font-size: .7rem; line-height: 1.45; border-top: 1px solid var(--tutor-edge); }
.app-view[data-view="ai"] .ai-composer {
  margin: 0 16px 16px;
  padding: 12px;
  gap: 8px;
  border: 1px solid var(--tutor-edge);
  border-radius: 24px;
  background: var(--mc-surface-elevated);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--mc-deep-blue) 10%, transparent), inset 0 1px 0 var(--mc-glass-highlight), inset 0 -1px 0 color-mix(in srgb, var(--mc-blue) 8%, transparent);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.app-view[data-view="ai"] .ai-composer textarea { min-height: 72px; max-height: 150px; padding: 9px 10px; border-radius: 14px; background: transparent; color: var(--mc-ink); resize: vertical; }
.app-view[data-view="ai"] .ai-composer__bottom { align-items: center; gap: 10px; padding-inline: 6px; }
.app-view[data-view="ai"] .ai-composer__bottom .mc-button { min-height: 46px; border-radius: 16px; border: 1px solid rgba(255,255,255,.25); background: linear-gradient(150deg, #3268d8, #0940c4); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -2px 0 rgba(5,21,92,.22), 0 5px 12px rgba(9,64,196,.17); }
.app-view[data-view="ai"] .ai-context-card--premium,
.app-view[data-view="ai"] .ai-prompt-card--premium,
.app-view[data-view="ai"] .ai-history-card { border: 1px solid var(--tutor-edge); background: linear-gradient(145deg, var(--mc-glass-highlight), transparent 65%), var(--tutor-film); box-shadow: inset 0 1px 0 var(--mc-glass-highlight), var(--mc-shadow-subtle); }
.app-view[data-view="ai"] .ai-prompt-list {display:grid;grid-template-columns:minmax(0,1fr);gap:8px;}
.app-view[data-view="ai"] .ai-prompt-list button {display:flex;align-items:center;gap:10px;min-width:0;min-height:var(--mc-action-height,48px);padding:10px 12px;border-radius:var(--mc-action-radius);font:inherit;font-size:.875rem;line-height:1.4;text-align:left;color:var(--mc-ink);background:var(--mc-glass-subtle);border:1px solid var(--tutor-edge);box-shadow:inset 0 1px 0 var(--mc-glass-highlight);transition:background var(--mc-duration-fast) var(--mc-ease-standard),border-color var(--mc-duration-fast) var(--mc-ease-standard);}
.app-view[data-view="ai"] .ai-prompt-list button svg {width:18px;height:18px;flex-shrink:0;color:var(--mc-blue);}
.app-view[data-view="ai"] .ai-prompt-list button:hover {transform:none;background:var(--mc-glass-standard);border-color:var(--mc-blue);}
.app-view[data-view="ai"] .ai-prompt-list button:active {background:var(--mc-glass-strong);}
.app-view[data-view="ai"] :is(.ai-prompt-card,.tutor-introduction)>summary {display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;cursor:pointer;list-style:none;}
.app-view[data-view="ai"] :is(.ai-prompt-card,.tutor-introduction)>summary::-webkit-details-marker {display:none;}
.app-view[data-view="ai"] :is(.ai-prompt-card,.tutor-introduction)>summary::after {content:"+";font-size:1.25rem;color:var(--mc-ink-secondary);}
.app-view[data-view="ai"] :is(.ai-prompt-card,.tutor-introduction)[open]>summary::after {content:"−";}
.app-view[data-view="ai"] :is(.ai-prompt-card,.tutor-introduction)>summary h2 {margin:0;font-size:1rem;}
.app-view[data-view="ai"] .tutor-introduction[open]>p {margin-top:12px;}
.app-view[data-view="ai"] .ai-prompt-card[open]>.ai-prompt-list {margin-top:14px;}
.app-view[data-view="ai"] :is(.tutor-context-options,.tutor-more-actions,.ai-history-card) > summary {display:flex;align-items:center;min-height:44px;padding-block:10px;cursor:pointer;color:var(--mc-ink);font-size:.875rem;line-height:1.4;}
.app-view[data-view="ai"] :is(button,summary,textarea,select):focus-visible {outline:3px solid var(--mc-blue);outline-offset:3px;}
.app-view[data-view="ai"] button:disabled {opacity:.5;cursor:not-allowed;transform:none;box-shadow:none;}
.ai-source-options { margin-bottom: 18px; }
.ai-source-options > summary { display: flex; align-items: center; gap: 8px; width: fit-content; min-height: 44px; padding: 8px 13px; border: 1px solid var(--mc-glass-border); border-radius: 14px; background: var(--mc-glass-standard); box-shadow: inset 0 1px 0 var(--mc-glass-highlight); font-size: .85rem; font-weight: 720; cursor: pointer; }
.ai-source-options > summary::after { content: '+'; margin-left: 16px; }
.ai-source-options[open] > summary::after { content: '−'; }
.ai-source-options > summary svg { width: 18px; height: 18px; color: var(--mc-blue); }
.ai-source-options .ai-source-links { margin: 12px 0 0; }
@media (max-width: 760px) {
  .app-view[data-view="ai"] .ai-tutor-layout { display: flex; flex-direction: column; }
  .app-view[data-view="ai"] .ai-conversation-card { width: 100%; order: -1; height: max(370px, calc(100dvh - 300px)); border-radius: 25px; }
  .app-view[data-view="ai"] .ai-conversation-header { grid-template-columns: 42px minmax(0, 1fr) auto; padding: 16px; gap: 10px; }
  .app-view[data-view="ai"] .ai-orb { width: 42px; height: 42px; border-radius: 14px; }
  .app-view[data-view="ai"] .ai-conversation-header h2 { font-size: 1.18rem; }
  .app-view[data-view="ai"] .ai-conversation-header p:last-child { max-height: 2.9em; overflow: hidden; }
  .app-view[data-view="ai"] .ai-new-conversation { min-width: 48px; width: 48px; padding: 0; }
  .app-view[data-view="ai"] .ai-new-conversation span { display: none; }
  .app-view[data-view="ai"] .ai-message-list { padding: 18px 14px; gap: 15px; }
  .app-view[data-view="ai"] .ai-message { max-width: 95%; padding: 14px; border-radius: 19px; }
  .app-view[data-view="ai"] .ai-composer { margin: 0 10px 10px; padding: 9px; border-radius: 20px; }
  .app-view[data-view="ai"] .ai-composer textarea { min-height: 60px; resize: none; }
  .app-view[data-view="ai"] .ai-verify-note { margin: 0 16px; font-size: .65rem; padding: 9px 0; }
  .app-view[data-view="ai"] .ai-composer__bottom .small-print { max-width: 20ch; font-size: .65rem; }
  .app-view[data-view="ai"] .ai-tutor-sidebar, .app-view[data-view="ai"] .ai-tutor-rail { width: 100%; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .app-view[data-view="ai"] .ai-conversation-card { background: var(--mc-surface-elevated); }
}
@media (prefers-reduced-transparency: reduce) {
  .app-view[data-view="ai"] .ai-conversation-card,
  .app-view[data-view="ai"] .ai-conversation-header,
  .app-view[data-view="ai"] .ai-context-card--premium,
  .app-view[data-view="ai"] .ai-prompt-card--premium,
  .app-view[data-view="ai"] .ai-history-card { background: var(--mc-surface-elevated); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  .app-view[data-view="ai"] button { transition: none; }
  .app-view[data-view="ai"] .ai-message.is-pending { transform: none; }
}
:root[data-reduced-motion=true] .app-view[data-view="ai"] button {transition:none;}

/* Device choice is explicit, even when the browser has an install prompt. */
.mc-install-dialog { width: min(calc(100% - 32px), 490px); border-color: var(--mc-glass-border); background: linear-gradient(145deg, var(--mc-glass-highlight), transparent 60%), var(--mc-glass-strong); -webkit-backdrop-filter: blur(var(--mc-glass-blur-strong)); backdrop-filter: blur(var(--mc-glass-blur-strong)); box-shadow: var(--mc-shadow-elevated), inset 0 1px 0 var(--mc-glass-highlight); }
.mc-install-dialog__content > img { border: 1px solid var(--mc-glass-border); box-shadow: 0 7px 15px color-mix(in srgb, var(--mc-blue) 15%, transparent), inset 0 1px 0 var(--mc-glass-highlight); border-radius: 16px; }
.mc-install-devices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin: 4px 0 8px; }
.mc-install-devices button { display: grid; place-items: center; gap: 10px; min-height: 102px; padding: 13px 6px; border: 1px solid var(--mc-glass-border); border-radius: 18px; color: var(--mc-ink-secondary); background: var(--mc-glass-subtle); font: inherit; font-size: .78rem; font-weight: 730; box-shadow: inset 0 1px 0 var(--mc-glass-highlight); cursor: pointer; }
.mc-install-devices button[aria-pressed="true"] { color: var(--mc-blue); border-color: color-mix(in srgb, var(--mc-blue) 55%, var(--mc-glass-border)); background: color-mix(in srgb, var(--mc-mint) 25%, var(--mc-glass-standard)); box-shadow: 0 5px 14px color-mix(in srgb, var(--mc-blue) 10%, transparent), inset 0 1px 0 var(--mc-glass-highlight); }
.mc-install-device-icon { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--mc-glass-border); border-radius: 13px; background: linear-gradient(145deg, var(--mc-glass-highlight), transparent), var(--mc-glass-standard); box-shadow: inset 0 1px 0 var(--mc-glass-highlight), inset 0 -2px 0 color-mix(in srgb, var(--mc-blue) 9%, transparent), 0 4px 8px color-mix(in srgb, var(--mc-blue) 12%, transparent); }
.mc-install-device-icon svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 1px 0 var(--mc-glass-highlight)); }
.mc-install-dialog__device-title { margin: 0; font-size: 1rem; letter-spacing: -.025em; }
@media (max-width: 640px) { .mc-install-dialog { width: 100%; margin: auto 0 0; } }
@media (prefers-reduced-transparency: reduce) { .mc-install-dialog { background: var(--mc-surface-elevated); -webkit-backdrop-filter: none; backdrop-filter: none; } }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .mc-install-dialog { background: var(--mc-surface-elevated); } }

/* Recover conversation space on small screens without hiding its composer. */
.app-view[data-view="ai"] { gap: 16px; }
.app-view[data-view="ai"] .ai-source-options { margin-bottom: 0; }
@media (max-width: 760px) {
  .app-view[data-view="ai"] { gap: 10px; }
  .app-view[data-view="ai"] > .page-header .page-kicker { display: none; }
  .app-view[data-view="ai"] > .page-header::after { display: none; }
  .app-view[data-view="ai"] .ai-conversation-card { height: max(400px, calc(100dvh - 225px)); }
  .app-view[data-view="ai"] .ai-conversation-header { padding: 12px 14px; grid-template-columns: 38px minmax(0, 1fr) auto; }
  .app-view[data-view="ai"] .ai-orb { width: 38px; height: 38px; }
  .app-view[data-view="ai"] .ai-conversation-header p:last-child { max-height: 1.45em; }
  .app-view[data-view="ai"] .ai-conversation-header .eyebrow { font-size: .56rem; letter-spacing: .08em; }
  .app-view[data-view="ai"] .ai-composer textarea { min-height: 50px; }
}

/* The current header has a title group and actions, not a leading icon column. */
.app-view[data-view="ai"] .ai-conversation-header {
  grid-template-columns: minmax(0, 1fr) auto;
}
.app-view[data-view="ai"] .ai-conversation-header > div { min-width: 0; }
.app-view[data-view="ai"] .ai-conversation-header h2 { overflow-wrap: normal; }
.app-view[data-view="ai"] .ai-conversation-card:not(:has(.ai-message)) {
  height: auto; min-height: 0; grid-template-rows: auto auto auto; gap: 12px;
}
.app-view[data-view="ai"] .ai-conversation-card:not(:has(.ai-message)) .ai-message-list { display: none; }
.app-view[data-view="ai"] .ai-conversation-card:not(:has(.ai-message)) .ai-composer {
  grid-row: 2; margin-top: 0; align-content: start; grid-template-rows: auto auto;
}
.app-view[data-view="ai"] .ai-conversation-card:not(:has(.ai-message)) .ai-verify-note { grid-row: 3; margin-bottom: 8px; }
.app-view[data-view="ai"] .ai-conversation-card:not(:has(.ai-message)) .ai-composer textarea { height: 76px; min-height: 76px; }
@media (max-width: 760px) {
  .app-view[data-view="ai"] .ai-tutor-sidebar { display: contents; }
  .app-view[data-view="ai"] .ai-tutor-sidebar > .ai-context-card { order: 0; display: block; }
  .app-view[data-view="ai"] .ai-tutor-layout > .ai-conversation-card { order: 1; }
  .app-view[data-view="ai"] .ai-tutor-sidebar > .tutor-next-actions { order: 2; }
  .app-view[data-view="ai"] .ai-conversation-header { padding: 16px; gap: 12px; }
  .app-view[data-view="ai"] .ai-conversation-header .ai-orb { display: none; }
  .app-view[data-view="ai"] .ai-conversation-header h2 { font-size: 1.2rem; line-height: 1.25; }
  .app-view[data-view="ai"] .ai-conversation-header p:last-child { max-height: none; overflow: visible; }
}
@media (max-width: 440px) {
  .app-view[data-view="ai"] > .page-header {display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;min-width:0;}
  .app-view[data-view="ai"] > .page-header > div {grid-column:1 / -1;min-width:0;}
  .app-view[data-view="ai"] > .page-header h1 {font-size:clamp(1.4rem,7vw,1.75rem);overflow-wrap:anywhere;}
  .app-view[data-view="ai"] > .page-header > .back-button {justify-self:start;}
  .app-view[data-view="ai"] :is(.ai-conversation-card,.ai-context-card,.ai-history-card,.ai-prompt-card,.tutor-introduction) {min-width:0;max-width:100%;box-sizing:border-box;}
}