/* All component styles are scoped; course typography and code blocks keep Material styles. */
.ai-reader, .selection-explain.ai-ui {
  --paper:var(--md-default-bg-color);
  --text:var(--md-default-fg-color);
  --muted:var(--md-default-fg-color--light);
  --line:var(--md-default-fg-color--lightest);
  --accent:var(--md-typeset-a-color);
  --primary:var(--md-primary-fg-color);
  --soft:var(--md-code-bg-color);
  --code:var(--md-code-bg-color);
  --shadow:0 2px 5px #00000014;
}
.ai-reader .ai-ui {
* { box-sizing:border-box; }
p { margin:16px 0; }
.settings,.ai-panel { padding:0 12px; border:.075rem solid var(--accent); border-radius:4px; background:var(--paper); box-shadow:var(--shadow); margin:20px 0; min-width:0; }
summary { position:relative; cursor:pointer; font-size:14px; font-weight:700; background:var(--soft); margin:0 -12px; padding:10px 36px 10px 14px; list-style:none; }
summary::-webkit-details-marker { display:none; }
summary::after { content:''; position:absolute; right:16px; top:16px; width:7px; height:7px; border-right:2px solid var(--accent); border-bottom:2px solid var(--accent); transform:rotate(-45deg); }
details[open] > summary::after { transform:rotate(45deg); top:13px; }
.settings form { padding:4px 4px 0; }
label { display:block; margin:14px 0 6px; font-size:13px; font-weight:500; }
input,textarea { display:block; width:100%; margin-top:6px; padding:9px 11px; border:1px solid var(--line); border-radius:3px; background:var(--paper); color:var(--text); font:inherit; font-size:14px; line-height:1.6; }
textarea { min-height:90px; resize:vertical; }
input:focus,textarea:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
button { border:1px solid var(--line); border-radius:3px; background:transparent; color:var(--accent); padding:6px 12px; font:500 13px/1.6 Roboto,-apple-system,BlinkMacSystemFont,Helvetica,Arial,sans-serif; cursor:pointer; transition:background .15s,border-color .15s; }
button:hover { background:var(--soft); border-color:var(--accent); }
button:disabled { opacity:.45; cursor:default; }
button:focus-visible,summary:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
[data-ai-id="settings"] [type=submit] { background:var(--accent); color:var(--paper); border-color:var(--accent); }
.actions { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:12px 0; }
.note,footer,[role=status] { font-size:12px; line-height:1.6; color:var(--muted); }
#persistence-status { margin:16px 0 24px; }
pre { max-width:100%; overflow:auto; margin:16px 0; padding:14px 16px; background:var(--code); border-radius:3px; line-height:1.5; }
code { font-family:"Roboto Mono",SFMono-Regular,Consolas,monospace; font-size:.85em; }
.ai-panel:not([open]) { display:none; }
.ai-answer { overflow-wrap:anywhere; min-width:0; font-size:14px; }
.ai-turn { margin-top:20px; }
.ai-turn + .ai-turn { border-top:1px solid var(--line); padding-top:16px; }
.ai-turn > h3 { font-size:13px; color:var(--muted); font-weight:500; margin:0 0 12px; }
.ai-panel form { border-top:1px solid var(--line); padding-top:2px; margin-top:20px; }
.ai-panel form .note { margin:6px 0; }
.ai-panel .actions button { border-color:transparent; padding:4px 8px; }
.ai-panel .actions .delete { color:var(--muted); margin-left:auto; }
.ai-panel .actions .delete:hover { color:#e53935; background:#e5393510; }
.ai-answer > :first-child { margin-top:0; }
.ai-answer p { margin:.8em 0; }
.ai-answer h1,.ai-answer h2,.ai-answer h3 { font-size:1.15em; font-weight:600; color:var(--text); margin:1.2em 0 .5em; }
.ai-answer ul,.ai-answer ol { padding-left:1.6em; }
.ai-answer blockquote { border-left:3px solid var(--line); color:var(--muted); padding-left:1em; margin:1em 0; }
.ai-answer :not(pre) > code { background:var(--code); padding:.15em .35em; border-radius:2px; }
.ai-answer pre { white-space:pre; }
.ai-answer table { display:block; max-width:100%; overflow:auto; border-collapse:collapse; margin:1em 0; font-size:13px; }
.ai-answer th,.ai-answer td { border:1px solid var(--line); padding:.6em 1em; }
.ai-answer th { background:var(--code); }
.ai-answer a { color:var(--accent); text-decoration:none; }
.ai-answer a:hover { text-decoration:underline; }
.ai-answer .hljs-keyword,.ai-answer .hljs-selector-tag { color:#8543aa; }
.ai-answer .hljs-number,.ai-answer .hljs-literal { color:#a24a17; }
.ai-answer .hljs-string { color:#27753d; }
.ai-answer .hljs-comment { color:#607184; font-style:italic; }
.ai-answer .hljs-title,.ai-answer .hljs-built_in { color:#1565b5; }
.selection-explain { position:fixed; z-index:100; background:var(--paper); border-color:var(--accent); box-shadow:var(--shadow); touch-action:manipulation; }
.selected-quote { margin:16px 0; padding:4px 12px; border-left:3px solid var(--accent); color:var(--muted); font-size:13px; white-space:pre-wrap; overflow-wrap:anywhere; max-height:10em; overflow:auto; }
.conversation-marker { font-size:12px; margin:4px 0 8px; padding:3px 8px; border-color:transparent; background:var(--soft); max-width:100%; overflow-wrap:anywhere; }
.selection-explain[hidden],.conversation-marker[hidden],details[hidden] { display:none; }
[data-md-color-scheme="slate"] & {
  .ai-answer .hljs-keyword,.ai-answer .hljs-selector-tag { color:#d4a4f5; }
  .ai-answer .hljs-number,.ai-answer .hljs-literal { color:#f8b785; }
  .ai-answer .hljs-string { color:#a0d8a4; }
  .ai-answer .hljs-comment { color:#abb8c7; }
  .ai-answer .hljs-title,.ai-answer .hljs-built_in { color:#89c0ff; }
}
@media(max-width:600px) {
  .ai-panel .ai-panel { margin-left:-8px; margin-right:-8px; }
  input,textarea { font-size:16px; }
}
.ai-panel form { border-top:0; padding-top:0; }
.chat-composer { display:flex; align-items:flex-end; gap:8px; padding:4px 5px 4px 12px; border:1px solid var(--line); border-radius:22px; background:var(--paper); box-shadow:0 3px 16px #00000008; }
.chat-composer:focus-within { border-color:var(--muted); box-shadow:0 3px 18px #0000000c; }
.chat-composer textarea { flex:1; min-width:0; min-height:32px; max-height:160px; margin:0; padding:5px 0; border:0; border-radius:0; background:transparent; box-shadow:none; resize:none; font-size:14px; line-height:22px; }
.chat-composer textarea:focus { border:0; box-shadow:none; outline:none; }
.chat-composer .send { flex:0 0 32px; width:32px; height:32px; padding:8px; border:0; border-radius:50%; background:var(--text); color:var(--paper); display:grid; place-items:center; }
.chat-composer .send:hover { opacity:.8; background:var(--text); }
.chat-composer .send:disabled { opacity:.3; }
.chat-composer .send svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
@media(max-width:600px) { .chat-composer { gap:8px; padding-left:14px; } .chat-composer textarea { font-size:14px; } }

}
.ai-reader .ai-ui details > summary::before { display:none; }
.ai-reader .ai-ui details > summary::after { background:none; mask:none; -webkit-mask:none; }
.ai-reader .ai-ui details.ai-panel { font-size:14px; }
.ai-reader .ai-ui details.settings { margin-top:0; }
.ai-reader .ai-ui > .note, .ai-reader p.ai-ui { color:var(--md-default-fg-color--light); font-size:12px; }
.ai-reader .ai-ui[data-ai-id="connection"] { font-size:12px; }
.ai-reader .ai-ui [data-ai-id="settings"] [type=submit] { background:var(--accent); color:var(--paper); border-color:var(--accent); }
.selection-explain.ai-ui { position:fixed; z-index:100; background:var(--paper); color:var(--accent); border:1px solid var(--accent); border-radius:4px; padding:8px 12px; font-family:inherit; font-size:14px; line-height:1.5; box-shadow:var(--shadow); cursor:pointer; touch-action:manipulation; }
.selection-explain.ai-ui[hidden], .ai-reader details[hidden] { display:none; }
.ai-reader mark.ai-annotation { color:var(--md-primary-fg-color); background:transparent; font:inherit; border:0; border-bottom:1px dashed currentColor; padding:0 .12em; cursor:pointer; }
.ai-reader mark.ai-annotation:hover { text-decoration:none; }
.ai-reader mark.ai-annotation-end::after { content:" ▸"; font-size:.75em; }
.ai-reader mark.ai-annotation:focus-visible { outline:2px solid var(--md-typeset-a-color); outline-offset:2px; }

.ai-reader mark.ai-annotation-end[aria-expanded="true"]::after { content:" ▾"; }

.ai-reader .ai-ui .ai-panel .actions button.close,
.ai-reader .ai-ui .ai-panel .actions button.delete { display:grid; place-items:center; width:28px; height:28px; padding:6px; border:0; background:transparent; }
.ai-reader .ai-ui .ai-panel .actions svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

.ai-reader .ai-ui details.ai-panel { margin:12px 0; }
.ai-reader .ai-ui .ai-panel > summary { padding-top:7px; padding-bottom:7px; }
.ai-reader .ai-ui .ai-panel > summary::after { top:13px; }
.ai-reader .ai-ui .ai-panel[open] > summary::after { top:10px; }
.ai-reader .ai-ui .ai-panel form { margin-top:12px; }
.ai-reader .ai-ui .ai-panel .actions { margin:6px 0; gap:6px; }
.ai-reader .ai-ui .ai-turn { margin-top:12px; }
.ai-reader .ai-ui .selected-quote { margin:10px 0; }
