/* Liquid Glass: mood-coloured atmosphere, refractive controls and quiet message surfaces. */
:root {
  --ink: #f4f3ef;
  --ink-2: #b1b3b8;
  --ink-3: #9a9ea5;
  --graphite: #141518;
  --hair: rgb(255 255 255 / 0.065);
  --hair-2: rgb(255 255 255 / 0.14);
  --glass-thin: rgb(30 31 34 / 0.42);
  --glass-regular: rgb(20 21 24 / 0.68);
  --glass-elevated: rgb(28 29 32 / 0.88);
  --blur-thin: 8px;
  --blur-regular: 18px;
  --blur-elevated: 28px;
  --motion-micro: 160ms;
  --motion-normal: 260ms;
  --motion-panel: 320ms;
  --motion-ease: cubic-bezier(.22, .8, .24, 1);
  --dock-space: 90px;
  --mw-people: #d6b8c2;
  --mw-about: #acc1cd;
  --mw-likes: #d5c5a7;
  --mw-dates: #d3b39e;
  --mw-events: #bdb6ce;
  --mw-important: #dfd2ad;
  --mw-goals: #afc9be;
  --mw-subs: #b1bbd0;
  --mw-other: #b7bcc5;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
:root[data-motion="calm"] { --motion-micro: 120ms; --motion-normal: 180ms; --motion-panel: 260ms; }
:root[data-motion="expressive"] { --motion-micro: 180ms; --motion-normal: 300ms; --motion-panel: 380ms; }
html, .backdrop { background: #060b15; }
.backdrop .light { display: block; }
.backdrop .grain { display: block; opacity: .025; }
.backdrop .light.a { width: 160vw; height: 125vh; top: -45vh; left: -40vw; opacity: .9; }
.backdrop .light.b { width: 130vw; height: 100vh; right: -48vw; top: 15vh; opacity: 1; }
.backdrop .light.c { width: 130vw; height: 105vh; bottom: -40vh; opacity: 1; }
.backdrop { background-image: radial-gradient(ellipse at 90% 80%, rgb(var(--mood) / .22), transparent 70%); }

/* Shared material levels; glass.js adds edge refraction on compatible Chromium browsers. */
.lg, .pg, .glass, .hero.glass {
  --lg-blur: var(--blur-regular);
  --lg-sat: 155%;
  --lg-fill: rgb(32 43 59 / .38);
  --lg-rim: .2;
  background: linear-gradient(145deg, rgb(255 255 255 / .19), transparent 38%, rgb(255 255 255 / .035) 70%, rgb(255 255 255 / .12)), var(--lg-fill);
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
  backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
  box-shadow: inset 0 1px 1px rgb(255 255 255 / .55), inset 1px 0 1px rgb(255 255 255 / .18),
    inset 0 -1px 2px rgb(255 255 255 / .22), 0 12px 32px -16px rgb(0 0 0 / .65);
}
.lg::before, .pg::before, .glass::before {
  --rim: .2;
  background: linear-gradient(150deg, rgb(255 255 255 / .24), rgb(255 255 255 / .06) 48%, rgb(255 255 255 / .12));
}
.lg::after { background: linear-gradient(115deg, rgb(255 255 255 / .025), transparent 40%); }
.icon-btn, .round, .starter, .chat-more, .ruler-lens {
  --lg-fill: var(--glass-thin);
  --lg-blur: var(--blur-thin);
}
.sheet, .ctx-menu, .toast {
  --lg-fill: var(--glass-elevated);
  --lg-blur: var(--blur-elevated);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .2), 0 18px 60px rgb(0 0 0 / .5);
}
/* Nested surfaces keep the same material without multiplying GPU blur layers. */
.sheet .pg, .sheet .lg, .sheet .glass, .group .pg, .group .lg, .group .btn,
.sheet .btn, .group .icon-btn, .sheet .icon-btn { -webkit-backdrop-filter: none; backdrop-filter: none; }
.title { font-size: 30px; line-height: 1.13; font-weight: 620; letter-spacing: -.035em; margin-bottom: 26px; }
.group-head { font-size: 14px; font-weight: 550; color: var(--ink-2); margin-bottom: 10px; }
.row-label { font-weight: 500; line-height: 1.35; }
.row-hint, .group-foot, .sheet-note { line-height: 1.5; }
.group-wrap { margin-bottom: 26px; }
.group { border-radius: 22px; }
.row { padding-top: 15px; padding-bottom: 15px; }
.row-text, .hero-text { overflow-wrap: anywhere; }
.hero-label, .sheet-title, .mw-sheet-title { font-size: 22px; line-height: 1.25; font-weight: 600; }
.presence { background: #d4d6d2; box-shadow: none; }
.why { background: rgb(255 255 255 / .055); border-color: var(--hair-2); box-shadow: none; }
.why::before { box-shadow: none; }

/* Floating dock, kept outside the scroll area. Existing tab nodes and routes are reused. */
.tabbar { border-radius: 34px; padding: 6px; bottom: calc(12px + var(--bottom)); --lg-fill: rgb(35 48 65 / .3); }
.tabbar .tab-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.tabbar .tab { min-height: 54px; }
.tabbar .tab-icon { width: 27px; height: 27px; }
.tab { border-radius: 22px; font-size: 11px; font-weight: 500; color: var(--ink-3);
  transition: color var(--motion-normal), scale var(--motion-normal) var(--motion-ease); }
.tab.on, .tab.under { color: var(--ink); }
.tab.under { scale: 1.025; }
.tab-lens { border-radius: 22px; background: linear-gradient(155deg, rgb(255 255 255 / .16), rgb(255 255 255 / .07));
  border: 1px solid rgb(255 255 255 / .14); box-shadow: inset 0 1px 0 rgb(255 255 255 / .13), 0 2px 8px rgb(0 0 0 / .15); }
.seg-lens { background: linear-gradient(150deg, rgb(255 255 255 / .19), rgb(255 255 255 / .09));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .16), 0 2px 6px rgb(0 0 0 / .2); }
.seg button.on, .seg button.under { color: var(--ink); }
.seg button { font-weight: 500; }
.switch.on, .send, .toast-mark, .ruler-needle { box-shadow: none; }
.tab.ping::after { background: var(--ink); box-shadow: none; }
.screen { padding-bottom: calc(var(--dock-space) + 24px + var(--bottom)); }

/* Conversation: restrained contrast, comfortable line length and steady message placement. */
.chat { padding-right: 16px; padding-left: 16px; }
.bubble { max-width: min(87%, 520px); padding: 12px 15px; font-size: 16px; line-height: 1.5; border-radius: 21px; }
.lura .bubble { --lg-fill: rgb(22 23 26 / .62); --lg-blur: 6px; box-shadow: inset 0 1px 0 rgb(255 255 255 / .07); }
.me .bubble { color: var(--ink); border: 1px solid rgb(255 255 255 / .16);
  background: linear-gradient(145deg, rgb(255 255 255 / .06), transparent), rgb(48 49 53 / .8);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: inset 0 1px 0 rgb(255 255 255 / .05); }
.bubble a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.bubble p { margin: 0 0 .75em; }
.bubble p:last-child { margin-bottom: 0; }
.bubble ul, .bubble ol { padding-left: 1.4em; margin: .6em 0; }
.bubble blockquote { margin: .7em 0; padding-left: 12px; border-left: 2px solid var(--ink-3); color: var(--ink-2); }
.bubble pre { overflow-x: auto; max-width: 100%; padding: 12px; border-radius: 12px; background: rgb(0 0 0 / .3); white-space: pre; }
.bubble code { font-family: ui-monospace, Consolas, monospace; font-size: .88em; }
.msg.enter, .msg.me.drip { animation: obsidian-message var(--motion-normal) var(--motion-ease) backwards; }
@keyframes obsidian-message { from { opacity: 0; transform: translateY(7px); } }
.word { animation-name: obsidian-word; }
@keyframes obsidian-word { from { opacity: 0; } }
.composer { margin-bottom: calc(var(--dock-space) + var(--bottom)); border-radius: 27px; --lg-fill: rgb(28 29 32 / .72); }
.composer:focus-within { box-shadow: inset 0 0 0 1px rgb(255 255 255 / .27), 0 8px 24px -16px #000; }
.composer textarea { transition: height var(--motion-micro) var(--motion-ease); }
.send:disabled { opacity: .3; transform: none; }
.send.busy::after { border-color: rgb(255 255 255 / .16); border-top-color: var(--ink); }
.send.failed { outline: 1px solid #e4a8a8; outline-offset: 3px; }
body.composing .composer { margin-bottom: max(10px, env(safe-area-inset-bottom)); }
body[data-screen="home"] { overflow: hidden; }
body.keyboard-open .tabbar { transform: translateX(-50%) translateY(150%); opacity: 0; pointer-events: none; }
.field:focus { border-color: rgb(255 255 255 / .4); }
.btn { font-weight: 550; }
.btn.primary { background: var(--ink); box-shadow: none; }
.btn.danger { background: rgb(170 72 72 / .16); color: #f1b4b4; border-color: rgb(220 130 130 / .22); }

/* Pricing: a quiet product sheet with one clear decision and visible limits. */
.plans-card { width: calc(100% - 28px); margin: 0 14px 22px; display: flex; align-items: center; gap: 12px;
  padding: 15px 16px; border: 1px solid var(--hair); border-radius: 22px; color: var(--ink); text-align: left;
  background: linear-gradient(135deg, rgb(255 255 255 / .095), rgb(255 255 255 / .035)); }
.plans-card-copy { display: grid; gap: 3px; flex: 1; min-width: 0; }
.plans-card-copy strong { font-size: 15px; }
.plans-card-copy small { color: var(--ink-3); font-size: 12px; }
.plans-card-arrow { font-size: 22px; color: var(--ink-2); transition: transform .25s var(--motion-ease); }
.plans-card:active .plans-card-arrow { transform: translateX(3px); }
.plans-hero { position: relative; padding: 18px; margin-bottom: 14px; border: 1px solid var(--hair); border-radius: 25px;
  background: radial-gradient(circle at 90% 0%, rgb(var(--mood) / .2), transparent 55%), rgb(255 255 255 / .04); }
.plans-kicker { color: var(--ink-3); font-size: 11px; letter-spacing: .14em; font-weight: 650; }
.plans-kicker .plan-star { margin-right: 3px; }
.plans-hero h2 { margin: 11px 0 5px; font-size: 25px; line-height: 1.15; letter-spacing: -.025em; }
.plans-hero p { max-width: 39ch; margin: 0; color: var(--ink-2); line-height: 1.5; }
.plans-status { display: inline-flex; margin-top: 15px; padding: 6px 10px; border-radius: 999px; font-size: 12px; border: 1px solid var(--hair); color: var(--ink-2); background: rgb(255 255 255 / .05); }
.plans-status.active { color: #d9f1dd; border-color: rgb(140 210 154 / .28); background: rgb(93 168 108 / .14); }
.plans-status.ready { color: #dbe9ff; border-color: rgb(120 165 255 / .28); background: rgb(72 116 210 / .14); }
.plans-status.pending { color: var(--ink-3); }
.plan-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.plan-option { min-width: 0; padding: 15px; border: 1px solid var(--hair); border-radius: 21px; background: rgb(255 255 255 / .035); }
.plan-option.premium { border-color: rgb(var(--mood) / .34); background: linear-gradient(145deg, rgb(var(--mood) / .13), rgb(255 255 255 / .035)); }
.plan-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.plan-option h3 { margin: 0 0 11px; font-size: 15px; }
.plan-tag { color: var(--ink-3); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.plan-option strong { display: block; font-size: 19px; letter-spacing: -.02em; }
.plan-option p { min-height: 36px; margin: 7px 0 10px; color: var(--ink-2); font-size: 13px; line-height: 1.4; }
.plan-option ul { display: grid; gap: 5px; padding: 0; margin: 0; list-style: none; color: var(--ink-3); font-size: 12px; }
.plan-option li::before { content: '·'; margin-right: 7px; color: var(--ink-2); }
.usage-card { margin: 13px 0 17px; padding: 13px 14px; border: 1px solid var(--hair-2); border-radius: 17px; background: rgb(0 0 0 / .14); }
.usage-head { display: flex; justify-content: space-between; gap: 10px; color: var(--ink-2); font-size: 12px; }
.usage-track { height: 5px; margin: 10px 0 7px; overflow: hidden; border-radius: 99px; background: rgb(255 255 255 / .1); }
.usage-track span { display: block; height: 100%; border-radius: inherit; background: rgb(var(--mood)); transition: width .35s var(--motion-ease); }
.usage-card small { color: var(--ink-3); font-size: 11px; }
.plans-pending { display: grid; gap: 4px; padding: 13px 14px; margin: 15px 0; border: 1px solid var(--hair-2); border-radius: 17px; background: rgb(255 255 255 / .035); }
.plans-pending strong { font-size: 13px; }
.plans-pending span { color: var(--ink-3); font-size: 12px; line-height: 1.45; }
.plans .policy { margin-top: 9px; }
.plans .accept-policy { margin: 15px 0 10px; }
@media (max-width: 430px) {
  .plan-grid { grid-template-columns: 1fr; }
  .plan-option p { min-height: 0; }
}

/* Sheets share one lifecycle, with a visible close affordance and bounded scrolling. */
body.sheet-open { overflow: hidden; }
.sheet { border-radius: 28px; max-height: min(84vh, calc(var(--app-h, 100vh) - 24px));
  transition: transform var(--motion-panel) var(--motion-ease), visibility 0s var(--motion-panel); }
.sheet-layer.open .sheet { transition: transform var(--motion-panel) var(--motion-ease); }
.sheet:focus-visible { outline: none; }
.sheet-layer.open { background: rgb(0 0 0 / .48); }
.sheet-close { position: absolute; right: 10px; top: 8px; z-index: 1; font-size: 23px; font-weight: 300; }
.sheet-handle { margin-bottom: 18px; }
.ctx-menu { animation-duration: var(--motion-panel); }

/* Memory retains its canvas graph and category meanings, with quieter colours. */
.memweb { background: radial-gradient(ellipse at 50% 40%, rgb(255 255 255 / .035), transparent 70%), rgb(16 17 19 / .8);
  border: 1px solid var(--hair); border-radius: 24px; }
.mw-dot { box-shadow: none; }
.memweb-legend { font-size: 12px; gap: 7px 12px; background: rgb(16 17 19 / .9); border-radius: 12px; padding: 8px; }
.memweb-hit.lura { background: rgb(255 255 255 / .035); }
.mw-chip { min-height: 38px; height: auto; padding: 8px 12px; max-width: 100%; overflow-wrap: anywhere; text-align: left; }
.mw-sheet-text { line-height: 1.55; }
.screen.enter { animation-duration: var(--motion-normal); }
body.intro.ready .home .chat .msg:nth-last-child(-n+6), body.intro.ready .home .composer {
  animation: obsidian-message var(--motion-normal) var(--motion-ease) backwards;
}
body.intro.ready .tabbar { animation-duration: var(--motion-panel); animation-delay: 0s; }
@media (max-width: 359px) {
  .title { font-size: 28px; margin-left: 16px; margin-right: 108px; }
  .group-wrap, .hero { margin-left: 12px; margin-right: 12px; }
  .row { padding-left: 13px; padding-right: 13px; gap: 10px; }
  .seg button { padding: 0 5px; font-size: 13px; }
  .bubble { max-width: 92%; }
  .memweb-legend { gap: 5px 9px; }
}
@media (min-width: 700px) {
  .screen:not(.home) { max-width: 760px; margin: 0 auto; }
  .chat, .composer { width: min(100% - 32px, 680px); align-self: center; }
  .chat { padding-left: 0; padding-right: 0; }
  .composer { margin-left: 0; margin-right: 0; }
  .sheet { max-width: 620px; margin-left: auto; margin-right: auto; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .lg, .pg, .glass, .hero.glass, .me .bubble, .btn, .icon-btn { background: #1c1d20; }
  .btn.primary { background: var(--ink); }
}
:root.glass-lite .lg, :root.glass-lite .pg, :root.glass-lite .glass,
:root.glass-lite .me .bubble, :root.glass-lite .btn, :root.glass-lite .icon-btn {
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background-color: #1c1d20;
}
:root.glass-lite .btn.primary { background: var(--ink); }
@media (prefers-reduced-transparency: reduce) {
  .lg, .pg, .glass, .hero.glass, .me .bubble, .btn, .icon-btn {
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: #1c1d20;
  }
  .btn.primary { background: var(--ink); }
}
@media (prefers-reduced-motion: reduce) {
  .msg.enter, .msg.me.drip, .screen.enter, .word { animation: none; }
  .composer textarea { transition: none; }
}

/* Voice, subscription and glass interaction states. */
.plans-card { display:flex; width:100%; align-items:center; gap:16px; padding:23px; margin:0 0 26px; border:0; border-radius:26px; color:var(--ink); text-align:left; cursor:pointer; }
.plans-card strong { display:block; font-size:21px; letter-spacing:-.025em; }
.plans-card small { display:block; color:var(--ink-2); margin-top:5px; }
.plans-card > span:last-child { margin-left:auto; font-size:24px; }
.plan-star { font-size:35px; color:#d0c8ff; text-shadow:0 0 25px #a293ff; }
.plans { padding:16px 6px 22px; line-height:1.55; }
.plans h2 { font-size:26px; line-height:1.15; }
.plans p { color:var(--ink-2); }
.plan-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:22px 0; }
.plan-option { border:1px solid #ffffff26; border-radius:22px; padding:16px; background:#ffffff08; }
.plan-option h3 { margin:0 0 14px; }
.plan-option.premium { background:linear-gradient(150deg,#b9a0ff30,#567fff15); border-color:#c2b9ff70; }
.policy { border-bottom:1px solid #ffffff20; padding:12px 0; }
.policy summary { cursor:pointer; }
.policy pre { white-space:pre-wrap; overflow-wrap:anywhere; font:inherit; font-size:13px; }
.accept-policy { display:flex; align-items:flex-start; gap:12px; margin:20px 0; }
.support-link { display:block; color:var(--ink-2); padding-top:24px; }
.mic { flex:none; width:42px; height:44px; touch-action:none; user-select:none; color:var(--ink); }
.mic svg { width:23px; height:23px; }
.mic.recording { background:#d44c68; box-shadow:0 0 0 8px #e7687e22; }
.mic.processing { opacity:.45; pointer-events:none; }
.voice-play { align-self:flex-start; border:0; background:transparent; color:var(--ink-2); padding:7px 12px; font:inherit; font-size:12px; cursor:pointer; }

.voice-play { text-align:left; }
button { transition:scale .32s cubic-bezier(.18,1.45,.42,1), filter .25s; }
button:active:not(:disabled) { scale:.94; filter:brightness(1.15); }
.tab-lens { background:linear-gradient(145deg,#ffffff35,#ffffff0a 50%,#ffffff20); box-shadow:inset 0 1px 2px #ffffff80,inset 0 -1px 2px #ffffff40,0 4px 16px #0003; }
:root[data-effects="reduced"] .lg, :root[data-effects="reduced"] .pg,
:root[data-effects="reduced"] .glass { backdrop-filter:none !important; -webkit-backdrop-filter:none !important; background-color:#17202eed; }
:root[data-effects="reduced"] .backdrop .light { animation:none; }
@media (prefers-reduced-motion:reduce) { button { transition:none; } button:active:not(:disabled) { scale:1; } }
@media (max-width:360px) { .plan-grid { grid-template-columns:1fr; } }

/* Quiet Glass — the reference uses darkness and negative space as the base.
   Colour belongs to the light behind the surface; controls themselves stay neutral. */
:root {
  --ink: #f5f7f8;
  --ink-2: rgb(235 240 244 / .66);
  --ink-3: rgb(224 231 237 / .42);
  --hair: rgb(255 255 255 / .075);
  --hair-2: rgb(255 255 255 / .12);
  --glass-thin: rgb(11 16 20 / .34);
  --glass-regular: rgb(10 14 18 / .48);
  --glass-elevated: rgb(13 17 21 / .88);
  --blur-thin: 14px;
  --blur-regular: 24px;
  --blur-elevated: 36px;
  --dock-space: 82px;
}

html, .backdrop { background: #050709; }
.backdrop {
  background-image:
    radial-gradient(120% 76% at 50% -12%, rgb(var(--mood) / .19), transparent 64%),
    linear-gradient(180deg, #070a0d 0%, #040506 70%);
}
.backdrop .grain { opacity: .018; }
.backdrop .light.a {
  width: 112vw; height: 68vh; left: -6vw; top: -26vh; opacity: .44;
  filter: blur(18px);
}
.backdrop .light.b {
  width: 64vw; height: 54vh; right: -34vw; top: 29vh; opacity: .22;
  filter: blur(32px);
}
.backdrop .light.c {
  width: 78vw; height: 44vh; left: -38vw; bottom: -26vh; opacity: .14;
  filter: blur(36px);
}

.lg, .pg, .glass, .hero.glass {
  --lg-sat: 138%;
  --lg-fill: var(--glass-regular);
  --lg-rim: .12;
  background:
    linear-gradient(135deg, rgb(255 255 255 / .048), transparent 42%, rgb(255 255 255 / .018)),
    var(--lg-fill);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .11),
    inset 0 -1px 0 rgb(255 255 255 / .025),
    0 16px 38px -28px rgb(0 0 0 / .92);
}
.lg::before, .pg::before, .glass::before {
  --rim: .12;
  background: linear-gradient(138deg, rgb(255 255 255 / .24), rgb(255 255 255 / .035) 35%,
    rgb(255 255 255 / .025) 73%, rgb(255 255 255 / .1));
}
.lg::after { background: linear-gradient(118deg, rgb(255 255 255 / .035), transparent 30%); }

.home-head { height: 40px; padding: 2px 18px 0; }
.hello { font-size: 14px; font-weight: 500; color: var(--ink-2); }
.presence { width: 6px; height: 6px; background: rgb(var(--mood)); box-shadow: 0 0 9px rgb(var(--mood) / .55); }
.stage { height: clamp(185px, 32vh, 290px); margin: 0; }
.stage svg { filter: drop-shadow(0 8px 24px rgb(0 0 0 / .2)) drop-shadow(0 0 15px rgb(var(--mood) / .16)); }
.home.talking .stage { height: clamp(120px, 20vh, 180px); }

/* The mood dots were decorative only. They looked like clipped text in older
   Android WebViews and pushed the conversation below the fold. */
.mood-line { display: none !important; }
body.composing .home .stage { height: clamp(84px, 13vh, 120px); }

.mood-line { gap: 3px; max-height: 52px; padding: 0 20px 2px; }
.mood-board { height: 22px; opacity: .67; transform: scale(.74); transform-origin: 50% 50%; }
.mood-board .dots-canvas { filter: none; }
.why { height: 0; border: 0; background: transparent; box-shadow: none; color: var(--ink-3); font-size: 12px; }
.why::before { width: 4px; height: 4px; box-shadow: none; opacity: .72; }
.why.on { height: 20px; }

.chat { padding: 10px 14px 8px; }
.msg { margin-top: 8px; }
.msg.same { margin-top: 2px; }
.bubble { max-width: min(84%, 520px); padding: 10px 13px 11px; border-radius: 18px; font-size: 15.5px; line-height: 1.46; }
.lura .bubble {
  background: rgb(19 23 27 / .72);
  border: 1px solid rgb(255 255 255 / .055);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: none;
}
.me .bubble {
  color: var(--ink);
  background: rgb(var(--mood) / .115);
  border: 1px solid rgb(var(--mood) / .19);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: none;
}
.voice-play { padding: 4px 11px; color: var(--ink-3); }

.composer {
  margin: 4px 12px calc(var(--dock-space) + var(--bottom));
  border-radius: 27px;
  --lg-fill: rgb(14 19 23 / .62);
  --lg-blur: 24px;
  border: 1px solid rgb(255 255 255 / .085);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .11), 0 12px 34px -22px #000;
}
.composer:focus-within { border-color: rgb(255 255 255 / .14); box-shadow: inset 0 1px 0 rgb(255 255 255 / .14); }
.composer textarea { font-size: 16px; }
.composer .send { background: rgb(238 242 244 / .92); color: #0a0c0e; }
.composer .mic { border: 0; background: rgb(255 255 255 / .045); }

.tabbar {
  width: min(calc(100vw - 28px), 390px);
  min-height: 62px;
  padding: 5px;
  bottom: calc(10px + var(--bottom));
  border-radius: 31px;
  --lg-fill: rgb(9 14 17 / .48);
  --lg-blur: 30px;
  border: 1px solid rgb(255 255 255 / .085);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .12), 0 16px 44px -24px #000;
}
.tabbar .tab { min-height: 50px; border-radius: 25px; color: rgb(235 240 244 / .48); }
.tabbar .tab-icon { width: 24px; height: 24px; }
.tabbar .tab-icon svg { width: 24px; height: 24px; }
.tab.on, .tab.under { color: var(--ink); }
.tab.under { scale: 1; }
.tab-lens {
  border-radius: 25px;
  border: 1px solid rgb(255 255 255 / .075);
  background: linear-gradient(140deg, rgb(255 255 255 / .105), rgb(255 255 255 / .035));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .13), 0 4px 14px rgb(0 0 0 / .2);
}

/* Liquid-glass dock: a quiet translucent capsule with a moving highlight,
   tuned for Telegram WebView and compact Android screens. */
.tabbar {
  isolation: isolate;
  background: linear-gradient(125deg, rgb(213 241 255 / .13), rgb(27 74 96 / .24) 44%, rgb(105 73 175 / .16));
  -webkit-backdrop-filter: blur(28px) saturate(1.7);
  backdrop-filter: blur(28px) saturate(1.7);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .26), inset 0 -1px 0 rgb(8 13 17 / .22),
    0 18px 48px rgb(0 0 0 / .28), 0 0 34px rgb(73 192 238 / .08);
}
.tabbar::after { content: ""; position: absolute; z-index: -1; inset: 1px 14%; border-radius: inherit;
  background: linear-gradient(105deg, transparent, rgb(255 255 255 / .13), transparent 55%);
  transform: translateX(-80%); animation: dock-sheen 8s ease-in-out infinite; pointer-events: none; }
@keyframes dock-sheen { 0%, 62% { transform: translateX(-80%); opacity: 0; } 72% { opacity: .9; } 88%, 100% { transform: translateX(80%); opacity: 0; } }
.tabbar .tab.admin .tab-icon { color: #a9e8ff; filter: drop-shadow(0 0 8px rgb(86 211 255 / .42)); }
.tabbar .tab.admin .tab-label { color: rgb(190 239 255 / .86); }

/* Private admin tab */
.admin-screen { padding: 16px 14px calc(116px + var(--bottom)); }
.admin-hero { position: relative; overflow: hidden; min-height: 178px; padding: 22px; margin-bottom: 15px;
  border: 1px solid rgb(174 233 255 / .18); border-radius: 28px;
  background: linear-gradient(140deg, rgb(120 213 242 / .15), rgb(115 77 194 / .14) 62%, rgb(255 255 255 / .035));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .2), 0 20px 55px rgb(0 0 0 / .2); }
.admin-hero p { max-width: 34ch; color: var(--ink-2); line-height: 1.45; margin: 0; }
.admin-hero .title { margin: 9px 0 5px; }
.admin-orb { position: absolute; width: 180px; height: 180px; right: -40px; top: -54px; border-radius: 50%;
  background: radial-gradient(circle at 30% 28%, rgb(218 250 255 / .5), rgb(62 187 231 / .18) 36%, transparent 70%);
  filter: blur(2px); pointer-events: none; }
.admin-refresh { position: absolute; right: 17px; bottom: 17px; width: 42px; height: 42px; display: grid; place-items: center;
  border: 1px solid rgb(255 255 255 / .16); border-radius: 50%; color: var(--ink); background: rgb(255 255 255 / .1); }
.admin-refresh svg { width: 20px; height: 20px; }
.admin-refresh.loading svg { animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.admin-loading { padding: 22px; color: var(--ink-3); text-align: center; border: 1px dashed rgb(255 255 255 / .12); border-radius: 20px; }
.admin-content { display: grid; gap: 14px; }
.admin-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.admin-metric, .admin-chart-card, .admin-health-card { border: 1px solid rgb(255 255 255 / .1); border-radius: 22px;
  background: linear-gradient(145deg, rgb(255 255 255 / .085), rgb(255 255 255 / .025));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .11); }
.admin-metric { display: grid; gap: 6px; min-height: 105px; padding: 14px; }
.admin-metric-label, .admin-eyebrow { color: var(--ink-3); font-size: 10px; letter-spacing: .13em; font-weight: 700; }
.admin-metric-value { font-size: 26px; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.admin-metric-hint { color: var(--ink-3); font-size: 11px; }
.admin-metric.cyan .admin-metric-value { color: #b9efff; }.admin-metric.violet .admin-metric-value { color: #d7c5ff; }
.admin-metric.green .admin-metric-value { color: #c6f4d7; }.admin-metric.amber .admin-metric-value { color: #ffe0a7; }
.admin-chart-card, .admin-health-card { padding: 16px; }
.admin-card-head { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.admin-card-head h3 { margin: 6px 0 0; font-size: 18px; letter-spacing: -.02em; }
.admin-period { color: var(--ink-3); font-size: 11px; padding: 6px 9px; border-radius: 999px; background: rgb(255 255 255 / .07); }
.admin-bars { display: flex; align-items: end; gap: 5px; height: 104px; margin-top: 19px; padding: 0 3px; }
.admin-bar { flex: 1; height: var(--bar); min-height: 6px; border-radius: 8px 8px 3px 3px; background: linear-gradient(180deg, #b6efff, #6e9cf4 70%, #8065c9); box-shadow: 0 0 14px rgb(107 201 255 / .16); animation: bar-rise .5s var(--delay) backwards; }
@keyframes bar-rise { from { transform: scaleY(0); transform-origin: bottom; opacity: .2; } }
.admin-chart-foot { display: flex; justify-content: space-between; margin-top: 9px; color: var(--ink-3); font-size: 11px; }
.admin-health-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.admin-health-card { min-height: 112px; }.admin-health-card strong { display: block; margin-top: 8px; font-size: 25px; }
.admin-health-card p { margin: 4px 0 10px; color: var(--ink-3); font-size: 11px; line-height: 1.35; }
.admin-progress { overflow: hidden; height: 5px; border-radius: 99px; background: rgb(255 255 255 / .08); }
.admin-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #96ebff, #9f83ff); }
.admin-actions { display: grid; gap: 9px; margin-top: 2px; }.admin-actions .btn { min-height: 48px; border-radius: 16px; }

@media (min-width: 520px) { .admin-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); } .admin-health-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* The dock keeps its glass even when the low-power profile removes blur from
   the rest of the interface. Telegram Android WebViews need the prefixed form. */
:root.glass-lite .tabbar, :root[data-effects="reduced"] .tabbar,
.tabbar.lg {
  background: linear-gradient(125deg, rgb(206 238 250 / .14), rgb(28 68 87 / .29) 43%, rgb(92 71 148 / .2)),
    rgb(7 14 19 / .36) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.65) !important;
  backdrop-filter: blur(24px) saturate(1.65) !important;
  border: 1px solid rgb(220 248 255 / .22);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .32), inset 0 -1px 0 rgb(255 255 255 / .09),
    0 16px 42px rgb(0 0 0 / .32), 0 0 30px rgb(64 183 226 / .12);
}
.tabbar::before { z-index: 2; --rim: .68; }
.tabbar::after { z-index: 2; inset: 1px 10%; border-radius: inherit; mix-blend-mode: screen;
  background: linear-gradient(112deg, transparent 18%, rgb(255 255 255 / .14) 48%, transparent 76%);
  transform: translateX(-120%); animation: dock-sheen 7s cubic-bezier(.2,.6,.3,1) infinite; }
.tabbar .tab-lens {
  background: linear-gradient(145deg, rgb(249 253 255 / .22), rgb(212 239 248 / .09) 52%, rgb(255 255 255 / .16));
  -webkit-backdrop-filter: blur(13px) saturate(1.9);
  backdrop-filter: blur(13px) saturate(1.9);
  border: 1px solid rgb(241 251 255 / .3);
  box-shadow: inset 0 1px 1px rgb(255 255 255 / .46), inset 0 -1px 1px rgb(255 255 255 / .13),
    0 3px 15px rgb(0 0 0 / .18), 0 0 20px rgb(110 212 244 / .12);
}
.admin-login { display: grid; gap: 11px; padding: 22px; border: 1px solid rgb(210 242 255 / .17); border-radius: 25px;
  background: linear-gradient(145deg, rgb(255 255 255 / .09), rgb(255 255 255 / .025));
  -webkit-backdrop-filter: blur(23px) saturate(1.4); backdrop-filter: blur(23px) saturate(1.4);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .15), 0 18px 45px rgb(0 0 0 / .22); }
.admin-lock { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; color: #b7edff;
  border: 1px solid rgb(183 237 255 / .24); background: rgb(75 180 218 / .12); font-size: 23px; }
.admin-login > strong { font-size: 20px; }.admin-login > p { margin: 0; color: var(--ink-3); font-size: 13px; }
.admin-password { width: 100%; min-height: 50px; box-sizing: border-box; border: 1px solid rgb(255 255 255 / .16);
  border-radius: 15px; padding: 0 15px; color: var(--ink); background: rgb(2 7 10 / .55); font: inherit; }
.admin-password:focus { outline: 2px solid rgb(137 224 251 / .58); outline-offset: 2px; }
.admin-login .admin-login-error { min-height: 18px; color: #ff9da4; }
.admin-login .btn { margin: 0; }.admin-actions .btn:disabled { opacity: .55; }

.title { font-size: 28px; font-weight: 560; letter-spacing: -.03em; }
.group { border: 1px solid rgb(255 255 255 / .055); background: rgb(255 255 255 / .025); box-shadow: none; }
.group-head { color: var(--ink-3); font-size: 13px; }
.row { padding-top: 14px; padding-bottom: 14px; }
.plans-card { border: 1px solid rgb(255 255 255 / .08); background: rgb(255 255 255 / .035); box-shadow: none; }
.plan-star { color: rgb(var(--mood)); text-shadow: 0 0 20px rgb(var(--mood) / .35); }
.sheet { --lg-fill: rgb(12 16 19 / .91); border: 1px solid rgb(255 255 255 / .09); }
.sheet-layer.open { background: rgb(0 0 0 / .64); }

button { transition: scale .22s cubic-bezier(.2,.8,.2,1), opacity .2s, background-color .25s; }
button:active:not(:disabled) { scale: .965; filter: none; }

@media (min-width: 700px) {
  .screen.home { left: 50%; right: auto; width: min(100%, 760px); transform: translateX(-50%); }
  .stage { height: clamp(165px, 21vh, 205px); }
  .chat, .composer { width: min(100% - 48px, 650px); }
  .tabbar { width: 390px; }
}

.referrals .referral-label { display: grid; gap: 10px; font-size: 14px; }
.referral-link { box-sizing: border-box; width: 100%; min-width: 0; padding: 14px; border-radius: 16px;
  color: inherit; background: #ffffff08; border: 1px solid #ffffff25; font-size: 14px; }
.referrals .btn { width: 100%; min-height: 48px; white-space: normal; }
.referral-note { opacity: .65; font-size: 13px; line-height: 1.55; overflow-wrap: anywhere; }
.premium-expiry, .premium-admin-badge { padding: 12px 14px; border-radius: 16px; background: rgb(var(--mood) / .12); border: 1px solid rgb(var(--mood) / .28); }
.premium-admin-badge { color: #d9d2ff; font-weight: 650; }
.plans-status.active { box-shadow: 0 0 22px rgb(var(--mood) / .3); }

/* Xiaomi Mi 8 / Android 10 Telegram WebView reports a short visual viewport.
   Keep the face readable while reserving a real, scrollable area for chat. */
@media (max-height: 700px) {
  .stage { height: clamp(150px, 25vh, 220px); }
  .chat { padding-top: 6px; padding-bottom: 6px; }
  .bubble { max-width: 92%; font-size: 15px; line-height: 1.42; }
}