:root {
    --void: #06070a;
    --surface: #10131a;
    --surface-2: #161a23;
    --surface-3: #1d222d;
    --line: rgba(255, 255, 255, 0.07);
    --line-strong: rgba(255, 255, 255, 0.14);
    --cyan: #4ee1c9;
    --violet: #8b6bf0;
    --gradient: linear-gradient(135deg, var(--cyan), var(--violet));
    --text: #eef1f6;
    --text-dim: #8a8f9c;
    --text-faint: #565b68;
    --danger: #ff5470;
    --danger-dim: rgba(255, 84, 112, 0.14);
    --radius-lg: 18px;
    --radius-md: 12px;
    --radius-sm: 8px;
    --radius-pill: 999px;
}

* {
    box-sizing: border-box;
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}

html { font-size: calc(16px * var(--font-scale, 1)); }

body[data-theme="light"] {
    --void: #f4f5f8;
    --surface: #ffffff;
    --surface-2: #f1f3f7;
    --surface-3: #e6e9f0;
    --line: rgba(10, 12, 20, 0.08);
    --line-strong: rgba(10, 12, 20, 0.16);
    --text: #14161d;
    --text-dim: #565b68;
    --text-faint: #8a8f9c;
}

body.reduce-motion, body.reduce-motion * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
}
body.high-contrast {
    --line: rgba(255, 255, 255, 0.28);
    --line-strong: rgba(255, 255, 255, 0.5);
    --text-dim: var(--text);
}
body.high-contrast[data-theme="light"] {
    --line: rgba(10, 12, 20, 0.3);
    --line-strong: rgba(10, 12, 20, 0.55);
}
body.sr-hints [aria-live] { outline: 1px dashed var(--line-strong); }

.mono, .id-display, textarea#generated-code, textarea#paste-zone {
    font-family: 'JetBrains Mono', ui-monospace, monospace !important;
}

html, body {
    background: var(--void);
    color: var(--text);
    margin: 0;
    padding: 0;
    height: 100%;
}

body {
    display: flex;
    height: 100vh;
    overflow: hidden;
    background-image:
        radial-gradient(circle at 15% 8%, rgba(78, 225, 201, 0.06), transparent 40%),
        radial-gradient(circle at 85% 92%, rgba(139, 107, 240, 0.07), transparent 45%);
}

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

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.14); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.26); }

button:focus-visible, input:focus-visible, textarea:focus-visible, .contact-item:focus-visible {
    outline: 2px solid var(--cyan);
    outline-offset: 2px;
}

.hidden { display: none !important; }


.app-layout { display: flex; width: 100%; height: 100%; }

.sidebar {
    width: 320px;
    background: var(--surface);
    border-right: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    padding: 18px;
    overflow-y: auto;
    flex-shrink: 0;
    gap: 14px;
}

.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: var(--void);
    position: relative;
    overflow: hidden;
}

h1, h2, h3 { margin: 0; font-weight: 700; }


.brand-row { display: flex; align-items: center; justify-content: space-between; }

.brand { font-size: 1.15rem; font-weight: 800; display: flex; align-items: center; gap: 9px; letter-spacing: -0.01em; }

.brand-mark {
    width: 11px; height: 11px; border-radius: 50%;
    background: var(--gradient);
    box-shadow: 0 0 12px rgba(78, 225, 201, 0.55);
}

.version-pill {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.68rem;
    color: var(--text-dim);
    background: var(--surface-3);
    border: 1px solid var(--line);
    padding: 3px 8px;
    border-radius: var(--radius-pill);
}

.status-badge {
    background: var(--surface-2);
    border: 1px solid var(--line);
    padding: 9px 12px;
    border-radius: var(--radius-md);
    font-size: 0.82rem;
    color: var(--text-dim);
    display: flex;
    align-items: center;
    gap: 9px;
}

.dot-pulse {
    position: relative;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--text-faint);
    flex-shrink: 0;
}
.dot-pulse.online { background: var(--cyan); }
.dot-pulse.online::after {
    content: "";
    position: absolute; inset: -4px;
    border-radius: 50%;
    border: 1.5px solid var(--cyan);
    animation: pulseRing 1.8s ease-out infinite;
}
.dot-pulse.busy { background: #ffb454; }
.dot-pulse.busy::after {
    content: "";
    position: absolute; inset: -4px;
    border-radius: 50%;
    border: 1.5px solid #ffb454;
    animation: pulseRing 1.2s ease-out infinite;
}

@keyframes pulseRing {
    0% { transform: scale(0.6); opacity: 0.9; }
    100% { transform: scale(1.9); opacity: 0; }
}


.profile-card {
    display: flex;
    align-items: center;
    gap: 11px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 10px 12px;
    cursor: pointer;
}
.profile-card:hover { border-color: var(--line-strong); background: var(--surface-3); }

.profile-avatar {
    width: 38px; height: 38px;
    border-radius: 11px;
    background: var(--surface-3);
    border: 1px solid var(--line);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.profile-meta { flex: 1; min-width: 0; }
.profile-name { font-weight: 700; font-size: 0.92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.profile-hint { font-size: 0.74rem; color: var(--text-faint); }
.profile-gear { color: var(--text-faint); font-size: 0.85rem; }


.btn {
    border: none;
    padding: 10px 16px;
    font-weight: 600;
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 0.88rem;
    color: #fff;
    transition: transform 0.12s ease, opacity 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(1px) scale(0.99); }
.btn-block { width: 100%; }

.btn-primary {
    background: var(--gradient);
    color: #06110d;
    box-shadow: 0 6px 18px rgba(78, 225, 201, 0.16);
}
.btn-primary:hover { box-shadow: 0 8px 22px rgba(139, 107, 240, 0.28); }

.btn-secondary { background: var(--surface-3); color: var(--text); border: 1px solid var(--line); }
.btn-secondary:hover { background: #232936; border-color: var(--line-strong); }

.btn-success { background: var(--cyan); color: #06110d; }
.btn-danger { background: var(--danger); color: #fff; }

.btn-danger-outline {
    background: transparent;
    color: var(--danger);
    border: 1px solid rgba(255, 84, 112, 0.35);
}
.btn-danger-outline:hover { background: var(--danger-dim); }

.icon-btn {
    background: var(--surface-3);
    color: var(--text);
    border: 1px solid var(--line);
    width: 38px; height: 38px;
    border-radius: var(--radius-sm);
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.15s ease;
}
.icon-btn:hover { background: #232936; }
.icon-btn.active-off { background: var(--danger-dim); color: var(--danger); border-color: rgba(255,84,112,0.3); }
.icon-btn.danger { background: var(--danger); color: #fff; border: none; }

.chip-btn {
    background: var(--surface-3);
    border: 1px solid var(--line);
    color: var(--text-dim);
    padding: 7px 13px;
    border-radius: var(--radius-pill);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
    transition: all 0.15s ease;
}
.chip-btn:hover { color: var(--text); border-color: var(--cyan); background: rgba(78,225,201,0.06); }


.field-label {
    font-size: 0.76rem;
    color: var(--text-dim);
    display: block;
    margin: 12px 0 6px 0;
    font-weight: 600;
}
.field-label:first-of-type { margin-top: 0; }

input[type="text"], textarea {
    width: 100%;
    padding: 10px 13px;
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    color: #fff;
    font-size: 0.9rem;
    margin-bottom: 4px;
}

input:focus, textarea:focus {
    border-color: var(--cyan);
    outline: none;
    box-shadow: 0 0 0 3px rgba(78, 225, 201, 0.14);
}

textarea { height: 84px; resize: none; font-size: 0.76rem; line-height: 1.5; }

.contact-search {
    display: flex; align-items: center; gap: 8px;
    background: rgba(0,0,0,0.25);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 8px 11px;
    color: var(--text-faint);
}
.contact-search input {
    background: transparent; border: none; margin: 0; padding: 0;
    color: var(--text); font-size: 0.85rem;
}
.contact-search input:focus { box-shadow: none; }


.contact-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; min-height: 0; }

.contact-list h3 {
    font-size: 0.78rem;
    color: var(--text-faint);
    margin-bottom: 10px;
    display: flex; align-items: center; gap: 7px;
    font-weight: 700;
}

.count-chip {
    background: var(--surface-3);
    color: var(--text-dim);
    font-size: 0.68rem;
    padding: 1px 7px;
    border-radius: var(--radius-pill);
    font-family: 'JetBrains Mono', monospace;
}

.empty-hint { font-size: 0.82rem; color: var(--text-faint); font-style: italic; padding: 10px 2px; }

.contact-item {
    background: var(--surface-2);
    padding: 10px 11px;
    border-radius: var(--radius-md);
    margin-bottom: 7px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid transparent;
    cursor: pointer;
    animation: itemIn 0.2s ease-out;
}

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

.contact-item:hover { background: var(--surface-3); border-color: var(--line-strong); }
.contact-item.selected { border-color: var(--cyan); background: rgba(78, 225, 201, 0.06); }

.contact-avatar {
    width: 34px; height: 34px; border-radius: 10px;
    background: var(--surface-3);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.05rem;
    flex-shrink: 0;
    position: relative;
}
.contact-avatar .presence {
    position: absolute; bottom: -2px; right: -2px;
    width: 9px; height: 9px; border-radius: 50%;
    border: 2px solid var(--surface-2);
    background: var(--text-faint);
}
.contact-avatar .presence.online,
.contact-avatar .presence.presence-online { background: var(--cyan); }
.contact-avatar .presence.presence-away { background: #f5b942; }
.contact-avatar .presence.presence-offline { background: var(--text-faint); }

.contact-info { flex: 1; min-width: 0; }
.contact-name-row { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.contact-name { font-size: 0.9rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.contact-time { font-size: 0.66rem; color: var(--text-faint); font-family: 'JetBrains Mono', monospace; flex-shrink: 0; }
.contact-preview { font-size: 0.76rem; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }

.contact-actions { display: flex; gap: 4px; flex-shrink: 0; }
.contact-actions button {
    background: transparent; border: none; color: var(--text-faint);
    width: 26px; height: 26px; border-radius: var(--radius-sm);
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    font-size: 0.78rem;
}
.contact-actions button:hover { background: var(--danger-dim); color: var(--danger); }

.unread-badge {
    background: var(--gradient); color: #06110d;
    font-size: 0.65rem; font-weight: 800;
    min-width: 17px; height: 17px; border-radius: var(--radius-pill);
    display: flex; align-items: center; justify-content: center;
    padding: 0 4px;
}


.panel-box {
    max-width: 540px;
    width: 90%;
    margin: auto;
    background: var(--surface);
    padding: 34px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--line);
}

.hero-welcome { text-align: center; padding: 44px 34px; }

.hero-signal, .onb-signal { position: relative; width: 96px; height: 96px; margin: 0 auto 22px auto; display: flex; align-items: center; justify-content: center; }
.hero-signal .ring, .onb-signal .ring {
    position: absolute; border-radius: 50%; border: 1.5px solid var(--cyan); opacity: 0;
    animation: signalPulse 3s ease-out infinite;
}
.hero-signal .r1, .onb-signal .r1 { width: 40px; height: 40px; animation-delay: 0s; }
.hero-signal .r2, .onb-signal .r2 { width: 40px; height: 40px; animation-delay: 1s; }
.hero-signal .r3, .onb-signal .r3 { width: 40px; height: 40px; animation-delay: 2s; }

@keyframes signalPulse {
    0% { width: 40px; height: 40px; opacity: 0.75; border-color: var(--cyan); }
    100% { width: 100px; height: 100px; opacity: 0; border-color: var(--violet); }
}

.hero-core, .onb-core {
    width: 56px; height: 56px; border-radius: 50%;
    background: var(--surface-2); border: 1px solid var(--line-strong);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.35rem;
    background: linear-gradient(145deg, var(--surface-3), var(--surface-2));
    color: var(--cyan);
    box-shadow: 0 0 24px rgba(78, 225, 201, 0.14);
}

.hero-welcome h2 { font-size: 1.5rem; margin-bottom: 12px; }
.hero-desc { color: var(--text-dim); font-size: 0.92rem; line-height: 1.6; max-width: 420px; margin: 0 auto 8px auto; }
.hero-desc-muted { color: var(--text-faint); font-size: 0.84rem; }

.signaling-box h3 { font-size: 1.1rem; margin-bottom: 16px; }
.sig-hint { font-size: 0.82rem; color: var(--cyan); margin: 6px 0 8px 0; }
.sig-hint-accent { color: var(--violet); }
.sig-cancel { margin-top: 14px; }

#box-generation .btn, #box-saisie .btn { margin-top: 8px; }


.chat-container { display: flex; flex-direction: column; height: 100%; width: 100%; }

.chat-header {
    padding: 14px 22px;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.chat-header-id { display: flex; align-items: center; gap: 12px; min-width: 0; }

.chat-peer-avatar {
    width: 40px; height: 40px; border-radius: 12px;
    background: var(--surface-3); border: 1px solid var(--line);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem; flex-shrink: 0;
}

.chat-header h3 { font-size: 1rem; }
.chat-sub { font-size: 0.76rem; color: var(--cyan); display: flex; align-items: center; gap: 5px; }
.chat-sub.typing-active { color: var(--violet); }

.chat-header-actions { display: flex; gap: 8px; }

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 22px 24px 8px 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.date-sep {
    align-self: center;
    font-size: 0.7rem;
    color: var(--text-faint);
    background: var(--surface-2);
    border: 1px solid var(--line);
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    margin: 8px 0;
}

.msg {
    max-width: 68%;
    padding: 10px 14px;
    border-radius: 14px;
    line-height: 1.5;
    word-break: break-word;
    animation: msgIn 0.18s ease-out;
    font-size: 0.92rem;
}

@keyframes msgIn { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }

.msg.moi { background: linear-gradient(135deg, #1c5c50, #17384f); color: #fff; align-self: flex-end; border-bottom-right-radius: 3px; border: 1px solid rgba(78,225,201,0.25); }
.msg.ami { background: var(--surface-2); color: var(--text); align-self: flex-start; border-bottom-left-radius: 3px; border: 1px solid var(--line); }

.msg.system {
    background: transparent; color: var(--text-faint); align-self: center;
    font-size: 0.76rem; border-radius: var(--radius-pill);
    padding: 4px 14px; border: 1px dashed var(--line-strong); max-width: 90%;
}

.msg-meta { font-size: 0.68rem; opacity: 0.7; margin-bottom: 3px; font-weight: 700; letter-spacing: 0.01em; }
.msg-time { font-size: 0.62rem; opacity: 0.55; margin-top: 3px; font-family: 'JetBrains Mono', monospace; }

.msg img, .msg video { max-width: 100%; max-height: 280px; border-radius: 8px; margin-top: 8px; display: block; object-fit: cover; }
.msg audio { margin-top: 8px; width: 100%; max-width: 250px; }

.typing-row {
    padding: 0 24px 6px 24px;
    display: flex; align-items: center; gap: 8px;
    color: var(--text-faint); font-size: 0.76rem;
    animation: fadeIn 0.15s ease-out;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.typing-dots { display: flex; gap: 3px; }
.typing-dots span {
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--violet);
    animation: typingBounce 1.1s infinite ease-in-out;
}
.typing-dots span:nth-child(2) { animation-delay: 0.15s; }
.typing-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes typingBounce { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-4px); opacity: 1; } }

.chat-input-area {
    padding: 14px 22px 18px 22px;
    background: var(--surface);
    border-top: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.quick-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.input-row { display: flex; gap: 10px; }
.input-row input { margin: 0; flex: 1; }
.send-btn { width: 46px; padding: 0; flex-shrink: 0; }


.video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
    padding: 14px 22px;
    background: #000;
    border-bottom: 1px solid var(--line);
    max-height: 46vh;
}

.video-wrapper {
    position: relative;
    background: #0c0e13;
    border-radius: var(--radius-md);
    overflow: hidden;
    height: 200px;
    border: 1px solid var(--line-strong);
}

.video-wrapper video { width: 100%; height: 100%; object-fit: cover; }

.video-label {
    position: absolute; bottom: 9px; left: 9px;
    background: rgba(6, 7, 10, 0.72);
    backdrop-filter: blur(6px);
    padding: 4px 10px; border-radius: var(--radius-pill);
    font-size: 0.72rem; font-weight: 600;
    display: flex; align-items: center; gap: 5px;
}


.progress-container { width: 100%; background: rgba(255, 255, 255, 0.08); border-radius: 4px; height: 5px; display: none; overflow: hidden; }
.progress-bar { height: 100%; background: var(--gradient); width: 0%; border-radius: 4px; transition: width 0.1s linear; }


.overlay {
    position: fixed; inset: 0; z-index: 200;
    background: rgba(6, 7, 10, 0.72);
    backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center;
    animation: fadeIn 0.18s ease-out;
    padding: 20px;
}

.onboarding-card, .modal-card {
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-lg);
    padding: 32px;
    width: 100%; max-width: 440px;
    max-height: 90vh; overflow-y: auto;
    animation: cardIn 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
    box-shadow: 0 30px 70px rgba(0,0,0,0.55);
}

@keyframes cardIn { from { opacity: 0; transform: translateY(14px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } }

.onb-title { font-size: 1.3rem; text-align: center; margin-bottom: 8px; }
.onb-sub { font-size: 0.84rem; color: var(--text-dim); text-align: center; line-height: 1.55; margin-bottom: 22px; }

.avatar-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-bottom: 8px; }
.avatar-opt {
    aspect-ratio: 1; border-radius: var(--radius-sm);
    background: var(--surface-3); border: 1.5px solid var(--line);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.15rem; cursor: pointer;
}
.avatar-opt:hover { border-color: var(--line-strong); }
.avatar-opt.selected { border-color: var(--cyan); background: rgba(78, 225, 201, 0.1); }

#onb-valider { margin-top: 20px; }

.modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.modal-head h3 { font-size: 1.1rem; display: flex; align-items: center; gap: 9px; }

.id-display {
    background: rgba(0,0,0,0.28); border: 1px solid var(--line);
    border-radius: var(--radius-sm); padding: 9px 12px;
    font-size: 0.76rem; color: var(--text-dim);
    word-break: break-all;
}

.modal-actions { display: flex; gap: 10px; margin-top: 20px; }
.modal-actions .btn { flex: 1; }

.modal-danger-zone {
    margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line);
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.dz-title { font-size: 0.84rem; font-weight: 700; color: var(--danger); }
.dz-sub { font-size: 0.72rem; color: var(--text-faint); margin-top: 2px; max-width: 220px; }


.incoming-call {
    position: fixed; top: 20px; left: 50%; transform: translateX(-50%);
    z-index: 300;
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-lg);
    padding: 14px 18px;
    display: flex; align-items: center; gap: 14px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    animation: dropIn 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
@keyframes dropIn { from { opacity: 0; transform: translateX(-50%) translateY(-16px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }

.ic-signal { position: relative; width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; }
.ic-signal .ring { position: absolute; border-radius: 50%; border: 1.5px solid var(--violet); animation: signalPulse 1.6s ease-out infinite; }
.ic-signal .r1 { animation-delay: 0s; }
.ic-signal .r2 { animation-delay: 0.5s; }
.ic-avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--surface-3); border: 1px solid var(--line-strong); display: flex; align-items: center; justify-content: center; font-size: 1.15rem; }

.ic-name { font-weight: 700; font-size: 0.92rem; }
.ic-sub { font-size: 0.76rem; color: var(--text-dim); }

.ic-actions { display: flex; gap: 8px; }
.call-btn {
    width: 42px; height: 42px; border-radius: 50%; border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1rem;
}
.call-btn.accept { background: #2ecf8e; }
.call-btn.decline { background: var(--danger); }
.call-btn:hover { transform: scale(1.06); }


.toast-stack {
    position: fixed; bottom: 22px; right: 22px; z-index: 400;
    display: flex; flex-direction: column; gap: 10px;
    max-width: 320px;
}

.toast {
    background: var(--surface-2);
    border: 1px solid var(--line-strong);
    border-left: 3px solid var(--cyan);
    border-radius: var(--radius-md);
    padding: 11px 14px;
    font-size: 0.82rem;
    color: var(--text);
    box-shadow: 0 12px 30px rgba(0,0,0,0.4);
    animation: toastIn 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.15);
    display: flex; align-items: center; gap: 9px;
}
.toast.error { border-left-color: var(--danger); }
.toast.success { border-left-color: #2ecf8e; }
.toast.fade-out { animation: toastOut 0.2s ease-in forwards; }

@keyframes toastIn { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } }
@keyframes toastOut { to { opacity: 0; transform: translateX(30px); } }


@media (max-width: 760px) {
    .app-layout { flex-direction: column; }
    .sidebar { width: 100%; height: 40vh; border-right: none; border-bottom: 1px solid var(--line); }
    .main-content { flex: 1; }
    .msg { max-width: 85%; }
}


input[type="email"], input[type="password"] {
    width: 100%;
    padding: 10px 13px;
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    color: #fff;
    font-size: 0.9rem;
    margin-bottom: 4px;
}

.modal-card-wide { max-width: 500px; }

.auth-tabs {
    display: flex; gap: 4px; padding: 4px;
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    margin-bottom: 18px;
}
.auth-tab {
    flex: 1; background: transparent; border: none;
    color: var(--text-dim);
    padding: 9px 10px; border-radius: var(--radius-sm);
    font-size: 0.82rem; font-weight: 600; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 7px;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.auth-tab:hover { color: var(--text); }
.auth-tab.active { background: var(--surface-3); color: var(--text); }

.auth-message {
    margin: 12px 0 0 0; padding: 9px 12px;
    border-radius: var(--radius-sm);
    font-size: 0.8rem; line-height: 1.45;
    background: var(--danger-dim);
    border: 1px solid rgba(255, 84, 112, 0.3);
    color: #ff8fa3;
}
.auth-message.info {
    background: rgba(78, 225, 201, 0.08);
    border-color: rgba(78, 225, 201, 0.3);
    color: var(--cyan);
}
#auth-submit { margin-top: 16px; }

.friends-panel { max-height: 46vh; overflow-y: auto; }
.friends-results { margin-top: 10px; }
.friends-section-title {
    font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--text-faint); margin: 14px 2px 8px 2px;
}
.friends-section-title:first-child { margin-top: 2px; }

.friend-row {
    background: var(--surface-2);
    padding: 10px 11px;
    border-radius: var(--radius-md);
    margin-bottom: 7px;
    display: flex; align-items: center; gap: 10px;
    border: 1px solid transparent;
    animation: itemIn 0.2s ease-out;
}
.friend-row:hover { border-color: var(--line-strong); }
.friend-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.friend-btn {
    background: var(--surface-3); border: 1px solid var(--line);
    color: var(--text-dim);
    width: 32px; height: 32px; border-radius: var(--radius-sm);
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    font-size: 0.8rem;
    transition: all 0.15s ease;
}
.friend-btn.accent:hover { color: var(--cyan); border-color: var(--cyan); background: rgba(78, 225, 201, 0.08); }
.friend-btn.danger:hover { color: var(--danger); border-color: rgba(255, 84, 112, 0.35); background: var(--danger-dim); }
.friend-status { font-size: 0.74rem; color: var(--text-dim); font-weight: 600; }

#friends-badge, #demandes-count { margin-left: 2px; }

.video-grid { overflow-y: auto; }
.video-wrapper.screen { grid-column: 1 / -1; height: min(360px, 40vh); }
.video-wrapper.screen video { object-fit: contain; background: #000; }

.tile-fs {
    position: absolute; top: 9px; right: 9px;
    width: 30px; height: 30px; border-radius: var(--radius-sm);
    background: rgba(6, 7, 10, 0.72); backdrop-filter: blur(6px);
    border: 1px solid var(--line-strong); color: var(--text);
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    font-size: 0.78rem;
}
.tile-fs:hover { border-color: var(--cyan); color: var(--cyan); }

.icon-btn.sharing {
    background: rgba(78, 225, 201, 0.14); color: var(--cyan);
    border-color: rgba(78, 225, 201, 0.4);
}
.chip-btn.sharing { color: var(--cyan); border-color: var(--cyan); background: rgba(78, 225, 201, 0.08); }

.settings-tabs { flex-wrap: wrap; }
.settings-panel { display: flex; flex-direction: column; }
.field-note { color: var(--text-faint); font-weight: 400; font-size: 0.78rem; }

.pref-select {
    width: 100%; padding: 10px 12px; margin-bottom: 14px;
    background: var(--surface-3); border: 1px solid var(--line); border-radius: var(--radius-sm);
    color: var(--text); font-size: 0.92rem; cursor: pointer;
}
.pref-select:focus { outline: none; border-color: var(--cyan); }

.pref-range {
    width: 100%; margin: 6px 0 16px; accent-color: var(--cyan);
}

.pref-toggle-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 2px; border-bottom: 1px solid var(--line);
    font-size: 0.92rem; cursor: pointer;
}
.pref-toggle-row:last-child { border-bottom: none; }
.pref-toggle-row input[type="checkbox"] {
    width: 40px; height: 22px; appearance: none; -webkit-appearance: none;
    background: var(--surface-3); border: 1px solid var(--line-strong); border-radius: var(--radius-pill);
    position: relative; cursor: pointer; flex-shrink: 0; transition: background 0.15s;
}
.pref-toggle-row input[type="checkbox"]::after {
    content: ''; position: absolute; top: 2px; left: 2px;
    width: 16px; height: 16px; border-radius: 50%; background: var(--text-dim);
    transition: transform 0.15s, background 0.15s;
}
.pref-toggle-row input[type="checkbox"]:checked { background: rgba(78, 225, 201, 0.25); border-color: var(--cyan); }
.pref-toggle-row input[type="checkbox"]:checked::after { transform: translateX(18px); background: var(--cyan); }