/* appstage.css — "App view": the Android build, worked full-size inside the web
   portal. The device is a real iframe of this same CRM at a phone/tablet width,
   so the app layout (appview.js + appview.css) engages exactly as on a handset.
   Nothing here touches the normal desktop screens.

   Layout: toolbar · [screen rail | device on a quiet stage | context panel] · footer.
   The device has a real status bar and home indicator OUTSIDE the web viewport — the
   camera used to be painted straight over the app's own header. */

body.as-open { overflow: hidden; }

#appstage { position: fixed; inset: 0; z-index: 92; display: none; flex-direction: column; color: #eaf3ee;
  --as-line: rgba(255, 255, 255, .09); --as-soft: rgba(255, 255, 255, .055); --as-dim: rgba(234, 243, 238, .56);
  background:
    radial-gradient(900px 520px at 50% -18%, rgba(36, 159, 98, .16), transparent 64%),
    linear-gradient(180deg, #03131f 0%, #020d16 100%);
  font-family: var(--font);
}
#appstage.on { display: flex; }
#appstage kbd { font: 600 10.5px var(--mono); padding: 1px 5px; border-radius: 5px; border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .06); color: rgba(234, 243, 238, .82); }

/* ── toolbar ─────────────────────────────────────────────────────────────── */
.as-bar { flex: none; display: flex; align-items: center; gap: 14px; padding: 10px 16px; height: 56px;
  border-bottom: 1px solid var(--as-line); background: rgba(2, 13, 22, .72); backdrop-filter: blur(10px); }
.as-brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-disp); font-weight: 800; font-size: 14px; letter-spacing: .005em; min-width: 172px; }
.as-brand i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; color: #fff;
  background: linear-gradient(160deg, var(--green-h), var(--green-a)); box-shadow: 0 4px 14px rgba(36, 159, 98, .35); }
.as-brand small { display: block; font-family: var(--font); font-weight: 600; font-size: 10.5px;
  letter-spacing: .07em; text-transform: uppercase; color: var(--as-dim); margin-top: 1px; }
.as-cluster { display: flex; align-items: center; gap: 8px; }
.as-grow { flex: 1 1 auto; min-width: 0; }

.as-seg { display: inline-flex; background: var(--as-soft); border: 1px solid var(--as-line); border-radius: 11px; padding: 3px; gap: 2px; }
.as-seg button { border: 0; background: transparent; color: rgba(234, 243, 238, .7); font: 600 12.5px var(--font);
  padding: 6px 12px; border-radius: 8px; cursor: pointer; white-space: nowrap; }
.as-seg button:hover { color: #fff; background: rgba(255, 255, 255, .07); }
.as-seg button.on { background: #fff; color: #0a2418; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); }

.as-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 34px; padding: 0 13px; border-radius: 10px;
  border: 1px solid var(--as-line); background: var(--as-soft); color: #eaf3ee;
  font: 600 12.5px var(--font); cursor: pointer; text-decoration: none; white-space: nowrap; }
.as-btn:hover { background: rgba(255, 255, 255, .11); border-color: rgba(255, 255, 255, .22); }
.as-btn:focus-visible, .as-seg button:focus-visible, .as-rail button:focus-visible, .as-find input:focus-visible { outline: 2px solid var(--green-h); outline-offset: 2px; }
.as-btn.as-icon { width: 34px; padding: 0; }
.as-btn.exit { background: rgba(255, 255, 255, .92); color: #0a2418; border-color: transparent; }
.as-btn.exit:hover { background: #fff; }
#appstage .as-btn.exit kbd { color: #1d3a2c; border-color: rgba(10, 36, 24, .28); background: #eef3f0; font-weight: 700; }
.as-btn.wide { width: 100%; margin-top: 12px; }

/* ── screen rail ─────────────────────────────────────────────────────────── */
.as-body { flex: 1 1 auto; display: flex; min-height: 0; }
.as-rail { flex: none; width: 232px; display: flex; flex-direction: column; min-height: 0; border-inline-end: 1px solid var(--as-line); background: rgba(2, 13, 22, .35); }
.as-find { flex: none; padding: 12px 12px 8px; }
.as-find input { width: 100%; box-sizing: border-box; height: 34px; border-radius: 10px; border: 1px solid var(--as-line);
  background: var(--as-soft); color: #fff; font: 500 12.5px var(--font); padding: 0 11px; }
.as-find input::placeholder { color: rgba(234, 243, 238, .42); }
.as-rail-list { flex: 1 1 auto; overflow-y: auto; padding: 0 8px 18px;
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 28px), transparent);
  scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .16) transparent; }
.as-rail-g[hidden], .as-rail button[hidden] { display: none; }
.as-rail-h { font-size: 10px; letter-spacing: .11em; text-transform: uppercase; color: rgba(234, 243, 238, .4);
  padding: 14px 10px 6px; font-weight: 700; }
.as-rail button { display: flex; align-items: center; gap: 10px; width: 100%;
  border: 0; background: transparent; color: rgba(234, 243, 238, .76); text-align: start; font: 600 12.5px var(--font);
  padding: 7px 10px; border-radius: 9px; cursor: pointer; }
.as-rail button:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.as-rail button.on { background: rgba(36, 159, 98, .2); color: #fff; box-shadow: inset 2px 0 0 var(--green-h); }
.as-ri { flex: none; width: 18px; height: 18px; display: grid; place-items: center; opacity: .72; }
.as-ri svg { width: 16px; height: 16px; }
.as-rail button.on .as-ri { opacity: 1; color: var(--green-h); }
.as-rl { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.as-rail button em { flex: none; font-style: normal; font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 99px;
  background: rgba(239, 77, 81, .9); color: #fff; }

/* ── the stage and the device ────────────────────────────────────────────── */
.as-stage { flex: 1 1 auto; min-width: 0; display: grid; place-items: center; padding: 18px; overflow: auto;
  background: radial-gradient(520px 520px at 50% 52%, rgba(36, 159, 98, .07), transparent 70%); }
.as-dev { position: relative; flex: none; display: flex; flex-direction: column; transform-origin: top center;
  background: linear-gradient(145deg, #1a2723, #0b1512 42%, #111d19); padding: 12px; border-radius: 48px;
  box-shadow: 0 40px 90px -20px rgba(0, 0, 0, .7), 0 12px 30px -10px rgba(0, 0, 0, .5),
    inset 0 0 0 1.5px #2c3d37, inset 0 0 0 5px #050b09, 0 0 0 1px rgba(255, 255, 255, .05); }
.as-dev.tablet { border-radius: 30px; padding: 11px; }
.as-screen { position: relative; flex: 1 1 auto; min-height: 0; background: #fff; overflow: hidden; }
.as-dev iframe { display: block; width: 100%; height: 100%; border: 0; background: #fff; }

/* status bar: time · camera island · signal / wifi / battery */
.as-sbar { flex: none; height: 32px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 22px 0 26px;
  background: #fff; color: #0c1b14; border-radius: 36px 36px 0 0; font: 700 13px var(--font); letter-spacing: -.01em; }
.as-sbar .as-time { justify-self: start; font-variant-numeric: tabular-nums; }
.as-sbar .as-island { width: 96px; height: 24px; border-radius: 99px; background: #050b09; }
.as-sbar .as-sico { justify-self: end; display: inline-flex; gap: 5px; align-items: center; }
.as-sbar svg { fill: currentColor; }
.as-dev.tablet .as-sbar { height: 24px; border-radius: 20px 20px 0 0; font-size: 11.5px; padding: 0 16px; }
.as-dev.tablet .as-island { width: 8px; height: 8px; }
.as-dev.land .as-island { width: 24px; height: 8px; }

/* home indicator */
.as-home { flex: none; height: 22px; display: grid; place-items: center; background: #fff; border-radius: 0 0 36px 36px; }
.as-home i { width: 128px; height: 5px; border-radius: 99px; background: #0c1b14; opacity: .85; }
.as-dev.tablet .as-home { height: 14px; border-radius: 0 0 20px 20px; }
.as-dev.tablet .as-home i { width: 150px; height: 4px; }

/* hardware keys — a hint of a real handset, drawn on the frame edge */
.as-key { position: absolute; width: 3px; border-radius: 2px; background: #22312c; }
.as-key.k1 { left: -3px; top: 150px; height: 34px; }
.as-key.k2 { left: -3px; top: 200px; height: 58px; }
.as-key.k3 { right: -3px; top: 190px; height: 82px; }
.as-dev.tablet .as-key, .as-dev.land .as-key { display: none; }

.as-dev .as-load { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px;
  background: #fff; color: #50635a; font: 600 12.5px var(--font); z-index: 1; transition: opacity .25s var(--ease); }
.as-dev .as-load.gone { opacity: 0; pointer-events: none; }
.as-spin { width: 22px; height: 22px; border-radius: 99px; border: 2.5px solid #e1ebe5; border-top-color: var(--green); animation: as-spin .8s linear infinite; }
@keyframes as-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .as-spin { animation: none; } }

/* ── context panel ───────────────────────────────────────────────────────── */
.as-side { flex: none; width: 296px; overflow-y: auto; padding: 16px 16px 20px; display: flex; flex-direction: column; gap: 12px;
  border-inline-start: 1px solid var(--as-line); background: rgba(2, 13, 22, .35); }
.as-card { border: 1px solid var(--as-line); background: var(--as-soft); border-radius: 14px; padding: 14px 15px; }
.as-eyebrow { font-size: 10px; letter-spacing: .11em; text-transform: uppercase; font-weight: 700; color: rgba(234, 243, 238, .45); margin-bottom: 7px; }
.as-card h4 { margin: 0; font: 800 17px/1.25 var(--font-disp); color: #fff; letter-spacing: -.01em; }
.as-card p { margin: 7px 0 0; font-size: 12.5px; line-height: 1.55; color: rgba(234, 243, 238, .7); }
.as-dl { display: grid; grid-template-columns: auto 1fr; gap: 7px 14px; margin: 0; font-size: 12.5px; }
.as-dl dt { color: rgba(234, 243, 238, .5); }
.as-dl dd { margin: 0; color: #fff; font-weight: 600; text-align: end; font-variant-numeric: tabular-nums; }
.as-dl dd span { color: rgba(234, 243, 238, .5); font-weight: 500; }
.as-recent { display: flex; flex-wrap: wrap; gap: 6px; }
.as-recent button { border: 1px solid var(--as-line); background: rgba(255, 255, 255, .04); color: rgba(234, 243, 238, .85);
  font: 600 12px var(--font); padding: 5px 10px; border-radius: 99px; cursor: pointer; }
.as-recent button:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.as-keys ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: 12px; line-height: 1.5; color: rgba(234, 243, 238, .68); }
.as-keys li { padding-inline-start: 14px; position: relative; }
.as-keys li::before { content: ''; position: absolute; left: 0; top: .6em; width: 5px; height: 5px; border-radius: 99px; background: rgba(36, 159, 98, .8); }

/* ── footer ──────────────────────────────────────────────────────────────── */
.as-foot { flex: none; display: flex; align-items: center; gap: 10px; padding: 8px 16px; font-size: 11.5px;
  color: var(--as-dim); border-top: 1px solid var(--as-line); background: rgba(2, 13, 22, .6); }
.as-foot b { color: rgba(234, 243, 238, .9); font-weight: 700; }
.as-foot .as-dot { width: 7px; height: 7px; border-radius: 99px; background: var(--green-h); box-shadow: 0 0 0 3px rgba(36, 159, 98, .22); }
#as_note { font-variant-numeric: tabular-nums; }

@media (max-width: 1320px) { .as-side { display: none; } }
@media (max-width: 1100px) { .as-rail { display: none; } }
@media (max-width: 760px) {
  .as-bar { flex-wrap: wrap; gap: 8px; height: auto; }
  .as-brand { min-width: 0; }
  .as-bar .as-seg.as-zoom, .as-bar .as-hide-sm { display: none; }
  .as-stage { padding: 10px; }
}