/* Tokens de skin (spec 2026-09-19-skins-softphone-design). classic-dark é
   o :root default — reproduz bit-a-bit as cores fixas que o arquivo já
   tinha antes desta mudança (regressão zero pra quem nunca escolhe skin). */
:root,
body#sipClient[data-skin="classic"][data-theme="dark"] {
  --sp-bg: #333;
  --sp-panel-bg: #1a1a1a;
  --sp-display-bg: #f5edb0;
  --sp-display-text: #111;
  --sp-display-placeholder: #7a7550;
  --sp-text-muted: #999;
  --sp-minimized-text: #ccc;
  --sp-display-text-dim: #7a7550;
  --sp-btn-text: #ccc;
  --sp-btn-border: #666;
  --sp-keypad-bg: #f8f8f8;
  --sp-keypad-label: #999;
  --sp-keypad-text: #222;
  --sp-drawer-bg: #333;
}

body#sipClient[data-skin="classic"][data-theme="light"] {
  --sp-bg: #e4e4e4;
  --sp-panel-bg: #d4d4d4;
  --sp-display-bg: #f5edb0;
  --sp-display-text: #111;
  --sp-display-placeholder: #7a7550;
  --sp-text-muted: #666;
  --sp-minimized-text: #444;
  --sp-display-text-dim: #7a7550;
  --sp-btn-text: #333;
  --sp-btn-border: #999;
  --sp-keypad-bg: #fafafa;
  --sp-keypad-label: #666;
  --sp-keypad-text: #222;
  --sp-drawer-bg: #d4d4d4;
}

body#sipClient[data-skin="vibrant"][data-theme="dark"] {
  --sp-bg: #0B172A;
  --sp-panel-bg: #071426;
  --sp-display-bg: #061A2E;
  --sp-display-text: #00C8FF;
  --sp-display-placeholder: #3d6b85;
  --sp-text-muted: #7a93ab;
  --sp-minimized-text: #E6F3FF;
  --sp-display-text-dim: #3d6b85;
  --sp-btn-text: #E6F3FF;
  --sp-btn-border: #7a93ab;
  --sp-keypad-bg: #071426;
  --sp-keypad-label: #7a93ab;
  --sp-keypad-text: #E6F3FF;
  --sp-drawer-bg: #071426;
}

body#sipClient[data-skin="vibrant"][data-theme="light"] {
  --sp-bg: #F2F7FF;
  --sp-panel-bg: #DCEBFF;
  --sp-display-bg: #DCEBFF;
  --sp-display-text: #062A55;
  --sp-display-placeholder: #6d93bd;
  --sp-text-muted: #5b7fa6;
  --sp-minimized-text: #062A55;
  --sp-display-text-dim: #6d93bd;
  --sp-btn-text: #062A55;
  --sp-btn-border: #5b7fa6;
  --sp-keypad-bg: #fff;
  --sp-keypad-label: #5b7fa6;
  --sp-keypad-text: #062A55;
  --sp-drawer-bg: #DCEBFF;
}

body#sipClient[data-skin="soft"][data-theme="dark"] {
  --sp-bg: #1A1A1A;
  --sp-panel-bg: #101010;
  --sp-display-bg: #000;
  --sp-display-text: #DDD;
  --sp-display-placeholder: #666;
  --sp-text-muted: #888;
  --sp-minimized-text: #DDD;
  --sp-display-text-dim: #666;
  --sp-btn-text: #DDD;
  --sp-btn-border: #888;
  --sp-keypad-bg: #101010;
  --sp-keypad-label: #888;
  --sp-keypad-text: #EEE;
  --sp-drawer-bg: #101010;
}

body#sipClient[data-skin="soft"][data-theme="light"] {
  --sp-bg: #F5F5F5;
  --sp-panel-bg: #EAEAEA;
  --sp-display-bg: #EEE;
  --sp-display-text: #333;
  --sp-display-placeholder: #999;
  --sp-text-muted: #777;
  --sp-minimized-text: #333;
  --sp-display-text-dim: #999;
  --sp-btn-text: #333;
  --sp-btn-border: #777;
  --sp-keypad-bg: #fff;
  --sp-keypad-label: #777;
  --sp-keypad-text: #222;
  --sp-drawer-bg: #EAEAEA;
}

#sipClient {
  background-color: var(--sp-bg);
  font-size: 13px;
  line-height: 1.42857143;
  /* firefox 19+ */
  /* ie */
}
#sipClient p {
  margin: 0;
  padding: 0 0 10px 0;
  line-height: 18px;
}
/* Barra fina só de "pegador" de arrastar — status de registro e o botão de
   Configurações moraram aqui antes, foram pro topo do display a pedido do
   usuário (2026-09-11); a barra encolheu pra uma faixa mínima. */
#sipClient .sipStatus {
  margin: 0 -15px 8px -15px;
  padding: 6px 15px;
  min-height: 10px;
  background-color: var(--sp-panel-bg);
}
#sipClient .sip-panel h3 {
  margin-top: 22px;
}
#sipClient #sip-splash {
  height: 371px;
}
#sipClient #sip-splash .fa {
  margin-bottom: 15px;
}
#sipClient #sip-splash .fa-circle {
  color: #5cb85c;
}
/* Histórico não acompanhava skin escolhida (achado 2026-09-19): #sip-log
   e #sip-splash usam classes puras do Bootstrap (.panel.panel-default,
   .list-group-item), que fixam fundo branco/texto escuro independente
   do tema. --sp-drawer-bg/--sp-btn-text já são as variáveis certas pro
   contraste (mesmas que .history-drawer, o painel que os envolve, já
   usa) — só faltava sobrescrever o que o Bootstrap define pra esses
   elementos especificamente. Variantes de status coloridas
   (list-group-item-info/danger/warning/success, .sip-logitem-ended)
   ficam de fora de propósito — decisão separada, ainda pastel fixo do
   Bootstrap. */
#sipClient #sip-log,
#sipClient #sip-splash {
  background-color: var(--sp-drawer-bg);
  color: var(--sp-btn-text);
  border-color: var(--sp-btn-border);
}
#sipClient #sip-log .panel-heading {
  padding: 10px 8px;
  background-color: var(--sp-drawer-bg);
  color: var(--sp-btn-text);
  border-color: var(--sp-btn-border);
}
#sipClient #sip-logitems {
  height: 332px;
  overflow: auto;
}
#sipClient .sip-logitem {
  padding: 4px;
  background-color: var(--sp-drawer-bg);
  color: var(--sp-btn-text);
  border-color: var(--sp-btn-border);
}
#sipClient .sip-logitem-icone {
  display: inline-flex;
  width: 1.28571429em;
  vertical-align: -2px;
}
#sipClient .sip-logitem-icone svg {
  width: 100%;
  height: 100%;
}
#sipClient #numDisplay::-webkit-input-placeholder {
  color: #bbb;
}
#sipClient #numDisplay::-moz-placeholder {
  color: #bbb;
}
#sipClient #numDisplay::-ms-input-placeholder {
  color: #bbb;
}
#sipClient #numDisplay::-moz-placeholder {
  color: #bbb;
}

/* Flutuante e arrastável (pedido do usuário, 2026-09-11) — ver draggable.js.
   Sem isso, abrir phone/index.html direto numa aba estica pro tamanho da
   janela inteira em vez do widget compacto que o popup original previa.

   body#sipClient tem tamanho FIXO (360px, o de .phone-main) — nunca muda
   de tamanho nem de posição quando a gaveta de histórico abre. A gaveta é
   position:absolute (fora do fluxo), "grudada" pra fora da borda esquerda
   do body (right:100%) — cresce sem o body precisar saber disso.

   Isso corrigiu um bug real (achado 2026-09-11): a versão anterior usava
   display:flex + flex-direction:row-reverse no body pra manter o telefone
   "ancorado" enquanto a gaveta (2º item da linha) abria ao lado. Funcionava
   SÓ enquanto o body ainda estava ancorado por right/bottom (posição
   inicial) — depois de arrastar o telefone uma vez, draggable.js passa a
   fixar a posição por left/top (ver aplicarPosicao() nesse arquivo), e com
   row-reverse + left fixo, o body crescer pra abrir a gaveta EMPURRAVA o
   telefone (1º filho, ancorado no lado "de saída" do flex) pro lado — o
   teclado "se movia" visivelmente. position:absolute desacopla os dois
   completamente: o tamanho do body nunca depende de a gaveta estar aberta,
   então a posição do telefone é sempre a mesma, em qualquer modo de
   ancoragem (right/bottom OU left/top). */
html {
  background: var(--sp-bg);
}
body#sipClient {
  position: fixed;
  top: auto;
  left: auto;
  right: 24px;
  bottom: 24px;
  width: 360px;
  max-width: calc(100vw - 24px);
}
body#sipClient .phone-main {
  width: 100%;
  background-color: var(--sp-bg);
  border-radius: 8px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}
body#sipClient .sipStatus {
  cursor: move;
  user-select: none;
}
/* Minimizar (hambúrguer, pedido do usuário, 2026-09-11) — esconde
   #phoneUI inteiro, sobra só a faixa fina de arrastar. */
body#sipClient .phone-main.minimized #phoneUI {
  display: none;
}
/* Conteúdo do estado minimizado: ícone de telefone + ramal (pedido do
   usuário, 2026-09-11) — escondido (display:none) enquanto NÃO
   minimizado; a faixa normal (arrastar + hambúrguer) já cobre esse caso. */
#sipClient .minimized-info {
  display: none;
  align-items: center;
  gap: 6px;
  color: var(--sp-minimized-text);
  font-size: 12px;
}
body#sipClient .phone-main.minimized .minimized-info {
  display: inline-flex;
}

/* Display + teclado sempre visível (pedido do usuário, 2026-09-11) —
   antes o teclado era um dropdown escondido até clicar, e o status da
   chamada só aparecia no canto da barra superior. */
/* Display estilo LCD (pedido do usuário, 2026-09-11): fonte VT323 (link no
   <head>), fundo amarelo claro, letras pretas — tela de calculadora/
   telefone digital em vez de campo de formulário comum. */
#sipClient .phone-display {
  margin-bottom: 10px;
  background-color: var(--sp-display-bg);
  border-radius: 4px;
  padding: 6px 8px;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}
/* Cabeçalho do display: status de registro (esquerda) + engrenagem de
   Configurações (direita) — pedido do usuário (2026-09-11), antes ficavam
   na barra de cima, fora da "tela". */
#sipClient .phone-display-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  color: var(--sp-text-muted);
  margin-bottom: 2px;
}
#sipClient .phone-display-head #btnSettings {
  color: var(--sp-text-muted);
  padding: 0;
}
/* Logo de white label (2026-09-19) — altura fixa pra caber na linha do
   cabeçalho independente da proporção da imagem enviada, escondido por
   padrão via .hide (aplicarLogo em app.js mostra só com URL válida). */
#sipClient .phone-display-head #phoneLogo {
  height: 16px;
  max-width: 80px;
  object-fit: contain;
}
/* Cronômetro da chamada (pedido do usuário, 2026-09-11) — fica vazio
   (Stopwatch só cria o <span> interno quando a chamada é aceita). */
#sipClient .phone-display-head-right {
  display: flex;
  align-items: center;
  gap: 6px;
}
#sipClient #txtCallTimer {
  font-family: 'VT323', monospace;
  font-size: 13px;
}
/* "Bolha" de chamada recebida (pedido do usuário, 2026-09-11) — pill
   verde com o número de quem liga, pulsando, no lugar do status normal
   enquanto toca sem ter sido atendida. */
#sipClient #incomingBubble {
  text-align: center;
  margin: 2px 0 4px 0;
}
#sipClient #incomingBubble span {
  display: inline-block;
  background-color: #5cb85c;
  color: #fff;
  padding: 3px 14px;
  border-radius: 999px;
  font-family: 'VT323', monospace;
  font-size: 16px;
  letter-spacing: 1px;
  animation: ctxsip-pulse 1s ease-in-out infinite;
}
@keyframes ctxsip-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}
/* Chamada de entrada tocando (2026-09-30): só o DISPLAY aumenta e diminui o
   brilho. Antes o host piscava (opacidade) o iframe inteiro, e o botão
   Atender mudava de cor justo na hora de clicar nele. Brilho no display
   não mexe no resto do teclado. */
#sipClient.tocando .phone-display {
  animation: softphone-brilho-display 1s ease-in-out infinite;
}
@keyframes softphone-brilho-display {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.45); }
}
@media (prefers-reduced-motion: reduce) {
  #sipClient.tocando .phone-display { animation: none; }
}
#sipClient .phone-display #txtCallStatus {
  text-align: center;
  font-family: 'VT323', monospace;
  font-size: 15px;
  color: var(--sp-display-text-dim);
  min-height: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Apagar 1 dígito por clique de mouse (pedido do usuário, 2026-09-14) —
   botão sobreposto dentro do campo, canto direito. */
#sipClient .phone-display #numDisplayWrap { position: relative; }
#sipClient .phone-display #btnBackspace {
  position: absolute; right: 2px; top: 50%; transform: translateY(-50%);
  color: var(--sp-display-text-dim); padding: 4px;
}
#sipClient .phone-display #btnBackspace:hover { color: var(--sp-display-text); }
#sipClient .phone-display #numDisplay {
  font-family: 'VT323', monospace;
  font-size: 28px;
  letter-spacing: 2px;
  height: 40px;
  background-color: transparent;
  color: var(--sp-display-text);
  border: none;
  box-shadow: none;
  padding-right: 28px; /* espaço pro #btnBackspace não cobrir o texto */
}
#sipClient .phone-display #numDisplay::-webkit-input-placeholder {
  color: var(--sp-display-placeholder);
}
#sipClient .phone-display #numDisplay::-moz-placeholder {
  color: var(--sp-display-placeholder);
}
/* Mensagem de erro dentro do display (pedido do usuário, 2026-09-18) —
   #numDisplay é <input>, placeholder nunca quebra linha (truncava
   "Seu navegador não..."). #errorMessage é texto normal, quebra em
   2-3 linhas; mesma altura mínima do #numDisplay pra não pular o
   layout do display ao trocar de um pro outro. */
#sipClient .phone-display #errorMessage {
  font-family: 'VT323', monospace;
  font-size: 18px;
  letter-spacing: 0.5px;
  line-height: 1.15;
  color: var(--sp-display-text-dim);
  text-align: center;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Campo de transferência inline no display (pedido do usuário,
   2026-09-13) — mesmo visual LCD do #numDisplay, no lugar dele enquanto
   pede o destino. Rótulo em linha própria, fonte pequena (pedido do
   usuário, 2026-09-13): a frase completa não cabia como placeholder do
   #transferTarget e ficava cortada/sobreposta ao texto digitado. */
#sipClient .phone-display #transferLabel {
  font-family: 'VT323', monospace;
  font-size: 12px;
  letter-spacing: 0.5px;
  color: var(--sp-display-text-dim);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}
#sipClient .phone-display #transferTarget {
  font-family: 'VT323', monospace;
  font-size: 22px;
  letter-spacing: 1px;
  height: 34px;
  background-color: transparent;
  color: var(--sp-display-text);
  border: none;
  border-bottom: 1px dashed var(--sp-display-text-dim);
  box-shadow: none;
}
#sipClient .phone-display #transferTarget::-webkit-input-placeholder {
  color: var(--sp-display-text-dim);
}
#sipClient .phone-display #transferTarget::-moz-placeholder {
  color: var(--sp-display-text-dim);
}
#sipClient .transfer-panel-actions {
  display: flex;
  justify-content: center;
  gap: 6px;
  flex: 0 0 auto;
}
/* Painel compacto (30/09/2026): rótulo em cima e, embaixo, campo + botões
   NA MESMA LINHA. Antes empilhava rótulo/campo/botões (79px contra os 40px
   do display normal): em chamada o conteúdo já ocupa ~472px num iframe de
   480 no SuporteONE, então +39px estourava e aparecia a barra de rolagem
   lateral. Agora ~44px. */
#sipClient .phone-display #transferPanel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 6px;
}
#sipClient .phone-display #transferLabel { flex: 0 0 100%; line-height: 14px; margin-bottom: 0; }
#sipClient .phone-display #transferTarget { flex: 1 1 0; min-width: 0; width: auto; height: 28px; }
/* Volume das caixas/mic saíram de dropdown pra sliders verticais SEMPRE
   visíveis, um de cada lado do teclado (pedido do usuário, 2026-09-18).
   .dialpad-grid mantém seu próprio grid; esta linha só posiciona as duas
   colunas de slider ao lado dele. */
#sipClient .dialpad-with-sliders {
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin-bottom: 4px;
}
#sipClient .dialpad-with-sliders .dialpad-grid {
  flex: 1;
  margin-bottom: 0;
}
#sipClient .dialpad-slider-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  color: #999;
  flex-shrink: 0;
}
/* input[type=range] vertical (Chrome/Edge só — SuporteONE roda nesses).
   Achado 2026-09-18, em 2 rodadas testando ao vivo no dev:
   1ª tentativa (writing-mode + -webkit-appearance:slider-vertical juntos):
   Chrome calculava a caixa de forma inconsistente (140px x 20px).
   2ª tentativa (só -webkit-appearance:slider-vertical, sem writing-mode):
   MESMO bug (140px x 20px) — esse Chrome já não trata mais
   slider-vertical como valor especial (propriedade antiga, removida em
   versões recentes). O que funciona de verdade: appearance:none (mata o
   estilo nativo do SO) + writing-mode:vertical-lr + direction:rtl —
   essa é a rota atual recomendada pro range vertical, confirmado via
   JS ao vivo medindo getBoundingClientRect() das duas colunas até dar
   20px/20px simétrico. Sem JS extra — os handlers de 'change' em app.js
   não sabem nem precisam saber que o slider está deitado ou de pé. */
#sipClient .dialpad-slider-col input[type="range"] {
  flex: 1 1 auto;
  width: 20px;
  min-height: 80px;
  appearance: none;
  -webkit-appearance: none;
  writing-mode: vertical-lr;
  direction: rtl;
  background: transparent;
}
/* appearance:none também zera o track/thumb nativos (fundo branco em
   caixa, "grosseiro" — pedido do usuário, 2026-09-18) — sem essas 2
   pseudo-classes o Chrome desenha um retângulo sólido de preenchimento.
   Track vira uma linha fina centralizada (2px), thumb uma bolinha por
   cima; a mesma trilha/bolinha nos dois sliders. */
#sipClient .dialpad-slider-col input[type="range"]::-webkit-slider-runnable-track {
  width: 2px;
  height: 100%;
  background: #666;
  border-radius: 1px;
}
#sipClient .dialpad-slider-col input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #4a90d9;
  border: none;
  margin-left: -6px;
}

#sipClient .dialpad-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 10px;
}
#sipClient .dialpad-grid .digit {
  /* Círculo de tamanho fixo (66px, igual à versão antiga) CENTRALIZADO na
     coluna do grid via margin:auto — width:100% deixava o botão do
     tamanho da coluna inteira (achado 2026-09-11: ficou grande/feio).
     Sem o float:left/margin fixo da versão dropdown (aquele sim causava
     o descentralizado original), mas sem esticar o botão pra preencher
     a coluna toda. */
  aspect-ratio: 1 / 1;
  width: 66px;
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
  font-size: 26px;
  font-weight: 300;
  line-height: 1.2;
  /* TK dialpad-contraste-dark — o número do dígito não tinha `color`
     próprio: herdava o cinza escuro fixo do Bootstrap (.btn-default,
     #333), que funciona em cima do círculo claro do classic/vibrant/soft
     LIGHT, mas fica quase invisível no vibrant-dark/soft-dark, onde
     `--sp-keypad-bg` é bem escuro (#071426/#101010) — o círculo do
     teclado nem sempre acompanha o brilho geral do tema (classic-dark,
     por exemplo, mantém o círculo CLARO de propósito), por isso
     `--sp-keypad-text` é uma variável própria, casada com o brilho de
     `--sp-keypad-bg` em cada bloco de skin/tema acima, não com
     `--sp-btn-text` (que segue o brilho do tema geral). */
  color: var(--sp-keypad-text);
  background-color: var(--sp-keypad-bg);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
#sipClient .dialpad-grid .digit span {
  display: block;
  font-size: 10px;
  font-weight: normal;
  letter-spacing: 1px;
  color: var(--sp-keypad-label);
}
/* O glifo "*" nasce visualmente menor que os dígitos nessa fonte — mesmo
   font-size, a caixa alta do "*" ocupa uma fração da altura de um "0"-"9"
   (não é só escala, é posição: fica colado no topo). Aumentar font-size
   sozinho não resolve (achado pelo usuário, 2026-09-11, depois da primeira
   tentativa). Precisa de wrapper próprio (span.glyph-star, ver index.html)
   pra herdar o font-size:10px/color:#999 do span de letras (ABC/DEF/...) e
   escalar+centralizar sem afetar os outros botões. */
#sipClient .dialpad-grid .digit .glyph-star {
  display: block;
  width: 100%;
  text-align: center;
  font-size: 26px;
  font-weight: 300;
  color: inherit;
  transform: scale(1.7);
  transform-origin: center;
}
/* Efeito de "botão pressionado" em vez do círculo azul de foco padrão do
   navegador (pedido do usuário, 2026-09-11) — outline:none tira o anel,
   :active dá o feedback visual (afunda + escurece) no lugar. */
#sipClient .dialpad-grid .digit:focus {
  outline: none;
  box-shadow: none;
}
#sipClient .dialpad-grid .digit:active {
  transform: scale(0.93);
  background-color: #d4d4d4;
}
#sipClient .dialpad-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: stretch;
}
#sipClient .dialpad-actions .btnCall {
  flex: 1;
}

/* Cor de status "encerrada normal" no histórico — distinta do padrão sem
   cor (pedido do usuário, 2026-09-11: cada status com cor própria). */
#sipClient .sip-logitem-ended {
  background-color: #e4e4e4;
}

/* Contraste de status no histórico em modo escuro (TK-2026-11727, achado
   do usuário 22/09): as variantes list-group-item-info/danger/warning/
   success e .sip-logitem-ended ficaram de fora do fix de skin anterior
   (#64, af9e725) de propósito — continuavam com os pasteis fixos do
   Bootstrap 3 (fundo claro, texto escuro), que sobre --sp-drawer-bg
   escuro (qualquer um dos 3 skins dark) dava contraste quase nulo entre
   ligações recebidas/efetuadas/não completadas. Paleta própria aqui,
   escura o bastante pra não brigar com --sp-drawer-bg e com texto claro
   o bastante pra manter WCAG AA (>=4.5:1) — não reaproveita as variáveis
   de skin porque cor de status é semântica (vermelho=perdida,
   verde=atendida), não tema. */
body#sipClient[data-theme="dark"] .sip-logitem.list-group-item-danger {
  background-color: #4a1f1f;
  color: #ff9d9d;
  border-color: #7a3030;
}
body#sipClient[data-theme="dark"] .sip-logitem.list-group-item-success {
  background-color: #1f3a24;
  color: #8fe89b;
  border-color: #2f5a38;
}
body#sipClient[data-theme="dark"] .sip-logitem.list-group-item-info {
  background-color: #1c3244;
  color: #8fcdf2;
  border-color: #2e4f68;
}
body#sipClient[data-theme="dark"] .sip-logitem.list-group-item-warning {
  background-color: #4a3c1a;
  color: #f2da8a;
  border-color: #6b5a2a;
}
body#sipClient[data-theme="dark"] .sip-logitem-ended {
  background-color: #2e2e2e;
  color: var(--sp-btn-text);
  border-color: #4a4a4a;
}

/* Ícones SVG nos botões (pedido do usuário, 2026-09-11) — alinhamento e
   espaçamento consistentes entre ícone e texto. */
#sipClient .icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
#sipClient .icon-btn svg {
  flex-shrink: 0;
}

/* Botão só-ícone, sem "contorno de botão" — fundo transparente, sem borda,
   só o SVG (pedido do usuário, 2026-09-11). Usado só nos botões
   secundários que ficam FORA da barra de ações (minimizar, configurações,
   fechar histórico, apagar dígito) — volume/mic/histórico/rediscar da
   barra ociosa e todos os botões de chamada usam `.btn-outline-flat` (com
   moldura, pedido do usuário 2026-09-15), ver abaixo. */
#sipClient .icon-btn-flat {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 6px;
  color: var(--sp-btn-text);
  cursor: pointer;
}
#sipClient .icon-btn-flat:hover {
  opacity: 0.7;
}
#sipClient .icon-btn-flat:focus {
  outline: none;
}
#sipClient .icon-btn-flat[disabled] {
  opacity: 0.3;
  cursor: not-allowed;
}
#sipClient .icon-btn-flat svg {
  flex-shrink: 0;
}

/* Botões de ação da chamada (hold/transferir/mudo/desligar/atender) na
   tela do teclado (pedido do usuário, 2026-09-11) — mesmo grid da barra
   ociosa que substituem. */
#sipClient #call-controls {
  display: flex;
  gap: 6px;
  align-items: stretch;
}
#sipClient #call-controls .btn-outline-flat {
  flex: 1;
}

/* Botões de ação com moldura + fundo transparente, sem cor de fundo
   (pedido do usuário, 2026-09-15: antes cada botão tinha uma cor do
   Bootstrap — success/primary/info/warning/danger — e o usuário pediu
   pra tirar todas, deixando só contorno). */
#sipClient .btn-outline-flat {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: transparent;
  border: 1px solid var(--sp-btn-border);
  border-radius: 4px;
  padding: 8px;
  color: var(--sp-btn-text);
  cursor: pointer;
}
#sipClient .btn-outline-flat:hover {
  border-color: #999;
  color: #fff;
}
#sipClient .btn-outline-flat[disabled] {
  opacity: 0.3;
  cursor: not-allowed;
}
/* Toggle ativo (ex.: silenciar toque) — mesma moldura, fundo preenchido
   pra indicar "ligado" sem depender de cor (pedido do usuário, 2026-09-15:
   nada de cores do Bootstrap nos botões de ação). */
#sipClient .btn-outline-flat.active {
  background: #666;
  color: #fff;
}
#sipClient .btn-outline-flat svg {
  flex-shrink: 0;
}

/* Mesmo estilo (moldura + fundo transparente), versão compacta pros
   botões inline do histórico (Atender/Espera/Transferir/Mudo/Desligar em
   cada item da lista) — antes eram `btn-xs` coloridos do Bootstrap
   (pedido do usuário, 2026-09-15: padronizar com o resto). */
#sipClient .btn-outline-flat-xs {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid #999;
  border-radius: 3px;
  padding: 2px 5px;
  color: #555;
  cursor: pointer;
}
#sipClient .btn-outline-flat-xs:hover {
  border-color: #333;
  color: #000;
}
#sipClient .btn-outline-flat-xs svg {
  flex-shrink: 0;
}

/* Histórico como bloco lateral (pedido do usuário, 2026-09-11: primeiro
   "colapsar horizontalmente", depois "pra fora do teclado" — não pode
   cobrir #phoneUI; depois "o teclado não pode se mover, só a aba" —
   ver o comentário grande acima de body#sipClient pro porquê disso ser
   position:absolute e não mais item de um flex row). right:100% gruda a
   gaveta na borda ESQUERDA do body (o telefone), width:0→260px cresce pra
   fora dali — o body nunca sabe que ela existe. Visual de "bloco de
   notas" (papel + espiral) removido a pedido do usuário — mesmo cinza
   escuro de .phone-main. */
#sipClient .history-drawer {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 100%;
  width: 0;
  overflow: hidden;
  transition: width 0.25s ease;
  margin-right: 8px;
  background-color: var(--sp-drawer-bg);
  border-radius: 8px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
}
#sipClient .history-drawer.open {
  width: 260px;
}
#sipClient .history-drawer > * {
  /* Conteúdo com largura fixa (a do bloco aberto) — sem isso ele reflui
     enquanto width ainda está animando e pisca feio. */
  width: 260px;
  box-sizing: border-box;
  padding: 0 12px;
}
#sipClient .history-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px 6px 12px !important;
}

/* Modo embutido (iframe no SuporteONE/LeadONE/FinanceONE, largura fixa do
   host): a gaveta acima assume que existe espaço à ESQUERDA do body no
   viewport (verdade só no ctxSip avulso/standalone). Dentro do iframe o
   host recorta exatamente na borda do widget — a gaveta crescia pra fora
   e ficava invisível, sem erro nenhum (achado 12/09/2026, usuário: "abre
   lateral no ctxsip mas não abre no SuporteONE"). Aqui ela vira uma aba
   por CIMA do teclado (right:0, dentro do próprio body) em vez de ao lado
   dele — única forma de caber num iframe de tamanho fixo.

   CORREÇÃO 12/09/2026 (1ª rodada): a primeira versão deste seletor era
   `body.embutido #sipClient .history-drawer` — não casava NUNCA, porque
   #sipClient É o próprio <body> (ver <body id="sipClient"> no
   index.html), não um descendente dele. Trocado pra
   `body.embutido .history-drawer`.

   CORREÇÃO 12/09/2026 (2ª rodada, mesmo dia): ainda não funcionava — a
   regra base é `#sipClient .history-drawer` (especificidade com ID:
   1,1,0), e `body.embutido .history-drawer` (0,2,1) tem especificidade
   MENOR — um seletor por ID sempre vence um por classe, não importa a
   ordem no arquivo nem quantas classes o outro tenha. Confirmado com
   `getComputedStyle` de verdade no navegador (não só grep de texto no
   CSS): `right` continuava em 360px, valor da regra base. Corrigido
   igualando a especificidade por ID: `#sipClient.embutido
   .history-drawer` (1,2,0) — mesmo elemento (`<body id="sipClient"
   class="...embutido">`), agora com especificidade maior que a base. */
/* Centraliza dentro do host quando embutido (pedido do usuário,
   2026-09-13, via sessão SuporteONE): o standalone usa position:fixed
   ancorado no canto inferior direito (bottom:24/right:24, pensado pra
   bolha flutuante arrastável) — dentro do container de largura própria
   do host isso deixava espaço morto assimétrico, grudado numa borda em
   vez de centralizado (achado do usuário: container do host em 320px,
   design em 360px, offset de 24px sobrando de um lado só). Troca pra
   position:relative (mantém o body como containing block da gaveta,
   que é position:absolute — ver .history-drawer abaixo) + margin:auto,
   width:100% até o teto de 360px do design: centraliza sozinho,
   qualquer que seja a largura exata que o host reservar, sem herdar a
   ancoragem de canto que só faz sentido flutuando solto. Arraste
   desativado nesse modo à parte, em draggable.js — não faz sentido
   arrastar dentro de um container fixo do host (mesmo raciocínio já
   documentado abaixo pra .sipStatus). */
#sipClient.embutido {
  position: relative;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
}
#sipClient.embutido .history-drawer {
  right: 0;
  left: auto;
  margin-right: 0;
  border-radius: 8px 0 0 8px;
  z-index: 20;
}

/* Engrenagem de Configurações (pedido do usuário, 2026-09-12): no modo
   embutido ela é inerte — salva em localStorage.SIPCreds, mas app.js
   embutido nunca lê localStorage (só aceita credencial por postMessage do
   host, ver settings.js). Clicável e muda, sem avisar que não faz nada —
   escondida aqui pra não confundir quem clicar dentro do iframe. Aberta
   direto no navegador (sem ?embedded=1, sem body.embutido) ela continua
   aparecendo e cumprindo o papel original (única forma de configurar o
   ctxSip avulso). */
#sipClient.embutido #btnSettings {
  display: none;
}

/* Barra .sipStatus (faixa de arrastar + hambúrguer de minimizar, pedido
   do usuário, 2026-09-12): no modo embutido quem decide colapsar/expandir
   é o HOST (SoftphoneWidget, com seu próprio cabeçalho e clique pra
   abrir/fechar) — o hambúrguer do ctxSip minimizava só #phoneUI por
   dentro do iframe, deixando a faixa fina sobrando entre o telefone e a
   margem que o host já reserva pro widget (dois controles de
   colapsar disputando o mesmo espaço, um "por cima" do outro). Escondida
   inteira (arraste + hambúrguer) só quando embutido; o arraste também não
   fazia sentido aqui — mover a POSIÇÃO do widget na tela do host é o
   SoftphoneWidget que faz (arrastoRef em SoftphoneWidget.tsx), não o
   ctxSip. Standalone (navegador direto) continua com a barra e o
   hambúrguer cumprindo o papel original. */
#sipClient.embutido .sipStatus {
  display: none;
}

/* Linhas simultâneas (F1, 2026-09-14). Cor explícita (achado ao vivo,
   14/09: sem `color`, texto herdava preto do browser e ficava invisível
   no tema escuro — as abas apareciam como caixas vazias e enormes).
   Compacto de propósito (achado ao vivo, 14/09: v1 sem ícone/tamanho
   fixo ficava grande demais e sem indicação nenhuma do que era) — ícone
   SVG (mesmo padrão dos outros ícones do app) + nome + status numa
   linha só. Movido pra dentro do display (pedido do usuário, 2026-09-14:
   "devem aparecer no display... e as mensagens também no display") —
   cores do LCD (amarelo/preto, VT323), não mais o tema escuro do widget;
   clicável (cursor pointer) pra trocar o foco entre as linhas. */
#sipClient .phone-display .linhas-tabs { display: flex; align-items: center; justify-content: center; gap: 8px; }
#sipClient .phone-display .linha-tab {
  display: flex; align-items: center; gap: 3px;
  padding: 0; border: none;
  font-family: 'VT323', monospace; font-size: 11px; line-height: 1;
  color: var(--sp-display-text-dim); opacity: 0.75; cursor: pointer;
}
#sipClient .phone-display .linha-tab.linha-ocupada { opacity: 1; color: var(--sp-display-text); border-color: #5cb85c; }
/* Linha ATIVA (em foco agora, não só "ocupada") — distinção pedida após
   teste manual (2026-09-15): usuário não conseguia dizer qual das duas
   chamadas em andamento estava sendo ouvida no momento. */
#sipClient .phone-display .linha-tab.linha-ativa { border-bottom: 2px solid #5cb85c; }
/* Ícone cinza (livre) / preto (ocupada — tocando, ativa ou em espera) —
   independente da cor do texto, pedido do usuário 2026-09-14. */
#sipClient .phone-display .linha-tab svg { flex: none; color: var(--sp-display-placeholder); }
#sipClient .phone-display .linha-tab.linha-ocupada svg { color: var(--sp-display-text); }
#sipClient .phone-display .linha-tab .linha-nome { font-weight: bold; }
#sipClient .phone-display .linha-tab .linha-status { opacity: 0.85; }
/* Afasta o botão "Unir chamadas" das abas de linha — achado em teste
   manual (2026-09-15): ícone perto demais das abas causava clique
   confundido com "trocar de linha", disparando a conferência sem
   querer. */
#sipClient #btnUnirChamadas { margin-left: 10px; }