/* ─── FULLSCREEN ─────────────────────────────── */
.fullscreen { position: absolute; inset: 0; z-index: 200; display: none; flex-direction: column; background: var(--bg); color: var(--text); }
.fullscreen.active { display: flex; }

/* ─── VIDEO CALL (redesign: Voice Call) ──────── */
.video-bg { flex: 1; background: var(--bg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; position: relative; overflow: hidden; }
.video-bg::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 50% at 50% 18%, var(--accent-soft) 0%, transparent 70%), radial-gradient(ellipse 60% 40% at 80% 90%, var(--accent-soft) 0%, transparent 70%); opacity: 0.7; pointer-events: none; }
.video-bg.portrait-mode { background: var(--bg); }
.video-bg.portrait-mode::before {
  content: '';
  position: absolute; inset: -10%;
  background-image: var(--portrait-bg, none);
  background-size: cover; background-position: center top;
  filter: blur(28px) brightness(0.3) saturate(1.6);
  transform: scale(1.1);
  z-index: 0;
}
.video-bg > * { position: relative; z-index: 1; }
#callFaceCanvas { border-radius: 28px; box-shadow: var(--shadow-pop), 0 0 0 2px var(--accent); border: 2px solid var(--border-2); animation: facetimePulse 3s ease-in-out infinite; }
@keyframes videoPulse { 0%,100%{box-shadow:0 0 40px var(--accent-soft)} 50%{box-shadow:0 0 80px var(--accent-soft)} }
.video-name { font-family: var(--font-display); font-size: 25px; font-weight: 700; color: var(--text); letter-spacing: -0.02em; }
.video-status { font-size: 13px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.video-self { position: absolute; top: 56px; right: 16px; width: 64px; height: 88px; background: var(--surface-2); border: 1px solid var(--border-2); border-radius: 14px; overflow: hidden; }
.video-self-inner { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--text-3); }
.self-profile-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 13px; }
.video-controls { display: flex; justify-content: center; gap: 22px; padding: 26px 24px calc(30px + env(safe-area-inset-bottom)); background: transparent; }
.vid-btn { display: flex; flex-direction: column; align-items: center; gap: 7px; background: none; border: none; cursor: pointer; color: var(--text); position: relative; transition: transform 0.15s; }
.vid-btn:active { transform: scale(0.92); }
.vid-icon { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); transition: all 0.2s; }
.vid-btn:hover .vid-icon { background: var(--surface); }
.vid-btn.vid-active .vid-icon { background: var(--accent-soft); color: var(--accent-ink); border-color: var(--accent); }
.vid-end .vid-icon { background: oklch(0.58 0.2 25)!important; border-color: transparent!important; color: #fff!important; }
.vid-label { font-size: 11px; color: var(--text-3); white-space: nowrap; }

/* ─── MINIMIZED CALL PIP ─────────────────────── */
.call-pip { display: none; position: fixed; bottom: 80px; right: 16px; z-index: 300; background: var(--elev); border: 1px solid var(--border); border-radius: 999px; padding: 10px 14px; align-items: center; gap: 10px; cursor: pointer; box-shadow: var(--shadow-pop); transition: transform 0.15s; min-width: 160px; }
.call-pip.active { display: flex; }
.call-pip:hover { transform: scale(1.03); }
.pip-avatar { font-size: 22px; width: 38px; height: 38px; background: var(--av-bg); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pip-info { flex: 1; }
.pip-name { font-size: 13px; font-weight: 600; color: var(--text); }
.pip-time { font-size: 11px; color: var(--presence); font-variant-numeric: tabular-nums; }
.pip-end { background: oklch(0.58 0.2 25 / 0.18); border: none; border-radius: 50%; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: oklch(0.58 0.2 25); flex-shrink: 0; }

/* ─── CALL PORTRAIT (real face mode) ────────── */
.call-portrait {
  width: 280px; height: 380px;
  border-radius: 28px;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
  box-shadow: var(--shadow-pop), 0 0 0 2px var(--accent);
  border: 2px solid var(--border-2);
  animation: facetimePulse 3s ease-in-out infinite;
  transition: box-shadow 0.3s;
}
.call-portrait.speaking {
  box-shadow: var(--shadow-pop), 0 0 60px var(--accent-soft);
  animation: portraitSpeakPulse 0.5s ease-in-out infinite alternate;
}
@keyframes facetimePulse {
  0%,100% { box-shadow: var(--shadow-pop), 0 0 0 2px var(--accent), 0 0 24px var(--accent-soft); }
  50%     { box-shadow: var(--shadow-pop), 0 0 0 2px var(--accent-2), 0 0 48px var(--accent-soft); }
}
@keyframes portraitSpeakPulse {
  from { box-shadow: var(--shadow-pop), 0 0 45px var(--accent-soft); }
  to   { box-shadow: var(--shadow-pop), 0 0 75px var(--accent-soft); }
}
#callPortraitImg {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 10%;
  display: block;
  transition: transform 0.15s ease;
}
.call-portrait.speaking #callPortraitImg {
  transform: scale(calc(1 + var(--talk-level, 0) * 0.06)) translateY(calc(var(--talk-level, 0) * -3px));
}

/* ─── FACE NAME INPUT (smart search) ────────── */
.face-name-input {
  width: 100%; box-sizing: border-box;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px; padding: 10px 16px;
  color: var(--text); font-size: 13px; margin-bottom: 10px;
  outline: none; transition: border-color 0.2s, box-shadow 0.2s;
}
.face-name-input:focus { border-color: var(--accent); }
.face-name-input::placeholder { color: var(--text-3); }

/* ─── IMITATE REAL PERSON */
.imitate-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.imitate-person-input {
  flex: 1; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 999px; padding: 9px 14px; color: var(--text); font-size: 13px;
  outline: none; transition: border-color 0.2s;
}
.imitate-person-input:focus { border-color: var(--accent); }
.imitate-person-input::placeholder { color: var(--text-3); }
.imitate-upload-btn {
  flex-shrink: 0; background: var(--surface); border: 1px solid var(--border);
  border-radius: 999px; padding: 9px 14px; color: var(--text-2); font-size: 13px; cursor: pointer;
  white-space: nowrap; transition: background 0.15s;
}
.imitate-upload-btn:hover { background: var(--surface-2); color: var(--text); }
.dialogue-status {
  display: none; align-items: center; gap: 8px;
  font-size: 12px; color: var(--text-2); margin-bottom: 10px;
}
.dialogue-status-text { flex: 1; }
.dialogue-clear-btn {
  background: none; border: none; color: rgba(255,255,255,0.3);
  font-size: 11px; cursor: pointer; padding: 2px 6px;
}
.dialogue-clear-btn:hover { color: rgba(255,255,255,0.7); }

/* ─── FACE PRESET PICKER (TikTok character bar) */
.face-preset-grid {
  display: flex; flex-direction: row;
  overflow-x: auto; gap: 8px;
  padding: 4px 2px 10px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.face-preset-grid::-webkit-scrollbar { display: none; }
.face-preset-btn {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  flex-shrink: 0; min-width: 70px;
  background: var(--surface-2);
  border: 1.5px solid var(--border);
  border-radius: 18px; padding: 8px 6px 6px;
  cursor: pointer;
  transition: transform 0.18s cubic-bezier(0.34,1.56,0.64,1), border-color 0.15s, background 0.15s;
}
.face-preset-btn:hover { transform: scale(1.05); border-color: var(--border-2); background: var(--surface); }
.face-preset-btn.selected { border-color: var(--accent); background: var(--accent-soft); }
.face-preset-btn:disabled { opacity: 0.3; cursor: default; transform: none; }
.face-preset-thumb {
  width: 66px; height: 66px;
  border-radius: 50%; object-fit: cover; object-position: center 10%;
  display: flex; align-items: center; justify-content: center;
  background: var(--av-bg); font-size: 22px;
}
.face-preset-btn.selected .face-preset-thumb { box-shadow: 0 0 0 2.5px var(--accent); }
.face-preset-name { font-size: 11px; font-weight: 700; color: var(--text); text-align: center; line-height: 1.2; }
.face-preset-vibe { font-size: 9px; color: var(--text-3); text-align: center; line-height: 1.2; }
.face-preset-btn.selected .face-preset-vibe { color: var(--accent-ink); opacity: 1; }
.face-preset-btn { position: relative; }
.face-preset-add { border: 1.5px dashed var(--border-2); color: var(--text-3); font-size: 26px; background: transparent; }
.face-char-badge { position: absolute; top: 4px; right: 4px; font-size: 9px; border-radius: 5px; padding: 1px 3px; line-height: 1; z-index: 1; }
.face-char-anime   { background: rgba(255,59,48,0.85); }
.face-char-game    { background: rgba(48,209,88,0.85); }
.face-char-fiction { background: rgba(100,132,255,0.85); }

/* ─── FACE STUDIO BUILDER (TikTok style) ─────── */
.face-build-toggle {
  width: 100%; margin-top: 6px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px; padding: 8px 16px;
  color: var(--text-2); font-size: 12px; font-weight: 500;
  cursor: pointer; letter-spacing: 0.02em;
  transition: border-color 0.15s, color 0.15s;
}
.face-build-toggle:hover { border-color: var(--border-2); color: var(--text); }
.face-studio {
  max-height: 0; overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.4,0,0.2,1), opacity 0.3s;
  opacity: 0; pointer-events: none;
}
.face-studio.open { max-height: 520px; opacity: 1; pointer-events: all; }
.face-studio-preview {
  width: 88px; height: 116px;
  border-radius: 18px; object-fit: cover; object-position: center 10%;
  display: block; margin: 14px auto 10px;
  border: 2px solid var(--accent);
  box-shadow: var(--shadow-card);
  background: var(--surface-2);
}
.fs-group-label { font-size: 10px; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.08em; margin: 12px 0 6px; }
.fs-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 2px; }
.fs-region-btn, .fs-style-btn {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px; padding: 6px 13px;
  color: var(--text-2); font-size: 12px; font-weight: 500;
  cursor: pointer; transition: all 0.15s;
}
.fs-region-btn:hover, .fs-style-btn:hover { background: var(--surface); color: var(--text); border-color: var(--border-2); }
.fs-region-btn.selected, .fs-style-btn.selected {
  background: var(--accent); border-color: var(--accent);
  color: var(--on-accent); font-weight: 700;
}
.fs-upload-row { margin-top: 12px; }
.fs-upload-btn {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px; padding: 10px;
  color: var(--text-2); font-size: 13px;
  cursor: pointer; transition: all 0.15s;
}
.fs-upload-btn:hover { background: var(--surface); color: var(--text); border-color: var(--border-2); }
.fs-apply-btn {
  width: 100%; margin-top: 10px;
  background: var(--accent);
  border: none; border-radius: 999px; padding: 12px;
  color: var(--on-accent); font-size: 14px; font-weight: 700;
  cursor: pointer; transition: filter 0.15s, transform 0.15s;
  letter-spacing: 0.01em;
}
.fs-apply-btn:hover { filter: brightness(1.08); transform: scale(1.01); }

/* ─── CALL SPEAK ─────────────────────────────── */
.call-speak-indicator { display: flex; align-items: flex-end; gap: 3px; height: 26px; opacity: 0; transition: opacity 0.3s; }
.call-speak-indicator.speaking { opacity: 1; }
.speak-bar { width: 4px; height: 4px; background: var(--accent); border-radius: 2px; transition: height 0.1s ease; }