.pcs-shell{--pcs-gold:#dfbb86;--pcs-bg:#1c141a;color:#f5eaf0;background:var(--pcs-bg);border-radius:18px;padding:clamp(16px,3vw,38px);font-family:Arial,sans-serif;max-width:1250px;margin:22px auto;box-sizing:border-box}.pcs-shell *{box-sizing:border-box}.pcs-shell h1,.pcs-shell h2,.pcs-shell h3{color:#f8e5d6;margin:0 0 12px}.pcs-shell p{color:#decbd2}.pcs-eyebrow{color:var(--pcs-gold);letter-spacing:2px;font-size:12px}.pcs-banner{padding:48px 24px;text-align:center;background:linear-gradient(120deg,#301823,#4a1e32,#21131b);border-radius:15px;margin-bottom:22px}.pcs-banner h1{font-family:Georgia,serif;font-size:clamp(32px,5vw,56px)}.pcs-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px}.pcs-card,.pcs-panel{background:#2c2029;border:1px solid #594252;border-radius:15px;overflow:hidden}.pcs-card-inner{padding:20px}.pcs-cover,.pcs-placeholder{height:210px;width:100%;object-fit:cover}.pcs-placeholder{display:grid;place-items:center;font-size:68px;color:var(--pcs-gold);background:linear-gradient(140deg,#572b40,#22121d)}.pcs-button,.pcs-small{background:#bd9262;color:#1e1018!important;border:0;border-radius:8px;padding:11px 14px;cursor:pointer;text-decoration:none!important;display:inline-block;font-weight:700}.pcs-small{font-size:12px;padding:6px 8px}.pcs-button:disabled{opacity:.4;cursor:not-allowed}.pcs-top{display:flex;justify-content:space-between;gap:14px;align-items:start;margin-bottom:25px}.pcs-pill{white-space:nowrap;border:1px solid #ae916f;color:#e2cba9;border-radius:99px;padding:8px 12px}.pcs-cols{display:grid;grid-template-columns:minmax(0,2fr) minmax(270px,1fr);gap:20px}.pcs-panel{padding:18px}.pcs-video-box{position:relative;aspect-ratio:16/9;background:#09080c;border-radius:12px;overflow:hidden}.pcs-remote-video{position:absolute;width:100%;height:100%;object-fit:contain}.pcs-video-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;font-size:32px;color:#d8bd98;text-align:center}.pcs-video-placeholder span{font-size:15px}.pcs-video-placeholder[hidden]{display:none}.pcs-local-video{position:absolute;right:10px;bottom:10px;width:30%;max-height:44%;object-fit:cover;border:2px solid #d2b081;border-radius:10px;background:#111}.pcs-local-video[hidden]{display:none}.pcs-controls{display:flex;gap:8px;flex-wrap:wrap;margin-top:15px}.pcs-status{margin:13px 0;color:#ddc49f;font-size:13px;min-height:24px}.pcs-chat{margin-top:22px}.pcs-messages{height:145px;overflow:auto;background:#1c151b;padding:12px;border-radius:9px;font-size:13px}.pcs-msg{padding:6px 0;border-bottom:1px solid #4a3642}.pcs-chat-form{display:flex;gap:8px;margin-top:10px}.pcs-chat input{flex:1;min-width:0;border-radius:7px;border:1px solid #88717e;padding:10px}.pcs-note,.pcs-warning{font-size:13px;line-height:1.6}.pcs-warning{color:#ffcfaa!important}.pcs-check,.pcs-switches label{display:block;margin:15px 0;color:#f8e6e7}.pcs-switches input,.pcs-check input,.pcs-visitor input{accent-color:#dfbb86}.pcs-visitor{border-top:1px solid #6d4d5b;padding:12px 0;display:flex;gap:7px;align-items:center;flex-wrap:wrap;font-size:12px}.pcs-visitor strong{width:100%}.pcs-visitor label{display:flex;align-items:center;gap:4px}.pcs-side h3:not(:first-child){margin-top:24px}@media(max-width:760px){.pcs-cols{grid-template-columns:1fr}.pcs-top{flex-direction:column}.pcs-shell{border-radius:8px}.pcs-panel{padding:12px}}

.pcs-host-login{margin:16px 0;padding:14px;border:1px solid #8d6274;border-radius:12px;background:#271922}.pcs-host-login summary{cursor:pointer;color:#f4d4ac;font-weight:700}.pcs-host-login form{display:grid;gap:10px;margin:12px 0}.pcs-host-login label{display:grid;gap:6px}.pcs-host-login input{min-height:42px;border-radius:8px;border:1px solid #8b7881;padding:8px;background:#fff;color:#181118;width:100%;box-sizing:border-box}.pcs-code-feedback{font-size:13px;color:#f3d3ad}.pcs-code-verify[hidden]{display:none}

.pcs-request-feedback{color:#e7c897!important;font-size:14px;margin:12px 0;line-height:1.5;} .pcs-request:disabled{opacity:.65;cursor:wait}

.pcs-video-box video[hidden]{display:none!important}.pcs-help{font-size:12px;line-height:1.5;color:#e0cfcf;margin:10px 0}.pcs-status{line-height:1.5}.pcs-controls .pcs-start[hidden]{display:none!important}.pcs-video-box .pcs-remote-video{background:transparent}

.pcs-audio-toggle[hidden]{display:none!important}

.pcs-exit[hidden]{display:none!important}.pcs-danger{background:#703344;color:#fff!important}.pcs-visitor button:disabled{opacity:.55;cursor:default}.pcs-visitor label{cursor:pointer}.pcs-visitor label input{width:16px;height:16px}

/* v0.2.1: discrete, golvende lijn tijdens het verbinden, geen openbare preview. */
.pcs-connecting[hidden],.pcs-placeholder-lock[hidden]{display:none!important}
.pcs-connecting{width:180px;max-width:85%;height:48px;display:flex;align-items:center;justify-content:center;filter:drop-shadow(0 0 7px rgba(223,187,134,.23))}
.pcs-wave-svg{width:100%;height:auto;overflow:visible}
.pcs-wave-back,.pcs-wave-front{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:3}
.pcs-wave-back{stroke:#79586b;opacity:.38}
.pcs-wave-front{stroke:#eac58c;stroke-dasharray:20 12;animation:pcs-wave-flow 1.2s linear infinite}
@keyframes pcs-wave-flow{to{stroke-dashoffset:-64}}
.pcs-placeholder-message{max-width:94%;font-size:14px;line-height:1.5;letter-spacing:.02em}
@media(prefers-reduced-motion:reduce){.pcs-wave-front{animation:none;stroke-dasharray:none}}

/* v0.2.2: overzichtelijke groepschat met eigen berichten rechts en afzender/tijd. */
.pcs-chat-hint{font-size:12px!important;color:#cdb7c2!important;margin:0 0 10px!important;}
.pcs-messages{height:270px;display:flex;flex-direction:column;gap:10px;padding:12px;background:#1c151b;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;}
.pcs-msg{display:flex;flex-direction:column;gap:4px;border:1px solid #584354;border-radius:12px;padding:9px 12px;max-width:88%;min-width:70px;overflow-wrap:anywhere;white-space:pre-wrap;flex-shrink:0;}
.pcs-msg-other{align-self:flex-start;background:#392935;color:#f4e9ed;border-bottom-left-radius:3px;}
.pcs-msg-mine{align-self:flex-end;background:#dec08f;color:#25161f;border-color:#dec08f;border-bottom-right-radius:3px;}
.pcs-msg-meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;font-size:11px;opacity:.88;}
.pcs-msg-meta strong{font-size:12px;font-weight:700;}
.pcs-msg-meta time{font-variant-numeric:tabular-nums;}
.pcs-msg-text{font-size:14px;line-height:1.45;}
@media(max-width:760px){.pcs-messages{height:300px}.pcs-msg{max-width:94%}}

/* v0.2.3: chat als compacte regels, zonder tekstballonnen, ook op mobiel. */
.pcs-chat-hint{display:none!important}
.pcs-messages{height:205px;display:block;gap:0;padding:7px 9px;overflow-y:auto;overflow-x:hidden;background:#1c151b;border-radius:7px;}
.pcs-msg,.pcs-msg-mine,.pcs-msg-other{display:block;max-width:100%;min-width:0;margin:0;padding:3px 0;border:0;border-radius:0;background:transparent;color:#f1e4e9;align-self:auto;font-size:13px;line-height:1.36;overflow-wrap:anywhere;white-space:normal;text-align:left;}
.pcs-msg-time{display:inline;color:#ae99a6;font-size:11px;font-variant-numeric:tabular-nums;white-space:nowrap;}
.pcs-msg-name{display:inline;color:#d8b687;font-size:12px;font-weight:700;}
.pcs-msg-mine .pcs-msg-name{color:#f1d6aa;}
.pcs-msg-text{display:inline;font-size:13px;line-height:inherit;white-space:pre-wrap;}
@media(max-width:760px){.pcs-messages{height:185px;padding:6px 7px}.pcs-msg{padding:2px 0}.pcs-msg-text{font-size:12.5px}}


/* v0.2.4: elke actieve bezoekerscamera in een eigen tegel; geen overschrijven. */
.pcs-video-gallery{position:absolute;inset:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(0,1fr);gap:6px;padding:6px;background:#09080c;overflow:hidden}
.pcs-video-gallery:empty{display:none}
.pcs-video-gallery[data-count="1"]{grid-template-columns:minmax(0,1fr)}
.pcs-video-gallery[data-count="0"]{display:none}
.pcs-gallery-tile{position:relative;min-height:0;min-width:0;background:#09080c;border:1px solid #5a3d52;border-radius:8px;overflow:hidden}
.pcs-gallery-tile[hidden]{display:none!important}
.pcs-gallery-video{display:block;width:100%;height:100%;object-fit:contain;background:#09080c}
.pcs-gallery-name{position:absolute;left:7px;bottom:7px;max-width:calc(100% - 14px);padding:3px 6px;border-radius:5px;background:rgba(16,10,18,.82);color:#f8e5d6;font-size:11px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none}
.pcs-video-gallery[data-count="5"]{grid-template-columns:repeat(3,minmax(0,1fr))}
.pcs-app[data-owner="1"] .pcs-video-box .pcs-local-video{z-index:2}
@media(max-width:760px){.pcs-video-gallery{gap:3px;padding:3px}.pcs-gallery-name{left:3px;bottom:3px;padding:2px 3px;font-size:10px}.pcs-video-gallery[data-count="5"]{grid-template-columns:repeat(2,minmax(0,1fr))}}


/* v0.2.5 – Nicole groot, altijd vijf vaste gastvakken eronder. */
.pcs-app[data-owner="1"] .pcs-video-box .pcs-local-video{
 position:absolute;inset:0;right:auto;bottom:auto;width:100%;height:100%;max-height:none;
 object-fit:contain;border:0;border-radius:0;background:#09080c;z-index:2;
}
.pcs-app[data-owner="1"] .pcs-video-box .pcs-remote-video{display:none!important}
.pcs-app[data-owner="1"] .pcs-video-box .pcs-video-placeholder{z-index:1}
.pcs-host-video-name{
 position:absolute;z-index:3;left:12px;bottom:10px;
 color:#f8e5d6;background:rgba(18,11,18,.72);padding:5px 9px;
 border:1px solid rgba(223,187,134,.4);border-radius:7px;font-size:12px;
 pointer-events:none;
}
.pcs-app[data-owner="1"] .pcs-video-box:has(.pcs-local-video[hidden]) .pcs-host-video-name{display:none}
.pcs-app[data-owner="1"] .pcs-video-gallery{
 position:static;inset:auto;display:grid!important;
 grid-template-columns:repeat(5,minmax(0,1fr))!important;
 grid-auto-rows:auto;gap:7px;margin-top:9px;padding:0;
 background:transparent;overflow:visible;
}
.pcs-app[data-owner="1"] .pcs-gallery-tile{
 aspect-ratio:16/10;position:relative;background:#0d0b11;
 border:1px solid #6a4c5d;border-radius:7px;min-width:0;min-height:0;
}
.pcs-app[data-owner="1"] .pcs-gallery-tile.pcs-gallery-empty{border-color:#4f3b48}
.pcs-app[data-owner="1"] .pcs-gallery-video{
 position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
 background:#09080c;
}
.pcs-app[data-owner="1"] .pcs-gallery-video[hidden]{display:none!important}
.pcs-app[data-owner="1"] .pcs-slot-state{
 position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
 color:#9c8998;font-size:12px;text-align:center;padding:8px 3px;
}
.pcs-app[data-owner="1"] .pcs-gallery-live .pcs-slot-state{display:none}
.pcs-app[data-owner="1"] .pcs-gallery-name{
 position:absolute;left:4px;bottom:4px;max-width:calc(100% - 8px);
 font-size:10px;line-height:1.2;padding:2px 4px;
 background:rgba(16,10,18,.80);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
@media(max-width:760px){
 .pcs-app[data-owner="1"] .pcs-video-gallery{gap:3px;margin-top:5px}
 .pcs-app[data-owner="1"] .pcs-gallery-tile{border-radius:4px}
 .pcs-app[data-owner="1"] .pcs-slot-state{font-size:9px;padding:2px}
 .pcs-app[data-owner="1"] .pcs-gallery-name{left:2px;bottom:2px;max-width:calc(100% - 4px);font-size:8px;padding:1px 2px}
 .pcs-host-video-name{font-size:10px;left:6px;bottom:6px;padding:3px 5px}
}


/* v0.2.5 — klik op een gastminiatuur om deze groot te tonen. */
.pcs-app[data-owner="1"] .pcs-video-box .pcs-focus-video{
 position:absolute;inset:0;width:100%;height:100%;max-height:none;
 object-fit:contain;background:#09080c;z-index:4;
}
.pcs-app[data-owner="1"] .pcs-video-box .pcs-focus-video[hidden]{display:none!important}
.pcs-app[data-owner="1"] .pcs-host-video-name{z-index:5}
.pcs-app[data-owner="1"] .pcs-host-video-name[hidden]{display:none!important}
.pcs-app[data-owner="1"] .pcs-video-box:has(.pcs-local-video[hidden]) .pcs-host-video-name:not([hidden]){display:block}
.pcs-app[data-owner="1"] .pcs-back-to-host{
 position:absolute;z-index:6;right:10px;top:10px;border-radius:7px;
 border:1px solid #d9b37e;background:rgba(27,17,26,.92);
 color:#f5dfb9;font-size:12px;padding:8px 11px;cursor:pointer;
}
.pcs-app[data-owner="1"] .pcs-back-to-host[hidden]{display:none!important}
.pcs-app[data-owner="1"] .pcs-gallery-tile{
 appearance:none;display:block;width:100%;padding:0;text-align:inherit;
 font-family:inherit;color:inherit;cursor:pointer;
}
.pcs-app[data-owner="1"] .pcs-gallery-tile:disabled{cursor:default;opacity:1}
.pcs-app[data-owner="1"] .pcs-gallery-tile.pcs-gallery-live:hover{border-color:#f0d19d}
.pcs-app[data-owner="1"] .pcs-gallery-tile.pcs-gallery-live:focus-visible{
 outline:2px solid #f3d096;outline-offset:2px;
}
.pcs-app[data-owner="1"] .pcs-gallery-tile.pcs-gallery-selected{
 border:2px solid #e6bb7e;box-shadow:0 0 0 1px #e6bb7e;
}
.pcs-app[data-owner="1"] .pcs-gallery-tile.pcs-gallery-live::after{
 content:'⤢';position:absolute;right:4px;top:3px;z-index:2;
 border-radius:4px;padding:0 4px;color:#fff5dc;background:rgba(16,10,18,.73);
 font-size:14px;line-height:19px;pointer-events:none;
}
@media(max-width:760px){
 .pcs-app[data-owner="1"] .pcs-gallery-tile{min-height:44px}
 .pcs-app[data-owner="1"] .pcs-back-to-host{font-size:11px;right:5px;top:5px;padding:6px 8px}
 .pcs-app[data-owner="1"] .pcs-gallery-tile.pcs-gallery-live::after{font-size:10px;line-height:14px;right:2px;top:2px;padding:0 2px}
}

/* v0.2.7: mobiele chat direct onder videobeeld en 5 gastminiaturen,
   alle bestaande bedieningsknoppen bereikbaar via pop-up naast de studionaam. */
.pcs-heading-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.pcs-heading-row h1{margin-bottom:0}
.pcs-control-open{display:none!important}
.pcs-control-dialog{border:1px solid #9e7a65;border-radius:15px;
 background:#2c2029;color:#f5eaf0;padding:18px;width:calc(100% - 32px);
 max-width:420px;max-height:min(82dvh,700px);overflow:auto;
 box-shadow:0 18px 65px rgba(0,0,0,.65);z-index:20000}
.pcs-control-dialog:not([open]){display:none}
.pcs-control-dialog::backdrop{background:rgba(7,5,8,.78)}
.pcs-dialog-heading{display:flex;align-items:start;justify-content:space-between;gap:12px;margin-bottom:16px}
.pcs-control-dialog h2{color:#f7dfcd;font-size:20px;line-height:1.3;margin:2px 0 0}
.pcs-dialog-close{display:grid;place-items:center;min-width:38px;height:38px;
 border:1px solid #b18c73;background:#3e2b36;color:#f8e8d8;
 border-radius:8px;font-size:18px;cursor:pointer}
.pcs-control-dialog .pcs-controls{display:grid;grid-template-columns:1fr;gap:9px;margin:0}
.pcs-control-dialog .pcs-controls .pcs-button{display:block;width:100%;font-size:15px;min-height:47px;text-align:center}
.pcs-control-dialog .pcs-controls .pcs-button[hidden]{display:none!important}
@media(max-width:760px){
 .pcs-app .pcs-top{gap:8px;margin-bottom:12px}
 .pcs-app .pcs-heading-row{flex-wrap:nowrap;align-items:center;gap:10px}
 .pcs-app .pcs-heading-row h1{font-size:clamp(24px,7vw,34px);min-width:0;overflow-wrap:anywhere}
 .pcs-app .pcs-control-open{display:inline-flex!important;align-items:center;justify-content:center;
  white-space:nowrap;font-size:13px;min-height:40px;padding:9px 12px;flex-shrink:0}
 .pcs-app .pcs-cols>section.pcs-panel{display:flex;flex-direction:column}
 .pcs-app .pcs-cols>section.pcs-panel>.pcs-video-box{order:1}
 .pcs-app .pcs-cols>section.pcs-panel>.pcs-video-gallery{order:2}
 .pcs-app .pcs-cols>section.pcs-panel>.pcs-chat{order:3;margin-top:10px}
 .pcs-app .pcs-cols>section.pcs-panel>.pcs-controls{order:4}
 .pcs-app .pcs-cols>section.pcs-panel>.pcs-status{order:5;margin:8px 0 3px}
 .pcs-app .pcs-cols>section.pcs-panel>.pcs-help{order:6;margin:5px 0}
 .pcs-app .pcs-chat h3{font-size:19px;line-height:1.25;margin:0 0 7px}
 .pcs-app .pcs-messages{height:190px}
 .pcs-app .pcs-chat-form{margin-top:8px}
 .pcs-app .pcs-chat-form .pcs-button{min-height:42px}
}