/* ALPHA+FIELD-CSS-PART 1 of 6 — Reset, design tokens, wallpaper, device frame, app scaffold, large title, glass primitives. Split from index.html; load order is the cascade. */
/* ============================================================
   ALPHA+ FIELD — official Liquid Glass mobile app (installable PWA).
   Served at /alpha-mobile/ (clean alias: /app). Kept as a self-contained
   single file by design so it stays portable + installable; data comes from
   the same /api/crm-records + Alpha+ agent surfaces as the web platform.
   ============================================================ */

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
/* default icon size for inline SVGs written without a width attribute (status-bar SVGs keep their own) */
svg:not([width]){width:18px;height:18px;flex-shrink:0;display:inline-block;vertical-align:middle}
.lt .eyebrow svg{width:16px;height:16px}
.rbtn .circ svg{width:24px;height:24px}
.cs-a .cc svg{width:26px;height:26px}
.cs-end svg{width:30px;height:30px}
.cam-center>svg{width:42px;height:42px}
.cam-thumb svg,.cam-flip svg,.createcell .ci svg{width:22px;height:22px}
.stagebar .stage-h svg{width:18px;height:18px}
:root{
  color-scheme:light; /* Alpha+ ships ONE light theme — opt out of Android/Chrome auto force-dark */
  --ink:#15212B; --ink2:rgba(21,33,43,.66); --ink3:rgba(21,33,43,.46); --ink4:rgba(21,33,43,.30);
  --glass:rgba(255,255,255,.72); --glass2:rgba(255,255,255,.88); --glass3:rgba(255,255,255,.96);
  --hair:rgba(14,35,54,.10); --hair2:rgba(14,35,54,.18);
  --blue:#3B82F6; --green:#30D158; --orange:#FF9F0A; --red:#FF453A;
  --purple:#BF5AF2; --teal:#40CBE0; --pink:#FF6482; --indigo:#5E5CE6;
  --accent:#176AF4;
  --sheet-blur:saturate(180%) blur(30px);
  --r:22px;
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",system-ui,sans-serif;
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
}
html,body{height:100%;font-family:var(--font);background:#F4F6F9;color:var(--ink);overflow:hidden;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{display:flex;align-items:center;justify-content:center}

/* Wallpaper behind the glass — gives Liquid Glass something to refract */
.wallpaper{position:fixed;inset:0;z-index:0;background:#F4F6F9;overflow:hidden}
.wallpaper::before{content:"";position:absolute;inset:-20%;
  background:
    radial-gradient(40% 35% at 18% 12%, rgba(23,106,244,.06), transparent 60%),
    radial-gradient(45% 40% at 85% 8%, rgba(23,106,244,.05), transparent 62%),
    radial-gradient(50% 45% at 78% 88%, rgba(23,106,244,.045), transparent 60%),
    radial-gradient(46% 42% at 12% 92%, rgba(14,35,54,.03), transparent 60%),
    radial-gradient(60% 60% at 50% 50%, rgba(255,255,255,.55), transparent 70%);
  filter:saturate(120%);animation:drift 26s ease-in-out infinite alternate}
@keyframes drift{0%{transform:scale(1) translate(0,0)}100%{transform:scale(1.12) translate(-2%,-2%)}}

/* ---------- Device: fills the whole screen on a real phone; iPhone mockup only on desktop ---------- */
/* The device is pinned to the *visual viewport* (height + offset) via JS so it
   always overlays the visible area exactly — above the soft keyboard, accounting
   for the iOS scroll the keyboard introduces. Becomes a static mockup on desktop. */
.device{position:fixed;z-index:1;left:0;right:0;top:0;width:100%;height:var(--app-h,100%);
  transform:translateY(var(--vv-top,0px));
  background:linear-gradient(180deg,#080b12 0%,#06080e 100%);
  overflow:hidden;display:flex;flex-direction:column}
.device .wallpaper{position:absolute}

/* On a real phone the OS already draws the status bar + Dynamic Island, so we
   hide our fake ones and let content clear the notch via the safe-area inset. */
.statusbar{position:relative;z-index:30;height:calc(54px + var(--safe-t));padding:var(--safe-t) 30px 0;
  display:none;align-items:center;justify-content:space-between;flex-shrink:0;font-size:15px;font-weight:600;
  letter-spacing:.2px}
.statusbar .clock{font-variant-numeric:tabular-nums;padding-top:14px}
.statusbar .sb-right{display:flex;align-items:center;gap:7px;padding-top:14px}
.statusbar .sb-right svg{display:block}
.island{display:none;position:absolute;top:calc(11px + var(--safe-t));left:50%;transform:translateX(-50%);
  width:122px;height:35px;background:#000;border-radius:20px;z-index:31}

/* Desktop / wide screens: present it as a centered iPhone mockup (frame + fake status bar). */
@media(min-width:600px){
  body{padding:24px;align-items:center}
  .device{position:relative;top:auto;transform:none;max-width:418px;height:min(900px,94vh);border-radius:52px;
    box-shadow:0 0 0 11px #0c0e14,0 0 0 13px #1c2030,0 50px 120px -20px rgba(0,0,0,.85),inset 0 0 0 1px rgba(255,255,255,.04)}
  .device .wallpaper{border-radius:52px}
  .statusbar{display:flex}
  .island{display:block}
}
/* Soft keyboard open (detected via VisualViewport): the device height shrinks to
   the visible area (top-anchored), keeping content above the keyboard. Hide the
   agent's big header so the composer + conversation get the room. */
.kb-open .alpha-wrap{padding-bottom:0}

/* ---------- App scaffold ---------- */
.app{position:relative;z-index:10;flex:1;min-height:0;display:flex;flex-direction:column}
.screens{position:relative;flex:1;min-height:0}
/* A tab switch is INSTANT. transition:none is load-bearing, not a leftover:
   this .32s crossfade was dead CSS while render() destroyed and recreated every
   screen node (a brand-new element gets .active in its first style pass, which
   does not transition). js/screen-render/ keeps the nodes and toggles .active
   on them, which DOES transition — measured in Chromium, 2 frames after a tap
   the screen being left sat at 87% opacity over the one arriving at 13%, both
   legible on top of each other, and it took ~320 ms to settle. The screens are
   stacked absolutely with no background of their own, so any fade smears them.
   Do NOT hide inactive screens with display:none instead: Chrome resets
   scrollTop when an element leaves the layout tree, which would throw away the
   scroll position this renderer exists to keep. */
.screen{position:absolute;inset:0;display:flex;flex-direction:column;opacity:0;pointer-events:none;
  transform:translateY(6px) scale(.992);transition:none}
.screen.active{opacity:1;pointer-events:auto;transform:none}
.scroll{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;
  padding:env(safe-area-inset-top,0px) 18px calc(24px + var(--safe-b));scroll-behavior:smooth}
.scroll::-webkit-scrollbar{display:none}

/* ---------- Large title header ---------- */
.lt{padding:8px 4px 14px}
.lt .eyebrow{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--ink3);
  text-transform:uppercase;letter-spacing:.9px;margin-bottom:7px}
.lt h1{font-size:34px;font-weight:800;letter-spacing:-.8px;line-height:1.05}
.lt .sub{margin-top:6px;font-size:15px;color:var(--ink2);font-weight:500}
.lt-row{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}

/* ---------- Glass primitives ---------- */
.glass{background:var(--glass);backdrop-filter:var(--sheet-blur);-webkit-backdrop-filter:var(--sheet-blur);
  border:1px solid var(--hair);border-radius:var(--r);
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 18px 40px -22px rgba(0,0,0,.8)}
.card{background:var(--glass);backdrop-filter:var(--sheet-blur);-webkit-backdrop-filter:var(--sheet-blur);
  border:1px solid var(--hair);border-radius:var(--r);padding:16px;margin-bottom:12px;
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 16px 36px -24px rgba(0,0,0,.8);
  transition:transform .14s ease, background .2s ease}
.tap{cursor:pointer}
.tap:active{transform:scale(.978)}

/* pills */
.pill{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 10px;border-radius:999px;
  font-size:12px;font-weight:700;letter-spacing:.2px;white-space:nowrap}
.pill .dot{width:6px;height:6px;border-radius:50%;background:currentColor}
.pill-blue{color:#9CCBFF;background:rgba(23,106,244,.16);border:1px solid rgba(23,106,244,.28)}
.pill-green{color:#86F0AE;background:rgba(48,209,88,.15);border:1px solid rgba(48,209,88,.28)}
.pill-orange{color:#FFCD7A;background:rgba(255,159,10,.16);border:1px solid rgba(255,159,10,.30)}
.pill-red{color:#FF9A91;background:rgba(255,69,58,.16);border:1px solid rgba(255,69,58,.30)}
.pill-purple{color:#DDB4FF;background:rgba(191,90,242,.16);border:1px solid rgba(191,90,242,.30)}
.pill-grey{color:var(--ink2);background:var(--glass2);border:1px solid var(--hair)}

/* avatars */
.av{width:44px;height:44px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:16px;color:#fff;letter-spacing:.3px;
  box-shadow:0 6px 16px -6px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.12) inset}
.av-lg{width:88px;height:88px;font-size:32px;border-radius:50%}

/* round action buttons (contact-card style) */
.rbtns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.rbtn{display:flex;flex-direction:column;align-items:center;gap:7px;cursor:pointer;width:64px}
.rbtn .circ{width:58px;height:58px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--glass2);backdrop-filter:var(--sheet-blur);-webkit-backdrop-filter:var(--sheet-blur);
  border:1px solid var(--hair2);transition:transform .14s ease,background .2s ease;
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset}
.rbtn:active .circ{transform:scale(.9)}
.rbtn .lbl{font-size:11px;font-weight:600;color:var(--ink2)}
.rbtn.call .circ{background:rgba(48,209,88,.2);border-color:rgba(48,209,88,.4)} .rbtn.call svg{color:var(--green)}
.rbtn.text .circ{background:rgba(23,106,244,.2);border-color:rgba(23,106,244,.4)} .rbtn.text svg{color:#5AB0FF}
.rbtn.nav .circ{background:rgba(94,92,230,.2);border-color:rgba(94,92,230,.4)} .rbtn.nav svg{color:#9C9AFF}
.rbtn.cam .circ{background:rgba(255,159,10,.18);border-color:rgba(255,159,10,.38)} .rbtn.cam svg{color:var(--orange)}

/* section label */
.seclabel{font-size:13px;font-weight:700;color:var(--ink3);text-transform:uppercase;letter-spacing:.8px;
  margin:18px 4px 10px;display:flex;align-items:center;justify-content:space-between}
.seclabel .link{color:var(--blue);text-transform:none;letter-spacing:0;font-weight:600;font-size:14px}