#tela-chamada { --header-h: 88px; }
.rail-voz { width: 76px; padding: 14px 0 16px; gap: 6px; background: linear-gradient(180deg, #2800c8 0%, #1d0099 100%); position: relative; box-shadow: 4px 0 24px rgba(15, 15, 114, .18); z-index: 8; }
.rail-marca { width: 100%; padding: 4px 9px 2px; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.rail-marca .synapse-logo { width: 58px; height: auto; display: block; }
.rail-linha { width: 30px; height: 1px; background: rgba(255, 255, 255, .22); margin: 8px 0 6px; flex: none; }
.rail-espaco { flex: 1; }
.rail-item {
  position: relative; width: 46px; height: 46px; border-radius: 15px; border: 0; background: transparent; color: rgba(255, 255, 255, .78);
  display: flex; align-items: center; justify-content: center; transition: background .2s, color .2s, transform .2s;
}
.rail-item .i { font-size: 22px; }
.rail-item:hover { background: rgba(255, 255, 255, .14); color: #fff; transform: translateX(2px); }
.rail-item.aberto { background: var(--yellow); color: var(--navy); }
.rail-item--ativo { color: var(--yellow); }
.rail-item.desligado { color: #ff8da4; background: rgba(255, 75, 110, .16); }
.rail-item--sair:hover { background: rgba(255, 75, 110, .25); color: #fff; }
.rail-item::after {
  content: attr(data-rotulo); position: absolute; left: calc(100% + 12px); top: 50%; transform: translate(-6px, -50%); white-space: nowrap;
  padding: 6px 12px; border-radius: 10px; background: var(--navy); color: #fff; font: 500 12px var(--font); opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s; z-index: 30;
}
.rail-item:hover::after { opacity: 1; transform: translate(0, -50%); }
.rail-selo { position: absolute; top: 3px; right: 2px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--yellow); color: var(--navy); font: 700 10px/18px var(--font); text-align: center; }
.rail-volume { position: absolute; left: 84px; bottom: 150px; z-index: 40; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 16px; border-radius: 16px; background: #fff; box-shadow: 0 14px 40px rgba(40, 0, 200, .28); color: var(--navy); font: 600 12px var(--font); }
.rail-volume[hidden] { display: none; }
.rail-volume input { width: 130px; accent-color: var(--blue); }

.topo {
  position: relative; z-index: 4; height: var(--header-h); flex: none; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; padding: 0 28px;
  background: linear-gradient(100deg, #1b0aa6 0%, #2800c8 48%, #3b17e6 100%); color: #fff; box-shadow: 0 8px 28px rgba(40, 0, 200, .22);
}
.topo::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 18% 120%, rgba(0, 174, 239, .35), transparent 46%), radial-gradient(circle at 92% -40%, rgba(240, 250, 0, .22), transparent 40%); pointer-events: none; }
.topo > * { position: relative; }
.topo-esq { display: flex; align-items: center; gap: 18px; min-width: 0; }
.topo-pessoa { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 6px 18px 6px 6px; border-radius: 999px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .22); backdrop-filter: blur(6px); }
.topo-avatar { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; border: 2.5px solid var(--yellow); background: var(--blue-soft); flex: none; }
.topo-pessoa strong { display: block; font: 600 15px/1.2 var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px; }
.topo-pessoa small { display: block; margin-top: 2px; font: 500 11px/1.2 var(--font); color: rgba(255, 255, 255, .7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px; }
.topo-chips { display: flex; gap: 8px; }
.topo-chips li { padding: 5px 12px; border-radius: 14px; background: rgba(255, 255, 255, .14); font: 500 12px var(--font); white-space: nowrap; }
.topo-chips li:empty { display: none; }
.topo-centro { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.topo-ao-vivo { display: flex; align-items: center; gap: 8px; font: 600 11px var(--font); letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .85); }
.topo-ao-vivo i { width: 9px; height: 9px; border-radius: 50%; background: var(--green); animation: ao-vivo 1.6s ease-out infinite; }
@keyframes ao-vivo { 0% { box-shadow: 0 0 0 0 rgba(0, 184, 90, .7); } 100% { box-shadow: 0 0 0 10px rgba(0, 184, 90, 0); } }
.topo-relogio { font: 600 28px/1 var(--font); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.topo-estimado { font: 500 11px var(--font); color: rgba(255, 255, 255, .62); min-height: 14px; }
.topo-acoes { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.topo-btn {
  position: relative; height: 40px; display: inline-flex; align-items: center; gap: 8px; padding: 0 18px; border-radius: 20px; border: 1.5px solid rgba(255, 255, 255, .55);
  background: rgba(255, 255, 255, .08); color: #fff; font: 500 13px var(--font); white-space: nowrap; transition: background .2s, color .2s, transform .2s, box-shadow .2s;
}
.topo-btn .i { font-size: 17px; }
.topo-btn:hover { background: #fff; color: var(--blue); transform: translateY(-1px); }
.topo-btn--destaque { background: var(--yellow); border-color: var(--yellow); color: var(--navy); font-weight: 600; }
.topo-btn--destaque:hover { background: #fff; border-color: #fff; box-shadow: 0 8px 22px rgba(0, 0, 0, .25); }
.topo-btn--destaque.aberto { background: #fff; border-color: #fff; color: var(--blue); }
.topo .client-info-toggle-badge { position: absolute; top: -9px; right: -4px; }
.topo-progresso { position: absolute !important; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255, 255, 255, .16); }
.topo-progresso i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--yellow), var(--cyan)); transition: width 1s linear; }
.topo-progresso.estourou i { background: linear-gradient(90deg, var(--yellow), var(--red)); }

.gaveta {
  position: absolute; left: 14px; top: calc(var(--header-h) + 14px); bottom: 14px; z-index: 7; width: 320px; display: flex; flex-direction: column; gap: 10px; padding: 18px;
  border-radius: 20px; background: #fff; box-shadow: 0 18px 50px rgba(15, 15, 114, .35);
}
.gaveta[hidden] { display: none; }
.gaveta-cabeca { display: flex; align-items: center; justify-content: space-between; font: 600 16px var(--font); color: var(--blue); }
.gaveta textarea { flex: 1; resize: none; border: 1.5px solid var(--line); border-radius: 12px; padding: 12px 14px; font: 400 14px/1.5 var(--font); }
.gaveta textarea:focus { outline: none; border-color: var(--blue); }
.gaveta small { color: var(--muted); font: 400 11px/1.4 var(--font); }

.dica-flutuante { position: absolute; left: 0; right: 0; bottom: 124px; display: flex; justify-content: center; pointer-events: none; z-index: 5; }
.dica-flutuante .ai-dica-panel { position: relative; left: auto; right: auto; bottom: auto; width: min(760px, calc(100% - 64px)); color: var(--ink); text-align: left; }
.dica-flutuante .ai-dica-panel::after { display: none; }

.palco-voce.mudo { opacity: .55; }
.palco-fala.escondida { visibility: hidden; }

@media (max-width: 1200px) {
  .topo-chips { display: none; }
  .topo-estimado { display: none; }
}
@media (max-width: 900px) {
  .topo { grid-template-columns: 1fr auto; }
  .topo-centro { display: none; }
}

.erro-chamada {
  position: absolute; left: 50%; bottom: 124px; z-index: 6; width: min(780px, calc(100% - 64px)); display: flex; align-items: center; gap: 16px; padding: 16px 20px 16px 22px;
  border-radius: 16px; background: #fff; color: var(--ink); box-shadow: 0 18px 50px rgba(15, 15, 114, .45); border-left: 6px solid var(--red);
  opacity: 0; visibility: hidden; transform: translate(-50%, 16px); transition: opacity .3s, transform .35s cubic-bezier(.2, .8, .2, 1), visibility 0s .35s;
}
.erro-chamada.aberto { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
.erro-icone { flex: none; width: 40px; height: 40px; border-radius: 50%; background: #ffe3e9; color: var(--red); display: flex; align-items: center; justify-content: center; }
.erro-icone .i { font-size: 22px; }
.erro-texto { flex: 1; min-width: 0; text-align: left; }
.erro-texto strong { display: block; font: 600 15px/1.3 var(--font); color: var(--navy); }
.erro-texto p { margin-top: 3px; font: 400 13px/1.45 var(--font); color: var(--muted); }
.erro-acoes { display: flex; flex-direction: column; gap: 8px; flex: none; }
.erro-acoes .btn-sm { height: 38px; padding: 0 18px; font-size: 13px; }
@media (max-width: 900px) { .erro-chamada { flex-wrap: wrap; } .erro-acoes { flex-direction: row; width: 100%; } }