/* Callixy: sculpted glass icons, tactile controls, live text and real hit areas. */
:root { --clx-ink: #162646; --clx-edge: rgba(114, 141, 199, .19); }
.app-body, .auth-body {
    background: radial-gradient(ellipse at 8% 2%, #dfefff 0, transparent 42%),
        radial-gradient(ellipse at 100% 72%, #efe8ff 0, transparent 45%), #f5f7fc;
    color: var(--clx-ink);
}
.app-header, .card, .auth-card, .modal-card { border-color: var(--clx-edge); box-shadow: 0 8px 26px #23376008, inset 0 1px 0 #fff; }
[data-clx-icon] { --clx-icon-size: 27px; }
[data-clx-icon].has-3d::before {
    content: ''; display: inline-block; width: var(--clx-icon-size); height: var(--clx-icon-size);
    flex: 0 0 var(--clx-icon-size); vertical-align: middle; margin-inline-end: 7px;
    background: var(--clx-icon-image) center / contain no-repeat; pointer-events: none;
}
.clx-icon-only.has-3d { font-size: 0; }
.clx-icon-only.has-3d::before { margin: 0; }
.clx-icon-only.has-3d > svg, .clx-icon-only.has-3d > .nav-icon { display: none; }
.clx-icon-only { --clx-icon-size: 36px; }
.copy-chip, .icon-pill, .icon-button, .nav-item, .history-action, .soft-button, .primary-button, .dial-key {
    border: 1px solid var(--clx-edge);
    box-shadow: inset 0 1px 1px #fff, 0 3px 0 #d9e2f1, 0 5px 12px #3751800a;
    transition: background .16s, box-shadow .16s, transform .16s;
}
.copy-chip, .icon-pill, .icon-button, .nav-item, .history-action, .soft-button {
    background: linear-gradient(155deg, #fff, #f0f5ff); color: #263d64;
}
.copy-chip:hover, .icon-pill:hover, .icon-button:hover, .nav-item:hover, .history-action:hover, .soft-button:hover { background: #edf4ff; }
.primary-button { background: linear-gradient(145deg, #2563eb, #415ddd); border-color: #4168d8; color: #fff; box-shadow: inset 0 1px 1px #b7dcff88, 0 3px 0 #2e4fb0, 0 7px 16px #315ee622; }
.primary-button:active, .soft-button:active, .icon-button:active, .copy-chip:active, .nav-item:active, .history-action:active, .dial-key:active { transform: translateY(2px); box-shadow: inset 0 1px 3px #283f6517, 0 1px 0 #d9e2f1; }
.nav-item { --clx-icon-size: 38px; border-radius: 18px; }
.nav-item.active { background: linear-gradient(145deg, #edf6ff, #dce7ff); border-color: #b8cfff; box-shadow: inset 0 1px 2px #fff, 0 3px 0 #b8ccef, 0 5px 14px #385eff16; }
.dial-key { background: linear-gradient(145deg, #fff, #eef3fd); border-radius: 23px; }
.dial-key:nth-child(3n+2) { background: linear-gradient(145deg, #fff, #f0edfc); }
.dial-key:hover { background: linear-gradient(145deg, #f8fdff, #e7efff); }
.dial-digit { color: #203661; text-shadow: 0 1px 0 #fff; }
.dial-digit[data-clx-icon] { --clx-icon-size: clamp(18px, 48cqmin, 48px); }
.dial-digit.has-3d { font-size: 0; line-height: 0; }
.dial-digit.has-3d::before { margin: 0; }
.dial-key-mark { opacity: .14; filter: none; }
.dial-call-button { --clx-icon-size: 34px; background: linear-gradient(145deg, #effff8, #cef2e4); color: #12583f; border-color: #a8dfc9; box-shadow: inset 0 1px 2px #fff, 0 3px 0 #9bcbb6, 0 7px 16px #19855d12; }
.dial-call-button:hover { background: #d9f9e9; }
.add-contact-button { background: linear-gradient(145deg, #edfff8, #c9f2df); border-color: #91d6b6; }
.call-surface { background: radial-gradient(ellipse at 90% 0, #243968 0, transparent 60%), linear-gradient(165deg, #101d37, #101b2e); box-shadow: inset 0 1px 0 #5473a644, 0 12px 34px #182a5422; }
.video-dock button { --clx-icon-size: 39px; border-radius: 16px; background: linear-gradient(145deg, #33445f, #233149); border-color: #60759066; box-shadow: inset 0 1px 1px #ffffff19, 0 3px 0 #071122, 0 5px 10px #0002; }
.video-dock button.has-3d::before { display: block; }
.video-dock .danger { background: linear-gradient(145deg, #6b3043, #452138); border-color: #e7859588; }
.video-dock button.is-active { background: linear-gradient(145deg, #394677, #293c66); border-color: #8d9ef0; }
.video-dock #screenShareBtn.is-active { background: #145a45; border-color: #5bd4a5; }
.video-dock #muteMicBtn.active, .video-dock #muteRemoteBtn.active { background: #672e3d; border-color: #e67486; }
.video-dock #muteMicBtn.active::after, .video-dock #muteRemoteBtn.active::after { z-index: 1; height: 3px; width: 32px; color: #ffd8df; box-shadow: 0 0 0 2px #672e3d; }
.video-dock button:active { transform: translateY(2px); box-shadow: inset 0 1px 2px #0003; }
.video-stage-fs, .video-pip-chip { --clx-icon-size: 25px; background: #15213aca; border-color: #97b8e466; }
.video-pip-chip.has-3d::after { display: none; }
.video-pip-chip.is-restore.has-3d::before { rotate: 180deg; }
.call-summary .call-card, .call-summary .call-quality-main { background: #ffffff0d; border-color: #b8ccff16; }
.logo-image { object-fit: contain; }
.logo-shell { background: linear-gradient(145deg, #fff, #e7f3ff); border-color: #d4e7ff; box-shadow: inset 0 1px 0 #fff, 0 4px 12px #2375cd12; }
.history-action.clx-icon-only { --clx-icon-size: 29px; min-width: 44px; min-height: 44px; }
.history-chip { --clx-icon-size: 22px; }
.history-chip.has-3d > svg, #videoSwitchBtn.has-3d > svg { display: none; }
.history-avatar, .profile-avatar, .line-preview-avatar { box-shadow: inset 0 1px 0 #fff, 0 3px 10px #283f6510; }
.settings-toggle { --clx-icon-size: 23px; white-space: nowrap; }
.report-chevron { --clx-icon-size: 24px; }
.report-chevron.has-3d svg { display: none; }
.report-chevron.has-3d::before { margin: 0; }
.share-format button { --clx-icon-size: 27px; display: flex; align-items: center; justify-content: center; }
.share-format button[aria-pressed='true'] { box-shadow: 0 2px 7px #213e701a, inset 0 1px 0 #fff; }
button:disabled::before, button.is-unavailable::before { filter: saturate(.3); opacity: .55; }
button:focus-visible, a:focus-visible { outline: 3px solid #63a2ff; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { [data-clx-icon], .dial-key, .primary-button, .soft-button { transition: none; } }
/* Keyboard focus is visible on every control, in every theme and on every page (A29).
   The selector outranks the component rules that set outline:none; the ring colour
   is a token so it reaches 3:1 against each theme's surfaces. */
:root { --focus-ring: #1d4ed8; }
:root[data-theme="graphite"] { --focus-ring: #c0e5ff; }
:root[data-theme="minimal"] { --focus-ring: #202a37; }
.call-surface { --focus-ring: #93c5fd; }
:root :is(a[href], button, input, select, textarea, summary, audio, video, [tabindex]:not([tabindex="-1"])):focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
/* File pickers: the input is visually hidden, its label is the visible control. */
:root .file-button:has(+ input:focus-visible) { outline: 2px solid var(--focus-ring); outline-offset: 2px; }