:root{--bg:#0b111a;--card:#121a2a;--text:#e8f5f2;--muted:#a9b7b5;--primary:#37ffd2;--primary-2:#7aa2ff;--radius:16px}
*{box-sizing:border-box}html,body{margin:0;padding:0;background:linear-gradient(180deg,#0b111a,#0f1522);color:var(--text);font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif}
.container{max-width:980px;margin:0 auto;padding:16px}
.topbar{
  position: fixed;
  top: env(safe-area-inset-top, 0);
  left: 0; right: 0;
  height: 56px;
  z-index: 1000;
  background: rgba(16,24,38,.94);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 14px}
.brand{display:flex;align-items:center;gap:10px;font-weight:900;color:var(--primary)}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:12px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12)}
.card{background:var(--card);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius);box-shadow:0 10px 28px rgba(0,0,0,.28);padding:14px}
.h1{font-size:clamp(1.6rem, 2vw + 1rem, 2.2rem);line-height:1.2;margin:6px 0 8px;font-weight:900}
.p{color:var(--muted);margin:8px 0 14px}
.btn{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(90deg,var(--primary),var(--primary-2));color:#04201e;padding:12px 16px;border-radius:14px;border:none;font-weight:800;box-shadow:0 8px 22px rgba(55,255,210,.15)}
.media{overflow:hidden;border-radius:14px;border:1px solid rgba(255,255,255,.1);background:linear-gradient(180deg,rgba(122,162,255,.10),rgba(55,255,210,.10))}
.media img{display:block;width:100%;height:auto}
.grid{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:900px){.grid{grid-template-columns:1fr 1fr}}
.navbar{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: calc(64px + env(safe-area-inset-bottom, 0));
  background: rgba(16,24,38,.96);
  border-top: 1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  z-index: 1000;
}
.navbar-inner{
  display:grid;grid-template-columns:repeat(5,1fr);gap:6px;
  padding: 8px max(12px, env(safe-area-inset-right, 0)) 8px max(12px, env(safe-area-inset-left, 0));
  max-width:980px;margin:0 auto;
}
.nav-btn{display:flex;flex-direction:column;align-items:center;font-size:.85rem;color:#a9b7b5}
.input{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:10px}
.input input{flex:1;background:transparent;border:0;color:var(--text);outline:none}
.list{display:grid;gap:10px}
.list-item{display:flex;gap:12px;align-items:center;padding:12px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05)}
.tag{padding:2px 8px;border-radius:999px;background:rgba(55,255,210,.14);color:#37ffd2}
.footer-note{color:#a9b7b5;font-size:.9rem;margin:12px 0}

/* Content safe padding so bars don't overlap */
body{ 
  padding-top: calc(56px + env(safe-area-inset-top, 0));
  padding-bottom: calc(72px + env(safe-area-inset-bottom, 0));
}

@media(max-width:600px){
  .container{padding:12px;}
  .btn{padding:10px 14px;font-size:.95rem;}
  .navbar-inner span{display:none;}
}

/* Greeting */
.greet-card{ padding:16px 16px 18px }
.greet-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px }
.greet-top .hi{ font-size:clamp(1.2rem,1vw+1rem,1.5rem); font-weight:800 }
.greet-top .how{ color:var(--muted); margin-top:2px }
.lang-pill{ background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12);
  padding:6px 10px; border-radius:999px; color:#a9b7b5; font-weight:700 }

/* Mic CTA */
.mic-wrap{ margin-top:14px; display:grid; justify-items:center; gap:8px }
.mic-cta{ position:relative; width:92px; height:92px; border-radius:999px; border:0;
  background:linear-gradient(180deg,var(--primary),var(--primary-2));
  color:#04151a; font-size:32px; display:grid; place-items:center; box-shadow:0 14px 40px rgba(55,255,210,.2) }
.mic-cta:active{ transform:scale(.98) }
.mic-emoji{ position:relative; z-index:2 }
.pulse, .pulse.second{ position:absolute; inset:-12px; border-radius:999px; border:2px solid rgba(55,255,210,.35); }
.pulse{ animation:pulse 2.4s infinite }
.pulse.second{ animation:pulse 2.4s 1.2s infinite }
@keyframes pulse{ 0%{ transform:scale(1); opacity:.6 } 100%{ transform:scale(1.25); opacity:0 } }
.mic-help{ color:var(--muted); font-size:.95rem }
.ai-reply{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:6px }
.tts-btn{ padding:8px 12px }

/* Family feed */
.family-feed{ padding:14px }
.feed-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:8px }
.feed-head .title{ font-weight:800 }
.see-all{ color:var(--primary) }
.thumb-row{ display:flex; gap:12px; overflow-x:auto; padding:6px 2px; scroll-snap-type:x mandatory }
.thumb-row::-webkit-scrollbar{ height:6px } .thumb-row::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.15); border-radius:999px }
.thumb{ min-width:180px; scroll-snap-align:start; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  border-radius:14px; padding:10px; display:grid; gap:4px }
.avatar{ font-size:28px }
.name{ font-weight:800 }
.snippet{ color:#a9b7b5; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:180px }

@media(min-width:720px){
  .thumb-row{ display:none }
  .thumb-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px }
}
@media(max-width:719px){
  .thumb-grid{ display:none }
}

/* ---- Cards + glass gloss ---- */
.glossy{ position:relative; overflow:hidden }
.glossy::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(1200px 600px at -10% -20%, rgba(122,162,255,.14), transparent 60%),
             radial-gradient(900px 500px at 110% 0%, rgba(55,255,210,.12), transparent 55%);
  pointer-events:none;
}

/* ---- Greeting ---- */
.greet-card{ padding:16px }
.greet-stack{ display:grid; grid-template-columns:1fr auto; gap:14px; align-items:center }
@media(max-width:720px){ .greet-stack{ grid-template-columns:1fr; } }
.hi{ margin:0 0 2px 0; font-size:clamp(1.2rem,1.2vw+1rem,1.8rem); font-weight:900 }
.how{ margin:.2rem 0 .6rem; color:var(--muted) }
.lang-pill{ display:inline-flex; gap:8px; padding:6px 10px; border-radius:999px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); color:#a9b7b5; font-weight:700 }

.mic-col{ display:grid; justify-items:center; gap:8px }
.mic-cta{
  position:relative; width:104px; height:104px; border-radius:999px; border:0;
  background:linear-gradient(180deg,var(--primary),var(--primary-2)); color:#04151a;
  display:grid; place-items:center; font-size:36px; box-shadow:0 20px 50px rgba(55,255,210,.22);
}
.mic-cta:active{ transform:scale(.98) }
.ripple{
  position:absolute; inset:-14px; border-radius:999px; border:2px solid rgba(55,255,210,.35);
  animation:pop 2.6s infinite; pointer-events:none;
}
.r2{ animation-delay:1.3s }
@keyframes pop{ 0%{transform:scale(1);opacity:.55} 100%{transform:scale(1.3);opacity:0} }
.mic-help{ color:var(--muted); font-size:.95rem }
.tts-row{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center }
.tts-chip{
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14);
  color:var(--text); border-radius:999px; padding:8px 12px; font-weight:700;
}
.btn.ghost{
  background:transparent; color:var(--text); border:1px solid rgba(255,255,255,.18);
}

/* ---- Family feed ---- */
.feed-card{ padding:14px }
.feed-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px }
.see-all{ color:var(--primary) }

.thumb-row{
  display:flex; gap:14px; overflow-x:auto; padding:6px 2px;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
}
.thumb-row::-webkit-scrollbar{ height:6px } 
.thumb-row::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.15); border-radius:999px }

.thumb{
  position:relative; min-width:210px; height:140px; border-radius:16px; overflow:hidden;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  scroll-snap-align:start; display:block; color:inherit;
}
.thumb img{ width:100%; height:100%; object-fit:cover; display:block; filter:saturate(1.05) }
.thumb .overlay{
  position:absolute; inset:auto 0 0 0; padding:10px 12px;
  background:linear-gradient(180deg, transparent, rgba(0,0,0,.55));
  color:#fff;
}
.thumb .name{ font-weight:900; }
.thumb .snippet{ font-size:.9rem; opacity:.9; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.badge{
  position:absolute; top:8px; right:8px; background:rgba(55,255,210,.92); color:#031613;
  border-radius:999px; font-weight:900; font-size:.8rem; padding:2px 8px
}

/* Grid for larger screens */
.thumb-grid{ display:none }
@media(min-width:860px){
  .thumb-row{ display:none }
  .thumb-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px }
  .thumb-grid .thumb{ min-width:unset; height:180px }
}
.thumb.no-img{
  background:
    radial-gradient(60% 80% at 20% 0%, rgba(122,162,255,.25), transparent 60%),
    radial-gradient(60% 80% at 100% 20%, rgba(55,255,210,.25), transparent 55%),
    rgba(255,255,255,.06);
}