/* Connect calls (connect-call.js): the call screen, the incoming ring, the call line in the chat. Radii carry !important
   because the app's square.css squares everything else. */
.cc-hb svg { color: #34d399; }
.cc-call { position: fixed; inset: 0; z-index: 2147483200; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden;
  color: #fff; background: radial-gradient(120% 90% at 50% 0%, #12306b 0%, #071534 50%, #02081a 100%); font-family: var(--font-body, Inter, sans-serif); }
.cc-remote { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; opacity: 0; transition: opacity .3s; }
.cc-call.has-remote .cc-remote { opacity: 1; }
.cc-call.is-voice .cc-remote { display: none; }
.cc-who { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 0 20px; transition: opacity .3s; }
.cc-call.has-remote .cc-who { position: absolute; top: 18px; left: 18px; flex-direction: row; gap: 10px; padding: 8px 14px 8px 8px; border-radius: 999px !important; background: rgba(0, 0, 0, .45); backdrop-filter: blur(8px); }
.cc-who .cc-av { width: 120px; height: 120px; font-size: 2.4rem; box-shadow: 0 0 0 6px rgba(52, 211, 153, .18), 0 20px 60px -10px rgba(0, 0, 0, .8); }
.cc-call.has-remote .cc-who .cc-av { width: 38px; height: 38px; font-size: .8rem; box-shadow: none; }
.cc-who-t { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.cc-call.has-remote .cc-who-t { align-items: flex-start; gap: 0; }
.cc-who strong { font: 700 1.6rem/1.2 var(--font-head, inherit); }
.cc-call.has-remote .cc-who strong { font-size: .95rem; }
.cc-st { font-size: .95rem; color: #9fe8c9; font-variant-numeric: tabular-nums; }
.cc-call.has-remote .cc-st { font-size: .8rem; }
.cc-local { position: absolute; right: 18px; top: 18px; z-index: 3; width: 200px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 14px !important; border: 2px solid rgba(255, 255, 255, .25);
  background: #000; box-shadow: 0 16px 40px -10px rgba(0, 0, 0, .8); transform: scaleX(-1); display: none; }
.cc-call.has-local .cc-local { display: block; }
.cc-badges { position: absolute; left: 50%; top: 22px; z-index: 3; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; }
.cc-hd { padding: 3px 9px; border-radius: 6px !important; font: 800 .7rem/1.2 Inter, sans-serif; letter-spacing: .06em; color: #04140e; background: #34d399; }
.cc-scr { padding: 4px 10px; border-radius: 999px !important; font: 700 .72rem/1.2 Inter, sans-serif; color: #fff; background: #7c3aed; }
.cc-badges [hidden] { display: none !important; }
.cc-net { display: inline-flex; align-items: flex-end; gap: 2px; height: 16px; padding: 3px 6px; border-radius: 6px !important; background: rgba(0, 0, 0, .45); }
.cc-net i { width: 3px; border-radius: 1px !important; background: rgba(255, 255, 255, .25); }
.cc-net i:nth-child(1) { height: 4px; } .cc-net i:nth-child(2) { height: 7px; } .cc-net i:nth-child(3) { height: 10px; } .cc-net i:nth-child(4) { height: 13px; }
.cc-net.b1 i:nth-child(-n+1) { background: #f43f5e; } .cc-net.b2 i:nth-child(-n+2) { background: #fbbf24; } .cc-net.b3 i:nth-child(-n+3), .cc-net.b4 i { background: #34d399; }
.cc-top { position: absolute; right: 18px; bottom: 34px; z-index: 3; display: flex; flex-direction: column; gap: 8px; }
.cc-top [hidden] { display: none; }
.cc-call.is-talking .cc-who .cc-av { box-shadow: 0 0 0 6px rgba(52, 211, 153, .75), 0 0 40px rgba(52, 211, 153, .6); }
/* Swap: your own video big, theirs small */
.cc-call.is-swapped.has-remote .cc-local { inset: 0; width: 100%; height: 100%; border-radius: 0 !important; border: 0; z-index: 0; aspect-ratio: auto; }
.cc-call.is-swapped.has-remote .cc-remote { inset: auto; right: 18px; top: 18px; width: 200px; height: auto; aspect-ratio: 16 / 9; z-index: 3; border-radius: 14px !important; border: 2px solid rgba(255, 255, 255, .25); }
.cc-local { cursor: pointer; }
/* Settings */
.cc-set { position: absolute; right: 74px; bottom: 34px; z-index: 5; width: min(340px, calc(100vw - 32px)); padding: 14px; border-radius: 16px !important; background: rgba(9, 16, 36, .97); border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 24px 60px -12px rgba(0, 0, 0, .9); display: grid; gap: 10px; }
.cc-set-h { display: flex; align-items: center; justify-content: space-between; }
.cc-set-h strong { font-size: 1rem; }
.cc-set-h .cc-ib { width: 32px; height: 32px; }
.cc-set-r { display: grid; gap: 5px; font-size: .78rem; color: #aeb7d0; }
.cc-sel { width: 100%; padding: 9px 10px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 10px !important; font: inherit; font-size: .88rem; color: #fff; background: #0a1226; color-scheme: dark; }
.cc-set-n { margin: 2px 0 0; font-size: .74rem; line-height: 1.45; color: #8b93ad; }
.cc-b.is-on { background: #7c3aed; }
.cc-b.is-alt { background: rgba(255, 255, 255, .2); }
/* Calls panel */
.cc-tool { position: relative; }
.cc-tool svg { color: #34d399; }
.cc-tool-n { margin-left: auto; padding: 1px 6px; border-radius: 999px !important; font-style: normal; font-size: .62rem; font-weight: 800; color: #fff; background: #e11d48; }
.cc-tool-n[hidden] { display: none; }
.cc-sp .cn-sp-title { display: flex; align-items: center; gap: 8px; color: #fff; }
.cc-sp .cn-sp-title svg { color: #34d399; }
.cc-sp .cn-sp-list { padding: 10px 14px 14px; overflow: auto; }
.cc-pref { display: grid; gap: 6px; margin-bottom: 12px; font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #8b93ad; }
.cc-seg { display: flex; gap: 4px; padding: 4px; border-radius: 10px !important; background: rgba(255, 255, 255, .05); }
.cc-seg-b { flex: 1; min-height: 32px; border: 0; border-radius: 7px !important; font: inherit; font-size: .78rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: #aeb7d0; background: transparent; cursor: pointer; }
.cc-seg-b.is-on { color: #fff; background: rgba(52, 211, 153, .22); box-shadow: inset 0 0 0 1px rgba(52, 211, 153, .5); }
.cc-hist { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-radius: 10px !important; }
.cc-hist:hover { background: rgba(255, 255, 255, .04); }
.cc-hist-tx { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.cc-hist-tx strong { font-size: .9rem; color: #fff; }
.cc-hist-tx small { display: flex; align-items: center; gap: 4px; font-size: .74rem; color: #8b93ad; }
.cc-hist-tx small svg { width: 13px; height: 13px; color: #34d399; }
.cc-hist.is-missed strong, .cc-hist.is-missed small svg { color: #fb7185; }
.cc-hist-b { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border: 1px solid rgba(52, 211, 153, .45); border-radius: 50% !important; color: #34d399; background: transparent; cursor: pointer; }
.cc-hist-b svg { width: 15px; height: 15px; }
.cc-empty { margin: 10px 0; font-size: .86rem; line-height: 1.45; color: #8b93ad; }
.cc-ib { display: grid; place-items: center; width: 42px; height: 42px; border: 0; border-radius: 50% !important; color: #fff; background: rgba(255, 255, 255, .14); cursor: pointer; }
.cc-ib svg { width: 18px; height: 18px; }
.cc-bar { position: absolute; left: 50%; bottom: 28px; z-index: 3; transform: translateX(-50%); display: flex; gap: 14px; padding: 10px 14px; border-radius: 999px !important; background: rgba(0, 0, 0, .45); backdrop-filter: blur(10px); }
.cc-b { display: grid; place-items: center; width: 58px; height: 58px; border: 0; border-radius: 50% !important; color: #fff; background: rgba(255, 255, 255, .16); cursor: pointer; transition: transform .15s, background .15s; }
.cc-b:hover { background: rgba(255, 255, 255, .26); }
.cc-b:active { transform: scale(.94); }
.cc-b svg { width: 24px; height: 24px; }
.cc-b.is-off { color: #0b1530; background: #fff; }
.cc-b.is-end { background: #e11d48; }
.cc-b.is-end svg { transform: rotate(0deg); }
.cc-b.is-yes { background: #16a34a; }
/* Small: a floating window so the chat can be used during the call */
.cc-call.is-small { inset: auto 18px 18px auto; width: 300px; height: 200px; border-radius: 18px !important; box-shadow: 0 24px 60px -12px rgba(0, 0, 0, .85); border: 1px solid rgba(255, 255, 255, .18); }
.cc-call.is-small .cc-local { width: 84px; right: 8px; top: 8px; }
.cc-call.is-small .cc-bar { bottom: 8px; gap: 8px; padding: 6px 8px; }
.cc-call.is-small .cc-b { width: 40px; height: 40px; }
.cc-call.is-small .cc-b svg { width: 18px; height: 18px; }
.cc-call.is-small .cc-top { right: auto; left: 8px; bottom: auto; top: 8px; flex-direction: row; }
.cc-call.is-small .cc-top .cc-ib:not(:first-child), .cc-call.is-small .cc-set, .cc-call.is-small .cc-badges { display: none; }
.cc-call.is-small .cc-who .cc-av { width: 54px; height: 54px; font-size: 1rem; }
.cc-call.is-small .cc-who strong { font-size: 1rem; }
.cc-call.is-small .cc-hd, .cc-call.is-small.has-remote .cc-who { display: none; }
/* The incoming ring */
.cc-ring { position: fixed; inset: 0; z-index: 2147483300; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: #fff; text-align: center;
  background: radial-gradient(120% 90% at 50% 0%, #0f4c3a 0%, #071534 55%, #02081a 100%); font-family: var(--font-body, Inter, sans-serif); animation: ccIn .25s ease; }
@keyframes ccIn { from { opacity: 0; } }
.cc-ring .cc-av { width: 128px; height: 128px; font-size: 2.6rem; margin-bottom: 8px; }
.cc-ring .cc-av.is-pulse { animation: ccPulse 1.6s ease-out infinite; }
@keyframes ccPulse { 0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, .55); } 100% { box-shadow: 0 0 0 34px rgba(52, 211, 153, 0); } }
.cc-ring strong { font: 700 1.7rem/1.2 var(--font-head, inherit); }
.cc-ring > span { font-size: 1rem; color: #9fe8c9; }
.cc-ring-row { display: flex; gap: 64px; margin-top: 46px; }
.cc-ring-l { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: .85rem; color: #dbe6ff; }
.cc-ring .cc-b { width: 70px; height: 70px; }
.cc-ring .cc-b svg { width: 28px; height: 28px; }
/* The call line in the chat */
.cc-log { display: flex; align-items: center; gap: 12px; min-width: 230px; padding: 4px 2px; }
.cc-log-ic { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 50% !important; color: #04140e; background: #34d399; }
.cc-log.is-missed .cc-log-ic { color: #fff; background: #e11d48; }
.cc-log-ic svg { width: 18px; height: 18px; }
.cc-log-tx { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.cc-log-tx strong { font-size: .92rem; }
.cc-log-tx small { font-size: .78rem; color: #9aa3bd; font-variant-numeric: tabular-nums; }
.cc-log-b { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border: 1px solid rgba(52, 211, 153, .5); border-radius: 50% !important; color: #34d399; background: transparent; cursor: pointer; }
.cc-log-b svg { width: 16px; height: 16px; }
.cc-has-log .cn-text:empty { display: none; }
@media (max-width: 760px) {
  .cc-local { width: 108px; aspect-ratio: 9 / 16; right: 12px; top: 12px; }
  .cc-call.has-remote .cc-who { top: 12px; left: 12px; }
  .cc-bar { bottom: calc(22px + env(safe-area-inset-bottom)); gap: 10px; }
  .cc-b { width: 54px; height: 54px; }
  .cc-top { right: 12px; bottom: calc(110px + env(safe-area-inset-bottom)); }
  .cc-set { right: 12px; left: 12px; width: auto; bottom: calc(110px + env(safe-area-inset-bottom)); }
  .cc-call.is-swapped.has-remote .cc-remote { width: 108px; aspect-ratio: 9 / 16; right: 12px; top: 12px; }
  .cc-call.is-small { width: 180px; height: 260px; right: 12px; bottom: calc(80px + env(safe-area-inset-bottom)); }
  .cc-ring-row { gap: 48px; }
}
@media (prefers-reduced-motion: reduce) { .cc-ring, .cc-ring .cc-av.is-pulse { animation: none; } }

/* Quiet hours (founder 2026-10-12) */
.cc-quiet { margin: 8px 6px 10px; padding: 12px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.03); }
.cc-quiet-h { display: flex; align-items: center; gap: 10px; font-weight: 700; cursor: pointer; }
.cc-quiet-h input { width: 18px; height: 18px; accent-color: #1f7bff; }
.cc-quiet-p, .cc-quiet-now { margin: 6px 0 0; font-size: 0.82rem; color: #8b93ad; }
.cc-quiet-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; font-size: 0.88rem; }
.cc-quiet-t { height: 36px; padding: 0 8px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.05); color: #fff; font: inherit; color-scheme: dark; }
.cc-quiet-save { margin-left: auto; }