:root{
  --brand-primary:#137ca9;
  --brand-primary-600:#238cb9;
  --brand-primary-700:#036c99;
  --ink-strong:#252122;
  --ink:#5d5d5d;
  --muted:#e6e6e6;
  --bg:#ffffff;
  --danger:#d64545;
  --surface:#f6f7f9;
  --radius:14px;
  --radius-sm:10px;
  --shadow:0 8px 24px rgba(0,0,0,.08);
  --shadow-sm:0 4px 14px rgba(0,0,0,.06);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  color:var(--ink);
  background:var(--surface);
}

/* Shell */
.vdoc-shell{max-width:1200px;margin:auto;padding:14px}
.vdoc-card{
  background:var(--bg);border:1px solid var(--muted);border-radius:var(--radius);
  box-shadow:var(--shadow);overflow:hidden;
}
.vdoc-header{
  padding:14px 16px;border-bottom:1px dashed var(--muted);
  display:flex;align-items:center;justify-content:space-between;gap:10px;
}
.vdoc-title{font-weight:600;color:var(--ink-strong)}
.vdoc-role{font-size:.9rem;color:var(--brand-primary);background:#e7f4fa;padding:6px 10px;border-radius:999px}

/* Layout */
.vdoc-main{display:grid;grid-template-columns:1fr;gap:14px;padding:14px}
.vdoc-two-col{grid-template-columns:1.1fr .9fr}
@media (max-width:900px){.vdoc-two-col{grid-template-columns:1fr}}

/* Video Area */
.vdoc-video-area{
  background:var(--bg);border:1px solid var(--muted);border-radius:var(--radius-sm);
  padding:12px;display:flex;flex-direction:column;gap:12px;position:relative;
}
.vdoc-remote{
  position:relative;border-radius:12px;overflow:hidden;background:#000;min-height:320px;
}
.vdoc-remote video{width:100%;height:100%;display:block;object-fit:cover;background:#000}
.vdoc-remote .label{
  position:absolute;left:10px;bottom:10px;background:rgba(0,0,0,.55);color:#fff;
  padding:6px 10px;border-radius:999px;font-size:.85rem
}

/* Small self preview (PIP) */
.vdoc-local{
  position:absolute;right:16px;bottom:84px; /* above controls */
  width:180px;height:120px;border-radius:10px;overflow:hidden;border:2px solid rgba(255,255,255,.85);
  box-shadow:var(--shadow-sm);background:#000;
}
.vdoc-local video{width:100%;height:100%;object-fit:cover;background:#000}
.vdoc-local .label{
  position:absolute;left:6px;bottom:6px;background:rgba(0,0,0,.55);color:#fff;
  padding:4px 8px;border-radius:999px;font-size:.75rem
}
@media (max-width:600px){
  .vdoc-local{width:120px;height:80px;right:12px;bottom:146px}
}

/* Controls */
.vdoc-controls{
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;
  border-top:1px dashed var(--muted);padding-top:12px
}
.vdoc-btn{
  appearance:none;border:none;cursor:pointer;padding:12px 14px;border-radius:12px;
  min-width:44px;min-height:44px;display:inline-flex;align-items:center;gap:8px;justify-content:center;
  background:#f2f4f7;color:var(--ink-strong);font-weight:600;transition:.08s ease;
}
.vdoc-btn:active{transform:translateY(1px)}
.vdoc-btn.primary{background:var(--brand-primary);color:#fff}
.vdoc-btn.primary:hover{background:var(--brand-primary-600)}
.vdoc-btn.danger{background:var(--danger);color:#fff}
.vdoc-btn.ghost{background:#eef3f6;color:#27414d}
.vdoc-btn[aria-pressed="true"]{outline:2px solid var(--brand-primary-600)}
.vdoc-meta{font-size:.9rem;color:#6b7280}

/* Mobile control dock */
@media (max-width:700px){
  .vdoc-controls.dock{
    position:sticky;bottom:0;background:var(--bg);padding:12px 8px;margin:0 -8px;
    border:1px solid var(--muted);border-radius:12px;box-shadow:var(--shadow-sm)
  }
}

/* Notes panel (provider only) */
.vdoc-notes{
  background:var(--bg);border:1px solid var(--muted);border-radius:var(--radius-sm);
  display:flex;flex-direction:column;min-height:360px;overflow:hidden;
}
.vdoc-tabs{display:flex;gap:8px;flex-wrap:wrap;padding:10px;border-bottom:1px dashed var(--muted)}
.vdoc-tab{
  padding:8px 12px;border-radius:999px;background:#f3f6f8;color:#2f3f47;cursor:pointer;font-weight:600;border:1px solid transparent;
}
.vdoc-tab.active{background:#e7f4fa;border-color:#bfe5f3;color:#0f5a78}
.vdoc-editor{padding:10px;flex:1;display:flex;flex-direction:column;gap:10px}
.vdoc-editor textarea{
  width:100%;flex:1;resize:vertical;min-height:180px;padding:12px;border-radius:12px;border:1px solid var(--muted);outline:none;
}
.vdoc-editor textarea:focus{border-color:var(--brand-primary-600);box-shadow:0 0 0 3px rgba(19,124,169,.12)}
.vdoc-editor .row{display:flex;gap:8px;flex-wrap:wrap}
.vdoc-chip{
  background:#eef7ee;color:#1b5e20;border:1px solid #cfe9cf;border-radius:999px;padding:6px 10px;font-size:.85rem
}

.hidden{display:none !important}