*{margin:0;padding:0;box-sizing:border-box;font-family:Tahoma,"Segoe UI",sans-serif;}
:root{
  --top:#36d7e8;
  --bottom:#1a2f4a;
  --accent:#1fb8d4;
  --white:#fff;
  --ink:#1a2f4a;
  --support-chat-scroll-track:#e8eff8;
  --support-chat-scroll-thumb:#9eb4cc;
  --support-chat-scroll-thumb-hover:#7a96b4;
}

body{
  min-height:100vh;
  background:var(--wl-palette-bg, #e4edf7);
  color:var(--ink);
}

/* Topbar */
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 8%;
  backdrop-filter: blur(10px);
  background:#ffffff;
  border-bottom:1px solid rgba(26,47,74,0.1);
  gap:12px;
}

.back{
  color:var(--ink);
  text-decoration:none;
  font-weight:900;
  opacity:.9;
}
.back:hover{opacity:1;}

.title{
  display:flex;
  align-items:center;
  gap:10px;
  text-align:right;
}

.title h1{font-size:18px; margin-bottom:2px; color:var(--ink);}
.title p{font-size:12px; opacity:.85; color:rgba(26,47,74,0.55);}

.status-dot{
  width:10px;height:10px;border-radius:50%;
  background:#33ff99;
  box-shadow:0 0 18px rgba(51,255,153,.7);
}

/* Primary button */
.btn-primary{
  background:var(--top);
  padding:10px 18px;
  border-radius:999px;
  text-decoration:none;
  color:var(--ink);
  font-weight:900;
  box-shadow:0 14px 28px rgba(26,47,74,0.1);
  transition:.2s;
}
.btn-primary:hover{transform:translateY(-2px);}

/* Layout */
.wrap{
  height: calc(100vh - 72px);
  display:flex;
  flex-direction:column;
  padding:16px clamp(16px, 4vw, 48px) 22px;
  gap:12px;
  max-width:920px;
  margin-inline:auto;
  width:100%;
}

/* Chat area */
.chat{
  flex:1;
  overflow:auto;
  padding:16px;
  border-radius:18px;
  background:#ffffff;
  border:1px solid rgba(26,47,74,0.1);
  box-shadow:0 12px 32px rgba(26,47,74,0.06);
  backdrop-filter: blur(10px);
  display:flex;
  flex-direction:column;
  align-items:stretch;
  scrollbar-width:thin;
  scrollbar-color:var(--support-chat-scroll-thumb) var(--support-chat-scroll-track);
}

.chat::-webkit-scrollbar{
  width:10px;
  height:10px;
}

.chat::-webkit-scrollbar-track{
  background:var(--support-chat-scroll-track);
}

html[dir="rtl"] .chat::-webkit-scrollbar-track{
  border-radius:0 12px 12px 0;
}

html[dir="ltr"] .chat::-webkit-scrollbar-track{
  border-radius:12px 0 0 12px;
}

.chat::-webkit-scrollbar-thumb{
  background:var(--support-chat-scroll-thumb);
  border-radius:999px;
  border:2px solid var(--support-chat-scroll-track);
}

.chat::-webkit-scrollbar-thumb:hover{
  background:var(--support-chat-scroll-thumb-hover);
}

.chat::-webkit-scrollbar-corner{
  background:var(--support-chat-scroll-track);
}

/* Messages — bot on inline-start, user on inline-end (RTL/LTR safe) */
.msg{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin:0 0 14px;
  width:fit-content;
  max-width:min(320px, 88%);
}

.msg.bot{
  align-self:flex-start;
  align-items:flex-start;
}

.msg.user{
  align-self:flex-end;
  align-items:flex-end;
}

.msg.welcome{
  max-width:min(280px, 88%);
}

.bubble{
  padding:12px 14px;
  border-radius:16px;
  line-height:1.7;
  font-size:14px;
  box-shadow:0 8px 20px rgba(0,0,0,0.08);
  white-space:pre-wrap;
  word-break:break-word;
  width:fit-content;
  max-width:100%;
}

.msg.welcome .bubble{
  width:100%;
  padding:12px;
}

.msg.user .bubble{
  background: rgba(255,255,255,0.92);
  color:var(--ink);
  border:1px solid rgba(26,47,74,0.1);
  border-start-end-radius:6px;
}

.msg.bot .bubble{
  background:rgba(54,215,232,0.35);
  border:1px solid rgba(26,47,74,0.1);
  color:var(--ink);
  border-start-start-radius:6px;
}

.meta{
  font-size:11px;
  opacity:.75;
  color:rgba(26,47,74,0.5);
  padding-inline:2px;
}

/* Composer */
.composer{
  display:flex;
  gap:10px;
}

.composer input{
  flex:1;
  height:50px;
  border-radius:999px;
  border:1px solid rgba(26,47,74,0.15);
  background:#ffffff;
  color:var(--ink);
  padding:0 16px;
  outline:none;
  backdrop-filter: blur(10px);
}
.composer input::placeholder{color:rgba(26,47,74,0.45);}

.send{
  height:50px;
  padding:0 22px;
  border:none;
  border-radius:999px;
  cursor:pointer;
  font-weight:900;
  color:var(--ink);
  background:var(--top);
  box-shadow:0 14px 28px rgba(26,47,74,0.1);
  transition:.2s;
}
.send:hover{ transform:translateY(-2px); }

.composer.is-busy .send,
.composer.is-busy input{
  opacity:.72;
  cursor:wait;
}

.composer.is-busy .send:hover{
  transform:none;
}

.chip:disabled{
  opacity:.55;
  cursor:not-allowed;
}

/* Chips — one neat column */
.chips{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:10px;
  width:100%;
}

.chip{
  border:none;
  cursor:pointer;
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  background:rgba(255,255,255,0.78);
  color:var(--ink);
  font-weight:800;
  font-size:12px;
  border:1px solid rgba(26,47,74,0.12);
  text-align:center;
  line-height:1.35;
}
.chip:hover{ background:#ffffff; }

/* Typing bubble */
.typing .bubble{
  min-width:56px;
}

.dots{
  display:flex;
  gap:6px;
  align-items:center;
  justify-content:center;
}
.dots span{
  width:7px;height:7px;border-radius:50%;
  background:rgba(26,47,74,0.35);
  animation:bounce 1s infinite;
}
.dots span:nth-child(2){animation-delay:.15s}
.dots span:nth-child(3){animation-delay:.3s}

@keyframes bounce{
  0%,100%{transform:translateY(0); opacity:.6;}
  50%{transform:translateY(-5px); opacity:1;}
}

@media (max-width: 900px){
  .wrap{padding:16px 5% 22px;}
  .msg{max-width:92%;}
  .btn-primary{display:none;}
}

/* ===== Dark mode ===== */
body.dark-mode{
  background:
    radial-gradient(circle at top right, rgba(34,211,238,0.16), transparent 55%),
    radial-gradient(circle at bottom left, rgba(15,23,42,0.85), #020617);
  color:#e5edf7;
}

body.dark-mode .topbar{
  background:rgba(16,24,37,0.9);
  border-bottom:1px solid rgba(148,163,184,.35);
}

body.dark-mode .btn-primary,
body.dark-mode .send{
  background:linear-gradient(135deg, #22d3ee, #0ea5a2);
  color:#053433;
  box-shadow:0 14px 35px rgba(8,47,73,0.62);
}

body.dark-mode{
  --support-chat-scroll-track:#0b111c;
  --support-chat-scroll-thumb:#3d4f66;
  --support-chat-scroll-thumb-hover:#5a708a;
}

body.dark-mode .chat{
  background:#101825;
  border-color:rgba(148,163,184,.35);
  box-shadow:0 18px 40px rgba(15,23,42,.7);
}


body.dark-mode .msg.user .bubble{
  background:#0b111c;
  color:#e5edf7;
  border:1px solid rgba(148,163,184,.32);
}

body.dark-mode .msg.bot .bubble{
  background:linear-gradient(90deg, rgba(34,211,238,.18), rgba(14,165,162,.18));
  border:1px solid rgba(34,211,238,.28);
  color:#e5edf7;
}

body.dark-mode .meta{
  color:#9ca9bf;
  opacity:1;
}

body.dark-mode .composer input{
  background:#020617;
  border-color:rgba(148,163,184,.35);
  color:#e5edf7;
}

body.dark-mode .composer input::placeholder{
  color:#6b7280;
}

body.dark-mode .chip{
  background:#0b111c;
  color:#e5edf7;
  border-color:rgba(148,163,184,.35);
}

body.dark-mode .chip:hover{
  background:#0f1724;
}