.splash-screen { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: #1e1e2e;
}
.splash-content { text-align: center;
}
.splash-logo { width: 64px; height: 64px; margin: 0 auto 20px; border-radius: 16px; overflow: hidden;
}
.splash-text { color: rgba(255,255,255,0.7); font-family: sans-serif; font-size: 14px; margin: 0 0 16px;
}
.splash-spinner { width: 32px; height: 32px; margin: 0 auto; border: 3px solid rgba(99,102,241,0.3); border-top-color: #6366f1; border-radius: 50%; animation: spin 0.8s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg);
}
}
.login-bg { background: radial-gradient(ellipse at 20% 50%, rgba(99,102,241,0.15) 0%, transparent 50%), radial-gradient(ellipse at 80% 20%, rgba(34,197,94,0.1) 0%, transparent 50%);
}
.login-card { border: 1px solid rgba(128,128,128,0.12); backdrop-filter: blur(20px);
}
.login-logo { width: 56px; height: 56px; border-radius: 16px; background: linear-gradient(135deg, #6366f1, #8b5cf6); display: flex; align-items: center; justify-content: center; color: white;
}
.status-buttons-banner { border-bottom: 1px solid rgba(128,128,128,0.1); background: linear-gradient(to right, rgba(34,197,94,0.05), rgba(99,102,241,0.05));
}
.side-nav { border-right: 1px solid rgba(128,128,128,0.12) !important;
}
.v-theme--light .side-nav { background: #f4f5f7 !important;
}
.nav-brand-area { height: 56px; min-height: 56px; flex-shrink: 0;
}
.nav-logo { width: 32px; height: 32px; border-radius: 8px; background: linear-gradient(135deg, #6366f1, #8b5cf6); display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.nav-item { transition: all 0.15s ease;
}
.top-header { height: 56px; min-height: 56px; border-bottom: 1px solid rgba(128,128,128,0.1);
}
.status-dot { width: 8px; height: 8px; border-radius: 50%;
}
.user-avatar { background: linear-gradient(135deg, #6366f1, #8b5cf6) !important; color: white !important;
}
.main-wrapper { display: flex; flex-direction: column; min-height: 100vh;
}
.main-content { max-width: 720px; margin: 0 auto; width: 100%; flex: 1; display: flex; flex-direction: column;
}
.dialpad-center { display: flex; justify-content: center; align-items: center; flex: 1;
}
.dial-input input { text-align: center !important; font-size: 1.4rem !important; font-weight: 500 !important; letter-spacing: 1.5px !important;
}
.dialpad-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.dialpad-key { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 64px; border-radius: 16px; border: 1px solid rgba(128,128,128,0.12); background: transparent; cursor: pointer; transition: all 0.15s ease; -webkit-tap-highlight-color: transparent; color: inherit;
}
.dialpad-key:hover { background: rgba(99,102,241,0.08); border-color: rgba(99,102,241,0.3);
}
.dialpad-key:active { transform: scale(0.95); background: rgba(99,102,241,0.15);
}
.dialpad-digit { font-size: 1.25rem; font-weight: 600; line-height: 1;
}
.dialpad-sub { font-size: 0.6rem; font-weight: 500; opacity: 0.5; letter-spacing: 2px; margin-top: 2px;
}
.active-call-card { background: linear-gradient(135deg, rgba(34,197,94,0.12), rgba(34,197,94,0.04)) !important; border: 1px solid rgba(34,197,94,0.2) !important;
}
.active-call-indicator { width: 10px; height: 10px; border-radius: 50%; background: #22c55e; animation: callPulse 1.5s ease-in-out infinite;
}
@keyframes callPulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0.4);
}
50% { box-shadow: 0 0 0 8px rgba(34,197,94,0);
}
}
.call-timer { font-variant-numeric: tabular-nums;
}
.incoming-overlay { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.6); backdrop-filter: blur(8px);
}
.incoming-card { padding: 48px 40px; border-radius: 24px; border: 1px solid rgba(128,128,128,0.15); max-width: 380px; width: 100%;
}
.v-theme--dark .incoming-card { background: #1e1e2e;
}
.v-theme--light .incoming-card { background: #ffffff;
}
.incoming-pulse { position: relative; display: inline-block;
}
.incoming-pulse::before { content: ''; position: absolute; inset: -10px; border-radius: 50%; border: 2px solid rgba(99,102,241,0.5); animation: incomingRing 1.5s ease-out infinite;
}
@keyframes incomingRing {
0% { transform: scale(1); opacity: 1;
}
100% { transform: scale(1.5); opacity: 0;
}
}
.incoming-avatar { background: linear-gradient(135deg, #6366f1, #8b5cf6) !important; color: white !important;
}
.call-action-btn { transition: transform 0.15s ease;
}
.call-action-btn:active { transform: scale(0.92);
}
.history-card { border: 1px solid rgba(128,128,128,0.12) !important;
}
@media (display-mode: standalone) {
.top-header { padding-top: env(safe-area-inset-top, 0);
}
}