/* Site assistant: a round launcher in the bottom inline-start corner (the
   dock owns inline-end) and a chat panel. Site tokens are used with
   fallbacks, so the file also works on its own. Loaded only with AGENT_UI. */

.agent{
  --a-ink:var(--ink,#0F2236);
  --a-text:#22313f;
  --a-muted:#5a6b7b;
  --a-line:#dfe6ec;
  --a-acc:var(--blue-600,#3B6488);
  --a-acc-d:var(--blue-700,#2F5270);
  --a-soft:var(--blue-50,#F2F6FA);
  --a-ring:var(--blue-500,#4B7BA1);
  position:fixed;inset-inline-start:16px;inset-block-end:16px;z-index:45;
  font-family:var(--fs,"IBM Plex Sans","IBM Plex Sans Arabic",system-ui,sans-serif);
}
.agent__sr{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.agent__ico{inline-size:22px;block-size:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
[dir="rtl"] .agent__ico--flip{transform:scaleX(-1)}

/* ── launcher ─────────────────────────────────────────────── */
.agent__fab{
  position:relative;display:grid;place-items:center;inline-size:56px;block-size:56px;padding:0;
  border:0;border-radius:50%;cursor:pointer;color:#fff;background:var(--a-acc);
  box-shadow:0 8px 24px rgba(15,34,54,.22),0 0 0 1px rgba(255,255,255,.18) inset;
  transition:background .25s ease,transform .25s ease,box-shadow .25s ease;
}
.agent__fab .agent__ico{inline-size:26px;block-size:26px}
.agent__fab:hover{background:var(--a-acc-d);transform:translateY(-2px);box-shadow:0 12px 28px rgba(15,34,54,.26)}
.agent__fab:focus-visible{outline:2px solid var(--a-ring);outline-offset:3px}
/* one slow ambient ring; stops when the panel is open or motion is paused */
.agent__fab::after{content:"";position:absolute;inset:-4px;border-radius:50%;
  border:1.5px solid var(--a-ring);opacity:0;pointer-events:none;
  animation:agentRing 5s 2s ease-out infinite}
@keyframes agentRing{0%{opacity:.55;transform:scale(.92)}60%,100%{opacity:0;transform:scale(1.18)}}
.agent.is-open .agent__fab::after{animation:none}

/* ── panel ────────────────────────────────────────────────── */
.agent__panel{
  position:absolute;inset-inline-start:0;inset-block-end:72px;
  display:flex;flex-direction:column;
  inline-size:min(380px,calc(100vw - 32px));
  block-size:min(560px,calc(100vh - 120px));
  block-size:min(560px,calc(100dvh - 120px));   /* 100vh fallback for older browsers */
  background:#fff;color:var(--a-text);
  border:1px solid var(--a-line);border-radius:14px;overflow:hidden;
  box-shadow:0 24px 60px rgba(15,34,54,.18),0 2px 6px rgba(15,34,54,.06);
  animation:agentIn .22s ease-out;
}
.agent__panel[hidden]{display:none}
@keyframes agentIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.agent__head{display:flex;align-items:center;gap:12px;padding:14px 14px 12px;border-block-end:1px solid var(--a-line)}
.agent__badge{display:grid;place-items:center;flex:none;inline-size:36px;block-size:36px;border-radius:50%;
  background:var(--a-soft);color:var(--a-acc)}
.agent__badge .agent__ico{inline-size:20px;block-size:20px}
.agent__titles{flex:1;min-inline-size:0}
.agent__title{margin:0;font-size:15.5px;font-weight:600;line-height:1.3;color:var(--a-ink);letter-spacing:0}
.agent__note{margin:2px 0 0;font-size:12.5px;line-height:1.4;color:var(--a-muted)}
.agent__x{display:grid;place-items:center;flex:none;inline-size:34px;block-size:34px;padding:0;border:0;border-radius:8px;
  background:none;color:var(--a-muted);cursor:pointer}
.agent__x:hover{background:var(--a-soft);color:var(--a-ink)}
.agent__x .agent__ico{inline-size:18px;block-size:18px}
.agent__x:focus-visible,.agent__send:focus-visible,.agent__log:focus-visible,.agent a:focus-visible{outline:2px solid var(--a-ring);outline-offset:2px}

.agent__log{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:14px;display:flex;flex-direction:column;gap:10px;
  scroll-behavior:smooth}
.agent__msg{max-inline-size:88%;padding:10px 12px;border-radius:12px;font-size:14.5px;line-height:1.6}
.lang-ar .agent__msg{line-height:1.8}
.agent__msg--bot{align-self:flex-start;background:#f5f7f9;border:1px solid var(--a-line);border-start-start-radius:4px}
.agent__msg--me{align-self:flex-end;background:var(--a-soft);border:1px solid var(--blue-200,#C9D8E6);color:var(--a-ink);border-start-end-radius:4px}
.agent__text{margin:0;white-space:pre-line;overflow-wrap:anywhere}

.agent__src{margin-block-start:8px;padding-block-start:8px;border-block-start:1px dashed var(--a-line);font-size:12.5px}
.agent__src-l{color:var(--a-muted)}
.agent__src ul{margin:2px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:2px}
.agent__src a{color:var(--a-acc);text-decoration:underline;text-underline-offset:2px}
.agent__src a:hover{color:var(--a-acc-d)}

.agent__typing{padding:12px 14px}
.agent__dots{display:inline-flex;gap:4px;align-items:center}
.agent__dots i{inline-size:6px;block-size:6px;border-radius:50%;background:var(--a-muted);opacity:.35;
  animation:agentDot 1.2s ease-in-out infinite}
.agent__dots i:nth-child(2){animation-delay:.15s}
.agent__dots i:nth-child(3){animation-delay:.3s}
@keyframes agentDot{0%,80%,100%{opacity:.25}40%{opacity:1}}

.agent__form{display:flex;align-items:flex-end;gap:8px;padding:10px 12px;border-block-start:1px solid var(--a-line)}
.agent__input{flex:1;min-inline-size:0;margin:0;padding:9px 12px;resize:none;
  font:inherit;font-size:15px;line-height:22px;color:var(--a-ink);background:#fff;
  border:1px solid var(--a-line);border-radius:10px}
.agent__input:focus{outline:none;border-color:var(--a-ring);box-shadow:0 0 0 3px rgba(75,123,161,.18)}
.agent__input::placeholder{color:#8795a3}
.agent__send{display:grid;place-items:center;flex:none;inline-size:42px;block-size:42px;padding:0;border:0;border-radius:10px;
  background:var(--a-acc);color:#fff;cursor:pointer;transition:background .2s ease}
.agent__send:hover{background:var(--a-acc-d)}
.agent__send:disabled{opacity:.55;cursor:progress}
.agent__send .agent__ico{inline-size:18px;block-size:18px;stroke-width:2}

.agent__foot{margin:0;padding:0 14px 12px;font-size:12px;line-height:1.5;color:var(--a-muted)}
.agent__foot a{color:var(--a-acc);text-decoration:underline;text-underline-offset:2px}

/* ── small screens: panel takes the width, sits above the launcher ── */
@media (max-width:520px){
  .agent{inset-inline-start:12px;inset-block-end:12px}
  .agent__panel{position:fixed;inset-inline:8px;inset-block-end:80px;inline-size:auto;
    block-size:min(560px,calc(100dvh - 100px))}
}

/* ── motion: reduced or paused by the visitor ─────────────── */
@media (prefers-reduced-motion:reduce){
  .agent__panel{animation:none}
  .agent__fab,.agent__send{transition:none}
  .agent__fab:hover{transform:none}
  .agent__fab::after{animation-duration:9s}
  .agent__log{scroll-behavior:auto}
  .agent__dots i{animation-duration:2.4s}
}
html.paused .agent__fab::after{animation:none;opacity:0}
html.paused .agent__dots i{animation:none;opacity:.6}
html.paused .agent__panel{animation:none}

@media print{.agent{display:none}}
@media (forced-colors:active){
  .agent__fab,.agent__send{border:1px solid ButtonText}
  .agent__panel{border-color:CanvasText}
}