/* Voice Channels — chat strip, header badge, Voice dock (docs/voice-channels.md).
   House rules: weight 400 only (no bold), tokens from the shell with dock fallbacks. */
.vc-ico { width: 16px; height: 16px; fill: currentColor; flex: none; }

/* ── chat header badge ── */
.vc-badge {
  display: inline-flex; align-items: center; gap: 4px; min-width: 0; max-width: 140px;
  background: var(--ws-brand-primary-08, rgba(255,70,85,.08)); color: var(--ws-text, #e8e8ee);
  border: 1px solid var(--ws-brand-primary-15, rgba(255,70,85,.2)); border-radius: 999px;
  padding: 2px 8px; font: inherit; font-size: 11px; font-weight: 400; letter-spacing: .3px; cursor: pointer;
  white-space: nowrap; overflow: hidden; flex-shrink: 1;
}
.vc-badge[hidden] { display: none; }
.vc-badge-ico { font-size: 11px; line-height: 1; flex: none; }
.vc-badge-txt { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.vc-badge:hover { border-color: var(--ws-brand-primary-40, rgba(255,70,85,.45)); }
.home-chat-head-right { min-width: 0; }
.home-chat-title { min-width: 0; }
@media (max-width: 380px) { .vc-badge { max-width: 92px; } }

/* ── strip ── */
.vc-strip { border-bottom: 1px solid var(--ws-hairline, rgba(255,255,255,.06)); padding: 6px 12px 8px; font-size: 12px; color: var(--ws-text, #e8e8ee); position: relative; }
.vc-strip[hidden] { display: none; }
.vc-strip button { font: inherit; font-weight: 400; color: inherit; }
.vc-head { display: flex; align-items: center; gap: 6px; width: 100%; background: none; border: 0; padding: 4px 2px; cursor: pointer; text-align: left; min-width: 0; }
.vc-head-title { font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ws-muted, #9a9aa6); white-space: nowrap; }
.vc-head-sub { font-size: 11px; color: var(--ws-muted, #9a9aa6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.vc-chev { margin-left: auto; transition: transform .15s ease; color: var(--ws-muted, #9a9aa6); }
.vc-strip:not(.collapsed) .vc-chev { transform: rotate(180deg); }
.vc-list { display: flex; flex-direction: column; gap: 2px; margin-top: 2px; }

.vc-row { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 8px; border: 1px solid transparent; min-width: 0; }
.vc-row:hover { background: var(--ws-midnight, rgba(255,255,255,.04)); }
.vc-row.active { background: var(--ws-brand-primary-08, rgba(255,70,85,.08)); border-color: var(--ws-brand-primary-40, rgba(255,70,85,.45)); }
.vc-row-main { display: flex; align-items: center; gap: 6px; flex: 1 1 auto; min-width: 0; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
.vc-row.active .vc-row-main { cursor: default; }
.vc-row-main .vc-ico { color: var(--ws-muted, #9a9aa6); }
.vc-row.active .vc-row-main .vc-ico { color: var(--ws-brand-primary, #ff4655); }
.vc-row-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.vc-row-avs { display: inline-flex; align-items: center; flex: none; }
.vc-row-avs .vc-av + .vc-av { margin-left: -6px; }
.vc-more { font-size: 10px; color: var(--ws-muted, #9a9aa6); margin-left: 4px; }
.vc-row-count { flex: none; font-size: 11px; color: var(--ws-muted, #9a9aa6); font-variant-numeric: tabular-nums; min-width: 34px; text-align: right; }

.vc-av { width: 22px; height: 22px; border-radius: 50%; overflow: hidden; display: inline-flex; align-items: center; justify-content: center;
  background: var(--ws-surface, #1c1c24); color: var(--ws-muted, #9a9aa6); font-size: 10px; border: 2px solid var(--ws-bg, #0f0f14);
  box-sizing: border-box; cursor: pointer; flex: none; transition: box-shadow .12s ease; }
.vc-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vc-av.speaking { box-shadow: 0 0 0 2px #2ecc71; }
.vc-av.lg { width: 36px; height: 36px; font-size: 14px; cursor: default; }
.vc-av:focus-visible { outline: 2px solid var(--ws-brand-primary, #ff4655); outline-offset: 1px; }

/* avatar card */
.vc-card { margin: 2px 6px 6px 28px; padding: 10px; border-radius: 10px; background: var(--ws-surface-solid, #17171e);
  border: 1px solid var(--ws-border, rgba(255,255,255,.1)); box-shadow: 0 6px 18px rgba(0,0,0,.35); display: flex; flex-direction: column; gap: 8px; }
.vc-card-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.vc-card-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.vc-card-share { color: var(--ws-brand-primary, #ff4655); display: inline-flex; }
.vc-card-vol { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--ws-muted, #9a9aa6); }
.vc-card-vol input, .vc-master input { width: 100%; accent-color: var(--ws-brand-primary, #ff4655); }
.vc-card-acts { display: flex; gap: 6px; flex-wrap: wrap; }
.vc-card-btn { background: none; border: 1px solid var(--ws-border, rgba(255,255,255,.12)); border-radius: 6px; padding: 4px 10px; cursor: pointer; font-size: 11px; }
.vc-card-btn:disabled { opacity: .45; cursor: default; }
.vc-card-btn.danger { border-color: rgba(255,70,85,.45); color: #ff8a93; }

/* connected panel */
.vc-panel { margin-top: 6px; padding: 8px; border-radius: 10px; border: 1px solid var(--ws-border, rgba(255,255,255,.1)); display: flex; flex-direction: column; gap: 8px; }
.vc-status { display: flex; align-items: center; gap: 6px; font-size: 11px; min-width: 0; }
.vc-status-txt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; color: var(--ws-text, #e8e8ee); }
.vc-dot { width: 7px; height: 7px; border-radius: 50%; background: #f1c40f; flex: none; }
.vc-dot.on { background: #2ecc71; }
.vc-ctl { display: flex; gap: 6px; align-items: center; }
.vc-cbtn { width: 32px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; cursor: pointer;
  background: var(--ws-midnight, rgba(255,255,255,.05)); border: 1px solid var(--ws-border, rgba(255,255,255,.1)); padding: 0; }
.vc-cbtn:hover { border-color: var(--ws-border-strong, rgba(255,255,255,.25)); }
.vc-cbtn.off { color: #ff8a93; border-color: rgba(255,70,85,.4); }
.vc-cbtn.on { color: var(--ws-brand-primary, #ff4655); border-color: var(--ws-brand-primary-40, rgba(255,70,85,.45)); }
/* Leave follows the other controls (no margin-left:auto): the page's floating mascot sits at the right edge. */
.vc-cbtn.vc-leave { background: #c0392b; border-color: #c0392b; color: #fff; }
.vc-cbtn.vc-leave:hover { background: #e74c3c; }
.vc-ctl.compact .vc-cbtn { width: 26px; height: 24px; }
.vc-ctl.compact .vc-ico { width: 14px; height: 14px; }
.vc-master { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--ws-muted, #9a9aa6); }
.vc-master span { flex: none; }
.vc-enable-audio { background: var(--ws-brand-primary, #ff4655); color: #fff; border: 0; border-radius: 8px; padding: 6px 10px; cursor: pointer; }

/* settings */
.vc-settings { display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: 8px; background: var(--ws-midnight, rgba(255,255,255,.04)); }
.vc-set-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11px; min-width: 0; }
.vc-set-row select { max-width: 60%; min-width: 0; background: var(--ws-bg, #0f0f14); color: inherit; border: 1px solid var(--ws-border, rgba(255,255,255,.12)); border-radius: 6px; padding: 3px 6px; font: inherit; }
.vc-set-row > span { flex: none; }
.vc-set-row[hidden], .vc-keybind[hidden] { display: none; }
.vc-dd { position: relative; display: flex; flex-direction: column; align-items: stretch; min-width: 0; max-width: 64%; flex: 1 1 auto; }
.vc-dd-btn { display: flex; align-items: center; gap: 6px; min-width: 0; width: 100%; background: var(--ws-bg, #0f0f14); border: 1px solid var(--ws-border, rgba(255,255,255,.12)); border-radius: 6px; padding: 3px 6px; cursor: pointer; text-align: left; }
.vc-dd-btn:hover, .vc-dd.open .vc-dd-btn { border-color: var(--ws-border-strong, rgba(255,255,255,.24)); }
.vc-dd-btn:focus-visible { outline: 2px solid var(--ws-brand-primary, #ff4655); outline-offset: 1px; }
.vc-dd-val { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vc-dd-chev { flex: none; width: 14px; height: 14px; opacity: .7; }
.vc-dd.open .vc-dd-chev { transform: rotate(180deg); }
.vc-dd-list { list-style: none; margin: 4px 0 0; padding: 4px; max-height: 180px; overflow-y: auto; background: var(--ws-surface-solid, #17171e); border: 1px solid var(--ws-border, rgba(255,255,255,.12)); border-radius: 8px; }
.vc-dd-list[hidden] { display: none; }
.vc-dd-opt { padding: 5px 8px; border-radius: 5px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vc-dd-opt:hover, .vc-dd-opt:focus { background: rgba(255,255,255,.08); outline: none; }
.vc-dd-opt[aria-selected="true"] { color: var(--ws-brand-primary, #ff4655); }
.vc-set-chk { justify-content: flex-start; cursor: pointer; }
.vc-set-chk input { accent-color: var(--ws-brand-primary, #ff4655); }
.vc-keybind { align-self: flex-start; background: none; border: 1px dashed var(--ws-border-strong, rgba(255,255,255,.25)); border-radius: 6px; padding: 3px 10px; cursor: pointer; font-size: 11px; }

/* collapsed + connected: one line */
.vc-line { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 2px; }
.vc-line-name { background: none; border: 0; padding: 0; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1 1 auto; text-align: left; }
.vc-line .vc-ctl { flex: none; }

.vc-flash { margin-top: 6px; font-size: 11px; color: #ffb3b9; }

/* ── Voice dock: fallback mini-bar ── */
.vd-mini { position: fixed; left: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 2147483000;
  display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 12px; border-radius: 999px; max-width: calc(100vw - 32px);
  background: rgba(17,17,23,.94); border: 1px solid rgba(255,255,255,.12); color: #e8e8ee; font: 400 12px/1.2 system-ui, sans-serif;
  box-shadow: 0 8px 24px rgba(0,0,0,.45); }
.vd-mini[hidden] { display: none; }
.vd-dot { width: 7px; height: 7px; border-radius: 50%; background: #f1c40f; flex: none; }
.vd-dot.on { background: #2ecc71; }
.vd-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; max-width: 160px; }
.vd-btn { width: 28px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; cursor: pointer;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); color: inherit; padding: 0; }
.vd-btn svg, .vd-ibtn svg, .vd-share-restore svg { width: 15px; height: 15px; fill: currentColor; }
.vd-btn.off { color: #ff8a93; border-color: rgba(255,70,85,.4); }
.vd-leave { background: #c0392b; border-color: #c0392b; color: #fff; }

/* ── Voice dock: screen-share window ── */
.vd-share { position: fixed; z-index: 2147483001; display: flex; flex-direction: column; min-width: 280px; min-height: 180px;
  background: #0d0d12; border: 1px solid rgba(255,255,255,.14); border-radius: 12px; overflow: hidden; color: #e8e8ee;
  font: 400 12px/1.2 system-ui, sans-serif; box-shadow: 0 16px 40px rgba(0,0,0,.55); }
.vd-share[hidden] { display: none; }
.vd-share-head { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 12px; cursor: move; user-select: none; touch-action: none;
  background: rgba(255,255,255,.04); border-bottom: 1px solid rgba(255,255,255,.08); }
.vd-share-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1 1 auto; }
.vd-share-pill { flex: none; font-size: 10px; padding: 2px 7px; border-radius: 999px; background: rgba(255,70,85,.15); color: #ff8a93; }
.vd-ibtn { width: 26px; height: 24px; display: inline-flex; align-items: center; justify-content: center; background: none; border: 0; color: inherit; cursor: pointer; border-radius: 6px; padding: 0; }
.vd-ibtn:hover { background: rgba(255,255,255,.08); }
.vd-share-tabs { display: flex; gap: 4px; padding: 4px 6px; overflow-x: auto; border-bottom: 1px solid rgba(255,255,255,.06); }
.vd-share-tabs[hidden] { display: none; }
.vd-share-tab { flex: none; background: none; border: 1px solid rgba(255,255,255,.12); color: inherit; border-radius: 6px; padding: 3px 9px; cursor: pointer; font: inherit; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vd-share-tab.on { border-color: rgba(255,70,85,.55); background: rgba(255,70,85,.1); }
.vd-share-stage { flex: 1 1 auto; min-height: 0; background: #000; display: flex; }
.vd-share-stage video { width: 100%; height: 100%; object-fit: contain; display: block; }
.vd-share-foot { padding: 6px 10px; border-top: 1px solid rgba(255,255,255,.06); }
.vd-share-vol { display: flex; align-items: center; gap: 8px; color: #9a9aa6; font-size: 11px; }
.vd-share-vol input { flex: 1 1 auto; accent-color: #ff4655; }
.vd-share-grip { position: absolute; right: 0; bottom: 0; width: 16px; height: 16px; cursor: nwse-resize; touch-action: none;
  background: linear-gradient(135deg, transparent 50%, rgba(255,255,255,.35) 50%, rgba(255,255,255,.35) 60%, transparent 60%, transparent 75%, rgba(255,255,255,.35) 75%, rgba(255,255,255,.35) 85%, transparent 85%); }
.vd-share.mobile { left: 0 !important; right: 0; top: env(safe-area-inset-top, 0px) !important; width: 100% !important; height: 56vw !important; max-height: 50vh;
  border-radius: 0 0 12px 12px; min-width: 0; }
.vd-share.mobile .vd-share-grip { display: none; }
.vd-share-restore { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 2147483001;
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; cursor: pointer;
  background: rgba(17,17,23,.94); border: 1px solid rgba(255,70,85,.45); color: #e8e8ee; font: 400 12px/1 system-ui, sans-serif; box-shadow: 0 8px 24px rgba(0,0,0,.45); }
.vd-share-restore[hidden] { display: none; }