:root{
.status{
  margin-left:auto;
  padding:4px 8px;
  border-radius:6px;
  font-size:12px;
  border:1px solid var(--panel-border);
  background:#2a2f3b;
  color:#cbd5e1;
}
.status-idle{ background:#2a2f3b; color:#cbd5e1; }
.status-live{ background:var(--ok); color:var(--ok-text); }
.status-error{ background:var(--warn); color:var(--warn-text); }

.viewer-wrap{
  position:relative;
  background:#000;
  border:1px solid var(--panel-border);
  border-radius:var(--radius);
  overflow:hidden;
  min-height:240px;
  height:100%;
  box-shadow: var(--shadow);
  z-index:1;                   /* video-laag */
  isolation:isolate;           /* voorkomt overlay-issues */
}

#localVideo, #remoteVideo{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  background:#000;
  position:relative;
  z-index:1;
}

/* Zwevende Chat-knop bovenop video (maar onder chat-kolom) */
.chat-toggle-floating{
  position:absolute;
  top:10px; right:10px;
  z-index:2;                   /* onder chat-kolom (z-index:5) */
  border:1px solid var(--panel-border);
  background:rgba(22,26,34,.85);
  color:var(--text);
  border-radius:999px;
  padding:8px 12px;
  cursor:pointer;
  backdrop-filter: blur(6px);
}
.chat-toggle-floating:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

/* ===== Chatpaneel ===== */
.chat-col{
  position:relative;
  z-index:5;                   /* boven de viewer altijd klikbaar */
  background:var(--panel-bg);
  border:1px solid var(--panel-border);
  border-radius:var(--radius);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:opacity .22s ease;
  box-shadow: var(--shadow);
}

/* Wanneer ingeklapt: echt onklikbaar maken */
.two-cols.chat-collapsed .chat-col{
  opacity:0;
  pointer-events:none;
}

/* Zorg dat de zwevende chatknop altijd zichtbaar blijft */
.chat-toggle-floating {
  display: block !important;
}
.two-cols.chat-collapsed .chat-toggle-floating {
  display: block !important;
}

/* Top-knop binnen chatkolom */

.chat-content{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:8px;
  height:100%;
}

.chat-content h2{
  margin:0 0 4px;
  font-size:16px;
  color:var(--text);
}

.chat-messages{
  flex:1 1 0;
  overflow:auto;
  background:var(--panel-bg-soft);
  border:1px solid var(--panel-border);
  border-radius:var(--radius-sm);
  padding:8px;
  word-break:break-word;
}

/* Optioneel: nette chat-bericht opmaak */
.chat-message{
  padding:6px 8px;
  border-radius:8px;
  background:#12151c;
  border:1px solid #1e2430;
  margin-bottom:6px;
}
.chat-message strong{ color:#dbe3f0; }

/* Form onderaan */
.chat-form{
  display:flex;
  gap:6px;
}

.chat-form input{
  flex:1;
  padding:10px 12px;
  border-radius:var(--radius-sm);
  border:1px solid var(--panel-border);
  background:#161a22;
  color:var(--text);
}
.chat-form input::placeholder{ color:#7e889a; }

.chat-form button{
  padding:10px 12px;
  border-radius:var(--radius-sm);
  border:1px solid var(--panel-border);
  background:#1d2533;
  color:var(--text);
  cursor:pointer;
  transition: transform .06s ease, background .15s ease, border-color .15s ease;
}
.chat-form button:hover{ background:#232e41; border-color:#2d3648; }
.chat-form button:active{ transform: translateY(1px) scale(.99); }
.chat-form button:disabled{
  opacity:.6;
  cursor:not-allowed;
}

/* ===== Klikbaarheid-fixes (kritisch) ===== */
.two-cols{ overflow:visible; }
.viewer-wrap{ z-index:1; }
.chat-col{ z-index:5; }
.chat-content, .chat-form, .chat-form button{ pointer-events:auto; }

/* ===== Utilities ===== */
.hide{ display:none !important; }
.sr-only{
  position:absolute !important;
  height:1px; width:1px;
  overflow:hidden; clip:rect(1px,1px,1px,1px);
  white-space:nowrap; border:0; padding:0; margin:-1px;
}

/* ===== Scrollbar (webkit) ===== */
.chat-messages::-webkit-scrollbar,
pre#chatLog::-webkit-scrollbar,
pre#log::-webkit-scrollbar{ width:10px; height:10px; }
.chat-messages::-webkit-scrollbar-thumb,
pre#chatLog::-webkit-scrollbar-thumb,
pre#log::-webkit-scrollbar-thumb{
  background:#2b3242; border-radius:10px; border:2px solid transparent; background-clip:padding-box;
}
.chat-messages::-webkit-scrollbar-track,
pre#chatLog::-webkit-scrollbar-track,
pre#log::-webkit-scrollbar-track{ background:transparent; }

/* ===== Inputs en selects: states ===== */
select, button, input{
  -webkit-tap-highlight-color: transparent;
}
select:disabled, button:disabled, input:disabled{
  opacity:.6; cursor:not-allowed;
}

/* ===== Responsief ===== */
@media (max-width:1080px){
  :root{ --chat-width:340px; }
}
@media (max-width:960px){
  :root{ --chat-width:320px; }
}
@media (max-width:820px){
  .two-cols{ grid-template-columns:1fr; }
  .two-cols.chat-collapsed{ grid-template-columns:1fr; }
}

/* ===== Reduce motion respecteren ===== */
@media (prefers-reduced-motion: reduce){
  .two-cols{ transition:none; }
  .room-controls button{ transition:none; }
  .chat-col{ transition:none; }
}

/* ===== Safe-area (mobiele notch) ===== */
@supports (padding: max(0px)){
  body{ padding-bottom: max(env(safe-area-inset-bottom), 0px); }
}
}