/* Dew messenger. The page sits on top of the 3D scene; every panel is glass, and the highlight on bubbles and
 * buttons comes from the same sun/moon direction that lights the drops (--hx/--hy/--glint, set by app.js). */
:root {
  --ink: #f4fbff;
  --ink-2: rgba(244, 251, 255, .74);
  --glass: rgba(10, 24, 30, .38);
  --glass-strong: rgba(8, 18, 24, .62);
  --edge: rgba(255, 255, 255, .28);
  --mine: #7fd3ff;
  --accent: #8fe3b0;
  --danger: #ff6b6b;
  --hx: 35%;
  --hy: 25%;
  --glint: .8;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #0b1a10; color: var(--ink);
  font: 16px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; -webkit-tap-highlight-color: transparent; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
.small { font-size: .85rem; }
.muted { color: var(--ink-2); }
svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

#scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: manipulation; }
.glass { background: var(--glass); border: 1px solid var(--edge); backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%);
  box-shadow: 0 10px 40px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .25); }

/* ---------- top bar ---------- */
.topbar { position: fixed; z-index: 5; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 10px;
  padding: calc(10px + var(--safe-t)) 16px 10px; pointer-events: none; }
.topbar > * { pointer-events: auto; }
.brand { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 1.35rem; letter-spacing: .02em; color: var(--ink); text-decoration: none; text-shadow: 0 1px 8px rgba(0, 0, 0, .45); }
.brand-drop { width: 22px; height: 22px; border-radius: 50% 50% 50% 50% / 55% 55% 45% 45%; display: inline-block;
  background: radial-gradient(circle at var(--hx) var(--hy), #fff 0 12%, rgba(255,255,255,.2) 30%, transparent 55%), radial-gradient(circle at 50% 60%, #9fe0ff, #2b7fb0);
  box-shadow: inset 0 -3px 6px rgba(0, 40, 70, .45), 0 2px 6px rgba(0, 0, 0, .3); }
.brand-drop.big { width: 64px; height: 64px; }
.sky-chip { margin-left: auto; border: 1px solid var(--edge); background: var(--glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-radius: 999px; padding: 6px 12px; font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 46vw; }
.top-actions { display: flex; gap: 6px; }
.install-chip { display: inline-flex; align-items: center; gap: 5px; border: 1px solid rgba(255,255,255,.5); border-radius: 999px; padding: 6px 12px; font-size: .85rem; font-weight: 700;
  color: #052033; background: radial-gradient(circle at var(--hx) var(--hy), rgba(255,255,255,.7), transparent 45%), linear-gradient(180deg, #8fe3ff, #2a9fd8); white-space: nowrap; }
.install-chip svg { width: 16px; height: 16px; }
.gbtn { display: flex; justify-content: center; min-height: 44px; margin: 6px 0; }
.steps-list { text-align: left; margin: 10px 0; padding-left: 1.3em; }
.steps-list li { margin: 8px 0; }
.share-ico { display: inline-block; width: 18px; height: 18px; vertical-align: -3px; }
.icon-btn { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--edge); flex: none;
  background: radial-gradient(circle at var(--hx) var(--hy), rgba(255,255,255,calc(.35 * var(--glint) + .08)), transparent 45%), var(--glass);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.icon-btn:hover { background-color: rgba(255, 255, 255, .12); }
.icon-btn:focus-visible, button:focus-visible, .chat-title:focus-visible, .label:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ---------- drop labels (they follow the 3D drops) ---------- */
.labels { position: fixed; inset: 0; pointer-events: none; z-index: 2; }
.label { position: absolute; left: 0; top: 0; pointer-events: auto; transform: translate(-50%, 0); border: 0; background: none; padding: 0;
  display: flex; flex-direction: column; align-items: center; gap: 2px; transition: opacity .3s; }
.label .hit { position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%); border-radius: 50%; }
.label .name { padding: 3px 10px; border-radius: 999px; background: rgba(5, 15, 20, .48); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font-size: .82rem; font-weight: 600; white-space: nowrap; max-width: 150px; overflow: hidden; text-overflow: ellipsis; border: 1px solid rgba(255,255,255,.18); }
.label .meta { font-size: .72rem; color: var(--ink-2); text-shadow: 0 1px 4px rgba(0,0,0,.6); max-width: 160px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.label .badge { position: absolute; top: -10px; right: -12px; min-width: 22px; height: 22px; border-radius: 11px; background: #ff4f7b; color: #fff; font-size: .75rem;
  font-weight: 700; display: grid; place-items: center; padding: 0 6px; box-shadow: 0 2px 6px rgba(0,0,0,.35); }
.label .online { width: 8px; height: 8px; border-radius: 50%; background: #5dffa0; display: inline-block; margin-right: 5px; box-shadow: 0 0 6px #5dffa0; vertical-align: 1px; }
.label.faded { opacity: calc(var(--vis, 1) * .6); }
.label.away { opacity: 0; pointer-events: none; }

/* no WebGL: the labels become flat drops in a grid */
body.no3d #scene { background: radial-gradient(circle at 50% 120%, #2f6b1f, #0b1a10 60%); }
body.no3d .labels { position: fixed; inset: 70px 0 0; display: flex; flex-wrap: wrap; gap: 26px; justify-content: center; align-content: flex-start; padding: 24px; overflow: auto; pointer-events: auto; }
body.no3d .label { position: relative; transform: none !important; }
body.no3d.chatting .labels { visibility: hidden; }
body.no3d .label .hit { position: relative; left: auto; bottom: auto; transform: none; display: block; width: 84px; height: 84px;
  background: radial-gradient(circle at var(--hx) var(--hy), #fff 0 8%, rgba(255,255,255,.25) 22%, transparent 50%), radial-gradient(circle at 50% 60%, var(--c, #7fd3ff), rgba(0,0,0,.35));
  box-shadow: inset 0 -6px 12px rgba(0,0,0,.35), 0 6px 16px rgba(0,0,0,.35); }

/* ---------- panels ---------- */
.gate, .hint { position: fixed; z-index: 4; left: 50%; transform: translateX(-50%); width: min(420px, calc(100% - 32px)); border-radius: 26px; padding: 24px; text-align: center; }
.gate { top: 50%; transform: translate(-50%, -50%); }
.gate h1 { margin: 8px 0; font-size: 2.2rem; }
.hint { bottom: calc(20px + var(--safe-b)); padding: 14px 18px; font-size: .92rem; }
.hint button { margin-top: 8px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 18px; border-radius: 999px; border: 1px solid var(--edge);
  background: rgba(255,255,255,.12); text-decoration: none; color: var(--ink); font-weight: 600; }
.btn.primary { background: radial-gradient(circle at var(--hx) var(--hy), rgba(255,255,255,.55), transparent 45%), linear-gradient(180deg, #5cc8ff, #2a8fd0); border-color: rgba(255,255,255,.5); color: #052033; }
.btn.danger { background: rgba(255, 90, 90, .2); border-color: rgba(255, 120, 120, .5); }
.btn:disabled { opacity: .5; cursor: default; }
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

/* ---------- chat (inside the merged drop) ---------- */
.chat { position: fixed; z-index: 6; inset: 0; display: flex; flex-direction: column; padding: calc(8px + var(--safe-t)) 0 calc(8px + var(--safe-b));
  max-width: 760px; margin: 0 auto; }
.chat::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(4, 14, 20, .55), rgba(4, 14, 20, .38) 30%, rgba(4, 14, 20, .38) 70%, rgba(4, 14, 20, .6));
  backdrop-filter: blur(6px) saturate(120%); -webkit-backdrop-filter: blur(6px) saturate(120%);
  border-left: 1px solid rgba(255,255,255,.12); border-right: 1px solid rgba(255,255,255,.12); }
.chat-head { display: flex; align-items: center; gap: 8px; padding: 6px 12px; }
.chat-title { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; border: 0; background: none; text-align: left; padding: 4px; }
.chat-title b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 1.05rem; }
.chat-title small { display: block; color: var(--ink-2); font-size: .75rem; }
.chat-title > span:last-child { min-width: 0; }
.dots { display: flex; flex: none; }
.dots i { width: 26px; height: 26px; border-radius: 50%; margin-left: -8px; border: 2px solid rgba(255,255,255,.5);
  background: radial-gradient(circle at var(--hx) var(--hy), #fff 0 10%, transparent 40%), var(--c); box-shadow: inset 0 -4px 8px rgba(0,0,0,.35); }
.dots i:first-child { margin-left: 0; }
.msgs { flex: 1; overflow-y: auto; padding: 10px 14px 16px; display: flex; flex-direction: column; gap: 6px; overscroll-behavior: contain; }
.day-sep { align-self: center; font-size: .72rem; color: var(--ink-2); padding: 3px 10px; border-radius: 999px; background: rgba(0,0,0,.25); margin: 8px 0; }
.sys { align-self: center; font-size: .78rem; color: var(--ink-2); text-align: center; max-width: 90%; padding: 4px 12px; border-radius: 12px; background: rgba(0,0,0,.28); }
.msg { max-width: min(78%, 520px); align-self: flex-start; display: flex; flex-direction: column; gap: 2px; animation: drip .35s cubic-bezier(.2, 1.4, .4, 1); }
.msg.mine { align-self: flex-end; align-items: flex-end; }
.msg .who { font-size: .72rem; font-weight: 700; color: var(--c); padding: 0 10px; text-shadow: 0 1px 3px rgba(0,0,0,.5); }
.bubble { position: relative; padding: 9px 14px; border-radius: 22px; word-wrap: break-word; overflow-wrap: anywhere; white-space: pre-wrap;
  border: 1px solid rgba(255,255,255,.35); color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.35);
  background:
    radial-gradient(circle at var(--hx) var(--hy), rgba(255,255,255,calc(.5 * var(--glint) + .12)) 0, rgba(255,255,255,0) 32%),
    radial-gradient(ellipse at 50% 120%, rgba(255,255,255,.18), transparent 60%),
    linear-gradient(160deg, color-mix(in srgb, var(--c) 78%, rgba(0,0,0,.25)), color-mix(in srgb, var(--c) 50%, rgba(0,0,0,.55)));
  box-shadow: inset 0 -6px 14px rgba(0, 0, 0, .18), inset 0 2px 4px rgba(255,255,255,.3), 0 4px 14px rgba(0,0,0,.18);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.msg.mine .bubble { border-bottom-right-radius: 8px; }
.msg:not(.mine) .bubble { border-bottom-left-radius: 8px; }
.bubble img { display: block; max-width: 100%; max-height: 320px; border-radius: 14px; margin: -2px -6px; cursor: zoom-in; }
.msg .time { font-size: .68rem; color: var(--ink-2); padding: 0 10px; text-shadow: 0 1px 3px rgba(0,0,0,.7); }
.msg.pending .bubble { opacity: .65; }
.msg.failed .time { color: var(--danger); }
@keyframes drip { from { transform: scale(.6) translateY(8px); opacity: 0; } }
.composer { display: flex; align-items: flex-end; gap: 8px; padding: 8px 12px; }
.composer textarea { flex: 1; resize: none; max-height: 140px; min-height: 44px; padding: 11px 16px; border-radius: 22px; border: 1px solid var(--edge);
  background: rgba(0, 0, 0, .3); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); outline: none; }
.composer textarea:focus { border-color: rgba(255,255,255,.6); }
.composer label.icon-btn { cursor: pointer; }
.send { width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255,255,255,.5); flex: none; display: grid; place-items: center; color: #052033;
  background: radial-gradient(circle at var(--hx) var(--hy), rgba(255,255,255,.8), transparent 45%), linear-gradient(180deg, #8fe3ff, #2a9fd8); }

/* ---------- calls ---------- */
.call { position: fixed; z-index: 7; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: calc(56px + var(--safe-t)) 12px calc(110px + var(--safe-b)); }
.call-status { position: absolute; top: calc(60px + var(--safe-t)); left: 0; right: 0; text-align: center; margin: 0; font-weight: 600; text-shadow: 0 1px 6px rgba(0,0,0,.6); }
.stage { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; align-items: center; width: 100%; max-width: 900px; }
.vdrop { position: relative; width: var(--s, 240px); height: var(--s, 240px); border-radius: 50%; overflow: hidden; flex: none;
  background: radial-gradient(circle at 50% 60%, var(--c, #7fd3ff), rgba(0, 20, 30, .9)); border: 1px solid rgba(255,255,255,.45);
  box-shadow: 0 12px 40px rgba(0,0,0,.35), inset 0 0 30px rgba(255,255,255,.15); animation: drip .5s cubic-bezier(.2, 1.4, .4, 1); }
.vdrop video { width: 100%; height: 100%; object-fit: cover; display: block; }
.vdrop::after { content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at var(--hx) var(--hy), rgba(255,255,255,calc(.65 * var(--glint) + .15)) 0, rgba(255,255,255,0) 18%),
    radial-gradient(circle at 50% 50%, transparent 62%, rgba(255,255,255,.22) 72%, rgba(0,0,0,.3) 100%); }
.vdrop .nm { position: absolute; left: 50%; bottom: 12%; transform: translateX(-50%); z-index: 1; font-size: .82rem; font-weight: 700; padding: 2px 10px; border-radius: 999px; background: rgba(0,0,0,.45); white-space: nowrap; }
.vdrop .initial { position: absolute; inset: 0; display: grid; place-items: center; font-size: calc(var(--s, 240px) * .32); font-weight: 800; color: rgba(255,255,255,.85); text-shadow: 0 4px 18px rgba(0,0,0,.35); }
.vdrop.talking { box-shadow: 0 0 0 4px rgba(143, 227, 176, .7), 0 12px 40px rgba(0,0,0,.35); }
.self-view { position: absolute; right: 16px; bottom: calc(110px + var(--safe-b)); width: 110px; height: 110px; border-radius: 50%; object-fit: cover; transform: scaleX(-1);
  border: 2px solid rgba(255,255,255,.6); box-shadow: 0 8px 22px rgba(0,0,0,.4); background: #0b1a10; }
.call-bar { position: absolute; bottom: calc(24px + var(--safe-b)); left: 0; right: 0; display: flex; justify-content: center; gap: 16px; }
.round { width: 60px; height: 60px; border-radius: 50%; border: 1px solid rgba(255,255,255,.5); display: grid; place-items: center;
  background: radial-gradient(circle at var(--hx) var(--hy), rgba(255,255,255,.55), transparent 45%), rgba(255,255,255,.16); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.round svg { width: 26px; height: 26px; }
.round.off { background: radial-gradient(circle at var(--hx) var(--hy), rgba(255,255,255,.55), transparent 45%), rgba(255,255,255,.75); color: #102028; }
.round.hang { background: radial-gradient(circle at var(--hx) var(--hy), rgba(255,255,255,.55), transparent 45%), #e53950; }
.round.answer { background: radial-gradient(circle at var(--hx) var(--hy), rgba(255,255,255,.55), transparent 45%), #22b866; animation: pulse 1.2s infinite; }
@keyframes pulse { 50% { transform: scale(1.08); } }

.ring { position: fixed; z-index: 9; top: calc(70px + var(--safe-t)); left: 50%; transform: translateX(-50%); width: min(340px, calc(100% - 32px)); border-radius: 28px; padding: 22px;
  display: flex; flex-direction: column; align-items: center; gap: 6px; animation: drip .5s cubic-bezier(.2, 1.4, .4, 1); }
.ring-drop { width: 86px; height: 86px; border-radius: 50%; animation: wobble 1.4s ease-in-out infinite;
  background: radial-gradient(circle at var(--hx) var(--hy), #fff 0 8%, rgba(255,255,255,.25) 22%, transparent 50%), radial-gradient(circle at 50% 60%, var(--c, #7fd3ff), rgba(0,0,0,.35));
  box-shadow: inset 0 -8px 16px rgba(0,0,0,.35), 0 8px 20px rgba(0,0,0,.35); }
@keyframes wobble { 25% { border-radius: 52% 48% 50% 50% / 48% 52% 48% 52%; transform: scale(1.04, .97); } 75% { border-radius: 48% 52% 50% 50% / 52% 48% 52% 48%; transform: scale(.97, 1.04); } }
.ring b { font-size: 1.2rem; }
.ring-actions { display: flex; gap: 40px; margin-top: 10px; }

/* ---------- dialogs ---------- */
.dlg { width: min(460px, calc(100% - 32px)); max-height: calc(100% - 48px); overflow: auto; border-radius: 26px; padding: 22px; color: var(--ink); background: var(--glass-strong); }
.dlg::backdrop { background: rgba(0, 0, 0, .35); backdrop-filter: blur(2px); }
.dlg h2 { margin: 0 0 6px; font-size: 1.3rem; }
.dlg p { margin: 6px 0; }
.dlg-x { position: absolute; right: 12px; top: 12px; margin: 0; }
.dlg-x button { border: 0; background: rgba(255,255,255,.12); width: 34px; height: 34px; border-radius: 50%; }
.field { display: block; margin: 12px 0; font-size: .85rem; color: var(--ink-2); }
.field input, .field select { display: block; width: 100%; margin-top: 6px; min-height: 44px; padding: 10px 14px; border-radius: 14px; border: 1px solid var(--edge); background: rgba(0,0,0,.3); color: var(--ink); }
.field input[type=range] { padding: 0; min-height: 30px; background: none; border: 0; }
.code { font: 700 1.6rem/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .18em; padding: 10px 14px; border-radius: 14px; background: rgba(0,0,0,.3); text-align: center; user-select: all; }
.safety { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px 12px; font: 600 1.05rem ui-monospace, SFMono-Regular, Menlo, monospace; text-align: center; padding: 12px; border-radius: 14px; background: rgba(0,0,0,.3); }
.pick { display: flex; flex-direction: column; gap: 6px; max-height: 300px; overflow: auto; margin: 10px 0; }
.pick label { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; background: rgba(255,255,255,.06); cursor: pointer; }
.pick input { width: 20px; height: 20px; }
.switch-row { justify-content: space-between; }
.switch-row input { appearance: none; -webkit-appearance: none; width: 44px; height: 26px; border-radius: 13px; background: rgba(255,255,255,.2); position: relative; cursor: pointer; flex: none; transition: background .2s; }
.switch-row input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 1px 3px rgba(0,0,0,.4); }
.switch-row input:checked { background: #2a9fd8; }
.switch-row input:checked::after { transform: translateX(18px); }
.pick .dot, .row .dot { width: 22px; height: 22px; border-radius: 50%; flex: none; background: radial-gradient(circle at var(--hx) var(--hy), #fff 0 10%, transparent 40%), var(--c); }
.row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.row .grow { flex: 1; min-width: 0; }
.row small { color: var(--ink-2); display: block; }
.sky-grid { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: .92rem; margin: 10px 0; }
.sky-grid dt { color: var(--ink-2); }
.sky-grid dd { margin: 0; }
.photo-view { max-width: 100%; border-radius: 16px; display: block; margin: 8px auto 0; }

.toast { position: fixed; z-index: 20; left: 50%; bottom: calc(24px + var(--safe-b)); transform: translateX(-50%); max-width: calc(100% - 32px); padding: 10px 18px; border-radius: 999px;
  background: rgba(5, 15, 20, .82); border: 1px solid var(--edge); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); font-size: .9rem; text-align: center; }

@media (max-width: 420px) {
  .brand { font-size: 1.15rem; }
  .install-chip span { display: none; }
  .install-chip { padding: 8px; }
  .icon-btn { width: 38px; height: 38px; }
  .sky-chip { max-width: 34vw; padding: 6px 10px; }
  .round { width: 54px; height: 54px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }

/* ---------- one blade, a wheel of drops ---------- */
#scene, .labels .label { touch-action: none; }
.label { opacity: var(--vis, 1); transition: opacity .15s; }
.label.small .meta { display: none; }
.label.small .name { font-size: .78rem; padding: 2px 8px; }
.label.small .badge { transform: scale(.8); }
.blades { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin-top: 8px; }
.blade-card { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 6px; border-radius: 14px; border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05); color: inherit; font: inherit; cursor: pointer; text-align: center; }
.blade-card b { font-size: .8rem; line-height: 1.15; }
.blade-card small { font-size: .7rem; opacity: .75; }
.blade-card.on { border-color: #9fe7ff; box-shadow: 0 0 0 2px rgba(159,231,255,.35); background: rgba(159,231,255,.08); }
.blade-swatch { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 1.3rem; background: radial-gradient(circle at 35% 30%, #fff6, var(--sw) 60%); }

/* ---------- plans, ad bar, voice & video messages ---------- */
.adbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; height: calc(56px + env(safe-area-inset-bottom)); padding: 3px 8px calc(3px + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 8px; background: rgba(4, 10, 8, .92); border-top: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.ad-slot { flex: 1; min-width: 0; height: 50px; overflow: hidden; display: flex; align-items: center; }
.house-ad { display: flex; flex-direction: column; justify-content: center; min-width: 0; height: 100%; color: #fff; text-decoration: none; padding: 0 6px; }
.house-ad b { font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.house-ad span { font-size: .74rem; opacity: .75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.house-ad::before { content: "Ad"; position: absolute; left: 8px; top: 2px; font-size: .55rem; opacity: .5; }
.ad-remove { flex: none; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.08); color: #fff; border-radius: 999px; padding: 6px 12px; font: inherit; font-size: .78rem; cursor: pointer; }
body.with-ads .chat, body.with-ads .labels, body.with-ads .hint, body.with-ads .call { bottom: calc(56px + env(safe-area-inset-bottom)) !important; }
body.with-ads .chat .composer, body.with-ads .rec-bar { margin-bottom: 0; }
body.with-ads .toast { bottom: calc(72px + env(safe-area-inset-bottom)); }
.plans { display: grid; gap: 10px; margin: 12px 0; }
.plan-card { border: 1px solid rgba(255,255,255,.16); border-radius: 16px; padding: 12px 14px; background: rgba(255,255,255,.04); display: grid; gap: 4px; }
.plan-card.best { border-color: #9fe7ff; box-shadow: 0 0 0 2px rgba(159,231,255,.25); background: rgba(159,231,255,.07); }
.plan-card b { font-size: 1rem; }
.plan-price { font-size: 1.15rem; font-weight: 700; color: #bff0ff; }
.plan-card ul { margin: 2px 0 6px; padding-left: 18px; font-size: .85rem; opacity: .85; }
.composer #micBtn, .composer #vidMsgBtn { flex: none; }
.rec-bar { display: flex; align-items: center; gap: 8px; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); position: relative; }
.rec-dot { width: 10px; height: 10px; border-radius: 50%; background: #ff4f6b; box-shadow: 0 0 10px #ff4f6b; animation: recpulse 1s infinite; }
@keyframes recpulse { 50% { opacity: .35; } }
.rec-time { font-variant-numeric: tabular-nums; font-weight: 600; }
.rec-note { flex: 1; font-size: .72rem; opacity: .7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rec-preview { position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%) scaleX(-1); width: 180px; height: 180px; border-radius: 50%; object-fit: cover;
  border: 3px solid rgba(159,231,255,.8); box-shadow: 0 10px 40px rgba(0,0,0,.5); background: #000; }
.bubble.vm { min-width: 210px; display: grid; gap: 6px; }
.vm-row { display: flex; align-items: center; gap: 8px; }
.vm-play { width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(255,255,255,.9); color: #0b1a10; font-size: .9rem; cursor: pointer; flex: none; }
.vm-bar { flex: 1; height: 4px; border-radius: 2px; background: rgba(255,255,255,.25); overflow: hidden; }
.vm-bar i { display: block; height: 100%; width: 0; background: #fff; transition: width .2s linear; }
.vm-dur { font-size: .78rem; font-variant-numeric: tabular-nums; opacity: .85; min-width: 34px; text-align: right; }
.vm-kind { font-size: .7rem; opacity: .7; }
.vm-video { cursor: pointer; }
.vm-vid { width: 200px; height: 200px; border-radius: 50%; object-fit: cover; justify-self: center; background: #000; }

/* ---------------------------------------------------------------- the ground: stone buttons + the puddle
 * The stones catch the same sun/moon as the drops (--hx/--hy = where the light comes from, --glint = how bright). */
.ground { position: fixed; left: 0; right: 0; bottom: calc(14px + var(--safe-b) + var(--ad-h, 0px)); z-index: 6; display: flex; align-items: flex-end; justify-content: space-between; padding: 0 14px; pointer-events: none; }
.ground > * { pointer-events: auto; }
body.chatting .ground, body.calling .ground { display: none; }
/* the stones are photos of real rock (Randy's art); --wet (0..1) darkens them where rain or flung dew landed,
 * and the sun/moon adds a soft sheen from the same side as on the drops */
.stone { position: relative; border: 0; padding: 0; cursor: pointer; background: none; width: 84px; height: 80px;
  filter: brightness(calc(1 - var(--wet, 0) * .32)) saturate(calc(1 + var(--wet, 0) * .15)) drop-shadow(0 8px 6px rgba(0, 0, 0, .55)); transition: transform .15s, filter 1.2s; }
.stone img { width: 100%; height: 100%; object-fit: contain; display: block; pointer-events: none; user-select: none; }
.stone::after { content: ""; position: absolute; inset: 8% 6% 18%; border-radius: 50%; pointer-events: none; mix-blend-mode: soft-light;
  background: radial-gradient(ellipse 55% 45% at var(--hx, 35%) var(--hy, 25%), rgba(255, 255, 255, calc(.15 + var(--glint, .4) * .5)), transparent 70%);
  box-shadow: inset 0 0 0 999px rgba(30, 40, 50, calc(var(--wet, 0) * .18)); }
.stone:active { transform: translateY(2px) scale(.96); }
.stone.find { flex: 1; max-width: 240px; height: 76px; margin: 0 4px; }
.ground { align-items: flex-end; padding: 0 8px; }
/* quick connect: a green plus in front of a small 3D drop (filled when on) */
.fav-btn { display: inline-flex; align-items: center; gap: 2px; border: 0; background: transparent; cursor: pointer; padding: 6px; color: #5fe08a; }
.fav-btn b { font-size: 1.25rem; line-height: 1; text-shadow: 0 1px 2px rgba(0, 0, 0, .5); }
.mini-drop { width: 16px; height: 20px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; transform: rotate(180deg);
  background: radial-gradient(circle at 35% 65%, #fff 0 12%, rgba(160, 220, 255, .55) 30%, rgba(40, 120, 180, .35) 75%); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .6); }
.fav-btn.on b { content: "✓"; color: #9dffbe; }
.fav-btn.on .mini-drop { background: radial-gradient(circle at 35% 65%, #fff 0 12%, #8fe3ff 30%, #1e8fd6 80%); box-shadow: 0 0 8px rgba(120, 210, 255, .8); }

/* the puddle's finder: search + A-Z for hundreds of contacts */
.finder { display: flex; flex-direction: column; max-height: 78vh; }
.finder input[type=search] { width: 100%; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--edge); background: rgba(0, 0, 0, .3); color: var(--ink); font-size: 1rem; }
.finder-body { display: flex; gap: 6px; min-height: 0; flex: 1; margin-top: 10px; }
.finder-list { flex: 1; overflow-y: auto; overscroll-behavior: contain; }
.finder-list h4 { margin: 10px 4px 4px; font-size: .8rem; color: var(--ink-2); position: sticky; top: 0; background: var(--glass-strong); }
.finder-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 6px; border: 0; background: transparent; color: var(--ink); text-align: left; border-radius: 10px; cursor: pointer; }
.finder-row:hover, .finder-row:focus-visible { background: rgba(255, 255, 255, .08); }
.finder-row .fdrop { width: 34px; height: 34px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 1.05rem; overflow: hidden;
  background: radial-gradient(circle at 35% 30%, #fff 0 8%, color-mix(in srgb, var(--c, #9fd8ff) 70%, white) 25%, var(--c, #9fd8ff) 70%); box-shadow: inset 0 -3px 6px rgba(0, 0, 0, .25); }
.finder-row .fdrop img { width: 100%; height: 100%; object-fit: cover; }
.finder-row .grow small { display: block; color: var(--ink-2); font-size: .78rem; }
.az { display: flex; flex-direction: column; justify-content: space-between; font-size: .68rem; font-weight: 700; color: var(--accent); user-select: none; touch-action: none; padding: 2px 4px; }
.az span { padding: 0 2px; cursor: pointer; }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 10px; }
.swatches button { width: 30px; height: 30px; border-radius: 50%; border: 2px solid transparent; background: var(--c); cursor: pointer; }
.swatches button[aria-pressed=true] { border-color: #fff; box-shadow: 0 0 0 2px rgba(0, 0, 0, .4); }
.icon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 6px; max-height: 190px; overflow-y: auto; margin-bottom: 10px; }
.icon-grid button { aspect-ratio: 1; border-radius: 12px; border: 1px solid var(--edge); background: rgba(255, 255, 255, .06); font-size: 1.3rem; cursor: pointer; overflow: hidden; padding: 0; }
.icon-grid button img { width: 100%; height: 100%; object-fit: cover; }
.icon-grid button[aria-pressed=true] { outline: 2px solid var(--accent); }
.bg-choices { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.bg-choices button { padding: 12px 8px; border-radius: 14px; border: 1px solid var(--edge); background: rgba(255, 255, 255, .06); color: var(--ink); cursor: pointer; }
.bg-choices button[aria-pressed=true] { outline: 2px solid var(--accent); }
.upsell { margin: 10px 0; padding: 12px 14px; border-radius: 16px; background: linear-gradient(135deg, rgba(120, 210, 255, .25), rgba(143, 227, 176, .2)); border: 1px solid var(--edge); }
body.with-ads { --ad-h: 56px; }