/* VI1 Call look: landing type, color, header, buttons, cards. Call screens use the VI1 orb. */

@font-face { font-family: "VI1 Serif"; src: url("fonts/serif-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "VI1 Sans"; src: url("fonts/sans-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "VI1 Sans"; src: url("fonts/sans-medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "VI1 Sans"; src: url("fonts/sans-semibold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  --font: "VI1 Sans", Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "VI1 Serif", "Noto Serif Display", Georgia, serif;
  --bg: #f8fbff;
  --panel: #ffffff;
  --panel2: #f3f7fc;
  --line: #dce6f3;
  --border: #d5e3f3;
  --ink: #293a53;
  --ink-2: #355779;
  --brand: #436990;
  --brand2: #355779;
  --muted: #5d6e84;
  --focus: #6587cb;
  --bird: #eaf5ff;
  --lilac: #f4f1fc;
  --cyan: #64c9e8;
  --sky: #81d1eb;
  --peri: #8eafec;
  --lilac-bright: #ac95e7;
  --btn: #293a53;
  --on-btn: #fff;
  --radius: 22px;
  --shadow: 0 24px 50px -32px rgba(41, 58, 83, 0.4);
  --shadow-lg: 0 32px 64px -36px rgba(41, 58, 83, 0.45);
  --hover: #eaf3fc;
  --glass: rgba(255, 255, 255, 0.86);
  --call-field: radial-gradient(circle at 84% 100%, rgba(172, 149, 231, 0.2), transparent 62%), linear-gradient(180deg, #17325c 0%, #10243f 52%, #0c1a30 100%);
}
:root[data-theme="dark"] {
  --bg: #0e1622;
  --panel: #152033;
  --panel2: #1b2940;
  --line: #2a3d56;
  --border: #314864;
  --ink: #e7eef8;
  --ink-2: #c5d4ea;
  --brand: #8fb4ea;
  --brand2: #c5d7f0;
  --on-brand: #0e1a2b;
  --muted: #9aadc4;
  --bird: #1a3050;
  --btn: #e7eef8;
  --on-btn: #122033;
  --hover: #1c2e48;
  --control: linear-gradient(115deg, #1a2c44, #241f3a);
  --control-line: #314864;
  --glass: rgba(14, 22, 34, 0.86);
  --shadow: 0 24px 50px -32px rgba(0, 0, 0, 0.72);
  --shadow-lg: 0 32px 64px -28px rgba(0, 0, 0, 0.78);
  color-scheme: dark;
}

body {
  font-family: var(--font);
  background:
    radial-gradient(70% 42% at 0% -8%, #eaf5ff 0%, transparent 58%),
    radial-gradient(55% 36% at 100% 0%, #f4f1fc 0%, transparent 50%),
    var(--bg);
}
:root[data-theme="dark"] body {
  background:
    radial-gradient(70% 42% at 0% -8%, #1a3050 0%, transparent 58%),
    radial-gradient(55% 36% at 100% 0%, #241c3a 0%, transparent 50%),
    var(--bg);
}
button { background: var(--btn); color: var(--on-btn); border-radius: 999px; }
button.ghost { background: var(--panel); color: var(--ink); box-shadow: inset 0 0 0 1px var(--border); }
button.danger { background: var(--danger); color: #fff; }
button.okb { background: var(--ok); color: #fff; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.top h1, .logo b, .mbrand b, .incoming h3, .call-screen .who, .stat .n, .card h2 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.03em;
}
.logo b, .mbrand b {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--ink);
  background-image: linear-gradient(115deg, #4f9fcf, #5a88d8 55%, #7d6bd0);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.card { border-radius: var(--radius); box-shadow: var(--shadow); }
.top { border-bottom-color: transparent; background: var(--glass); }
.top::before, .side::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--cyan), var(--sky), var(--peri), var(--lilac-bright));
  z-index: 6;
  pointer-events: none;
}
.side { background: linear-gradient(180deg, #fff, #f8fbff); }
:root[data-theme="dark"] .side { background: linear-gradient(180deg, #152033, #101826); }
.nav a.on { border-radius: 999px; }
#themebtn { width: 40px; min-width: 40px; height: 40px; min-height: 40px; padding: 0; border-radius: 50%; }
.settings-page { max-width: 820px; }
.settings-page .seg { margin-bottom: 8px; }
.settings-page .seg button { min-width: 92px; }

.incoming {
  background: var(--call-field);
  padding: 0;
  place-items: stretch;
}
.incoming .sheet {
  width: 100%;
  height: 100%;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #f7fbff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: max(28px, env(safe-area-inset-top)) 22px max(32px, env(safe-area-inset-bottom));
}
.incoming .bigav { display: none; }
.incoming h3 { font-size: clamp(42px, 6vw, 76px); line-height: 1.02; margin: 8px 0 0; color: #fff; }
.incoming .call-num, .call-screen .call-num { font-size: 20px; font-weight: 500; color: #d5e6f8; margin-top: 6px; }
.incoming .pill { background: rgba(255, 255, 255, 0.12); color: #f4f8ff; border-color: transparent; }
.incoming .ctx { width: min(440px, 100%); }
.incoming .ctx div { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.16); color: #e7eef8; }
.incoming .answerrow { width: min(560px, 100%); margin-top: 22px; }
.incoming .opt { color: #f4f8ff; }
.incoming .orb-call { margin-bottom: 8px; }

.call-screen {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  overflow: auto;
  background: var(--call-field);
  color: #f7fbff;
  padding: 0;
}
.call-screen .incall { background: transparent; box-shadow: none; border: 0; padding: 0; width: min(640px, 100%); }
.call-canvas {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: min(640px, 100%);
  min-height: 100%;
  min-height: 100dvh;
  box-sizing: border-box;
  flex: none;
  padding: max(24px, env(safe-area-inset-top)) 16px max(28px, env(safe-area-inset-bottom));
}
.call-screen .who { font-size: clamp(40px, 5.6vw, 68px); line-height: 1.02; margin-top: 6px; color: #fff; }
.call-screen .bigav { display: none; }
.call-screen .pill { background: rgba(255, 255, 255, 0.12); color: #f4f8ff; border-color: transparent; }
.call-screen .pill.ok { color: #b7ebc9; }
.call-screen .timer { color: #f4f8ff; }
.call-screen .ctrl { color: #f4f8ff; }
.call-screen .ctrl span.c { background: rgba(255, 255, 255, 0.14); color: #fff; box-shadow: none; }
.call-screen .ctrl.on span.c { background: #fff; color: #355779; }
.call-screen .call-path { width: min(520px, calc(100% - 24px)); max-height: none; overflow: visible; margin: 0 auto 28px; background: rgba(255, 255, 255, 0.94); color: #293a53; }
:root[data-theme="dark"] .call-screen .call-path { background: rgba(21, 32, 51, 0.94); color: #e7eef8; }
.call-screen.placing .ctrls, .call-screen.placing .xfer, .call-screen.placing .call-path, .call-screen.placing .keys { display: none; }
.call-screen.placing .endbtn { width: auto; min-width: 156px; height: 60px; padding: 0 28px; border-radius: 999px; font-size: 17px; }
@media (max-width: 760px) {
  .incoming .sheet { border-radius: 0; height: 100%; }
  .call-screen .call-path { max-height: none; }
}
/* 3 Oct 2026 (Ed 9:12 PM): status chips read as plain text + coloured dot / emoji, no pill box (buttons keep their shape) */
.pill { background: none !important; border: 0 !important; box-shadow: none !important; padding: 5px 2px; }

/* 12:19 AM 4 Oct (Ed): WhatsApp-style doodle pattern behind the ringing and call screens (under the orb), 10 % VI1 aqua line art. */
.incoming, .call-screen { background: url("brand/vi1-doodles-call-2.svg") 0 0 / 300px 300px repeat, var(--call-field); }

/* 1:15 AM 4 Oct (Ed): call-field pattern ~2x (#c1f5ff 20 %, 1.9 px). Words keep a soft shadow so they stay crisp over strokes. */
.incoming h3, .incoming .call-num, .incoming .pill, .call-screen .who, .call-screen .call-num, .call-screen #call-status { text-shadow: 0 1px 3px rgba(6, 12, 22, 0.6); }