:root {
    --font-body: 'Inter', 'Instrument Sans', system-ui, sans-serif;
    --font-display: 'Space Grotesk', system-ui, sans-serif;
    --bg-soft: #f5f7fa;
    --bg-strong: #eef1f6;
    --surface: #ffffff;
    --surface-strong: #ffffff;
    --surface-dark: rgba(10, 16, 28, 0.94);
    --border: rgba(100, 116, 139, 0.16);
    --border-strong: rgba(100, 116, 139, 0.3);
    --text: #0f172a;
    --muted: #5b6472;
    --primary: #2563eb;
    --primary-strong: #1d4ed8;
    --primary-soft: rgba(37, 99, 235, 0.1);
    --success: #15803d;
    --success-strong: #166534;
    --success-soft: rgba(22, 163, 74, 0.12);
    --warning: #b45309;
    --warning-soft: rgba(180, 83, 9, 0.12);
    --danger: #dc2626;
    --danger-soft: rgba(220, 38, 38, 0.1);
    --shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 8px 24px rgba(15, 23, 42, 0.06);
    --shadow-soft: 0 10px 28px rgba(15, 23, 42, 0.07);
    --shadow-strong: 0 24px 60px rgba(15, 23, 42, 0.16);
    --radius-card: 22px;
    --radius-lg: 18px;
    --radius-md: 14px;
    --radius-sm: 11px;
    --ring: 0 0 0 3px rgba(37, 99, 235, 0.35);
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

    /* Design system scales - every component below reads from these. */
    --fs-xs: 0.78rem;
    --fs-sm: 0.86rem;
    --fs-md: 0.95rem;
    --fs-lg: 1.08rem;
    --fs-xl: 1.35rem;
    --fs-2xl: clamp(1.6rem, 6vw, 2.2rem);
    --lh-tight: 1.2;
    --lh-body: 1.45;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 28px;
    --control-h: 54px;
    --control-h-sm: 46px;
    --control-h-xs: 38px;
    --touch-min: 44px;
    --logo-radius: 30%;
    --shell-max: 520px;
}

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

html,
body {
    margin: 0;
    min-height: 100%;
    /* No pull-to-refresh: an accidental drag must never reload a live call. */
    overscroll-behavior-y: none;
    touch-action: pan-x pan-y;
}

/* Sign-in, admin and diagnostics pages allow pinch zoom; only the dialer
   (a tested product decision) keeps its fixed scale (A29). */
html:has(> body:is(.auth-body, .admin-body, .diagnostics-body)),
body:is(.auth-body, .admin-body, .diagnostics-body) {
    touch-action: auto;
}

body {
    font-family: var(--font-body);
    color: var(--text);
}

img {
    display: block;
    max-width: 100%;
}

button,
input,
select {
    font: inherit;
}

button:disabled {
    opacity: 0.58;
    cursor: not-allowed;
    box-shadow: none;
}

a {
    color: inherit;
}

.hidden,
[hidden] {
    display: none !important;
}

.app-body,
.auth-body {
    background:
        radial-gradient(circle at 15% -5%, rgba(37, 99, 235, 0.08), transparent 34%),
        linear-gradient(180deg, #fafbfd 0%, #f4f6fa 52%, #eef1f6 100%);
}

.app-body {
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    padding: 14px 14px calc(12px + env(safe-area-inset-bottom));
}

.auth-body {
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: 20px;
}

.app-shell {
    width: min(100%, var(--shell-max));
    height: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.app-header,
.card,
.auth-card,
.dial-key,
.logo-shell,
.status-badge,
.mini-badge,
.count-pill,
.icon-button,
.nav-item,
.surface-action-btn,
.health-pill,
.surface-select,
.primary-button,
.soft-button,
.icon-pill,
.auth-tab,
.field-group input,
.modal-card,
.toast {
    box-shadow: var(--shadow);
}

.app-header,
.card,
.auth-card {
    background: var(--surface);
    border: 1px solid var(--border);
}

.app-header {
    border-radius: 28px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.brand-lockup,
.header-actions,
.permission-header,
.section-header,
.about-hero,
.call-surface-top,
.surface-brand,
.call-control-grid,
.button-row,
.dialpad-actions,
.history-item,
.history-actions,
.modal-head {
    display: flex;
    align-items: center;
}

.brand-lockup,
.surface-brand {
    gap: 12px;
}

.header-actions,
.button-row,
.dialpad-actions,
.history-actions {
    gap: 10px;
}

.identity-block,
.compact-status-copy,
.line-preview-copy,
.about-copy {
    min-width: 0;
}

.identity-name,
.section-title,
.call-primary,
.dialer-number,
.auth-copy h1 {
    font-family: var(--font-display);
    letter-spacing: -0.04em;
}

.identity-name {
    font-size: var(--fs-lg);
    font-weight: 700;
    line-height: var(--lh-tight);
}

.identity-line,
.compact-status-detail,
.section-note,
.dialer-caption,
.field-hint,
.field-group span,
.auth-copy p,
.auth-message,
.about-row span,
.surface-quality-hint,
.health-pill span,
.surface-metric span,
.call-card-detail,
.call-secondary,
.line-preview-detail {
    color: var(--muted);
}

.identity-line,
.compact-status-detail,
.dialer-caption,
.line-preview-detail,
.section-note,
.field-hint,
.field-group span,
.auth-copy p,
.surface-quality-hint,
.call-card-detail,
.call-secondary {
    font-size: var(--fs-sm);
    line-height: var(--lh-body);
}

.logo-shell {
    width: 48px;
    height: 48px;
    aspect-ratio: 1 / 1;
    flex-shrink: 0;
    padding: 4px;
    border-radius: var(--logo-radius);
    background: var(--surface-strong);
    overflow: hidden;
}

.logo-shell-large {
    width: clamp(88px, 28vw, 120px);
    height: auto;
    padding: 8px;
}

.logo-shell-surface {
    width: 40px;
    height: 40px;
    padding: 3px;
    background: rgba(255, 255, 255, 0.12);
    box-shadow: none;
}

.logo-image {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    object-position: center;
    background: transparent;
    border-radius: 0;
    image-rendering: auto;
}

.status-badge,
.mini-badge,
.count-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--control-h-xs);
    padding: 0 var(--space-3);
    border-radius: 999px;
    background: var(--surface-strong);
    border: 1px solid var(--border);
    font-size: var(--fs-xs);
    font-weight: 700;
    color: var(--muted);
    white-space: nowrap;
}

.status-badge-surface {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.92);
    box-shadow: none;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: currentColor;
}

.icon-button,
.icon-pill {
    width: var(--touch-min);
    height: var(--touch-min);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-strong);
    color: var(--text);
    cursor: pointer;
}

.icon-pill {
    width: 64px;
    height: 56px;
    border-radius: 22px;
}

.primary-button,
.soft-button,
.surface-action-btn,
.auth-tab,
.call-action,
.nav-item {
    border: 0;
    cursor: pointer;
}

.primary-button,
.soft-button,
.surface-action-btn,
.call-action,
.auth-tab {
    min-height: var(--control-h);
    padding: 0 var(--space-4);
    border-radius: var(--radius-lg);
    font-weight: 700;
    font-size: var(--fs-md);
    line-height: var(--lh-tight);
}

.primary-button {
    color: #ffffff;
    background: var(--primary);
    transition: background 0.2s var(--ease-out), transform 0.15s var(--ease-out);
}

.primary-button:hover {
    background: var(--primary-strong);
}

.primary-button:active {
    transform: scale(0.985);
}

.soft-button,
.surface-action-btn,
.auth-tab {
    background: var(--surface-strong);
    border: 1px solid var(--border);
    color: var(--text);
}

.soft-button.danger-soft {
    color: #b91c1c;
    border-color: rgba(239, 68, 68, 0.18);
}

.full-width {
    width: 100%;
}

/* Header and footer stay fixed; each tab scrolls inside this frame. */
.app-main {
    flex: 1;
    min-height: 0;
    position: relative;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius-lg);
}

.tab-content {
    display: none;
    height: 100%;
}

.tab-content.active {
    display: block;
}

.dialer-stack,
.auth-card,
.history-card,
.about-card,
.call-surface-shell {
    display: flex;
    flex-direction: column;
}

.dialer-stack,
.history-card,
.about-card {
    gap: 12px;
    min-height: 100%;
}

.card,
.history-card,
.about-card {
    border-radius: var(--radius-card);
    padding: 16px;
}

.compact-status-card,
.line-preview-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.permission-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
}

.compact-status-title,
.line-preview-name {
    font-size: 0.98rem;
    font-weight: 800;
}

.section-topline {
    margin-bottom: 6px;
    color: var(--muted);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.section-title {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 700;
}

.permission-header {
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.dialer-card {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.dialer-display {
    text-align: center;
    padding-top: 6px;
}

.dialer-number {
    font-size: clamp(2.1rem, 10vw, 3rem);
    font-weight: 700;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Long line numbers (up to 15 digits) shrink instead of overflowing. */
.dialer-number.dialer-number-long {
    font-size: clamp(1.3rem, 6.4vw, 2rem);
    letter-spacing: 0.02em;
}

.dialer-caption {
    margin-top: 6px;
}

.dialpad-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.dial-key {
    min-height: 84px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface-strong);
    display: grid;
    place-items: center;
    gap: 4px;
    cursor: pointer;
    transition: background 0.15s var(--ease-out), transform 0.12s var(--ease-out), border-color 0.15s var(--ease-out);
}

.dial-key:hover {
    background: var(--bg-soft);
    border-color: var(--border-strong);
}

.dial-key:active {
    transform: scale(0.94);
    background: var(--primary-soft);
}

.dial-digit {
    font-family: var(--font-display);
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1;
}

.dial-letters {
    font-size: 0.68rem;
    letter-spacing: 0.16em;
    color: var(--muted);
    font-weight: 600;
}

.dial-call-button {
    flex: 1;
}

.history-card,
.about-card {
    justify-content: flex-start;
}

.count-pill {
    color: var(--primary);
    background: var(--primary-soft);
    border-color: rgba(37, 99, 235, 0.16);
}

.history-list {
    display: grid;
    gap: 10px;
    overflow-y: auto;
    padding-right: 2px;
}

.history-item {
    justify-content: space-between;
    gap: 12px;
    padding: 14px;
    border-radius: 22px;
    background: var(--surface-strong);
    border: 1px solid var(--border);
}

.history-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1;
}

.history-select {
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    text-align: left;
}

.history-avatar,
.line-preview-avatar,
.call-avatar {
    display: grid;
    place-items: center;
    border-radius: 999px;
    font-weight: 800;
}

.history-avatar,
.line-preview-avatar {
    width: 46px;
    height: 46px;
    background: var(--primary-soft);
    color: var(--primary);
}

.history-copy {
    min-width: 0;
}

.history-name {
    font-size: 0.98rem;
    font-weight: 800;
}

.history-meta {
    margin-top: 4px;
    font-size: 0.86rem;
    color: var(--muted);
}

.history-actions {
    justify-content: flex-end;
}

.history-action {
    min-width: 40px;
    height: 40px;
    padding: 0 10px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--surface-strong);
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 800;
}

.empty-state {
    padding: 48px 16px;
    text-align: center;
    color: var(--muted);
}

.about-grid {
    display: grid;
    gap: 10px;
    margin: 6px 0 4px;
}

.about-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 18px;
    background: var(--surface-strong);
    border: 1px solid var(--border);
}

.about-row strong {
    font-size: 0.95rem;
}

.debug-report-panel {
    display: grid;
    gap: 14px;
    padding: 16px;
    border-radius: 22px;
    background: var(--surface);
    border: 1px solid rgba(37, 99, 235, 0.18);
    box-shadow: var(--shadow-soft);
}

.debug-report-copy {
    display: grid;
    gap: 4px;
}

.debug-report-panel .soft-button {
    width: 100%;
}

.diagnostics-link-card {
    display: grid;
    gap: 5px;
    margin: 8px 0 4px;
    padding: 15px 16px;
    border-radius: 20px;
    background: rgba(37, 99, 235, 0.1);
    border: 1px solid rgba(37, 99, 235, 0.22);
    color: var(--text);
    text-decoration: none;
    box-shadow: var(--shadow-soft);
}

.diagnostics-link-card span {
    color: var(--primary);
    font-size: 0.82rem;
    font-weight: 800;
    text-transform: uppercase;
}

.diagnostics-link-card strong {
    font-size: 0.96rem;
}

.bottom-nav {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    padding: 6px 0 0;
}

.nav-item {
    min-height: 64px;
    border-radius: var(--radius-lg);
    background: var(--surface-strong);
    border: 1px solid var(--border);
    color: var(--muted);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    transition: background 0.2s var(--ease-out), color 0.2s var(--ease-out);
}

.nav-item.active {
    background: var(--primary-soft);
    color: var(--primary);
    border-color: rgba(37, 99, 235, 0.24);
}

.nav-icon {
    font-size: 1.2rem;
    line-height: 1;
    display: grid;
    place-items: center;
}

.nav-icon svg {
    width: 21px;
    height: 21px;
}

.nav-label {
    font-size: 0.78rem;
    font-weight: 700;
}

.call-surface {
    position: fixed;
    inset: 0;
    overscroll-behavior: contain;
    background:
        radial-gradient(circle at 50% -10%, rgba(37, 99, 235, 0.22), transparent 42%),
        linear-gradient(180deg, #0a1120 0%, #0e1728 48%, #101b30 100%);
    z-index: 1200;
    overflow-y: auto;
}

.call-surface-shell {
    min-height: 100%;
    width: min(100%, 520px);
    margin: 0 auto;
    padding: 20px 18px calc(26px + env(safe-area-inset-bottom));
    gap: 18px;
}

.call-surface-top {
    justify-content: space-between;
    gap: 12px;
}

.surface-brand {
    color: rgba(255, 255, 255, 0.94);
    font-weight: 700;
}

.call-avatar {
    width: 120px;
    height: 120px;
    margin: 14px auto 0;
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    font-size: 2.6rem;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
}

.call-primary,
.call-secondary,
.call-card-headline,
.call-card-detail,
.call-timer {
    text-align: center;
}

.call-primary {
    font-size: clamp(1.8rem, 7vw, 2.4rem);
    font-weight: 700;
    color: #ffffff;
}

.call-secondary {
    margin-top: 4px;
    color: rgba(255, 255, 255, 0.72);
}

.call-card {
    padding: 20px 18px;
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.08);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}

.call-card-headline {
    font-size: 1.12rem;
    font-weight: 800;
    color: #ffffff;
}

.call-card-detail {
    margin-top: 6px;
    color: rgba(255, 255, 255, 0.68);
}

.call-timer {
    margin-top: 14px;
    font-family: var(--font-display);
    font-size: 2rem;
    color: #ffffff;
}

.surface-metrics,
.surface-health,
.diagnostics-grid,
.call-control-grid {
    display: grid;
    gap: 10px;
}

.surface-metrics {
    margin-top: 18px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.surface-metric,
.health-pill,
.surface-diagnostics,
.diagnostic-pill,
.surface-select-block,
.surface-quality-block,
.surface-action-btn {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 22px;
}

.surface-metric {
    padding: 12px;
    text-align: left;
}

.surface-metric span,
.health-pill span,
.diagnostic-pill span,
.diagnostics-head span {
    display: block;
    font-size: 0.76rem;
    color: rgba(255, 255, 255, 0.56);
    margin-bottom: 6px;
}

.surface-metric strong,
.health-pill strong,
.diagnostic-pill strong,
.diagnostics-head strong,
.surface-quality-head strong {
    color: #ffffff;
    font-weight: 800;
}

.surface-health {
    margin-top: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.health-pill {
    padding: 12px;
}

.health-pill-wide {
    grid-column: span 2;
}

.surface-diagnostics {
    margin-top: 12px;
    padding: 14px;
}

.diagnostics-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.diagnostics-head span {
    margin-bottom: 0;
}

.diagnostics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.diagnostic-pill {
    padding: 10px;
    min-width: 0;
}

.diagnostic-pill-wide {
    grid-column: span 2;
}

.diagnostic-pill strong {
    display: block;
    overflow-wrap: anywhere;
    line-height: 1.25;
}

.call-controls {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.surface-action-btn {
    min-height: 76px;
    padding: 14px;
    color: #ffffff;
}

.surface-action-btn.active {
    background: rgba(37, 99, 235, 0.26);
    border-color: rgba(37, 99, 235, 0.3);
}

.debug-report-btn {
    min-height: 54px;
    width: 100%;
}

.surface-select-block,
.surface-quality-block {
    padding: 16px;
}

.surface-select-block label,
.surface-quality-head span {
    display: block;
    font-size: 0.82rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.68);
    margin-bottom: 10px;
}

.surface-select {
    width: 100%;
    min-height: 52px;
    padding: 0 14px;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.surface-select option {
    color: var(--text);
}

#qualitySlider {
    width: 100%;
    margin: 14px 0 10px;
    accent-color: var(--primary);
}

.call-actions {
    margin-top: auto;
}

.dual-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.call-action {
    width: 100%;
    min-height: 58px;
    border-radius: 26px;
    color: #ffffff;
    font-weight: 800;
}

.call-action {
    transition: filter 0.2s var(--ease-out), transform 0.15s var(--ease-out);
}

.call-action:hover {
    filter: brightness(1.08);
}

.call-action:active {
    transform: scale(0.98);
}

.call-action.success {
    background: #15803d;
}

.call-action.danger {
    background: #dc2626;
}

.modal-scrim {
    position: fixed;
    inset: 0;
    z-index: 1300;
    background: rgba(15, 23, 42, 0.54);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    display: grid;
    place-items: center;
    padding: 20px;
}

/* The card never clips its own buttons: it fits the viewport and scrolls when
   its content (large text, landscape, a video) is taller (A35). */
.modal-card {
    width: min(100%, 420px);
    max-height: min(calc(100vh - 40px), 680px);
    max-height: min(calc(100dvh - 40px), 680px);
    overflow: hidden auto;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px;
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid var(--border);
}

.modal-head {
    justify-content: space-between;
    gap: 12px;
}

.modal-body {
    overflow-y: auto;
    display: grid;
    gap: 10px;
}

.detail-row {
    padding: 14px;
    border-radius: 18px;
    background: var(--bg-soft);
    border: 1px solid var(--border);
}

.detail-row strong {
    display: block;
    margin-bottom: 4px;
}

.detail-row span {
    display: block;
    color: var(--muted);
    font-size: 0.88rem;
}

.modal-close {
    margin-top: 4px;
}

.toast {
    position: fixed;
    top: max(18px, calc(env(safe-area-inset-top) + 8px));
    left: 50%;
    transform: translateX(-50%) translateY(-10px);
    z-index: 1400;
    min-width: 180px;
    max-width: min(92vw, 360px);
    padding: 14px 16px;
    border-radius: 18px;
    background: rgba(15, 23, 42, 0.94);
    color: #ffffff;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    text-align: center;
}

.toast.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.toast.error {
    background: rgba(220, 38, 38, 0.97);
}

.toast.info {
    background: rgba(37, 99, 235, 0.97);
}

.auth-shell {
    width: min(100%, 520px);
}

.auth-card {
    border-radius: 34px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.auth-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    text-align: center;
}

.auth-copy h1 {
    margin: 0 0 8px;
    font-size: clamp(1.7rem, 7vw, 2.3rem);
    font-weight: 700;
}

.auth-copy {
    text-align: center;
}

.auth-copy p {
    margin: 0;
}

.auth-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.auth-tab.active {
    background: var(--primary-soft);
    border-color: rgba(37, 99, 235, 0.24);
    color: var(--primary);
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.field-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.field-group input,
.field-group select {
    width: 100%;
    min-height: 54px;
    padding: 0 16px;
    border-radius: 18px;
    border: 1px solid var(--border);
    background: var(--surface-strong);
    color: var(--text);
    outline: none;
}

.field-hint {
    margin-top: -2px;
}

.field-group input:focus,
.field-group select:focus,
.surface-select:focus {
    border-color: rgba(37, 99, 235, 0.34);
    outline: none;
}

.honeypot {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
}

.auth-message {
    min-height: 20px;
    padding: 0 4px;
}

.auth-message.error {
    color: var(--danger);
}

.auth-message.success {
    color: var(--success);
}

#remoteAudio {
    display: none;
}

@media (max-width: 520px) {
    .app-body {
        padding: 14px 12px calc(14px + env(safe-area-inset-bottom));
    }

    .app-shell {
        width: 100%;
    }

    .app-header,
    .card,
    .auth-card {
        padding-left: 14px;
        padding-right: 14px;
    }

    .call-surface-shell {
        padding-left: 14px;
        padding-right: 14px;
    }

    .history-item {
        align-items: flex-start;
        flex-direction: column;
    }

    .history-actions {
        width: 100%;
    }

    .history-action {
        flex: 1;
    }

    

    

    
}

@media (max-width: 420px) {
    .dial-key {
        min-height: 80px;
        border-radius: 22px;
    }

    .dial-digit {
        font-size: 1.6rem;
    }

    .call-avatar {
        width: 108px;
        height: 108px;
        font-size: 2.2rem;
    }

    .surface-metrics {
        grid-template-columns: 1fr;
    }

    .surface-health,
    .diagnostics-grid,
    .call-control-grid,
    .dual-actions {
        grid-template-columns: 1fr;
    }

    .health-pill-wide,
    .diagnostic-pill-wide {
        grid-column: auto;
    }

    .auth-brand {
        align-items: center;
        text-align: center;
    }
}

/* Video calling ------------------------------------------------------- */

.video-stage {
    position: relative;
    /* The box takes the shape of the picture it shows (set from the track's
       own dimensions), capped in height, so nothing is cropped square. */
    --stage-aspect: 0.75;
    --stage-max-h: 48vh;
    width: min(100%, 420px, calc(var(--stage-max-h) * var(--stage-aspect)));
    margin: 4px auto 0;
    aspect-ratio: var(--stage-aspect);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: rgba(9, 16, 29, 0.85);
    box-shadow: var(--shadow-soft);
    --pip-dx: 0px;
    --pip-dy: 0px;
}

.remote-video,
.local-video {
    object-fit: cover;
    display: block;
    background: #0b1220;
}

/* The two pictures swap between these roles; a tap on the small tile flips
   them and it can also be dragged (translate, so the mirror transform on the
   element itself is untouched) or minimized. */
.video-main-el {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 0;
    translate: none;
}

.video-pip-el {
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 108px;
    height: 144px;
    border-radius: var(--radius-sm);
    border: 2px solid rgba(255, 255, 255, 0.5);
    box-shadow: var(--shadow-soft);
    translate: var(--pip-dx) var(--pip-dy);
    cursor: grab;
    touch-action: none;
    z-index: 2;
}

.video-pip-chip {
    position: absolute;
    right: 6px;
    bottom: 158px;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 999px;
    background: rgba(9, 16, 29, 0.72);
    color: rgba(255, 255, 255, 0.9);
    cursor: pointer;
    translate: var(--pip-dx) var(--pip-dy);
    z-index: 3;
}

.video-stage.pip-minimized .video-pip-el {
    width: 0;
    height: 0;
    border-width: 0;
    opacity: 0;
    pointer-events: none;
}

.video-stage.pip-minimized .video-pip-chip {
    bottom: 10px;
    translate: none;
}

.video-pip-chip.is-restore svg {
    display: none;
}

.video-pip-chip.is-restore::after {
    content: '+';
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1;
}

.remote-video-note {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(9, 16, 29, 0.72);
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.85rem;
    letter-spacing: 0.02em;
    white-space: nowrap;
    z-index: 4;
}

.is-mirrored {
    transform: scaleX(-1);
}

.video-dock {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: min(100%, 420px);
    margin: 10px auto 12px;
}

.video-dock:not(:has(button:not(.hidden))) {
    display: none;
}

.video-dock-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--control-h-sm);
    padding: 0 var(--space-4);
    border-radius: 999px;
    font-size: var(--fs-sm);
}

/* Mute buttons live in the same dock as the camera controls: an "on"
   (muted) state is unmistakable on the dark surface. */
.video-dock-btn.active {
    background: rgba(220, 38, 38, 0.28);
    border-color: rgba(252, 165, 165, 0.6);
    color: #ffffff;
}

.video-dock-select {
    width: 100%;
}

.quality-auto-btn {
    border: 1px solid var(--border-strong);
    background: var(--surface-strong);
    color: var(--muted);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
    cursor: pointer;
}

.quality-auto-btn.is-active {
    background: var(--primary-soft);
    border-color: rgba(37, 99, 235, 0.35);
    color: var(--primary);
}

.surface-action-btn.is-active {
    background: var(--primary-soft);
    border-color: rgba(37, 99, 235, 0.35);
    color: var(--primary);
}

/* Accessibility and interaction polish -------------------------------- */

button,
a,
select,
input[type='range'] {
    cursor: pointer;
}

:focus-visible {
    outline: none;
    box-shadow: var(--ring);
}

.call-surface :focus-visible {
    box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.55);
}

.soft-button,
.surface-action-btn,
.history-action,
.icon-button,
.icon-pill,
.auth-tab,
.nav-item,
.history-item {
    transition: background 0.2s var(--ease-out), border-color 0.2s var(--ease-out), color 0.2s var(--ease-out);
}

.soft-button:hover,
.icon-button:hover,
.icon-pill:hover,
.history-action:hover {
    border-color: var(--border-strong);
    background: var(--bg-soft);
}

.surface-action-btn:hover {
    border-color: rgba(255, 255, 255, 0.22);
}

.history-item:hover {
    border-color: var(--border-strong);
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Dark call-surface variants for the active states: the light-theme tokens
   are unreadable on the navy surface. */
.call-surface .surface-action-btn.is-active {
    background: rgba(37, 99, 235, 0.34);
    border-color: rgba(147, 197, 253, 0.5);
    color: #ffffff;
}

.call-surface .quality-auto-btn {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.16);
    color: rgba(255, 255, 255, 0.72);
    box-shadow: none;
}

.call-surface .quality-auto-btn.is-active {
    background: rgba(37, 99, 235, 0.34);
    border-color: rgba(147, 197, 253, 0.5);
    color: #dbeafe;
}

/* Field hints live in the label line, in parentheses, in their own color -
   the inputs themselves stay empty. */
.field-paren {
    font-style: normal;
    font-weight: 600;
    font-size: 0.82rem;
    color: var(--primary);
}

/* Collapsible report: one button that folds every status card, telemetry
   row, and diagnostics link out of the way. */
.report-card {
    padding: 0;
    overflow: hidden;
}

.report-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border: 0;
    background: transparent;
    color: var(--text);
    cursor: pointer;
    text-align: left;
}

.report-toggle-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.report-toggle-title {
    font-weight: 700;
}

.report-chevron {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: var(--bg-strong);
    color: var(--muted);
    transition: rotate 0.2s var(--ease-out);
}

.report-toggle.is-open .report-chevron {
    rotate: 180deg;
}

.report-panel {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0 12px 12px;
}

.report-block {
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 12px 14px;
}

/* In-call report variant on the dark surface. */
.call-report-wrap {
    width: 100%;
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    overflow: hidden;
}

.call-report-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0 12px 12px;
}

.tab-paren {
    font-style: normal;
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--primary);
}

.auth-tab.active .tab-paren {
    color: var(--primary-strong);
}

/* Missed-call badge on the History tab and the catch-up dialog rows. */
.nav-item {
    position: relative;
}

.nav-badge {
    position: absolute;
    top: 6px;
    right: 14px;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: var(--danger);
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
}

.missed-call-row {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-soft);
    color: var(--text);
    cursor: pointer;
    text-align: left;
}

.missed-call-row + .missed-call-row {
    margin-top: 8px;
}

.missed-call-row strong {
    font-weight: 700;
}

.missed-call-row span {
    color: var(--muted);
    font-size: 0.88rem;
}

/* Unanswered-call messages: offer, recorder, player, inbox rows. */
.message-offer-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 14px;
}

.recorder-video {
    width: 100%;
    max-height: min(300px, 40vh);
    max-height: min(300px, 40dvh);
    border-radius: var(--radius-md);
    background: #0b1220;
    margin-top: 12px;
}

/* Landscape phones: a short preview keeps Stop / Send in view (A35). */
@media (orientation: landscape) and (max-height: 500px) {
    .recorder-video {
        max-height: 26vh;
        max-height: 26dvh;
        margin-top: 4px;
    }
}

/* A video message records as a round picture in the middle of the card, a
   ring around it filling with the time (2.45.0); the modal sets --rec-progress. */
#messageRecorderModal.is-video .recorder-video {
    width: min(72vw, 300px, calc(100dvh - 300px));
    aspect-ratio: 1;
    max-height: none;
    margin: 12px auto 0;
    border-radius: 50%;
    object-fit: cover;
    padding: 5px;
    background: conic-gradient(var(--primary, #2563eb) calc(var(--rec-progress, 0) * 360deg), rgba(127, 127, 127, 0.25) 0);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}
#messageRecorderModal.is-video .recorder-video[controls] { padding: 0; background: #0b1220; }

.recorder-audio {
    width: 100%;
    margin-top: 12px;
}

.recorder-status {
    margin-top: 10px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--muted);
    text-align: center;
}

.recorder-actions {
    margin-top: 14px;
    flex-wrap: wrap;
}

.message-row.is-seen {
    opacity: 0.62;
}

.message-row:not(.is-seen) {
    border-color: rgba(37, 99, 235, 0.35);
    background: var(--primary-soft);
}

.history-action-danger {
    color: var(--danger);
    border-color: rgba(239, 68, 68, 0.24);
}

/* 1. The video and its own controls (mute, camera, switch, quality) stay
   pinned at the top of the call surface while everything else scrolls
   underneath. The stage is height-capped so the dock always fits on
   small phones. */
.video-pin {
    position: sticky;
    top: 0;
    z-index: 5;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 6px 0 8px;
    background: #0b1424;
    box-shadow: 0 14px 22px rgba(4, 9, 20, 0.55);
    border-bottom-left-radius: var(--radius-lg);
    border-bottom-right-radius: var(--radius-lg);
}

.video-pin:not(:has(> :not(.hidden))) {
    display: none;
}

.video-stage {
    max-height: var(--stage-max-h);
    flex-shrink: 0;
}

.video-stage .video-main-el {
    object-fit: contain;
}

.video-pin .video-dock {
    margin: 10px auto 4px;
}

/* 5. Header: "Your number" with a copy chip. */
.identity-number-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.identity-number {
    font-weight: 700;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.copy-chip {
    width: 28px;
    height: 28px;
    display: inline-grid;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--surface-strong);
    color: var(--primary);
    cursor: pointer;
}

.copy-chip:active {
    transform: scale(0.94);
}

/* 2. Per-contact message chips inside history rows. */
.history-chips {
    display: flex;
    gap: 6px;
    margin-top: 6px;
}

.history-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 26px;
    padding: 0 8px 0 6px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface-strong);
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
}

.history-chip svg {
    width: 14px;
    height: 14px;
}

.history-chip-count {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    font-size: 0.72rem;
    line-height: 1;
    color: var(--text);
}

.history-chip-count.is-unseen {
    background: var(--danger);
    color: #ffffff;
}

.history-item .history-left {
    cursor: default;
}

/* Camera button shown before the other side confirmed video support. */
.video-dock-btn.is-waiting {
    opacity: 0.72;
}

/* Present but not possible here (phone browsers cannot capture a screen,
   iPhone routes audio itself): tapping explains instead of failing. */
.video-dock-btn.is-unavailable {
    opacity: 0.55;
}

/* 3. PWA splash and first-run setup banner. */
.pwa-splash {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: grid;
    place-content: center;
    gap: 14px;
    justify-items: center;
    background:
        radial-gradient(circle at 50% 35%, rgba(37, 99, 235, 0.16), transparent 55%),
        linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
    transition: opacity 0.35s var(--ease-out);
}

.pwa-splash.is-leaving {
    opacity: 0;
    pointer-events: none;
}

.pwa-splash-logo {
    width: min(58vw, 260px);
    height: auto;
    aspect-ratio: 1 / 1;
    border-radius: var(--logo-radius);
    box-shadow: var(--shadow-strong);
}

.pwa-splash-name {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text);
}

.setup-banner {
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-color: rgba(37, 99, 235, 0.3);
    background: var(--primary-soft);
}

.setup-banner-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.setup-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    background: var(--surface-strong);
    border: 1px solid var(--border);
}

.setup-item-copy {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    font-size: 0.9rem;
}

.setup-item-copy span {
    color: var(--muted);
    line-height: 1.4;
}

.setup-item-btn {
    min-height: var(--touch-min);
    padding: 0 14px;
    border-radius: 12px;
    flex-shrink: 0;
}

/* --- Responsive guarantees --------------------------------------------- */
/* Nothing may run off the edge on any phone width or text scale: long
   names and numbers wrap, flex rows wrap, media never exceeds its box. */
.identity-name,
.identity-number,
.history-name,
.history-meta,
.call-primary,
.call-secondary,
.line-preview-name,
.line-preview-detail,
.section-title,
.section-note,
.about-row strong,
.missed-call-row strong,
.missed-call-row span,
.setup-item-copy strong,
.setup-item-copy span,
.update-notes li {
    overflow-wrap: anywhere;
    min-width: 0;
}

.button-row,
.dialpad-actions,
.history-actions,
.video-dock,
.header-actions,
.surface-quality-tools,
.update-card-actions,
.recorder-actions {
    flex-wrap: wrap;
}

.history-copy,
.identity-block,
.setup-item-copy,
.compact-status-copy,
.line-preview-copy,
.about-copy,
.modal-head > div {
    min-width: 0;
    flex: 1 1 auto;
}

img,
video,
canvas,
select,
input,
textarea {
    max-width: 100%;
}

.about-row strong {
    text-align: right;
    max-width: 62%;
}

@media (max-width: 360px) {
    .app-body {
        padding: var(--space-2) var(--space-2) calc(var(--space-2) + env(safe-area-inset-bottom));
    }

    .dial-key {
        min-height: 56px;
    }

    .primary-button,
    .soft-button,
    .call-action {
        padding: 0 var(--space-3);
    }
}

/* --- In-app update card ------------------------------------------------ */
.update-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    border-color: rgba(22, 163, 74, 0.35);
    background: var(--success-soft);
}

.update-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
}

.update-version {
    color: var(--success);
    border-color: rgba(22, 163, 74, 0.35);
    background: var(--surface-strong);
    flex-shrink: 0;
}

.update-notes {
    margin: 0;
    padding-left: 1.1em;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    font-size: var(--fs-sm);
    line-height: var(--lh-body);
    color: var(--text);
}

.update-card-actions .primary-button {
    background: var(--success);
}

.update-card-actions .primary-button:hover {
    background: #15803d;
}

/* Screen share on the stage: landscape box, letterboxed, never mirrored. */
.video-stage.is-screen {
    background: #000;
}

.video-stage.is-screen .video-main-el {
    object-fit: contain;
    transform: none;
}

.video-stage-tag {
    position: absolute;
    left: 10px;
    top: 10px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.85);
    color: #ffffff;
    font-size: var(--fs-xs);
    font-weight: 700;
    z-index: 3;
}

.video-dock-btn.is-active {
    background: rgba(37, 99, 235, 0.34);
    border-color: rgba(147, 197, 253, 0.5);
    color: #ffffff;
}

/* --- Backup line (lifeline) ------------------------------------------- */
.lifeline-banner {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    border-color: rgba(168, 85, 247, 0.4);
    background: rgba(168, 85, 247, 0.08);
}

.lifeline-banner-head {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.lifeline-pill {
    color: #7c3aed;
    border-color: rgba(124, 58, 237, 0.35);
    background: var(--surface-strong);
}

/* --- Viewport frame, slim header, fitted keypad, pinned nav ------------ */
/* One rule set for every phone: the body is the viewport, the shell fills
   it exactly, header and nav never move, only the main area scrolls, and
   the keypad sizes its keys from the viewport height so it fits without
   scrolling on anything from an old 568px-tall phone upwards. */
.app-body {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
}

.app-shell {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
    gap: var(--space-2);
}

.app-header,
.bottom-nav {
    flex: 0 0 auto;
}

.app-main {
    flex: 1 1 auto;
    min-height: 0;
}

.app-header-slim {
    min-height: 46px;
    padding: 6px 10px 6px 12px;
    border-radius: var(--radius-lg);
    gap: var(--space-2);
    flex-wrap: nowrap;
}

.status-badge-slim {
    flex: 0 0 auto;
    min-height: 30px;
    padding: 0 10px;
    gap: 6px;
    font-size: clamp(0.64rem, 2.9vw, 0.78rem);
    white-space: nowrap;
}

.dialer-card {
    position: relative;
    overflow: hidden;
    gap: clamp(8px, 1.6vh, 18px);
}

.dialer-display,
.dialpad-grid,
.dialpad-actions {
    position: relative;
    z-index: 1;
}

.dialer-display {
    padding-top: 0;
}

.dialer-number {
    font-size: clamp(1.7rem, 8.5vw, 2.6rem);
}

.dialpad-grid {
    gap: clamp(6px, 1.4vh, 12px);
}

.dial-key {
    min-height: clamp(44px, 8.4vh, 76px);
    min-height: clamp(44px, 8.4dvh, 76px);
    border-radius: var(--radius-md);
}

.dial-digit {
    font-size: clamp(1.1rem, 2.6vh, 1.6rem);
}

.dial-letters {
    font-size: clamp(0.5rem, 1.2vh, 0.68rem);
}

.dial-call-button,
.dialpad-actions .icon-pill {
    min-height: clamp(44px, 7vh, 54px);
}

.bottom-nav {
    gap: var(--space-2);
    padding: 4px 0 0;
}

.nav-item {
    min-height: clamp(48px, 7.6vh, 62px);
    padding: 0 4px;
    gap: 2px;
}

.nav-label {
    font-size: clamp(0.62rem, 2.9vw, 0.78rem);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

@media (max-height: 600px) {
    .dialer-caption {
        display: none;
    }

    .app-shell {
        gap: var(--space-1);
    }
}

@media (max-width: 520px) {
    .app-body {
        padding: 8px 8px calc(6px + env(safe-area-inset-bottom));
    }
}

/* --- Call surface inside the frame ------------------------------------- */
/* The call view is a panel over the main area, not a full-screen layer:
   header (presence, number) and the bottom nav stay visible and usable.
   Other tabs can be visited mid-call; a "Return to call" bar takes over. */
.app-main {
    position: relative;
}

.app-main.is-calling {
    overflow: hidden;
}

.call-surface {
    position: absolute;
    inset: 0;
    z-index: 30;
    border-radius: var(--radius-lg);
}

.call-return-bar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--touch-min);
    padding: 0 12px;
    border: 1px solid rgba(22, 163, 74, 0.35);
    border-radius: var(--radius-md);
    background: var(--success-soft);
    color: var(--text);
    font-size: var(--fs-sm);
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
}

.call-return-bar .status-dot {
    background: var(--success);
    flex: 0 0 auto;
}

.call-return-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.call-return-timer {
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
    color: var(--muted);
}

.call-return-cta {
    flex: 0 0 auto;
    color: var(--success-strong);
}

/* --- Keypad never stretches; roomy screens centre it -------------------- */
.dialer-card {
    flex: 0 0 auto;
}

@media (min-height: 820px) and (min-width: 700px) {
    .dialer-stack {
        justify-content: center;
    }
}

@media (min-width: 900px) {
    .app-body {
        padding: 16px;
    }
}

/* Notches and rounded corners: the frame keeps clear of the top, left and
   right safe-area edges too (the bottom inset is in the .app-body padding) (U-20). */
.app-shell {
    padding-top: env(safe-area-inset-top);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

/* --- Full screen for the video stage ----------------------------------- */
.video-stage-fs {
    position: absolute;
    right: 10px;
    top: 10px;
    z-index: 4;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.45);
    color: #ffffff;
    cursor: pointer;
}

.video-stage-fs[aria-pressed="true"] {
    background: rgba(37, 99, 235, 0.75);
}

.video-stage:fullscreen,
.video-stage.is-fake-fullscreen {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    max-width: none;
    max-height: none;
    aspect-ratio: auto;
    margin: 0;
    border-radius: 0;
    background: #000;
    z-index: 2000;
}

.video-stage:fullscreen .video-main-el,
.video-stage.is-fake-fullscreen .video-main-el {
    object-fit: contain;
}

.video-stage:fullscreen .video-stage-fs,
.video-stage.is-fake-fullscreen .video-stage-fs {
    right: max(10px, env(safe-area-inset-right));
    top: max(10px, env(safe-area-inset-top));
}

/* --- Keypad fills the frame: header to nav, on every screen ------------ */
/* The keypad card spans the whole main area and its keys share that
   height as a 4-row grid (1fr rows, a floor so they never crush, a cap so
   desktops do not get comically tall keys - past the cap the grid centres).
   Number display on top, call row at the bottom, nothing to scroll. */
.dialer-stack {
    height: 100%;
    min-height: 0;
    justify-content: flex-start;
}

.dialer-card {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.dialer-display,
.dialpad-actions {
    flex: 0 0 auto;
}

.dialpad-grid {
    flex: 1 1 auto;
    /* Floor: four 36px keys; banners above the keypad make the main area
       scroll rather than crush the keys. */
    min-height: calc(4 * 36px + 3 * 6px);
    grid-template-rows: repeat(4, minmax(0, 1fr));
    max-height: calc(4 * 118px + 3 * 12px);
    margin: auto 0;
}

.dial-key {
    height: 100%;
    min-height: 36px;
}

/* Landscape phones: the caption goes, keys keep a usable floor and the
   main area scrolls the little that is left. */
@media (max-height: 460px) {
    .dialer-caption {
        display: none;
    }

    .dial-key {
        min-height: 40px;
    }

    .dialer-number {
        font-size: clamp(1.3rem, 5vh, 2rem);
    }
}

/* --- Keys: digit dead-centre, letters in a fixed slot below ------------- */
/* Every digit sits at the exact centre of its key regardless of whether
   letters follow, so the whole grid lines up; letters (and "Callixy" under
   the 1) live in a slot near the bottom. Digits use the classic body face. */
.dial-key {
    position: relative;
    display: grid;
    place-items: center;
    gap: 0;
}

.dial-digit {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: clamp(1.25rem, 3.2vh, 2rem);
    line-height: 1;
    font-variant-numeric: lining-nums tabular-nums;
    transform: translateY(-4%);
}

.dial-letters {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 12%;
    text-align: center;
    font-size: clamp(0.5rem, 1.2vh, 0.68rem);
    line-height: 1;
    pointer-events: none;
}

.dial-brand {
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--primary);
}

/* Squeezed keys (banners above, short screens) drop the letter slot so
   the digit never collides with it. */
.dial-key {
    container-type: size;
}

@container (max-height: 54px) {
    .dial-letters {
        display: none;
    }
}

/* The frame height comes from the real visible viewport (set by the app
   from window.innerHeight and visualViewport), so the first paint and any
   browser-chrome change size the shell exactly; dvh remains the fallback. */
.app-body {
    height: 100dvh;
    height: var(--app-vh, 100dvh);
}

/* --- The 5 key wears the Callixy mark ----------------------------------- */
/* Like the raised dot on a classic phone's 5: a faded logo under the digit
   that scales with the key itself (container units, percentage fallback). */
.dial-key-home {
    overflow: hidden;
}

.dial-key-mark {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 72%;
    width: 78cqmin;
    height: auto;
    transform: translate(-50%, -50%);
    opacity: 0.14;
    pointer-events: none;
    user-select: none;
    z-index: 0;
}

.dial-key .dial-digit,
.dial-key .dial-letters {
    position: relative;
    z-index: 1;
}

.dial-key .dial-letters {
    position: absolute;
}

/* --- Profile, settings and saved names ---------------------------------- */
.bottom-nav {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.profile-card,
.settings-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.profile-hero {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    min-width: 0;
}

.profile-copy {
    min-width: 0;
    flex: 1 1 auto;
}

.profile-copy .section-title,
.profile-copy .section-note {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-avatar,
.call-avatar {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.profile-avatar {
    width: clamp(72px, 22vw, 96px);
    height: clamp(72px, 22vw, 96px);
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background-color: var(--primary-soft);
    color: var(--primary);
    font-size: var(--fs-xl);
    font-weight: 800;
    border: 1px solid var(--border);
    overflow: hidden;
}

.profile-avatar.is-busy {
    opacity: 0.55;
}

.profile-avatar.has-photo,
.call-avatar.has-photo {
    color: transparent;
    border-color: rgba(255, 255, 255, 0.4);
}

.profile-photo-actions {
    flex-wrap: wrap;
}

.file-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-strong);
}

.settings-copy {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1 1 auto;
}

.settings-copy strong {
    font-size: var(--fs-md);
}

.settings-copy span {
    font-size: var(--fs-sm);
    color: var(--muted);
    line-height: var(--lh-body);
}

.settings-toggle {
    flex: 0 0 auto;
    min-height: var(--touch-min);
    min-width: 64px;
    padding: 0 var(--space-3);
}

.settings-toggle.is-on {
    color: var(--success-strong);
    border-color: rgba(22, 163, 74, 0.35);
    background: var(--success-soft);
}

/* The call owns its viewport; only the content scrolls, never its hangup row. */
.call-surface { overflow: hidden; }
.call-surface-shell { position: relative; height: 100%; min-height: 0; padding: 10px 8px max(8px, env(safe-area-inset-bottom)); gap: 8px; }
.call-scroll { flex: 1 1 0; min-height: 0; width: 100%; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 12px; padding: 0 6px; }
.call-scroll > * { flex-shrink: 0; }
.video-pin { position: relative; top: auto; padding: 0; box-shadow: none; background: transparent; }
.video-dock { flex: 0 0 auto; width: 100%; margin: 0; display: flex; flex-wrap: nowrap; justify-content: center; align-items: center; gap: 4px; padding: 6px 0; }
.video-dock button { flex: 0 1 48px; width: 48px; min-width: 44px; height: 48px; min-height: 48px; padding: 0; margin: 0; border-radius: 15px; display: grid; place-items: center; }
.video-dock .danger { background: #dc3545; color: white; border: 1px solid #ed6875; }
.video-dock button svg { width: 22px; height: 22px; }
.video-dock button > span, .nav-label, .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.nav-item { min-height: 48px; }
.call-actions { flex: 0 0 auto; margin: 0; width: 100%; }
.call-actions:not(:has(.dual-actions:not(.hidden))) { display: none; }
.call-settings-panel { position: absolute; z-index: 20; left: 12px; right: 12px; bottom: calc(78px + env(safe-area-inset-bottom)); max-height: calc(100% - 100px); overflow-y: auto; padding: 16px; border: 1px solid #52617a; border-radius: 18px; background: #172338; box-shadow: 0 12px 40px #0008; }
.call-settings-panel .call-controls { margin-top: 12px; }
/* The More sheet (2.43.1): a scrim closes it, the head pulls it down or closes it. */
.call-sheet-scrim { position: absolute; inset: 0; z-index: 19; background: #0a101c66; }
.call-sheet-head { display: flex; flex-direction: column; gap: 6px; margin: -6px 0 10px; touch-action: none; cursor: grab; }
.call-sheet-grip { display: block; width: 36px; height: 4px; margin: 0 auto; border-radius: 2px; background: #52617a; }
.call-sheet-row { display: flex; align-items: center; gap: 10px; }
.call-sheet-title { flex: 1; font-size: 0.95rem; font-weight: 700; color: #e7eef9; }
.call-sheet-close { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 1px solid #52617a; border-radius: 50%; background: #1f2d45; color: #dfe7f3; cursor: pointer; }
.call-sheet-close:active { transform: scale(0.96); }
.call-settings-media { display: flex; gap: 8px; }
.call-settings-media button { min-height: 44px; flex: 1; }
.call-settings-panel .video-dock-select { width: 100%; margin-top: 12px; }
.has-video .call-scroll { gap: 8px; }
.has-video .call-primary { font-size: 1.1rem; }
.has-video .call-surface-top { min-height: 28px; }
.has-video .call-card { padding: 8px; }
.has-video .video-stage { --stage-max-h: min(45vh, 380px); }
.call-surface:fullscreen, .call-surface.is-fake-fullscreen { position: fixed; inset: 0; width: 100%; height: var(--app-vh, 100dvh); max-width: none; border-radius: 0; z-index: 2000; }
.call-surface:fullscreen .call-surface-shell, .call-surface.is-fake-fullscreen .call-surface-shell { width: 100%; max-width: 1000px; }
.call-surface:fullscreen .video-stage, .call-surface.is-fake-fullscreen .video-stage { --stage-max-h: 65vh; }
@media (max-height: 500px) and (orientation: landscape) {
    .has-video .call-surface-shell { padding-top: 4px; gap: 0; }
    .has-video .call-scroll { display: block; position: relative; }
    .has-video .call-surface-top, .has-video .call-secondary { display: none; }
    .has-video .call-primary { position: absolute; top: 6px; left: 12px; z-index: 6; font-size: .85rem; padding: 4px 8px; background: #0008; border-radius: 8px; }
    .has-video .video-pin { height: 100%; }
    .has-video .video-stage { width: 100%; height: 100%; max-height: none; aspect-ratio: auto; }
    .has-video .call-report-wrap { margin-top: 8px; }
}
.video-dock button:focus-visible, .nav-item:focus-visible { outline: 3px solid #93c5fd; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .video-dock button, .call-settings-panel { transition: none; } }

/* Invitation tools stay beside the number, with full touch targets. */
.copy-chip { min-width: 44px; min-height: 44px; display: inline-grid; place-items: center; }
.share-chip { background: var(--primary-soft); color: var(--primary); border-color: transparent; }
.copy-chip:focus-visible, .dialer-number:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.dialer-number-row { display: grid; grid-template-columns: minmax(0, 1fr) 44px; align-items: center; gap: 8px; }
input.dialer-number { min-width: 0; width: 100%; height: 48px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--text); text-align: center; direction: ltr; font-variant-numeric: tabular-nums; }
input.dialer-number::placeholder { color: var(--muted); opacity: .55; }
.paste-chip { width: 44px; height: 44px; box-shadow: none; background: var(--primary-soft); border-color: transparent; }
.field-group input, .field-group textarea, .surface-select { font-size: max(16px, 1em); }
.add-contact-button { background: #16835b; color: #fff; border-color: transparent; font-size: 30px; font-weight: 400; }
.dialpad-actions { display: flex; gap: 8px; }
.dial-call-button { flex: 1; min-width: 0; }
.settings-card { display: grid; gap: 12px; }
#reportToggleBtn, #callReportToggleBtn { min-height: 48px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-strong); color: var(--text); }
#reportToggleBtn .report-toggle-title, #callReportToggleBtn .report-toggle-title { font-size: 14px; }
#tabAbout .call-report-wrap { width: 100%; color: var(--text); }
#tabAbout .call-report-panel { color: var(--text); }
#tabAbout .surface-metric, #tabAbout .health-pill, #tabAbout .diagnostic-pill, #tabAbout .surface-diagnostics { background: var(--surface-strong); border-color: var(--border); color: var(--text); }
#tabAbout .surface-metric strong, #tabAbout .health-pill strong, #tabAbout .diagnostic-pill strong, #tabAbout .diagnostics-head strong { color: var(--text); }
.call-audio-status { margin-top: 8px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.call-quality-main { flex: 0 0 auto; width: 100%; padding: 12px 16px; margin: 0; text-align: left; }
.call-quality-main #qualitySlider { margin: 12px 0 0; width: 100%; }
.video-dock { display: grid; grid-template-columns: repeat(4, 48px); gap: 6px 12px; justify-content: center; }
.video-dock button { position: relative; flex: none; width: 48px; }
.video-dock #muteMicBtn.active, .video-dock #muteRemoteBtn.active { background: #672e3d; color: #ffbdc5; border-color: #e67486; }
.video-dock #muteMicBtn.active::after, .video-dock #muteRemoteBtn.active::after { content: ''; position: absolute; top: 20px; left: calc(50% - 15px); width: 30px; height: 2px; background: currentColor; transform: rotate(-45deg); box-shadow: 0 0 0 2px #672e3d; }
.video-dock #screenShareBtn.is-active { background: #145a45; border-color: #5bd4a5; color: #baffdf; }
.call-settings-panel { bottom: calc(128px + env(safe-area-inset-bottom)); max-height: calc(100% - 145px); }
.history-avatar.has-photo, .line-preview-avatar.has-photo { background-position: center; background-size: cover; }
.invitation-dialog { width: min(440px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow-y: auto; padding: 22px; border: 1px solid var(--border); border-radius: 24px; background: var(--surface-strong); color: var(--text); box-shadow: 0 24px 80px #10223840; }
.invitation-dialog::backdrop { background: #0c172b99; -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
.invitation-dialog .modal-head { margin-bottom: 18px; }
.invitation-dialog h2 { margin: 0; font-size: 22px; }
.share-format { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; gap: 4px; border-radius: 14px; background: var(--surface-muted, #edf1f7); }
.share-format button { min-height: 44px; border: 0; border-radius: 10px; background: transparent; color: var(--muted); font: inherit; cursor: pointer; }
.share-format button[aria-pressed="true"] { background: #fff; color: #145d47; box-shadow: 0 2px 8px #10223810; font-weight: 700; }
.invitation-text { white-space: pre-line; overflow-wrap: anywhere; font-size: 15px; line-height: 1.8; padding: 18px 0; }
#invitationImagePreview { width: 100%; max-height: 45dvh; object-fit: contain; margin: 16px 0; border-radius: 16px; }
#confirmInvitationShare { width: 100%; min-height: 48px; }
@media (min-width: 600px) { .video-dock { grid-template-columns: repeat(8, 48px); gap: 8px; } .call-settings-panel { bottom: calc(76px + env(safe-area-inset-bottom)); } }
@media (max-height: 500px) and (orientation: landscape) { .video-dock { grid-template-columns: repeat(8, 44px); gap: 4px; } .video-dock button { width: 44px; } .call-quality-main { padding: 8px 12px; } }
@media (max-width: 540px) {
    input.dialer-number.dialer-number-long { font-size: clamp(16px, 5.2vw, 26px); letter-spacing: 0; }
}

/* The state of the call sits above the fixed call dock (styled in experience.css). */
.call-summary { flex: 0 0 auto; width: 100%; padding: 0 6px; }
.call-summary .call-card { padding: 10px 12px; border-radius: 18px; }
.call-summary .call-card-detail { margin: 0; font-size: .78rem; line-height: 1.4; }
.has-video .call-scroll > .video-pin { flex: 1 1 0; min-height: 0; }
.has-video .video-stage { flex: 1 1 0; min-height: 65px; width: 100%; max-height: none; }
@media (max-height: 600px) and (orientation: portrait) {
    .has-video .call-surface-top, .has-video .call-secondary { display: none; }
    .has-video .call-primary { font-size: .85rem; }
    .has-video .video-stage { margin-top: 5px; }
}
@media (max-height: 500px) and (orientation: landscape) {
    .has-video .call-surface-shell { display: grid; grid-template-columns: minmax(0, 1fr) 280px; grid-template-rows: minmax(0, 1fr) auto; gap: 4px 12px; }
    .has-video .call-scroll { grid-column: 1; grid-row: 1; height: 100%; }
    .has-video .call-summary { grid-column: 2; grid-row: 1; align-self: center; }
    .has-video .video-dock { grid-column: 1 / -1; grid-row: 2; grid-template-columns: repeat(8, 44px); }
    .has-video .call-settings-panel { bottom: 120px; }
}

.count-chip { display: inline-grid; place-items: center; min-width: 22px; height: 22px; margin-inline-start: 6px; padding: 0 6px; border-radius: 999px; background: var(--primary-soft); color: var(--primary); font-size: .75rem; font-weight: 700; vertical-align: middle; }
.count-chip:empty { display: none; }

/* The crop step of a profile picture (avatar-crop.js, 2.37.1). */
.crop-stage {
    position: relative; width: min(100%, 320px); aspect-ratio: 1; align-self: center; border-radius: 24px; overflow: hidden;
    background: #0b1220; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none;
}
.crop-stage:active { cursor: grabbing; }
.crop-stage:focus-visible { outline: 3px solid var(--primary, #2563eb); outline-offset: 3px; }
.crop-stage canvas { display: block; width: 100%; height: 100%; }
.crop-guide { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.9); box-shadow: 0 0 0 999px rgba(11, 18, 32, 0.58); pointer-events: none; }
.crop-zoom { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; font-weight: 600; }
.crop-zoom input { width: 100%; accent-color: var(--primary, #2563eb); min-height: 44px; margin: 0; }
.crop-card .button-row > * { white-space: nowrap; padding-inline: 14px; }

/* ---------- the three hops of a call (2.39.0): this device, the server, the other side ---------- */
.call-path { display: flex; align-items: center; justify-content: center; gap: 4px; margin: 10px auto 0; max-width: 340px; }
.call-path-node { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; min-width: 60px; font-size: 0.7rem; letter-spacing: 0.02em; color: rgba(255, 255, 255, 0.72); }
.call-path-node i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); border: 1.5px solid rgba(255, 255, 255, 0.22); color: #fff; transition: background 0.2s, border-color 0.2s; }
.call-path-node b { font-weight: 600; white-space: nowrap; }
.call-path-node[data-state="ok"] i { background: rgba(34, 197, 94, 0.22); border-color: #4ade80; color: #bbf7d0; }
.call-path-node[data-state="ring"] i { background: rgba(34, 197, 94, 0.22); border-color: #4ade80; color: #bbf7d0; animation: call-path-ring 1.2s ease-in-out infinite; }
.call-path-node[data-state="wait"] i { border-color: rgba(96, 165, 250, 0.85); color: #bfdbfe; animation: call-path-pulse 1.4s ease-in-out infinite; }
.call-path-node[data-state="warn"] i { background: rgba(251, 191, 36, 0.2); border-color: #fbbf24; color: #fde68a; }
.call-path-node[data-state="off"] i { opacity: 0.55; border-style: dashed; }
.call-path-link { flex: 1 1 28px; max-width: 52px; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, 0.22); position: relative; overflow: hidden; }
.call-path-link[data-state="ok"] { background: #4ade80; }
.call-path-link[data-state="warn"] { background: #fbbf24; }
.call-path-link[data-state="off"] { background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.35) 0 4px, transparent 4px 8px); }
.call-path-link[data-state="wait"]::after { content: ''; position: absolute; inset: 0; width: 40%; background: linear-gradient(90deg, transparent, #93c5fd, transparent); animation: call-path-flow 1.1s linear infinite; }
.call-path-note { margin-top: 6px; text-align: center; font-size: 0.8rem; line-height: 1.35; color: rgba(255, 255, 255, 0.74); min-height: 1.2em; }
.call-path.hidden, .call-path-note.hidden { display: none; }
.has-video .call-path { margin-top: 4px; }
.has-video .call-path-node { min-width: 46px; font-size: 0.62rem; }
.has-video .call-path-node i { width: 26px; height: 26px; }
.has-video .call-path-node i svg { width: 14px; height: 14px; }
.has-video .call-path-note { font-size: 0.72rem; }
@keyframes call-path-flow { from { transform: translateX(-120%); } to { transform: translateX(300%); } }
@keyframes call-path-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(96, 165, 250, 0.45); } 50% { box-shadow: 0 0 0 6px rgba(96, 165, 250, 0); } }
@keyframes call-path-ring { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-12deg); } 40% { transform: rotate(12deg); } 60% { transform: rotate(-8deg); } 80% { transform: rotate(8deg); } }
@media (prefers-reduced-motion: reduce) { .call-path-node i, .call-path-link::after { animation: none; } }

/* This side's own shared screen: a card in place of the picture (2.39.0) */
/* The camera strip sits over the lower left corner of the stage: the card's words and button stay above it. */
.screen-self-card { display: grid; place-content: center; justify-items: center; gap: 8px; padding: 18px 18px clamp(70px, 28%, 120px); text-align: center; color: #fff; background: radial-gradient(120% 90% at 50% 0%, #1e3a5f 0%, #0b1324 70%); }
.screen-self-card strong { font-size: 1rem; }
.screen-self-card span { font-size: 0.8rem; line-height: 1.4; color: rgba(255, 255, 255, 0.72); max-width: 34ch; }
.screen-self-card .soft-button { margin-top: 4px; background: rgba(255, 255, 255, 0.14); color: #fff; border-color: rgba(255, 255, 255, 0.2); }
.screen-self-card.hidden { display: none; }
/* Short screens (a phone on its side): the hops give way to the words only; in full screen the card keeps its message, not its button */
@media (max-height: 480px) {
    .call-path { display: none; }
    .call-path-note { margin-top: 2px; font-size: 0.72rem; }
}
.is-immersive .screen-self-card .soft-button { display: none; }

/* Move call (2.40.0): the devices the call can go to */
.call-move-list { display: grid; gap: 8px; margin-top: 12px; }
.call-move-device { display: grid; justify-items: start; gap: 2px; width: 100%; min-height: 56px; padding: 10px 14px; text-align: start; }
.call-move-device strong { font-size: 1rem; }
.call-move-device span { font-size: 0.8rem; opacity: 0.75; }

/* Guest links (2.41.0): the owner's card */
.guest-link-box { display: grid; gap: 10px; margin: 12px 0 14px; padding: 12px; border-radius: 16px; background: rgba(37, 99, 235, 0.08); border: 1px solid rgba(37, 99, 235, 0.25); }
.guest-link-box input { width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.86rem; }
.guest-link-box .button-row { display: flex; flex-wrap: wrap; gap: 8px; }
.guest-link-box .button-row > * { flex: 1 1 auto; white-space: nowrap; }
.guest-link-row[data-state="called"] strong { color: #15803d; }
.guest-link-row[data-state="burned"], .guest-link-row[data-state="revoked"], .guest-link-row[data-state="expired"] { opacity: 0.6; }

/* Invite codes (2.43.0): the line's own codes. The code is never cut: on a
   narrow screen the buttons go under it. */
.invite-code-row { flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.invite-code-row .blocked-copy { flex: 1 1 180px; min-width: 0; }
.invite-code-row strong { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.98rem; letter-spacing: 0.05em; overflow: visible; text-overflow: clip; }
.invite-code-row[data-state="used"] strong { text-decoration: line-through; opacity: 0.55; }
.invite-code-row[data-state="used"] span, .invite-code-row[data-state="revoked"] { opacity: 0.7; }
.invite-code-row .invite-code-actions { display: flex; gap: 6px; flex: 0 0 auto; margin-inline-start: auto; }
.invite-code-row .invite-code-actions .soft-button { min-height: 38px; padding: 0 14px; font-size: 0.86rem; }

/* Sign-up by invitation (2.43.0) */
.auth-intro { margin: 0 0 4px; font-size: 0.9rem; line-height: 1.5; opacity: 0.85; }
#registerInviteStatus[data-kind="good"] { color: #15803d; }
#registerInviteStatus[data-kind="bad"] { color: #b91c1c; }
#registerInviteStatus[data-kind="wait"] { opacity: 0.7; }
/* Join in two steps (2.44.0): the code with its Paste button, then the number. */
.join-step { display: grid; gap: 14px; }
.join-step.hidden { display: none; }
.field-with-action { display: flex; gap: 8px; align-items: stretch; }
.field-with-action input { flex: 1; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.08em; }
.field-with-action .field-action { flex-shrink: 0; min-width: 76px; padding: 0 14px; }
.forgot-divider { display: flex; align-items: center; gap: 10px; font-size: 0.82rem; opacity: 0.75; }
.forgot-divider::before, .forgot-divider::after { content: ""; flex: 1; height: 1px; background: currentColor; opacity: 0.35; }
.join-back { justify-self: center; padding: 6px 10px; border: 0; background: none; color: inherit; opacity: 0.8; text-decoration: underline; cursor: pointer; font: inherit; font-size: 0.88rem; }
#registerPhone { font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }
#registerInvite { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.08em; text-transform: uppercase; }