/* ═══════════════════════════════════════════════════════════════════════
   سِراج — site assistant widget
   ─────────────────────────────────────────────────────────────────────
   Self-contained on purpose. The widget ships on every page, and not every
   page loads the v2 design system (the blog, for example, is served with
   sira.css, which has no --panel / --line-2 / --enter tokens). So the widget
   maps every token it needs onto its own namespace with a literal fallback:
   it inherits the page's palette and dark mode where those exist, and falls
   back to the brand's own values where they don't — instead of rendering
   unstyled.
   Motion is transform/opacity only, so it stays on the compositor.
   ═══════════════════════════════════════════════════════════════════════ */

.sj, .sj-fab {
  --sj-cyan:      var(--cyan,      #17BEDC);
  --sj-cyan-bri:  var(--cyan-bri,  #35DDF2);
  --sj-cyan-deep: var(--cyan-deep, #0E93AE);
  --sj-navy:      var(--navy,      #0E1A2B);
  --sj-navy-2:    var(--navy-2,    #16283C);
  --sj-ink:       var(--ink,       #0A0F1A);
  --sj-gold:      var(--gold,      #E7A529);
  --sj-gold-soft: var(--gold-soft, #F3C04E);

  --sj-bg:      var(--bg,      #F4F7FB);
  --sj-panel:   var(--panel,   #FFFFFF);
  --sj-panel-2: var(--panel-2, #F8FBFE);
  --sj-line:    var(--line,    #E2E9F1);
  --sj-line-2:  var(--line-2,  #CFDAE6);
  --sj-text:    var(--text,    #0E1A2B);
  --sj-text-2:  var(--text-2,  #3A4A5E);
  --sj-text-3:  var(--text-3,  #61738A);
  --sj-muted:   var(--muted,   #8494A6);

  --sj-shadow-2: var(--shadow-2, 0 18px 44px rgba(14,26,43,.10));
  --sj-shadow-3: var(--shadow-3, 0 34px 80px rgba(14,26,43,.16));
  --sj-glow:     var(--glow-cyan, 0 18px 50px rgba(23,190,220,.30));
  --sj-r:        var(--r, 4px);
  --sj-enter:    var(--enter, cubic-bezier(.22, 1, .36, 1));
}
/* Pages without the v2 dark tokens still need a dark panel when the site is
   in dark mode, so the widget theming is stated here too. */
html[data-theme="dark"] .sj, html[data-theme="dark"] .sj-fab {
  --sj-bg:      var(--bg,      #101C2E);
  --sj-panel:   var(--panel,   #1A2C42);
  --sj-panel-2: var(--panel-2, #20344D);
  --sj-line:    var(--line,    #2C4160);
  --sj-line-2:  var(--line-2,  #3A5378);
  --sj-text:    var(--text,    #EDF4FB);
  --sj-text-2:  var(--text-2,  #C2D2E4);
  --sj-text-3:  var(--text-3,  #93A6BC);
  --sj-shadow-2: var(--shadow-2, 0 18px 44px rgba(0,0,0,.4));
  --sj-shadow-3: var(--shadow-3, 0 34px 80px rgba(0,0,0,.5));
}

/* Launcher and panel are positioned with PHYSICAL properties on purpose.
   inset-inline-* resolves against the *element's own* direction, and the panel
   carries its own dir attribute — so a logical inset put the panel on the
   opposite side from its launcher the moment the two directions disagreed. */
.sj-fab {
  position: fixed; bottom: 24px; left: 24px; right: auto; z-index: 56;
  width: 56px; height: 56px; display: flex; align-items: center; justify-content: center;
  background: transparent; color: #fff; border: 0; cursor: pointer; padding: 0;
  transition: transform .25s var(--sj-enter);
}
/* The faceted shape lives on a background layer, not on the button itself:
   clip-path clips descendants, and the unread badge sits outside the shape. */
.sj-fab::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(145deg, var(--sj-cyan) 0%, var(--sj-cyan-deep) 100%);
  clip-path: polygon(0 0, 100% 0, 100% 74%, 74% 100%, 0 100%);
  box-shadow: var(--sj-glow);
}
.sj-fab > svg { position: relative; }
html.lang-en .sj-fab { left: auto; right: 24px; }
.sj-fab:hover { transform: translateY(-4px) scale(1.06); }
.sj-fab:focus-visible { outline: 2px solid var(--sj-cyan-bri); outline-offset: 3px; }
.sj-fab::after {                       /* quiet "online" pip */
  content: ''; position: absolute; top: 9px; right: 9px;
  width: 8px; height: 8px; background: var(--sj-gold-soft); border-radius: 50%;
}
html.lang-en .sj-fab::after { right: auto; left: 9px; }
.sj-fab.has-unread::after { display: none; }   /* the badge takes that corner */

/* ── the character ───────────────────────────────────────────────────────
   Siraj blinks about every five seconds, and lifts into a wider smile when
   you hover him. Both are transform-only, so they cost nothing to animate. */
.sj-face { overflow: visible; }
.sj-eye {
  transform-box: fill-box; transform-origin: center;
  animation: sj-blink 5.5s infinite;
}
.sj-fab:hover .sj-eye { animation-duration: 2.6s; }
@keyframes sj-blink {
  0%, 92%, 100% { transform: scaleY(1); }
  95%, 97%      { transform: scaleY(.14); }
}
.sj-smile { transform-box: fill-box; transform-origin: center top; transition: transform .25s var(--sj-enter); }
.sj-fab:hover .sj-smile { transform: scaleY(1.28); }
.sj-flame { transform-box: fill-box; transform-origin: center bottom; animation: sj-flicker 3.4s ease-in-out infinite; }
@keyframes sj-flicker {
  0%, 100% { transform: scaleY(1) translateY(0); opacity: 1; }
  50%      { transform: scaleY(1.1) translateY(-.4px); opacity: .88; }
}

/* unread counter — only rendered when there is something to read */
.sj-badge {
  position: absolute; top: -6px; right: -6px; min-width: 22px; height: 22px;
  display: none; align-items: center; justify-content: center; padding: 0 6px;
  font-size: 12px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums;
  background: var(--sj-gold); color: var(--sj-ink);
  border: 2px solid var(--sj-bg); border-radius: 11px;
}
html.lang-en .sj-badge { right: auto; left: -6px; }
.sj-fab.has-unread .sj-badge { display: flex; animation: sj-pop .32s var(--sj-enter); }
.sj-fab.has-unread { animation: sj-nudge 1.9s var(--sj-enter) 2; }
@keyframes sj-pop { from { transform: scale(.4); } to { transform: scale(1); } }
@keyframes sj-nudge {
  0%, 100%    { transform: translateY(0) rotate(0); }
  8%, 24%     { transform: translateY(-5px) rotate(-5deg); }
  16%, 32%    { transform: translateY(-5px) rotate(5deg); }
  40%         { transform: translateY(0) rotate(0); }
}

/* one-time greeting bubble */
.sj-tip {
  position: absolute; bottom: 50%; left: calc(100% + 12px); transform: translate(-6px, 50%);
  white-space: nowrap; font-size: 13.5px; font-weight: 600; line-height: 1;
  padding: 10px 14px; background: var(--sj-panel); color: var(--sj-text);
  border: 1px solid var(--sj-line-2); box-shadow: var(--sj-shadow-2);
  clip-path: polygon(0 0, 100% 0, 100% 68%, 68% 100%, 0 100%);
  opacity: 0; pointer-events: none;
  transition: opacity .3s var(--sj-enter), transform .3s var(--sj-enter);
}
html.lang-en .sj-tip { left: auto; right: calc(100% + 12px); transform: translate(6px, 50%); }
.sj-fab.has-tip .sj-tip { opacity: 1; transform: translate(0, 50%); }
@media (max-width: 560px) { .sj-tip { display: none; } }   /* no room, and no hover to dismiss it */

/* The scroll-to-top button shares this corner — stack it clear of the launcher.
   It carries a translateY(10px) in its hidden state, so the gap is measured
   against that offset position, not the resting one. The gap also has to clear
   the launcher's hover state, which scales it up 6% and lifts it 4px. */
.fab.top { bottom: 106px; }
@media (max-width: 768px) { .fab.top { bottom: 100px; } }

/* panel */
.sj {
  position: fixed; z-index: 57; bottom: 92px; left: 24px; right: auto;
  width: min(390px, calc(100vw - 32px)); height: min(560px, calc(100vh - 140px));
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--sj-panel); color: var(--sj-text);
  border: 1px solid var(--sj-line);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%);
  box-shadow: var(--sj-shadow-3);
  opacity: 0; pointer-events: none;
  transform: translateY(14px) scale(.97); transform-origin: bottom left;
  transition: opacity .22s var(--sj-enter), transform .22s var(--sj-enter);
}
html.lang-en .sj { left: auto; right: 24px; transform-origin: bottom right; }
.sj.is-open { opacity: 1; pointer-events: auto; transform: none; }

.sj-head {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px;
  background: linear-gradient(135deg, var(--sj-navy) 0%, var(--sj-navy-2) 100%);
  color: #fff; flex-shrink: 0;
}
.sj-mark {
  width: 38px; height: 38px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(23,190,220,.16); color: var(--sj-cyan-bri);
  clip-path: polygon(0 0, 100% 0, 100% 72%, 72% 100%, 0 100%);
}
.sj-who { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; flex: 1; }
.sj-who b { font-size: 15.5px; }
.sj-who span { font-size: 12px; color: rgba(255,255,255,.66); }
.sj-x {
  width: 34px; height: 34px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  background: transparent; border: 0; color: rgba(255,255,255,.7); cursor: pointer;
  transition: color .2s, transform .2s var(--sj-enter);
}
.sj-x:hover { color: #fff; transform: rotate(90deg); }
.sj-x:focus-visible { outline: 2px solid var(--sj-cyan-bri); outline-offset: 2px; }

.sj-list {
  flex: 1; overflow-y: auto; overscroll-behavior: contain;
  padding: 16px; display: flex; flex-direction: column; gap: 10px;
  background: var(--sj-bg);
  scrollbar-width: thin;
}
.sj-msg { display: flex; max-width: 100%; }
.sj-me  { justify-content: flex-end; }
.sj-bub {
  max-width: 86%; padding: 10px 13px; font-size: 14.5px; line-height: 1.75;
  word-break: break-word; white-space: normal;
}
.sj-bot .sj-bub {
  background: var(--sj-panel); border: 1px solid var(--sj-line); color: var(--sj-text);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}
.sj-me .sj-bub {
  background: linear-gradient(140deg, var(--sj-cyan) 0%, var(--sj-cyan-deep) 100%); color: #fff;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
}
.sj-bub strong { font-weight: 700; }
.sj-a { color: var(--sj-cyan-deep); text-decoration: underline; text-underline-offset: 3px; }
.sj-me .sj-a { color: #fff; }

/* typing indicator */
.sj-typing .sj-bub { display: flex; gap: 5px; align-items: center; padding: 14px 15px; }
.sj-typing i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--sj-muted);
  animation: sj-dot 1.1s infinite ease-in-out;
}
.sj-typing i:nth-child(2) { animation-delay: .16s; }
.sj-typing i:nth-child(3) { animation-delay: .32s; }
@keyframes sj-dot { 0%, 60%, 100% { opacity: .28; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

/* suggestion chips */
.sj-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 2px; }
.sj-chip {
  padding: 7px 12px; font-size: 13px; font-family: inherit; cursor: pointer;
  background: var(--sj-panel); border: 1px solid var(--sj-line-2); color: var(--sj-text-2);
  clip-path: polygon(0 0, 100% 0, 100% 70%, 70% 100%, 0 100%);
  transition: color .2s, border-color .2s, transform .2s var(--sj-enter);
}
.sj-chip:hover { color: var(--sj-cyan-deep); border-color: var(--sj-cyan); transform: translateY(-2px); }
.sj-chip:focus-visible { outline: 2px solid var(--sj-cyan); outline-offset: 2px; }

.sj-note {
  padding: 8px 16px; font-size: 11.5px; line-height: 1.6; color: var(--sj-text-3);
  background: var(--sj-panel-2); border-top: 1px solid var(--sj-line); flex-shrink: 0;
}

.sj-form {
  display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px;
  background: var(--sj-panel); border-top: 1px solid var(--sj-line); flex-shrink: 0;
}
.sj-in {
  flex: 1; resize: none; font: inherit; font-size: 14.5px; line-height: 1.6;
  padding: 9px 12px; max-height: 110px; color: var(--sj-text);
  background: var(--sj-bg); border: 1px solid var(--sj-line-2); border-radius: var(--sj-r);
  transition: border-color .2s;
}
.sj-in:focus { outline: none; border-color: var(--sj-cyan); }
.sj-send {
  width: 40px; height: 40px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  background: var(--sj-cyan); color: #fff; border: 0; cursor: pointer;
  clip-path: polygon(0 0, 100% 0, 100% 72%, 72% 100%, 0 100%);
  transition: background .2s, transform .2s var(--sj-enter);
}
.sj-send:hover:not(:disabled) { background: var(--sj-cyan-deep); transform: translateY(-2px); }
.sj-send:disabled { opacity: .45; cursor: default; }
.sj-send:focus-visible { outline: 2px solid var(--sj-cyan-bri); outline-offset: 2px; }
html.lang-en .sj-send svg { transform: none; }
html:not(.lang-en) .sj-send svg { transform: scaleX(-1); }   /* arrow follows RTL */

/* dark mode inherits the tokens; only the header gradient needs a nudge */
html[data-theme="dark"] .sj-head { background: linear-gradient(135deg, #16273C 0%, #1A2C42 100%); }
html[data-theme="dark"] .sj-a { color: var(--sj-cyan-bri); }

/* phones: full-height sheet, launcher and FABs shrink to fit */
@media (max-width: 560px) {
  .sj {
    inset-inline: 0; width: 100%;
    /* --sj-kb is the on-screen keyboard height, measured by siraj.js from the
       visual viewport (it is 0 whenever the keyboard is closed). Without it the
       keyboard covers the composer and the send button becomes unreachable.
       --sj-vvh is the visible height, so the sheet shrinks instead of being
       pushed off the top of the screen. */
    bottom: var(--sj-kb, 0px);
    height: min(88vh, 100vh - 64px);
    height: min(88dvh, 100dvh - 64px);
    height: min(88dvh, calc(var(--sj-vvh, 100dvh) - 56px));
    clip-path: none; border-inline: 0; border-bottom: 0;
    transform: translateY(100%);
    transition: opacity .22s var(--sj-enter), transform .22s var(--sj-enter),
                height .18s ease-out, bottom .18s ease-out;
  }
  /* the composer must stay clear of the home indicator on gesture phones */
  .sj-form { padding-bottom: max(10px, env(safe-area-inset-bottom)); }
  .sj.is-open { transform: none; }
  .sj-fab { width: 50px; height: 50px; bottom: 18px; left: 16px; right: auto; }
  html.lang-en .sj-fab { left: auto; right: 16px; }
  .sj-bub { max-width: 92%; }
}
/* while the sheet is open on a phone, the page behind must not scroll */
@media (max-width: 560px) { html.sj-open, html.sj-open body { overflow: hidden; } }

/* touch targets */
@media (pointer: coarse) {
  .sj-chip { min-height: 40px; }
  .sj-x, .sj-send { min-width: 44px; min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .sj, .sj-fab, .sj-chip, .sj-send, .sj-x { transition: opacity .15s linear; transform: none !important; }
  .sj-typing i, .sj-fab.has-unread, .sj-badge, .sj-eye, .sj-flame { animation: none; }
  .sj-typing i { opacity: .5; }
}
@media print { .sj, .sj-fab { display: none !important; } }