/* Phone Buddy — Android-style call look (our own design) */
:root {
  --bg: #101418;
  --bg2: #1b2a33;
  --text: #f1f4f6;
  --muted: #9aa7b0;
  --chip: #26323a;
  --accent: #7cc4ff;
  --green: #1fa855;
  --red: #e5372f;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: Roboto, "Google Sans", system-ui, sans-serif;
}

.screen {
  display: none;
  min-height: 100dvh;
  flex-direction: column;
  align-items: center;
  padding: max(24px, env(safe-area-inset-top)) 16px max(32px, env(safe-area-inset-bottom));
  background: radial-gradient(120% 70% at 50% 0%, var(--bg2), var(--bg));
}
.screen.active { display: flex; }

/* ---------- start screen ---------- */
.home-top { align-self: flex-start; font-size: 20px; font-weight: 500; color: var(--muted); }

.contact { margin-top: 8vh; text-align: center; }
.contact h1 { margin: 16px 0 4px; font-size: 34px; font-weight: 400; }
.sub { margin: 0; color: var(--muted); }

.avatar {
  display: grid; place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #3d7bd9, #5fc3c9);
  font-weight: 500; color: #fff;
  position: relative;
}
.avatar.big { width: 112px; height: 112px; font-size: 48px; margin: 0 auto; }
.avatar.huge { width: 132px; height: 132px; font-size: 56px; }

.level { margin-top: 6vh; text-align: center; width: 100%; max-width: 360px; }
.label { color: var(--muted); margin: 0 0 10px; font-size: 14px; }
.chips { display: flex; gap: 8px; justify-content: center; }
.chips button {
  flex: 1; padding: 10px 0; border-radius: 20px; border: 0;
  background: var(--chip); color: var(--text); font-size: 15px;
}
.chips button.sel { background: var(--accent); color: #062033; font-weight: 600; }
.hint { color: var(--muted); font-size: 13px; min-height: 2.6em; margin: 10px 0 0; }

.small { color: #ffb4ab; font-size: 13px; text-align: center; max-width: 320px; }

.round-btn {
  width: 72px; height: 72px; border-radius: 50%; border: 0;
  display: grid; place-items: center;
  margin-top: auto;
  box-shadow: 0 6px 20px rgba(0,0,0,.35);
}
.round-btn svg { width: 32px; height: 32px; fill: #fff; }
.round-btn.green { background: var(--green); }
.round-btn.red { background: var(--red); }
.round-btn:active { transform: scale(.94); }

/* ---------- call screen ---------- */
.call-top { text-align: center; margin-top: 4vh; display: flex; flex-direction: column; align-items: center; }
.call-name { margin: 18px 0 6px; font-size: 32px; font-weight: 400; }
.call-status { margin: 0; color: var(--muted); font-size: 15px; min-height: 1.3em; }
.call-timer { margin: 4px 0 0; color: var(--muted); font-variant-numeric: tabular-nums; }

/* glowing rings show who is active */
.avatar::after {
  content: ""; position: absolute; inset: -10px; border-radius: 50%;
  border: 3px solid transparent;
}
.avatar.speaking::after { border-color: #5fc3c9; animation: pulse 1.1s ease-in-out infinite; }
.avatar.listening::after { border-color: rgba(124,196,255,.45); }
.avatar.thinking::after { border-color: rgba(255,255,255,.25); border-top-color: #fff; animation: spin 1s linear infinite; }
@keyframes pulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.08); opacity: .5; } }
@keyframes spin { to { transform: rotate(360deg); } }

.subs {
  flex: 1; width: 100%; max-width: 480px; margin: 16px 0;
  overflow-y: auto; display: flex; flex-direction: column; gap: 8px;
  min-height: 0; max-height: 36vh;
}
.subs.hidden { visibility: hidden; }
.line { padding: 8px 12px; border-radius: 14px; max-width: 85%; font-size: 15px; line-height: 1.35; }
.line .w { display: block; font-size: 11px; color: var(--muted); margin-bottom: 2px; }
.line.johan { align-self: flex-start; background: rgba(255,255,255,.08); }
.line.you { align-self: flex-end; background: rgba(124,196,255,.18); }
.line.you.live { opacity: .6; }
.line.error { align-self: center; background: rgba(229,55,47,.2); font-size: 13px; }

.controls { display: flex; gap: 28px; justify-content: center; margin-bottom: 28px; }
.ctl {
  background: none; border: 0; color: var(--text);
  display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px;
}
.ctl .ic {
  width: 60px; height: 60px; border-radius: 50%;
  display: grid; place-items: center; background: rgba(255,255,255,.12);
}
.ctl svg { width: 26px; height: 26px; fill: currentColor; }
.ctl.on .ic { background: var(--text); color: var(--bg); }
.ctl.disabled { opacity: .4; }
.round-btn.red { margin-top: 0; }

.toast {
  position: fixed; left: 50%; bottom: 120px; transform: translateX(-50%);
  background: #2e3a42; color: var(--text); padding: 10px 16px; border-radius: 20px;
  font-size: 14px; opacity: 0; pointer-events: none; transition: opacity .25s;
  max-width: calc(100% - 32px); text-align: center;
}
.toast.show { opacity: 1; }