:root{
  --gold:#b89552;
  --gold-dark:#98733a;
  --muted:#f6f5f2;
  --text:#22303f;
  --widget-w:300px;
  --widget-h:420px;
  --font-family:"Georgia", serif;
  --chat-blue: #0066cc;
  --chat-blue-dark: #004999;
  --header-blue: #0b67d6;
  --header-blue-soft: #0f79e0;
}
#school-chat-root{ position:fixed; right:18px; bottom:18px; z-index:99999; font-family:var(--font-family); }
.sc-launcher { width:56px; height:56px; border-radius:50%; background:var(--chat-blue); color:#fff; font-size:24px; display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 8px 20px rgba(6,10,20,0.16); transition:transform .18s ease, background .18s ease; border: 2px solid rgba(255,255,255,0.06); }
.sc-launcher:hover { transform:scale(1.06); background:var(--chat-blue-dark); }
.sc-launcher svg { width:22px; height:22px; color:#fff; }
.sc-launcher svg path { fill: currentColor; }
.sc-widget{ width:var(--widget-w); height:var(--widget-h); border-radius:14px; overflow:hidden; box-shadow:0 22px 48px rgba(6,10,20,0.14); background:#fff; display:flex; flex-direction:column; border: 1px solid rgba(6,10,20,0.06); }
.sc-header{ display:flex; align-items:center; padding:10px 14px; background: linear-gradient(180deg, var(--header-blue-soft), var(--header-blue)); color:#fff; height:56px; gap:8px; }
.sc-header .title{ font-weight:700; font-size:15px; margin-left:6px; }
.sc-header .close{ margin-left:auto; cursor:pointer; font-size:18px; line-height:1; padding:6px; border-radius:8px; background: rgba(255,255,255,0.04); border: none; }
.sc-header .close:hover{ background: rgba(255,255,255,0.08); }
.sc-header .close svg { width:14px; height:14px; color:#fff; }
.sc-header .close svg path { stroke: currentColor; }
.sc-messages{ padding:14px; background:var(--muted); display:flex; flex-direction:column; gap:12px; overflow:auto; flex:1; }
.msg{ max-width:85%; padding:12px 14px; border-radius:14px; font-size:14px; line-height:1.4; box-shadow:0 6px 16px rgba(9,14,24,0.06); }
.msg.bot{ background:#fff; align-self:flex-start; color:var(--text); border-top-left-radius:8px; }
.msg.user{ background:linear-gradient(90deg,#0b67d6,#084fb0); color:#fff; align-self:flex-end; border-top-right-radius:8px; }
.sc-input{ padding:10px; display:flex; gap:10px; align-items:center; border-top:1px solid rgba(0,0,0,0.04); }
.sc-input input{ flex:1; padding:10px 14px; border-radius:999px; border:1px solid rgba(0,0,0,0.06); font-size:14px; }
.sc-input button{ width:44px; height:44px; border-radius:50%; border:none; background:var(--chat-blue-dark); color:#fff; cursor:pointer; font-size:16px; box-shadow:0 6px 14px rgba(6,10,20,0.12); }
.chip{ padding:8px 12px; border-radius:999px; background:#fff; border:1px solid rgba(0,0,0,0.06); cursor:pointer; box-shadow:0 6px 16px rgba(9,14,24,0.04); font-size:13px; }
.chip:hover{ transform: translateY(-2px); }
.typing{ width:40px; display:flex; gap:6px; align-items:center; }
.typing span{ width:7px; height:7px; background:#d3cdc4; border-radius:50%; animation:bounce .9s infinite; }
.typing span:nth-child(2){ animation-delay:.12s } .typing span:nth-child(3){ animation-delay:.24s }
@keyframes bounce{ 0%{transform:translateY(0);}50%{transform:translateY(-6px);}100%{transform:translateY(0);} }
@media (max-width:420px){ :root{ --widget-w:92vw; --widget-h:64vh; } #school-chat-root{ right:12px; bottom:12px; } .sc-widget{ border-radius:12px; } }