/* AI features. Amber is reserved for the single top-bar AI control (.top-ai: "✦ AI" + ▾ page AI tools).
   Other AI buttons (dialogs, panels, menus) are ordinary buttons whose sparkle icon carries the AI colour.
   --ai is the amber ink for text and borders on light panels (≥4.5:1); --ai-fill/--ai-ink are the control colours. */
:root { --ai: #8a5a00; --ai-2: #fdf3dc; --ai-fill: var(--amber, #f2a93b); --ai-fill-hover: color-mix(in srgb, var(--amber) 85%, white); --ai-ink: var(--brand-800, #24335f); --ai-line: #d9932a; }
.ai-ico { display: inline-flex; width: 1.2em; height: 1.2em; vertical-align: -0.22em; flex: none; }
.ai-ico.ai-ico-t { margin-right: .2em; }
.ai-ico svg { width: 100%; height: 100%; fill: currentColor; }
.ai-ico .ai-g { display: none; }
.dd-item .ai-ico, .ai-head .ai-ico, .modal-head .ai-ico, .side-link .ai-ico, .btn.ai-act .ai-ico, .btn.ai-btn .ai-ico { color: var(--ai-line); }
.top-ai { background: var(--ai-fill); border: 1px solid var(--ai-line); color: var(--ai-ink); font-weight: 600; border-radius: 4px; padding: 5px 10px; font-size: 12.5px; display: inline-flex; align-items: center; }
.top-ai:hover { background: var(--ai-fill-hover); border-color: var(--ai-line); color: var(--ai-ink); }
.top-ai .ai-ico { color: var(--ai-ink); }
.top-ai-split { display: inline-flex; align-items: stretch; margin: 0 2px; }
.top-ai-split[hidden] { display: none !important; }
.top-ai-split.has-menu .top-ai-ask { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.topbar .top-ai-split .top-ai-more { padding: 0 6px; border-left-color: color-mix(in srgb, var(--ai-line) 60%, var(--ai-ink)); border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: -1px; }
.side-item.ai-side { color: var(--ai); font-weight: 600; }

.ai-busy { display: flex; align-items: center; gap: 14px; padding: 6px 2px; }
.ai-spinner { width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--ai-2); border-top-color: var(--ai); animation: ai-spin .8s linear infinite; flex: none; }
.ai-spinner.small { width: 14px; height: 14px; border-width: 2px; }
@keyframes ai-spin { to { transform: rotate(360deg); } }

/* chat panel */
.ai-panel { position: fixed; top: var(--topbar-h, 44px); right: 0; bottom: 0; width: 420px; max-width: 100vw; background: var(--surface); border-left: 1px solid var(--line); box-shadow: var(--shadow); z-index: 60; display: flex; flex-direction: column; }
.ai-head { display: flex; align-items: center; gap: 4px; padding: 10px 12px; border-bottom: 1px solid var(--line); color: var(--ai); }
.ai-head .muted { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-log { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 10px; background: color-mix(in srgb, var(--ai-2) 45%, var(--surface)); }
.ai-msg { padding: 9px 12px; border-radius: 10px; max-width: 92%; font-size: 13.5px; line-height: 1.5; overflow-wrap: anywhere; }
.ai-msg.user { align-self: flex-end; background: var(--ai-fill); color: var(--ai-ink); white-space: pre-wrap; }
.ai-msg.bot { align-self: flex-start; background: var(--surface); border: 1px solid color-mix(in srgb, var(--ai-line) 40%, transparent); }
.ai-msg.error { color: var(--danger); border-color: var(--danger-line); }
.ai-msg.thinking { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.ai-answer ul { margin: 4px 0; padding-left: 18px; }
.ai-answer li { margin: 2px 0; }
a.ai-ref { background: var(--ai-2); color: var(--ai); border-radius: 3px; padding: 0 4px; white-space: nowrap; }
.ai-empty { display: flex; flex-direction: column; gap: 6px; padding: 8px 4px; }
.ai-example { text-align: left; background: var(--surface); border: 1px solid color-mix(in srgb, var(--ai-line) 40%, transparent); border-radius: var(--r-card); padding: 7px 10px; color: var(--text); font-size: 13px; }
.ai-example:hover { border-color: var(--ai); background: var(--ai-2); }
.ai-compose { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line); align-items: flex-end; }
.ai-input { resize: none; }
.ai-compose .btn.primary { background: var(--ai-fill); border-color: var(--ai-line); color: var(--ai-ink); }

/* review / tools dialogs */
.ai-review-wrap { max-height: 58vh; overflow: auto; border: 1px solid var(--line); border-radius: 6px; }
.ai-review td { vertical-align: top; }
.ai-review .ai-req { min-width: 260px; max-width: 360px; }
.ai-review .ai-crit { min-width: 150px; max-width: 220px; }
.ai-verdict { font-weight: 700; }
.ai-verdict.yes { color: var(--ok); }
.ai-verdict.no { color: var(--danger); }
.ai-rewrite { margin-top: 6px; padding: 6px 8px; background: var(--ai-2); border-radius: 5px; font-size: 12.5px; }
.ai-comment { margin-top: 4px; color: var(--text-2); }
.ai-before { padding: 8px 10px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); white-space: pre-wrap; }
.ai-split-row, .ai-gen-row { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--line-2); }
.ai-split-row .input, .ai-gen-row .input { margin-bottom: 4px; }
.ai-split-n { width: 22px; height: 22px; border-radius: 50%; background: var(--ai-2); color: var(--ai); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; flex: none; margin-top: 6px; }
.ai-gen-row > input[type=checkbox] { margin-top: 10px; }
.ai-gen-row .label-chip { margin-left: 6px; }
@media (max-width: 760px) { .ai-panel { width: 100vw; } }
.ai-gen-list { max-height: 60vh; overflow: auto; }
.ai-num { width: 110px !important; flex: none; }
.ai-kind { width: 140px !important; flex: none; }
.ai-gen-row .row { gap: 6px; flex-wrap: nowrap; }
.ai-sec-list { max-height: 200px; overflow: auto; padding-left: 18px; }
.ai-notes { max-height: 60vh; overflow: auto; }
.ai-notes ul { margin: 4px 0 10px; padding-left: 20px; }
.ai-after { padding: 8px 10px; background: var(--ai-2); border: 1px solid color-mix(in srgb, var(--ai-line) 45%, transparent); border-radius: var(--r-sm); }
.ai-preview .field { margin-bottom: 10px; }
.ai-refs .ai-ref-pkg { border: 1px solid var(--line); border-radius: 5px; padding: 6px 8px; margin: 6px 0; }
.ai-refs .row { gap: 6px; align-items: center; }
[data-theme=dark] { --ai: #f5b83d; --ai-2: #3a2e14; --ai-line: #f5b83d; }
[data-theme=dark] .ai-log { background: var(--bg); }
.ai-refs { margin-top: 2px; }
.modal .form > .checkbox + .field { margin-top: 12px; }

/* AI Settings: providers */
.ai-provs { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.ai-vendor { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 8px 0 0; }
.ai-prov { border: 1px solid var(--line); border-radius: 6px; padding: 6px 10px; }
.ai-prov.active { border-color: var(--ai); background: var(--ai-2); }
.ai-prov.unavailable .ai-prov-head strong { color: var(--muted); }
.ai-prov-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ai-prov-head label { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.ai-prov-head .grow { flex: 1; }
.ai-prov-head .muted { font-weight: 400; font-size: 11.5px; }
.ai-prov-body { display: none; padding: 6px 0 2px 24px; }
.ai-prov.active .ai-prov-body, .ai-prov.open .ai-prov-body { display: block; }
.ai-prov-body .field { margin-bottom: 6px; }
.ai-prov-body .row { gap: 6px; align-items: center; flex-wrap: wrap; }
.ai-prov-body .input { max-width: 340px; }
.ai-ok { color: var(--ok); font-size: 12px; }
.ai-no { color: var(--muted); font-size: 12px; }
.ai-keystate { color: var(--muted); }
.ai-test-result.ok { color: var(--ok); }
.ai-test-result.bad { color: var(--danger); overflow-wrap: anywhere; }
.ai-capnote { color: var(--ai); background: var(--ai-2); border-radius: var(--r-sm); padding: 4px 8px; }
.ai-m365 { margin-top: 8px; }

/* Ask AI: help links and action buttons */
a.ai-help { background: var(--info-bg); color: var(--link); border-radius: var(--r-sm); padding: 0 4px; white-space: nowrap; }
a.ai-action { display: inline-block; margin: 4px 4px 2px 0; padding: 4px 10px; border: 1px solid var(--ai); border-radius: 5px; color: var(--ai); font-weight: 600; font-size: 12.5px; text-decoration: none; }
a.ai-action:hover { background: var(--ai-fill); color: var(--ai-ink); }
.ai-prov-name { white-space: nowrap; }
.ai-prov-head .ai-ok { display: inline-flex; min-width: 0; max-width: 60%; white-space: nowrap; }
.ai-path { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* prompt-injection hardening: input provenance banner, risky suggestions, rewrite diffs, file-access warning */
.ai-banner { margin: 0 0 10px; padding: 8px 10px; border: 1px solid var(--ai-line); border-left-width: 4px; border-radius: 5px; background: var(--ai-2); color: var(--text); font-size: 12.5px; line-height: 1.45; }
.ai-risk { outline: 2px solid var(--danger); outline-offset: 1px; border-radius: 4px; background: color-mix(in srgb, var(--danger) 7%, transparent); }
.ai-risk-why { color: var(--danger); font-weight: 600; margin-top: 3px; }
.ai-diff { margin: 4px 0; padding: 6px 8px; border: 1px solid var(--line); border-radius: 5px; font-size: 12.5px; line-height: 1.5; overflow-wrap: anywhere; }
.ai-diff del { background: color-mix(in srgb, var(--danger) 16%, transparent); text-decoration: line-through; }
.ai-diff ins { background: color-mix(in srgb, var(--ok) 18%, transparent); text-decoration: none; }
.ai-files-warn { color: var(--danger); font-weight: 600; margin-left: 6px; }
.ai-optin { display: flex; gap: 6px; align-items: flex-start; margin: 6px 0; padding: 6px 8px; border: 1px solid var(--danger); border-radius: 5px; font-size: 12.5px; }
.ai-checkrow { margin-bottom: var(--sp-2); }