/* Echo — design system. Dark midnight-navy sanctuary, iridescent presence. */
:root{
  --bg:#0A0C16; --surface:#141726; --overlay:#1C2033;
  --border:rgba(255,255,255,.07); --border-2:rgba(255,255,255,.12);
  --ink:#F3F5FC; --dim:#A7ADC7; --faint:#656B85;
  --blue:#4C86FF; --purple:#9E63FF; --cyan:#34E6D8;
  --success:#35DDA0; --energy:#FF9D54; --warning:#F6C453; --danger:#FF6472;
  --grad:linear-gradient(120deg,var(--blue),var(--purple) 55%,var(--cyan));
  --grad-soft:linear-gradient(120deg,rgba(76,134,255,.16),rgba(158,99,255,.14),rgba(52,230,216,.12));
  --font:-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',Roboto,system-ui,sans-serif;
  --r:18px; --r-lg:24px; --ease:cubic-bezier(.22,1,.36,1);
  --tabs-h:calc(66px + env(safe-area-inset-bottom));
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{
  font-family:var(--font);color:var(--ink);background:var(--bg);
  overscroll-behavior:none;-webkit-font-smoothing:antialiased;
}
.numeric{font-variant-numeric:tabular-nums}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,textarea{font-family:inherit}

/* ambient drifting orb */
.orb{position:fixed;inset:-20% -10% auto -10%;height:60vh;z-index:0;pointer-events:none;
  background:radial-gradient(50% 50% at 70% 20%,rgba(158,99,255,.28),transparent 60%),
             radial-gradient(45% 45% at 20% 30%,rgba(76,134,255,.22),transparent 60%),
             radial-gradient(40% 40% at 60% 60%,rgba(52,230,216,.12),transparent 60%);
  filter:blur(20px);animation:drift 26s var(--ease) infinite alternate}
@keyframes drift{from{transform:translate(-4%,-3%) scale(1)}to{transform:translate(5%,4%) scale(1.12)}}

.app{position:relative;z-index:1;min-height:100dvh;display:flex;flex-direction:column;
  max-width:520px;margin:0 auto;padding:env(safe-area-inset-top) 0 0}
.screen{flex:1;display:none;flex-direction:column;padding:14px 18px calc(var(--tabs-h) + 24px)}
.screen.active{display:flex;animation:fade .28s var(--ease)}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.hidden{display:none !important}

/* ---------- brand ---------- */
.wordmark{font-weight:600;letter-spacing:-.03em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.eyebrow{font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--faint)}

/* ---------- lock ---------- */
#lock{position:fixed;inset:0;z-index:20;display:none;flex-direction:column;align-items:center;justify-content:center;
  gap:18px;padding:32px;background:var(--bg)}
#lock.active{display:flex}
#lock .mark{width:72px;height:72px;animation:breathe 3.4s var(--ease) infinite}
#lock h1{font-size:2rem;margin:6px 0 0}
#lock p{color:var(--dim);font-size:.9375rem;margin:0;text-align:center}
#lock .field{width:100%;max-width:320px;display:flex;flex-direction:column;gap:10px}
#lock input{background:var(--surface);border:1px solid var(--border-2);color:var(--ink);
  border-radius:14px;padding:15px 16px;font-size:1.0625rem;text-align:center;letter-spacing:.05em}
#lock input:focus{outline:none;border-color:var(--purple)}
.btn-grad{background:var(--grad);color:#fff;font-weight:600;font-size:1.0625rem;border-radius:14px;padding:15px;width:100%;
  transition:transform .15s var(--ease),filter .15s}
.btn-grad:active{transform:scale(.98);filter:brightness(1.08)}
.shake{animation:shake .4s}
@keyframes shake{0%,100%{transform:none}20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
.lock-note{color:var(--faint);font-size:.8125rem;max-width:320px;text-align:center}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}

/* ---------- header ---------- */
.hdr{display:flex;align-items:center;gap:10px;padding:8px 2px 12px}
.hdr .mark{width:30px;height:30px}
.hdr .pill{margin-left:auto;display:inline-flex;align-items:center;gap:6px;background:var(--surface);
  border:1px solid var(--border);border-radius:999px;padding:6px 12px;font-size:.8125rem;color:var(--dim)}
.flame{color:var(--energy)}
.icon-btn{width:38px;height:38px;border-radius:12px;background:var(--surface);border:1px solid var(--border);
  color:var(--dim);display:grid;place-items:center;font-size:16px}

/* ---------- home ---------- */
.greeting{font-size:2rem;font-weight:600;letter-spacing:-.02em;line-height:1.1;margin:6px 0 2px}
.subline{color:var(--dim);font-size:.9375rem;margin:0 0 16px}
.moods{display:flex;gap:8px;overflow-x:auto;padding:2px 0 14px;scrollbar-width:none}
.moods::-webkit-scrollbar{display:none}
.mood{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:5px;padding:8px 4px;min-width:60px;
  border-radius:14px;border:1px solid transparent;background:var(--surface);transition:.18s var(--ease)}
.mood .em{font-size:20px}.mood span{font-size:.6875rem;color:var(--dim)}
.mood.on{border-color:var(--purple);background:rgba(158,99,255,.12)}
.mood.on span{color:var(--ink)}

.hero{position:relative;border-radius:var(--r-lg);padding:1px;background:var(--grad);margin:2px 0 16px}
.hero-in{background:var(--surface);border-radius:calc(var(--r-lg) - 1px);padding:18px}
.hero .eyebrow{color:#c7b8ff}
.hero h3{font-size:1.375rem;margin:6px 0 4px;letter-spacing:-.01em}
.hero p{color:var(--dim);font-size:.9375rem;margin:0 0 14px;line-height:1.45}
.hero-row{display:flex;align-items:center;gap:12px}
.wave-mini{display:flex;gap:3px;align-items:flex-end;height:22px;flex:1}
.wave-mini i{width:3px;border-radius:2px;background:var(--grad);opacity:.7}
.hero-go{background:var(--grad);color:#fff;font-weight:600;border-radius:12px;padding:11px 18px;font-size:.9375rem;white-space:nowrap}

.stat-row{display:flex;gap:10px;margin-bottom:16px}
.stat{flex:1;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:14px}
.stat .lbl{font-size:.75rem;color:var(--faint);text-transform:uppercase;letter-spacing:.05em}
.stat .big{font-size:1.75rem;font-weight:700;line-height:1.1;margin-top:4px}
.stat.streak .big{color:var(--energy)}
.ring-wrap{display:flex;align-items:center;gap:12px}
.ring{--p:0;width:56px;height:56px;flex:0 0 auto;border-radius:50%;
  background:radial-gradient(closest-side,var(--surface) 70%,transparent 72% 100%),
  conic-gradient(var(--purple) calc(var(--p)*1%),rgba(255,255,255,.08) 0)}
.ring .rc{position:relative;width:56px;height:56px;display:grid;place-items:center;font-size:.8125rem;font-weight:700}

.cta{display:flex;align-items:center;justify-content:center;gap:10px;background:var(--grad);color:#fff;font-weight:600;
  font-size:1.0625rem;border-radius:16px;padding:16px;margin-bottom:22px;transition:transform .15s var(--ease)}
.cta:active{transform:scale(.99)}
.cta svg{width:22px;height:22px}

.moments-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mcard{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:14px;display:flex;flex-direction:column;gap:6px;
  transition:.18s var(--ease);text-align:left}
.mcard:active{transform:scale(.98)}
.mcard .em{font-size:22px}
.mcard .t{font-weight:600;font-size:.9375rem}
.mcard .d{font-size:.75rem;color:var(--faint);line-height:1.35}
.mcard.prio{background:var(--grad-soft);border-color:rgba(158,99,255,.35)}
.mcard.prio .tag{font-size:.625rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--energy)}

/* ---------- companion ---------- */
#companion{padding:0 0 var(--tabs-h)}
.conv-top{display:flex;align-items:center;gap:10px;padding:12px 18px;border-bottom:1px solid var(--border);position:sticky;top:0;
  background:rgba(10,12,22,.85);backdrop-filter:blur(12px);z-index:5}
.conv-top .pair{margin:0 auto;display:inline-flex;align-items:center;gap:8px;font-size:.8125rem;color:var(--dim);
  background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:6px 12px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--faint);transition:.2s}
.dot.listening{background:var(--danger);box-shadow:0 0 0 0 rgba(255,100,114,.5);animation:dotpulse 1.2s infinite}
.dot.thinking{background:var(--warning)}
.dot.speaking{background:var(--cyan)}
@keyframes dotpulse{to{box-shadow:0 0 0 7px rgba(255,100,114,0)}}
.stream{flex:1;overflow-y:auto;padding:18px 18px 8px;display:flex;flex-direction:column;gap:14px}
.msg{max-width:82%;animation:rise .26s var(--ease)}
@keyframes rise{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
.msg.echo{align-self:flex-start;display:flex;gap:9px}
.msg.me{align-self:flex-end}
.av{width:26px;height:26px;flex:0 0 auto;border-radius:50%;background:var(--grad);margin-top:2px}
.bub{padding:12px 15px;border-radius:16px;font-size:1rem;line-height:1.5}
.msg.echo .bub{background:var(--surface);border:1px solid var(--border);border-bottom-left-radius:5px;font-weight:500}
.msg.me .bub{background:var(--grad);color:#fff;border-bottom-right-radius:5px}
.msg.me.interim .bub{opacity:.55;background:var(--overlay);color:var(--dim)}
.speakback{font-size:.75rem;color:var(--faint);margin:4px 0 0 35px}
.correction{align-self:flex-start;max-width:82%;background:rgba(53,221,160,.08);border:1px solid rgba(53,221,160,.24);
  border-radius:14px;padding:11px 14px;font-size:.875rem;line-height:1.5;animation:rise .26s var(--ease);margin-left:35px}
.correction .lbl{color:var(--success);font-weight:600;font-size:.6875rem;text-transform:uppercase;letter-spacing:.06em;display:block;margin-bottom:5px}
.correction .was{color:var(--faint);text-decoration:line-through}
.correction .now{color:#9ff0cf}
.correction .why{color:var(--dim);font-style:italic;margin-top:5px}
.vocab{align-self:flex-start;margin-left:35px;display:inline-flex;gap:7px;align-items:center;background:rgba(158,99,255,.14);
  border:1px solid rgba(158,99,255,.34);border-radius:999px;padding:6px 13px;font-size:.8125rem;color:#cabfff;animation:rise .26s var(--ease)}
.vocab b{color:#fff}
.typing{display:inline-flex;gap:4px;padding:4px 2px}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--faint);animation:blink 1.2s infinite}
.typing i:nth-child(2){animation-delay:.2s}.typing i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,60%,100%{opacity:.25}30%{opacity:1}}

.conv-empty{margin:auto;text-align:center;color:var(--dim);padding:40px 24px;max-width:340px}
.conv-empty .mark{width:56px;height:56px;margin:0 auto 14px}
.conv-empty h3{color:var(--ink);margin:0 0 8px}
.conv-empty p{font-size:.9375rem;line-height:1.5;margin:0}

.dock{padding:12px 18px 14px;border-top:1px solid var(--border);
  background:rgba(10,12,22,.9);backdrop-filter:blur(12px)}
.dock-status{height:18px;text-align:center;font-size:.8125rem;color:var(--faint);margin-bottom:8px;transition:.2s}
.dock-status.live{color:#cabfff}
.dock-row{display:flex;align-items:center;gap:12px}
.dock-ghost{background:var(--surface);border:1px solid var(--border);color:var(--dim);border-radius:12px;padding:10px 12px;font-size:.8125rem;white-space:nowrap}
.dock-in{flex:1;background:var(--surface);border:1px solid var(--border);color:var(--ink);border-radius:14px;padding:12px 14px;font-size:.9375rem;min-width:0}
.dock-in:focus{outline:none;border-color:var(--purple)}
.mic{width:60px;height:60px;flex:0 0 auto;border-radius:50%;background:var(--grad);display:grid;place-items:center;position:relative;
  transition:transform .15s var(--ease)}
.mic:active{transform:scale(1.06)}
.mic svg{width:26px;height:26px}
.mic.listening{background:linear-gradient(135deg,var(--danger),var(--purple))}
.mic.listening::before{content:"";position:absolute;inset:-7px;border-radius:50%;border:2px solid var(--danger);animation:mpulse 1.3s infinite}
.mic.thinking{background:linear-gradient(135deg,var(--warning),var(--purple));opacity:.9}
.mic.speaking{background:linear-gradient(135deg,var(--cyan),var(--blue))}
@keyframes mpulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.45);opacity:0}}
.mic .bars{display:none;gap:3px;align-items:center;height:26px}
.mic .bars i{width:3px;height:8px;background:#fff;border-radius:2px}
.mic.listening .bars{display:flex}.mic.listening .micglyph{display:none}
.mic.listening .bars i{animation:wv .8s infinite ease-in-out}
.mic.listening .bars i:nth-child(2){animation-delay:.1s}.mic.listening .bars i:nth-child(3){animation-delay:.2s}
.mic.listening .bars i:nth-child(4){animation-delay:.3s}.mic.listening .bars i:nth-child(5){animation-delay:.15s}
@keyframes wv{0%,100%{height:8px}50%{height:22px}}

/* ---------- profile ---------- */
.prof-head{display:flex;align-items:center;gap:14px;margin:6px 0 18px}
.prof-av{width:56px;height:56px;border-radius:50%;background:var(--grad);flex:0 0 auto}
.prof-head h2{margin:0;font-size:1.25rem}
.prof-head .meta{color:var(--dim);font-size:.875rem}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:18px}
.tile{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:13px}
.tile .lbl{font-size:.7rem;color:var(--faint);text-transform:uppercase;letter-spacing:.05em}
.tile .v{font-size:1.5rem;font-weight:700;margin-top:3px}
.tile.xp .v{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.tile.min .v{color:var(--cyan)}.tile.st .v{color:var(--energy)}
.sec{margin:6px 0 18px}
.sec > .eyebrow{margin-bottom:10px;display:block}
.exp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:9px}
.exp{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:11px;text-align:center;font-size:.75rem;color:var(--dim)}
.exp .em{font-size:20px;display:block;margin-bottom:4px}
.exp.locked{opacity:.4}
.exp.done{border-color:rgba(53,221,160,.35)}
.exp.done .em::after{content:" ✓";color:var(--success)}
#memList{display:flex;flex-direction:column;gap:8px}
.memrow{display:flex;gap:8px;align-items:flex-start;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:10px 12px}
.memrow textarea{flex:1;background:none;border:none;color:var(--ink);font-size:.875rem;resize:vertical;min-height:20px;line-height:1.5}
.memrow textarea:focus{outline:none}
.memrow button{color:var(--faint);font-size:14px}
.setrow{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:12px 14px;margin-bottom:8px}
.setrow label{flex:1;font-size:.9375rem}
.setrow small{display:block;color:var(--faint);font-size:.75rem;margin-top:2px}
.setrow select,.setrow input[type=number]{background:var(--overlay);border:1px solid var(--border-2);color:var(--ink);border-radius:10px;padding:8px 10px;font-size:.875rem}
.switch{width:46px;height:28px;border-radius:999px;background:var(--overlay);border:1px solid var(--border-2);position:relative;transition:.2s}
.switch::after{content:"";position:absolute;top:2px;left:2px;width:22px;height:22px;border-radius:50%;background:#fff;transition:.2s var(--ease)}
.switch.on{background:var(--purple)}.switch.on::after{left:20px}
.soon{opacity:.5}
.soon .tag{font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--faint);border:1px solid var(--border-2);border-radius:6px;padding:2px 6px;margin-left:auto}
.btn-outline{width:100%;background:var(--surface);border:1px solid var(--border-2);color:var(--ink);border-radius:12px;padding:13px;font-size:.9375rem;margin-top:6px}
.btn-danger{color:var(--danger);border-color:rgba(255,100,114,.3)}

/* ---------- tabs ---------- */
.tabs{position:fixed;bottom:0;left:0;right:0;z-index:10;display:flex;justify-content:space-around;
  max-width:520px;margin:0 auto;padding:8px 8px calc(8px + env(safe-area-inset-bottom));
  background:rgba(10,12,22,.92);backdrop-filter:blur(14px);border-top:1px solid var(--border)}
.tab{display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 16px;color:var(--faint);font-size:.6875rem}
.tab svg{width:24px;height:24px}
.tab.on{color:var(--ink)}
.tab.on svg [fill]{fill:url(#tabgrad)}
.tab.on svg [stroke]{stroke:url(#tabgrad)}

/* sheet */
.sheet-bg{position:fixed;inset:0;z-index:30;background:rgba(5,7,16,.7);backdrop-filter:blur(6px);display:none;align-items:flex-end}
.sheet-bg.show{display:flex}
.sheet{background:var(--overlay);border-top-left-radius:24px;border-top-right-radius:24px;width:100%;max-width:520px;margin:0 auto;
  padding:22px 20px calc(22px + env(safe-area-inset-bottom));animation:up .3s var(--ease)}
@keyframes up{from{transform:translateY(100%)}to{transform:none}}
.sheet h4{margin:0 0 4px;font-size:1.125rem}
.sheet .src{color:var(--dim);font-size:.875rem;margin:0 0 12px}
.sheet .res{background:var(--surface);border:1px solid var(--border-2);border-radius:14px;padding:14px;font-size:1.0625rem;line-height:1.5}
.sheet .res .en{color:var(--ink);font-weight:500}
.sheet .res .note{color:var(--dim);font-size:.875rem;margin-top:8px}
.sheet-row{display:flex;gap:10px;margin-top:14px}
.sheet-row button{flex:1;border-radius:12px;padding:12px;font-size:.9375rem}

@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms !important;animation-iteration-count:1 !important}}