/* AION 2 class advisor (2026-10-04): the paid chat panel on builder/ and builds/. Its own sheet, linked on those two pages only
   (gen_site.py build_advisor), so the other hub pages carry none of it. Every colour is one of the concept page's tokens
   (css/aion.css), so both side themes follow; the one colour the tokens do not have, an error red, is set per theme below. */
.adv{--adv-bad:#a3262b; margin-top:14px; border-radius:14px; background:var(--card); border:1px solid var(--card-b); box-shadow:var(--shadow)}
:root[data-theme="asmodian"] .adv{--adv-bad:#ff9aa6}
@media (prefers-color-scheme: dark){ :root:not([data-theme="elyos"]) .adv{--adv-bad:#ff9aa6} }
.adv > summary{display:grid; grid-template-columns:auto auto minmax(0,1fr) auto; align-items:center; gap:6px 14px; padding:12px 18px; border-radius:14px; cursor:pointer; list-style:none}
.adv > summary::-webkit-details-marker{display:none}
.adv > summary::after{content:"+"; width:22px; text-align:center; font:400 24px/1 "Marcellus",serif; color:var(--accent-ink)}
.adv[open] > summary::after{content:"\2212"}
.adv > summary:hover .adv-t{color:var(--accent-ink)}
.adv > summary:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.adv-k{font:600 10.5px "IBM Plex Mono",monospace; letter-spacing:.14em; text-transform:uppercase; white-space:nowrap; color:var(--pill-ink); background:var(--pill-bg); border:1px solid var(--pill-b); border-radius:999px; padding:4px 10px}
.adv-t{font-family:"Marcellus",serif; font-size:21px; line-height:1.1; color:var(--ink); white-space:nowrap}
.adv-s{font-size:13.5px; line-height:1.45; color:var(--ink-3)}
.adv-body{padding:2px 18px 18px; border-top:1px solid var(--rule)}
.adv-body > p{margin-top:12px; max-width:72ch; font-size:15px; line-height:1.55; color:var(--ink-2)}
.adv-body > p.fine{margin-top:10px; font-size:12.5px; color:var(--ink-3)}
.adv-body > p.adv-wait{color:var(--ink-3); font-style:italic}
.adv-body > .adv-acts{display:flex; flex-wrap:wrap; align-items:center; gap:10px}
/* the chat */
.adv-head{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 16px; padding-top:12px; font-size:13.5px; color:var(--ink-3)}
.adv-head b{color:var(--ink); font-weight:600}
.adv-head label{display:inline-flex; align-items:center; gap:8px}
.adv-head select{font:inherit; font-size:14px; padding:6px 10px; border-radius:10px; border:1px solid var(--rule-2); background:var(--gh-fill); color:var(--ink)}
.adv-meter{font-family:"IBM Plex Mono",monospace; font-size:11.5px; letter-spacing:.06em}
.adv-log{display:grid; gap:10px; margin-top:12px; max-height:min(56vh,520px); overflow-y:auto; overscroll-behavior:contain; padding-right:4px}
.adv-log:empty{display:none}
.adv-msg{max-width:min(72ch,92%); padding:10px 14px; border-radius:14px; font-size:15px; line-height:1.55; color:var(--ink-2); overflow-wrap:anywhere}
.adv-msg.me{justify-self:end; color:var(--ink); background:var(--soft-2); border:1px solid var(--rule-2); border-bottom-right-radius:4px; white-space:pre-wrap}
.adv-msg.it{justify-self:start; background:var(--bg-2); border:1px solid var(--rule); border-bottom-left-radius:4px}
.adv-msg.wait{color:var(--ink-3); font-style:italic}
.adv-msg p + p,.adv-msg p + ul,.adv-msg ul + p{margin-top:8px}
.adv-msg ul{margin:0; padding-left:18px}
.adv-msg li{margin:4px 0}
.adv-note{justify-self:center; max-width:72ch; font-size:12.5px; line-height:1.5; color:var(--ink-3); text-align:center}
.adv-note.bad{color:var(--adv-bad)}
.adv-sugg{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px}
.adv-sugg[hidden]{display:none}
.adv-sugg .chip{min-height:34px; font-size:13px; text-align:left}
.adv-form{display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:10px; margin-top:12px}
.adv-form textarea{width:100%; box-sizing:border-box; min-height:46px; max-height:160px; resize:vertical; padding:10px 12px; border-radius:12px; border:1px solid var(--rule-2); background:var(--gh-fill); color:var(--ink); font:15px/1.45 "IBM Plex Sans",system-ui,sans-serif}
.adv-form textarea:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
.adv-form .btn[disabled]{opacity:.55; cursor:default; transform:none; filter:none}
.adv-vh{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
@media (max-width: 700px){
  .adv > summary{grid-template-columns:auto minmax(0,1fr) auto}
  .adv-s{grid-column:1 / -1; grid-row:2}
  .adv-form{grid-template-columns:minmax(0,1fr)}
  .adv-msg{max-width:100%}
}