:root { --bg: #f4f7fb; --surface: #ffffff; --surface-2: #f7f9fc; --text: #101828; --muted: #667085; --line: rgba(16, 24, 40, 0.10); --primary: #2172ff; --primary-strong: #1556d6; --success: #25b06e; --warning: #e8912b; --danger: #e45656; --ctl-idle: #7c8598; --ctl-idle-bg: rgba(16, 24, 40, 0.05); font-family: Roboto, "Segoe UI", "Helvetica Neue", Arial, sans-serif; color: var(--text); }
* { box-sizing: border-box; }
html, body, #root { height: 100%; margin: 0px; }
button, input, textarea { font: inherit; }
button { border: 0px; cursor: pointer; background: none; color: inherit; }
button:disabled { cursor: not-allowed; }
.sp-page { height: 100dvh; width: 100%; display: flex; justify-content: center; align-items: center; background: radial-gradient(circle at left top, rgba(33, 114, 255, 0.1), transparent 30%), radial-gradient(circle at right bottom, rgba(37, 176, 110, 0.09), transparent 28%), linear-gradient(rgb(251, 253, 255) 0%, rgb(238, 244, 251) 100%); padding: clamp(0px, 2vw, 20px); }
.sp-shell { position: relative; width: min(100%, 440px, 50dvh); max-width: 440px; height: auto; aspect-ratio: 1 / 2; max-height: 900px; display: flex; flex-direction: column; min-height: 0px; background: var(--surface); border: 1px solid var(--line); border-radius: clamp(0px, 3vw, 28px); box-shadow: rgba(15, 23, 42, 0.14) 0px 24px 64px; overflow: hidden; }
.sp-page-embedded { padding: 0px; align-items: stretch; background: var(--surface); }
.sp-page-embedded .sp-shell { width: 100%; max-width: none; height: 100%; max-height: none; aspect-ratio: auto; border: 0px; border-radius: 0px; box-shadow: none; }
.sp-body { flex: 1 1 0%; min-height: 0px; display: flex; flex-direction: column; overflow: hidden; }
.sp-dialer { flex: 1 1 0%; min-height: 0px; display: flex; flex-direction: column; padding: clamp(12px, 3vw, 20px); gap: clamp(10px, 2.5vh, 20px); }
.sp-display { position: relative; display: flex; align-items: center; flex: 0 0 auto; padding: 2px 0px 10px; }
.sp-display::after { content: ""; position: absolute; left: 8%; right: 8%; bottom: 0px; height: 1px; background: var(--line); }
.sp-display-input { width: 100%; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; padding: 8px 44px; background: transparent; color: var(--text); font-size: clamp(1.2rem, 4.5vw, 1.6rem); font-weight: 300; letter-spacing: 0.01em; text-align: center; outline: none; }
.sp-display-input::placeholder { color: rgb(182, 192, 209); font-weight: 400; font-size: 0.95rem; letter-spacing: 0px; }
.sp-backspace { position: absolute; right: 2px; color: var(--muted); display: inline-flex; padding: 6px; }
.sp-backspace:hover { color: var(--text); }
.sp-keypad { flex: 1 1 0%; min-height: 0px; overflow: hidden; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(4, minmax(0px, 1fr)); gap: clamp(6px, 1.6vh, 14px) clamp(14px, 5vw, 40px); place-items: center; }
.sp-key { height: 100%; width: auto; aspect-ratio: 1 / 1; max-width: min(100%, clamp(56px, 18vw, 80px)); max-height: clamp(56px, 18vw, 80px); display: grid; place-items: center; gap: 1px; border-radius: 50%; color: var(--text); transition: background 120ms, transform 100ms; }
.sp-key:hover { background: rgba(33, 114, 255, 0.06); }
.sp-key:active { transform: scale(0.94); background: rgba(33, 114, 255, 0.12); }
.sp-key span { font-size: clamp(1.5rem, 6vw, 2rem); font-weight: 300; line-height: 1; }
.sp-key small { font-size: clamp(0.5rem, 2vw, 0.65rem); color: var(--muted); letter-spacing: 0.14em; min-height: 0.8em; }
.sp-keypad.compact { flex: 0 0 auto; gap: 6px 24px; grid-template-rows: none; overflow: visible; }
.sp-keypad.compact .sp-key { height: auto; width: 100%; max-width: 60px; max-height: none; }
.sp-keypad.compact .sp-key span { font-size: 1.4rem; }
.sp-callvia { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; gap: 8px; padding-top: 4px; }
.sp-callvia-label { color: var(--muted); font-size: 0.82rem; }
.sp-callvia-number { font-weight: 600; font-size: 0.9rem; letter-spacing: -0.01em; }
.sp-fab { --fab-claro: #27bf6f; --fab-escuro: #1d9e59; --fab-sombra: rgba(29, 158, 89, 0.42); --fab-halo: rgba(39, 191, 111, 0.45); flex: 0 0 auto; align-self: center; width: clamp(56px, 15vw, 66px); height: clamp(56px, 15vw, 66px); display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: linear-gradient(145deg, var(--fab-claro), var(--fab-escuro)); color: rgb(255, 255, 255); box-shadow: 0 14px 30px var(--fab-sombra); transition: transform 120ms, filter 120ms; }
.sp-fab-linha { display: grid; grid-template-columns: 1fr auto 1fr; place-items: center; width: 100%; flex: 0 0 auto; }
.sp-modo { border: 1px solid var(--line); background: var(--surface); color: var(--muted); border-radius: 8px; padding: 5px 11px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; cursor: pointer; transition: color 120ms, border-color 120ms, background 120ms; }
.sp-modo:hover { color: var(--text); border-color: var(--muted); }
.sp-modo.ativo { color: rgb(255, 255, 255); border-color: transparent; background: var(--primary); }
.sp-modo.dnd.ativo { background: var(--danger); }
@media (prefers-reduced-motion: reduce) {
  .sp-modo { transition: none; }
}
.sp-fab:hover:not(:disabled) { transform: translateY(-2px); }
.sp-fab:disabled { background: rgb(199, 205, 216); box-shadow: none; }
.sp-fab svg { width: 26px; height: 26px; }
@keyframes sp-fab-halo { 
  0% { box-shadow: 0 14px 30px var(--fab-sombra), 0 0 0 0 var(--fab-halo); }
  70% { box-shadow: 0 14px 30px var(--fab-sombra), 0 0 0 6px transparent; }
  100% { box-shadow: 0 14px 30px var(--fab-sombra), 0 0 0 0 transparent; }
}
.sp-fab.pronto:not(:disabled) { animation: 2s ease-out 0s infinite normal none running sp-fab-halo; }
@media (prefers-reduced-motion: reduce) {
  .sp-fab.pronto:not(:disabled) { animation: auto ease 0s 1 normal none running none; }
}
.sp-push { position: absolute; top: 0px; left: 0px; right: 0px; z-index: 60; display: flex; align-items: center; gap: 10px; margin: clamp(6px, 2vw, 12px); padding: 10px 12px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); box-shadow: rgba(15, 23, 42, 0.22) 0px 16px 40px; animation: 260ms cubic-bezier(0.2, 0.9, 0.3, 1.2) 0s 1 normal both running sp-push-in; }
@keyframes sp-push-in { 
  0% { opacity: 0; transform: translateY(-120%); }
  100% { opacity: 1; transform: translateY(0px); }
}
.sp-push-avatar { width: 40px; height: 40px; flex: 0 0 auto; border-radius: 12px; display: grid; place-items: center; color: rgb(255, 255, 255); }
.sp-push-avatar svg { width: 20px; height: 20px; }
.sp-push-info { flex: 1 1 0%; min-width: 0px; display: flex; flex-direction: column; gap: 1px; }
.sp-push-info strong { font-size: 0.88rem; }
.sp-push-info span { font-size: 0.8rem; color: var(--muted); display: inline-flex; align-items: center; gap: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-push-btn { width: 42px; height: 42px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center; color: rgb(255, 255, 255); box-shadow: rgba(15, 23, 42, 0.18) 0px 8px 18px; transition: transform 100ms; }
.sp-push-btn:hover { transform: translateY(-1px); }
.sp-push-btn svg { width: 19px; height: 19px; }
.sp-push-btn.accept { background: linear-gradient(145deg, rgb(39, 191, 111), rgb(29, 158, 89)); animation: 1.4s ease-in-out 0s infinite normal none running sp-push-pulse; }
.sp-push-btn.reject { background: linear-gradient(145deg, rgb(242, 95, 95), rgb(214, 63, 63)); }
.sp-push-btn.ligar { background: linear-gradient(145deg, #3d8bff, var(--primary-strong)); }
@keyframes sp-push-pulse { 
  0%, 100% { box-shadow: rgba(37, 176, 110, 0.35) 0px 8px 18px; }
  50% { box-shadow: rgba(37, 176, 110, 0.7) 0px 8px 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .sp-push { animation: auto ease 0s 1 normal none running none; }
  .sp-push-btn.accept { animation: auto ease 0s 1 normal none running none; }
}
.sp-entrante { position: absolute; inset: 0px; z-index: 70; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(14px, 3vh, 26px); padding: clamp(16px, 4vw, 28px); background: var(--surface); overflow-y: auto; animation: 180ms ease 0s 1 normal both running sp-entrante-in; }
@keyframes sp-entrante-in { 
  0% { opacity: 0; transform: scale(0.98); }
  100% { opacity: 1; transform: scale(1); }
}
.sp-entrante-id { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.sp-entrante-id .sp-call-number { justify-content: center; }
.sp-entrante-acoes { display: flex; align-items: flex-start; justify-content: center; gap: clamp(28px, 12vw, 56px); }
.sp-entrante-acao { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.sp-entrante-acao small { font-size: 0.72rem; color: var(--muted); }
.sp-entrante-encaminhar { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); border-radius: 999px; padding: 7px 15px; font-size: 0.76rem; font-weight: 600; cursor: pointer; }
.sp-entrante-encaminhar:hover { color: var(--text); border-color: var(--muted); }
.sp-entrante-encaminhar.aberto { color: var(--primary); border-color: var(--primary); }
.sp-entrante-encaminhar svg { width: 15px; height: 15px; }
.sp-entrante-sheet { width: 100%; max-width: 340px; }
.sp-entrante-desvio { width: 100%; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); border-radius: 10px; padding: 7px 10px; font-size: 0.72rem; font-weight: 600; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-entrante-desvio:hover { border-color: var(--muted); }
.sp-entrante-desvio, .sp-entrante-sheet .sp-search { border-radius: 999px; min-height: 0px; }
.sp-entrante-sheet .sp-search { padding: 6px 13px; gap: 7px; background: var(--surface); border: 1px solid var(--line); }
.sp-entrante-sheet .sp-search svg { width: 14px; height: 14px; color: var(--muted); }
.sp-entrante-sheet .sp-search input { font-size: 0.76rem; }
.sp-entrante-sheet .sp-search input::placeholder { color: var(--muted); }
.sp-entrante-sheet .sp-search:focus-within { border-color: var(--primary); }
.sp-entrante-sheet .sp-sheet-head strong { font-size: 0.72rem; font-weight: 600; color: var(--primary); letter-spacing: 0.01em; }
.sp-entrante-sheet .sp-sheet-head { align-items: center; }
.sp-entrante-sheet .sp-sheet-x svg { width: 14px; height: 14px; }
@media (prefers-reduced-motion: reduce) {
  .sp-entrante { animation: auto ease 0s 1 normal none running none; }
}
.sp-nav { flex: 0 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); background: var(--surface); }
.sp-nav button { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 9px 0 calc(9px + env(safe-area-inset-bottom, 0)); color: var(--muted); }
.sp-nav button.active { color: var(--primary); }
.sp-nav button:disabled { opacity: 0.45; cursor: default; }
.sp-nav button span { font-size: 0.68rem; letter-spacing: 0.01em; }
.sp-nav button svg { width: 20px; height: 20px; }
.sp-contacts, .sp-history { flex: 1 1 0%; min-height: 0px; display: flex; flex-direction: column; padding: clamp(10px, 2.5vw, 16px); gap: 10px; }
.sp-search { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); color: var(--muted); }
.sp-search svg { width: 18px; height: 18px; flex: 0 0 auto; }
.sp-search input { flex: 1 1 0%; min-width: 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; background: transparent; color: var(--text); outline: none; }
.sp-list { display: flex; flex-direction: column; gap: 4px; }
.sp-list.grow { flex: 1 1 0%; min-height: 0px; overflow-y: auto; }
.sp-list-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: 14px; text-align: left; color: var(--text); transition: background 120ms; }
button.sp-list-item:hover, .sp-list-item:hover { background: var(--surface-2); }
.sp-list-item.static { cursor: default; }
.sp-list-item.external { border: 1px dashed var(--line); }
.sp-list-main { flex: 1 1 0%; min-width: 0px; display: flex; flex-direction: column; gap: 1px; text-align: left; color: var(--text); }
.sp-list-main.clickable { cursor: pointer; }
.sp-list-main.clickable:hover strong { color: var(--primary); }
.sp-list-main strong { font-size: 0.94rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-list-main small { font-size: 0.78rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-avatar { width: 38px; height: 38px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center; color: rgb(255, 255, 255); font-weight: 700; font-size: 0.82rem; }
.sp-avatar.external { background: var(--ctl-idle-bg); color: var(--muted); }
.sp-avatar.external svg { width: 18px; height: 18px; }
.sp-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.sp-dir { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center; }
.sp-dir svg { width: 16px; height: 16px; }
.sp-dir.incoming { background: rgba(37, 176, 110, 0.12); color: var(--success); }
.sp-dir.outgoing { background: rgba(33, 114, 255, 0.12); color: var(--primary); }
.sp-when { flex: 0 0 auto; color: var(--muted); font-size: 0.74rem; }
.sp-icon, .sp-icon-danger { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: var(--muted); }
.sp-icon svg, .sp-icon-danger svg { width: 17px; height: 17px; }
.sp-icon:hover { background: rgba(33, 114, 255, 0.1); color: var(--primary); }
.sp-icon:disabled { opacity: 0.4; }
.sp-icon-danger:hover { background: rgba(228, 86, 86, 0.1); color: var(--danger); }
.sp-empty { margin: 0px; padding: 24px 12px; text-align: center; color: var(--muted); font-size: 0.88rem; }
.sp-call { flex: 1 1 0%; min-height: 0px; display: flex; flex-direction: column; padding: clamp(14px, 4vw, 24px); gap: clamp(12px, 2vh, 20px); overflow-y: auto; }
.sp-call-top { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.sp-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--warning); }
.sp-dot.ok { background: var(--success); }
.sp-call-brand { font-weight: 700; letter-spacing: -0.01em; }
.sp-install { margin-left: auto; font-size: 0.78rem; color: var(--primary); font-weight: 600; padding: 4px 10px; border-radius: 999px; background: rgba(33, 114, 255, 0.1); }
.sp-call-id { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: clamp(6px, 3vh, 24px) 0px; }
.sp-call-avatar { width: clamp(72px, 22vw, 104px); height: clamp(72px, 22vw, 104px); border-radius: 50%; display: grid; place-items: center; color: rgb(255, 255, 255); font-weight: 700; font-size: clamp(1.6rem, 7vw, 2.4rem); }
.sp-call-avatar svg { width: 42%; height: 42%; }
.sp-call-name { font-size: clamp(1.2rem, 5vw, 1.5rem); letter-spacing: -0.02em; }
.sp-call-number { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 0.95rem; font-variant-numeric: tabular-nums; }
.sp-call-number:hover { color: var(--text); }
.sp-call-status { color: var(--muted); font-size: 0.86rem; }
.sp-call-status em { color: var(--text); font-style: normal; font-weight: 600; font-variant-numeric: tabular-nums; margin-right: 4px; }
.sp-call-note { color: var(--muted); font-size: 0.8rem; }
.sp-controls { flex: 0 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(8px, 2vh, 16px) 8px; padding: 4px 0px; }
.sp-ctl { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--ctl-idle); }
.sp-ctl span { font-size: 0.72rem; }
.sp-ctl > svg { width: clamp(48px, 14vw, 60px); height: clamp(48px, 14vw, 60px); padding: clamp(13px, 4vw, 18px); border-radius: 50%; background: var(--ctl-idle-bg); color: var(--ctl-idle); transition: background 140ms, color 140ms; }
.sp-ctl:disabled { opacity: 0.45; }
.sp-ctl.on { color: var(--primary); }
.sp-ctl.on > svg { background: rgba(33, 114, 255, 0.14); color: var(--primary); }
.sp-ctl.on.danger { color: var(--danger); }
.sp-ctl.on.danger > svg { background: rgba(228, 86, 86, 0.14); color: var(--danger); }
.sp-ctl.on.warn { color: var(--warning); }
.sp-ctl.on.warn > svg { background: rgba(232, 145, 43, 0.16); color: var(--warning); }
.sp-call-actions { margin-top: auto; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; gap: clamp(20px, 8vw, 48px); padding-top: 8px; }
.sp-round { width: clamp(60px, 17vw, 72px); height: clamp(60px, 17vw, 72px); border-radius: 50%; display: grid; place-items: center; color: rgb(255, 255, 255); box-shadow: rgba(15, 23, 42, 0.2) 0px 12px 28px; transition: transform 120ms; }
.sp-round:hover { transform: translateY(-2px); }
.sp-round svg { width: 26px; height: 26px; }
.sp-round.big { width: clamp(66px, 19vw, 80px); height: clamp(66px, 19vw, 80px); }
.sp-round.success { background: linear-gradient(145deg, rgb(39, 191, 111), rgb(29, 158, 89)); box-shadow: rgba(29, 158, 89, 0.42) 0px 14px 30px; }
.sp-round.danger { background: linear-gradient(145deg, rgb(242, 95, 95), rgb(214, 63, 63)); box-shadow: rgba(214, 63, 63, 0.42) 0px 14px 30px; }
.sp-rotate { display: inline-flex; transform: rotate(135deg); }
.sp-sheet { flex: 0 0 auto; display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 18px; border: 1px solid var(--line); background: var(--surface-2); animation: 200ms ease 0s 1 normal both running sheet-rise; }
@keyframes sheet-rise { 
  0% { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0px); }
}
.sp-sheet-head { display: flex; align-items: center; justify-content: space-between; }
.sp-sheet-head strong { font-size: 0.98rem; }
.sp-sheet-x { color: var(--muted); display: inline-flex; padding: 4px; border-radius: 8px; }
.sp-sheet-x:hover { background: rgba(16, 24, 40, 0.06); color: var(--text); }
.sp-sheet .sp-list { max-height: 200px; overflow-y: auto; }
.sp-dtmf-display { min-height: 32px; padding: 6px 12px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); font-size: 1.2rem; letter-spacing: 0.14em; text-align: center; color: var(--text); }
.sp-mode { display: flex; gap: 8px; }
.sp-mode button { flex: 1 1 0%; padding: 8px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); }
.sp-mode button.active { background: rgba(33, 114, 255, 0.1); border-color: rgba(33, 114, 255, 0.2); color: var(--primary-strong); }
.sp-transfer-live p { margin: 0px 0px 10px; color: var(--muted); }
.sp-transfer-live strong { color: var(--text); }
.sp-row { display: flex; gap: 10px; }
.sp-row.end { justify-content: flex-end; }
.sp-row.center { justify-content: center; }
.sp-btn { padding: 10px 16px; border-radius: 12px; font-weight: 600; border: 1px solid var(--line); background: var(--surface); color: var(--text); }
.sp-btn.small { padding: 7px 10px; }
.sp-btn.primary { background: var(--primary); color: rgb(255, 255, 255); border-color: transparent; }
.sp-btn.primary:disabled { background: rgb(199, 205, 216); }
.sp-btn.danger { background: rgba(228, 86, 86, 0.1); color: rgb(169, 52, 52); border-color: rgba(228, 86, 86, 0.2); }
.sp-btn.ghost { background: transparent; color: var(--muted); }
.sp-modal-overlay { position: absolute; inset: 0px; z-index: 40; display: grid; place-items: center; padding: 16px; background: rgba(8, 5, 47, 0.42); animation: 160ms ease 0s 1 normal both running sheet-rise; }
.sp-modal { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 10px; padding: 18px; border-radius: 20px; background: var(--surface); box-shadow: rgba(8, 5, 47, 0.3) 0px 24px 60px; }
.sp-field { display: flex; flex-direction: column; gap: 5px; font-size: 0.82rem; color: var(--muted); }
.sp-field input { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: var(--surface-2); color: var(--text); outline: none; }
.sp-field input:focus { border-color: var(--primary); background: var(--surface); }
.sp-identity-modal { max-height: calc(100% - 24px); gap: 14px; overflow: hidden; }
.sp-identity-title { display: flex; align-items: center; gap: 10px; min-width: 0px; }
.sp-identity-title > span:last-child { display: grid; gap: 2px; }
.sp-identity-title strong { font-size: 1rem; line-height: 1.2; }
.sp-identity-title small { color: var(--muted); font-size: 0.72rem; font-weight: 500; }
.sp-identity-title-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 12px; color: var(--primary); background: rgba(33, 114, 255, 0.1); }
.sp-identity-title-icon svg { width: 18px; height: 18px; }
.sp-identity-current { display: flex; align-items: center; gap: 11px; padding: 13px; border: 1px solid rgba(33, 114, 255, 0.2); border-radius: 14px; background: linear-gradient(135deg, rgba(33, 114, 255, 0.09), rgba(33, 114, 255, 0.024)); }
.sp-agent-avatar { width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-items: center; border-radius: 50%; color: rgb(255, 255, 255); font-size: 0.76rem; font-weight: 800; letter-spacing: 0.02em; box-shadow: rgba(255, 255, 255, 0.55) 0px 0px 0px 2px inset; }
.sp-identity-current-copy { display: grid; gap: 3px; min-width: 0px; flex: 1 1 0%; }
.sp-identity-current-copy strong, .sp-agent-choice strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-identity-current-copy small, .sp-agent-choice small { color: var(--muted); font-size: 0.74rem; }
.sp-identity-secure { padding: 5px 8px; border-radius: 999px; background: rgba(37, 176, 110, 0.12); color: rgb(8, 122, 72); font-size: 0.66rem; font-weight: 800; }
.sp-agent-admin-picker { display: grid; gap: 10px; min-height: 0px; overflow: hidden; }
.sp-agent-admin-note, .sp-identity-warning { display: grid; gap: 4px; padding: 11px 12px; border-radius: 12px; background: rgb(244, 248, 255); color: var(--text); }
.sp-agent-admin-note strong, .sp-identity-warning strong { color: var(--primary-strong); font-size: 0.8rem; }
.sp-agent-admin-note span, .sp-identity-warning span { color: var(--muted); font-size: 0.73rem; line-height: 1.35; }
.sp-identity-warning { background: rgb(255, 247, 237); border: 1px solid rgba(232, 145, 43, 0.2); }
.sp-identity-warning strong { color: rgb(161, 92, 8); }
.sp-agent-search { display: flex; align-items: center; gap: 8px; padding: 0px 11px; min-height: 40px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); color: var(--muted); }
.sp-agent-search:focus-within { border-color: var(--primary); background: var(--surface); box-shadow: rgba(33, 114, 255, 0.09) 0px 0px 0px 3px; }
.sp-agent-search svg { width: 17px; height: 17px; flex: 0 0 17px; }
.sp-agent-search input { width: 100%; min-width: 0px; padding: 9px 0px; border: 0px; outline: 0px; background: transparent; color: var(--text); font-size: 0.8rem; }
.sp-agent-choice-list { display: grid; gap: 6px; max-height: 250px; overflow-y: auto; padding: 2px 3px 2px 0px; scrollbar-width: thin; scrollbar-color: rgb(183, 196, 214) transparent; }
.sp-agent-choice { width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 13px; text-align: left; background: var(--surface); transition: border-color 120ms, background 120ms, transform 120ms; }
.sp-agent-choice:hover { border-color: rgba(33, 114, 255, 0.32); background: rgb(248, 251, 255); transform: translateY(-1px); }
.sp-agent-choice.selected { border-color: var(--primary); background: rgba(33, 114, 255, 0.07); box-shadow: rgba(33, 114, 255, 0.08) 0px 0px 0px 2px; }
.sp-agent-choice > span:nth-child(2) { min-width: 0px; flex: 1 1 0%; display: grid; gap: 2px; }
.sp-agent-choice-mark { color: var(--primary); font-size: 1rem; font-weight: 800; }
.sp-agent-empty { margin: 12px; color: var(--muted); text-align: center; font-size: 0.78rem; }
.sp-identity-footnote { margin: -2px 0px 0px; color: var(--muted); font-size: 0.68rem; line-height: 1.35; }
.sp-install.floating { position: absolute; left: 50%; top: clamp(8px, 2vw, 14px); transform: translateX(-50%); white-space: nowrap; z-index: 30; }
@media (prefers-reduced-motion: reduce) {
  .sp-sheet, .sp-modal-overlay { animation: auto ease 0s 1 normal none running none; }
  .sp-key:active, .sp-fab, .sp-round { transition: none; }
}
@media (display-mode: standalone) {
  .sp-page { padding: 0px; align-items: stretch; background: var(--surface); overflow: hidden; }
  .sp-shell { width: 100%; height: 100%; max-width: none; max-height: none; aspect-ratio: auto; border-radius: 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; box-shadow: none; }
}
.sp-dialer-head { display: flex; align-items: center; min-height: 34px; padding-right: 40px; flex-shrink: 0; }
.sp-gear { position: absolute; top: clamp(8px, 2vw, 14px); right: clamp(8px, 2vw, 14px); z-index: 25; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: var(--muted); background: rgba(16, 24, 40, 0.05); transition: color 120ms, background 120ms; }
.sp-gear:hover { color: var(--text); background: rgba(16, 24, 40, 0.1); }
.sp-regstatus { flex: 0 0 auto; align-self: center; display: inline-flex; align-items: center; gap: 7px; max-width: 100%; padding: 5px 12px; border-radius: 999px; font-size: 0.78rem; font-weight: 500; border: 1px solid var(--line); background: var(--surface-2); color: var(--muted); }
.sp-regstatus .sp-regtext { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-regdot { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: currentcolor; }
.sp-regstatus.ok { color: rgb(29, 158, 89); background: rgba(37, 176, 110, 0.1); border-color: rgba(37, 176, 110, 0.25); }
.sp-regstatus.wait { color: rgb(182, 116, 15); background: rgba(232, 145, 43, 0.12); border-color: rgba(232, 145, 43, 0.28); }
.sp-regstatus.wait .sp-regdot { animation: 1s ease-in-out 0s infinite normal none running sp-reg-pulse; }
.sp-regstatus.error { color: rgb(192, 57, 43); background: rgba(228, 86, 86, 0.1); border-color: rgba(228, 86, 86, 0.3); }
.sp-regfix { font-weight: 700; text-decoration: underline; margin-left: 2px; }
@keyframes sp-reg-pulse { 
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .sp-regstatus.wait .sp-regdot { animation: auto ease 0s 1 normal none running none; }
}
.sp-call-avatar { width: 96px; height: 96px; font-size: 2rem; }
.sp-call-name { font-size: 1.35rem; font-weight: 700; }
.sp-call-number { font-size: 0.95rem; }
.sp-call-status em { display: inline-block; padding: 4px 14px; border-radius: 999px; background: rgba(18, 183, 106, 0.12); color: rgb(18, 120, 75); margin-right: 0px; }
.sp-controls { grid-template-columns: repeat(3, 84px); justify-content: center; gap: 18px 14px; }
.sp-ctl > svg { width: 56px; height: 56px; padding: 16px; background: var(--card, #fff); border: 1.5px solid var(--line, #e4e7ec); box-sizing: border-box; }
.sp-ctl:hover > svg { border-color: var(--primary); color: var(--primary); }
.sp-ctl span { font-size: 0.78rem; }
.sp-round { width: 64px; height: 64px; }
.sp-dialer { gap: 14px; justify-content: center; }
.sp-keypad { flex: 0 0 auto; grid-template-rows: repeat(4, 72px); gap: 10px 26px; align-content: center; overflow: visible; }
.sp-key { height: 64px; width: 64px; max-width: 64px; max-height: 64px; }
.sp-key span { font-size: 1.55rem; }
.sp-key small { font-size: 0.6rem; }
.sp-display-input { font-size: 1.5rem; }
.sp-dialer { padding: 16px; }
.sp-dialer, .sp-call { width: 100%; max-width: 360px; margin-left: auto; margin-right: auto; }
.sp-tabs { max-width: 360px; margin-left: auto; margin-right: auto; width: 100%; }
.sp-fab { flex-shrink: 0; margin-bottom: 6px; }
.sp-keypad { min-height: 0px; }
.sp-callvia-wrap { position: relative; display: flex; justify-content: center; }
button.sp-callvia { background: transparent; border: 0px; cursor: pointer; }
.sp-callvia-caret { color: var(--muted); font-size: 0.7rem; margin-left: 2px; }
.sp-callvia-menu { position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: rgb(255, 255, 255); border: 1px solid var(--line); border-radius: 12px; box-shadow: rgba(15, 23, 42, 0.16) 0px 12px 28px; padding: 6px; z-index: 30; min-width: 220px; }
.sp-callvia-menu button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border: 0px; background: transparent; border-radius: 8px; cursor: pointer; font-size: 0.9rem; font-weight: 600; color: var(--text); }
.sp-callvia-menu button:hover { background: rgb(241, 246, 253); }
.sp-callvia-menu button.selected { background: rgb(232, 241, 254); color: rgb(15, 117, 232); }
.sp-shell[data-keypad="blue"] .sp-dialer { gap: clamp(8px, 2vh, 14px); }
.sp-shell[data-keypad="blue"] .sp-keypad-card { display: flex; flex-direction: column; gap: clamp(8px, 2vh, 14px); flex: 1 1 0%; min-height: 0px; padding: clamp(10px, 2.5vw, 16px) clamp(8px, 3vw, 18px); border: 1px solid var(--line); border-radius: 20px; background: var(--surface); box-shadow: rgba(15, 23, 42, 0.05) 0px 6px 20px; }
.sp-shell[data-keypad="blue"] .sp-display { gap: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.sp-shell[data-keypad="blue"] .sp-display-input { border-bottom: 0px; padding: 4px 34px 4px 0px; font-size: clamp(1.1rem, 4vw, 1.35rem); font-weight: 500; color: var(--text); }
.sp-shell[data-keypad="blue"] .sp-display-input::placeholder { font-size: 0.78rem; font-weight: 400; color: rgb(169, 180, 198); }
.sp-shell[data-keypad="blue"] .sp-display-flag { display: flex; align-items: center; flex-shrink: 0; margin-left: 16px; }
.sp-shell[data-keypad="blue"] .sp-key { border-radius: 12px; max-width: min(100%, clamp(56px, 20vw, 88px)); position: relative; gap: 0px; }
.sp-shell[data-keypad="blue"] .sp-key span { font-size: clamp(1.5rem, 6vw, 1.9rem); font-weight: 300; color: var(--primary-strong); line-height: 1.05; }
.sp-shell[data-keypad="blue"] .sp-key small { font-size: clamp(0.5rem, 2vw, 0.62rem); letter-spacing: 0.06em; text-transform: lowercase; color: rgb(154, 167, 186); }
.sp-shell[data-keypad="blue"] .sp-key::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: 4px; height: 1px; background: var(--line); transition: opacity 120ms; }
.sp-shell[data-keypad="blue"] .sp-key:hover { background: rgba(33, 114, 255, 0.07); }
.sp-shell[data-keypad="blue"] .sp-key:hover::after { opacity: 0; }
.sp-shell[data-keypad="blue"] .sp-key:active { background: rgba(33, 114, 255, 0.14); }
.sp-shell[data-keypad="blue"] .sp-fab { border-radius: 24px; --fab-claro: #3d8bff; --fab-escuro: var(--primary-strong); --fab-sombra: rgba(21, 86, 214, 0.36); --fab-halo: rgba(33, 114, 255, 0.45); }
.sp-shell[data-keypad="blue"] .sp-fab:disabled { background: rgb(219, 226, 236); box-shadow: none; }
html[data-theme="dark"] { --bg: #0b0d10; --surface: #14171c; --surface-2: #1b1f26; --text: #f2f5f9; --muted: #98a2b3; --line: rgba(255, 255, 255, 0.10); --primary: #4b93ff; --primary-strong: #2f7dfa; --success: #2bc47c; --warning: #f0a33f; --danger: #f06a6a; --ctl-idle: #cbd5e1; --ctl-idle-bg: rgba(255, 255, 255, 0.08); color-scheme: dark; }
html[data-theme="dark"] body { background: var(--bg); }
html[data-theme="dark"] .sp-page { background: var(--surface); }
html[data-theme="dark"] .sp-login { background: radial-gradient(circle at top left, rgba(75, 147, 255, 0.16), transparent 40%), var(--bg); }
html[data-theme="dark"] .sp-login-card, html[data-theme="dark"] .sp-modal { box-shadow: rgba(0, 0, 0, 0.55) 0px 24px 60px; }
html[data-theme="dark"] .sp-modal-overlay { background: rgba(0, 0, 0, 0.6); }
html[data-theme="dark"] .sp-push { box-shadow: rgba(0, 0, 0, 0.6) 0px 16px 40px; }
html[data-theme="dark"] .sp-call > .sp-sheet { box-shadow: rgba(0, 0, 0, 0.55) 0px 18px 44px; }
html[data-theme="dark"] .sp-callvia-menu { box-shadow: rgba(0, 0, 0, 0.5) 0px 16px 36px; }
html[data-theme="dark"] .sp-display-input::placeholder { color: rgb(107, 118, 136); }
html[data-theme="dark"] .sp-fab:disabled, html[data-theme="dark"] .sp-btn.primary:disabled { background: rgb(43, 50, 61); color: rgb(123, 134, 152); }
html[data-theme="dark"] .sp-key:hover { background: rgba(75, 147, 255, 0.12); }
html[data-theme="dark"] .sp-key:active { background: rgba(75, 147, 255, 0.2); }
html[data-theme="dark"] .sp-sheet-x:hover { background: rgba(255, 255, 255, 0.08); }
html[data-theme="dark"] .sp-btn.danger { background: rgba(240, 106, 106, 0.16); color: rgb(255, 155, 155); border-color: rgba(240, 106, 106, 0.28); }
html[data-theme="dark"] .sp-identity-warning strong { color: rgb(255, 192, 120); }
html[data-theme="dark"] .sp-shell[data-keypad="blue"] .sp-key span { color: rgb(106, 166, 255); }
html[data-theme="dark"] .sp-shell[data-keypad="blue"] .sp-key small { color: rgb(124, 136, 153); }
html[data-theme="dark"] .sp-shell[data-keypad="blue"] .sp-keypad-card { box-shadow: none; }
html[data-platform="android"] .sp-page, html[data-platform="android"] .sp-boot, html[data-platform="android"] .sp-login, html[data-platform="android"] .sp-crash { height: 100%; }
html[data-platform="android"] .sp-topbar { padding-top: 10px; }
html[data-platform="android"] .sp-dialer { padding: 12px 16px 10px; gap: 14px; }
html[data-platform="android"] .sp-key { max-width: min(100%, 96px); max-height: 96px; }
html[data-platform="android"] .sp-key span { font-size: 2.1rem; font-weight: 300; }
html[data-platform="android"] .sp-key small { font-size: 0.7rem; }
html[data-platform="android"] .sp-display-input { font-size: 1.5rem; }
html[data-platform="android"] .sp-fab { width: 68px; height: 68px; }
html[data-platform="android"] .sp-fab svg { width: 30px; height: 30px; }
html[data-platform="android"] .sp-callvia { padding: 9px 14px; }
html[data-platform="android"] .sp-callvia-label, html[data-platform="android"] .sp-callvia-number { font-size: 0.95rem; }
html[data-platform="android"] .sp-call { padding: 12px 16px 14px; justify-content: flex-start; min-height: 0px; overflow: hidden; }
html[data-platform="android"] .sp-call-id { padding: 18px 0px 6px; flex-shrink: 1; min-height: 0px; }
html[data-platform="android"] .sp-controls.grid8 { flex-shrink: 1; min-height: 0px; }
html[data-platform="android"] .sp-call-actions { flex-shrink: 0; }
html[data-platform="android"] .sp-call-avatar { width: 118px; height: 118px; font-size: 2.6rem; }
html[data-platform="android"] .sp-call-number { font-size: 1.15rem; }
html[data-platform="android"] .sp-call-status { font-size: 1rem; }
html[data-platform="android"] .sp-controls.grid8 { gap: 22px 10px; justify-items: center; margin-top: auto; margin-bottom: auto; }
html[data-platform="android"] .sp-controls.grid8 .sp-ctl { gap: 9px; }
html[data-platform="android"] .sp-controls.grid8 .sp-ctl > svg { width: 68px; height: 68px; padding: 20px; }
html[data-platform="android"] .sp-controls.grid8 .sp-ctl span { font-size: 0.86rem; }
html[data-platform="android"] .sp-round.big { width: 84px; height: 84px; }
html[data-platform="android"] .sp-round svg { width: 32px; height: 32px; }
html[data-platform="android"] .sp-call > .sp-sheet { bottom: 110px; font-size: 0.95rem; }
html[data-platform="android"] .sp-call > .sp-sheet .sp-search input { font-size: 0.95rem; }
html[data-platform="android"] .sp-call > .sp-sheet .sp-picker-list { max-height: 30vh; }
html[data-platform="android"] .sp-list.compact .sp-list-item, html[data-platform="android"] .sp-notif-scroll .sp-list-item { padding: 8px 10px; gap: 12px; }
html[data-platform="android"] .sp-list.compact .sp-avatar, html[data-platform="android"] .sp-notif-scroll .sp-avatar { width: 42px; height: 42px; border-radius: 50%; font-size: 0.9rem; }
html[data-platform="android"] .sp-list.compact .sp-list-main strong, html[data-platform="android"] .sp-notif-scroll .sp-list-main strong { font-size: 1.05rem; }
html[data-platform="android"] .sp-list.compact .sp-list-main small, html[data-platform="android"] .sp-notif-scroll .sp-list-main small { font-size: 0.85rem; }
html[data-platform="android"] .sp-list.compact .sp-when, html[data-platform="android"] .sp-notif-scroll .sp-when { font-size: 0.85rem; }
html[data-platform="android"] .sp-list.compact .sp-dirline svg, html[data-platform="android"] .sp-notif-scroll .sp-dirline svg { width: 14px; height: 14px; }
html[data-platform="android"] .sp-body { padding-bottom: 0px; }
html[data-platform="android"] .sp-nav { padding-top: 8px; gap: 2px; }
html[data-platform="android"] .sp-nav button { gap: 5px; padding-bottom: 9px; }
html[data-platform="android"] .sp-nav button svg { width: clamp(29px, 8.4vw, 38px); height: clamp(29px, 8.4vw, 38px); stroke-width: 1.7; }
html[data-platform="android"] .sp-nav button span { font-size: clamp(0.78rem, 3.5vw, 0.98rem); }
html[data-platform="android"] .sp-nav-badge { min-width: 19px; height: 19px; font-size: 0.68rem; margin-left: clamp(8px, 2.6vw, 14px); }
html[data-platform="android"] .sp-topbar-btn { width: clamp(38px, 10vw, 48px); height: clamp(38px, 10vw, 48px); }
html[data-platform="android"] .sp-topbar-btn svg, html[data-platform="android"] .sp-topbar-btn > svg { width: clamp(22px, 6vw, 28px); height: clamp(22px, 6vw, 28px); }
html[data-platform="android"] .sp-metrics { grid-template-columns: repeat(2, 1fr); gap: 8px; padding: 12px; }
html[data-platform="android"] .sp-metric { padding: 12px 8px; border-radius: 14px; }
html[data-platform="android"] .sp-metric strong { font-size: clamp(1.3rem, 6vw, 1.7rem); }
html[data-platform="android"] .sp-metric small { font-size: clamp(0.72rem, 3vw, 0.86rem); }
html[data-platform="android"] .sp-notif-title { margin: 14px 10px 4px; font-size: 0.78rem; }
html[data-platform="android"] .sp-channel-chip { padding: 8px 14px; font-size: clamp(0.78rem, 3.2vw, 0.92rem); }
html[data-platform="android"] .sp-chip-count { font-size: 0.72rem; }
html[data-platform="android"] .sp-key { max-width: min(100%, clamp(64px, 21vw, 104px)); max-height: clamp(64px, 21vw, 104px); }
html[data-platform="android"] .sp-key span { font-size: clamp(1.7rem, 8vw, 2.4rem); }
html[data-platform="android"] .sp-key small { font-size: clamp(0.6rem, 2.5vw, 0.78rem); }
html[data-platform="android"] .sp-display-input { font-size: clamp(1.25rem, 5.5vw, 1.8rem); }
html[data-platform="android"] .sp-fab { width: clamp(60px, 17vw, 78px); height: clamp(60px, 17vw, 78px); }
html[data-platform="android"] .sp-fab svg { width: clamp(26px, 7.5vw, 34px); height: clamp(26px, 7.5vw, 34px); }
html[data-platform="android"] .sp-modal { max-width: none; width: 100%; padding: 18px 16px; }
html[data-platform="android"] .sp-mode button { padding: 11px 8px; font-size: clamp(0.82rem, 3.4vw, 0.95rem); }
html[data-platform="android"] .sp-identity-footnote { font-size: clamp(0.72rem, 3vw, 0.84rem); }
@media (max-height: 660px) {
  html[data-platform="android"] .sp-call-avatar { width: 84px; height: 84px; font-size: 1.9rem; }
  html[data-platform="android"] .sp-call-id { padding: 8px 0px 4px; gap: 3px; }
  html[data-platform="android"] .sp-controls.grid8 { gap: 12px 8px; }
  html[data-platform="android"] .sp-controls.grid8 .sp-ctl > svg { width: 54px; height: 54px; padding: 15px; }
  html[data-platform="android"] .sp-controls.grid8 .sp-ctl span { font-size: 0.76rem; }
  html[data-platform="android"] .sp-round.big { width: 68px; height: 68px; }
  html[data-platform="android"] .sp-call-actions { padding-top: 8px; }
}
html[data-platform="ios"] .sp-topbar { padding-top: max(env(safe-area-inset-top), 14px); padding-left: max(env(safe-area-inset-left), 14px); padding-right: max(env(safe-area-inset-right), 14px); }
html[data-platform="ios"] .sp-nav { padding-bottom: calc(6px + env(safe-area-inset-bottom)); }
html[data-platform="ios"] .sp-call { padding-top: calc(12px + env(safe-area-inset-top)); padding-bottom: calc(14px + env(safe-area-inset-bottom)); min-height: 0px; overflow: hidden; }
html[data-platform="ios"] .sp-boot, html[data-platform="ios"] .sp-login { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
html[data-platform="ios"] .sp-push { margin-top: calc(8px + env(safe-area-inset-top)); }
html[data-platform="ios"] .sp-call > .sp-sheet { bottom: calc(110px + env(safe-area-inset-bottom)); }
html[data-platform="ios"] .sp-call > .sp-sheet .sp-picker-list { max-height: 30vh; }
html[data-platform="ios"] .sp-key { max-width: min(100%, 96px); max-height: 96px; }
html[data-platform="ios"] .sp-key span { font-size: 2.1rem; font-weight: 300; }
html[data-platform="ios"] .sp-key small { font-size: 0.7rem; }
html[data-platform="ios"] .sp-display-input { font-size: 1.5rem; }
html[data-platform="ios"] .sp-fab { width: 68px; height: 68px; }
html[data-platform="ios"] .sp-fab svg { width: 30px; height: 30px; }
html[data-platform="ios"] .sp-controls.grid8 { gap: 22px 10px; margin-top: auto; margin-bottom: auto; }
html[data-platform="ios"] .sp-controls.grid8 .sp-ctl > svg { width: 68px; height: 68px; padding: 20px; }
html[data-platform="ios"] .sp-controls.grid8 .sp-ctl span { font-size: 0.86rem; }
html[data-platform="ios"] .sp-call-id { flex-shrink: 1; min-height: 0px; }
html[data-platform="ios"] .sp-controls.grid8 { flex-shrink: 1; min-height: 0px; }
html[data-platform="ios"] .sp-call-actions { flex-shrink: 0; }
html[data-platform="ios"] .sp-round.big { width: 84px; height: 84px; }
html[data-platform="ios"] .sp-round svg { width: 32px; height: 32px; }
html[data-platform="ios"] .sp-nav button svg { width: clamp(26px, 7vw, 32px); height: clamp(26px, 7vw, 32px); }
html[data-platform="ios"] .sp-nav button span { font-size: clamp(0.72rem, 3.2vw, 0.9rem); }
html[data-platform="ios"] .sp-list.compact .sp-list-item, html[data-platform="ios"] .sp-notif-scroll .sp-list-item { padding: 8px 10px; gap: 12px; }
html[data-platform="ios"] .sp-list.compact .sp-avatar, html[data-platform="ios"] .sp-notif-scroll .sp-avatar { width: 42px; height: 42px; border-radius: 50%; font-size: 0.9rem; }
html[data-platform="ios"] .sp-list.compact .sp-list-main strong, html[data-platform="ios"] .sp-notif-scroll .sp-list-main strong { font-size: 1.02rem; }
html[data-platform="ios"] .sp-metrics { grid-template-columns: repeat(2, 1fr); }
@media (max-height: 620px) {
  html[data-platform="ios"] .sp-call-avatar { width: 84px; height: 84px; font-size: 1.9rem; }
  html[data-platform="ios"] .sp-controls.grid8 .sp-ctl > svg { width: 54px; height: 54px; padding: 15px; }
  html[data-platform="ios"] .sp-round.big { width: 68px; height: 68px; }
  html[data-platform="ios"] .sp-key { max-width: 64px; max-height: 60px; }
}
:root { --primary: #2172ff; --primary-strong: #1556d6; }
html[data-theme="dark"] :root, html[data-theme="dark"] { --primary: #4b93ff; }
.sp-page { height: 100dvh; width: 100%; padding: 0px; background: var(--surface); }
.sp-shell { width: 100%; max-width: none; height: 100%; max-height: none; aspect-ratio: auto; border: 0px; border-radius: 0px; box-shadow: none; }
.sp-boot { height: 100dvh; display: flex; flex-direction: column; gap: 14px; align-items: center; justify-content: center; background: var(--bg); color: var(--muted); }
.sp-boot-logo { display: flex; justify-content: center; color: var(--primary); }
.sp-login { height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 22px; background: radial-gradient(circle at left top, rgba(33, 114, 255, 0.1), transparent 34%), linear-gradient(rgb(251, 253, 255) 0%, rgb(238, 244, 251) 100%); }
.sp-login-card { width: min(100%, 340px); background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 24px 20px; box-shadow: rgba(15, 23, 42, 0.14) 0px 24px 60px; text-align: center; }
.sp-login-card form { display: flex; flex-direction: column; gap: 11px; margin-top: 16px; text-align: left; }
.sp-login-sub { margin: 10px 0px 0px; color: var(--muted); font-size: 0.82rem; }
.sp-login-error { margin: 0px; color: var(--danger); font-size: 0.8rem; }
.sp-login-foot { margin: 14px 0px 0px; color: var(--muted); font-size: 0.72rem; line-height: 1.5; }
.sp-login-aviso { margin: 0px; padding: 8px 10px; border-radius: 8px; background: rgba(124, 45, 18, 0.082); color: rgb(194, 65, 12); font-size: 0.72rem; line-height: 1.45; }
.sp-login-aviso code { font-size: 0.9em; }
html[data-theme="dark"] .sp-login-aviso { background: rgba(249, 115, 22, 0.125); color: rgb(251, 146, 60); }
.sp-btn.sp-btn-link { margin-top: 8px; background: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; color: var(--muted); font-size: 0.76rem; text-decoration: underline; }
.sp-btn.sp-btn-link:hover:not(:disabled) { color: var(--primary); }
.sp-btn.block { width: 100%; padding: 11px; }
.sp-topbar { position: relative; flex: 0 0 auto; display: flex; align-items: center; gap: 9px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--surface); }
.sp-brand { display: flex; align-items: center; gap: 7px; color: var(--primary); }
.sp-call-brand { display: flex; align-items: center; gap: 7px; color: var(--primary); }
.sp-boot-logo { display: flex; align-items: center; justify-content: center; gap: 10px; }
.sp-topbar-space { flex: 1 1 0%; }
.sp-topbar-btn { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; color: var(--muted); }
.sp-topbar-btn:hover:not(:disabled) { background: rgba(33, 114, 255, 0.08); color: var(--primary); }
.sp-topbar-btn:disabled { opacity: 0.4; }
.sp-regstatus { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; margin: 8px 12px 0px; padding: 7px 10px; border-radius: 10px; font-size: 0.76rem; background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); }
.sp-regstatus.error { background: rgba(228, 86, 86, 0.09); border-color: rgba(228, 86, 86, 0.2); color: rgb(169, 52, 52); }
.sp-regdot { width: 7px; height: 7px; border-radius: 50%; background: currentcolor; flex: 0 0 auto; }
.sp-regtext { flex: 1 1 0%; text-align: left; }
.sp-regfix { font-weight: 600; text-decoration: underline; }
.sp-home { flex: 1 1 0%; min-height: 0px; display: flex; flex-direction: column; padding: clamp(10px, 2.5vw, 16px); gap: 10px; }
.sp-search.big { padding: 11px 14px; }
.sp-favorites { flex: 0 0 auto; display: flex; gap: 12px; padding-bottom: 12px; overflow-x: auto; border-bottom: 1px solid var(--line); }
.sp-favorite { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 62px; flex: 0 0 auto; }
.sp-favorite:disabled { opacity: 0.45; }
.sp-favorite-avatar { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 1rem; color: rgb(255, 255, 255); }
.sp-favorite-name { font-size: 0.72rem; color: var(--muted); max-width: 62px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-dirline { display: inline-flex; align-items: center; gap: 5px; }
.sp-dirline svg { width: 13px; height: 13px; flex: 0 0 auto; }
.sp-dirline.incoming svg, .sp-dirline.outgoing svg { color: var(--success); }
.sp-dirline.missed, .sp-dirline.missed svg { color: var(--danger); }
.sp-display-input { font-size: clamp(1.05rem, 3.4vw, 1.3rem); font-weight: 400; }
@media (max-height: 640px) {
  .sp-dialer { padding: 8px 10px 10px; gap: 8px; }
  .sp-keypad { gap: 4px clamp(8px, 4vw, 22px); }
  .sp-key { max-width: min(100%, 58px); max-height: 52px; }
  .sp-key span { font-size: 1.25rem; }
  .sp-key small { font-size: 0.48rem; min-height: 0.7em; }
  .sp-display-input { font-size: 1.05rem; padding-top: 6px; padding-bottom: 6px; }
  .sp-fab { width: 50px; height: 50px; }
  .sp-fab svg { width: 21px; height: 21px; }
  .sp-callvia { padding: 5px 10px; }
  .sp-nav button { padding: 6px 2px 7px; }
  .sp-nav button svg { width: 17px; height: 17px; }
  .sp-nav button span { font-size: 0.56rem; }
  .sp-shell[data-keypad="blue"] .sp-keypad-card { padding: 8px 10px; border-radius: 16px; gap: 8px; }
  .sp-shell[data-keypad="blue"] .sp-key span { font-size: 1.3rem; }
}
@media (max-width: 360px) {
  .sp-shell[data-keypad="blue"] .sp-keypad-card { padding-left: 6px; padding-right: 6px; }
  .sp-keypad { gap: 6px 10px; }
  .sp-callvia-label { display: none; }
}
.sp-notif { flex: 1 1 0%; min-height: 0px; display: flex; flex-direction: column; }
.sp-notif-scroll { flex: 1 1 0%; min-height: 0px; overflow-y: auto; padding: 0px clamp(6px, 2vw, 12px) 10px; display: flex; flex-direction: column; gap: 2px; }
.sp-notif-title { margin: 12px 4px 4px; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.sp-notif-title-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.sp-notif-title-row .sp-notif-title { flex: 1 1 0%; }
.sp-notif-limpar { flex: 0 0 auto; margin-right: 4px; font-size: 0.7rem; font-weight: 600; color: var(--muted); background: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; padding: 2px 4px; border-radius: 6px; }
.sp-notif-limpar:hover { color: var(--primary); background: rgba(33, 114, 255, 0.08); }
.sp-metrics { flex: 0 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: clamp(10px, 2.5vw, 14px); }
.sp-metric { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 9px 4px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); }
.sp-metric strong { font-size: 1.1rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text); }
.sp-metric small { font-size: 0.6rem; color: var(--muted); text-align: center; line-height: 1.2; }
.sp-metric.alert { background: rgba(228, 86, 86, 0.08); border-color: rgba(228, 86, 86, 0.22); }
.sp-metric.alert strong { color: var(--danger); }
.sp-when.late { color: var(--danger); font-weight: 600; }
.sp-list.compact, .sp-notif-scroll { gap: 0px; }
.sp-list.compact .sp-list-item, .sp-notif-scroll .sp-list-item { gap: 8px; padding: 3px 8px; border-radius: 8px; }
.sp-list.compact .sp-avatar, .sp-notif-scroll .sp-avatar { width: 24px; height: 24px; border-radius: 7px; font-size: 0.58rem; }
.sp-list.compact .sp-avatar svg, .sp-notif-scroll .sp-avatar svg { width: 14px; height: 14px; }
.sp-list.compact .sp-list-main, .sp-notif-scroll .sp-list-main { gap: 0px; }
.sp-list.compact .sp-list-main strong, .sp-notif-scroll .sp-list-main strong { font-size: 0.79rem; line-height: 1.2; }
.sp-list.compact .sp-list-main small, .sp-notif-scroll .sp-list-main small { font-size: 0.65rem; line-height: 1.2; }
.sp-list.compact .sp-when, .sp-notif-scroll .sp-when { font-size: 0.66rem; }
.sp-list.compact .sp-dirline svg, .sp-notif-scroll .sp-dirline svg { width: 11px; height: 11px; }
.sp-metrics { padding: 8px 10px; gap: 5px; }
.sp-metric { padding: 6px 3px; border-radius: 11px; }
.sp-metric strong { font-size: 0.95rem; }
.sp-metric small { font-size: 0.55rem; }
.sp-notif-title { margin: 9px 5px 2px; font-size: 0.65rem; }
.sp-metric { cursor: pointer; transition: background 120ms, border-color 120ms; }
.sp-metric:hover { background: rgba(33, 114, 255, 0.08); border-color: rgba(33, 114, 255, 0.25); }
.sp-metric.alert:hover { background: rgba(228, 86, 86, 0.14); }
.sp-chip-count { margin-left: 5px; padding: 0px 4px; border-radius: 999px; background: rgba(16, 24, 40, 0.09); font-size: 0.62rem; font-weight: 700; }
.sp-channel-chip.active .sp-chip-count { background: rgba(33, 114, 255, 0.2); }
html[data-theme="dark"] .sp-chip-count { background: rgba(255, 255, 255, 0.14); }
.sp-powerdialer { flex: 1 1 0%; min-height: 0px; display: flex; flex-direction: column; padding: clamp(10px, 2.5vw, 16px); gap: 10px; }
.sp-pd-head { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; }
.sp-pd-info { flex: 1 1 0%; display: flex; flex-direction: column; }
.sp-pd-info strong { font-size: 0.85rem; }
.sp-pd-info small { color: var(--muted); font-size: 0.72rem; }
.sp-pd-head .sp-btn { padding: 7px 14px; font-size: 0.8rem; }
.sp-pd-listas { flex: 0 1 auto; min-height: 0px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.sp-pd-lista { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; padding: 7px 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); text-align: left; }
.sp-pd-lista:hover { border-color: var(--primary); }
.sp-pd-lista.ativa { background: rgba(33, 114, 255, 0.1); border-color: rgba(33, 114, 255, 0.28); }
.sp-pd-lista-nome { font-size: 0.84rem; font-weight: 600; color: var(--text); }
.sp-pd-lista-meta { font-size: 0.7rem; color: var(--muted); }
.sp-leads .sp-empty { font-size: 0.68rem; line-height: 1.35; padding: 16px 12px; }
.sp-pd-gap { flex: 0 0 auto; text-align: center; padding: 7px; border-radius: 10px; background: rgba(232, 145, 43, 0.12); color: rgb(138, 90, 18); font-size: 0.8rem; font-weight: 600; }
html[data-theme="dark"] .sp-pd-gap { color: rgb(255, 192, 120); }
.sp-pd-atual { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 14px; background: rgba(33, 114, 255, 0.09); border: 1px solid rgba(33, 114, 255, 0.2); }
.sp-list-item.sp-pd-now { background: rgba(33, 114, 255, 0.08); }
.sp-avatar.sp-pd-feito { opacity: 0.55; }
.sp-topbar-btn.active { background: rgba(33, 114, 255, 0.12); color: var(--primary); }
.sp-topbar-btn { position: relative; }
.sp-topbar-live { position: absolute; top: 4px; right: 4px; width: 8px; height: 8px; border-radius: 50%; background: var(--success); animation: 1.4s ease-in-out 0s infinite normal none running sp-live; }
@keyframes sp-live { 
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
@media (prefers-reduced-motion: reduce) {
  .sp-topbar-live { animation: auto ease 0s 1 normal none running none; }
}
.sp-reuniao { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0px 8px; margin-right: 2px; border-radius: 999px; white-space: nowrap; font-size: 0.68rem; font-weight: 600; color: var(--success); background: linear-gradient(135deg, rgba(37, 176, 110, 0.16), rgba(33, 114, 255, 0.1)); border: 1px solid rgba(37, 176, 110, 0.3); }
.sp-reuniao:hover { background: linear-gradient(135deg, rgba(37, 176, 110, 0.24), rgba(33, 114, 255, 0.14)); }
.sp-reuniao-ponto { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; background: var(--success); animation: 1.4s ease-in-out 0s infinite normal none running sp-live; }
@media (prefers-reduced-motion: reduce) {
  .sp-reuniao-ponto { animation: auto ease 0s 1 normal none running none; }
}
.sp-jornada-selo { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 22px; padding: 3px 10px; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.01em; color: rgb(162, 100, 10); background: linear-gradient(90deg, rgba(232, 145, 43, 0.2), rgba(33, 114, 255, 0.1)); border-bottom: 1px solid rgba(232, 145, 43, 0.3); }
.sp-jornada-selo:hover { background: linear-gradient(90deg, rgba(232, 145, 43, 0.3), rgba(33, 114, 255, 0.16)); }
.sp-jornada-ponto { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; background: var(--warning); animation: 1.4s ease-in-out 0s infinite normal none running sp-live; }
@media (prefers-reduced-motion: reduce) {
  .sp-jornada-ponto { animation: auto ease 0s 1 normal none running none; }
}
html[data-theme="dark"] .sp-jornada-selo { color: rgb(243, 183, 101); }
.sp-jornada-overlay { z-index: 60; }
.sp-modal.sp-jornada-modal { max-height: calc(100% - 8px); }
.sp-jornada-titulo { font-size: 1rem; }
.sp-jornada-corpo { display: flex; flex-direction: column; gap: 8px; min-height: 0px; overflow-y: auto; }
.sp-jornada-texto { margin: 0px; font-size: 0.84rem; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.sp-jornada-sub { font-size: 0.78rem; color: var(--muted); }
.sp-jornada-lista { margin: 0px; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; font-size: 0.8rem; line-height: 1.4; }
.sp-jornada-lista.nunca { color: var(--muted); }
.sp-jornada-nota { margin: 0px; font-size: 0.74rem; line-height: 1.4; color: var(--muted); }
.sp-jornada-erro { margin: 0px; font-size: 0.78rem; color: rgb(192, 57, 43); }
.sp-push.sp-push-task { border-color: rgba(232, 145, 43, 0.35); }
.sp-modal.sp-modal-agenda { width: min(100%, 420px); max-height: min(78vh, 560px); }
.sp-modal-agenda .sp-list { flex: 1 1 0%; min-height: 200px; overflow-y: auto; }
.sp-modal-agenda .sp-list-item { align-items: flex-start; padding: 9px; }
.sp-modal-agenda .sp-list-main small { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.35; }
.sp-modal-agenda .sp-when { padding-top: 2px; }
.sp-task-note { padding: 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); font-size: 0.82rem; line-height: 1.55; white-space: pre-wrap; user-select: text; max-height: 220px; overflow-y: auto; }
.sp-channels.fixed { overflow-x: visible; display: grid; grid-template-columns: repeat(4, 1fr); }
.sp-channel-chip.icon { justify-content: center; padding: 7px 4px; gap: 4px; }
.sp-channel-chip.icon svg { width: 17px; height: 17px; }
.sp-channel-chip.icon.missed.active { background: rgba(228, 86, 86, 0.12); border-color: rgba(228, 86, 86, 0.28); color: var(--danger); }
.sp-channel-chip.icon.missed.active .sp-chip-count { background: rgba(228, 86, 86, 0.22); }
.sp-presence-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px; vertical-align: 1px; }
.sp-nyi { margin: 8px 12px; padding: 11px 12px; border-radius: 12px; background: rgba(232, 145, 43, 0.1); border: 1px solid rgba(232, 145, 43, 0.22); font-size: 0.78rem; line-height: 1.5; color: var(--text); }
.sp-nyi strong { display: block; margin-bottom: 3px; font-size: 0.82rem; }
.sp-crash { height: 100dvh; display: flex; flex-direction: column; gap: 10px; align-items: center; justify-content: center; padding: 24px; text-align: center; background: var(--bg); color: var(--text); }
.sp-crash strong { font-size: 1rem; }
.sp-crash p { margin: 0px; color: var(--muted); font-size: 0.82rem; max-width: 320px; line-height: 1.5; }
.sp-crash pre { max-width: 100%; max-height: 180px; overflow: auto; margin: 0px; padding: 10px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); font-size: 0.7rem; text-align: left; white-space: pre-wrap; user-select: text; }
.sp-global-error { position: fixed; left: 10px; right: 10px; bottom: 10px; z-index: 999; padding: 8px 12px; border-radius: 12px; background: rgba(228, 86, 86, 0.95); color: rgb(255, 255, 255); font-size: 0.74rem; cursor: pointer; box-shadow: rgba(15, 23, 42, 0.28) 0px 10px 26px; }
.sp-channels { flex: 0 0 auto; display: flex; gap: 6px; padding: 0px clamp(10px, 2.5vw, 16px) 2px; overflow-x: auto; }
.sp-channel-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); font-size: 0.74rem; white-space: nowrap; flex: 0 0 auto; }
.sp-channel-chip.active { background: rgba(33, 114, 255, 0.1); border-color: rgba(33, 114, 255, 0.22); color: var(--primary-strong); font-weight: 600; }
.sp-contacts > .sp-search { padding: 3px 10px; border-radius: 11px; }
.sp-contacts > .sp-search > svg { width: 16px; height: 16px; }
.sp-contacts > .sp-search input { font-size: 0.82rem; }
.sp-contacts > .sp-search .sp-icon.acao { width: 24px; height: 24px; border-radius: 8px; background: var(--primary); color: rgb(255, 255, 255); }
.sp-contacts > .sp-search .sp-icon.acao svg { width: 14px; height: 14px; }
.sp-contacts > .sp-search .sp-icon.acao:hover { background: var(--primary-strong); color: rgb(255, 255, 255); }
html[data-platform="android"] .sp-contacts > .sp-search, html[data-platform="ios"] .sp-contacts > .sp-search { min-height: 44px; }
.sp-thread-head { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; padding: 0px clamp(10px, 2.5vw, 16px) 10px; border-bottom: 1px solid var(--line); }
.sp-nav { grid-template-columns: repeat(5, 1fr); }
.sp-nav button { position: relative; padding-left: 2px; padding-right: 2px; }
.sp-nav button span { font-size: 0.62rem; }
.sp-nav-badge { position: absolute; top: 4px; left: 50%; margin-left: 6px; min-width: 15px; height: 15px; padding: 0px 4px; border-radius: 999px; background: var(--danger); color: rgb(255, 255, 255); font-size: 0.6rem; font-weight: 700; display: grid; place-items: center; }
.sp-controls.grid8 { grid-template-columns: repeat(4, 1fr); gap: clamp(6px, 1.6vh, 12px) 6px; }
.sp-controls.grid8 .sp-ctl > svg { width: clamp(40px, 11vw, 50px); height: clamp(40px, 11vw, 50px); padding: clamp(11px, 3vw, 14px); }
.sp-controls.grid8 .sp-ctl span { font-size: 0.66rem; }
.sp-call { overflow-y: auto; }
.sp-call-actions { flex: 0 0 auto; margin-top: auto; position: sticky; bottom: 0px; z-index: 5; padding-bottom: 4px; background: linear-gradient(to bottom, transparent, var(--surface) 38%); }
.sp-round { flex: 0 0 auto; aspect-ratio: 1 / 1; }
.sp-fab { flex: 0 0 auto; aspect-ratio: 1 / 1; }
.sp-call { position: relative; }
.sp-call > .sp-sheet { position: absolute; left: 10px; right: 10px; bottom: 88px; z-index: 30; max-height: min(60%, 380px); overflow-y: auto; background: var(--surface); box-shadow: rgba(15, 23, 42, 0.22) 0px 18px 44px; font-size: 0.86rem; padding: 11px; gap: 8px; }
.sp-call > .sp-sheet.dtmf { max-height: none; overflow: visible; }
.sp-call > .sp-sheet .sp-sheet-head strong { font-size: 0.88rem; }
.sp-call > .sp-sheet .sp-search { padding: 6px 10px; border-radius: 11px; font-size: 0.82rem; }
.sp-call > .sp-sheet .sp-search input { font-size: 0.82rem; min-width: 0px; }
.sp-call > .sp-sheet .sp-list { max-height: 170px; }
.sp-call > .sp-sheet .sp-empty { padding: 12px 8px; font-size: 0.78rem; }
.sp-call > .sp-sheet .sp-field { font-size: 0.76rem; }
.sp-call > .sp-sheet .sp-btn { padding: 7px 12px; font-size: 0.8rem; }
.sp-call > .sp-sheet .sp-btn.small { padding: 6px 10px; white-space: nowrap; flex: 0 0 auto; }
.sp-picker-list { max-height: 168px; overflow-y: auto; }
.sp-call > .sp-sheet .sp-picker-list { max-height: 150px; }
.sp-list-item.sp-picker-on:not(:disabled) { background: var(--surface-2); box-shadow: rgba(33, 114, 255, 0.35) 0px 0px 0px 1px inset; }
.sp-picker-list .sp-list-item:disabled { opacity: 0.5; }
.sp-picker-list .sp-list-item:disabled:hover { background: transparent; }
.sp-conf-participantes { padding: 2px 2px 0px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.sp-field { display: flex; flex-direction: column; gap: 5px; font-size: 0.78rem; color: var(--muted); }
.sp-field input, .sp-field select { padding: 9px 11px; border-radius: 11px; border: 1px solid var(--line); background: var(--surface); color: var(--text); outline: 0px; font-size: 0.88rem; }
.sp-field input:focus, .sp-field select:focus { border-color: rgba(33, 114, 255, 0.45); }
.sp-toggle { display: flex; align-items: center; gap: 9px; font-size: 0.85rem; color: var(--text); cursor: pointer; }
.sp-toggle input { width: 16px; height: 16px; accent-color: var(--primary); }
.sp-blf-toggle { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 9px; color: var(--muted); }
.sp-blf-toggle:hover { background: var(--ctl-idle-bg); color: var(--text); }
.sp-blf-toggle[aria-pressed="true"] { color: var(--primary); background: var(--ctl-idle-bg); }
html[data-janela="blf"], html[data-janela="blf"] body { background: transparent; overflow: hidden; }
html[data-janela="blf"] #root { position: relative; overflow: hidden; }
.sp-blf-janela { position: absolute; top: 8px; bottom: 8px; right: 8px; width: 300px; display: flex; flex-direction: column; gap: 8px; padding: 14px 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: rgba(15, 23, 42, 0.18) 0px 10px 30px; overflow: hidden; transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1); transform: translateX(0px); }
.sp-blf-janela.sp-blf-fora, .sp-blf-janela.sp-blf-saindo { transform: translateX(calc(100% + 16px)); }
.sp-blf-janela.sp-blf-entrando { transform: translateX(0px); }
.sp-blf-janela.sp-blf-fora { transition: none; }
html[data-lado="direita"] .sp-blf-janela { right: auto; left: 8px; }
html[data-lado="direita"] .sp-blf-janela.sp-blf-fora, html[data-lado="direita"] .sp-blf-janela.sp-blf-saindo { transform: translateX(calc(-100% - 16px)); }
@media (prefers-reduced-motion: reduce) {
  .sp-blf-janela { transition: none; }
}
.sp-blf-head { flex: 0 0 auto; padding: 0px 6px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; color: var(--primary); }
.sp-blf-aviso { flex: 0 0 auto; margin: 4px 6px 0px; padding: 5px 7px; border-radius: 6px; background: color-mix(in srgb, var(--primary) 8%, transparent); color: var(--muted); font-size: 0.64rem; line-height: 1.3; }
.sp-blf-body { flex: 1 1 auto; min-height: 0px; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 10px; padding-right: 4px; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--muted) 45%, transparent) transparent; }
.sp-blf-group { display: flex; flex-direction: column; gap: 2px; }
.sp-blf-group-head { position: sticky; top: 0px; z-index: 1; background: var(--surface); padding: 6px 6px 4px; font-size: 0.64rem; font-weight: 700; letter-spacing: 0.06em; }
.sp-blf-member { display: flex; align-items: center; gap: 8px; width: 100%; padding: 4px 6px; border-radius: 8px; background: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.sp-blf-member:hover:not(:disabled) { background: var(--surface-2); }
.sp-blf-member:active:not(:disabled) { transform: scale(0.985); }
.sp-blf-member:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.sp-blf-member:disabled { cursor: default; opacity: 0.55; }
.sp-blf-ligar { margin-left: auto; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 999px; color: var(--primary); opacity: 0; transition: opacity 120ms; }
.sp-blf-member:hover:not(:disabled) .sp-blf-ligar, .sp-blf-member:focus-visible .sp-blf-ligar { opacity: 1; }
.sp-blf-member:disabled .sp-blf-ligar { display: none; }
.sp-blf-member strong { font-size: 0.78rem; font-weight: 600; line-height: 1.2; }
.sp-blf-member small { font-size: 0.66rem; line-height: 1.2; }
.sp-blf-avatar { width: 26px; height: 26px; min-width: 26px; font-size: 0.6rem; background-size: cover; background-position: center center; }
.sp-callvia-wrap { position: relative; flex: 0 0 auto; align-self: center; }
.sp-callvia { border-radius: 999px; padding: 6px 12px; background: var(--surface-2); border: 1px solid var(--line); }
.sp-callvia-caret { color: var(--muted); font-size: 0.7rem; }
.sp-callvia-menu { position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); min-width: 210px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; z-index: 20; box-shadow: rgba(15, 23, 42, 0.18) 0px 16px 36px; }
.sp-callvia-menu button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 12px; font-size: 0.84rem; }
.sp-callvia-menu button:hover { background: var(--surface-2); }
.sp-callvia-menu button.selected { color: var(--primary); font-weight: 600; }
.sp-identity-title { display: flex; align-items: center; gap: 10px; }
.sp-identity-title-icon { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--ctl-idle-bg); color: var(--muted); }
.sp-identity-title span { display: flex; flex-direction: column; }
.sp-identity-title small { color: var(--muted); font-size: 0.72rem; }
.sp-identity-current { display: flex; align-items: center; gap: 10px; padding: 11px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); }
.sp-identity-current-copy { flex: 1 1 0%; display: flex; flex-direction: column; }
.sp-identity-current-copy small { color: var(--muted); font-size: 0.76rem; }
.sp-identity-secure { font-size: 0.68rem; color: var(--success); font-weight: 600; }
.sp-agent-avatar { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: rgb(255, 255, 255); font-weight: 700; font-size: 0.8rem; }
.sp-identity-warning { padding: 12px; border-radius: 14px; background: rgba(232, 145, 43, 0.1); display: flex; flex-direction: column; gap: 4px; }
.sp-identity-warning strong { font-size: 0.85rem; color: rgb(138, 90, 18); }
.sp-identity-warning span { font-size: 0.78rem; color: var(--muted); line-height: 1.5; }
.sp-identity-footnote { margin: 0px; font-size: 0.72rem; color: var(--muted); line-height: 1.6; }
.sp-agent-admin-picker { display: flex; flex-direction: column; gap: 10px; }
.sp-agent-admin-note { display: flex; flex-direction: column; gap: 4px; }
.sp-agent-admin-note strong { font-size: 0.85rem; }
.sp-agent-admin-note span { font-size: 0.78rem; color: var(--muted); line-height: 1.5; }
.sp-agent-search { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 11px; background: var(--surface-2); border: 1px solid var(--line); color: var(--muted); }
.sp-agent-search input { flex: 1 1 0%; min-width: 0px; border: 0px; outline: 0px; background: transparent; color: var(--text); }
.sp-agent-choice-list { display: flex; flex-direction: column; gap: 4px; max-height: 210px; overflow-y: auto; }
.sp-agent-choice { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 12px; text-align: left; }
.sp-agent-choice:hover { background: var(--surface-2); }
.sp-agent-choice.selected { background: rgba(33, 114, 255, 0.1); }
.sp-agent-choice span:nth-child(2) { flex: 1 1 0%; display: flex; flex-direction: column; }
.sp-agent-choice small { color: var(--muted); font-size: 0.72rem; }
.sp-agent-choice-mark { color: var(--muted); }
.sp-agent-empty { color: var(--muted); font-size: 0.78rem; text-align: center; padding: 14px; margin: 0px; }
.sp-leadsline { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); color: var(--text); cursor: pointer; transition: background 120ms, border-color 120ms; }
.sp-leadsline:hover { background: rgba(33, 114, 255, 0.07); border-color: rgba(33, 114, 255, 0.28); }
.sp-leadsline-count { font-size: 1rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.sp-leadsline-label { font-size: 0.8rem; color: var(--muted); }
.sp-leadsline-space { flex: 1 1 0%; }
.sp-leadsline-icon { display: grid; place-items: center; color: var(--primary); }
.sp-leadsline-icon svg { width: 20px; height: 20px; }
@media (max-height: 640px) and (pointer: fine) {
  .sp-leadsline { min-height: 34px; padding: 3px 10px; }
  .sp-leadsline-count { font-size: 0.88rem; }
}
.sp-leads { flex: 1 1 0%; min-height: 0px; display: flex; flex-direction: column; }
.sp-leads .sp-thread-head { padding-top: 10px; }
.sp-leads .sp-identity-footnote { padding: 8px clamp(10px, 2.5vw, 16px) 0px; }
.sp-leads > .sp-list { padding: 6px clamp(6px, 2vw, 12px) 8px; }
.sp-powerdialer .sp-identity-footnote { margin-top: -2px; }
.sp-presenca-ancora { position: static; display: inline-flex; }
.sp-dot-btn { display: inline-flex; align-items: center; gap: 5px; padding: 3px 5px; border-radius: 999px; }
.sp-dot-btn:hover { background: rgba(33, 114, 255, 0.08); }
.sp-dot-contagem { font-size: 0.66rem; font-weight: 600; color: var(--warning); font-variant-numeric: tabular-nums; }
.sp-presenca-menu { position: absolute; top: calc(100% + 6px); left: 8px; z-index: 80; min-width: 232px; max-width: calc(-16px + 100vw); padding: 4px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); box-shadow: rgba(15, 23, 42, 0.22) 0px 18px 44px; display: flex; flex-direction: column; }
.sp-presenca-grupo { display: block; padding: 8px 10px 4px; font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.sp-presenca-item { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 10px; border-radius: 10px; text-align: left; color: var(--text); font-size: 0.84rem; }
.sp-presenca-item:hover:not(:disabled) { background: var(--surface-2); }
.sp-presenca-item:disabled { opacity: 0.5; }
.sp-presenca-item.ativo { background: rgba(33, 114, 255, 0.08); font-weight: 600; }
.sp-presenca-simbolo { flex: 0 0 auto; width: 18px; text-align: center; font-size: 0.9rem; }
.sp-presenca-rotulo { flex: 1 1 0%; min-width: 0px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-presenca-check { flex: 0 0 auto; color: var(--success); font-weight: 700; }
.sp-presenca-contagem { flex: 0 0 auto; padding: 1px 7px; border-radius: 999px; background: rgba(232, 145, 43, 0.14); color: rgb(154, 91, 18); font-size: 0.7rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.sp-presenca-pausar { margin-left: 5px; font-size: 0.62em; opacity: 0.75; letter-spacing: -1px; }
.sp-presenca-recusa { margin: 4px 6px 2px; padding: 7px 9px; border-radius: 9px; background: rgba(214, 106, 21, 0.1); color: var(--warning); font-size: 0.72rem; line-height: 1.35; }
.sp-presenca-sair { margin-top: 4px; padding: 9px; border-top: 1px solid var(--line); color: var(--danger); font-size: 0.84rem; font-weight: 600; }
.sp-cfg { height: 100dvh; display: flex; flex-direction: column; background: var(--bg); padding: 14px; gap: 10px; }
.sp-cfg-head { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.sp-cfg-title { margin-left: auto; font-size: 0.82rem; color: var(--muted); font-weight: 600; }
.sp-cfg-tabs { display: flex; gap: 6px; flex: 0 0 auto; }
.sp-cfg-tabs button { flex: 1 1 0%; padding: 8px 6px; border-radius: 8px; border: 1px solid var(--border); background: transparent; color: var(--muted); font-size: 0.8rem; font-weight: 600; cursor: pointer; }
.sp-cfg-tabs button.active { background: var(--primary); border-color: var(--primary); color: rgb(255, 255, 255); }
.sp-cfg-body { flex: 1 1 auto; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding-right: 2px; }
.sp-cfg-actions { flex: 0 0 auto; display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--border); padding-top: 10px; }
.sp-cfg-nota { margin: 0px; font-size: 0.68rem; color: var(--muted); line-height: 1.4; }
.sp-cfg-dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sp-cfg-url { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.72rem; color: var(--muted); background: var(--surface-2, rgba(127, 127, 127, 0.08)); border-radius: 6px; padding: 7px 9px; overflow-wrap: anywhere; }
.sp-cfg-sonda { margin: 0px; font-size: 0.72rem; line-height: 1.45; border-radius: 8px; padding: 8px 10px; }
.sp-cfg-sonda.ok { background: rgba(22, 163, 74, 0.094); color: rgb(21, 128, 61); }
.sp-cfg-sonda.aviso { background: rgba(249, 115, 22, 0.094); color: rgb(194, 65, 12); }
.sp-cfg-sonda.erro { background: rgba(220, 38, 38, 0.094); color: rgb(185, 28, 28); }
html[data-theme="dark"] .sp-cfg-sonda.ok { color: rgb(74, 222, 128); }
html[data-theme="dark"] .sp-cfg-sonda.aviso { color: rgb(251, 146, 60); }
html[data-theme="dark"] .sp-cfg-sonda.erro { color: rgb(248, 113, 113); }
.sp-cfg-disclosure { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; background: none; border-right-width: medium; border-bottom-width: medium; border-left-width: medium; border-right-style: none; border-bottom-style: none; border-left-style: none; border-right-color: currentcolor; border-bottom-color: currentcolor; border-left-color: currentcolor; border-image: none; border-top: 1px solid var(--border); padding: 10px 0px 0px; margin-top: 4px; cursor: pointer; color: var(--text); font-size: 0.8rem; font-weight: 600; text-align: left; }
.sp-cfg-disclosure small { font-weight: 400; color: var(--muted); font-size: 0.7rem; }
.sp-cfg-codecs-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sp-cfg-codecs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; }
.sp-field-rotulo { font-size: 0.72rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.02em; }
.sp-field-dica { margin: -2px 0px 0px; font-size: 0.68rem; color: var(--muted); line-height: 1.4; }
.sp-field-comacao { display: flex; gap: 6px; align-items: stretch; }
.sp-field-comacao input { flex: 1 1 0%; min-width: 0px; }
.sp-btn-mini { border: 1px solid var(--border); background: transparent; color: var(--muted); border-radius: 7px; padding: 4px 9px; font-size: 0.7rem; cursor: pointer; white-space: nowrap; }
.sp-btn-mini:disabled { opacity: 0.45; cursor: default; }
.sp-check { display: flex; gap: 8px; align-items: flex-start; font-size: 0.8rem; cursor: pointer; }
.sp-check.compacto { align-items: center; font-size: 0.76rem; }
.sp-check input { margin-top: 2px; }
.sp-check small { display: block; color: var(--muted); font-size: 0.68rem; }
.sp-mode-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sp-mode { border: 1px solid var(--border); border-radius: 9px; background: transparent; padding: 9px 8px; cursor: pointer; text-align: left; color: var(--text); font-size: 0.78rem; font-weight: 600; }
.sp-mode small { display: block; font-weight: 400; color: var(--muted); font-size: 0.68rem; }
.sp-mode.active { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, transparent); }
html[data-janela="config"], html[data-janela="config"] body { background: transparent; overflow: hidden; }
html[data-janela="config"] #root { position: relative; overflow: hidden; }
.sp-lateral { position: absolute; inset: 8px; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: rgba(15, 23, 42, 0.18) 0px 10px 30px; overflow: hidden; transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1); transform: translateX(0px); }
.sp-lateral.sp-lateral-fora, .sp-lateral.sp-lateral-saindo { transform: translateX(calc(-100% - 16px)); }
.sp-lateral.sp-lateral-entrando { transform: translateX(0px); }
.sp-lateral.sp-lateral-fora { transition: none; }
html[data-lado="esquerda"] .sp-lateral.sp-lateral-fora, html[data-lado="esquerda"] .sp-lateral.sp-lateral-saindo { transform: translateX(calc(100% + 16px)); }
@media (prefers-reduced-motion: reduce) {
  .sp-lateral { transition: none; }
}
html[data-theme="dark"] .sp-lateral { box-shadow: rgba(0, 0, 0, 0.55) 0px 16px 40px; }
.sp-cl-tela-cheia { position: absolute; inset: 0px; z-index: 35; display: flex; background: var(--surface); animation: 160ms ease 0s 1 normal both running sheet-rise; }
.sp-cl { flex: 1 1 auto; min-width: 0px; min-height: 0px; display: flex; flex-direction: column; gap: 10px; padding: 14px; }
.sp-cl-cabeca { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; }
.sp-cl-cabeca-texto { flex: 1 1 auto; min-width: 0px; display: flex; flex-direction: column; gap: 1px; }
.sp-cl-cabeca-texto strong { font-size: 0.95rem; color: var(--text); }
.sp-cl-cabeca-texto small { font-size: 0.72rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-cl-x { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 9px; color: var(--muted); }
.sp-cl-x:hover { background: var(--ctl-idle-bg); color: var(--text); }
.sp-cl-avisos { flex: 0 0 auto; display: flex; flex-direction: column; gap: 6px; }
.sp-cl-avisos:empty { display: none; }
.sp-cl-aviso { margin: 0px; font-size: 0.74rem; line-height: 1.4; border-radius: 9px; padding: 7px 10px; }
.sp-cl-aviso.neutro { background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); }
.sp-cl-aviso.alerta { background: rgba(249, 115, 22, 0.094); color: rgb(194, 65, 12); }
.sp-cl-aviso.erro { background: rgba(220, 38, 38, 0.094); color: rgb(185, 28, 28); }
.sp-cl-aviso.ok { background: rgba(22, 163, 74, 0.094); color: rgb(21, 128, 61); }
html[data-theme="dark"] .sp-cl-aviso.alerta { color: rgb(251, 146, 60); }
html[data-theme="dark"] .sp-cl-aviso.erro { color: rgb(248, 113, 113); }
html[data-theme="dark"] .sp-cl-aviso.ok { color: rgb(74, 222, 128); }
.sp-cl-corpo { flex: 1 1 auto; min-height: 0px; overflow-y: auto; overscroll-behavior: contain; padding-right: 2px; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--muted) 45%, transparent) transparent; }
.sp-cl-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; align-items: start; }
.sp-cl-coluna { display: flex; flex-direction: column; gap: 11px; padding: 12px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); min-width: 0px; }
.sp-cl-coluna-titulo { margin: 0px 0px 2px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--primary); }
.sp-cl-campo { display: flex; flex-direction: column; gap: 3px; min-width: 0px; }
.sp-cl-rotulo { font-size: 0.74rem; font-weight: 600; color: var(--text); }
.sp-cl-dica { font-size: 0.68rem; line-height: 1.35; color: var(--muted); margin: 0px; }
.sp-cl-erro { font-size: 0.68rem; line-height: 1.35; color: var(--danger); }
.sp-cl-campo input, .sp-cl-campo select { width: 100%; min-width: 0px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font-size: 0.84rem; outline: 0px; }
.sp-cl-campo input:focus, .sp-cl-campo select:focus { border-color: color-mix(in srgb, var(--primary) 55%, transparent); }
.sp-cl-campo.com-erro input, .sp-cl-campo.com-erro select { border-color: color-mix(in srgb, var(--danger) 60%, transparent); }
.sp-cl-campo input:disabled, .sp-cl-campo select:disabled { opacity: 0.6; cursor: not-allowed; }
.sp-cl-leitura { display: flex; flex-direction: column; gap: 3px; min-width: 0px; }
.sp-cl-leitura-valor { font-size: 0.74rem; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-cl-trio { display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 8px; }
.sp-cl-trio .sp-cl-leitura-valor { font-size: 0.7rem; white-space: normal; overflow-wrap: anywhere; line-height: 1.25; }
.sp-cl-linha-pilula { display: flex; align-items: center; gap: 10px; }
.sp-cl-linha-texto { flex: 1 1 auto; min-width: 0px; display: flex; flex-direction: column; gap: 2px; }
.sp-cl-pilula { position: relative; flex: 0 0 auto; width: 38px; height: 22px; border-radius: 999px; background: color-mix(in srgb, var(--muted) 38%, transparent); transition: background 150ms; }
.sp-cl-pilula::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: rgb(255, 255, 255); box-shadow: rgba(15, 23, 42, 0.3) 0px 1px 3px; transition: transform 150ms; }
.sp-cl-pilula[aria-checked="true"] { background: var(--primary); }
.sp-cl-pilula[aria-checked="true"]::after { transform: translateX(16px); }
.sp-cl-pilula:disabled { opacity: 0.5; }
.sp-cl-pilula:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.sp-cl-segmento { display: flex; gap: 4px; padding: 3px; border-radius: 11px; background: var(--surface); border: 1px solid var(--line); }
.sp-cl-segmento button { flex: 1 1 0px; min-width: 0px; padding: 6px; border-radius: 8px; font-size: 0.76rem; font-weight: 600; color: var(--muted); white-space: nowrap; }
.sp-cl-segmento button.ativo { background: var(--primary); color: rgb(255, 255, 255); }
.sp-cl-segmento button:disabled { opacity: 0.55; }
.sp-cl-codecs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.sp-cl-codec { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 7px; padding: 7px 9px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); font-size: 0.78rem; font-weight: 600; color: var(--text); cursor: pointer; }
.sp-cl-codec input { width: 15px; height: 15px; margin: 0px; accent-color: var(--primary); }
.sp-cl-codec.marcado { border-color: color-mix(in srgb, var(--primary) 45%, transparent); }
.sp-cl-codec.fora { opacity: 0.6; }
.sp-cl-codec small { flex-basis: 100%; font-size: 0.62rem; font-weight: 400; color: var(--muted); }
.sp-cl-codec:has(input:disabled) { cursor: default; }
.sp-cl-acoes { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.sp-cl-acoes .sp-btn { width: 100%; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-cl-cabeca-ativo { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; }
.sp-cl-cabeca-ativo .sp-cl-rotulo { font-size: 0.72rem; color: var(--muted); }
.sp-cl .sp-btn { padding: 5px 10px; font-size: 0.72rem; border-radius: 9px; }
.sp-cl .sp-btn.small { padding: 4px 9px; font-size: 0.7rem; }
.sp-cl-campo input, .sp-cl-campo select { padding: 5px 9px; font-size: 0.76rem; border-radius: 9px; }
.sp-cl-codec { padding: 4px 8px; font-size: 0.71rem; gap: 1px 6px; border-radius: 9px; }
.sp-cl-codec input { width: 13px; height: 13px; }
.sp-cl-codec small { font-size: 0.58rem; }
.sp-cl-codecs { gap: 5px; }
.sp-cl-coluna { gap: 6px; padding: 8px 9px; }
.sp-cl-campo { gap: 2px; }
.sp-cl-segmento { gap: 3px; padding: 2px; }
.sp-cl-segmento button { padding: 4px 6px; }
.sp-cl-linha-pilula { gap: 8px; }
.sp-cl-trio { gap: 6px; }
.sp-cl-vazio { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 4px 0px; font-size: 0.78rem; color: var(--muted); }
.sp-cl-vazio strong { color: var(--text); font-size: 0.84rem; }
.sp-cl-rodape { flex: 0 0 auto; display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding-top: 10px; border-top: 1px solid var(--line); }
.sp-cl-estado { margin-right: auto; font-size: 0.72rem; color: var(--muted); }
.sp-cl-rodape .sp-btn.primary:disabled { background: var(--primary); opacity: 0.45; }
.sp-gaveta-fundo { position: fixed; inset: 0px; z-index: 60; background: var(--surface, #fff); animation: 200ms ease-out 0s 1 normal none running sp-gaveta-entra; }
.sp-gaveta-blf { position: absolute; inset: 0px; background: var(--surface, #fff); display: flex; flex-direction: column; padding: calc(10px + env(safe-area-inset-top, 0px)) 14px env(safe-area-inset-bottom, 0px); }
.sp-gaveta-blf .sp-blf-janela { position: static; flex: 1 1 auto; min-height: 0px; width: auto; margin: 0px; padding: 0px; border: 0px; border-radius: 0px; box-shadow: none; background: none; transform: none; transition: none; }
.sp-gaveta-blf .sp-blf-head { display: flex; align-items: center; justify-content: space-between; padding: 0px 6px 6px; font-size: 0.83rem; }
.sp-gaveta-fechar { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-right: -8px; border-radius: 999px; background: none; border: 0px; color: var(--muted); }
.sp-gaveta-fechar:active { background: var(--ctl-idle-bg); }
.sp-gaveta-blf .sp-blf-aviso { font-size: 0.74rem; }
.sp-gaveta-blf .sp-blf-body { gap: 12px; }
.sp-gaveta-blf .sp-blf-group-head { font-size: 0.74rem; }
.sp-gaveta-blf .sp-blf-member { gap: 10px; padding: 6px; }
.sp-gaveta-blf .sp-blf-member .sp-list-main { min-width: 0px; }
.sp-gaveta-blf .sp-blf-member strong { display: block; font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-gaveta-blf .sp-blf-member small { font-size: 0.76rem; }
.sp-gaveta-blf .sp-blf-avatar { width: 30px; height: 30px; min-width: 30px; font-size: 0.69rem; }
.sp-gaveta-blf .sp-blf-ligar { opacity: 0.55; width: 26px; height: 26px; }
@keyframes sp-gaveta-entra { 
  0% { transform: translateX(-100%); }
  100% { transform: translateX(0px); }
}
.sp-dialogo-fundo { position: fixed; inset: 0px; z-index: 200; display: grid; place-items: center; padding: 18px; background: rgba(15, 23, 42, 0.32); animation: 120ms ease-out 0s 1 normal none running sp-dialogo-entra; }
.sp-dialogo { width: min(100%, 300px); padding: 18px 18px 14px; border-radius: 16px; background: var(--surface); box-shadow: rgba(15, 23, 42, 0.26) 0px 18px 44px; }
.sp-dialogo-texto { margin: 0px 0px 16px; font-size: 0.9rem; line-height: 1.4; color: var(--text); overflow-wrap: anywhere; }
.sp-dialogo-botoes { display: flex; justify-content: flex-end; gap: 8px; }
.sp-dialogo-botoes .sp-btn { padding: 8px 16px; font-size: 0.84rem; }
@keyframes sp-dialogo-entra { 
  0% { opacity: 0; }
  100% { opacity: 1; }
}
.sp-lista-contatos { gap: 2px; }
.sp-lista-contatos .sp-list-item { gap: 8px; padding: 4px 6px; border-radius: 8px; }
.sp-lista-contatos .sp-avatar { width: 26px; height: 26px; min-width: 26px; font-size: 0.6rem; }
.sp-lista-contatos .sp-list-main strong { font-size: 0.78rem; font-weight: 600; line-height: 1.2; }
.sp-lista-contatos .sp-list-main small { font-size: 0.66rem; line-height: 1.2; }
.sp-lista-contatos .sp-icon, .sp-lista-contatos .sp-icon-danger { width: 26px; height: 26px; min-width: 26px; padding: 4px; }
.sp-lista-contatos .sp-icon svg, .sp-lista-contatos .sp-icon-danger svg, .sp-lista-contatos .sp-list-item > svg { width: 15px; height: 15px; }
.sp-call .sp-controls.grid8 { margin-top: auto; }
.sp-call .sp-call-actions { margin-top: clamp(20px, 5vh, 48px); padding-bottom: clamp(18px, 6vh, 56px); }
.sp-call-avatar.com-foto { background-size: cover; background-position: center center; color: transparent; }
.sp-call-avatar.ia { background: linear-gradient(135deg, rgb(124, 58, 237), rgb(33, 114, 255)); }
.sp-call-avatar.ia svg { width: 46%; height: 46%; }
.sp-origem { display: inline-grid; place-items: center; width: 18px; height: 18px; color: var(--muted); }
.sp-origem svg { width: 16px; height: 16px; }
.sp-origem.ia { color: rgb(124, 58, 237); }
.sp-dica-transferencia { margin: 0px; font-size: 0.72rem; color: var(--muted); }
.sp-blf-head { position: relative; display: flex; align-items: center; gap: 6px; min-height: 26px; }
.sp-blf-lupa { margin-left: auto; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; color: var(--muted); z-index: 2; }
.sp-blf-lupa:hover { background: var(--surface-2); color: var(--primary); }
.sp-blf-busca { position: absolute; inset: 0px 30px 0px 0px; display: flex; align-items: center; gap: 4px; padding: 0px 4px; border-radius: 8px; background: var(--surface); transform: translateX(100%); opacity: 0; pointer-events: none; transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1), opacity 160ms; }
.sp-blf-head.buscando .sp-blf-busca { transform: translateX(0px); opacity: 1; pointer-events: auto; }
.sp-blf-busca input { flex: 1 1 0%; min-width: 0px; height: 26px; padding: 0px 8px; border: 1px solid var(--line); border-radius: 8px; font-family: inherit; font-size: 0.78rem; font-weight: 400; letter-spacing: normal; color: var(--text); background: var(--surface); }
.sp-blf-busca input::placeholder { color: rgb(169, 180, 198); font-weight: 400; }
.sp-blf-busca input:focus { outline: 2px solid var(--primary); outline-offset: -1px; }
.sp-blf-busca-x { width: 22px; height: 22px; display: grid; place-items: center; color: var(--muted); border-radius: 6px; }
@media (prefers-reduced-motion: reduce) {
  .sp-blf-busca { transition: none; }
}
.sp-blf-linha { display: flex; align-items: center; gap: 2px; }
.sp-blf-linha > .sp-blf-member { flex: 1 1 auto; min-width: 0px; }
.sp-blf-transferir { flex: 0 0 auto; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; color: var(--primary); background: none; border: 0px; }
.sp-blf-transferir:hover:not(:disabled) { filter: brightness(0.85); }
.sp-blf-transferir:disabled { opacity: 0.35; }
.sp-transferencia-falhou { color: var(--danger); max-width: 260px; text-align: center; line-height: 1.35; }
.sp-messages { flex: 1 1 0%; min-height: 0px; display: flex; flex-direction: column; padding: clamp(10px, 2.5vw, 16px) 0px 0px; gap: 8px; }
.sp-messages > .sp-list { padding: 0px clamp(6px, 2vw, 12px) 8px; }
.sp-messages .sp-messages.embutido { padding-top: 0px; }
.sp-messages > .sp-search { margin: 0px clamp(10px, 2.5vw, 16px); padding: 5px 12px; gap: 6px; border-radius: 12px; }
.sp-messages > .sp-search > svg { width: 16px; height: 16px; }
.sp-messages > .sp-search input { font-size: 0.86rem; }
html[data-platform="android"] .sp-messages > .sp-search, html[data-platform="ios"] .sp-messages > .sp-search { min-height: 44px; }
html[data-platform="android"] .sp-messages > .sp-search input, html[data-platform="ios"] .sp-messages > .sp-search input { font-size: 0.92rem; }
.sp-channel-dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
.sp-channels.contexto { padding-top: 4px; }
.sp-unread { min-width: 18px; height: 18px; padding: 0px 5px; border-radius: 999px; background: var(--primary); color: rgb(255, 255, 255); font-size: 0.66rem; font-weight: 700; display: grid; place-items: center; }
.sp-thread { flex: 1 1 0%; min-height: 0px; overflow-y: auto; padding: 12px clamp(10px, 2.5vw, 16px); display: flex; flex-direction: column; gap: 8px; }
.sp-msg { max-width: 82%; display: flex; flex-direction: column; gap: 3px; padding: 8px 11px; border-radius: 14px; }
.sp-msg.incoming { align-self: flex-start; background: var(--surface-2); border: 1px solid var(--line); border-bottom-left-radius: 5px; }
.sp-msg.outgoing { align-self: flex-end; background: rgba(33, 114, 255, 0.1); border-bottom-right-radius: 5px; }
.sp-msg.private { background: rgba(232, 145, 43, 0.12); }
.sp-msg.activity { align-self: center; max-width: 100%; background: none; border: 0px; padding: 4px; }
.sp-msg-activity { color: var(--muted); font-size: 0.72rem; text-align: center; }
.sp-msg-body { font-size: 0.85rem; line-height: 1.45; white-space: pre-wrap; word-break: break-word; user-select: text; }
.sp-msg-meta { font-size: 0.66rem; color: var(--muted); }
.sp-composer { flex: 0 0 auto; display: flex; align-items: flex-end; gap: 8px; padding: 10px clamp(10px, 2.5vw, 16px); border-top: 1px solid var(--line); }
.sp-composer textarea { flex: 1 1 0%; resize: none; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); outline: 0px; font-size: 0.85rem; line-height: 1.4; min-height: 38px; max-height: 116px; overflow-y: auto; box-sizing: border-box; }
.sp-composer textarea:focus { border-color: rgba(33, 114, 255, 0.4); }
.sp-composer-send { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--primary); color: rgb(255, 255, 255); flex: 0 0 auto; }
.sp-composer-send:disabled { background: rgb(199, 205, 216); }
.sp-anexos { display: flex; flex-direction: column; gap: 6px; margin-bottom: 4px; }
.sp-anexo-foto { display: block; border-radius: 10px; overflow: hidden; max-width: 220px; }
.sp-anexo-foto img { display: block; width: 100%; max-height: 200px; object-fit: cover; }
.sp-anexo-audio { display: flex; align-items: center; gap: 6px; }
.sp-anexo-audio audio { max-width: 220px; height: 32px; }
.sp-anexo-audio small { color: inherit; opacity: 0.75; font-size: 0.68rem; }
.sp-anexo-arquivo { display: flex; align-items: center; gap: 8px; max-width: 240px; padding: 7px 10px; border-radius: 10px; background: rgba(16, 24, 40, 0.06); text-decoration: none; color: inherit; }
.sp-anexo-icone { flex: 0 0 auto; font-size: 0.95rem; }
.sp-anexo-nome { display: flex; flex-direction: column; min-width: 0px; }
.sp-anexo-nome strong { font-size: 0.76rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-anexo-nome small { font-size: 0.66rem; opacity: 0.75; }
.sp-msg.outgoing .sp-anexo-arquivo { background: rgba(21, 86, 214, 0.1); }
.sp-anexo-falha { margin: 0px 12px 4px; padding: 5px 10px; border-radius: 8px; background: rgb(254, 228, 226); color: rgb(180, 35, 24); font-size: 0.72rem; text-align: center; }
.sp-icon.acao.gravando { background: rgb(254, 228, 226); color: rgb(217, 45, 32); animation: 1.2s ease-in-out 0s infinite normal none running sp-pulsa; }
@keyframes sp-pulsa { 
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}
.sp-anexo-audio { flex-direction: column; align-items: stretch; gap: 4px; }
.sp-anexo-audio-acoes { display: flex; align-items: center; gap: 6px; }
.sp-anexo-velocidade, .sp-anexo-baixar { flex: 0 0 auto; min-width: 30px; height: 22px; padding: 0px 7px; display: inline-grid; place-items: center; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); font-size: 0.68rem; font-weight: 600; text-decoration: none; }
.sp-anexo-velocidade:hover, .sp-anexo-baixar:hover { color: var(--primary); border-color: var(--primary); }
.sp-msg.outgoing .sp-anexo-velocidade, .sp-msg.outgoing .sp-anexo-baixar { background: rgba(255, 255, 255, 0.22); border-color: transparent; color: inherit; }
.sp-audio { --audio-acento: var(--primary); --audio-trilho: var(--line); display: flex; align-items: center; gap: 9px; max-width: 240px; padding: 2px 0px; }
.sp-audio audio { display: none; }
.sp-audio-play { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--audio-acento); color: rgb(255, 255, 255); }
.sp-audio-play:hover { filter: brightness(1.06); }
.sp-audio-play svg { width: 10px; height: 10px; fill: currentcolor; }
html[data-platform="android"] .sp-audio-play, html[data-platform="ios"] .sp-audio-play { width: 30px; height: 30px; }
html[data-platform="android"] .sp-audio-play svg, html[data-platform="ios"] .sp-audio-play svg { width: 13px; height: 13px; }
.sp-audio-meio { flex: 1 1 0%; min-width: 0px; display: flex; flex-direction: column; gap: 3px; }
.sp-audio-barra { position: relative; height: 12px; display: flex; align-items: center; cursor: pointer; }
.sp-audio-barra::before { content: ""; position: absolute; left: 0px; right: 0px; height: 3px; border-radius: 999px; background: var(--audio-trilho); }
.sp-audio-progresso { position: relative; height: 3px; border-radius: 999px; background: var(--audio-acento); transition: width 120ms linear; }
.sp-audio-progresso::after { content: ""; position: absolute; right: -4px; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; border-radius: 50%; background: var(--audio-acento); }
.sp-audio-linha { display: flex; align-items: center; gap: 6px; }
.sp-audio-tempo { color: var(--muted); font-size: 0.66rem; font-variant-numeric: tabular-nums; }
.sp-audio-linha .sp-audio-tempo:last-child { margin-left: auto; }
.sp-audio-velocidade { flex: 0 0 auto; height: 18px; padding: 0px 6px; display: inline-grid; place-items: center; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--muted); font-size: 0.62rem; font-weight: 700; }
.sp-audio-velocidade:hover { color: var(--audio-acento); border-color: var(--audio-acento); }
.sp-msg.outgoing .sp-audio, .sp-chat-balao.minha .sp-audio { --audio-acento: var(--primary-strong); --audio-trilho: rgba(21, 86, 214, 0.24); }
.sp-msg.outgoing .sp-audio-tempo, .sp-msg.outgoing .sp-audio-velocidade { color: var(--primary-strong); border-color: rgba(21, 86, 214, 0.34); }
html[data-theme="dark"] .sp-composer-send:disabled { background: rgb(43, 50, 61); color: rgb(123, 134, 152); }
.sp-canal-icone { flex: 0 0 auto; }
.sp-canal-linha { display: flex; align-items: center; gap: 5px; min-width: 0px; }
.sp-canal-linha > span { min-width: 0px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-canal-chip { min-width: 40px; justify-content: center; padding-left: 10px; padding-right: 10px; }
.sp-anexo-falha { margin: 0px 12px 6px; padding: 7px 10px; border-radius: 8px; font-size: 0.74rem; background: rgba(228, 86, 86, 0.1); color: var(--danger); }
.sp-regstatus, #sp-global-error { display: none !important; }
.sp-regstatus, #sp-global-error { display: none !important; }
.sp-regstatus, #sp-global-error { display: none !important; }
.sp-regstatus, #sp-global-error { display: none !important; }
.sp-regstatus, #sp-global-error { display: none !important; }
.sp-regstatus, #sp-global-error { display: none !important; }
.sp-regstatus, #sp-global-error { display: none !important; }
.sp-regstatus, #sp-global-error { display: none !important; }
html,body{height:100%;margin:0;overflow:hidden;background:#fff} .sp-quadro{position:absolute;inset:0} .sp-sheet.entra{animation:fe .5s cubic-bezier(.23,1,.32,1) both} @keyframes fe{from{transform:translateY(105%)}to{transform:none}} .sp-presenca-menu.entra{animation:me .32s cubic-bezier(.23,1,.32,1) both;transform-origin:top left} @keyframes me{from{opacity:0;transform:translateY(-6px) scale(.97)}to{opacity:1;transform:none}} .sp-blf-member.vivo{background:rgba(33,114,255,.07)} @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* Janela do Windows (prints do founder, 17/10): o app preenche a janela inteira, na proporção ~0,57 — não o cartão 1:2 do navegador. */
.sp-shell { width: 100vw !important; max-width: none !important; height: 100vh !important; max-height: none !important; aspect-ratio: auto !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
/* Mensagens (canais integrados) */
.sp-msg{display:flex;flex-direction:column;gap:10px;padding:12px 12px 0;overflow:hidden}
.sp-msg-abas{display:flex;gap:8px}.sp-msg-abas span{padding:6px 14px;border:1px solid var(--line);border-radius:999px;font-size:13px;color:var(--muted)}
.sp-msg-abas .on{background:#eaf2ff;border-color:#bcd4ff;color:#1a56db;font-weight:500}
.sp-msg-busca{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:12px;padding:9px 12px;font-size:13px;color:var(--muted);background:var(--surface-2)}
.sp-msg-filtros{display:flex;gap:6px}.sp-msg-filtros span{display:grid;place-items:center;min-width:38px;height:30px;padding:0 10px;border:1px solid var(--line);border-radius:999px;font-size:12.5px}
.sp-msg-filtros .on{background:#eaf2ff;border-color:#bcd4ff;color:#1a56db;font-weight:500}
.sp-msg-filtros .sp-msg-ic{width:15px;height:15px}
.sp-msg-lista{display:flex;flex-direction:column}
.sp-msg-item{display:flex;align-items:center;gap:10px;padding:8px 2px;border-bottom:1px solid #f1f4f8}
.sp-msg-av{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700;font-size:13px}
.sp-msg-tx{flex:1;min-width:0}.sp-msg-tx b{display:block;font-size:13.5px;font-weight:500;color:var(--ink,#0b0d12);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp-msg-tx small{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--muted)}.sp-msg-tx small span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp-msg-tx .sp-msg-ic{width:13px;height:13px;flex:none}
.sp-msg-item em{font-style:normal;font-size:11px;color:var(--muted);align-self:flex-start;margin-top:4px}
.sp-body.sp-msg{align-self:stretch;width:100%!important;max-width:none!important;margin:0!important;box-sizing:border-box;align-items:stretch}
.sp-nav button span{white-space:nowrap}
html[data-janela="blf"] .sp-blf-janela{left:0;right:0;top:0;bottom:0;width:auto;border:0;border-radius:16px;box-shadow:none}