:root{
  --safe-top: env(safe-area-inset-top);
  --safe-bottom: env(safe-area-inset-bottom);
  --bg:#F4F7FF; --card:#FFFFFF; --ink:#1E2440; --muted:#7A82A6;
  --brand:#4C6FFF; --brand-2:#7C9CFF; --green:#3FD07E; --green-press:#33b46b;
  --pink:#FF9EC4; --yellow:#FFC24B; --shadow:0 8px 24px rgba(40,60,120,.12);
  --r-card:20px; --r-btn:14px;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html,body{margin:0; overscroll-behavior-y:none}
body{
  font-family:"IBM Plex Sans Arabic",system-ui,sans-serif;
  background:var(--bg); color:var(--ink);
  min-height:100dvh;
}
button,input,textarea{font-family:inherit}
button{cursor:pointer; touch-action:manipulation}
button:active,.tappable:active{transform:scale(.97); opacity:.92; transition:transform .08s ease}

/* ---------- screens ---------- */
.screen{display:none; flex-direction:column; min-height:100dvh}
.screen.active{display:flex}

.app-header{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:calc(14px + var(--safe-top)) 16px 12px;
  position:sticky; top:0; background:rgba(244,247,255,.85);
  backdrop-filter:saturate(180%) blur(12px); z-index:10;
}
.brand{display:flex; align-items:center; gap:10px}
.brand-dot{width:14px;height:14px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%,#8FB0FF,var(--brand))}
.app-header h1{font-family:"Baloo Bhaijaan 2";font-size:24px;margin:0}
.app-header h2{font-family:"Baloo Bhaijaan 2";font-size:20px;margin:0}
.icon-btn{
  width:44px;height:44px;border:none;border-radius:14px;background:var(--card);
  box-shadow:var(--shadow);font-size:22px;display:grid;place-items:center;color:var(--ink)
}
.chat-header .icon-btn{font-size:30px;font-weight:700;line-height:1}

.scroll-area{flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:8px 16px 24px}
.subtitle{color:var(--muted);font-size:16px;margin:6px 2px 16px}

/* ---------- character grid ---------- */
.char-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.char-card{
  border:none;border-radius:var(--r-card);padding:20px 14px;color:#fff;
  box-shadow:var(--shadow);display:flex;flex-direction:column;align-items:center;
  gap:10px;min-height:150px;justify-content:center;text-align:center
}
.char-emoji{font-size:52px;line-height:1;
  filter:drop-shadow(0 4px 6px rgba(0,0,0,.15))}
.char-name{font-family:"Baloo Bhaijaan 2";font-size:19px;font-weight:700}

/* ---------- chat ---------- */
.chat-title{display:flex;align-items:center;gap:10px}
.chat-emoji{font-size:26px}
#messages{display:flex;flex-direction:column;gap:12px;padding-top:12px}
.bubble{max-width:82%;padding:12px 15px;border-radius:18px;font-size:16px;
  line-height:1.5;box-shadow:var(--shadow);animation:pop .18s ease}
.bubble.child{align-self:flex-start;background:var(--brand);color:#fff;
  border-end-start-radius:6px}
.bubble.bot{align-self:flex-end;background:var(--card);color:var(--ink);
  border-end-end-radius:6px}
.bubble.thinking{opacity:.7;font-style:italic}
@keyframes pop{from{transform:translateY(6px);opacity:0}to{transform:none;opacity:1}}

.mic-bar{
  position:sticky;bottom:0;background:rgba(244,247,255,.92);
  backdrop-filter:blur(12px);padding:10px 16px calc(12px + var(--safe-bottom));
  display:flex;flex-direction:column;align-items:center;gap:10px;
  border-top:1px solid rgba(120,140,200,.12)
}
.status-pill{font-size:14px;color:var(--muted);min-height:18px}
.mic-btn{
  width:82px;height:82px;border:none;border-radius:50%;background:var(--green);
  color:#fff;box-shadow:0 10px 26px rgba(63,208,126,.45);
  display:grid;place-items:center;transition:transform .1s ease,background .2s
}
.mic-btn .mic-icon{font-size:36px}
.mic-btn.recording{background:#FF5A6E;box-shadow:0 10px 26px rgba(255,90,110,.5);
  animation:pulse 1.1s infinite}
@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.06)}100%{transform:scale(1)}}

.text-fallback{display:flex;gap:8px;width:100%;max-width:520px}
.text-fallback input{
  flex:1;height:48px;border:1.5px solid rgba(120,140,200,.25);border-radius:var(--r-btn);
  padding:0 14px;font-size:16px;background:var(--card);color:var(--ink)
}
.send-btn{width:48px;height:48px;border:none;border-radius:var(--r-btn);
  background:var(--brand);color:#fff;font-size:18px}

/* ---------- training ---------- */
.card{background:var(--card);border-radius:var(--r-card);box-shadow:var(--shadow);
  padding:16px;margin-bottom:16px}
.info-card p{margin:0;color:var(--muted);font-size:15px;line-height:1.6}
.field-label{display:block;font-size:14px;color:var(--muted);margin:10px 2px 6px}
.field{width:100%;min-height:48px;border:1.5px solid rgba(120,140,200,.25);
  border-radius:var(--r-btn);padding:12px 14px;font-size:16px;background:#fff;
  color:var(--ink);resize:vertical}
.primary-btn{margin-top:14px;width:100%;min-height:52px;border:none;
  border-radius:var(--r-btn);background:var(--brand);color:#fff;
  font-family:"Baloo Bhaijaan 2";font-size:17px;font-weight:700}
.section-title{font-family:"Baloo Bhaijaan 2";font-size:18px;margin:6px 2px 12px}
.mem-list{display:flex;flex-direction:column;gap:10px}
.mem-item{background:var(--card);border-radius:16px;box-shadow:var(--shadow);
  padding:14px;display:flex;align-items:flex-start;gap:12px}
.mem-item p{margin:0;flex:1;font-size:15px;line-height:1.5}
.mem-del{width:36px;height:36px;border:none;border-radius:10px;
  background:#FFECF0;color:#FF5A6E;font-size:18px;flex-shrink:0}
.empty{color:var(--muted);text-align:center;padding:20px;font-size:15px}