/* ============================================================
   SSM Chatbot — chatbot.css
   Pollinations.AI Edition · No login required for visitors
   Sneh Samvardhan Mandal, Nashik
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Tiro+Devanagari+Marathi&family=Cormorant+Garamond:wght@400;600&family=DM+Sans:wght@300;400;500&display=swap');

:root {
  --g1:#B8873A; --g2:#E8C97A; --g3:#F5E4B0;
  --dk1:#0E0700; --dk2:#1F0E00; --dk3:#3B1E00;
  --cream:#FDF6EB; --sfc:#FFF9F0; --bdr:#E2C990;
  --muted:#7A5C1E; --txt:#2C1500;
  --ubg:#3B1E00; --bbg:#FFFAED;
  --ebg:#fff1f0; --etx:#8B1A00;
  --r:16px;
  --sh:0 12px 40px rgba(0,0,0,.15);
}

/* ── FAB ───────────────────────────────────────────────────── */
#ssm-fab {
  position:fixed; bottom:26px; right:26px; z-index:9000;
  width:58px; height:58px; border-radius:50%; border:none; cursor:pointer;
  background:linear-gradient(140deg,var(--dk3),var(--g1));
  box-shadow:0 6px 24px rgba(184,135,58,.45);
  display:flex; align-items:center; justify-content:center;
  transition:transform .2s, box-shadow .2s;
}
#ssm-fab:hover  { transform:scale(1.1); box-shadow:0 10px 32px rgba(184,135,58,.6); }
#ssm-fab:active { transform:scale(.95); }
.ssm-fi { font-size:24px; line-height:1; }
.ssm-fd {
  position:absolute; top:1px; right:1px;
  width:14px; height:14px; border-radius:50%;
  background:#4CAF50; border:2px solid #fff;
  animation:ssm-p 2.2s ease infinite;
}
@keyframes ssm-p { 0%,100%{opacity:1}50%{opacity:.3} }

/* ── Panel ─────────────────────────────────────────────────── */
#ssm-panel {
  position:fixed; bottom:96px; right:26px; z-index:9001;
  width:400px; max-width:calc(100vw - 40px);
  border-radius:var(--r); border:1px solid var(--bdr);
  background:var(--sfc); box-shadow:var(--sh);
  display:none; flex-direction:column; overflow:hidden;
  font-family:'DM Sans',sans-serif;
  animation:ssm-up .28s cubic-bezier(.22,1,.36,1);
}
#ssm-panel.ssm-open { display:flex; }
@keyframes ssm-up { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }

/* ── Header ────────────────────────────────────────────────── */
#ssm-hd {
  background:linear-gradient(130deg,var(--dk1) 0%,var(--dk2) 55%,var(--dk3) 100%);
  padding:13px 16px; display:flex; align-items:center; gap:11px; flex-shrink:0;
  border-bottom:1px solid rgba(232,201,122,.15);
}
.ssm-hav {
  width:40px; height:40px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg,var(--g1),var(--g2));
  display:flex; align-items:center; justify-content:center; font-size:18px;
  border:1.5px solid rgba(232,201,122,.4);
  box-shadow:0 2px 8px rgba(0,0,0,.3);
}
.ssm-hi h2 {
  font-family:'Cormorant Garamond','Tiro Devanagari Marathi',serif;
  color:var(--g2); font-size:14.5px; font-weight:600; letter-spacing:.4px;
}
.ssm-hi p { color:rgba(232,201,122,.5); font-size:10.5px; margin-top:1px; font-weight:300; }

.ssm-hr { margin-left:auto; display:flex; flex-direction:column; align-items:flex-end; gap:5px; }
.ssm-ol { display:flex; align-items:center; gap:5px; color:rgba(232,201,122,.65); font-size:10.5px; }
.ssm-dot { width:6px; height:6px; border-radius:50%; background:#4CAF50; animation:ssm-p 2s infinite; }
#ssm-x { background:none; border:none; color:rgba(232,201,122,.4); font-size:16px; cursor:pointer; padding:0; transition:color .2s; }
#ssm-x:hover { color:var(--g2); }

/* ── Language toggle ───────────────────────────────────────── */
.ssm-lt {
  display:flex; background:rgba(255,255,255,.07); border-radius:20px;
  border:1px solid rgba(232,201,122,.18); overflow:hidden;
}
.ssm-lb {
  padding:2px 9px; font-size:10.5px; cursor:pointer; border:none;
  background:transparent; color:rgba(232,201,122,.4);
  font-family:'DM Sans',sans-serif; transition:all .18s;
}
.ssm-lb.act { background:rgba(184,135,58,.35); color:var(--g2); }

/* ── Messages ──────────────────────────────────────────────── */
#ssm-log {
  flex:1; height:300px; overflow-y:auto;
  padding:14px 13px; display:flex; flex-direction:column; gap:10px;
  background:var(--cream);
}
#ssm-log::-webkit-scrollbar { width:3px; }
#ssm-log::-webkit-scrollbar-thumb { background:var(--bdr); border-radius:2px; }

.ssm-msg { display:flex; gap:8px; align-items:flex-end; animation:ssm-in .25s ease; }
@keyframes ssm-in { from{opacity:0;transform:translateY(7px)} to{opacity:1;transform:translateY(0)} }
.ssm-user { flex-direction:row-reverse; }

.ssm-av {
  width:26px; height:26px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:13px;
}
.ssm-bot .ssm-av  { background:linear-gradient(135deg,var(--g1),var(--g2)); }
.ssm-user .ssm-av { background:var(--ubg); border:1px solid var(--g1); color:var(--g2); }

.ssm-bub {
  max-width:80%; padding:9px 13px; border-radius:13px;
  font-size:13.5px; line-height:1.65;
}
.ssm-bot .ssm-bub {
  background:var(--bbg); color:var(--txt);
  border:1px solid var(--bdr); border-bottom-left-radius:4px;
  font-family:'DM Sans','Tiro Devanagari Marathi',sans-serif;
}
.ssm-user .ssm-bub {
  background:var(--ubg); color:#FFE8C0;
  border-bottom-right-radius:4px;
}
.ssm-bub.err { background:var(--ebg); color:var(--etx); border-color:#f5c0b0; }

/* ── Typing dots ────────────────────────────────────────────── */
.ssm-dots { display:flex; align-items:center; gap:4px; }
.ssm-dots span {
  width:6px; height:6px; border-radius:50%; background:var(--g1);
  animation:ssm-b 1.15s ease infinite;
}
.ssm-dots span:nth-child(2){ animation-delay:.18s; }
.ssm-dots span:nth-child(3){ animation-delay:.36s; }
@keyframes ssm-b { 0%,60%,100%{transform:translateY(0)} 30%{transform:translateY(-6px)} }

/* ── Chip buttons ───────────────────────────────────────────── */
#ssm-chips {
  padding:8px 12px 9px; display:flex; gap:6px; flex-wrap:wrap;
  background:var(--cream); border-top:1px solid var(--bdr);
}
.ssm-ch {
  background:var(--sfc); border:1px solid var(--bdr); color:var(--muted);
  border-radius:18px; padding:4px 10px; font-size:11.5px; cursor:pointer;
  font-family:'DM Sans',sans-serif; transition:all .17s;
}
.ssm-ch:hover   { background:var(--g1); color:var(--dk1); border-color:var(--g1); }
.ssm-ch:disabled { opacity:.4; cursor:not-allowed; }

/* ── Input bar ─────────────────────────────────────────────── */
#ssm-bar {
  display:flex; align-items:center; gap:8px; padding:10px 13px;
  background:var(--sfc); border-top:1px solid var(--bdr);
}
#ssm-inp {
  flex:1; border:1px solid var(--bdr); border-radius:22px;
  padding:9px 15px; font-size:13.5px; background:var(--cream); color:var(--txt);
  font-family:'DM Sans','Tiro Devanagari Marathi',sans-serif;
  outline:none; transition:border-color .2s;
}
#ssm-inp:focus       { border-color:var(--g1); }
#ssm-inp::placeholder { color:var(--muted); opacity:.6; }
#ssm-inp:disabled    { opacity:.5; }

#ssm-snd {
  width:38px; height:38px; flex-shrink:0; border-radius:50%; border:none; cursor:pointer;
  background:linear-gradient(135deg,var(--dk3),var(--g1));
  color:#FFE8C0; display:flex; align-items:center; justify-content:center;
  transition:transform .15s; box-shadow:0 3px 10px rgba(184,135,58,.3);
}
#ssm-snd:hover   { transform:scale(1.08); }
#ssm-snd:active  { transform:scale(.93); }
#ssm-snd:disabled { opacity:.4; cursor:not-allowed; transform:none; }

/* ── Footer ────────────────────────────────────────────────── */
#ssm-ft {
  text-align:center; font-size:10px; color:var(--muted);
  opacity:.5; padding:3px 0 6px; background:var(--sfc); letter-spacing:.3px;
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width:480px) {
  #ssm-panel { right:10px; bottom:86px; width:calc(100vw - 20px); }
  #ssm-fab   { right:14px; bottom:18px; }
}