<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --ocean-deep:  #020e1f;
  --ocean-mid:   #041830;
  --ocean-surf:  #062847;
  --ocean-glow:  #0a3d6b;
  --wave:        #0e6ba8;
  --foam:        #38b6ff;
  --foam-light:  #7dd4fc;
  --gold:        #f59e0b;
  --gold-light:  #fcd34d;
  --coral:       #f97316;
  --white:       #f0f8ff;
  --muted:       #7aaac8;
  --card-bg:     rgba(6,40,71,0.88);
  --border:      rgba(56,182,255,0.15);
  --radius:      16px;
  --shadow:      0 8px 32px rgba(0,0,0,0.4);
}
body {
  font-family: 'DM Sans', sans-serif;
  background: var(--ocean-deep);
  color: var(--white);
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem; overflow: hidden;
}
body::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse 80% 50% at 20% 80%, rgba(14,107,168,0.3) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 20%, rgba(6,40,71,0.5) 0%, transparent 50%);
}
.bubbles { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.bubble {
  position: absolute; bottom: -60px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(56,182,255,0.35), rgba(56,182,255,0.04));
  border: 1px solid rgba(56,182,255,0.18);
  animation: rise linear infinite;
}
.bubble:nth-child(1){width:8px;height:8px;left:10%;animation-duration:8s;animation-delay:0s}
.bubble:nth-child(2){width:14px;height:14px;left:25%;animation-duration:11s;animation-delay:2s}
.bubble:nth-child(3){width:6px;height:6px;left:40%;animation-duration:7s;animation-delay:4s}
.bubble:nth-child(4){width:18px;height:18px;left:55%;animation-duration:13s;animation-delay:1s}
.bubble:nth-child(5){width:10px;height:10px;left:70%;animation-duration:9s;animation-delay:3s}
.bubble:nth-child(6){width:5px;height:5px;left:85%;animation-duration:6s;animation-delay:5s}
.bubble:nth-child(7){width:12px;height:12px;left:15%;animation-duration:10s;animation-delay:7s}
@keyframes rise {
  0%{transform:translateY(0) scale(1);opacity:0}
  10%{opacity:1} 90%{opacity:.5}
  100%{transform:translateY(-110vh) translateX(15px) scale(1.1);opacity:0}
}
.chatbot-container {
  position: relative; z-index: 1;
  width: 100%; max-width: 820px;
  height: 92vh; max-height: 800px;
  display: flex; flex-direction: column;
  background: var(--card-bg);
  backdrop-filter: blur(22px);
  border: 1px solid var(--border);
  border-radius: 24px;
  box-shadow: var(--shadow), 0 0 60px rgba(56,182,255,0.07);
  overflow: hidden;
}
/* ── Header ── */
.chat-header {
  padding: 1rem 1.4rem; flex-shrink: 0;
  background: linear-gradient(135deg, var(--ocean-surf), var(--ocean-glow));
  border-bottom: 1px solid var(--border);
}
.header-row1 { display: flex; align-items: center; gap: .9rem; margin-bottom: .6rem; }
.header-avatar {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--foam), var(--wave));
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; box-shadow: 0 0 20px rgba(56,182,255,0.4);
  animation: pulse-glow 3s ease-in-out infinite;
}
@keyframes pulse-glow{0%,100%{box-shadow:0 0 20px rgba(56,182,255,0.4)}50%{box-shadow:0 0 35px rgba(56,182,255,0.7)}}
.header-name { font-family:'Syne',sans-serif; font-size:1rem; font-weight:700; color:var(--white); }
.header-sub  { font-size:.7rem; color:var(--foam-light); margin-top:1px; display:flex; align-items:center; gap:.35rem; }
.status-dot  { width:6px; height:6px; border-radius:50%; background:#4ade80; animation:blink 2s infinite; }
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
.offline-badge {
  margin-left:auto; padding:.2rem .6rem; border-radius:20px;
  background:rgba(74,222,128,.12); border:1px solid rgba(74,222,128,.25);
  color:#4ade80; font-size:.65rem; font-weight:700; letter-spacing:.05em;
}
.header-row2 { display: flex; gap: .4rem; flex-wrap: wrap; }
.tab-btn {
  padding:.3rem .75rem; border-radius:20px; border:1px solid var(--border);
  background:transparent; color:var(--muted); font-size:.72rem;
  font-family:'DM Sans',sans-serif; cursor:pointer; transition:all .18s;
}
.tab-btn:hover,.tab-btn.active{background:var(--foam);color:var(--ocean-deep);border-color:var(--foam);font-weight:600}
.score-pill {
  margin-left:auto; padding:.3rem .75rem; border-radius:20px;
  background:rgba(245,158,11,.12); border:1px solid rgba(245,158,11,.25);
  color:var(--gold-light); font-size:.72rem; font-weight:700;
  display:flex; align-items:center; gap:.3rem;
}
/* ── Messages ── */
.chat-messages {
  flex:1; overflow-y:auto; padding:1.1rem;
  display:flex; flex-direction:column; gap:.9rem;
  scroll-behavior:smooth;
}
.chat-messages::-webkit-scrollbar{width:4px}
.chat-messages::-webkit-scrollbar-thumb{background:var(--ocean-glow);border-radius:4px}
.msg { display:flex; gap:.65rem; animation:msgIn .28s ease; }
@keyframes msgIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.msg.user { flex-direction:row-reverse; }
.msg-avatar {
  width:30px; height:30px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:.95rem; margin-top:2px;
}
.msg.bot  .msg-avatar { background:linear-gradient(135deg,var(--wave),var(--foam)); }
.msg.user .msg-avatar { background:linear-gradient(135deg,var(--gold),var(--coral)); }
.msg-content { max-width:80%; display:flex; flex-direction:column; gap:.3rem; }
.msg.user .msg-content { align-items:flex-end; }
.msg-bubble {
  padding:.75rem 1rem; border-radius:var(--radius);
  font-size:.86rem; line-height:1.65;
}
.msg.bot  .msg-bubble { background:var(--ocean-surf); border:1px solid var(--border); border-bottom-left-radius:4px; }
.msg.user .msg-bubble { background:linear-gradient(135deg,var(--wave),var(--ocean-glow)); border-bottom-right-radius:4px; }
.msg-time { font-size:.62rem; color:var(--muted); padding:0 .2rem; }
/* ── Cards ── */
.bilingual-card {
  background:linear-gradient(135deg,rgba(14,107,168,.25),rgba(6,40,71,.5));
  border:1px solid rgba(56,182,255,.22); border-radius:10px;
  padding:.8rem .9rem; margin-top:.35rem;
}
.lang-row { display:flex; align-items:flex-start; justify-content:space-between; gap:.65rem; padding:.4rem 0; }
.lang-row+.lang-row { border-top:1px solid var(--border); }
.lang-badge { font-family:'Syne',sans-serif; font-size:.6rem; font-weight:700; letter-spacing:.07em; padding:2px 7px; border-radius:20px; flex-shrink:0; margin-top:2px; }
.lang-badge.en { background:rgba(56,182,255,.18); color:var(--foam); border:1px solid rgba(56,182,255,.28); }
.lang-badge.id { background:rgba(245,158,11,.18); color:var(--gold-light); border:1px solid rgba(245,158,11,.28); }
.lang-text { flex:1; font-size:.86rem; line-height:1.5; }
.lang-text.en { color:var(--foam-light); }
.lang-text.id { color:var(--gold-light); }
.phoneme-tag { font-size:.68rem; color:var(--muted); font-style:italic; margin-left:.35rem; }
.tts-btn {
  flex-shrink:0; width:26px; height:26px; border-radius:50%;
  border:1px solid var(--border); background:rgba(56,182,255,.08);
  color:var(--foam); cursor:pointer; display:flex; align-items:center; justify-content:center;
  font-size:.75rem; transition:all .18s;
}
.tts-btn:hover { background:var(--foam); color:var(--ocean-deep); }
.card-footer { font-size:.68rem; color:var(--muted); margin-top:.4rem; }
/* Quiz */
.quiz-card {
  background:linear-gradient(135deg,rgba(245,158,11,.09),rgba(6,40,71,.55));
  border:1px solid rgba(245,158,11,.22); border-radius:10px;
  padding:.9rem; margin-top:.35rem;
}
.quiz-question { font-family:'Syne',sans-serif; font-size:.88rem; font-weight:600; color:var(--gold-light); margin-bottom:.7rem; }
.quiz-options { display:flex; flex-direction:column; gap:.45rem; }
.quiz-opt {
  padding:.55rem .85rem; border-radius:8px; border:1px solid rgba(56,182,255,.18);
  background:rgba(6,40,71,.5); color:var(--white); font-size:.8rem;
  cursor:pointer; transition:all .18s; text-align:left; font-family:'DM Sans',sans-serif;
}
.quiz-opt:hover:not(:disabled) { border-color:var(--foam); background:rgba(56,182,255,.1); }
.quiz-opt.correct { border-color:#4ade80; background:rgba(74,222,128,.15); color:#4ade80; }
.quiz-opt.wrong   { border-color:#f87171; background:rgba(248,113,113,.15); color:#f87171; }
.quiz-score { margin-top:.55rem; font-size:.75rem; color:var(--muted); text-align:right; }
/* Phrase grid */
.phrase-chips { display:flex; flex-wrap:wrap; gap:.35rem; margin-top:.5rem; }
.phrase-chip {
  padding:.28rem .65rem; border-radius:20px; border:1px solid var(--border);
  background:rgba(14,107,168,.18); color:var(--foam-light); font-size:.72rem;
  cursor:pointer; transition:all .16s;
}
.phrase-chip:hover { background:var(--foam); color:var(--ocean-deep); border-color:var(--foam); }
/* Category chips */
.cat-chips { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.5rem; }
.cat-chip {
  padding:.35rem .8rem; border-radius:8px; border:1px solid var(--border);
  background:rgba(14,107,168,.15); color:var(--foam-light); font-size:.76rem;
  cursor:pointer; transition:all .16s; display:flex; align-items:center; gap:.3rem;
}
.cat-chip:hover { background:var(--foam); color:var(--ocean-deep); border-color:var(--foam); font-weight:600; }
/* Section label */
.section-label {
  font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); margin:.2rem 0 .5rem; padding-bottom:.3rem;
  border-bottom:1px solid var(--border);
}
/* Typing */
.typing-indicator {
  display:flex; gap:5px; align-items:center; padding:.7rem .9rem;
  background:var(--ocean-surf); border:1px solid var(--border);
  border-radius:var(--radius); border-bottom-left-radius:4px; width:fit-content;
}
.typing-dot {
  width:5px; height:5px; border-radius:50%; background:var(--foam);
  animation:typing 1.2s ease-in-out infinite;
}
.typing-dot:nth-child(2){animation-delay:.2s}
.typing-dot:nth-child(3){animation-delay:.4s}
@keyframes typing{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-5px)}}
/* Quick replies */
.quick-replies {
  padding:.65rem 1.1rem; display:flex; gap:.4rem; flex-wrap:wrap;
  border-top:1px solid var(--border); background:rgba(2,14,31,.5); flex-shrink:0;
}
.quick-reply {
  padding:.32rem .75rem; border-radius:20px; border:1px solid var(--border);
  background:rgba(14,107,168,.14); color:var(--foam-light); font-size:.72rem;
  cursor:pointer; transition:all .18s; font-family:'DM Sans',sans-serif; white-space:nowrap;
}
.quick-reply:hover { background:var(--foam); color:var(--ocean-deep); border-color:var(--foam); font-weight:600; }
/* Input */
.chat-input-bar {
  padding:.8rem 1rem; background:var(--ocean-mid);
  border-top:1px solid var(--border);
  display:flex; gap:.55rem; align-items:flex-end; flex-shrink:0;
}
.chat-input {
  flex:1; background:var(--ocean-surf); border:1px solid var(--border);
  border-radius:12px; color:var(--white); font-family:'DM Sans',sans-serif;
  font-size:.86rem; padding:.6rem .9rem; resize:none;
  min-height:40px; max-height:96px; line-height:1.5; outline:none; transition:border-color .2s;
}
.chat-input::placeholder { color:var(--muted); }
.chat-input:focus { border-color:var(--foam); }
.send-btn {
  width:40px; height:40px; border-radius:12px;
  background:linear-gradient(135deg,var(--foam),var(--wave));
  border:none; color:var(--ocean-deep); cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:.95rem;
  flex-shrink:0; transition:all .18s; box-shadow:0 4px 14px rgba(56,182,255,.28);
}
.send-btn:hover { transform:scale(1.07); box-shadow:0 6px 18px rgba(56,182,255,.45); }
.mic-btn {
  width:40px; height:40px; border-radius:12px;
  background:rgba(14,107,168,.28); border:1px solid var(--border);
  color:var(--foam); cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:.95rem;
  flex-shrink:0; transition:all .18s;
}
.mic-btn:hover { background:rgba(56,182,255,.2); }
.mic-btn.recording { background:rgba(248,113,113,.28); border-color:#f87171; color:#f87171; }
@media(max-width:600px){
  body{padding:0}
  .chatbot-container{height:100vh;max-height:none;border-radius:0}
  .msg-content{max-width:88%}
}
</style>