/* public/css/style.css */
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, sans-serif; background: #1a1a1a; color: #eee; }
.join { max-width: 320px; margin: 15vh auto; display: flex; flex-direction: column; gap: .75rem; padding: 1.5rem; }
.join input, .join button { padding: .6rem; font-size: 1rem; }
.room { display: grid; grid-template-columns: 1fr 320px; grid-template-rows: 1fr auto; height: 100vh; }
.videos { position: relative; grid-row: 1 / 3; background: #000; }
#remote-video { width: 100%; height: 100%; object-fit: contain; }
#local-video { position: absolute; width: 180px; bottom: 12px; right: 12px; border: 2px solid #444; border-radius: 8px; }
.controls { grid-column: 1; display: flex; gap: .5rem; align-items: center; padding: .5rem 1rem; background: #222; }
.controls button { padding: .5rem 1rem; }
.chat { grid-column: 2; grid-row: 1 / 3; display: flex; flex-direction: column; border-left: 1px solid #333; }
#chat-log { flex: 1; list-style: none; margin: 0; padding: .5rem; overflow-y: auto; }
#chat-log li { padding: .25rem 0; }
#chat-log li.mine { text-align: right; color: #8ab4f8; }
#chat-form { display: flex; padding: .5rem; gap: .5rem; }
#chat-input { flex: 1; padding: .5rem; }

/* Overlay de senha (entrar por link em sala protegida) */
.overlay { position: fixed; inset: 0; background: rgba(0,0,0,.85); display: flex; align-items: center; justify-content: center; z-index: 10; }
.overlay[hidden] { display: none; }
.password-box { display: flex; flex-direction: column; gap: .75rem; background: #222; padding: 1.5rem; border-radius: 10px; width: min(90vw, 320px); }
.password-box h2 { margin: 0; }
.password-box p { margin: 0; font-size: .9rem; color: #bbb; }
.password-box p.error { color: #f28b82; }
.password-box input, .password-box button { padding: .6rem; font-size: 1rem; }