/* ===========================================================================
   support-chat.css — right-side AI support assistant widget for bibamoney.com.
   Uses its own scoped light/dark tokens so host-page palettes cannot make
   controls or text disappear.
   Namespaced `.sc-` to stay collision-free when injected onto any page.
   CSP-safe: no inline styles/scripts — pulled in as an external stylesheet.
   =========================================================================== */

/* ---- floating launcher (the micro-robot) ---- */
.sc-launcher{
  --sc-panel:#fff;--sc-bg:#f5f7fb;--sc-card:#fff;--sc-text:#14213d;--sc-text2:#53627d;
  --sc-text3:#74829a;--sc-border:#dfe5ef;--sc-border2:#cbd5e1;--sc-primary:#2563eb;
  --sc-primary2:#6d4aff;--sc-success:#079669;--sc-danger:#dc2626;
  position:fixed; right:22px; bottom:22px; z-index:9000;
  display:flex; align-items:center; gap:10px;
  background:var(--sc-card); border:1px solid var(--sc-border);
  border-radius:999px; padding:8px 16px 8px 8px;
  box-shadow:0 14px 40px rgba(15,23,42,.18); cursor:pointer;
  font-family:'Inter',sans-serif; color:var(--sc-text);
  transition:transform .14s, box-shadow .2s, opacity .2s;
}
html[data-theme="dark"] .sc-launcher{
  --sc-panel:#0b1220;--sc-bg:#070d18;--sc-card:#111a2b;--sc-text:#f4f7fb;--sc-text2:#a7b2c5;
  --sc-text3:#7f8ca3;--sc-border:#26334a;--sc-border2:#34435d;--sc-primary:#70a5ff;
  --sc-primary2:#7657ff;--sc-success:#43d7a3;--sc-danger:#fb7185;
}
.sc-launcher:hover{ transform:translateY(-2px) }
.sc-launcher[hidden]{ display:none }
.sc-launcher__face{
  width:42px; height:42px; border-radius:50%; flex:none; overflow:hidden;
  display:grid; place-items:center; color:#fff; font-size:22px;
  background:linear-gradient(135deg,var(--sc-primary),var(--sc-primary2)); box-shadow:0 6px 16px rgba(37,99,235,.36);
}
/* Branded robot avatar with graceful icon fallback (JS adds .sc-noimg on 404). */
.sc-botimg{ width:100%; height:100%; object-fit:contain; display:block }
.sc-face-ico{ display:none }
.sc-noimg .sc-botimg{ display:none }
.sc-noimg .sc-face-ico{ display:grid; place-items:center }
.sc-launcher__txt{ display:flex; flex-direction:column; line-height:1.15; text-align:left }
.sc-launcher__txt b{ font-size:13.5px; font-weight:800 }
.sc-launcher__txt small{ font-size:11px; color:var(--sc-text2); font-weight:600 }
/* ---- panel shell ---- */
.sc-panel{
  --sc-panel:#fff;--sc-bg:#f5f7fb;--sc-card:#fff;--sc-card-soft:#eef3fa;--sc-text:#14213d;
  --sc-text2:#53627d;--sc-text3:#74829a;--sc-border:#dfe5ef;--sc-border2:#cbd5e1;
  --sc-primary:#2563eb;--sc-primary2:#6d4aff;--sc-success:#079669;--sc-danger:#dc2626;
  --sc-header:linear-gradient(135deg,#173b7a,#4d3bd8);
  position:fixed; right:22px; bottom:22px; z-index:9001;
  width:392px; max-width:calc(100vw - 28px); height:600px; max-height:calc(100vh - 36px);
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--sc-panel); border:1px solid var(--sc-border); border-radius:18px;
  box-shadow:0 28px 80px rgba(15,23,42,.24); font-family:'Inter',sans-serif; color:var(--sc-text);
  opacity:0; transform:translateY(14px) scale(.98); pointer-events:none;
  transition:opacity .18s, transform .18s, width .22s, height .22s, right .22s, bottom .22s, border-radius .22s;
}
html[data-theme="dark"] .sc-panel{
  --sc-panel:#0b1220;--sc-bg:#070d18;--sc-card:#111a2b;--sc-card-soft:#162136;
  --sc-text:#f4f7fb;--sc-text2:#a7b2c5;--sc-text3:#7f8ca3;--sc-border:#26334a;
  --sc-border2:#34435d;--sc-primary:#70a5ff;--sc-primary2:#7657ff;
  --sc-success:#43d7a3;--sc-danger:#fb7185;--sc-header:linear-gradient(135deg,#111a35,#241b53);
}
.sc-panel.is-open{ opacity:1; transform:none; pointer-events:auto }
.sc-panel.is-full{
  right:0; bottom:0; top:0; left:auto;
  width:min(560px,100vw); height:100vh; max-height:100vh; border-radius:0;
  border-top:none; border-bottom:none; border-right:none;
}

/* ---- header ---- */
.sc-head{ display:flex; align-items:center; gap:11px; padding:13px 14px;
  background:var(--sc-header); color:#fff; flex:none }
.sc-head__face{ width:38px; height:38px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:rgba(255,255,255,.16); font-size:20px }
.sc-head__meta{ display:flex; flex-direction:column; line-height:1.2; min-width:0 }
.sc-head__meta b{ font-size:14.5px; font-weight:800 }
.sc-head__meta small{ font-size:11.5px; color:#dce7ff; display:flex; align-items:center; gap:5px }
.sc-head__btns{ margin-left:auto; display:flex; gap:4px }
.sc-iconbtn{ width:38px; height:38px; border-radius:11px; border:1px solid rgba(255,255,255,.32); cursor:pointer;
  background:rgba(5,12,30,.34); color:#fff; font-size:20px; display:grid; place-items:center; transition:.14s;
  box-shadow:0 2px 10px rgba(0,0,0,.14)}
.sc-iconbtn:hover{ background:#fff; color:#172554; transform:translateY(-1px) }
.sc-iconbtn:focus-visible,.sc-chip:focus-visible,.sc-send:focus-visible{outline:3px solid rgba(96,165,250,.5);outline-offset:2px}

/* ---- adaptive context bar: shows where the user is + why it matters ---- */
.sc-context{ display:flex; align-items:center; gap:8px; padding:9px 14px;
  background:var(--sc-card-soft); border-bottom:1px solid var(--sc-border);
  font-size:12px; color:var(--sc-text2); flex:none }
.sc-context i{ color:var(--sc-primary); font-size:15px; flex:none }
.sc-context b{ color:var(--sc-text); font-weight:750 }

/* ---- messages ---- */
.sc-body{ flex:1; min-height:0; overflow-y:auto; padding:16px 14px; display:flex; flex-direction:column; gap:12px; background:var(--sc-bg);
  scrollbar-color:var(--sc-text3) var(--sc-card-soft); scrollbar-width:thin }
.sc-body::-webkit-scrollbar{width:8px}.sc-body::-webkit-scrollbar-track{background:var(--sc-card-soft)}
.sc-body::-webkit-scrollbar-thumb{background:var(--sc-text3);border-radius:99px;border:2px solid var(--sc-card-soft)}
.sc-msg{ max-width:88%; font-size:14px; line-height:1.52; padding:11px 13px; border-radius:14px; white-space:pre-wrap; word-break:break-word }
.sc-msg.bot{ align-self:flex-start; background:var(--sc-card); color:var(--sc-text); border:1px solid var(--sc-border); border-bottom-left-radius:5px; box-shadow:0 5px 16px rgba(15,23,42,.06) }
.sc-msg.user{ align-self:flex-end; background:linear-gradient(135deg,var(--sc-primary),var(--sc-primary2)); color:#fff; border-bottom-right-radius:5px }
.sc-msg.bot a{ color:var(--sc-primary); font-weight:700 }
.sc-msg.bot strong{ font-weight:800; color:var(--sc-text) }
.sc-msg.bot em{ font-style:italic }
.sc-msg.bot code{ font-family:ui-monospace,monospace; font-size:.9em; background:var(--sc-card-soft); padding:1px 5px; border-radius:5px }
.sc-msg.bot h4{ font-size:1.02em; font-weight:800; margin:7px 0 3px }
.sc-msg.bot ul{ margin:5px 0 5px 2px; padding-left:18px }
.sc-msg.bot li{ margin:2px 0 }
.sc-msg__src{ display:block; margin-top:7px; font-size:11px; color:var(--sc-text3) }
.sc-answer-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:9px;padding-top:8px;border-top:1px solid var(--sc-border)}
.sc-answer-actions button{min-height:34px;border:1px solid var(--sc-border);border-radius:9px;background:var(--sc-card-soft);
  color:var(--sc-text2);font:inherit;font-size:11.5px;font-weight:700;padding:6px 9px;cursor:pointer}
.sc-answer-actions button:hover{border-color:var(--sc-primary);color:var(--sc-primary)}
.sc-answer-actions button.is-selected{border-color:var(--sc-success);color:var(--sc-success)}
.sc-answer-actions button.is-down{border-color:var(--sc-danger);color:var(--sc-danger)}
.sc-answer-status{font-size:11px;color:var(--sc-text3)}
.sc-typing{ align-self:flex-start; display:inline-flex; gap:4px; padding:12px 14px; background:var(--sc-card);
  border:1px solid var(--sc-border); border-radius:14px; border-bottom-left-radius:5px }
.sc-typing span{ width:7px; height:7px; border-radius:50%; background:var(--sc-text3); animation:sc-bounce 1.2s infinite }
.sc-typing span:nth-child(2){ animation-delay:.18s } .sc-typing span:nth-child(3){ animation-delay:.36s }
@keyframes sc-bounce{ 0%,60%,100%{transform:translateY(0);opacity:.5} 30%{transform:translateY(-5px);opacity:1} }

/* ---- suggestion chips (adaptive to page + history) ---- */
.sc-suggest{padding:9px 14px 8px;background:var(--sc-panel);border-top:1px solid var(--sc-border);flex:none}
.sc-suggest__head{display:flex;justify-content:space-between;gap:8px;margin-bottom:7px;color:var(--sc-text3);
  font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.05em}
.sc-progress{color:var(--sc-primary);white-space:nowrap}
.sc-chips{ display:flex; flex-wrap:wrap; gap:7px; padding:0; flex:none }
.sc-chip{ font-family:inherit; font-size:12.5px; font-weight:650; cursor:pointer;
  background:var(--sc-card-soft); color:var(--sc-text); border:1px solid var(--sc-border2);
  border-radius:999px; padding:7px 13px; transition:.14s; text-align:left }
.sc-chip:hover{ border-color:var(--sc-primary); color:var(--sc-primary) }
.sc-chip i{ color:var(--sc-primary); margin-right:5px }
.sc-learning-done{font-size:12px;color:var(--sc-text2);display:flex;align-items:center;gap:6px;padding:5px 2px}
.sc-learning-done i{color:var(--sc-success);font-size:15px}

/* ---- composer ---- */
.sc-foot{ padding:10px 12px 12px; border-top:1px solid var(--sc-border); background:var(--sc-panel); flex:none }
.sc-inputrow{ display:flex; align-items:flex-end; gap:8px; background:var(--sc-card);
  border:1px solid var(--sc-border2); border-radius:14px; padding:6px 6px 6px 14px; transition:border-color .14s }
.sc-inputrow:focus-within{ border-color:var(--sc-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--sc-primary) 14%,transparent) }
.sc-input{ flex:1; border:none; background:transparent; resize:none; outline:none; color:var(--sc-text);
  font-family:inherit; font-size:14px; line-height:1.5; max-height:120px; padding:6px 0 }
.sc-input::placeholder{color:var(--sc-text3);opacity:1}
.sc-send{ width:38px; height:38px; flex:none; border:none; border-radius:11px; cursor:pointer;
  background:linear-gradient(135deg,var(--sc-primary),var(--sc-primary2)); color:#fff; font-size:18px; display:grid; place-items:center; transition:transform .12s, opacity .2s }
.sc-send:hover{ transform:translateY(-1px) }
.sc-send:disabled{ opacity:.45; cursor:default; transform:none }
.sc-foot__row{ display:flex; align-items:center; justify-content:space-between; margin-top:8px; padding:0 2px }
.sc-learning-note{font-size:10.5px;color:var(--sc-text3);display:inline-flex;align-items:center;gap:5px}
.sc-learning-note i{color:var(--sc-primary);font-size:13px}
.sc-foot__brand{ font-size:10.5px; color:var(--sc-text3); font-weight:600 }

/* ---- mobile: small panel becomes near-fullscreen ---- */
@media(max-width:560px){
  .sc-panel{ right:0; bottom:calc(62px + env(safe-area-inset-bottom)); width:100vw;
    height:calc(100dvh - 62px - env(safe-area-inset-bottom)); max-height:none; border-radius:16px 16px 0 0; border:none }
  .sc-panel.is-full{ width:100vw }
  .sc-launcher__txt{ display:none }
  .sc-launcher{right:12px;bottom:calc(70px + env(safe-area-inset-bottom));padding:7px}
  .sc-launcher__face{width:40px;height:40px}
  .sc-head{padding-top:max(12px,env(safe-area-inset-top))}
  .sc-learning-note{max-width:210px}
}