/* VECTOR Support — chat.purpledge.io/support/ (SUP6, 12.10.2026). The chat page's own tokens (copied at build time from
 * the chat page's app.css, so the two never drift) + KB's UX_SPEC 1dc6c493 + DESIGN's review (support_chat_ux_review.md):
 * purple the only accent · green / red never used · amber only for safety and «key hidden» notices, as a boxed notice with a
 * full 1 px edge (never a left bar — an amber bar means a stop line) · Yes / No neutral · arrows mirrored in Hebrew ·
 * type 11 · 12 · 13 · 15 · 20 (16 on inputs) · radii panel 10 · bubbles 8 · controls 6 · chips pill · targets ≥ 32 px. */
:root{--bg:#0c0a11;--panel:#141019;--panel2:#1b1624;--ink:#ece9f3;--dim:#a39cb8;--line:#2a2237;--frame:#716690;--brand:#a78bfa;--accent:#39B7D3;
  --long:#22c55e;--short:#ef4444;--warn:#F5B544;--u:#29223F;--uline:#655287;--uink:#efecf7;
  --chatbg:#110e18;--link:#a78bfa;--strong:#5b4a7d;--cta:#7c3aed;--ctaink:#ffffff;--chip:#1d1730;--chipline:#8b72d6;--tipbg:#241d33;--shadow:0 12px 32px rgba(0,0,0,.45);
  --num:"JetBrains Mono","IBM Plex Mono",Consolas,ui-monospace,monospace}
html[data-theme=light]{--bg:#eceef4;--panel:#ffffff;--panel2:#f4f5f9;--ink:#1b1d27;--dim:#454a5c;--line:#d5d9e3;--frame:#80869a;--brand:#6d3fe0;
  --long:#15803d;--short:#c81e1e;--warn:#a35f00;--u:#ece8fb;--uline:#b9aee6;--uink:#1b1d27;
  --chatbg:#f8f7fc;--link:#6d3fe0;--strong:#8993a5;--cta:#6d3fe0;--ctaink:#ffffff;--chip:#f1edfd;--chipline:#7f62dc;--tipbg:#1b1d27;--shadow:0 12px 32px rgba(27,29,39,.18)}
:root{--warnbg:rgba(245,181,68,.10);--warntitle:var(--warn);--sel:rgba(167,139,250,.16)}
html[data-theme=light]{--warnbg:#fff4e0;--warntitle:#9a5800;--sel:#ece6fd}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font:13px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans Hebrew",Arial,sans-serif}
button,input,textarea{font:inherit;color:inherit}
a{color:var(--link)}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.wrap{min-height:100vh;min-height:100dvh;display:flex;justify-content:center;align-items:flex-start;padding:24px 16px}
.panel{position:relative;width:100%;max-width:560px;height:calc(100dvh - 48px);min-height:520px;display:flex;flex-direction:column;
  background:var(--chatbg);border:1px solid var(--frame);border-radius:10px;box-shadow:var(--shadow);overflow:hidden}
.hd{display:flex;align-items:center;gap:8px;min-height:48px;padding:8px 12px;background:var(--panel);border-bottom:1px solid var(--line)}
.hd h1{margin:0;font-size:15px;font-weight:600;white-space:nowrap}.hd .mark{color:var(--brand)}
.sp{flex:1}
.seg{display:inline-flex;border:1px solid var(--frame);border-radius:6px;overflow:hidden}
.seg button{min-height:32px;min-width:44px;padding:0 10px;background:transparent;border:0;font-size:12px;cursor:pointer}
.seg button+button{border-inline-start:1px solid var(--frame)}
.seg button[aria-pressed=true]{background:var(--sel);color:var(--ink);font-weight:600}
.ico{min-width:32px;min-height:32px;display:inline-grid;place-items:center;background:transparent;border:1px solid var(--frame);border-radius:6px;cursor:pointer;color:var(--ink)}
.st{padding:6px 12px;font-size:12px;color:var(--dim);border-bottom:1px solid var(--line);background:var(--panel)}
.log{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:10px;overscroll-behavior:contain}
.m{max-width:92%;padding:9px 12px;border-radius:8px;overflow-wrap:anywhere}
.m.u{align-self:flex-end;background:var(--u);border:1px solid var(--uline);color:var(--uink);white-space:pre-wrap}
.m.a{align-self:flex-start;background:var(--panel2);border:1px solid var(--frame)}
.m p{margin:0 0 6px}.m p:last-child{margin-bottom:0}
.m ol,.m ul{margin:4px 0 6px;padding-inline-start:20px}.m li{margin:2px 0}
.crumb{font-size:11px;color:var(--dim);margin:0 0 4px}
.ttl2{font-size:13px;font-weight:600;margin:0 0 4px}
.tag{display:inline-block;font-size:11px;color:var(--dim);border:1px solid var(--frame);border-radius:999px;padding:0 8px;margin:0 0 6px}
.beta{font-size:12px;color:var(--dim);margin:6px 0 0}
.lim{font-size:12px;color:var(--dim);margin:0}
.guide{display:inline-flex;align-items:center;gap:4px;margin-top:6px;min-height:32px}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.chips button{min-height:32px;border:1px solid var(--chipline);background:var(--chip);border-radius:999px;padding:4px 12px;font-size:13px;cursor:pointer;text-align:start}
.chips button:hover{border-color:var(--brand)}
.chips button[aria-pressed=true]{background:var(--sel);border-color:var(--brand)}
.chips .lock svg{vertical-align:-2px;margin-inline-end:4px}
.chips .pl{font-size:11px;color:var(--dim);margin-inline-start:6px}
.items{display:grid;gap:6px;margin-top:8px}
.items button{display:block;width:100%;text-align:start;min-height:32px;padding:6px 10px;background:var(--panel);border:1px solid var(--frame);border-radius:6px;cursor:pointer}
.items button:hover{border-color:var(--brand)}
.items b{display:block;font-size:13px}.items span{display:block;font-size:12px;color:var(--dim)}
.row{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:8px}
.ghost{min-height:32px;padding:0 10px;display:inline-flex;align-items:center;gap:4px;background:transparent;border:1px solid var(--frame);border-radius:6px;cursor:pointer;font-size:12px}
.ghost:hover{border-color:var(--brand)}
.ghost[aria-pressed=true]{background:var(--sel);border-color:var(--brand)}
.helpful{font-size:12px;color:var(--dim)}
[dir=rtl] .ico-dir{transform:scaleX(-1)}
/* safety + key hidden: the boxed notice — amber-soft fill, a FULL 1 px amber edge, never a left bar */
.notice{background:var(--warnbg);border:1px solid var(--warn);border-radius:6px;padding:8px 10px;margin:0 0 8px}
.notice .nt{font-weight:700;color:var(--warntitle);margin:0 0 2px}
.notice p{margin:0}
.n{font-family:var(--num);font-variant-numeric:tabular-nums;unicode-bidi:isolate;direction:ltr}
.copy{min-height:32px;padding:0 8px;margin-inline-start:6px;background:transparent;border:1px solid var(--frame);border-radius:6px;cursor:pointer;font-size:12px}
.dock{padding:8px 12px 10px;border-top:1px solid var(--line);background:var(--chatbg);display:grid;gap:8px}
.comp{display:flex;gap:8px}
.comp input{flex:1;min-width:0;min-height:40px;padding:8px 10px;font-size:16px;background:var(--panel);border:1px solid var(--frame);border-radius:6px}
.pri{min-height:40px;padding:0 16px;background:var(--cta);color:var(--ctaink);border:0;border-radius:6px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.pri:disabled{opacity:.6;cursor:default}
.spin{display:none;width:12px;height:12px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:sp .8s linear infinite}
.busy .spin{display:inline-block}
@keyframes sp{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spin{animation:none}}
.person{min-height:32px;width:100%;display:inline-flex;align-items:center;justify-content:center;gap:6px;background:transparent;border:1px solid var(--frame);border-radius:6px;cursor:pointer}
.person:hover{border-color:var(--brand)}
.pi{color:var(--dim)}
.foot{margin:0;font-size:11px;color:var(--dim);text-align:center}
.sheet{position:absolute;inset:auto 0 0 0;max-height:92%;overflow-y:auto;background:var(--panel);border-top:1px solid var(--frame);border-radius:10px 10px 0 0;box-shadow:var(--shadow);padding:12px}
.shead{display:flex;align-items:center;gap:8px;margin-bottom:8px}.shead h2{margin:0;font-size:15px}
.hof{display:grid;gap:10px}
.hof fieldset{border:0;padding:0;margin:0}.hof legend,.hof label>span{display:block;font-size:12px;color:var(--dim);margin-bottom:4px}
.hof .chips{margin-top:0}
.hof textarea,.hof input{width:100%;font-size:16px;padding:8px 10px;background:var(--chatbg);border:1px solid var(--frame);border-radius:6px}
.hof textarea{resize:vertical;min-height:84px}
.hint{display:block;font-size:11px;color:var(--dim);margin-top:4px}
.note{margin:0;font-size:12px;color:var(--dim)}
.err{font-size:12px;color:var(--ink);border:1px solid var(--frame);border-radius:6px;padding:6px 8px;background:var(--panel2)}
.tip{position:fixed;z-index:60;white-space:pre-line;max-width:min(300px,calc(100vw - 24px));background:var(--tipbg);color:#f3f1f8;border-radius:8px;padding:6px 10px;font-size:12px;box-shadow:var(--shadow);pointer-events:none}
/* 13.10 embed mode (?embed=1): the host's floating panel provides the frame, the title and the close button */
html.embed .wrap{padding:0;display:block;min-height:0}
html.embed .panel{max-width:none;height:100vh;height:100dvh;min-height:0;border:0;border-radius:0;box-shadow:none}
html.embed .hd,html.embed .foot{display:none}
@media (max-width:600px){
  .wrap{padding:0}
  .panel{max-width:none;height:100vh;height:100dvh;min-height:0;border-radius:0;border:0;box-shadow:none}
  .hd h1{font-size:15px}
}