:root {
    --bg: #1a1a2e;
    --panel-bg: #16213e;
    --text: #ffffff;
    --primary: #0f3460;
    --accent: #e94560;
}

* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }

body { background-color: var(--bg); color: var(--text); height: 100vh; display: flex; flex-direction: column; }

header { padding: 15px 20px; background: var(--panel-bg); display: flex; justify-content: space-between; align-items: center; box-shadow: 0 2px 10px rgba(0,0,0,0.5); }

.status-bar span { margin-left: 15px; font-weight: bold; font-size: 0.9em; }
.status-disconnected { color: #888; }
.status-waiting { color: #f39c12; }
.status-connected { color: #2ecc71; }

.container { display: flex; flex: 1; overflow: hidden; padding: 20px; gap: 20px; }

/* Zone Vidéo */
.video-section { flex: 1; display: flex; flex-direction: column; min-width: 300px; gap: 15px; }

.video-container { 
    position: relative; 
    background: #000; 
    border-radius: 10px; 
    overflow: hidden; 
    flex: 1; 
    min-height: 200px; 
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid var(--panel-bg); 
}

/* Contain permet d'afficher toute l'image de la webcam (type OBS) sans couper les bords */
video { width: 100%; height: 100%; object-fit: contain; }

.label { position: absolute; bottom: 10px; left: 10px; background: rgba(0,0,0,0.6); padding: 5px 10px; border-radius: 5px; font-size: 0.8em; }

.controls { display: flex; gap: 10px; justify-content: center; background: var(--panel-bg); padding: 15px; border-radius: 10px; flex-wrap: wrap; }
button, select { padding: 10px 20px; border: none; border-radius: 5px; font-weight: bold; cursor: pointer; color: white; transition: 0.2s; outline: none; }
button:disabled { opacity: 0.5; cursor: not-allowed; }

select { background: #333; }
.btn-primary { background: #27ae60; }
.btn-primary:hover:not(:disabled) { background: #219653; }
.btn-secondary { background: #2980b9; }
.btn-secondary:hover:not(:disabled) { background: #2471a3; }
.btn-danger { background: var(--accent); }
.btn-danger:hover:not(:disabled) { background: #c0392b; }

/* Boutons Caméra/Micro */
.btn-media { background: #8e44ad; }
.btn-media:hover { background: #9b59b6; }
.btn-media.off { background: #c0392b; }

/* Zone Chat - Largeur fixe à 350px */
.chat-section { 
    width: 350px; 
    flex-shrink: 0; 
    background: var(--panel-bg); 
    border-radius: 10px; 
    display: flex; 
    flex-direction: column; 
    height: 100%; 
    opacity: 0.5; 
    pointer-events: none; 
    transition: 0.3s; 
}

.chat-section.active { opacity: 1; pointer-events: all; }

.chat-history { flex: 1; padding: 15px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.msg { padding: 10px; border-radius: 8px; max-width: 85%; line-height: 1.4; }
.msg.me { background: var(--primary); align-self: flex-end; }
.msg.partner { background: #333; align-self: flex-start; }
.msg-original { font-size: 0.75em; color: #aaa; margin-top: 5px; font-style: italic; display: block; }
.system-msg { text-align: center; color: #888; font-size: 0.9em; font-style: italic; }

.chat-input-area { display: flex; padding: 10px; background: rgba(0,0,0,0.2); border-top: 1px solid #333; gap: 10px;}
.chat-input-area input { flex: 1; padding: 10px; border-radius: 5px; border: none; background: #222; color: white; }
.chat-input-area button { background: var(--primary); }

@media (max-width: 900px) {
    .container { flex-direction: column; overflow-y: auto; }
    .chat-section { width: 100%; height: 400px; flex-shrink: 1; }
}