/* Import de la police Plus Jakarta Sans pour un look moderne */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

/* Variables CSS pour un thème Glassmorphism Pro */
:root {
    /* Palette principale - tons plus saturés */
    --primary-color: #1a6fa5;
    --primary-light: #3d8ec4;
    --primary-dark: #125a8a;
    --secondary-color: #06b6d4;

    /* Status colors with personality */
    --success-color: #10b981;
    --success-light: #34d399;
    --warning-color: #f59e0b;
    --warning-light: #fbbf24;
    --danger-color: #ef4444;
    --danger-light: #f87171;

    /* Premium glass surfaces */
    --background-color: linear-gradient(135deg, #0c2d4a 0%, #163d5c 100%);
    --surface-color: #ffffff;
    --surface-glass: rgba(255, 255, 255, 0.85);
    --surface-glass-strong: rgba(255, 255, 255, 0.95);
    --surface-glass-subtle: rgba(255, 255, 255, 0.6);
    --surface-dark: #1f2937;

    /* Consolidated background aliases */
    --bg-primary-subtle: rgba(26, 111, 165, 0.1);
    --bg-success-subtle: rgba(16, 185, 129, 0.1);
    --bg-danger-subtle: rgba(239, 68, 68, 0.1);
    --bg-warning-subtle: rgba(245, 158, 11, 0.1);
    --bg-secondary-subtle: rgba(6, 182, 212, 0.1);
    --panel-item-bg: linear-gradient(135deg, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.65) 100%);
    --panel-item-bg-hover: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.85) 100%);
    --panel-header-bg: linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.7) 100%);

    /* Typography colors */
    --text-primary: #111827;
    --text-secondary: #374151;
    --text-tertiary: #6b7280;
    --text-light: #9ca3af;
    --text-white: #ffffff;

    /* Premium borders and effects */
    --border-color: rgba(255, 255, 255, 0.3);
    --border-focus: #1a6fa5;
    --border-glow: rgba(26, 111, 165, 0.5);

    /* Layered shadows for depth */
    --shadow-light: 0 2px 8px rgba(0,0,0,0.08);
    --shadow-medium: 0 4px 16px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.06);
    --shadow-heavy: 0 12px 40px rgba(0,0,0,0.15), 0 4px 12px rgba(0,0,0,0.1);
    --shadow-color: 0 20px 40px rgba(26, 111, 165, 0.2), 0 8px 16px rgba(26, 111, 165, 0.1);
    --shadow-glow: 0 0 20px rgba(26, 111, 165, 0.3), 0 0 40px rgba(26, 111, 165, 0.1);
    --shadow-inset: inset 0 1px 1px rgba(255,255,255,0.6);

    /* Pro compact radiuses */
    --border-radius-small: 6px;
    --border-radius-medium: 8px;
    --border-radius-large: 12px;
    --border-radius-xl: 16px;

    /* Premium transitions */
    --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-medium: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    --transition-smooth: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);

    /* Panel harmonization */
    --panel-border-subtle: 1px solid rgba(255, 255, 255, 0.2);
    --focus-ring: 0 0 0 3px rgba(26, 111, 165, 0.2), 0 0 20px rgba(26, 111, 165, 0.1);
    --panel-header-font-size: 0.9375rem;
    --action-btn-size: 32px;
    --panel-item-margin: 10px;

    /* Pro spacing system */
    --space-xs: 4px;
    --space-sm: 6px;
    --space-md: 8px;
    --space-lg: 12px;
    --space-xl: 16px;

    /* Pro typography scale */
    --font-xs: 0.6875rem;   /* 11px */
    --font-sm: 0.75rem;     /* 12px */
    --font-base: 0.8125rem; /* 13px */
    --font-md: 0.875rem;    /* 14px */
    --font-lg: 0.9375rem;   /* 15px */

    /* Pro sizing */
    --input-height: 36px;
    --btn-height: 32px;
    --icon-btn-size: 28px;

    /* Hover dark variants */
    --success-dark: #059669;
    --warning-dark: #d97706;
    --danger-dark: #dc2626;

    /* Premium glow colors */
    --glow-primary: rgba(26, 111, 165, 0.4);
    --glow-success: rgba(16, 185, 129, 0.4);
    --glow-danger: rgba(239, 68, 68, 0.4);
    --glow-warning: rgba(245, 158, 11, 0.4);
}

/* Reset et base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    padding: 8px;
    line-height: 1.4;
    color: var(--text-primary);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: relative;
    overflow: hidden;
    /* Premium animated gradient background */
    background: linear-gradient(135deg, #0c2d4a 0%, #163d5c 50%, #1a6fa5 100%) !important;
    background-size: 200% 200% !important;
    animation: gradientShift 15s ease infinite;
}

/* Spécifique Safari */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    _::-webkit-full-page-media, _:future, :root body {
        background: linear-gradient(135deg, #1878ae 0%, #0e4d73 100%) !important;
        background-attachment: fixed !important;
    }
    
    _::-webkit-full-page-media, _:future, :root .history-panel {
        background: rgba(255, 255, 255, 0.85) !important;
        border: 2px solid rgba(255, 255, 255, 0.3) !important;
    }
    
    _::-webkit-full-page-media, _:future, :root .contacts-panel {
        background: rgba(255, 255, 255, 0.85) !important;
        border: 2px solid rgba(255, 255, 255, 0.3) !important;
    }
    
    _::-webkit-full-page-media, _:future, :root .stats-panel {
        background: rgba(255, 255, 255, 0.85) !important;
        border: 2px solid rgba(255, 255, 255, 0.3) !important;
    }
}

/* Premium aurora effect */
@keyframes gradientShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@keyframes auroraFloat {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.5; }
    33% { transform: translate(30px, -30px) scale(1.1); opacity: 0.7; }
    66% { transform: translate(-20px, 20px) scale(0.9); opacity: 0.4; }
}

@keyframes auroraFloat2 {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.4; }
    33% { transform: translate(-40px, 20px) scale(1.15); opacity: 0.6; }
    66% { transform: translate(25px, -25px) scale(0.85); opacity: 0.3; }
}

body::before {
    content: '';
    position: fixed;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background:
        radial-gradient(ellipse 600px 600px at 20% 80%, rgba(139, 92, 246, 0.3) 0%, transparent 50%),
        radial-gradient(ellipse 500px 500px at 80% 20%, rgba(236, 72, 153, 0.25) 0%, transparent 50%),
        radial-gradient(ellipse 400px 400px at 40% 40%, rgba(59, 130, 246, 0.2) 0%, transparent 50%);
    pointer-events: none;
    z-index: -1;
    animation: auroraFloat 20s ease-in-out infinite;
}

body::after {
    content: '';
    position: fixed;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background:
        radial-gradient(ellipse 500px 500px at 70% 70%, rgba(26, 111, 165, 0.25) 0%, transparent 50%),
        radial-gradient(ellipse 450px 450px at 30% 30%, rgba(167, 139, 250, 0.2) 0%, transparent 50%);
    pointer-events: none;
    z-index: -1;
    animation: auroraFloat2 25s ease-in-out infinite;
}

/* Container principal - Pro compact Glassmorphism */
.container {
    width: 100%;
    max-width: 360px;
    background: var(--surface-glass);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: var(--border-radius-xl);
    padding: 12px;
    box-shadow:
        var(--shadow-color),
        inset 0 1px 1px rgba(255, 255, 255, 0.4),
        inset 0 -1px 1px rgba(0, 0, 0, 0.05);
    position: relative;
    min-height: auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: all var(--transition-smooth);
    animation: containerAppear 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes containerAppear {
    0% {
        opacity: 0;
        transform: translateY(20px) scale(0.98);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.6) 20%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0.6) 80%, transparent 100%);
}

.container::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 20%;
    right: 20%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(26, 111, 165, 0.3), transparent);
    opacity: 0;
    transition: opacity var(--transition-medium);
}

.container:hover {
    box-shadow:
        var(--shadow-heavy),
        var(--shadow-glow),
        inset 0 1px 1px rgba(255, 255, 255, 0.5);
    border-color: rgba(255, 255, 255, 0.35);
}

.container:hover::after {
    opacity: 1;
}

/* Status de connexion Premium */
#connectionStatus {
    position: absolute;
    top: 16px;
    right: 16px;
    padding: 6px 12px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.85) 100%);
    color: var(--text-primary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all var(--transition-fast);
    min-height: auto;
    width: auto;
    z-index: 100;
    box-shadow:
        var(--shadow-light),
        inset 0 1px 1px rgba(255, 255, 255, 0.6);
}

#connectionStatus:hover {
    background: rgba(255, 255, 255, 1);
    box-shadow:
        var(--shadow-medium),
        0 0 15px rgba(26, 111, 165, 0.1);
    transform: translateY(-1px);
    border-color: rgba(26, 111, 165, 0.2);
}

/* Animation pulse pour l'état offline pour encourager le clic */
#connectionStatus.offline-pulse {
    animation: offline-pulse 2s ease-in-out infinite;
}

@keyframes offline-pulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 59, 48, 0.7);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 0 0 4px rgba(255, 59, 48, 0);
    }
}

.status-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    box-shadow: 0 0 8px currentColor;
    transition: all var(--transition-fast);
}

/* Glow effect for online status */
#connectionStatus.connected .status-dot {
    box-shadow: 0 0 10px var(--success-color), 0 0 20px rgba(16, 185, 129, 0.3);
}

/* Status d'appel - Pro compact glass card */
.call-status {
    text-align: center;
    font-size: var(--font-md);
    font-weight: 700;
    color: var(--text-primary);
    padding: 10px 20px;
    border-radius: var(--border-radius-large);
    background: var(--panel-header-bg);
    margin: 6px 0 12px;
    border: 1px solid rgba(255,255,255,0.4);
    box-shadow:
        var(--shadow-medium),
        inset 0 1px 1px rgba(255, 255, 255, 0.6);
    position: relative;
    overflow: hidden;
    transition: all var(--transition-medium);
}

.call-status:hover {
    box-shadow:
        var(--shadow-heavy),
        inset 0 1px 1px rgba(255, 255, 255, 0.7);
    border-color: rgba(255, 255, 255, 0.5);
}

/* Animation de composition d'appel */
.call-status.dialing #dialedNumber::after {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-left: 8px;
    border: 2px solid var(--primary-color);
    border-top: 2px solid transparent;
    border-radius: 50%;
    animation: calling-spinner 1s linear infinite;
    vertical-align: middle;
}

@keyframes calling-spinner {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Header section avec logo centré */
.header-section {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2px;
    width: 100%;
    position: relative;
}

.logo-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-container a {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.ippi-header-logo {
    height: 48px;
    width: auto;
    opacity: 0.9;
    transition: opacity var(--transition-medium);
}

.ippi-header-logo:hover {
    opacity: 1;
}

.header-spacer {
    display: none; /* Plus besoin avec le positionnement absolu */
}

/* Style pour l'icône ippi dans le texte (gardé pour compatibilité) */
.ippi-logo {
    height: 1.8em;
    width: auto;
    vertical-align: middle;
    display: inline-block;
}

.call-status::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    animation: shimmer 3s infinite;
}

@keyframes shimmer {
    0% { left: -100%; }
    100% { left: 100%; }
}

#dialedNumber {
    font-weight: 400;
    margin-bottom: 8px;
    position: relative;
    z-index: 1;
}

#callTimer {
    font-size: 1.1rem;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.05em;
    position: relative;
    z-index: 1;
}

/* Reset minimal pour les boutons — plus de glassmorphism global */
button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: transparent;
    padding: 0;
    margin: 0;
}

button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ============================================
   .wp-btn — Système de boutons Pro compact
   ============================================ */
.wp-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    min-height: var(--btn-height);
    padding: var(--space-sm) var(--space-lg);
    border: 1px solid rgba(255,255,255,0.4);
    border-radius: var(--border-radius-medium);
    background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.8) 100%);
    color: var(--text-secondary);
    box-shadow: var(--shadow-medium), inset 0 1px 1px rgba(255, 255, 255, 0.6);
    font-size: var(--font-sm);
    font-weight: 600;
    letter-spacing: 0.025em;
    transition: all var(--transition-fast);
    position: relative;
    overflow: hidden;
    flex: 1;
}

.wp-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0.95) 100%);
    box-shadow: var(--shadow-heavy), 0 0 20px rgba(26, 111, 165, 0.15);
    transform: translateY(-1px);
    border-color: rgba(26, 111, 165, 0.3);
}

.wp-btn:active:not(:disabled) {
    transform: translateY(0) scale(0.98);
    box-shadow: var(--shadow-light);
    transition: all 0.1s ease;
}

.wp-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: var(--shadow-light);
}

/* Vertical layout (dialer buttons with icon + label) */
.wp-btn--vertical {
    flex-direction: column;
    padding: var(--space-sm);
}

/* Icon-only round button */
.wp-btn--icon {
    width: var(--icon-btn-size);
    height: var(--icon-btn-size);
    min-height: var(--icon-btn-size);
    min-width: var(--icon-btn-size);
    max-width: var(--icon-btn-size);
    max-height: var(--icon-btn-size);
    border-radius: 50%;
    padding: 0;
    flex: none;
    font-size: 16px;
    line-height: 1;
}

/* Color modifiers */
.wp-btn--primary {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
    color: var(--text-white);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 15px var(--glow-primary), inset 0 1px 1px rgba(255, 255, 255, 0.3);
}
.wp-btn--primary:hover:not(:disabled) {
    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-color) 100%);
    box-shadow: 0 8px 30px var(--glow-primary), 0 0 20px var(--glow-primary);
    transform: translateY(-1px);
}

.wp-btn--success {
    background: linear-gradient(135deg, var(--success-color) 0%, var(--success-light) 100%);
    color: var(--text-white);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 15px var(--glow-success), inset 0 1px 1px rgba(255, 255, 255, 0.3);
}
.wp-btn--success:hover:not(:disabled) {
    background: linear-gradient(135deg, var(--success-dark) 0%, var(--success-color) 100%);
    box-shadow: 0 8px 30px var(--glow-success), 0 0 20px var(--glow-success);
    transform: translateY(-1px);
}

.wp-btn--danger {
    background: linear-gradient(135deg, var(--danger-color) 0%, var(--danger-light) 100%);
    color: var(--text-white);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 15px var(--glow-danger), inset 0 1px 1px rgba(255, 255, 255, 0.3);
}
.wp-btn--danger:hover:not(:disabled) {
    background: linear-gradient(135deg, var(--danger-dark) 0%, var(--danger-color) 100%);
    box-shadow: 0 8px 30px var(--glow-danger), 0 0 20px var(--glow-danger);
    transform: translateY(-1px);
}

.wp-btn--warning {
    background: linear-gradient(135deg, var(--warning-color) 0%, var(--warning-light) 100%);
    color: var(--text-white);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 15px var(--glow-warning), inset 0 1px 1px rgba(255, 255, 255, 0.3);
}
.wp-btn--warning:hover:not(:disabled) {
    background: linear-gradient(135deg, var(--warning-dark) 0%, var(--warning-color) 100%);
    box-shadow: 0 8px 30px var(--glow-warning), 0 0 20px var(--glow-warning);
    transform: translateY(-1px);
}

.wp-btn--ghost {
    background: transparent;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: none;
}
.wp-btn--ghost:hover:not(:disabled) {
    background: rgba(0, 0, 0, 0.04);
    box-shadow: none;
    transform: none;
}

/* Colored button variants */
.wp-btn.btn-success {
    background: linear-gradient(135deg, var(--success-color) 0%, var(--success-light) 100%);
    color: var(--text-white);
    border-color: rgba(255,255,255,0.2);
    box-shadow: 0 4px 15px var(--glow-success), inset 0 1px 1px rgba(255,255,255,0.3);
}
.wp-btn.btn-success:hover:not(:disabled) { background: linear-gradient(135deg, var(--success-dark) 0%, var(--success-color) 100%); box-shadow: 0 8px 30px var(--glow-success); transform: translateY(-1px); }

.wp-btn.btn-danger {
    background: linear-gradient(135deg, var(--danger-color) 0%, var(--danger-light) 100%);
    color: var(--text-white);
    border-color: rgba(255,255,255,0.2);
    box-shadow: 0 4px 15px var(--glow-danger), inset 0 1px 1px rgba(255,255,255,0.3);
}
.wp-btn.btn-danger:hover:not(:disabled) { background: linear-gradient(135deg, var(--danger-dark) 0%, var(--danger-color) 100%); box-shadow: 0 8px 30px var(--glow-danger); transform: translateY(-1px); }

.wp-btn.btn-warning {
    background: linear-gradient(135deg, var(--warning-color) 0%, var(--warning-light) 100%);
    color: var(--text-white);
    border-color: rgba(255,255,255,0.2);
    box-shadow: 0 4px 15px var(--glow-warning), inset 0 1px 1px rgba(255,255,255,0.3);
}
.wp-btn.btn-warning:hover:not(:disabled) { background: linear-gradient(135deg, var(--warning-dark) 0%, var(--warning-color) 100%); box-shadow: 0 8px 30px var(--glow-warning); transform: translateY(-1px); }

.wp-btn.btn-primary {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
    color: var(--text-white);
    border-color: rgba(255,255,255,0.2);
    box-shadow: 0 4px 15px var(--glow-primary), inset 0 1px 1px rgba(255,255,255,0.3);
}
.wp-btn.btn-primary:hover:not(:disabled) { background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-color) 100%); box-shadow: 0 8px 30px var(--glow-primary); transform: translateY(-1px); }

/* Layout des boutons - Grid compact */
.buttons {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 6px;
    margin: 4px 0 8px 0;
}

/* Style spécial pour les boutons dans le panneau d'ajout */
.add-call-panel .buttons {
    margin: 8px 0 4px 0;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    max-width: 280px;
    margin-left: auto;
    margin-right: auto;
    gap: 8px;
}

.add-call-panel .buttons #btnCancelAddCall {
    grid-column: 1 / -1;
    justify-self: center;
    width: 50%;
}

/* Icônes et labels */
.btn-icon {
    width: 18px;
    height: 18px;
    stroke-width: 2;
    opacity: 0.9;
}

/* Support pour Phosphor Icons */
.btn-icon.ph-light {
    font-size: 20px;
    width: auto;
    height: auto;
    stroke-width: unset;
    display: inline-block;
    color: currentColor;
}

.btn-label {
    font-size: var(--font-xs);
    font-weight: 500;
    color: inherit;
    line-height: 1.1;
}

/* Champs de saisie Pro compact */
input[type="text"] {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: var(--border-radius-medium);
    font-size: var(--font-base);
    margin-bottom: 8px;
    transition: all var(--transition-fast);
    background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.85) 100%);
    color: var(--text-primary);
    font-family: inherit;
    flex: 1;
    height: 40px;
    box-sizing: border-box;
    box-shadow:
        var(--shadow-light),
        inset 0 1px 2px rgba(255, 255, 255, 0.8);
}

input[type="text"]:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow:
        var(--focus-ring),
        0 0 20px rgba(26, 111, 165, 0.15);
    background: rgba(255, 255, 255, 1);
}

input[type="text"]:disabled {
    background: rgba(245, 245, 245, 0.6);
    opacity: 0.6;
    cursor: not-allowed;
    color: var(--text-light);
    box-shadow: none;
}

input[type="text"]::placeholder {
    color: var(--text-tertiary);
    font-weight: 400;
}

input[type="text"]:disabled::placeholder {
    color: var(--text-light);
}

/* Panels Premium avec glass effect */
.dual-call-container,
.add-call-panel {
    display: none;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--border-radius-medium);
    padding: 12px;
    margin-bottom: 12px;
    background: linear-gradient(135deg, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.6) 100%);
    box-shadow:
        var(--shadow-medium),
        inset 0 1px 1px rgba(255, 255, 255, 0.5);
    animation: panelSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes panelSlideIn {
    0% {
        opacity: 0;
        transform: translateY(15px) scale(0.98);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Réduire l'espace en dessous du panneau d'ajout et optimiser le padding interne */
.add-call-panel {
    margin-bottom: 4px;
    padding: 8px 8px 4px 8px; /* Réduire le padding du bas */
}

/* Conteneur pour l'input et le bouton carnet d'adresses - EXACT copy de input-section */
.add-call-input {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.add-call-input input[type="text"] {
    margin-bottom: 0;
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.call-item {
    background: linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.7) 100%);
    padding: 14px;
    border-radius: var(--border-radius-medium);
    margin-bottom: 12px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    transition: all var(--transition-fast);
    box-shadow: var(--shadow-light);
}

.call-item:last-child {
    margin-bottom: 0;
}

.call-active {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(16, 185, 129, 0.05) 100%);
    border-color: rgba(16, 185, 129, 0.4);
    box-shadow:
        0 0 0 1px rgba(16, 185, 129, 0.2),
        0 0 20px rgba(16, 185, 129, 0.1);
}

.call-info {
    font-weight: 600;
    margin-bottom: 10px;
    text-align: center;
    color: var(--text-primary);
}

.call-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}

.call-actions button {
    flex: none;
    padding: 8px 12px;
    font-size: 0.7rem;
    gap: 4px;
    min-height: auto;
}

.call-actions .btn-icon {
    width: 18px;
    height: 18px;
}

.common-dual-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}

/* Clavier DTMF Pro compact */
.keypad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-top: 8px;
    padding: 8px;
    background: linear-gradient(135deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.3) 100%);
    border-radius: var(--border-radius-medium);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.keypad button {
    background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(240,240,245,0.95) 100%);
    border: 1px solid rgba(200, 200, 210, 0.4);
    border-top-color: rgba(255, 255, 255, 0.8);
    border-radius: var(--border-radius-small);
    padding: 6px 4px;
    height: 44px;
    min-height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.08),
        0 4px 8px rgba(0, 0, 0, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        inset 0 -1px 0 rgba(0, 0, 0, 0.03);
    transition: all var(--transition-fast);
}

.keypad button:disabled {
    background: linear-gradient(180deg, rgba(245,245,245,0.7) 0%, rgba(235,235,240,0.6) 100%);
    color: var(--text-light);
    cursor: not-allowed;
    opacity: 0.5;
    box-shadow: none;
    border-color: rgba(200, 200, 210, 0.2);
}

.keypad button:disabled .dtmf-digit,
.keypad button:disabled .dtmf-letters {
    color: var(--text-light);
}

.keypad button:hover:not(:disabled) {
    background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(248,248,252,0.98) 100%);
    border-color: rgba(26, 111, 165, 0.35);
    border-top-color: rgba(255, 255, 255, 0.9);
    transform: translateY(-1px);
    box-shadow:
        0 4px 8px rgba(0, 0, 0, 0.1),
        0 6px 12px rgba(26, 111, 165, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 1),
        inset 0 -1px 0 rgba(0, 0, 0, 0.02);
}

.keypad button:active:not(:disabled) {
    transform: translateY(1px);
    background: linear-gradient(180deg, rgba(245,245,250,0.95) 0%, rgba(250,250,255,0.98) 100%);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.1),
        inset 0 2px 4px rgba(0, 0, 0, 0.06),
        inset 0 1px 2px rgba(0, 0, 0, 0.04);
    border-top-color: rgba(200, 200, 210, 0.5);
    transition: all 0.08s ease;
}

.keypad button:hover:not(:disabled) .dtmf-digit {
    color: var(--primary-dark);
}

.keypad button:hover:not(:disabled) .dtmf-letters {
    color: var(--text-secondary);
}

.dtmf-digit {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
    text-align: center;
    width: 100%;
    transition: color var(--transition-fast);
}

.dtmf-letters {
    font-size: 0.55rem;
    color: var(--text-tertiary);
    font-weight: 600;
    letter-spacing: 0.5px;
    margin-top: 2px;
    text-align: center;
    width: 100%;
    text-transform: uppercase;
}

/* --- Input clear button (X) --- */
.input-clear-btn {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    display: none;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.08);
    color: var(--text-secondary);
    cursor: pointer;
    z-index: 5;
    padding: 0;
    border: none;
    font-size: 12px;
    line-height: 1;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.input-clear-btn.visible {
    display: flex;
}

.input-clear-btn:hover {
    background: rgba(0, 0, 0, 0.16);
    color: var(--text-primary);
}

.input-clear-btn:active {
    background: rgba(0, 0, 0, 0.24);
}

/* Padding-right on inputs that have a clear button */
.input-section .awesomplete input[type="text"],
.add-call-input .awesomplete input[type="text"],
.search-container #contactsSearch {
    padding-right: 32px;
}

/* Autocomplete styling - Style panel cohérent */
.awesomplete {
    width: 100% !important;
}

.awesomplete > ul {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--border-radius-medium);
    box-shadow: var(--shadow-medium);
    margin-top: 4px;
    padding: 8px;
    max-height: 35vh;
    overflow-y: auto;
}

.awesomplete > ul > li {
    display: flex;
    align-items: center;
    padding: 12px;
    margin-bottom: 8px;
    background: linear-gradient(135deg, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.65) 100%);
    border-radius: var(--border-radius-medium);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all var(--transition-medium);
    cursor: pointer;
}

.awesomplete > ul > li:last-child {
    margin-bottom: 0;
}

.awesomplete > ul > li:hover {
    background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.85) 100%);
    box-shadow: var(--shadow-medium);
    transform: translateY(-1px);
}

.awesomplete > ul > li[aria-selected="true"] {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
    color: white;
}

/* Structure pour les éléments d'autocomplete */
.awesomplete > ul > li .autocomplete-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    flex-shrink: 0;
}

.awesomplete > ul > li[aria-selected="true"] .autocomplete-avatar {
    background: rgba(255, 255, 255, 0.2);
}

.awesomplete > ul > li .autocomplete-avatar i {
    font-size: 16px;
    color: white;
}

.awesomplete > ul > li .autocomplete-info {
    flex: 1;
    min-width: 0;
}

.awesomplete > ul > li .autocomplete-name {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-primary);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.awesomplete > ul > li[aria-selected="true"] .autocomplete-name {
    color: white;
}

.awesomplete > ul > li .autocomplete-details {
    color: var(--text-secondary);
    font-size: 0.8rem;
}

.awesomplete > ul > li[aria-selected="true"] .autocomplete-details {
    color: rgba(255, 255, 255, 0.8);
}

/* Styles pour les popups SweetAlert2 */
.swal-call-popup {
    font-family: inherit;
    border-radius: var(--border-radius-large);
    box-shadow: var(--shadow-heavy);
    background: var(--surface-color);
}

.swal-call-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 12px;
}

.swal-call-content {
    font-size: 1rem;
    color: var(--text-primary);
}

.btn-accept {
    background-color: var(--success-color) !important;
    color: white !important;
    border: none !important;
    border-radius: var(--border-radius-medium) !important;
    padding: 12px 24px !important;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    transition: all var(--transition-fast);
}

.swal2-popup .swal2-actions .btn-accept:hover,
.swal2-actions .btn-accept:hover,
.btn-accept:hover {
    background-color: var(--success-light) !important;
    background: var(--success-light) !important;
    color: #ffffff !important;
    border-color: var(--success-light) !important;
    transform: translateY(-1px);
    box-shadow: var(--shadow-medium);
}

.btn-reject {
    background-color: var(--danger-color) !important;
    color: white !important;
    border: none !important;
    border-radius: var(--border-radius-medium) !important;
    padding: 12px 24px !important;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    transition: all var(--transition-fast);
}

.swal2-popup .swal2-actions .btn-reject:hover,
.swal2-actions .btn-reject:hover,
.btn-reject:hover {
    background-color: var(--danger-light) !important;
    background: var(--danger-light) !important;
    color: #ffffff !important;
    border-color: var(--danger-light) !important;
    transform: translateY(-1px);
    box-shadow: var(--shadow-medium);
}

/* Styles pour tous les boutons SweetAlert2 (pas seulement les appels) */
.swal2-confirm:hover,
.swal2-popup .swal2-confirm:hover,
.swal2-actions .swal2-confirm:hover {
    background-color: var(--success-dark) !important;
    background: var(--success-dark) !important;
    color: white !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;
    border-color: var(--success-dark) !important;
}

.swal2-cancel:hover,
.swal2-popup .swal2-cancel:hover,
.swal2-actions .swal2-cancel:hover {
    background-color: var(--danger-dark) !important;
    background: var(--danger-dark) !important;
    color: white !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;
    border-color: var(--danger-dark) !important;
}

/* Panel d'erreur */
.error-panel {
    animation: slideInDown 0.3s ease;
    font-weight: 500;
}

@keyframes slideInDown {
    from {
        opacity: 0;
        transform: translate(-50%, -20px);
    }
    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

/* Animation d'onde concentrique pour les boutons actifs */
@keyframes pulse-ring {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.7;
    }
    100% {
        transform: scale(1.2);
        opacity: 0;
    }
}

@keyframes pulse-button {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}


/* Responsive design */
@media (max-width: 440px) {
    body {
        padding: 10px;
    }
    
    .container {
        padding: 20px;
        margin: 0;
        border-radius: var(--border-radius-medium);
        min-height: calc(100vh - 20px);
    }
    
    #connectionStatus {
        position: relative;
        top: 0;
        right: 0;
        margin-bottom: 20px;
        align-self: flex-end;
    }
    
    .call-status {
        margin-top: 20px;
    }
    
    .buttons {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
    }
    
    .keypad {
        gap: 8px;
    }
}


/* Boutons actifs avec animation d'onde concentrique */
.button-active,
.wp-btn.button-active:hover:not(:disabled) {
    position: relative;
    background: linear-gradient(135deg, var(--warning-color) 0%, var(--warning-light) 100%);
    color: var(--text-white);
    border-color: rgba(255,255,255,0.2);
    animation: pulse-button 2s ease-in-out infinite;
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7);
}

.button-active::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(245, 158, 11, 0.3);
    transform: translate(-50%, -50%);
    animation: pulse-ring 2s ease-out infinite;
    z-index: -1;
    pointer-events: none;
}

.button-muted,
.wp-btn.button-muted:hover:not(:disabled) {
    position: relative;
    background: linear-gradient(135deg, var(--warning-color) 0%, var(--warning-light) 100%);
    color: var(--text-white);
    border-color: rgba(255,255,255,0.2);
    animation: pulse-button 2s ease-in-out infinite;
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7);
}

.button-muted::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(245, 158, 11, 0.3);
    transform: translate(-50%, -50%);
    animation: pulse-ring 2s ease-out infinite;
    z-index: -1;
    pointer-events: none;
}

/* Style spécial pour le bouton Ajouter actif */
.button-add-active,
.wp-btn.button-add-active:hover:not(:disabled) {
    position: relative;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
    color: var(--text-white);
    border-color: rgba(255,255,255,0.2);
    animation: pulse-button 2s ease-in-out infinite;
    box-shadow: 0 0 0 0 rgba(26, 111, 165, 0.7);
}

.button-add-active::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(26, 111, 165, 0.3);
    transform: translate(-50%, -50%);
    animation: pulse-ring 2s ease-out infinite;
    z-index: -1;
    pointer-events: none;
}

/* Amélioration de l'accessibilité */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .status-dot {
        animation: none;
    }
    
    .button-active,
    .button-muted {
        animation: none !important;
    }
    
    .button-active::before,
    .button-muted::before {
        animation: none !important;
    }
}

/* Focus visible pour l'accessibilité clavier */
button:focus-visible,
input:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* États haute résolution */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
    .btn-icon {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* ===========================================
   HISTORIQUE DES APPELS
   =========================================== */

/* Bouton d'historique */
.input-section {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.input-section input[type="text"] {
    margin-bottom: 0;
}

.history-toggle {
    position: relative;
    background: linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.7) 100%);
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: var(--border-radius-medium);
    box-shadow: var(--shadow-medium);
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0;
    height: 40px;
    min-width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    transition: all var(--transition-medium);
    flex-shrink: 0;
    line-height: 1;
    overflow: visible;
}

.history-toggle::before {
    content: '';
    position: absolute;
    inset: -8px;
}

.history-toggle:hover {
    background: linear-gradient(135deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0.9) 100%);
    box-shadow: var(--shadow-heavy);
    transform: translateY(-3px) scale(1.02);
    border-color: rgba(26, 111, 165, 0.3);
    color: var(--text-primary);
}

.history-toggle svg {
    width: 20px;
    height: 20px;
    stroke-width: 2;
}

.history-toggle.active {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
    color: white;
    border-color: var(--primary-color);
    box-shadow: 0 4px 15px rgba(26, 111, 165, 0.4);
}

.history-toggle.active:hover {
    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-color) 100%);
    box-shadow: 0 8px 25px rgba(26, 111, 165, 0.6);
    transform: translateY(-4px) scale(1.03);
    color: white;
    border-color: var(--primary-dark);
}

/* Bouton stats actif */
#btnStats.active {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
    color: white;
    border-color: var(--primary-color);
    box-shadow: 0 4px 15px rgba(26, 111, 165, 0.4);
}

#btnStats.active:hover {
    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-color) 100%);
    box-shadow: 0 8px 25px rgba(26, 111, 165, 0.6);
    transform: translateY(-1px);
    color: white;
    border-color: var(--primary-dark);
}

#btnStats.active .btn-label,
#btnStats.active:hover .btn-label {
    color: white;
}

.history-toggle .missed-indicator {
    position: absolute;
    top: -8px;
    right: -8px;
    background: var(--danger-color);
    color: white;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 10px;
    min-width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    line-height: 1;
    z-index: 10;
    box-shadow: var(--shadow-light);
}

.history-toggle:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.history-toggle:disabled svg {
    opacity: 0.3;
    color: var(--text-light);
}

.history-toggle:disabled:hover {
    transform: none;
    box-shadow: var(--shadow-medium);
    background: linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.7) 100%);
}

/* Panneau d'historique */
.history-panel {
    position: fixed;
    top: 0;
    right: -360px;
    width: 340px;
    height: 100vh;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-left: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.2);
    transition: right var(--transition-medium);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.history-panel.visible {
    right: 0;
}

.history-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: var(--panel-border-subtle);
    background: var(--panel-header-bg);
    flex-shrink: 0;
}

.history-header-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.history-header h3 {
    margin: 0;
    font-size: var(--panel-header-font-size);
    font-weight: 600;
    color: var(--text-primary);
    flex: 1;
    text-align: left;
}

/* Panel icon buttons — shared base for header close/action buttons */
.history-clear,
.history-close,
.contacts-add-btn,
.contacts-refresh-btn,
.contacts-close,
.close-btn,
.settings-close,
.cloud-refresh,
.cloud-close,
.contact-modal-close {
    width: var(--icon-btn-size);
    height: var(--icon-btn-size);
    min-width: var(--icon-btn-size);
    min-height: var(--icon-btn-size);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
    font-size: 16px;
    line-height: 1;
    flex-shrink: 0;
}

.history-clear {
    background: var(--bg-danger-subtle);
    color: var(--danger-light);
}

.history-clear:hover {
    background: rgba(239, 68, 68, 0.2);
    color: var(--danger-color);
}

.history-close,
.contacts-close,
.close-btn,
.settings-close,
.cloud-refresh,
.cloud-close,
.contact-modal-close {
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
}

.history-close:hover,
.contacts-close:hover,
.close-btn:hover,
.settings-close:hover,
.cloud-refresh:hover,
.cloud-close:hover,
.contact-modal-close:hover {
    background: rgba(0, 0, 0, 0.06);
    color: var(--text-primary);
}

/* Filtres */
.history-filters {
    display: flex;
    padding: 8px 12px;
    gap: 6px;
    flex-shrink: 0;
}

.filter-btn {
    background: linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.7) 100%);
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: var(--border-radius-medium);
    box-shadow: var(--shadow-light);
    cursor: pointer;
    padding: var(--space-sm);
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    transition: all var(--transition-medium);
    min-height: var(--btn-height);
    font-family: inherit;
    font-weight: 600;
}

.filter-btn:hover {
    background: linear-gradient(135deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0.9) 100%);
    box-shadow: var(--shadow-medium);
    transform: translateY(-1px);
    border-color: rgba(26, 111, 165, 0.3);
}

.filter-btn.active {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
    color: var(--text-white);
    border-color: var(--primary-color);
    box-shadow: 0 4px 15px rgba(26, 111, 165, 0.4);
}

.filter-btn.active:hover {
    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-color) 100%);
    box-shadow: 0 8px 25px rgba(26, 111, 165, 0.6);
}

.filter-btn .btn-icon {
    font-size: 16px;
}

.filter-btn .btn-label {
    font-size: var(--font-xs);
    font-weight: 500;
    color: var(--text-secondary);
    line-height: 1.1;
}

.filter-btn:hover:not(.active) .btn-label { color: var(--text-primary); }
.filter-btn.active .btn-label { color: white; }

/* Liste d'historique */
.history-list {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
}

.history-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    color: var(--text-tertiary);
    text-align: center;
}

.history-empty .empty-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 15px;
    opacity: 0.5;
    stroke-width: 1.5;
}

.history-empty .empty-icon svg {
    width: 48px;
    height: 48px;
    stroke-width: 1.5;
}

.history-empty p {
    margin: 0;
    font-size: 16px;
}

/* Base commune pour les items de panneau */
.panel-item {
    display: flex;
    align-items: center;
    padding: 8px 10px;
    margin-bottom: var(--panel-item-margin);
    background: var(--panel-item-bg);
    border-radius: var(--border-radius-medium);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all var(--transition-medium);
    cursor: pointer;
}

.panel-item:hover {
    background: var(--panel-item-bg-hover);
    box-shadow: var(--shadow-medium);
    transform: translateY(-1px);
}

/* Entrées d'historique - héritent de panel-item */
.history-entry {
    margin-bottom: var(--panel-item-margin);
}

/* Bordures colorées supprimées - seul l'avatar indique le type */

/* Avatar/icône commune pour les items de panneau */
.panel-item-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
}

.panel-item-avatar i {
    font-size: 16px;
    color: white;
}

/* Icône d'historique - hérite de panel-item-avatar avec couleurs par type */
.history-icon {
    /* Couleur par défaut héritée de .panel-item-avatar */
}

.history-icon.history-missed {
    background: linear-gradient(135deg, var(--danger-color) 0%, var(--danger-light) 100%);
}

.history-icon.history-outgoing {
    background: linear-gradient(135deg, var(--success-color) 0%, var(--success-light) 100%);
}

.history-icon.history-incoming {
    background: linear-gradient(135deg, var(--warning-color) 0%, var(--warning-light) 100%);
}

/* Informations communes pour les items de panneau */
.panel-item-info {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.panel-item-name {
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
    font-size: 0.9rem;
}

.panel-item-details {
    color: var(--text-secondary);
    font-size: 0.8rem;
}

/* Classes spécifiques héritant de la base */  
.history-info {
    /* Hérite de panel-item-info - identique */
}

.history-name {
    /* Hérite de panel-item-name - identique */  
}



/* Nouvelle structure d'affichage historique */
.history-line {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.history-date {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    font-weight: 500;
}

.history-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 1px 0;
}

.history-number {
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-family: 'Courier New', monospace;
}

.history-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    min-width: 50px;
    margin-right: 8px;
}

.history-duration {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    font-weight: 500;
}

/* Conteneur pour les boutons d'actions */
.history-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* Action buttons in panels (call, user, edit, cloud actions) — shared round style */
.history-call-btn, .history-user-btn, .contact-edit-btn, .cloud-action-btn {
    color: white;
    width: var(--action-btn-size);
    height: var(--action-btn-size);
    min-width: var(--action-btn-size);
    min-height: var(--action-btn-size);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
    font-size: 16px;
    line-height: 1;
}

.history-call-btn { background: var(--success-color); }
.history-user-btn { background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%); }

.history-call-btn i, .history-user-btn i { font-size: 16px; }

.history-call-btn:hover { transform: scale(1.1); background: var(--success-dark); box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4); }
.history-user-btn:hover { transform: scale(1.1); box-shadow: 0 4px 12px rgba(26, 111, 165, 0.4); }

.history-call-btn.disabled,
.history-user-btn.disabled {
    background: var(--text-light);
    color: var(--surface-color);
    opacity: 0.5;
    cursor: not-allowed;
}

.history-call-btn.disabled:hover,
.history-user-btn.disabled:hover {
    opacity: 0.5;
    transform: none;
}

/* Footer */
.history-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px 12px;
    border-top: var(--panel-border-subtle);
    flex-shrink: 0;
}

.history-footer .btn-secondary {
    padding: 8px 16px;
    font-size: 16px;
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--text-primary);
    cursor: pointer;
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    gap: 6px;
}

.history-footer .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
}

.history-footer .btn-secondary .btn-icon {
    font-size: 16px;
}

.history-footer .btn-secondary .btn-label {
    font-size: 16px;
    font-weight: 500;
}

.history-stats {
    font-size: 14px;
    color: var(--text-tertiary);
    font-weight: 500;
}

/* Responsive historique */
@media (max-width: 440px) {
    .history-panel {
        width: 100vw;
        right: -100vw;
    }
    
    .history-panel.visible {
        right: 0;
    }
    
    .history-filters {
        flex-wrap: wrap;
        gap: 8px;
        padding: 12px 15px;
    }
    
    .filter-btn {
        min-width: 80px;
        flex: none;
    }
    
    .history-entry {
        padding: 10px 8px;
    }
    
    .history-name {
        font-size: 15px;
    }
    
}

/* ========================
   CONTACTS PANEL
   ======================== */

.contacts-panel {
    position: fixed;
    top: 0;
    right: -360px;
    width: 340px;
    height: 100vh;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-left: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.2);
    transition: right var(--transition-medium);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.contacts-panel.visible {
    right: 0;
}

/* --- Header (same pattern as history-header) --- */
.contacts-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: var(--panel-border-subtle);
    background: var(--panel-header-bg);
    flex-shrink: 0;
}

.contacts-header h3 {
    margin: 0;
    font-size: var(--panel-header-font-size);
    font-weight: 600;
    color: var(--text-primary);
    flex: 1;
    text-align: left;
}

.contacts-header-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* Contacts header button colors — size/shape from shared base */
.contacts-add-btn {
    background: var(--bg-primary-subtle);
    color: var(--primary-color);
}
.contacts-add-btn:hover {
    background: rgba(26, 111, 165, 0.2);
    color: var(--primary-dark);
}

.contacts-refresh-btn {
    background: var(--bg-secondary-subtle);
    color: var(--secondary-color);
}
.contacts-refresh-btn:hover {
    background: rgba(6, 182, 212, 0.2);
}

/* --- Search --- */
.contacts-search {
    padding: 8px 12px;
    border-bottom: var(--panel-border-subtle);
}

.contacts-panel .search-container {
    position: relative;
    display: flex;
    align-items: center;
}

.contacts-panel .search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-light);
    font-size: 16px;
    line-height: 1;
    z-index: 1;
    pointer-events: none;
}

#contactsSearch {
    width: 100%;
    padding: 10px 12px 10px 40px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-medium);
    background: var(--surface-color);
    font-size: 0.9rem;
    font-family: inherit;
    margin-bottom: 0;
    transition: all var(--transition-fast);
}

#contactsSearch:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: var(--focus-ring);
}

/* --- Content area --- */
.contacts-content {
    flex: 1;
    display: flex;
    overflow: hidden;
}

/* --- Alphabet nav --- */
.alphabet-nav {
    width: 28px;
    padding: 4px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    border-right: var(--panel-border-subtle);
    background: linear-gradient(180deg, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.6) 100%);
    overflow: hidden;
    height: 100%;
}

.alphabet-nav::-webkit-scrollbar {
    display: none;
}

.alphabet-letter {
    width: 18px;
    flex: 1 1 auto;
    min-height: 8px;
    background: transparent;
    color: var(--text-tertiary);
    font-size: 0.55rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
    transition: all var(--transition-fast);
    line-height: 1;
}

.alphabet-letter:hover {
    background: var(--primary-color);
    color: white;
    transform: scale(1.1);
}

.alphabet-letter.active {
    background: var(--primary-color);
    color: white;
    box-shadow: 0 1px 4px rgba(26, 111, 165, 0.3);
}

.alphabet-spacer {
    flex: 1 1 auto;
    width: 18px;
    min-height: 4px;
    pointer-events: none;
}

/* --- Contact list --- */
.contacts-list {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
}

/* ========================
   CONTACTS - Items (flat, like history entries)
   ======================== */

/* Contact items use .panel-item base — no extra card border */
.contact-item {
    align-items: flex-start;
    margin-bottom: var(--panel-item-margin);
}

.contact-item:hover {
    transform: translateY(-1px);
}

.contact-item:hover .contact-info {
    overflow: visible;
}

.contact-item:hover .contact-line:not(.contact-detail) {
    overflow: visible;
    white-space: normal;
    word-break: break-word;
}

.contact-item:hover .contact-company {
    overflow: visible;
    white-space: normal;
    word-break: break-word;
}

/* --- "My card" item --- */
.contact-item--me {
    background: var(--bg-primary-subtle);
}

/* --- Avatar --- */
.contact-avatar {
    margin-top: 2px;
}

.contact-avatar.type-internal {
    background: linear-gradient(135deg, var(--success-color), var(--success-light));
}

.contact-avatar.type-company {
    background: linear-gradient(135deg, var(--warning-color), var(--warning-light));
}

.contact-avatar.type-external {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
}

/* --- Contact info --- */
.contact-info {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.contact-line.contact-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 1px 0;
}

.contact-line.contact-detail {
    font-size: 0.75rem;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 2px 4px;
    flex-wrap: wrap;
}

/* --- Contact lines (like history-line) --- */
.contact-line {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.contact-line.contact-number {
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-family: 'Courier New', monospace;
    font-weight: 550;
    cursor: pointer;
    margin: 1px 0;
    transition: color var(--transition-fast);
}

.contact-line.contact-number:hover {
    color: var(--primary-color);
    overflow: visible;
    white-space: normal;
    word-break: break-all;
}

.contact-line.contact-number.no-call {
    cursor: default;
}

.contact-line.contact-number.no-call:hover {
    color: var(--text-secondary);
}

/* --- Type badge --- */
.contacts-panel .contact-type {
    font-size: 0.65rem;
    padding: 1px 6px;
    border-radius: 8px;
    font-weight: 500;
    display: inline-block;
    line-height: 1.4;
}

.contact-type.type-internal {
    background: rgba(16, 185, 129, 0.1);
    color: var(--success-color);
}

.contact-type.type-external {
    background: rgba(26, 111, 165, 0.1);
    color: var(--primary-color);
}

.contact-type.type-company {
    background: rgba(245, 158, 11, 0.1);
    color: var(--warning-color);
}

.contact-company {
    font-size: 0.65rem;
    color: var(--text-secondary);
    font-style: italic;
    opacity: 0.8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- Contact actions (like history-actions) --- */
.contact-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* Edit button — size/shape from shared base */
.contact-edit-btn {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
}
.contact-edit-btn i { font-size: 16px; }
.contact-edit-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(26, 111, 165, 0.4);
}

/* --- Loading state --- */
.contacts-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
    color: var(--text-tertiary);
    gap: 12px;
}

.contacts-loading i {
    font-size: 28px;
    animation: settings-spinner 0.8s linear infinite;
}

/* --- Empty state --- */
.no-contacts {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
    color: var(--text-tertiary);
}

.no-contacts i {
    font-size: 40px;
    margin-bottom: 12px;
    opacity: 0.5;
}

.no-contacts p {
    margin: 0;
    font-size: 0.9rem;
}

/* ========================
   CONTACT MODAL (Add/Edit)
   ======================== */

.contact-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.contact-modal-overlay.visible {
    opacity: 1;
}

.contact-modal {
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: var(--border-radius-large);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: var(--shadow-heavy);
    width: 420px;
    max-width: 90vw;
    max-height: 90vh;
    overflow-y: auto;
    transform: scale(0.95) translateY(10px);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.contact-modal-overlay.visible .contact-modal {
    transform: scale(1) translateY(0);
}

/* --- Modal header --- */
.contact-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.contact-modal-header h3 {
    margin: 0;
    font-size: var(--panel-header-font-size);
    font-weight: 600;
    color: var(--text-primary);
}

/* contact-modal-close — size/shape from shared base above */

/* --- Modal form --- */
.contact-modal-form {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.contact-modal-fields {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.contact-modal-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.contact-modal-row label {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-tertiary);
}

.contact-modal-row input {
    padding: 10px 12px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: var(--border-radius-small);
    background: var(--surface-color);
    font-size: 0.9rem;
    font-family: inherit;
    color: var(--text-primary);
    transition: all var(--transition-fast);
    width: 100%;
    box-sizing: border-box;
}

.contact-modal-row input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: var(--focus-ring);
}

/* --- Numbers section in modal --- */
.contact-modal-numbers {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.contact-modal-number-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.contact-modal-number-row input[name^="numName"] {
    flex: 1;
}

.contact-modal-number-row input[name^="numValue"] {
    flex: 2;
}

.contact-modal-number-row input {
    min-width: 0;
    height: 34px;
    padding: 0 var(--space-lg);
    margin: 0;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: var(--border-radius-small);
    background: var(--surface-color);
    font-size: var(--font-sm);
    font-family: inherit;
    color: var(--text-primary);
    transition: all var(--transition-fast);
    box-sizing: border-box;
    line-height: normal;
}

.contact-modal-number-row input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: var(--focus-ring);
}

.contact-modal-remove-number {
    width: var(--icon-btn-size);
    height: var(--icon-btn-size);
    min-width: var(--icon-btn-size);
    border-radius: 50%;
    background: rgba(239, 68, 68, 0.08);
    color: var(--danger-color);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
    flex-shrink: 0;
    font-size: 14px;
}

.contact-modal-remove-number:hover {
    background: var(--danger-color);
    color: white;
}

/* Read-only number rows (extension in "my card" modal) */
.contact-modal-number-row.readonly input:first-child {
    flex: 1;
}

.contact-modal-number-row.readonly input:last-child {
    flex: 2;
}

.contact-modal-number-row.readonly input {
    opacity: 0.6;
    background: rgba(245, 245, 245, 0.6);
}

.contact-modal-add-number {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    padding: 6px 12px;
    border: 1px dashed rgba(0, 0, 0, 0.12);
    border-radius: var(--border-radius-small);
    background: transparent;
    color: var(--primary-color);
    font-size: var(--font-sm);
    font-family: inherit;
    font-weight: 500;
    transition: all var(--transition-fast);
}

.contact-modal-add-number:hover {
    background: rgba(26, 111, 165, 0.05);
    border-color: var(--primary-color);
}

/* --- Share checkbox --- */
.contact-modal-share {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.contact-modal-share input[type="checkbox"] {
    accent-color: var(--primary-color);
    width: 16px;
    height: 16px;
}

/* --- Modal action buttons --- */
.contact-modal-actions {
    display: flex;
    gap: 10px;
    padding-top: 4px;
}

.contact-modal-cancel {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: var(--border-radius-small);
    background: var(--surface-color);
    color: var(--text-secondary);
    font-size: var(--font-base);
    font-family: inherit;
    font-weight: 500;
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-modal-cancel:hover {
    background: rgba(0, 0, 0, 0.04);
}

.contact-modal-save {
    flex: 1;
    padding: 8px 12px;
    border-radius: var(--border-radius-small);
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    color: white;
    font-size: var(--font-base);
    font-family: inherit;
    font-weight: 600;
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-modal-save:hover {
    box-shadow: 0 4px 12px rgba(26, 111, 165, 0.4);
    transform: translateY(-1px);
}

.contact-modal-save:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
    pointer-events: none;
}

/* --- Delete contact button --- */
.contact-modal-delete {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: var(--border-radius-small);
    background: rgba(239, 68, 68, 0.06);
    color: var(--danger-color);
    font-size: var(--font-sm);
    font-family: inherit;
    font-weight: 500;
    transition: all var(--transition-fast);
    width: 100%;
}

.contact-modal-delete:hover {
    background: var(--danger-color);
    color: white;
}

/* ========================
   ADD CONTACT CHOICE POPUP
   ======================== */
.add-contact-choice {
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: var(--border-radius-large);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: var(--shadow-heavy);
    width: 300px;
    max-width: 90vw;
    transform: scale(0.95) translateY(10px);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.add-contact-choice-overlay.visible .add-contact-choice {
    transform: scale(1) translateY(0);
}

.add-contact-choice-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.add-contact-choice-header h3 {
    margin: 0;
    font-size: var(--panel-header-font-size);
    font-weight: 600;
    color: var(--text-primary);
}

.add-contact-choice-number {
    text-align: center;
    padding: 12px 16px 4px;
    font-size: var(--font-base);
    font-weight: 500;
    color: var(--primary-color);
}

.add-contact-choice-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 16px 16px;
}

.add-contact-choice-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 14px;
    border-radius: var(--border-radius-small);
    font-size: var(--font-sm);
    font-family: inherit;
    font-weight: 500;
    color: var(--text-primary);
    background: rgba(26, 111, 165, 0.06);
    transition: all var(--transition-fast);
}

.add-contact-choice-btn i {
    font-size: 18px;
    color: var(--primary-color);
}

.add-contact-choice-btn:hover {
    background: rgba(26, 111, 165, 0.12);
    transform: translateX(2px);
}

/* ========================
   CONFIRM MODAL
   ======================== */
.confirm-modal {
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: var(--border-radius-large);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: var(--shadow-heavy);
    width: 340px;
    max-width: 90vw;
    padding: 20px;
    text-align: center;
    transform: scale(0.95) translateY(10px);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.confirm-modal-overlay.visible .confirm-modal {
    transform: scale(1) translateY(0);
}

.confirm-modal-message {
    font-size: var(--font-base);
    color: var(--text-primary);
    line-height: 1.5;
    margin-bottom: 20px;
}

.confirm-modal-actions {
    display: flex;
    gap: 10px;
}

.confirm-modal-cancel,
.confirm-modal-ok {
    flex: 1;
    padding: 8px 12px;
    border-radius: var(--border-radius-small);
    font-size: var(--font-sm);
    font-family: inherit;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.confirm-modal-cancel {
    color: var(--text-secondary);
    background: rgba(0, 0, 0, 0.04);
}

.confirm-modal-cancel:hover {
    background: rgba(0, 0, 0, 0.08);
}

.confirm-modal-ok {
    color: white;
    background: var(--primary-color);
    box-shadow: 0 2px 8px rgba(26, 111, 165, 0.3);
}

.confirm-modal-ok:hover {
    box-shadow: 0 4px 12px rgba(26, 111, 165, 0.4);
    transform: translateY(-1px);
}

.confirm-modal-danger {
    background: var(--danger-color);
    box-shadow: 0 2px 8px rgba(220, 53, 69, 0.3);
}

.confirm-modal-danger:hover {
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.4);
}

/* ========================
   CONTACTS PICK MODE
   ======================== */
.contacts-panel.pick-mode {
    z-index: 1001;
}

.pick-mode .contacts-list .contact-item[data-editable="true"] {
    cursor: pointer;
    transition: background var(--transition-fast);
}

.pick-mode .contacts-list .contact-item[data-editable="true"]:hover {
    background: rgba(26, 111, 165, 0.08);
}

.pick-mode .contacts-list .contact-item[data-editable="false"] {
    opacity: 0.45;
    cursor: not-allowed;
}

.pick-mode .contact-actions {
    display: none;
}

.pick-mode-banner {
    padding: 8px 16px;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
    color: white;
    font-size: var(--font-sm);
    font-weight: 500;
    text-align: center;
    flex-shrink: 0;
}

/* ========================
   ENREGISTREMENT AUDIO
   ======================== */

/* Bouton d'enregistrement avec animation */
.recording-active {
    position: relative;
    overflow: hidden;
}

.recording-active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at center, transparent 30%, rgba(255,255,255,0.1) 70%);
    animation: recordingPulse 2s ease-in-out infinite;
    pointer-events: none;
}

/* Animation pulse pour le bouton d'enregistrement */
@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(239, 68, 68, 0);
        transform: scale(1.02);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
        transform: scale(1);
    }
}

@keyframes recordingPulse {
    0%, 100% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
}

/* Indicateur d'enregistrement dans la barre de statut */
.recording-indicator {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--danger-color);
    font-weight: 600;
    font-size: 0.85rem;
}

.recording-indicator::before {
    content: '';
    width: 8px;
    height: 8px;
    background: var(--danger-color);
    border-radius: 50%;
    animation: blink 1s infinite;
}

@keyframes blink {
    0%, 50% {
        opacity: 1;
    }
    51%, 100% {
        opacity: 0.3;
    }
}

/* État désactivé pour le bouton d'enregistrement */
#btnRecord:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Responsive pour petits écrans */
@media (max-width: 480px) {
    .contacts-panel {
        width: 100vw;
        right: -100vw;
    }

    .contacts-toggle {
        right: 35px;
    }

    .contact-modal {
        width: 95vw;
        max-height: 90vh;
    }

    .contact-modal-number-row {
        padding-left: 16px;
    }

    /* Boutons plus petits sur mobile */
    .recording-active {
        transform: scale(0.95);
    }
}

/* ================================ */
/* PANEL STATISTIQUES              */
/* ================================ */

.stats-panel {
    position: fixed;
    left: -360px;
    top: 0;
    height: 100vh;
    width: 340px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 10px 0 30px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    transition: left var(--transition-medium);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.stats-panel.visible {
    left: 0;
}

.stats-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: var(--panel-border-subtle);
    background: var(--panel-header-bg);
    flex-shrink: 0;
}

.stats-header h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: var(--panel-header-font-size);
    font-weight: 600;
    color: var(--text-primary);
}

.stats-icon {
    width: 20px;
    height: 20px;
    color: var(--primary-color);
}

/* close-btn — size/shape from shared base above */

.stats-content {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
    overflow-y: auto;
}

.stat-card {
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-large);
    padding: 16px;
    transition: all var(--transition-fast);
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-medium);
    border-color: var(--primary-light);
}

.stat-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.stat-icon {
    width: 18px;
    height: 18px;
    color: var(--primary-color);
}

.stat-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-value {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.stat-unit {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.stat-detail {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-top: 8px;
}

/* Quality Score Card */
.quality-score .stat-value {
    font-size: 2rem;
}

.score-value {
    color: var(--success-color);
}

.quality-indicator {
    margin-top: 12px;
    height: 6px;
    background: var(--border-color);
    border-radius: 3px;
    overflow: hidden;
}

.quality-bar {
    height: 100%;
    background: linear-gradient(90deg, #ef4444 0%, #f59e0b 50%, #10b981 100%);
    border-radius: 3px;
    width: 0%;
    transition: width 0.3s ease;
}

/* Bandwidth Card */
.bandwidth-value {
    flex-direction: column;
    gap: 8px;
    font-size: 1.1rem;
}

.bandwidth-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.bandwidth-label {
    font-weight: 600;
    color: var(--primary-color);
    font-size: 0.8rem;
    min-width: fit-content;
}

/* Chart Card */
.chart-card {
    min-height: 160px;
}

.chart-container {
    position: relative;
    height: 120px;
    margin-top: 8px;
}

.chart-container canvas {
    max-width: 100%;
    max-height: 100%;
}

/* Responsive */
@media (max-width: 440px) {
    .stats-panel {
        width: 100vw;
        left: -100vw;
    }

    .stats-content {
        padding: 16px;
        gap: 12px;
    }

    .stat-card {
        padding: 12px;
    }

    .stat-value {
        font-size: 1.2rem;
    }

    .quality-score .stat-value {
        font-size: 1.6rem;
    }
}

/* ================================ */
/* LOGIN / LOGOUT                   */
/* ================================ */

/* Panel de login - overlay plein écran */
.login-panel {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #0c2d4a 0%, #163d5c 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-medium);
}

.login-panel.visible {
    opacity: 1;
    visibility: visible;
}

/* Conteneur du formulaire */
.login-container {
    width: 100%;
    max-width: 340px;
    background: var(--surface-glass);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: var(--border-radius-xl);
    padding: 24px;
    box-shadow: var(--shadow-color);
    transform: translateY(20px);
    transition: transform var(--transition-medium);
    margin: 16px;
}

.login-panel.visible .login-container {
    transform: translateY(0);
}

/* En-tête du login */
.login-header {
    text-align: center;
    margin-bottom: 28px;
}

.login-logo {
    height: 56px;
    width: auto;
    margin-bottom: 16px;
}

.login-header h2 {
    margin: 0 0 6px 0;
    font-size: var(--font-lg);
    font-weight: 700;
    color: var(--text-primary);
}

.login-subtitle {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

/* Formulaire */
.login-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.login-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.login-field label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.login-field input {
    width: 100%;
    padding: 8px 12px;
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius-medium);
    font-size: var(--font-base);
    transition: all var(--transition-fast);
    background: var(--surface-color);
    color: var(--text-primary);
    font-family: inherit;
    box-sizing: border-box;
    margin-bottom: 0;
}

.login-field input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: var(--focus-ring);
}

.login-field input::placeholder {
    color: var(--text-tertiary);
}

/* Password field with toggle */
.password-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.password-wrapper input {
    padding-right: 40px;
}

.password-toggle {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--text-light);
    cursor: pointer;
    padding: 0;
    font-size: 16px;
    transition: color var(--transition-fast), background var(--transition-fast);
}

.password-toggle:hover {
    color: var(--text-primary);
    background: rgba(0, 0, 0, 0.06);
}

.password-toggle:active {
    background: rgba(0, 0, 0, 0.1);
}

/* Input with suffix (for domain) */
.input-with-suffix {
    display: flex;
    max-width: 100%;
    align-items: stretch;
    border-radius: var(--border-radius-medium);
}

.input-with-suffix input {
    flex: 1;
    width: auto;
    padding-right: 14px;
    border-right: none;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-top-left-radius: var(--border-radius-medium);
    border-bottom-left-radius: var(--border-radius-medium);
}

.input-with-suffix input:focus {
    box-shadow: none;
    transform: none;
}

.input-with-suffix .input-suffix {
    position: static;
    display: flex;
    align-items: center;
    padding: 0 12px;
    box-sizing: border-box;
    background: var(--surface-color);
    border: 2px solid var(--border-color);
    border-left: none;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: var(--border-radius-medium);
    border-bottom-right-radius: var(--border-radius-medium);
    font-size: 0.8rem;
    color: var(--text-tertiary);
    white-space: nowrap;
    pointer-events: none;
    flex-shrink: 0;
}

.input-with-suffix:focus-within {
    box-shadow: var(--focus-ring);
}

.input-with-suffix:focus-within input,
.input-with-suffix:focus-within .input-suffix {
    border-color: var(--primary-color);
}

/* Login options row (remember me + dev toggle) */
.login-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 4px;
}

.login-dev-toggle {
    font-size: 0.8rem;
    opacity: 0.6;
    transition: opacity var(--transition-fast);
}

.login-dev-toggle:hover {
    opacity: 1;
}

/* DEV Banner */
.dev-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
    text-align: center;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 2px;
    padding: 3px 0;
    text-transform: uppercase;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.4);
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.checkbox-label input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.checkbox-custom {
    width: 15px;
    height: 15px;
    border: 1.5px solid var(--border-color);
    border-radius: 3px;
    background: var(--surface-color);
    transition: all var(--transition-fast);
    position: relative;
    flex-shrink: 0;
}

.checkbox-label input[type="checkbox"]:checked + .checkbox-custom {
    background: var(--primary-color);
    border-color: var(--primary-color);
}

.checkbox-custom::after {
    content: '';
    position: absolute;
    display: none;
    left: 50%;
    top: 43%;
    width: 4px;
    height: 8px;
    border: solid white;
    border-width: 0 1.5px 1.5px 0;
    transform: translate(-50%, -50%) rotate(45deg);
}

.checkbox-label input[type="checkbox"]:checked + .checkbox-custom::after {
    display: block;
}

/* Turnstile widget */
.turnstile-widget {
    display: flex;
    justify-content: center;
    margin: 4px 0;
}

/* Message d'erreur */
.login-error {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: var(--border-radius-small);
    padding: 12px;
    color: var(--danger-color);
    font-size: 0.85rem;
    text-align: center;
}

/* Bouton de login */
.btn-login {
    width: 100%;
    padding: var(--space-md) var(--space-lg);
    margin-top: 8px;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
    color: white;
    border: none;
    font-size: var(--font-md);
    box-shadow: 0 4px 15px rgba(26, 111, 165, 0.4);
}

.btn-login:hover:not(:disabled) {
    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-color) 100%);
    box-shadow: 0 8px 25px rgba(26, 111, 165, 0.6);
    transform: translateY(-2px);
}

.btn-login .btn-icon { font-size: 18px; }
.btn-login .btn-label { color: white; font-size: var(--font-md); }

/* Bouton de logout */
.logout-btn {
    position: absolute;
    top: 16px;
    left: 16px;
    width: var(--icon-btn-size);
    height: var(--icon-btn-size);
    padding: 0;
    margin: 0;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    background: var(--surface-color);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
    z-index: 100;
    min-height: auto;
    flex: none;
}

.logout-btn:hover {
    background: rgba(239, 68, 68, 0.1);
    border-color: var(--danger-color);
    color: var(--danger-color);
    transform: translateY(-2px);
    box-shadow: var(--shadow-medium);
}

.logout-btn i {
    font-size: 16px;
}

/* État logged-out pour le container principal */
.container.logged-out {
    opacity: 0.3;
    pointer-events: none;
    filter: blur(4px);
}

/* Responsive login */
@media (max-width: 440px) {
    .login-container {
        padding: 24px;
        margin: 12px;
    }

    .login-header h2 {
        font-size: 1.3rem;
    }

    .login-field input {
        padding: 10px 12px;
    }

    .btn-login {
        padding: 12px;
    }

    .logout-btn {
        top: 12px;
        left: 12px;
    }
}

/* ============================================
   SETTINGS PANEL
   ============================================ */

/* Bouton Settings (roue crantée) */
.settings-btn {
    position: absolute;
    top: 16px;
    left: 50px; /* À côté du logout (16px + 28px + 6px gap) */
    width: var(--icon-btn-size);
    height: var(--icon-btn-size);
    padding: 0;
    margin: 0;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    background: var(--surface-color);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
    z-index: 100;
    min-height: auto;
    flex: none;
}

.settings-btn::before {
    content: '';
    position: absolute;
    inset: -8px;
}

.settings-btn:hover {
    background: rgba(26, 111, 165, 0.1);
    border-color: var(--primary-color);
    color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: var(--shadow-medium);
}

.settings-btn.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

.settings-btn.active:hover {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
    color: white;
    transform: translateY(-2px);
    box-shadow: var(--shadow-medium);
}

.settings-btn i {
    font-size: 16px;
}

/* Panneau Settings */
.settings-panel {
    position: fixed;
    top: 0;
    right: -360px;
    width: 340px;
    height: 100vh;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-left: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.2);
    transition: right var(--transition-medium);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.settings-panel.visible {
    right: 0;
}

/* En-tête du panneau */
.settings-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: var(--panel-border-subtle);
    background: var(--panel-header-bg);
    flex-shrink: 0;
}

.settings-header h3 {
    margin: 0;
    font-size: var(--panel-header-font-size);
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.settings-header h3 i {
    font-size: 20px;
    color: var(--primary-color);
}

/* settings-close — size/shape from shared base */

/* Contenu du panneau */
.settings-content {
    flex: 1;
    overflow-y: auto;
    padding: 12px 16px;
}

/* Formulaire */
.settings-form {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Champ de formulaire */
.settings-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.settings-field-header {
    display: flex;
    align-items: center;
    gap: 8px;
}

.settings-field-header label {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-primary);
}

.settings-tooltip {
    display: flex;
    align-items: center;
    cursor: help;
    color: var(--text-light);
    transition: color var(--transition-fast);
}

.settings-tooltip:hover {
    color: var(--primary-color);
}

.settings-tooltip i {
    font-size: 1rem;
}

/* Inputs du formulaire */
.settings-form input[type="email"],
.settings-form input[type="tel"],
.settings-form select {
    width: 100%;
    padding: 8px 12px;
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius-medium);
    background: var(--surface-color);
    font-size: var(--font-base);
    font-family: inherit;
    transition: all var(--transition-fast);
    color: var(--text-primary);
}

.settings-form input:focus,
.settings-form select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: var(--focus-ring);
}

.settings-form input.valid {
    border-color: var(--success-color);
}

.settings-form input.invalid {
    border-color: var(--danger-color);
}

.settings-form select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    padding-right: 40px;
}

/* Groupe de radio buttons */
.settings-radio-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 4px;
}

.settings-radio {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    padding: 10px 14px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-medium);
    background: var(--surface-color);
    transition: all var(--transition-fast);
}

.settings-radio:hover {
    border-color: var(--primary-light);
    background: rgba(26, 111, 165, 0.05);
}

.settings-radio input[type="radio"] {
    display: none;
}

.settings-radio .radio-custom {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(0, 0, 0, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
    flex-shrink: 0;
}

.settings-radio .radio-custom::after {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--primary-color);
    transform: scale(0);
    transition: transform var(--transition-fast);
}

.settings-radio input[type="radio"]:checked + .radio-custom {
    border-color: var(--primary-color);
}

.settings-radio input[type="radio"]:checked + .radio-custom::after {
    transform: scale(1);
}

.settings-radio input[type="radio"]:checked ~ .radio-label {
    color: var(--primary-color);
    font-weight: 500;
}

.settings-radio .radio-label {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

/* Champ numéro personnalisé */
.settings-custom-number {
    margin-top: 12px;
    padding-left: 30px;
}

.settings-custom-number-wrapper {
    position: relative;
}

.settings-custom-number-wrapper input {
    padding-right: 32px;
}

.settings-validation {
    margin-top: 6px;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: 6px;
}

.settings-validation.valid {
    color: var(--success-color);
}

.settings-validation.invalid {
    color: var(--danger-color);
}

.settings-validation i {
    font-size: 1rem;
}

/* Actions */
.settings-actions {
    margin-top: 8px;
}

.settings-save {
    width: 100%;
    padding: var(--space-md) var(--space-lg);
    font-size: var(--font-md);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    position: relative;
    min-height: var(--btn-height);
}

.settings-save i {
    font-size: 1rem;
    transition: opacity var(--transition-fast);
}

/* État loading du bouton save */
.settings-save.loading {
    pointer-events: none;
}

.settings-save.loading i:not(.spinner),
.settings-save.loading span {
    opacity: 0;
}

.settings-save .spinner {
    position: absolute;
    display: none;
    font-size: 1.4rem;
    color: white;
    animation: settings-spinner 1s linear infinite;
}

.settings-save.loading .spinner {
    display: block;
}

@keyframes settings-spinner {
    to { transform: rotate(360deg); }
}

/* Statut */
.settings-status {
    margin-top: 16px;
    padding: 12px 14px;
    border-radius: var(--border-radius-medium);
    font-size: 0.9rem;
    text-align: center;
}

.settings-status.loading {
    background: rgba(26, 111, 165, 0.1);
    color: var(--primary-color);
}

.settings-status.success {
    background: rgba(16, 185, 129, 0.1);
    color: var(--success-color);
}

.settings-status.error {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger-color);
}

/* Responsive */
@media (max-width: 440px) {
    .settings-panel {
        width: 100vw;
        right: -100vw;
    }

    .settings-btn {
        top: 12px;
        left: 46px; /* 12px + 28px + 6px */
    }

    .settings-content {
        padding: 16px;
    }
}

/* Safari fix pour le panneau settings */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    _::-webkit-full-page-media, _:future, :root .settings-panel {
        background: rgba(255, 255, 255, 0.9) !important;
        border: 2px solid rgba(255, 255, 255, 0.3) !important;
    }
}

/* =====================================================
   CLOUD PANEL (Vocaux + Journal serveur)
   ===================================================== */

/* Bouton Cloud */
.cloud-btn {
    position: absolute;
    top: 16px;
    left: 84px; /* À côté du settings (50px + 28px + 6px gap) */
    width: var(--icon-btn-size);
    height: var(--icon-btn-size);
    min-height: auto;
    flex: none;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background: var(--surface-color);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
    z-index: 100;
    padding: 0;
    overflow: visible; /* Pour que le badge dépasse */
}

.cloud-btn::before {
    content: '';
    position: absolute;
    inset: -8px;
}

.cloud-btn:hover {
    background: rgba(26, 111, 165, 0.1);
    border-color: var(--primary-color);
    color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: var(--shadow-medium);
}

.cloud-btn:hover i {
    color: var(--primary-color);
}

.cloud-btn.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

.cloud-btn.active:hover {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
    color: white;
}

.cloud-btn.active:hover i {
    color: white;
}

.cloud-btn i {
    font-size: 16px;
    color: inherit;
}

/* Badge sur le bouton cloud */
.cloud-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    background: var(--danger-color);
    color: white;
    font-size: 0.65rem;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    pointer-events: none;
    border: 2px solid white;
    z-index: 101;
    box-shadow: var(--shadow-light);
}

/* Panneau Cloud */
.cloud-panel {
    position: fixed;
    top: 0;
    right: -360px;
    width: 340px;
    height: 100vh;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-left: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.2);
    transition: right var(--transition-medium);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.cloud-panel.visible {
    right: 0;
}

.cloud-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: var(--panel-border-subtle);
    background: var(--panel-header-bg);
    flex-shrink: 0;
}

.cloud-header h3 {
    margin: 0;
    font-size: var(--panel-header-font-size);
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.cloud-header h3 i {
    font-size: 18px;
    color: var(--primary-color);
}

.cloud-header-actions {
    display: flex;
    gap: 6px;
}

.cloud-refresh svg,
.cloud-close svg {
    width: 18px;
    height: 18px;
    stroke-width: 2;
}

/* Onglets */
.cloud-tabs {
    display: flex;
    padding: 8px 12px;
    gap: 6px;
    flex-shrink: 0;
}

.cloud-tab {
    background: linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.7) 100%);
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: var(--border-radius-medium);
    box-shadow: var(--shadow-light);
    cursor: pointer;
    padding: var(--space-md);
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    transition: all var(--transition-medium);
    position: relative;
    overflow: visible;
    min-height: var(--btn-height);
    font-family: inherit;
    font-weight: 600;
}

.cloud-tab:hover {
    background: linear-gradient(135deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0.9) 100%);
    box-shadow: var(--shadow-medium);
    transform: translateY(-1px);
    border-color: rgba(26, 111, 165, 0.3);
}

.cloud-tab.active {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
    color: var(--text-white);
    border-color: var(--primary-color);
    box-shadow: 0 4px 15px rgba(26, 111, 165, 0.4);
}

.cloud-tab.active:hover {
    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-color) 100%);
    box-shadow: 0 6px 20px rgba(26, 111, 165, 0.5);
    transform: translateY(-1px);
}

.cloud-tab i {
    font-size: 18px;
    opacity: 0.9;
}

.cloud-tab span:not(.cloud-tab-badge) {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--text-secondary);
    line-height: 1.1;
}

.cloud-tab:hover:not(.active) span:not(.cloud-tab-badge),
.cloud-tab:hover:not(.active) i {
    color: var(--text-primary);
}

.cloud-tab.active span:not(.cloud-tab-badge),
.cloud-tab.active i {
    color: white;
}

.cloud-tab-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    background: var(--danger-color);
    color: white;
    font-size: 0.65rem;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    pointer-events: none;
    border: 2px solid white;
    box-shadow: var(--shadow-light);
}

/* Contenu des onglets */
.cloud-content {
    flex: 1;
    overflow: hidden;
    position: relative;
}

.cloud-tab-content {
    display: none;
    height: 100%;
    flex-direction: column;
}

.cloud-tab-content.active {
    display: flex;
}

/* Loading */
.cloud-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px;
    color: var(--text-secondary);
    gap: 8px;
}

.cloud-loading i {
    font-size: 2rem;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* État vide */
.cloud-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px;
    color: var(--text-tertiary);
    gap: 8px;
}

.cloud-empty i {
    font-size: 3rem;
    opacity: 0.5;
}

.cloud-empty p {
    margin: 0;
    font-size: var(--font-base);
}

/* Liste */
.cloud-list {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
}

/* Item de la liste - hérite du style panel-item */
.cloud-item {
    /* Hérite de .panel-item via la classe */
    margin-bottom: var(--panel-item-margin);
    background: linear-gradient(135deg, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.65) 100%);
}

.cloud-item:hover {
    background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.85) 100%);
    box-shadow: var(--shadow-medium);
    transform: translateY(-1px);
}

.cloud-item.unread {
    background: linear-gradient(135deg, rgba(26, 111, 165, 0.18) 0%, rgba(26, 111, 165, 0.10) 100%);
    border-left: 3px solid var(--primary-color);
}

.cloud-item.unread:hover {
    background: linear-gradient(135deg, rgba(26, 111, 165, 0.25) 0%, rgba(26, 111, 165, 0.15) 100%);
}

.voicemail-item .panel-item-avatar {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
}

.voicemail-item.unread .panel-item-avatar {
    background: linear-gradient(135deg, var(--warning-color) 0%, var(--warning-light) 100%);
}

.calllog-incoming .panel-item-avatar {
    background: linear-gradient(135deg, var(--warning-color) 0%, var(--warning-light) 100%);
}

.calllog-outgoing .panel-item-avatar {
    background: linear-gradient(135deg, var(--success-color) 0%, var(--success-light) 100%);
}

.calllog-missed .panel-item-avatar {
    background: linear-gradient(135deg, var(--danger-color) 0%, var(--danger-light) 100%);
}

.cloud-item .panel-item-avatar i {
    font-size: 16px;
    color: white;
}

/* Informations - style identique à history */
.cloud-item-line {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.cloud-item-date {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    font-weight: 500;
}

.cloud-item-caller {
    font-size: var(--font-base);
    font-weight: 600;
    color: var(--text-primary);
    margin: 1px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cloud-item-number {
    font-size: var(--font-sm);
    color: var(--text-secondary);
    font-family: 'Courier New', monospace;
}

.cloud-item-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.cloud-item-duration {
    color: var(--text-tertiary);
}

/* Actions - grille 2x2 pour vocaux */
.cloud-item-actions {
    display: grid;
    grid-template-columns: repeat(2, var(--action-btn-size));
    grid-template-rows: repeat(2, var(--action-btn-size));
    gap: 4px;
    margin-left: 8px;
}

/* Journal d'appels : une seule ligne */
.calllog-item .cloud-item-actions {
    display: flex;
    gap: 6px;
}

.cloud-action-btn {
    color: white;
    width: var(--action-btn-size);
    height: var(--action-btn-size);
    min-width: var(--action-btn-size);
    min-height: var(--action-btn-size);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
    font-size: 16px;
    line-height: 1;
}

.cloud-action-btn i { font-size: 16px; }

.cloud-action-btn.play-btn,
.cloud-action-btn.user-btn {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
}
.cloud-action-btn.play-btn:hover:not(:disabled),
.cloud-action-btn.user-btn:hover:not(:disabled) {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(26, 111, 165, 0.4);
}

.cloud-action-btn.callback-btn { background: var(--success-color); }
.cloud-action-btn.callback-btn:hover:not(:disabled) {
    transform: scale(1.1);
    background: var(--success-dark);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}

.cloud-action-btn.delete-btn { background: var(--danger-color); }
.cloud-action-btn.delete-btn:hover:not(:disabled) {
    transform: scale(1.1);
    background: var(--danger-dark);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
}

.cloud-action-btn:disabled {
    background: var(--text-light);
    color: var(--surface-color);
    opacity: 0.5;
    cursor: not-allowed;
}
.cloud-action-btn:disabled:hover { transform: none; }

/* Responsive */
@media (max-width: 440px) {
    .cloud-panel {
        width: 100vw;
        right: -100vw;
    }

    .cloud-btn {
        top: 12px;
        left: 80px; /* À côté du settings mobile (46px + 28px + 6px gap) */
    }

    .cloud-tabs {
        padding: 12px 15px;
        gap: 8px;
    }

    .cloud-tab {
        min-width: 80px;
    }
}

/* Footer */
.app-footer {
    position: fixed;
    bottom: 8px;
    left: 12px;
    font-size: var(--font-sm);
    color: white;
    opacity: 0.5;
    z-index: 10000;
    pointer-events: none;
}