:root {
  --bg: #0b0e14;
  --bg-2: #12161f;
  --bg-3: #1a2029;
  --line: rgba(255, 255, 255, .12);
  --ink: #e6eaf2;
  --ink-dim: #9aa4b2;
  --ink-mute: #6b7280;
  --accent: #FFA629;
  --green: #0ecb81;
  --red: #ff8288;
  --yellow: #d08d12;
  --blue: #2962ff;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  background: var(--bg); color: var(--ink);
  font: 13px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
button { font: inherit; }
input, select, textarea { font: inherit; }

#cp-root { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
#cp-top {
  flex: 0 0 auto; display: flex; align-items: center; gap: 12px; min-height: 48px;
  padding: 8px 16px; border-bottom: 1px solid var(--line); background: var(--bg-2);
}
.cp-brand {
  font-weight: 800; letter-spacing: .12em; color: var(--ink); text-decoration: none;
  display: inline-flex; align-items: baseline; gap: 8px; flex: 0 0 auto;
}
.cp-brand span {
  font-weight: 500; letter-spacing: .02em; color: var(--ink-dim); font-size: 12px;
  text-transform: none;
}
#cp-title { min-width: 0; display: inline-flex; align-items: center; }
.cp-title-b {
  max-width: 34vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 4px 8px; border-radius: 6px; border: 1px solid transparent; background: transparent;
  color: var(--ink); font-weight: 600; cursor: default; text-align: left;
}
.cp-title-b.is-edit { cursor: text; }
.cp-title-b.is-edit:hover { border-color: var(--line); }
.cp-title-inp {
  width: min(340px, 34vw); padding: 4px 8px; border-radius: 6px;
  border: 1px solid var(--accent); background: var(--bg); color: var(--ink); font-weight: 600;
}
#cp-timer { color: var(--ink-mute); font-size: 12px; font-variant-numeric: tabular-nums; flex: 0 0 auto; }
#cp-timer:empty { display: none; }
#cp-rec-badge { color: var(--red); font-size: 12px; font-weight: 700; display: none; }
#cp-rec-badge.on { display: inline; animation: cp-blink 1.6s ease-in-out infinite; }
@keyframes cp-blink { 50% { opacity: .45; } }
#cp-top-right { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.cp-cnt { color: var(--ink-mute); font-size: 12px; }
.cp-q { width: 14px; height: 10px; display: inline-block; position: relative; opacity: .9; }
.cp-q::before, .cp-q::after, .cp-q i { content: ''; position: absolute; bottom: 0; width: 3px; border-radius: 1px; background: var(--ink-mute); }
.cp-q::before { left: 0; height: 4px; }
.cp-q::after { left: 5px; height: 7px; }
.cp-q { background: linear-gradient(to right, transparent 10px, var(--ink-mute) 10px) no-repeat right bottom / 3px 10px; }
.cp-q.is-excellent, .cp-q.is-good { background-image: linear-gradient(to right, transparent 10px, var(--green) 10px); }
.cp-q.is-excellent::before, .cp-q.is-excellent::after, .cp-q.is-good::before, .cp-q.is-good::after { background: var(--green); }
.cp-q.is-good { background-image: linear-gradient(to right, transparent 10px, var(--ink-mute) 10px); }
.cp-q.is-poor::before, .cp-q.is-poor::after { background: var(--yellow); }
.cp-q.is-poor::after { background: var(--ink-mute); }
.cp-q.is-lost::before { background: var(--red); }
.cp-copy {
  padding: 5px 12px; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--line); background: transparent; color: var(--ink-dim);
}
.cp-copy:hover { color: var(--ink); border-color: var(--ink-mute); }

#cp-main { flex: 1 1 auto; min-height: 0; display: flex; }
#cp-stage { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: center; position: relative; background: var(--bg); overflow: hidden; }
#cp-stage.is-screen { background: #000; }
#cp-stage.is-screen video { width: 100%; height: 100%; object-fit: contain; display: block; }
.cp-screen-cap {
  position: absolute; left: 12px; bottom: 10px; padding: 3px 10px; border-radius: 6px;
  background: rgba(0, 0, 0, .55); color: #dfe4ec; font-size: 12px; max-width: 60%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; pointer-events: none;
}
.cp-mosaic {
  display: grid; gap: 16px; padding: 24px; width: 100%; max-width: 1100px;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); justify-items: center; align-content: center;
}
.cp-tile {
  position: relative; width: 100%; max-width: 260px; aspect-ratio: 4 / 3;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  padding: 18px; border-radius: 14px; background: var(--bg-2);
  border: 1px solid var(--line); transition: border-color .18s, box-shadow .18s;
}
.cp-tile.is-speak { border-color: var(--green); box-shadow: 0 0 0 1px rgba(14, 203, 129, .35); }
.cp-tile .cs-av { width: 72px; height: 72px; font-size: 28px; margin-left: 0; }
.cp-tile .cs-crown { top: -12px; width: 22px; height: 22px; }
.cp-tile-n { font-size: 13px; color: var(--ink); max-width: 90%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-tile-tags { display: inline-flex; gap: 4px; flex-wrap: wrap; justify-content: center; }
.cp-tile-tags:empty { display: none; }
.cp-tile-st { position: absolute; left: 10px; top: 10px; display: inline-flex; gap: 6px; }
.cp-tile-re { position: absolute; right: 10px; top: 6px; font-size: 22px; opacity: 0; transform: scale(.6); transition: opacity .2s, transform .2s; }
.cp-tile-re.on { opacity: 1; transform: scale(1); }
.cp-ico { width: 16px; height: 16px; display: inline-block; background-color: var(--ink-mute); -webkit-mask: var(--ico) center/contain no-repeat; mask: var(--ico) center/contain no-repeat; }
.cp-ico.is-hand { background: none; -webkit-mask: none; mask: none; font-size: 14px; line-height: 16px; width: auto; }
.cp-ico.is-micoff { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-width='2' d='M2 2l20 20M9 9v3a3 3 0 0 0 5 2.1M12 2a3 3 0 0 1 3 3v6M19 10v2a7 7 0 0 1-1 3.5M5 10v2a7 7 0 0 0 12 4.9M12 19v3'/%3E%3C/svg%3E"); background-color: var(--red); }
.cp-ico.is-deaf { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 14v-3a9 9 0 0 1 14.6-7M21 11v3M3 14a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-2a2 2 0 0 0-2-2H4M21 14a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-2a2 2 0 0 1 2-2h2M2 2l20 20'/%3E%3C/svg%3E"); background-color: var(--red); }
.cp-react {
  position: absolute; bottom: 12%; font-size: 34px; pointer-events: none; z-index: 5;
  animation: cp-float 2.6s ease-out forwards;
}
@keyframes cp-float { 0% { opacity: 0; transform: translateY(20px) scale(.7); } 15% { opacity: 1; transform: translateY(0) scale(1.1); } 100% { opacity: 0; transform: translateY(-160px) scale(1); } }

#cp-ink { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 3; touch-action: none; }
#cp-ink.is-on { pointer-events: auto; cursor: crosshair; }
#cp-ptrs { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.cp-ptr { position: absolute; transform: translate(-50%, -50%); pointer-events: none; }
.cp-ptr i { display: block; width: 14px; height: 14px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px rgba(255, 255, 255, .35), 0 0 14px var(--c); }
.cp-ptr b { position: absolute; left: 12px; top: 10px; padding: 1px 6px; border-radius: 4px; background: rgba(0, 0, 0, .7); color: #fff; font-size: 11px; font-weight: 600; white-space: nowrap; }
#cp-inkbar {
  position: absolute; left: 50%; top: 12px; transform: translateX(-50%); z-index: 6;
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 10px;
  background: rgba(18, 22, 31, .92); border: 1px solid var(--line); box-shadow: 0 8px 28px rgba(0, 0, 0, .45);
}
.cp-inkc { width: 22px; height: 22px; border-radius: 50%; border: 2px solid transparent; background: var(--c); cursor: pointer; padding: 0; }
.cp-inkc.on { border-color: #fff; box-shadow: 0 0 0 2px var(--c); }
.cp-inkt { padding: 4px 9px; border-radius: 6px; border: 1px solid var(--line); background: transparent; color: var(--ink-dim); cursor: pointer; font-size: 12px; }
.cp-inkt.on { color: var(--accent); border-color: rgba(255, 166, 41, .5); }
.cp-inkt:hover { color: var(--ink); }
.cp-inkt.is-danger { color: var(--red); }
.cp-inkt.is-x { margin-left: 6px; }

#cp-side {
  flex: 0 0 300px; border-left: 1px solid var(--line); background: var(--bg-2);
  display: flex; flex-direction: column; min-height: 0;
}
#cp-side:empty, #cp-side.is-closed { display: none; }
.cp-tabs { display: flex; align-items: center; gap: 4px; padding: 8px 8px 0; border-bottom: 1px solid var(--line); flex: 0 0 auto; }
.cp-tab {
  padding: 8px 10px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--ink-dim);
  cursor: pointer; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; display: inline-flex; align-items: center; gap: 6px;
}
.cp-tab.on { color: var(--ink); border-bottom-color: var(--accent); }
.cp-tab-n { min-width: 16px; padding: 0 5px; border-radius: 999px; background: var(--accent); color: #12161f; font-size: 10px; font-weight: 700; text-align: center; }
.cp-tab-x { margin-left: auto; width: 26px; height: 26px; border: 0; background: transparent; color: var(--ink-mute); cursor: pointer; border-radius: 6px; position: relative; }
.cp-tab-x::before { content: ''; position: absolute; inset: 6px; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-width='2.2' d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-width='2.2' d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center/contain no-repeat; }
.cp-tab-x:hover { color: var(--ink); }
.call-people { display: flex; flex-direction: column; gap: 4px; padding: 10px; overflow-y: auto; min-height: 0; }
.call-p { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 6px 6px; border-radius: 8px; position: relative; flex-wrap: wrap; }
.call-p:hover { background: rgba(255, 255, 255, .04); }
.call-p.is-hand { background: rgba(255, 166, 41, .08); }
.call-p .cs-av { width: 26px; height: 26px; font-size: 10px; margin-left: 0; }
.call-p .cs-crown { top: -6px; width: 11px; height: 11px; }
.call-p-t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.call-p-n { font-size: 12px; min-width: 3ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.call-p-tags { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.call-p-tags:empty { display: none; }
.call-p-re { font-size: 16px; width: 0; overflow: visible; opacity: 0; transition: opacity .2s; }
.call-p-re.on { opacity: 1; width: auto; }
.call-p-mic {
  width: 13px; height: 13px; flex: 0 0 auto;
  background-color: var(--ink-mute);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-width='2' d='M2 2l20 20M9 9v3a3 3 0 0 0 5 2.1M12 2a3 3 0 0 1 3 3v6M19 10v2a7 7 0 0 1-1 3.5M5 10v2a7 7 0 0 0 12 4.9M12 19v3'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-width='2' d='M2 2l20 20M9 9v3a3 3 0 0 0 5 2.1M12 2a3 3 0 0 1 3 3v6M19 10v2a7 7 0 0 1-1 3.5M5 10v2a7 7 0 0 0 12 4.9M12 19v3'/%3E%3C/svg%3E") center/contain no-repeat;
}
.call-p-vol { flex: 1 1 100%; order: 9; height: 4px; margin: 2px 0 0; opacity: 0; transition: opacity .12s; accent-color: var(--accent); }
.call-p:hover .call-p-vol, .call-p-vol:focus { opacity: 1; }
.call-mods { margin-left: auto; display: inline-flex; gap: 4px; flex: 0 0 auto; opacity: .25; transition: opacity .12s; }
.call-p:hover .call-mods { opacity: 1; }
.call-mods:focus-within { opacity: 1; }
@media (pointer: coarse) and (not (any-pointer: fine)) {
  .call-mods { opacity: 1; }
  .call-mod { width: 32px; height: 32px; }
  .call-p-vol { opacity: 1; }
}
.call-mod {
  width: 24px; height: 24px; padding: 0; cursor: pointer; border-radius: 5px;
  border: 1px solid var(--line);
  background: transparent;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-dim);
}
.call-mod::before {
  content: ''; width: 14px; height: 14px; display: block;
  background-color: currentColor;
  -webkit-mask: var(--ico) center/contain no-repeat;
          mask: var(--ico) center/contain no-repeat;
}
.call-mod:hover { color: var(--ink); border-color: currentColor; }
.call-mod.is-mic { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-width='2.2' d='M2 2l20 20M9 9v3a3 3 0 0 0 5 2.1M12 2a3 3 0 0 1 3 3v6M5 10v2a7 7 0 0 0 12 4.9M12 19v3'/%3E%3C/svg%3E"); }
.call-mod.is-share { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-width='2.2' d='M2 2l20 20M21 6v10a2 2 0 0 1-2 2H8M3 5.5V16a2 2 0 0 0 2 2M8 21h8'/%3E%3C/svg%3E"); }
.call-mod.is-cohost { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.2' d='m3 8 4 4 5-8 5 8 4-4-2 12H5zM5 20h14'/%3E%3C/svg%3E"); }
.call-mod.is-cohost.on { color: var(--yellow); border-color: rgba(208, 141, 18, .5); }
.call-mod.is-kick {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-width='2.2' d='M16 17l5-5-5-5M21 12H9M12 19a7 7 0 1 1 0-14'/%3E%3C/svg%3E");
  color: var(--red); border-color: rgba(234, 57, 67, .35);
}

.cp-chat { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
.cp-chat-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.cp-chat-empty { color: var(--ink-mute); font-size: 12px; padding: 14px 2px; }
.cp-msg { max-width: 92%; padding: 6px 10px; border-radius: 10px 10px 10px 3px; background: var(--bg-3); align-self: flex-start; }
.cp-msg.is-me { align-self: flex-end; border-radius: 10px 10px 3px 10px; background: rgba(255, 166, 41, .14); }
.cp-msg.is-sys { align-self: center; background: transparent; color: var(--ink-mute); font-size: 11px; padding: 2px 0; }
.cp-msg-h { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; flex-wrap: wrap; }
.cp-msg-n { font-size: 11px; font-weight: 700; color: var(--ink-dim); }
.cp-msg-t { font-size: 10px; color: var(--ink-mute); margin-left: auto; }
.cp-msg-b { font-size: 13px; white-space: pre-wrap; word-break: break-word; }
.cp-msg-b a { color: var(--accent); }
.cp-chat-form { flex: 0 0 auto; display: flex; gap: 6px; padding: 8px 10px; border-top: 1px solid var(--line); align-items: flex-end; }
.cp-chat-inp {
  flex: 1 1 auto; min-height: 34px; max-height: 120px; resize: none; padding: 7px 10px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--bg); color: var(--ink);
}
.cp-chat-inp:focus { outline: none; border-color: var(--ink-mute); }
.cp-chat-send { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 8px; border: 0; background: var(--accent); cursor: pointer; position: relative; }
.cp-chat-send::before { content: ''; position: absolute; inset: 8px; background-color: #12161f; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.4' d='M22 2 11 13M22 2l-7 20-4-9-9-4z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.4' d='M22 2 11 13M22 2l-7 20-4-9-9-4z'/%3E%3C/svg%3E") center/contain no-repeat; }
.cp-chat-send:disabled { opacity: .4; cursor: default; }

#cp-bar {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 16px; border-top: 1px solid var(--line); background: var(--bg-2); flex-wrap: wrap;
}
#cp-bar:empty { display: none; }
#cp-bar .call-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; padding: 8px 12px; }
#cp-bar .call-btn::before {
  content: ''; width: 16px; height: 16px; flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask: var(--ico) center/contain no-repeat;
          mask: var(--ico) center/contain no-repeat;
}
.cb-badge { position: absolute; top: -6px; right: -4px; min-width: 16px; padding: 0 4px; border-radius: 999px; background: var(--accent); color: #12161f; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; }
.call-btn.is-red { color: var(--red); border-color: rgba(255, 130, 136, .5); }
.cb-mic { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='2' width='6' height='13' rx='3'/%3E%3Cpath d='M19 10v2a7 7 0 0 1-14 0v-2M12 19v3'/%3E%3C/svg%3E"); }
.cb-mic:not(.on) { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 2l20 20M18.89 13.23A7 7 0 0 0 19 12v-2M5 10v2a7 7 0 0 0 12 4.9M15 9.34V5a3 3 0 0 0-5.68-1.33M9 9v3a3 3 0 0 0 5.12 2.12M12 19v3'/%3E%3C/svg%3E"); color: var(--red); border-color: rgba(255, 130, 136, .5); }
.cb-deaf { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 14v-3a9 9 0 0 1 18 0v3M3 14a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-2a2 2 0 0 0-2-2H3M21 14a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-2a2 2 0 0 1 2-2h3'/%3E%3C/svg%3E"); }
.cb-deaf.on { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 14v-3a9 9 0 0 1 14.6-7M21 11v3M3 14a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-2a2 2 0 0 0-2-2H4M21 14a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-2a2 2 0 0 1 2-2h2M2 2l20 20'/%3E%3C/svg%3E"); }
.cb-share { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='3' width='20' height='14' rx='2'/%3E%3Cpath d='m9 10 3-3 3 3M12 13V7M12 17v4M8 21h8'/%3E%3C/svg%3E"); }
.cb-draw { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19l7-7 3 3-7 7-3-3zM18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5zM2 2l7.586 7.586'/%3E%3Ccircle cx='11' cy='11' r='2'/%3E%3C/svg%3E"); }
.cb-hand { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 11V6a2 2 0 0 0-4 0v5M14 10V4a2 2 0 0 0-4 0v2M10 10.5V6a2 2 0 0 0-4 0v8'/%3E%3Cpath d='M18 8a2 2 0 1 1 4 0v6a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.86-5.99-2.34l-3.6-3.6a2 2 0 0 1 2.83-2.82L7 15'/%3E%3C/svg%3E"); }
.cb-hand.on { color: var(--accent); border-color: rgba(255, 166, 41, .5); }
.cb-react { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M8 14s1.5 2 4 2 4-2 4-2M9 9h.01M15 9h.01'/%3E%3C/svg%3E"); }
.cb-chat { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E"); }
.cb-people { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E"); }
.cb-rec { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3C/svg%3E"); }
.cb-rec.on { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Crect x='9' y='9' width='6' height='6' rx='1'/%3E%3C/svg%3E"); color: var(--red); border-color: rgba(255, 130, 136, .5); }
.cb-speaker { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='11 5 6 9 2 9 2 15 6 15 11 19 11 5'/%3E%3Cpath d='M15.54 8.46a5 5 0 0 1 0 7.07M19.07 4.93a10 10 0 0 1 0 14.14'/%3E%3C/svg%3E"); }
.cb-devices { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 21v-7M4 10V3M12 21v-9M12 8V3M20 21v-5M20 12V3M1 14h6M9 8h6M17 16h6'/%3E%3C/svg%3E"); }
.cb-settings { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z'/%3E%3C/svg%3E"); }
.cb-keep { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242M12 13v8m-4-4 4-4 4 4'/%3E%3C/svg%3E"); }
.cb-leave { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9'/%3E%3C/svg%3E"); }
#cp-remenu { position: fixed; z-index: 9300; display: inline-flex; gap: 4px; padding: 6px; border-radius: 12px; background: var(--bg-3); border: 1px solid var(--line); box-shadow: 0 8px 28px rgba(0, 0, 0, .45); }
.cp-re-b { width: 38px; height: 38px; border: 0; background: transparent; font-size: 22px; cursor: pointer; border-radius: 8px; }
.cp-re-b:hover { background: rgba(255, 255, 255, .08); transform: scale(1.15); }

#cp-gate {
  position: fixed; inset: 0; z-index: 100; display: none;
  align-items: center; justify-content: center; background: var(--bg);
}
.cp-gate-box {
  max-width: 400px; width: calc(100% - 48px); text-align: center;
  padding: 34px 30px; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line);
}
.cp-gate-logo {
  width: 46px; height: 46px; margin: 0 auto 16px; border-radius: 12px;
  background: rgba(255, 166, 41, .14); border: 1px solid rgba(255, 166, 41, .3);
  position: relative;
}
.cp-gate-logo::before {
  content: ''; position: absolute; inset: 0;
  background-color: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='2' width='6' height='13' rx='3'/%3E%3Cpath d='M19 10v2a7 7 0 0 1-14 0v-2M12 19v3'/%3E%3C/svg%3E") center/56% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='2' width='6' height='13' rx='3'/%3E%3Cpath d='M19 10v2a7 7 0 0 1-14 0v-2M12 19v3'/%3E%3C/svg%3E") center/56% no-repeat;
}
.cp-gate-logo.is-done { background: rgba(14, 203, 129, .12); border-color: rgba(14, 203, 129, .3); }
.cp-gate-logo.is-done::before {
  background-color: var(--green);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/56% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/56% no-repeat;
}
.cp-gate-meta { color: var(--ink-mute) !important; font-size: 12px; font-variant-numeric: tabular-nums; }
.cp-gate-count { margin: 14px 0 0 !important; color: var(--ink-mute) !important; font-size: 12px; min-height: 16px; }
.cp-gate-stay { margin-top: 4px; border: 0; background: transparent; color: var(--ink-dim); cursor: pointer; font-size: 12px; text-decoration: underline; text-underline-offset: 3px; }
.cp-gate-stay:hover { color: var(--ink); }
.cp-gate-box b { display: block; font-size: 16px; margin-bottom: 8px; }
.cp-gate-box p { margin: 0 0 6px; color: var(--ink-dim); }
.cp-gate-btns { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; }
.cp-btn {
  padding: 9px 14px; border-radius: 7px; cursor: pointer; font-weight: 600;
  border: 1px solid transparent; background: var(--accent); color: #12161f;
}
.cp-btn.is-line { background: transparent; border-color: var(--line); color: var(--ink); font-weight: 500; }
.cp-btn.is-line:hover { border-color: var(--ink-mute); }
.cp-btn.is-danger { color: var(--red); border-color: rgba(255, 130, 136, .5); }
.cp-btn:disabled { opacity: .5; cursor: default; }
.cp-inp {
  width: 100%; padding: 9px 12px; border-radius: 7px; margin-top: 12px;
  border: 1px solid var(--line); background: var(--bg); color: var(--ink);
}
.cp-inp:focus { outline: none; border-color: var(--accent); }
.cp-inp.is-bad { border-color: var(--red); }
.cp-sel { width: 100%; padding: 8px 10px; border-radius: 7px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); }
.cp-field { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; text-align: left; }
.cp-field > span { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-mute); }
.cp-field .cp-inp { margin-top: 0; }

.cp-lvl {
  height: 8px; border-radius: 999px; overflow: hidden;
  background: rgba(255, 255, 255, .08); border: 1px solid var(--line);
}
.cp-lvl-bar {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--green), var(--accent));
  transition: width .08s linear;
}
.cp-rng-row { display: flex; align-items: center; gap: 10px; }
.cp-rng { flex: 1 1 auto; min-width: 0; accent-color: var(--accent); }
.cp-rng-v {
  flex: 0 0 auto; min-width: 46px; text-align: right;
  font-size: 12px; color: var(--ink-dim); font-variant-numeric: tabular-nums;
}
.cp-check { display: flex; align-items: center; gap: 10px; margin: 8px 0; cursor: pointer; text-align: left; color: var(--ink-dim); }
.cp-check input { accent-color: var(--accent); width: 16px; height: 16px; margin: 0; }
.cp-check:hover { color: var(--ink); }

#cp-stage.is-lobby { align-items: flex-start; overflow-y: auto; }
.cp-lobby { width: 100%; max-width: 520px; margin: 40px auto; padding: 0 20px; }
.cp-lobby h1 { font-size: 20px; margin: 0 0 18px; }
.cp-sub {
  display: flex; align-items: center; gap: 8px; margin: 16px 0 8px;
  color: var(--ink-mute); font-size: 10px; text-transform: uppercase; letter-spacing: .08em;
}
.cp-count {
  background: var(--bg-3); border-radius: 999px; padding: 1px 8px;
  color: var(--ink-dim); font-size: 10px;
}
.ci-empty { padding: 18px 0; color: var(--ink-dim); }
.ci-empty b { display: block; color: var(--ink); margin-bottom: 4px; }
.cp-foot { margin-top: 16px; }
.call-who { display: inline-flex; align-items: center; }
.call-join-t { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.call-join-s { font-size: 11px; color: var(--ink-mute); }

#call-toasts {
  position: fixed; left: 16px; bottom: 76px; z-index: 9500;
  display: flex; flex-direction: column; gap: 8px; align-items: flex-start;
  pointer-events: none;
}
.call-toast {
  max-width: 340px; padding: 9px 12px; border-radius: 8px; font-size: 12px;
  background: var(--bg-3); border: 1px solid var(--line); color: var(--ink);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .45); pointer-events: auto;
  animation: cp-in .18s ease-out;
}
@keyframes cp-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.call-toast b { display: block; font-size: 12px; font-weight: 700; }
.call-toast span { display: block; margin-top: 3px; color: var(--ink-dim); }
.call-toast.is-err { border-color: var(--red); }
.call-toast.is-warn { border-color: var(--yellow); }
.call-toast-btn {
  margin-top: 7px; padding: 4px 10px; border-radius: 6px; cursor: pointer; font-size: 12px; font-weight: 600;
  border: 1px solid rgba(255, 166, 41, .5); background: transparent; color: var(--accent);
}
#cp-banners { position: fixed; left: 50%; top: 56px; transform: translateX(-50%); z-index: 9400; display: flex; flex-direction: column; gap: 6px; align-items: center; }
.cp-banner {
  display: inline-flex; align-items: center; gap: 12px; padding: 8px 14px; border-radius: 999px;
  background: var(--bg-3); border: 1px solid var(--yellow); color: var(--ink); font-size: 12px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .45);
}
.cp-banner-btn { padding: 4px 12px; border-radius: 999px; border: 0; background: var(--accent); color: #12161f; font-weight: 700; cursor: pointer; }
#cp-knocks { position: fixed; right: 16px; top: 56px; z-index: 9400; display: flex; flex-direction: column; gap: 6px; }
.cp-knock {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px 8px 14px; border-radius: 10px;
  background: var(--bg-3); border: 1px solid var(--accent); box-shadow: 0 8px 28px rgba(0, 0, 0, .45); font-size: 12px;
}
.cp-knock-t { margin-right: 6px; }
.cp-knock-b { padding: 5px 10px; font-size: 12px; }

.cs-av {
  position: relative;
  width: 18px; height: 18px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 700; color: #fff;
  background: var(--accent); flex-shrink: 0;
  margin-left: -6px; box-shadow: 0 0 0 2px var(--bg-2);
}
.cs-av:first-child { margin-left: 0; }
.cs-av.cs-dev, .cs-av.cs-admin, .cs-av.cs-mod { margin-left: 6px; }
.cs-av.cs-dev:first-child, .cs-av.cs-admin:first-child, .cs-av.cs-mod:first-child { margin-left: 0; }
.cs-av.cs-speak { margin-left: 8px; }
.cs-av.cs-speak:first-child { margin-left: 0; }
.cs-dev   { box-shadow: 0 0 0 2px var(--bg-2), 0 0 0 4px var(--red); }
.cs-admin { box-shadow: 0 0 0 2px var(--bg-2), 0 0 0 4px var(--yellow); }
.cs-mod   { box-shadow: 0 0 0 2px var(--bg-2), 0 0 0 4px var(--blue); }
.cs-pic {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border-radius: 50%; object-fit: cover; display: block;
}
.cs-crown {
  z-index: 1;
  position: absolute; left: 50%; top: -5px;
  transform: translateX(-50%);
  width: 10px; height: 10px; pointer-events: none;
  background-color: var(--yellow);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.4' d='M11.562 3.266a.5.5 0 0 1 .876 0L15.39 8.87a1 1 0 0 0 1.516.294L21.183 5.5a.5.5 0 0 1 .798.519l-2.834 10.246a1 1 0 0 1-.956.734H5.81a1 1 0 0 1-.957-.734L2.02 6.02a.5.5 0 0 1 .798-.519l4.276 3.664a1 1 0 0 0 1.516-.294zM5 21h14'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.4' d='M11.562 3.266a.5.5 0 0 1 .876 0L15.39 8.87a1 1 0 0 0 1.516.294L21.183 5.5a.5.5 0 0 1 .798.519l-2.834 10.246a1 1 0 0 1-.956.734H5.81a1 1 0 0 1-.957-.734L2.02 6.02a.5.5 0 0 1 .798-.519l4.276 3.664a1 1 0 0 0 1.516-.294zM5 21h14'/%3E%3C/svg%3E") center/contain no-repeat;
}
.cs-dev .cs-crown { background-color: var(--red); }
.call-tag {
  padding: 1px 5px; border-radius: 999px;
  border: 1px solid rgba(208, 141, 18, .55); background: rgba(208, 141, 18, .14);
  color: var(--yellow);
  font-size: 9px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; white-space: nowrap; flex: 0 0 auto;
}
.call-tag-dev {
  border-color: rgba(255, 130, 136, .5); background: rgba(255, 130, 136, .14);
  color: var(--red);
}
.call-tag-ca { border-color: rgba(41, 98, 255, .55); background: rgba(41, 98, 255, .16); color: #8fb0ff; }
.call-tag-host { border-color: rgba(14, 203, 129, .5); background: rgba(14, 203, 129, .12); color: var(--green); }
.call-tag-guest { border-color: rgba(154, 164, 178, .45); background: rgba(154, 164, 178, .12); color: var(--ink-dim); }
.cs-speak { box-shadow: 0 0 0 2px var(--bg-2), 0 0 0 4px var(--green); }
.cs-av.cs-dev.cs-speak { box-shadow: 0 0 0 2px var(--bg-2), 0 0 0 4px var(--red), 0 0 0 6px var(--green); }
.cs-av.cs-admin.cs-speak { box-shadow: 0 0 0 2px var(--bg-2), 0 0 0 4px var(--yellow), 0 0 0 6px var(--green); }
.cs-av.cs-mod.cs-speak { box-shadow: 0 0 0 2px var(--bg-2), 0 0 0 4px var(--blue), 0 0 0 6px var(--green); }
.cs-share::after {
  content: ''; position: absolute; width: 8px; height: 8px; border-radius: 2px;
  background: var(--accent); transform: translate(8px, 8px);
}
.cs-av.cs-muted { opacity: .55; }

.call-join, .call-start, .call-btn {
  padding: 8px 12px; border-radius: 7px;
  border: 1px solid var(--line); background: var(--bg-3);
  color: var(--ink); cursor: pointer; text-align: left;
}
.call-join { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; width: 100%; margin-bottom: 6px; }
.call-join-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.call-join .call-cnt { margin-left: auto; }
.call-cnt { color: var(--ink-mute); }
.call-go { margin-left: 8px; padding: 4px 12px; border-radius: 999px; font-size: 10px; background: var(--accent); color: #12161f; font-weight: 700; }

.cp-ghost-sw {
  width: 100%; margin: 0 0 8px; padding: 7px 12px; border-radius: 10px;
  border: 1px dashed var(--line); background: transparent; color: var(--ink-mute);
  font: inherit; font-size: 12px; text-align: left; cursor: pointer;
}
.cp-ghost-sw:hover { color: var(--ink); border-color: var(--ink-mute); }
.cp-ghost-sw.on { border-style: solid; border-color: #7c5cff; color: #b9a8ff; background: rgba(124, 92, 255, .10); }
.call-join.is-ghost .call-go { background: #7c5cff; color: #fff; }
.call-join.is-hidden-room { border-style: dashed; }
.call-hid {
  padding: 2px 8px; border-radius: 999px; font-size: 10px; font-weight: 700;
  color: var(--ink-mute); border: 1px dashed var(--line);
}
.cb-ghost {
  display: inline-flex; align-items: center; padding: 0 12px; font-size: 12px;
  color: #b9a8ff; white-space: nowrap;
}
.call-start { background: var(--accent); color: #12161f; font-weight: 600; text-align: center; border-color: transparent; width: 100%; }
.call-btn { text-align: center; transition: border-color .15s, color .15s; }
.call-btn:hover { border-color: var(--ink-mute); }
.call-btn.on { border-color: var(--green); color: var(--green); }
.call-btn.is-na { opacity: 0.45; }
.call-leave { color: var(--red); border-color: rgba(234, 57, 67, .4); }

.ci-recs { margin-top: 22px; }
.ci-rec {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: 7px; margin-bottom: 6px; background: var(--bg-2);
}
.ci-rec-n { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ci-rec-m { color: var(--ink-mute); font-size: 11px; flex: 0 0 auto; }
.ci-rec-empty { color: var(--ink-mute); font-size: 12px; padding: 6px 0; }
.ci-rec-empty.is-err { color: var(--red); display: flex; align-items: center; gap: 10px; }
.ci-rec-retry, .ci-rec-keep {
  padding: 4px 10px; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--line); background: transparent; color: var(--ink);
}
.ci-rec-keep { border-color: var(--accent); color: var(--accent); }
.ci-rec-btn {
  width: 26px; height: 26px; padding: 0; cursor: pointer; border-radius: 5px; flex: 0 0 auto;
  border: 1px solid var(--line); background: transparent; color: var(--ink-dim);
  display: inline-flex; align-items: center; justify-content: center;
}
.ci-rec-btn::before {
  content: ''; width: 14px; height: 14px; display: block; background-color: currentColor;
  -webkit-mask: var(--ico) center/contain no-repeat;
          mask: var(--ico) center/contain no-repeat;
}
.ci-rec-btn:hover { color: var(--ink); border-color: currentColor; }
.ci-rec-btn.is-dl { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.2' d='M12 3v12m0 0l-4-4m4 4l4-4M4 21h16'/%3E%3C/svg%3E"); }
.ci-rec-btn.is-rm { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-width='2.2' d='M4 7h16M9 7V5a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2m3 0l-1 13a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1L6 7'/%3E%3C/svg%3E"); color: var(--red); }
.ci-rec-btn.is-rm.is-armed {
  color: var(--red); border-color: currentColor;
  background: color-mix(in srgb, currentColor 22%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 28%, transparent);
}
.ci-rec-btn.is-rm.is-armed::before {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.4' d='M12 8v5m0 3.5v.01M10.3 3.9 2.4 17.4A1.9 1.9 0 0 0 4 20.3h16a1.9 1.9 0 0 0 1.6-2.9L13.7 3.9a1.9 1.9 0 0 0-3.4 0Z'/%3E%3C/svg%3E");
}
.ci-rec-btn.is-ln { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.72'/%3E%3C/svg%3E"); }

.cp-dlg {
  position: fixed; inset: 0; z-index: 9200;
  display: flex; align-items: center; justify-content: center;
  background: rgba(6, 8, 12, .62);
}
.cp-dlg-box {
  width: min(400px, calc(100vw - 48px)); max-height: calc(100vh - 48px); overflow-y: auto;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px;
  padding: 22px;
}
.cp-dlg-box.is-wide { width: min(520px, calc(100vw - 48px)); }
.cp-dlg-box > b { display: block; font-size: 15px; margin-bottom: 4px; }
.cp-dlg-meta { margin: 0 0 14px; color: var(--ink-dim); font-size: 12px; }
.cp-dlg-meta.is-warn { color: var(--yellow); }
.cp-dlg-btns { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.cp-dlg-btns.is-row { flex-direction: row; justify-content: flex-end; }
.cp-dlg-sec { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--line); }
.cp-dlg-st { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-mute); margin: 14px 0 6px; }
.cp-dlg-link { display: flex; gap: 8px; margin-bottom: 10px; align-items: center; }
.cp-dlg-link .cp-btn { flex: 0 0 auto; white-space: nowrap; }
.cp-dlg-inp {
  width: 100%; min-width: 0; padding: 8px 10px; border-radius: 7px;
  border: 1px solid var(--line); background: var(--bg); color: var(--ink);
  font: 12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.cp-dlg-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.cp-dlg-acts .cp-btn { font-size: 12px; padding: 7px 11px; }
.cp-btn.is-dim { color: var(--ink-dim); }
.cp-btn.is-ico { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.cp-btn.is-ico::before {
  content: ''; width: 15px; height: 15px; flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask: var(--ico) center/contain no-repeat;
          mask: var(--ico) center/contain no-repeat;
}
.cp-btn.is-dl { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12m0 0l-4-4m4 4l4-4M4 21h16'/%3E%3C/svg%3E"); }
.cp-btn.is-cloud { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242M12 13v8m-4-4 4-4 4 4'/%3E%3C/svg%3E"); }
.cp-btn.is-link { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.72'/%3E%3C/svg%3E"); }
.cp-copy.is-invite { display: inline-flex; align-items: center; gap: 7px; color: var(--accent); border-color: rgba(255, 166, 41, .4); }
.cp-copy.is-invite::before {
  content: ''; width: 13px; height: 13px; background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M19 8v6M22 11h-6'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M19 8v6M22 11h-6'/%3E%3C/svg%3E") center/contain no-repeat;
}

@media (max-width: 1100px) {
  #cp-bar .call-btn .cb-l { display: none; }
  #cp-bar .call-btn { min-width: 42px; padding: 9px 12px; }
  #cp-bar .call-btn::before { width: 18px; height: 18px; }
  .cp-title-b { max-width: 24vw; }
}
@media (max-width: 760px) {
  #cp-main { flex-direction: column; }
  #cp-side { flex: 0 0 auto; border-left: 0; border-top: 1px solid var(--line); max-height: 42vh; }
  .cp-tile { max-width: 160px; padding: 12px; }
  .cp-tile .cs-av { width: 56px; height: 56px; font-size: 22px; }
  .cp-mosaic { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; padding: 12px; }
  .call-btn { flex: 0 0 auto; }
  #call-toasts { left: 12px; right: 12px; bottom: auto; top: 58px; align-items: stretch; }
  #cp-knocks { left: 12px; right: 12px; top: auto; bottom: 70px; }
  #cp-banners { width: calc(100% - 24px); }
  .cp-brand span { display: none; }
  .cp-title-b { max-width: 40vw; }
}

#cp-stage.is-mosaic {
  background-color: var(--bg);
  background-image: radial-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 26px 26px;
}
#cp-stage.is-mosaic::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 40%, rgba(255, 166, 41, .05), transparent 55%);
}
.cp-mosaic { position: relative; z-index: 1; }
.cp-tile {
  --lvl: 0;
  background: linear-gradient(160deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, 0) 60%), var(--bg-2);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
  transition: border-color .18s, box-shadow .18s, transform .32s cubic-bezier(.2, .8, .2, 1), opacity .26s;
  will-change: transform, opacity;
}
.cp-tile.is-in { opacity: 0; transform: translateY(14px) scale(.96); }
.cp-tile.is-out { opacity: 0; transform: scale(.94); pointer-events: none; }
.cp-tile.is-dev { background-image: linear-gradient(160deg, rgba(255, 130, 136, .12), rgba(255, 130, 136, 0) 55%); }
.cp-tile.is-admin { background-image: linear-gradient(160deg, rgba(208, 141, 18, .13), rgba(208, 141, 18, 0) 55%); }
.cp-tile.is-guest { background-image: linear-gradient(160deg, rgba(154, 164, 178, .08), rgba(154, 164, 178, 0) 55%); }
.cp-tile.is-speak {
  border-color: var(--green);
  box-shadow: 0 0 0 1px rgba(14, 203, 129, .35), 0 0 calc(14px + 40px * var(--lvl)) rgba(14, 203, 129, calc(.18 + .35 * var(--lvl))), 0 10px 30px rgba(0, 0, 0, .35);
}
.cp-tile.is-live { border-color: rgba(255, 90, 95, .45); }
.cp-tile-av { position: relative; display: inline-flex; }
.cp-tile-av .cs-av { transition: transform .2s; }
.cp-tile.is-speak .cp-tile-av .cs-av { transform: scale(calc(1 + .06 * var(--lvl))); }
.cp-tile-n { font-weight: 600; font-size: 14px; }
.cp-tile-st { display: inline-flex; align-items: center; gap: 6px; }

.cp-live {
  display: inline-flex; align-items: center; gap: 5px; padding: 1px 7px 1px 6px; border-radius: 5px;
  background: #ed4245; color: #fff; font-size: 9px; font-weight: 800; letter-spacing: .1em; line-height: 16px;
}
.cp-live i { width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: cp-pulse 1.4s ease-in-out infinite; }
@keyframes cp-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.7); } }
.cp-ico.is-srv { background-color: var(--red); }
.cp-ico.is-noshare { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-width='2.2' d='M2 2l20 20M21 6v10a2 2 0 0 1-2 2H8M3 5.5V16a2 2 0 0 0 2 2M8 21h8'/%3E%3C/svg%3E"); background-color: var(--red); }
.call-p-st { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.call-p.is-live .call-p-n { color: var(--ink); }

.call-btn.is-locked { opacity: .75; border-style: dashed; cursor: not-allowed; }
.call-btn.is-locked::after {
  content: ''; width: 10px; height: 10px; margin-left: -2px; background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Crect x='5' y='11' width='14' height='9' rx='1.5'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Crect x='5' y='11' width='14' height='9' rx='1.5'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center/contain no-repeat;
}
.call-mods { opacity: .55; }
.call-mod.on { color: var(--red); border-color: rgba(255, 130, 136, .5); background: rgba(255, 130, 136, .12); }
.call-mod.is-deaf { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 14v-3a9 9 0 0 1 14.6-7M21 11v3M3 14a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-2a2 2 0 0 0-2-2H4M21 14a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-2a2 2 0 0 1 2-2h2M2 2l20 20'/%3E%3C/svg%3E"); }

#cp-stage.is-screen { background: #05070b; }
.cp-shares { position: absolute; left: 0; right: 0; top: 0; bottom: 78px; display: flex; flex-direction: column; gap: 8px; padding: 8px; }
.cp-share-main { flex: 1 1 auto; min-height: 0; display: grid; gap: 8px; }
#cp-stage.is-one .cp-share-main { grid-template-columns: 1fr; }
#cp-stage.is-grid .cp-share-main { grid-template-columns: repeat(auto-fit, minmax(min(46%, 640px), 1fr)); grid-auto-rows: 1fr; }
#cp-stage.is-focus .cp-share-main { grid-template-columns: 1fr; }
.cp-thumbs { flex: 0 0 auto; display: flex; gap: 8px; justify-content: center; min-height: 0; }
.cp-thumbs:empty { display: none; }
.cp-share {
  position: relative; min-width: 0; min-height: 0; background: #000; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--line); transition: border-color .18s, box-shadow .18s;
}
.cp-share video { width: 100%; height: 100%; object-fit: contain; display: block; }

.cp-share > video { transform: translate(var(--zx, 0px), var(--zy, 0px)) scale(var(--z, 1)); transform-origin: 50% 50%; }
.cp-share.is-zoomed { cursor: grab; }
.cp-share.is-zoomed:active { cursor: grabbing; }
.cp-zoom {
  position: absolute; right: 10px; bottom: 8px; z-index: 6; display: none;
  padding: 3px 9px; border-radius: 8px; background: rgba(6, 8, 12, .72);
  color: #dfe4ec; font-size: 12px; cursor: pointer; user-select: none;
}
.cp-zoom:hover { color: var(--accent); }
.cp-share.is-zoomed .cp-zoom { display: block; }
.cp-share.is-thumb .cp-zoom { display: none; }
#cp-stage.is-grid .cp-share { cursor: zoom-in; }
#cp-stage.is-grid .cp-share:hover { border-color: rgba(255, 166, 41, .55); }
.cp-share.is-thumb { width: 200px; height: 112px; cursor: pointer; flex: 0 0 auto; }
.cp-share.is-thumb:hover { border-color: rgba(255, 166, 41, .55); }
.cp-share.is-thumb .cp-share-cap { left: 6px; bottom: 6px; padding: 2px 6px; gap: 5px; }
.cp-share.is-thumb .cp-share-cap .cs-av { display: none; }
.cp-share.is-thumb .cp-ink, .cp-share.is-thumb .cp-ptrs { pointer-events: none !important; }
.cp-share-cap {
  position: absolute; left: 10px; bottom: 8px; z-index: 5; display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 10px 4px 6px; border-radius: 8px; background: rgba(6, 8, 12, .7); color: #dfe4ec; font-size: 12px;
  max-width: 70%; pointer-events: none;
}
.cp-share-cap .cs-av { width: 20px; height: 20px; font-size: 9px; margin-left: 0; }
.cp-share-cap-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-share-grid {
  position: absolute; right: 10px; top: 10px; z-index: 6; padding: 5px 10px; border-radius: 7px; cursor: pointer;
  border: 1px solid var(--line); background: rgba(6, 8, 12, .7); color: var(--ink-dim); font-size: 12px;
}
.cp-share-grid:hover { color: var(--ink); border-color: var(--ink-mute); }
.cp-share .cp-ink { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 3; touch-action: none; }
.cp-share .cp-ink.is-on { pointer-events: auto; cursor: crosshair; }
.cp-share .cp-ptrs { position: absolute; inset: 0; pointer-events: none; z-index: 4; }

.cp-strip {
  position: absolute; left: 0; right: 0; bottom: 0; height: 78px; z-index: 5;
  display: flex; gap: 14px; align-items: center; justify-content: center; padding: 0 12px;
  overflow-x: auto; background: linear-gradient(to top, rgba(5, 7, 11, .95), rgba(5, 7, 11, .6));
}
.cp-strip-p { --lvl: 0; position: relative; display: inline-flex; flex-direction: column; align-items: center; gap: 2px; flex: 0 0 auto; padding: 8px 8px 3px; border-radius: 10px; cursor: default; transition: background .15s; }
.cp-strip-p.is-live { cursor: pointer; }
.cp-strip-p.is-live:hover { background: rgba(255, 255, 255, .06); }
.cp-strip-av .cs-av { width: 32px; height: 32px; font-size: 13px; margin-left: 0; transition: box-shadow .18s, transform .15s; }
.cp-strip-p.is-speak .cp-strip-av .cs-av { box-shadow: 0 0 0 2px #05070b, 0 0 0 4px var(--green), 0 0 calc(6px + 18px * var(--lvl)) rgba(14, 203, 129, .6); }
.cp-strip-n { font-size: 10px; color: var(--ink-dim); max-width: 88px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-strip-st { position: static; display: inline-flex; align-items: center; gap: 3px; height: 14px; }
.cp-strip-st:empty { display: none; }
.cp-strip-st .cp-ico { width: 13px; height: 13px; }
.cp-strip-st .cp-live { padding: 0 4px; font-size: 8px; line-height: 13px; }
.cp-strip-st .cp-live i { width: 4px; height: 4px; }
.cp-strip-st .cp-ico.is-hand { font-size: 11px; line-height: 13px; }
#cp-inkbar { top: 14px; }

@media (max-width: 760px) {
  .cp-shares { bottom: 64px; }
  .cp-strip { height: 64px; gap: 8px; }
  .cp-strip-n { display: none; }
  .cp-share.is-thumb { width: 140px; height: 80px; }
  #cp-stage.is-grid .cp-share-main { grid-template-columns: 1fr; }
}

.call-toast { position: relative; padding-right: 30px; cursor: pointer; }
.call-toast-x {
  position: absolute; right: 6px; top: 6px; width: 20px; height: 20px; border: 0; border-radius: 5px;
  background: transparent; color: var(--ink-mute); cursor: pointer;
}
.call-toast-x::before { content: ''; position: absolute; inset: 5px; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-width='2.4' d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-width='2.4' d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center/contain no-repeat; }
.call-toast-x:hover { color: var(--ink); background: rgba(255, 255, 255, .08); }
.cp-banner-btn.is-dim { background: transparent; color: var(--ink-dim); border: 1px solid var(--line); }
.call-p-volb {
  width: 24px; height: 24px; padding: 0; cursor: pointer; border-radius: 5px; flex: 0 0 auto;
  border: 1px solid transparent; background: transparent; color: var(--ink-mute); position: relative; opacity: .55; transition: opacity .12s;
}
.call-p:hover .call-p-volb, .call-p-volb.on { opacity: 1; }
.call-p-volb.on { color: var(--accent); }
.call-p-volb::before { content: ''; position: absolute; inset: 5px; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='11 5 6 9 2 9 2 15 6 15 11 19 11 5'/%3E%3Cpath d='M15.54 8.46a5 5 0 0 1 0 7.07'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='11 5 6 9 2 9 2 15 6 15 11 19 11 5'/%3E%3Cpath d='M15.54 8.46a5 5 0 0 1 0 7.07'/%3E%3C/svg%3E") center/contain no-repeat; }
.call-p-volb:hover { color: var(--ink); border-color: var(--line); }
#cp-volpop {
  position: fixed; z-index: 9300; display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px;
  background: var(--bg-3); border: 1px solid var(--line); box-shadow: 0 8px 28px rgba(0, 0, 0, .45); font-size: 12px;
}
.cp-volpop-n { color: var(--ink-dim); max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-volpop-r { width: 140px; accent-color: var(--accent); }
.cp-volpop-v { min-width: 36px; text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); }
.cp-tab-pop { width: 26px; height: 26px; border: 0; background: transparent; color: var(--ink-mute); cursor: pointer; border-radius: 6px; position: relative; margin-left: auto; }
.cp-tab-pop + .cp-tab-x { margin-left: 0; }
.cp-tab-pop::before { content: ''; position: absolute; inset: 6px; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6M15 3h6v6M10 14 21 3'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6M15 3h6v6M10 14 21 3'/%3E%3C/svg%3E") center/contain no-repeat; }
.cp-tab-pop:hover, .cp-tab-pop.on { color: var(--accent); }
.cp-chat-away { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; padding: 18px 14px; color: var(--ink-dim); font-size: 12px; }
body.cp-pop { margin: 0; background: var(--bg-2); color: var(--ink); font: 13px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; overflow: hidden; }
#cp-popchat { height: 100vh; display: flex; flex-direction: column; }
#cp-popchat .cp-chat { flex: 1 1 auto; min-height: 0; }
.cp-inkt.is-vanish.on { color: #b9a6ff; border-color: rgba(185, 166, 255, .5); }

.cp-away, .cp-eta {
  display: inline-flex; align-items: center; gap: 5px; padding: 1px 7px; border-radius: 5px;
  font-size: 9px; font-weight: 800; letter-spacing: .1em; line-height: 16px; white-space: nowrap;
}
.cp-away { background: rgba(154, 164, 178, .2); color: #d3dae4; }
.cp-eta { background: rgba(255, 166, 41, .16); color: var(--accent); }
.cp-eta::before { content: ''; width: 11px; height: 11px; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='13' r='8'/%3E%3Cpath d='M12 9v4l2.5 2M9 2h6M12 5V2'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='13' r='8'/%3E%3Cpath d='M12 9v4l2.5 2M9 2h6M12 5V2'/%3E%3C/svg%3E") center/contain no-repeat; }
.cp-away b:empty, .cp-eta b:empty { display: none; }
.cp-cd { font-variant-numeric: tabular-nums; letter-spacing: 0; font-weight: 700; font-size: 10px; }
.cp-away.is-over, .cp-eta.is-over { background: rgba(255, 130, 136, .18); color: var(--red); }
.cp-away.is-over .cp-cd, .cp-eta.is-over .cp-cd { animation: cp-blink 1.2s ease-in-out infinite; }
@keyframes cp-blink { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
.cp-tile.is-away { border-style: dashed; }
.cp-tile.is-away .cp-tile-av, .cp-strip-p.is-away .cp-strip-av, .call-p.is-away .cs-av { opacity: .45; filter: grayscale(.85); transition: opacity .25s, filter .25s; }
.cp-tile.is-away .cp-tile-n, .call-p.is-away .call-p-n { color: var(--ink-dim); }
.cp-strip-st .cp-away, .cp-strip-st .cp-eta { padding: 0 4px; font-size: 8px; line-height: 13px; }
.cp-strip-st .cp-cd { font-size: 9px; }
.cp-strip-st .cp-eta::before { width: 9px; height: 9px; }
.cb-away { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 8h1a4 4 0 1 1 0 8h-1M3 8h14v9a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4zM6 2v2M10 2v2M14 2v2'/%3E%3C/svg%3E"); }
.cb-away.on { color: #d3dae4; border-color: rgba(211, 218, 228, .55); background: rgba(154, 164, 178, .12); }
.cb-away.on::before { animation: cp-pulse 1.6s ease-in-out infinite; }
#cp-awaymenu {
  position: fixed; z-index: 9300; display: flex; flex-direction: column; gap: 6px; padding: 10px 12px 12px; min-width: 260px; max-width: calc(100vw - 16px);
  border-radius: 12px; background: var(--bg-3); border: 1px solid var(--line); box-shadow: 0 8px 28px rgba(0, 0, 0, .45);
}
.cp-am-t { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-mute); margin-top: 4px; }
.cp-am-t:first-child { margin-top: 0; }
.cp-am-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cp-am-b { padding: 5px 10px; border-radius: 7px; border: 1px solid var(--line); background: transparent; color: var(--ink); font-size: 12px; cursor: pointer; transition: border-color .12s, background .12s; }
.cp-am-b:hover { border-color: var(--ink-mute); background: rgba(255, 255, 255, .05); }
.cp-am-b.is-now { color: var(--accent); border-color: rgba(255, 166, 41, .5); }
.cp-am-b.is-stop { color: var(--red); border-color: rgba(255, 130, 136, .5); }
.cp-am-custom { display: inline-flex; gap: 4px; align-items: center; }
.cp-am-inp { width: 56px; padding: 4px 6px; border-radius: 7px; border: 1px solid var(--line); background: var(--bg-2); color: var(--ink); font-size: 12px; -moz-appearance: textfield; }
.cp-am-inp::-webkit-outer-spin-button, .cp-am-inp::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cp-am-inp:focus { outline: none; border-color: var(--accent); }

.cp-btn.is-tg { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 2 11 13M22 2l-7 20-4-9-9-4z'/%3E%3C/svg%3E"); }
.call-p-tg {
  width: 26px; height: 26px; padding: 0; cursor: pointer; border-radius: 6px; flex: 0 0 auto; position: relative;
  border: 1px solid rgba(42, 171, 238, .45); background: rgba(42, 171, 238, .12); color: #2aabee; transition: background .12s, border-color .12s;
}
.call-p-tg::before { content: ''; position: absolute; inset: 6px; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 2 11 13M22 2l-7 20-4-9-9-4z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 2 11 13M22 2l-7 20-4-9-9-4z'/%3E%3C/svg%3E") center/contain no-repeat; }
.call-p-tg:hover { background: rgba(42, 171, 238, .24); border-color: #2aabee; }
.call-p-tg:disabled { opacity: .5; cursor: default; }
.cp-gone { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.cp-gone .cp-dlg-st { margin: 0 6px 6px; }
.call-p.is-gone .cs-av { opacity: .45; filter: grayscale(.85); }
.call-p.is-gone .call-p-n { color: var(--ink-dim); }
.call-p.is-gone .call-p-t { flex: 1 1 auto; min-width: 0; }
.cp-tg-list { max-height: 240px; overflow: auto; margin-top: 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-2); }
.cp-tg-list > .cp-dlg-meta { margin: 10px 12px; }
.cp-tg-row { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-bottom: 1px solid var(--line); }
.cp-tg-row:last-child { border-bottom: 0; }
.cp-tg-row .cs-av { width: 26px; height: 26px; font-size: 10px; margin-left: 0; flex: 0 0 auto; }
.cp-tg-row.is-notg .cs-av, .cp-tg-row.is-here .cs-av { opacity: .5; filter: grayscale(.8); }
.cp-tg-n { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.cp-tg-n b { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-tg-n i { font-style: normal; font-size: 11px; color: var(--ink-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-tg-n i:empty { display: none; }
.cp-tg-inv { padding: 5px 10px; font-size: 12px; flex: 0 0 auto; white-space: nowrap; }
.cp-tg-inv.is-dim { opacity: .55; cursor: default; }