[hidden] { display: none !important; }
:root {
  --bg: #0f172a;
  --panel: #ffffff;
  --muted: #64748b;
  --line: #e2e8f0;
  --accent: #0f766e;
  --accent-dark: #115e59;
  --danger: #dc2626;
  --warn: #b45309;
  --ok: #15803d;
  --soft: #f8fafc;
  --text: #0f172a;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; background: #f1f5f9; color: var(--text); }
button, input, textarea, select { font: inherit; }
button { border: 0; border-radius: 12px; background: var(--accent); color: white; padding: 10px 14px; font-weight: 700; cursor: pointer; }
button:hover { background: var(--accent-dark); }
button:disabled { opacity: .5; cursor: not-allowed; }
button.ghost { background: #e2e8f0; color: #0f172a; }
.login-shell { min-height: 100vh; display: grid; place-items: center; background: radial-gradient(circle at top left, #164e63, #0f172a 45%, #020617); padding: 24px; }
.login-card { width: min(420px, 100%); background: rgba(255,255,255,.96); border: 1px solid rgba(255,255,255,.4); border-radius: 28px; box-shadow: 0 25px 70px rgba(0,0,0,.32); padding: 30px; display: grid; gap: 14px; }
.brand-mark { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; background: linear-gradient(135deg, #0f766e, #0891b2); color: white; font-weight: 900; letter-spacing: .08em; }
.login-card h1 { margin: 0; font-size: 28px; }
.login-card p { margin: 0 0 6px; color: var(--muted); }
label { display: grid; gap: 6px; font-size: 13px; font-weight: 700; color: #334155; }
input, textarea, select { border: 1px solid var(--line); border-radius: 12px; padding: 11px 12px; background: white; color: var(--text); outline: none; }
input:focus, textarea:focus, select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(15,118,110,.12); }
.error-message { background: #fee2e2; color: #991b1b; padding: 10px 12px; border-radius: 12px; font-size: 14px; }
.topbar { height: 64px; display: flex; align-items: center; justify-content: space-between; padding: 0 18px; background: #0f172a; color: white; }
.topbar strong { display: block; font-size: 17px; }
.topbar span { color: #cbd5e1; font-size: 13px; }
.top-actions { display: flex; align-items: center; gap: 10px; }
.layout { height: calc(100vh - 64px); display: grid; grid-template-columns: 340px minmax(360px, 1fr) 320px; gap: 1px; background: var(--line); }
.sidebar, .chat-panel, .details-panel { background: var(--panel); min-height: 0; }
.sidebar { display: flex; flex-direction: column; }
.filter-box { padding: 12px; display: grid; grid-template-columns: 1fr; gap: 8px; border-bottom: 1px solid var(--line); }
.conversation-list { overflow: auto; }
.conversation-item { display: grid; gap: 5px; padding: 13px 14px; border-bottom: 1px solid var(--line); cursor: pointer; }
.conversation-item:hover, .conversation-item.active { background: #ecfeff; }
.conversation-line { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.conversation-name { font-weight: 800; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.conversation-phone, .conversation-preview, .conversation-meta { color: var(--muted); font-size: 12px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.unread { min-width: 22px; height: 22px; display: inline-grid; place-items: center; border-radius: 999px; background: var(--accent); color: white; font-size: 12px; font-weight: 800; }
.status-chip { display: inline-block; border-radius: 999px; padding: 3px 8px; background: #e2e8f0; color: #334155; font-size: 11px; font-weight: 800; }
.chat-panel { min-width: 0; }
.empty-state { height: 100%; display: grid; place-items: center; text-align: center; color: var(--muted); padding: 24px; }
.chat-view { height: 100%; display: grid; grid-template-rows: auto 1fr auto auto; min-height: 0; }
.chat-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.chat-header h2 { margin: 0; font-size: 18px; }
.chat-header span { color: var(--muted); font-size: 13px; }
.window-badge { border-radius: 999px; padding: 6px 10px; background: #dcfce7; color: #166534; font-size: 12px; font-weight: 900; }
.window-badge.closed { background: #fee2e2; color: #991b1b; }
.messages { overflow: auto; padding: 18px; background: #f8fafc; display: flex; flex-direction: column; gap: 10px; }
.message { max-width: min(640px, 88%); padding: 10px 12px; border-radius: 16px; box-shadow: 0 1px 2px rgba(15,23,42,.08); white-space: pre-wrap; word-break: break-word; }
.message.inbound { align-self: flex-start; background: white; border-bottom-left-radius: 4px; }
.message.outbound { align-self: flex-end; background: #ccfbf1; border-bottom-right-radius: 4px; }
.message-meta { display: flex; gap: 8px; margin-top: 5px; color: #64748b; font-size: 11px; }
.quick-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--line); }
.composer { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 12px 14px; border-top: 1px solid var(--line); background: white; align-items: end; }
.composer textarea { resize: vertical; min-height: 54px; max-height: 160px; }
.send-hint { min-height: 26px; color: var(--muted); font-size: 12px; padding: 0 14px 10px; }
.details-panel { padding: 16px; overflow: auto; display: flex; flex-direction: column; gap: 12px; }
.details-panel h3 { margin: 0 0 4px; }
.info-card { background: var(--soft); border: 1px solid var(--line); border-radius: 18px; padding: 14px; }
.info-card p { margin: 8px 0; color: #334155; }
pre { white-space: pre-wrap; word-break: break-word; margin: 0; color: #334155; font-size: 12px; }

.chat-title-area { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mobile-back { display: none; padding: 8px 10px; border-radius: 10px; background: #e2e8f0; color: #0f172a; white-space: nowrap; }

@media (max-width: 1100px) { .layout { grid-template-columns: 300px 1fr; } .details-panel { display: none; } }
@media (max-width: 760px) {
  html, body { width: 100%; min-height: 100%; overflow: hidden; }
  body { background: #fff; }

  .login-shell { min-height: 100dvh; padding: 14px; }
  .login-card { border-radius: 22px; padding: 22px; }
  .login-card h1 { font-size: 24px; }

  .topbar {
    min-height: 74px;
    height: auto;
    gap: 10px;
    flex-direction: column;
    align-items: stretch;
    padding: 10px 12px;
  }
  .topbar > div:first-child { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
  .top-actions { width: 100%; display: grid; grid-template-columns: 1fr auto auto; gap: 8px; }
  .top-actions button { padding: 9px 10px; border-radius: 10px; }
  #agentName { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; align-self: center; }

  .layout {
    height: calc(100dvh - 92px);
    display: block;
    overflow: hidden;
    background: #fff;
  }
  .sidebar { display: flex; height: 100%; min-height: 0; }
  .filter-box { position: sticky; top: 0; z-index: 2; background: #fff; padding: 10px; }
  .conversation-list { flex: 1; min-height: 0; }
  .conversation-item { padding: 14px 12px; }

  .chat-panel { display: none; height: 100%; min-height: 0; }
  .details-panel { display: none; }

  .app-shell.chat-open .sidebar { display: none; }
  .app-shell.chat-open .chat-panel { display: block; height: 100%; }
  .app-shell.chat-open .details-panel {
    display: flex;
    height: auto;
    max-height: 42dvh;
    overflow: auto;
    border-top: 1px solid var(--line);
    padding: 12px;
  }
  .app-shell.chat-open .layout { overflow-y: auto; -webkit-overflow-scrolling: touch; }

  .mobile-back { display: inline-flex; align-items: center; justify-content: center; }
  .chat-title-area { flex: 1; min-width: 0; }
  .chat-title-area > div { min-width: 0; }
  .chat-header { padding: 10px 12px; gap: 8px; }
  .chat-header h2 { font-size: 16px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 46vw; }
  .chat-header span { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 46vw; }
  .window-badge { padding: 5px 8px; font-size: 11px; max-width: 38vw; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

  .chat-view { height: 100%; min-height: 0; grid-template-rows: auto 1fr auto auto auto; }
  .messages { padding: 12px; gap: 8px; }
  .message { max-width: 92%; font-size: 14px; }
  .quick-row { padding: 8px 10px; grid-template-columns: 1fr auto; }
  .quick-row button { padding: 9px 10px; }
  .composer { padding: 9px 10px; gap: 8px; grid-template-columns: 1fr auto; }
  .composer textarea { min-height: 46px; max-height: 110px; padding: 10px; }
  .composer button { padding: 10px 12px; }
  .send-hint { padding: 0 10px 8px; font-size: 11px; }
  .info-card { border-radius: 14px; padding: 12px; }
  .toast { right: 10px; bottom: 10px; max-width: calc(100vw - 20px); }
}

@media (max-width: 420px) {
  .top-actions { grid-template-columns: 1fr auto auto; }
  .top-actions button { font-size: 13px; padding: 8px; }
  .brand-mark { width: 50px; height: 50px; }
  .window-badge { max-width: 34vw; }
  .chat-header h2, .chat-header span { max-width: 42vw; }
  .quick-row { grid-template-columns: 1fr; }
  .composer { grid-template-columns: 1fr; }
  .composer button { width: 100%; }
}

/* Ajustes de performance/UX da versão otimizada */
.conversation-item {
  width: 100%;
  text-align: left;
  border: 0;
  border-radius: 0;
  background: #fff;
  color: var(--text);
  font-weight: 400;
  box-shadow: none;
}
.conversation-item:hover,
.conversation-item.active {
  background: #ecfeff;
  color: var(--text);
}
.conversation-item:focus-visible {
  outline: 2px solid rgba(15,118,110,.35);
  outline-offset: -2px;
}
.empty-state small {
  display: block;
  margin-top: 8px;
  color: #94a3b8;
}
.toast {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9999;
  max-width: min(420px, calc(100vw - 36px));
  padding: 12px 14px;
  border-radius: 14px;
  background: #0f172a;
  color: white;
  box-shadow: 0 18px 50px rgba(15,23,42,.28);
  font-size: 14px;
  font-weight: 700;
}
.toast.success { background: #166534; }
.toast.error { background: #991b1b; }
.toast.info { background: #0f172a; }

/* Roteamento de atendimento */
.conversation-assigned {
  color: #64748b;
  font-size: 11px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.assignment-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 12px;
}
.assignment-card small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.assignment-card strong {
  display: block;
  margin-top: 3px;
  color: #0f172a;
}
.assignment-card strong.mine {
  color: #0f766e;
}
#claimBtn, #transferBtn {
  color: #0f172a;
}

/* Mídias V1 */
.message-body { white-space: pre-wrap; }
.media-box {
  margin-top: 8px;
  border: 1px solid var(--line);
  background: rgba(248,250,252,.9);
  border-radius: 14px;
  padding: 10px;
  display: grid;
  gap: 6px;
  max-width: 100%;
}
.message.outbound .media-box { background: rgba(240,253,250,.75); }
.media-box.muted { color: #64748b; font-size: 13px; }
.media-box.error { color: #991b1b; background: #fee2e2; border-color: #fecaca; font-size: 13px; }
.media-name { font-weight: 800; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.media-size { color: #64748b; font-size: 12px; }
.media-load-btn,
.media-open-btn {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--text);
  border-radius: 12px;
  padding: 8px 10px;
  cursor: pointer;
  font-weight: 800;
  box-shadow: none;
}
.media-load-btn:hover,
.media-open-btn:hover { background: #f1f5f9; }
.media-load-btn:disabled { opacity: .7; cursor: wait; }
.media-preview {
  display: block;
  max-width: min(360px, 100%);
  max-height: 360px;
  border-radius: 12px;
  object-fit: contain;
  background: #fff;
}
.media-audio { width: min(340px, 100%); }
.media-video {
  display: block;
  max-width: min(420px, 100%);
  max-height: 360px;
  border-radius: 12px;
  background: #000;
}
@media (max-width: 760px) {
  .media-preview, .media-video { max-width: 100%; max-height: 300px; }
  .media-audio { width: 100%; }
}

/* Fila privada V1.2 */
.conversation-item {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: stretch;
  padding: 0;
  border-bottom: 1px solid var(--line);
}
.conversation-item.locked { background: #fff; }
.conversation-item.active { background: #ecfeff; }
.conversation-main {
  width: 100%;
  text-align: left;
  display: grid;
  gap: 5px;
  padding: 13px 8px 13px 14px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  box-shadow: none;
  font-weight: 400;
  min-width: 0;
}
.conversation-main:hover { background: transparent; color: var(--text); }
.conversation-dots {
  align-self: start;
  margin: 10px 8px 0 0;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 999px;
  background: #f1f5f9;
  color: #334155;
  font-size: 18px;
  line-height: 1;
}
.conversation-dots:hover { background: #dbeafe; color: #0f172a; }
.conversation-badges { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; }
.privacy-chip {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 3px 7px;
  background: #fff7ed;
  color: #9a3412;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.locked-card {
  align-self: center;
  margin: auto;
  width: min(420px, 100%);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 22px;
  text-align: center;
  box-shadow: 0 8px 30px rgba(15,23,42,.08);
}
.locked-card h3 { margin: 0 0 8px; }
.locked-card p { color: var(--muted); margin: 0 0 16px; }
.context-menu {
  position: fixed;
  z-index: 10000;
  width: 168px;
  background: rgba(255,255,255,.98);
  border: 1px solid rgba(203,213,225,.82);
  border-radius: 12px;
  padding: 5px;
  box-shadow: 0 14px 36px rgba(15,23,42,.18);
  backdrop-filter: blur(10px);
}
.context-menu button {
  width: 100%;
  min-height: 32px;
  display: flex;
  align-items: center;
  text-align: left;
  border-radius: 8px;
  background: transparent;
  color: #0f172a;
  padding: 6px 8px;
  font-size: 13px;
  line-height: 1.22;
  font-weight: 760;
  letter-spacing: -.01em;
}
.context-menu button:hover { background: #f1f5f9; }
.context-menu button.danger { color: #991b1b; font-weight: 800; }
.context-menu button.danger:hover { background: #fff1f2; }
.menu-empty { color: var(--muted); font-size: 12px; padding: 8px 8px; }
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10001;
  display: grid;
  place-items: center;
  background: rgba(15,23,42,.46);
  padding: 20px;
}
.modal-card {
  width: min(420px, 100%);
  background: #fff;
  border-radius: 22px;
  padding: 20px;
  box-shadow: 0 24px 80px rgba(15,23,42,.32);
  display: grid;
  gap: 12px;
}
.modal-card h3 { margin: 0; }
.modal-card p { margin: 0; color: var(--muted); }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; }
@media (max-width: 760px) {
  .conversation-main { padding: 13px 6px 13px 12px; }
  .conversation-dots { margin-right: 6px; }
  .context-menu { right: 8px !important; left: auto !important; }
  .modal-card { border-radius: 18px; }
}

/* V1.3 — Chat mais leve, privado e com mais vida */
:root {
  --accent: #128c7e;
  --accent-dark: #075e54;
  --chat-bg: #efeae2;
  --bubble-in: #ffffff;
  --bubble-out: #dcf8c6;
  --bubble-pending: #e8f7ff;
}
body { background: #e8eef2; }
.topbar {
  background: linear-gradient(135deg, #075e54, #128c7e);
  box-shadow: 0 1px 0 rgba(0,0,0,.08);
}
.topbar button { border-radius: 999px; padding: 8px 12px; }
.layout { background: #d6dee4; grid-template-columns: 344px minmax(360px, 1fr) 310px; }
.sidebar { background: #f8fafc; }
.filter-box { background: #f8fafc; }
.conversation-list { scrollbar-width: thin; }
.conversation-item { background: #fff; transition: background .08s ease; }
.conversation-item:hover { background: #f0fdfa; }
.conversation-item.active { background: #ddf7f1; box-shadow: inset 4px 0 0 var(--accent); }
.conversation-name { color: #0f172a; }
.conversation-preview { color: #64748b; }
.conversation-item.locked .conversation-name { color: #334155; }
.conversation-item.locked .conversation-preview { color: #9a3412; }
.privacy-chip { background: #ffedd5; color: #9a3412; }
.unread { background: #25d366; color: #052e16; }
.chat-panel { background: var(--chat-bg); }
.chat-header {
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px);
}
.chat-view { background: var(--chat-bg); }
.messages {
  background:
    radial-gradient(circle at 20% 15%, rgba(255,255,255,.55), transparent 24%),
    radial-gradient(circle at 90% 80%, rgba(18,140,126,.08), transparent 28%),
    var(--chat-bg);
}
.message {
  border: 0;
  box-shadow: 0 1px 2px rgba(15,23,42,.09);
  line-height: 1.38;
}
.message.inbound { background: var(--bubble-in); border-top-left-radius: 6px; }
.message.outbound { background: var(--bubble-out); border-top-right-radius: 6px; }
.message.optimistic { background: var(--bubble-pending); opacity: .92; }
.message-meta { gap: 8px; justify-content: flex-end; color: #64748b; }
.composer {
  background: rgba(255,255,255,.92);
  border-top: 1px solid rgba(148,163,184,.35);
}
.composer textarea {
  border-radius: 18px;
  min-height: 48px;
  resize: none;
  background: #fff;
}
.composer button {
  border-radius: 999px;
  min-width: 86px;
  background: #25d366;
  color: #052e16;
}
.composer button:hover { background: #1fc05d; }
.composer button.sending::after { content: '...'; }
.send-hint { background: rgba(255,255,255,.92); }
.details-panel { background: #f8fafc; }
.info-card, .assignment-card {
  background: #fff;
  box-shadow: 0 1px 2px rgba(15,23,42,.05);
}
.window-badge { background: #dcfce7; color: #166534; }
.window-badge.closed { background: #ffe4e6; color: #9f1239; }
.locked-card {
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(148,163,184,.35);
}
.locked-card button { border-radius: 999px; background: #25d366; color: #052e16; }
.context-menu { animation: none; }
.media-box { background: rgba(255,255,255,.7); }
.media-load-btn, .media-open-btn { border-radius: 999px; }
.quick-row { display: none !important; }
@media (max-width: 760px) {
  .layout { grid-template-columns: 1fr; }
  .chat-view { background: var(--chat-bg); }
  .details-panel { background: #f8fafc; }
}

/* V2.6 - Fila separada e privacidade forte */
.conversation-section-title {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 14px;
  background: #eef6f4;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  color: #0f766e;
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.conversation-section-title strong {
  min-width: 22px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: #ccfbf1;
  color: #115e59;
  font-size: 11px;
}
.queue-hint {
  margin-left: auto;
  color: #0f766e;
  font-weight: 900;
  font-size: 11px;
}
.conversation-item.locked .conversation-main { cursor: default; }
.conversation-item.locked:hover { background: #fffaf0; }

/* SGP Card v2.8 */
.sgp-card-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; }
.sgp-card-head h3 { margin:0; }
button.mini { padding:6px 10px; font-size:12px; border-radius:999px; }
.sgp-box { font-size:13px; line-height:1.45; color:#0f172a; }
.sgp-box pre, .sgp-raw { white-space:pre-wrap; overflow:auto; max-height:280px; background:#0f172a; color:#e2e8f0; padding:10px; border-radius:12px; }
.sgp-empty { background:#f1f5f9; border:1px dashed #cbd5e1; border-radius:14px; padding:12px; color:#475569; display:grid; gap:4px; }
.sgp-empty small { color:#64748b; }
.sgp-client { display:grid; gap:6px; }
.sgp-client h4 { margin:0; font-size:16px; color:#0f172a; }
.sgp-client p { margin:0; color:#334155; }
.sgp-found { display:inline-flex; width:max-content; background:#dcfce7; color:#166534; border:1px solid #86efac; border-radius:999px; padding:4px 8px; font-weight:800; font-size:12px; }
.sgp-tags { display:flex; flex-wrap:wrap; gap:6px; }
.sgp-tags span { background:#e0f2fe; color:#075985; border:1px solid #bae6fd; padding:3px 7px; border-radius:999px; font-weight:700; font-size:12px; }
.sgp-contract { background:#fff; border:1px solid #e2e8f0; box-shadow:0 6px 16px rgba(15,23,42,.05); border-radius:14px; padding:10px; display:grid; gap:6px; }
.sgp-contract.maintenance { border-color:#fbbf24; background:#fffbeb; }
.sgp-contract-head { display:flex; justify-content:space-between; gap:8px; align-items:center; }
.sgp-contract-head span { background:#f1f5f9; border-radius:999px; padding:2px 7px; color:#64748b; font-size:11px; font-weight:800; text-transform:uppercase; }
.sgp-alert { background:#fef3c7; color:#92400e; border-radius:10px; padding:7px 8px; font-weight:700; }

/* V2.9 — Painel lateral só aparece com atendimento iniciado */
.app-shell .layout {
  grid-template-columns: 344px minmax(360px, 1fr);
}
.app-shell .details-panel {
  display: none;
}
.app-shell.details-active .layout {
  grid-template-columns: 344px minmax(360px, 1fr) 320px;
}
.app-shell.details-active .details-panel {
  display: flex;
}
.client-panel-card {
  display: grid;
  grid-template-columns: 48px 1fr;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: 20px;
  background: linear-gradient(135deg, #ecfdf5, #ffffff);
  border: 1px solid #ccfbf1;
  box-shadow: 0 8px 28px rgba(15, 118, 110, .08);
}
.client-avatar {
  width: 48px;
  height: 48px;
  border-radius: 17px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #075e54, #25d366);
  color: #fff;
  font-weight: 950;
  letter-spacing: .04em;
}
.client-main {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.client-main small {
  color: #0f766e;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.client-main strong {
  font-size: 17px;
  color: #0f172a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.client-main span {
  color: #64748b;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.client-mini-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.mini-stat {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 12px;
  box-shadow: 0 1px 2px rgba(15,23,42,.05);
}
.mini-stat small {
  display: block;
  color: #64748b;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 4px;
}
.mini-stat strong {
  display: block;
  color: #0f172a;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.app-shell:not(.details-active) .chat-panel {
  box-shadow: none;
}
.app-shell:not(.details-active) #emptyChat h2::after {
  content: ' ou aceite um atendimento da fila';
}
@media (max-width: 1100px) {
  .app-shell .layout,
  .app-shell.details-active .layout {
    grid-template-columns: 300px 1fr;
  }
  .app-shell.details-active .details-panel {
    display: none;
  }
}
@media (max-width: 760px) {
  .app-shell .layout,
  .app-shell.details-active .layout {
    grid-template-columns: 1fr;
  }
  .app-shell.chat-open .details-panel {
    display: none !important;
  }
  .app-shell.chat-open.details-active .details-panel {
    display: flex !important;
    height: auto;
    max-height: 42dvh;
    overflow: auto;
    border-top: 1px solid var(--line);
    padding: 12px;
  }
  .client-mini-grid { grid-template-columns: 1fr 1fr; }
}

/* V3.0 — Barra superior inteligente + lateral sanfonada */
.chat-view { grid-template-rows: auto auto 1fr auto auto; }
.smart-contact-bar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto auto;
  gap: 14px;
  align-items: center;
  padding: 10px 14px;
  background: linear-gradient(90deg, #ffffff, #f8fafc);
  border-bottom: 1px solid rgba(148,163,184,.35);
  box-shadow: 0 1px 0 rgba(15,23,42,.03);
}
.smart-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.smart-avatar {
  width: 42px; height: 42px; border-radius: 14px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, #075e54, #25d366);
  color: #fff; font-weight: 950; letter-spacing: .04em;
  box-shadow: 0 8px 20px rgba(7,94,84,.18);
}
.smart-identity { display: grid; gap: 2px; min-width: 0; }
.smart-name-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.smart-name-row strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
.smart-identity span, .smart-identity small { color: #475569; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.smart-identity small { font-size: 11px; color: #64748b; }
.smart-chip, .smart-pill {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; padding: 4px 8px;
  font-size: 11px; font-weight: 900; white-space: nowrap;
  border: 1px solid transparent;
}
.smart-chip.normal { background: #dcfce7; color: #166534; border-color: #86efac; }
.smart-indicators { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; justify-content: flex-end; }
.smart-pill { background: #f1f5f9; color: #334155; border-color: #e2e8f0; }
.smart-pill.ok { background: #dcfce7; color: #166534; border-color: #86efac; }
.smart-pill.warn { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.smart-pill.bad { background: #ffe4e6; color: #9f1239; border-color: #fecdd3; }
.smart-actions { display: flex; gap: 8px; align-items: center; justify-content: flex-end; }
.icon-btn {
  width: 38px; height: 38px; padding: 0; border-radius: 999px;
  display: inline-grid; place-items: center;
  background: #f1f5f9; color: #334155;
  border: 1px solid #e2e8f0; font-size: 17px;
}
.icon-btn:hover { background: #e2e8f0; color: #0f172a; }
.icon-btn.danger { background: #fff1f2; color: #e11d48; border-color: #fecdd3; }
.icon-btn.danger:hover { background: #ffe4e6; color: #be123c; }

.details-panel { padding: 0; gap: 0; background: #f8fafc; }
.accordion-panel-shell { display: flex; flex-direction: column; width: 100%; }
.accordion-toggle {
  width: 100%; min-height: 52px;
  display: flex; align-items: center; justify-content: space-between;
  border: 0; border-radius: 0;
  padding: 0 16px;
  background: #ffffff; color: #0f172a;
  border-bottom: 1px solid #e2e8f0;
  font-weight: 900; text-align: left;
}
.accordion-toggle:hover { background: #f8fafc; color: #0f766e; }
.accordion-toggle strong { font-size: 22px; transition: transform .16s ease; color: #64748b; }
.accordion-toggle.active strong { transform: rotate(90deg); color: #0f766e; }
.accordion-toggle.active { background: #ecfdf5; color: #0f766e; }
.accordion-panel {
  display: none;
  gap: 12px;
  padding: 14px;
  border-bottom: 1px solid #e2e8f0;
  background: #f8fafc;
}
.accordion-panel.active { display: grid; }
.compact-card { padding: 12px; border-radius: 14px; }
.compact-card h3 { margin: 0 0 8px; font-size: 15px; }
.side-list-empty {
  background: #fff;
  border: 1px dashed #cbd5e1;
  border-radius: 14px;
  padding: 12px;
  color: #64748b;
  font-weight: 700;
  font-size: 13px;
}
.side-list { display: grid; gap: 8px; }
.side-item {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 10px;
  display: grid; gap: 4px;
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
}
.side-item strong { color: #0f172a; font-size: 13px; }
.side-item span, .side-item small { color: #64748b; font-size: 12px; }
.side-item.warn { border-color: #fde68a; background: #fffbeb; }
.side-item.ok { border-color: #bbf7d0; background: #f0fdf4; }

@media (max-width: 900px) {
  .smart-contact-bar { grid-template-columns: 1fr; gap: 10px; }
  .smart-indicators, .smart-actions { justify-content: flex-start; }
}
@media (max-width: 760px) {
  .smart-contact-bar { padding: 10px 12px; }
  .smart-actions { display: none; }
  .smart-indicators { gap: 5px; }
  .smart-pill { font-size: 10px; padding: 3px 7px; }
  .app-shell.chat-open.details-active .details-panel { max-height: 48dvh; }
}
.side-scroll-btn {
  justify-self: start;
  margin-top: 4px;
  padding: 6px 10px;
  border-radius: 999px;
  background: #e2e8f0;
  color: #0f172a;
  font-size: 12px;
}
.side-scroll-btn:hover { background: #cbd5e1; }
.pulse-message { outline: 3px solid rgba(37, 211, 102, .45); animation: pulseMsg 1.2s ease; }
@keyframes pulseMsg { 0% { transform: scale(1); } 45% { transform: scale(1.015); } 100% { transform: scale(1); } }

/* V3.1 — Ícones elegantes, confirmação e notificações sonoras */
.icon-btn svg,
.sound-toggle svg,
.acc-title svg,
.confirm-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon-btn svg { width: 19px; height: 19px; }
.sound-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #e2e8f0;
}
.sound-toggle svg { width: 17px; height: 17px; }
.sound-toggle.off {
  opacity: .68;
}
.sound-toggle.off svg path:first-child {
  opacity: .55;
}
.acc-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.acc-title svg {
  width: 17px;
  height: 17px;
  color: #475569;
  flex: 0 0 auto;
}
.accordion-toggle.active .acc-title svg,
.accordion-toggle:hover .acc-title svg {
  color: #0f766e;
}
.smart-actions .icon-btn {
  box-shadow: 0 1px 2px rgba(15,23,42,.08);
}
.smart-actions .icon-btn:hover {
  transform: translateY(-1px);
}
.smart-actions .icon-btn:disabled {
  transform: none;
  opacity: .5;
  cursor: not-allowed;
}
.legacy-transfer {
  display: none !important;
}
.confirm-card {
  text-align: center;
}
.confirm-icon {
  width: 54px;
  height: 54px;
  margin: 0 auto 2px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: #fff1f2;
  color: #e11d48;
  border: 1px solid #fecdd3;
}
.confirm-icon svg {
  width: 26px;
  height: 26px;
}
.danger-action {
  background: #e11d48;
  color: #fff;
}
.danger-action:hover {
  background: #be123c;
}
@media (max-width: 760px) {
  .sound-toggle span { display: none; }
  .sound-toggle { justify-content: center; }
}

/* V3.2 — Faturas SGP */
.invoice-actions-head {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
  margin-bottom: 10px;
}
.invoice-actions-head small {
  color: #64748b;
  font-size: 11px;
  text-align: right;
}
.invoice-list {
  display: grid;
  gap: 10px;
}
.invoice-card {
  background: linear-gradient(180deg, #ffffff, #f8fafc);
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 11px;
  display: grid;
  gap: 7px;
  box-shadow: 0 1px 2px rgba(15,23,42,.045);
}
.invoice-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.invoice-head strong {
  color: #0f172a;
  font-size: 13px;
  line-height: 1.25;
}
.invoice-head span {
  font-size: 10px;
  border-radius: 999px;
  padding: 3px 7px;
  color: #92400e;
  background: #fef3c7;
  white-space: nowrap;
}
.invoice-card small {
  color: #64748b;
  font-size: 11px;
}
.invoice-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}
.invoice-buttons button {
  border: 0;
  border-radius: 999px;
  padding: 7px 10px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  color: #064e3b;
  background: #d1fae5;
}
.invoice-buttons button:hover:not(:disabled) {
  background: #a7f3d0;
}
.invoice-buttons button:disabled {
  opacity: .45;
  cursor: not-allowed;
}
.side-list-empty.error {
  border-color: #fecaca;
  background: #fef2f2;
  color: #991b1b;
}


/* V3.3 - envio de anexos */
.composer { padding: 10px 12px; }
.composer-row { display: grid; grid-template-columns: 44px 1fr auto; gap: 9px; align-items: end; width: 100%; }
.attach-btn {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,.45);
  background: #fff;
  color: #0f766e;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.attach-btn:hover { background: #ecfdf5; border-color: rgba(15,118,110,.35); transform: translateY(-1px); }
.attach-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.attach-btn.sending { background: #dcfce7; animation: attachPulse 1s ease-in-out infinite; }
.attach-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.media-box.sent-media, .media-box.optimistic-media {
  display: flex;
  align-items: center;
  gap: 8px;
  border-color: rgba(34,197,94,.24);
  background: rgba(240,253,244,.72);
}
.media-sent-icon { font-size: 18px; line-height: 1; }
.media-sending-text { font-size: 12px; color: #64748b; }
.optimistic-media .media-preview { max-height: 220px; border-radius: 12px; }
@keyframes attachPulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.04)} }
@media (max-width: 560px) {
  .composer-row { grid-template-columns: 40px 1fr; }
  .composer-row #sendBtn { grid-column: 1 / -1; width: 100%; }
  .attach-btn { width: 40px; height: 40px; }
}


/* V3.4 — correções de layout e performance visual */
.chat-header[hidden] { display: none !important; }

.composer {
  display: block !important;
  padding: 12px 14px !important;
  border-top: 1px solid var(--line);
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(8px);
}
.composer-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 10px !important;
  align-items: end !important;
  width: 100% !important;
  max-width: 100% !important;
}
.composer textarea {
  min-height: 48px !important;
  max-height: 132px !important;
  resize: vertical;
  border-radius: 18px !important;
  padding: 13px 14px !important;
  line-height: 1.35;
  background: #f8fafc;
}
.composer-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
.attach-btn,
.send-btn {
  height: 48px !important;
  border-radius: 16px !important;
  display: inline-grid !important;
  place-items: center !important;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}
.attach-btn {
  width: 48px !important;
  min-width: 48px !important;
  padding: 0 !important;
  background: #f1f5f9 !important;
  color: #0f766e !important;
  border: 1px solid #dbe7e3 !important;
  box-shadow: 0 6px 18px rgba(15,23,42,.06) !important;
}
.attach-btn:hover:not(:disabled) { background: #ecfdf5 !important; transform: translateY(-1px); box-shadow: 0 10px 24px rgba(15,118,110,.12) !important; }
.attach-btn:disabled { opacity: .45; cursor: not-allowed; transform: none !important; box-shadow: none !important; }
.attach-btn svg { width: 22px !important; height: 22px !important; }
.send-btn {
  min-width: 96px;
  padding: 0 18px !important;
  background: linear-gradient(135deg, #0f766e, #10b981) !important;
  color: #fff !important;
  border: 0 !important;
  font-weight: 900 !important;
  box-shadow: 0 10px 26px rgba(15,118,110,.22) !important;
}
.send-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 14px 34px rgba(15,118,110,.30) !important; }
.send-btn:disabled { opacity: .55; cursor: not-allowed; transform: none !important; box-shadow: none !important; }
.media-file-input {
  position: fixed !important;
  left: -9999px !important;
  top: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.invoice-actions-head .mini { white-space: nowrap; }
.side-list-empty.error { color: #991b1b; background: #fee2e2; border-color: #fecaca; }
@media (max-width: 760px) {
  .composer { padding: 9px 10px !important; }
  .composer-row { grid-template-columns: 1fr auto !important; gap: 8px !important; }
  .composer-actions { gap: 6px; }
  .attach-btn, .send-btn { height: 44px !important; border-radius: 14px !important; }
  .attach-btn { width: 44px !important; min-width: 44px !important; }
  .send-btn { min-width: 76px; padding: 0 14px !important; font-size: 13px; }
  .composer textarea { min-height: 44px !important; max-height: 108px !important; padding: 11px 12px !important; }
}
@media (max-width: 420px) {
  .composer-row { grid-template-columns: 1fr !important; }
  .composer-actions { justify-content: flex-end; }
  .send-btn { min-width: 92px; }
}


/* V3.5 — correções reais: barra única, anexos nativos e faturas com feedback */
.chat-view.accepted-chat #chatHeader,
.chat-view.accepted-chat .chat-header {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
}
.chat-view.accepted-chat {
  grid-template-rows: auto 1fr auto auto !important;
}
.composer-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: end !important;
  gap: 10px !important;
}
.composer-actions {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  justify-content: flex-end !important;
}
.attach-btn,
.send-btn {
  height: 48px !important;
  border-radius: 16px !important;
}
.attach-btn {
  width: 48px !important;
  min-width: 48px !important;
  cursor: pointer !important;
  user-select: none !important;
}
.attach-btn.disabled,
.attach-btn[aria-disabled="true"] {
  opacity: .45 !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
}
.media-file-input {
  position: fixed !important;
  left: -1000px !important;
  top: 0 !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0.01 !important;
  pointer-events: auto !important;
}
.invoice-loading {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.tiny-spinner {
  width: 15px;
  height: 15px;
  border-radius: 999px;
  border: 2px solid #ccfbf1;
  border-top-color: #0f766e;
  display: inline-block;
  animation: tinySpin .8s linear infinite;
}
#invoiceRefreshBtn.loading::before {
  content: '';
  width: 12px;
  height: 12px;
  border-radius: 999px;
  border: 2px solid rgba(15,118,110,.25);
  border-top-color: #0f766e;
  display: inline-block;
  margin-right: 6px;
  vertical-align: -2px;
  animation: tinySpin .8s linear infinite;
}
@keyframes tinySpin { to { transform: rotate(360deg); } }
@media (max-width: 420px) {
  .composer-row { grid-template-columns: minmax(0, 1fr) auto !important; }
  .send-btn { min-width: 78px !important; }
  .attach-btn { width: 44px !important; min-width: 44px !important; }
}

/* ===== V3.5.5 refinamento visual, mídia, respostas, tema ===== */
:root {
  --app-bg: #eef2f5;
  --panel-bg: #ffffff;
  --panel-soft: #f6f8fb;
  --text-main: #102033;
  --text-soft: #64748b;
  --border-soft: #dfe6ee;
  --bubble-in: #ffffff;
  --bubble-out: #d9fdd3;
  --bubble-pending: #e4f7dc;
  --shadow-soft: 0 8px 28px rgba(15, 23, 42, .08);
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] {
    --app-bg: #071018;
    --panel-bg: #0d1822;
    --panel-soft: #122231;
    --text-main: #e5eef8;
    --text-soft: #91a4b8;
    --border-soft: #203246;
    --line: #203246;
    --soft: #122231;
    --panel: #0d1822;
    --text: #e5eef8;
    --bubble-in: #142433;
    --bubble-out: #063f35;
    --bubble-pending: #20351f;
  }
}
:root[data-theme="dark"] {
  --app-bg: #071018;
  --panel-bg: #0d1822;
  --panel-soft: #122231;
  --text-main: #e5eef8;
  --text-soft: #91a4b8;
  --border-soft: #203246;
  --line: #203246;
  --soft: #122231;
  --panel: #0d1822;
  --text: #e5eef8;
  --bubble-in: #142433;
  --bubble-out: #063f35;
  --bubble-pending: #20351f;
}
:root[data-theme="light"] {
  --app-bg: #eef2f5;
  --panel-bg: #ffffff;
  --panel-soft: #f6f8fb;
  --text-main: #102033;
  --text-soft: #64748b;
  --border-soft: #dfe6ee;
  --bubble-in: #ffffff;
  --bubble-out: #d9fdd3;
  --bubble-pending: #e4f7dc;
}
body { background: var(--app-bg) !important; color: var(--text-main) !important; }
.sidebar, .chat-panel, .details-panel, .topbar, .composer, .chat-header, .smart-contact-bar { transition: background .18s ease, color .18s ease, border-color .18s ease; }
.sidebar, .chat-panel, .details-panel { background: var(--panel-bg) !important; color: var(--text-main) !important; }
.topbar { min-height: 58px !important; height: 58px !important; background: #08111c !important; }
.top-actions { gap: 7px !important; }
.top-actions button { padding: 8px 10px !important; }
.top-actions svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.layout { height: calc(100vh - 58px) !important; grid-template-columns: 318px minmax(360px, 1fr) 306px !important; background: var(--border-soft) !important; }
.filter-box { padding: 10px !important; background: var(--panel-bg); border-color: var(--border-soft) !important; }
.conversation-item { padding: 11px 12px !important; border-color: var(--border-soft) !important; }
.conversation-item:hover, .conversation-item.active { background: rgba(15, 118, 110, .10) !important; }
.chat-header { display:none !important; }
.smart-contact-bar { border-bottom: 1px solid var(--border-soft) !important; background: var(--panel-bg) !important; padding: 12px 14px !important; }
.messages { background: color-mix(in srgb, var(--app-bg) 88%, var(--panel-bg)) !important; padding: 14px !important; gap: 8px !important; }
.message { position: relative; max-width: min(620px, 86%) !important; padding: 8px 10px !important; border-radius: 14px !important; color: var(--text-main) !important; box-shadow: 0 1px 2px rgba(0,0,0,.08) !important; }
.message.inbound { background: var(--bubble-in) !important; }
.message.outbound { background: var(--bubble-out) !important; }
.message-body { font-size: 14px; line-height: 1.38; }
.message-meta { font-size: 10.5px !important; opacity: .72; }
.message-reply-btn { position: absolute; top: 5px; right: -32px; width: 26px; height: 26px; padding: 0 !important; border-radius: 999px; background: rgba(15,23,42,.08); color: var(--text-main); opacity: 0; display: grid; place-items: center; }
.message.outbound .message-reply-btn { right: auto; left: -32px; }
.message:hover .message-reply-btn { opacity: 1; }
.reply-quote { border-left: 3px solid var(--accent); background: rgba(15,118,110,.08); border-radius: 8px; padding: 6px 8px; margin-bottom: 6px; display: grid; gap: 2px; }
.reply-quote small { font-weight: 800; color: var(--accent); }
.reply-quote span { color: var(--text-soft); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.message-reaction { position: absolute; right: 8px; bottom: -16px; min-width: 26px; height: 22px; display: inline-grid; place-items: center; border-radius: 999px; background: var(--panel-bg); box-shadow: var(--shadow-soft); border: 1px solid var(--border-soft); font-size: 14px; }
.message.outbound .message-reaction { right: auto; left: 8px; }
.composer { background: var(--panel-bg) !important; border-color: var(--border-soft) !important; padding: 9px 11px !important; }
.composer-row { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; gap: 8px !important; align-items: end; }
.composer-actions { display: flex !important; gap: 7px !important; align-items: center; }
.composer textarea { min-height: 42px !important; max-height: 104px !important; border-radius: 16px !important; background: var(--panel-soft) !important; color: var(--text-main) !important; border-color: var(--border-soft) !important; }
.attach-btn, .record-btn, .send-btn { width: 42px; height: 42px; border-radius: 15px !important; padding: 0 !important; display: grid !important; place-items: center !important; }
.send-btn { width: auto; min-width: 82px; }
.attach-btn svg, .record-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.record-btn { background: #e7f0f0 !important; color: #0f766e !important; }
.record-btn.recording { background: #fee2e2 !important; color: #dc2626 !important; animation: pulseRec 1.1s infinite; }
@keyframes pulseRec { 0%,100%{transform:scale(1)} 50%{transform:scale(1.08)} }
.reply-preview { margin: 0 0 8px; padding: 8px 10px; border-radius: 14px; border-left: 4px solid var(--accent); background: rgba(15,118,110,.10); display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.reply-preview small { display: block; color: var(--accent); font-weight: 900; font-size: 11px; }
.reply-preview strong { display: block; color: var(--text-main); font-size: 13px; max-width: 520px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reply-preview button { width: 28px; height: 28px; border-radius: 999px; padding: 0 !important; background: rgba(15,23,42,.10); color: var(--text-main); }
.media-box { border-radius: 14px !important; border: 1px solid var(--border-soft) !important; background: rgba(255,255,255,.55) !important; margin-top: 7px; padding: 8px !important; display: grid; gap: 6px; }
:root[data-theme="dark"] .media-box, :root[data-theme="system"] .media-box { background: rgba(255,255,255,.05) !important; }
.media-preview { display: block; max-width: min(360px, 78vw); max-height: 260px; border-radius: 12px; object-fit: cover; }
.media-audio { width: min(340px, 78vw); }
.media-video { max-width: min(380px, 78vw); max-height: 260px; border-radius: 12px; }
.media-doc-card, .doc-card { text-decoration: none; color: var(--text-main); grid-template-columns: auto 1fr auto; align-items: center; gap: 9px; }
.media-doc-card small { display:block; color: var(--text-soft); margin-top: 2px; }
.media-sent-icon { width: 34px; height: 34px; display:grid; place-items:center; border-radius: 10px; background: rgba(15,118,110,.12); }
.drop-overlay { position: fixed; inset: 0; display: none; place-items: center; background: rgba(2, 6, 23, .42); z-index: 9999; backdrop-filter: blur(2px); }
.drop-overlay div { background: var(--panel-bg); color: var(--text-main); border: 1px solid var(--border-soft); border-radius: 22px; padding: 22px 28px; font-weight: 900; box-shadow: var(--shadow-soft); }
body.dragging-file .drop-overlay { display: grid; }
.details-panel { padding: 10px !important; }
.accordion-toggle { min-height: 42px !important; }
.info-card, .client-panel-card, .mini-stat, .side-item { background: var(--panel-soft) !important; color: var(--text-main) !important; border-color: var(--border-soft) !important; }
input, textarea, select { background: var(--panel-bg); color: var(--text-main); border-color: var(--border-soft); }
@media (max-width: 1100px) { .layout { grid-template-columns: 292px 1fr !important; } }
@media (max-width: 760px) {
  .topbar { height: auto !important; min-height: 72px !important; }
  .top-actions { grid-template-columns: 1fr auto auto auto auto !important; }
  .layout { height: calc(100dvh - 92px) !important; }
  .message-reply-btn { opacity: 1; right: -26px; }
  .message.outbound .message-reply-btn { left: -26px; }
  .composer-row { grid-template-columns: 1fr !important; }
  .composer-actions { justify-content: flex-end; }
}

/* V3.5.6 — refinamento visual premium/compacto */
:root {
  --premium-accent: #128c7e;
  --premium-accent-2: #25d366;
  --premium-card: rgba(255,255,255,.92);
  --premium-shadow: 0 6px 22px rgba(15, 23, 42, .07);
}

body {
  letter-spacing: -.01em;
}

.topbar {
  height: 52px !important;
  min-height: 52px !important;
  padding: 0 14px !important;
  background: linear-gradient(135deg, #07111c 0%, #0d1b2a 58%, #083733 100%) !important;
}
.topbar strong { font-size: 15px !important; }
.topbar span { font-size: 12px !important; }
.top-actions { gap: 6px !important; }
.top-actions button {
  height: 34px !important;
  padding: 0 10px !important;
  border-radius: 11px !important;
  font-size: 12px !important;
}
.sound-toggle span,
.theme-toggle span { display: none !important; }
.sound-toggle,
.theme-toggle { width: 36px !important; padding: 0 !important; }

.layout {
  height: calc(100vh - 52px) !important;
  grid-template-columns: 292px minmax(380px, 1fr) 292px !important;
  gap: 1px !important;
}

.sidebar { background: var(--panel-bg) !important; }
.filter-box {
  padding: 8px !important;
  gap: 6px !important;
}
.filter-box input,
.filter-box select {
  min-height: 36px !important;
  padding: 8px 10px !important;
  border-radius: 12px !important;
  font-size: 13px !important;
}
.conversation-section-title {
  padding: 8px 10px 6px !important;
  min-height: auto !important;
  font-size: 11px !important;
  letter-spacing: .05em !important;
  text-transform: uppercase !important;
  color: var(--text-soft) !important;
}
.conversation-section-title strong { font-size: 11px !important; }
.conversation-item {
  padding: 8px 9px !important;
  min-height: auto !important;
  border-bottom: 1px solid rgba(148,163,184,.18) !important;
}
.conversation-main {
  padding: 8px 4px 8px 8px !important;
  gap: 4px !important;
}
.conversation-line { gap: 6px !important; }
.conversation-name {
  font-size: 13.5px !important;
  line-height: 1.18 !important;
}
.conversation-phone,
.conversation-preview,
.conversation-meta,
.conversation-assigned {
  font-size: 11px !important;
  line-height: 1.2 !important;
}
.conversation-dots {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  border-radius: 10px !important;
  margin-right: 4px !important;
}
.status-chip,
.unread {
  transform: scale(.9);
  transform-origin: right center;
}

.smart-contact-bar {
  min-height: 58px !important;
  padding: 8px 12px !important;
  box-shadow: 0 1px 0 var(--border-soft), 0 8px 24px rgba(15,23,42,.04) !important;
}
.smart-avatar {
  width: 38px !important;
  height: 38px !important;
  border-radius: 14px !important;
  font-size: 14px !important;
}
.smart-name-row strong {
  font-size: 14px !important;
  line-height: 1.15 !important;
}
.smart-identity span,
.smart-identity small {
  font-size: 11.5px !important;
  line-height: 1.2 !important;
}
.smart-indicators { gap: 6px !important; }
.smart-pill,
.smart-chip {
  padding: 4px 8px !important;
  font-size: 11px !important;
  border-radius: 999px !important;
}
.smart-actions { gap: 6px !important; }
.icon-btn {
  width: 34px !important;
  height: 34px !important;
  border-radius: 13px !important;
}
.icon-btn svg { width: 17px !important; height: 17px !important; }

.messages {
  padding: 12px 14px !important;
  gap: 7px !important;
  background:
    radial-gradient(circle at 18px 18px, rgba(15,118,110,.035) 0 1px, transparent 1.5px),
    linear-gradient(180deg, rgba(241,245,249,.82), rgba(229,236,243,.82)) !important;
  background-size: 20px 20px, 100% 100% !important;
}
:root[data-theme="dark"] .messages,
:root[data-theme="system"] .messages {
  background:
    radial-gradient(circle at 18px 18px, rgba(37,211,102,.055) 0 1px, transparent 1.5px),
    linear-gradient(180deg, rgba(7,16,24,.94), rgba(10,22,32,.94)) !important;
  background-size: 20px 20px, 100% 100% !important;
}
.message {
  max-width: min(560px, 82%) !important;
  padding: 7px 9px !important;
  border-radius: 15px !important;
  box-shadow: 0 1px 1px rgba(15,23,42,.06), 0 7px 18px rgba(15,23,42,.04) !important;
}
.message.inbound { border-bottom-left-radius: 5px !important; }
.message.outbound { border-bottom-right-radius: 5px !important; }
.message-body {
  font-size: 13.8px !important;
  line-height: 1.33 !important;
}
.message-body:empty { display: none !important; }
.message-meta {
  justify-content: flex-end !important;
  gap: 6px !important;
  margin-top: 4px !important;
  font-size: 10px !important;
}
.message-reply-btn {
  width: 24px !important;
  height: 24px !important;
  right: -29px !important;
  font-size: 12px !important;
}
.message.outbound .message-reply-btn { left: -29px !important; }

.media-name { display: none !important; }
.media-size {
  font-size: 10.5px !important;
  color: var(--text-soft) !important;
  justify-self: end !important;
  align-self: center !important;
}
.media-box {
  margin-top: 0 !important;
  padding: 7px !important;
  border-radius: 14px !important;
  gap: 5px !important;
  overflow: hidden !important;
}
.message-body + .media-box { margin-top: 6px !important; }
.media-image-card { padding: 4px !important; }
.media-preview {
  max-width: min(300px, 72vw) !important;
  max-height: 210px !important;
  border-radius: 12px !important;
  object-fit: cover !important;
}
.media-audio-card {
  min-width: min(330px, 74vw) !important;
  padding: 8px !important;
}
.media-audio {
  width: min(318px, 72vw) !important;
  height: 36px !important;
}
.media-video {
  max-width: min(320px, 74vw) !important;
  max-height: 220px !important;
}
.media-doc-card,
.doc-card {
  min-width: min(300px, 74vw) !important;
  padding: 8px 10px !important;
  grid-template-columns: 34px minmax(0,1fr) auto !important;
  gap: 9px !important;
}
.media-doc-card strong,
.doc-card strong {
  font-size: 13.5px !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.media-doc-card small,
.doc-card small { font-size: 11px !important; }
.media-sent-icon {
  width: 32px !important;
  height: 32px !important;
  border-radius: 12px !important;
  font-size: 15px !important;
}
.media-sending-text {
  font-size: 11px !important;
  color: var(--text-soft) !important;
  padding: 0 4px 2px !important;
}
.compact-media-state {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  font-size: 12px !important;
}
.media-load-btn,
.media-open-btn {
  min-height: 30px !important;
  padding: 0 10px !important;
  border-radius: 10px !important;
  font-size: 11.5px !important;
}

.composer {
  padding: 7px 9px !important;
  border-top: 1px solid var(--border-soft) !important;
  box-shadow: 0 -8px 24px rgba(15,23,42,.035) !important;
}
.composer-row {
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 7px !important;
}
.composer-actions { gap: 5px !important; }
.composer textarea {
  min-height: 38px !important;
  max-height: 92px !important;
  padding: 9px 11px !important;
  border-radius: 15px !important;
  font-size: 13.5px !important;
  line-height: 1.25 !important;
}
.attach-btn,
.record-btn,
.send-btn {
  width: 36px !important;
  min-width: 36px !important;
  height: 36px !important;
  border-radius: 13px !important;
  box-shadow: none !important;
}
.attach-btn svg,
.record-btn svg { width: 18px !important; height: 18px !important; }
.send-btn {
  width: auto !important;
  min-width: 68px !important;
  padding: 0 13px !important;
  font-size: 12.5px !important;
  border-radius: 13px !important;
  background: linear-gradient(135deg, #128c7e, #20bd5a) !important;
}
.send-hint {
  min-height: 18px !important;
  padding: 0 10px 6px !important;
  font-size: 11px !important;
}
.reply-preview {
  margin: 0 0 6px !important;
  padding: 6px 8px !important;
  border-radius: 12px !important;
}

.details-panel {
  padding: 8px !important;
}
.accordion-toggle {
  min-height: 36px !important;
  padding: 8px 9px !important;
  border-radius: 12px !important;
  font-size: 12.5px !important;
}
.accordion-panel {
  padding: 8px !important;
}
.client-panel-card,
.info-card,
.mini-stat,
.side-item,
.assignment-card {
  border-radius: 14px !important;
  padding: 10px !important;
}
.client-avatar {
  width: 36px !important;
  height: 36px !important;
  border-radius: 13px !important;
  font-size: 14px !important;
}
.client-main strong,
.info-card h3 { font-size: 14px !important; }
.client-main small,
.client-main span,
.mini-stat small,
.side-item small { font-size: 11px !important; }
#detailNotes { min-height: 74px !important; }

@media (max-width: 1180px) {
  .layout { grid-template-columns: 280px minmax(360px, 1fr) 280px !important; }
}
@media (max-width: 1100px) {
  .layout { grid-template-columns: 280px 1fr !important; }
}
@media (max-width: 760px) {
  .topbar { min-height: 66px !important; height: auto !important; }
  .layout { height: calc(100dvh - 86px) !important; }
  .conversation-item { padding: 9px 10px !important; }
  .smart-contact-bar { padding: 8px 10px !important; }
  .message { max-width: 88% !important; }
  .composer-row { grid-template-columns: minmax(0, 1fr) auto !important; }
  .composer-actions { justify-content: flex-end !important; }
  .attach-btn, .record-btn, .send-btn { height: 38px !important; }
}


/* V3.5.7 — finalizações compactas e limpeza visual */
.conversation-list { background: var(--panel-bg, #fff); }
.conversation-section-title { padding: 8px 12px 5px !important; font-size: 10.5px !important; letter-spacing: .04em !important; }
.conversation-item.compact { grid-template-columns: minmax(0, 1fr) 30px !important; gap: 4px !important; padding: 8px 10px !important; min-height: 58px !important; align-items: center !important; }
.conversation-item.compact .conversation-main { padding: 0 !important; gap: 4px !important; min-width: 0 !important; }
.conversation-item.compact .conversation-name { font-size: 13.2px !important; line-height: 1.16 !important; letter-spacing: -.01em !important; }
.conversation-item.compact .conversation-phone { font-size: 11.2px !important; color: var(--text-soft, #64748b) !important; }
.conversation-item.compact .status-chip { font-size: 10.5px !important; padding: 3px 7px !important; border-radius: 999px !important; white-space: nowrap !important; }
.conversation-item.compact .conversation-dots { width: 28px !important; height: 28px !important; margin: 0 !important; align-self: center !important; }
.compact-meta-line { align-items: center !important; justify-content: space-between !important; gap: 8px !important; min-width: 0 !important; }
.privacy-chip { font-size: 10px !important; padding: 2px 6px !important; }
.unread { min-width: 18px !important; height: 18px !important; font-size: 10px !important; }

.smart-contact-bar { grid-template-columns: minmax(0, 1fr) auto auto !important; padding: 9px 12px !important; min-height: 64px !important; }
.smart-avatar { width: 38px !important; height: 38px !important; font-size: 14px !important; }
.smart-name-row strong { font-size: 14px !important; }
.smart-subtitle, #smartSubtitle { font-size: 12px !important; }
#smartMeta { font-size: 11px !important; }
.smart-indicators.compact-only { gap: 5px !important; }
#smartStatus.smart-pill { font-size: 10.5px !important; padding: 5px 9px !important; }

.messages { gap: 16px !important; padding: 16px 18px 20px !important; }
.message { margin: 0 !important; padding: 10px 12px !important; border-radius: 15px !important; }
.message-reaction { bottom: -18px !important; z-index: 3 !important; }
.message + .message { margin-top: 0 !important; }
.message-meta { margin-top: 6px !important; }
.media-box { margin-top: 7px !important; }
.media-load-btn { min-height: 28px !important; padding: 5px 10px !important; font-size: 11px !important; border-radius: 999px !important; }
.compact-media-state { grid-template-columns: 1fr auto !important; align-items: center !important; }
.compact-media-state span { font-size: 12px !important; color: var(--text-soft, #64748b) !important; }
.media-audio-card audio { width: min(360px, 100%) !important; }
.media-preview { border-radius: 13px !important; }

.composer { padding: 8px 10px !important; }
.composer-row { gap: 7px !important; }
.composer-actions { gap: 5px !important; }
.attach-btn, .record-btn, .send-btn { width: 36px !important; min-width: 36px !important; height: 36px !important; border-radius: 12px !important; }
.send-btn { width: auto !important; min-width: 70px !important; padding: 0 14px !important; font-size: 13px !important; }
.attach-btn svg, .record-btn svg { width: 17px !important; height: 17px !important; }
.composer textarea { min-height: 38px !important; padding: 9px 11px !important; font-size: 14px !important; }

@media (max-width: 760px) {
  .conversation-item.compact { min-height: 56px !important; padding: 8px 9px !important; }
  .messages { gap: 15px !important; padding: 12px 12px 18px !important; }
  .smart-contact-bar { grid-template-columns: 1fr auto !important; }
  .smart-indicators { display: none !important; }
  .attach-btn, .record-btn, .send-btn { height: 36px !important; }
}

/* V3.5.8 — ajustes finais de fluidez, mídia e composer */
.messages {
  gap: 14px !important;
  padding: 18px 20px 24px !important;
}
.message {
  position: relative;
  margin: 2px 0 !important;
  padding: 12px 14px 10px !important;
  line-height: 1.48 !important;
  letter-spacing: .005em;
  font-weight: 500;
  color: #0f172a;
}
.message-body {
  font-size: 15px;
  color: #0b1220;
}
.message-meta {
  margin-top: 8px !important;
  opacity: .82;
}
.message-reaction {
  right: 12px !important;
  bottom: -14px !important;
  box-shadow: 0 8px 18px rgba(15,23,42,.12);
}
.message + .message { margin-top: 4px !important; }
.media-box {
  margin-top: 4px !important;
  border-radius: 16px !important;
  padding: 8px !important;
}
.media-preview {
  display: block;
  max-width: min(320px, 72vw);
  max-height: 260px;
  border-radius: 14px;
  object-fit: cover;
}
.media-audio {
  width: min(330px, 72vw);
}
.media-doc-card strong { font-size: 13px; }
.media-doc-card small { opacity: .74; }
.compact-media-state .media-load-btn { display: none; }
.smart-contact-bar {
  min-height: 58px !important;
  padding: 9px 12px !important;
  gap: 10px !important;
  border-bottom: 1px solid rgba(148,163,184,.22) !important;
}
.smart-avatar { width: 36px !important; height: 36px !important; font-size: 13px !important; border-radius: 13px !important; }
.smart-name-row strong { font-size: 14px !important; }
.smart-chip, #smartPriority { display: none !important; }
.smart-identity span, .smart-identity small { font-size: 11.5px !important; line-height: 1.2 !important; }
.smart-actions { gap: 7px !important; }
.icon-btn { width: 34px !important; height: 34px !important; border-radius: 12px !important; padding: 8px !important; }
.conversation-section-title { padding: 7px 10px !important; font-size: 10.5px !important; }
.conversation-item.compact { padding: 8px 9px !important; min-height: 58px !important; }
.conversation-main { padding: 0 !important; }
.compact-line { line-height: 1.16 !important; }
.conversation-name { font-size: 13px !important; }
.conversation-phone, .compact-meta-line, .conversation-meta { font-size: 11px !important; }
.status-chip { font-size: 10.5px !important; padding: 2px 7px !important; }
.conversation-dots { width: 30px !important; height: 30px !important; border-radius: 10px !important; }
.whatsapp-composer {
  display: block !important;
  padding: 10px 12px !important;
  background: #f8fafc !important;
  border-top: 1px solid rgba(148,163,184,.24) !important;
}
.wa-composer-row {
  display: grid !important;
  grid-template-columns: 38px minmax(0, 1fr) 38px auto !important;
  gap: 7px !important;
  align-items: end !important;
  background: transparent !important;
}
.wa-composer-row textarea {
  min-height: 42px !important;
  max-height: 118px !important;
  resize: none !important;
  border-radius: 18px !important;
  padding: 11px 14px !important;
  background: #fff !important;
  font-size: 14.5px !important;
  line-height: 1.35 !important;
}
.composer-icon {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  padding: 0 !important;
  display: inline-grid !important;
  place-items: center !important;
  border-radius: 50% !important;
  background: #e2e8f0 !important;
  color: #0f172a !important;
  border: 1px solid rgba(148,163,184,.38) !important;
  box-shadow: none !important;
}
.composer-icon:hover { background: #cbd5e1 !important; }
.composer-icon svg { width: 19px !important; height: 19px !important; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.record-btn.recording { background: #fee2e2 !important; color: #b91c1c !important; animation: pulseRecord 1.1s infinite; }
.wa-send-btn {
  height: 38px !important;
  min-width: 72px !important;
  border-radius: 18px !important;
  padding: 0 14px !important;
  background: #0f766e !important;
  color: #fff !important;
  box-shadow: 0 8px 18px rgba(15,118,110,.20) !important;
}
.pending-attachments {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 0 2px 9px;
  margin-bottom: 2px;
}
.pending-attachment {
  display: grid;
  grid-template-columns: 48px minmax(150px, 1fr) 26px;
  align-items: center;
  gap: 9px;
  min-width: 250px;
  max-width: 340px;
  padding: 7px 8px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(148,163,184,.32);
  box-shadow: 0 8px 22px rgba(15,23,42,.06);
}
.pending-attachment img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 12px;
}
.pending-attachment audio { width: 120px; height: 32px; }
.pending-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: #ecfeff;
  font-size: 21px;
}
.pending-attachment strong { display: block; font-size: 12.5px; line-height: 1.15; }
.pending-attachment small { display: block; color: #64748b; font-size: 11px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pending-remove {
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background: #f1f5f9 !important;
  color: #334155 !important;
}
body.dragging-file::after {
  content: 'Solte aqui para preparar o envio';
  position: fixed;
  inset: 18px;
  z-index: 9998;
  display: grid;
  place-items: center;
  border: 2px dashed #0f766e;
  border-radius: 24px;
  background: rgba(240,253,250,.82);
  color: #0f766e;
  font-size: 20px;
  font-weight: 900;
  pointer-events: none;
}
@media (max-width: 760px) {
  .messages { gap: 12px !important; padding: 12px 12px 18px !important; }
  .message { max-width: 92% !important; padding: 11px 12px 9px !important; }
  .message-body { font-size: 14.5px; }
  .wa-composer-row { grid-template-columns: 36px minmax(0, 1fr) 36px 58px !important; gap: 6px !important; }
  .composer-icon { width: 36px !important; height: 36px !important; min-width: 36px !important; }
  .wa-send-btn { min-width: 58px !important; padding: 0 10px !important; font-size: 13px !important; }
  .pending-attachment { min-width: 220px; }
}

/* V3.5.9 — produção: reação compacta, login premium e mobile refinado */
.login-shell {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  padding: clamp(18px, 4vw, 34px);
  background:
    radial-gradient(circle at 18% 14%, rgba(37,211,102,.20), transparent 30%),
    radial-gradient(circle at 86% 78%, rgba(8,145,178,.18), transparent 34%),
    linear-gradient(135deg, #020617 0%, #07111f 46%, #062f2c 100%) !important;
}
.login-shell::before,
.login-shell::after {
  content: '';
  position: absolute;
  width: 420px;
  height: 420px;
  border-radius: 999px;
  pointer-events: none;
  filter: blur(12px);
  opacity: .54;
}
.login-shell::before {
  left: -180px;
  top: -160px;
  background: radial-gradient(circle, rgba(37,211,102,.22), transparent 66%);
}
.login-shell::after {
  right: -190px;
  bottom: -180px;
  background: radial-gradient(circle, rgba(8,145,178,.24), transparent 66%);
}
.login-card {
  position: relative;
  isolation: isolate;
  width: min(462px, 100%) !important;
  padding: clamp(24px, 4vw, 34px) !important;
  gap: 18px !important;
  overflow: hidden;
  border-radius: 30px !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(242,250,249,.94)) !important;
  box-shadow: 0 30px 90px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.80) !important;
}
.login-orbit {
  position: absolute;
  width: 190px;
  height: 190px;
  right: -78px;
  top: -84px;
  border-radius: 999px;
  background:
    radial-gradient(circle at center, rgba(37,211,102,.16), transparent 56%),
    conic-gradient(from 160deg, rgba(15,118,110,.0), rgba(15,118,110,.30), rgba(37,211,102,.0));
  z-index: -1;
}
.login-brand-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.brand-mark {
  width: 60px !important;
  height: 60px !important;
  border-radius: 20px !important;
  background:
    linear-gradient(135deg, #052e2b 0%, #0f766e 48%, #22c55e 100%) !important;
  box-shadow: 0 14px 34px rgba(15,118,110,.30), inset 0 1px 0 rgba(255,255,255,.28);
  color: #ffffff !important;
  font-size: 18px;
}
.brand-copy { display: grid; gap: 2px; }
.brand-copy span {
  color: #64748b;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .10em;
}
.brand-copy strong {
  color: #0f172a;
  font-size: 14px;
}
.login-headline { display: grid; gap: 7px; margin-top: 2px; }
.login-kicker {
  width: fit-content;
  max-width: 100%;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(15,118,110,.10);
  color: #0f766e;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .055em;
}
.login-card h1 {
  margin: 0 !important;
  color: #07111f;
  font-size: clamp(27px, 4.4vw, 34px) !important;
  line-height: 1.03;
  letter-spacing: -.045em;
}
.login-card p {
  max-width: 35ch;
  margin: 0 !important;
  color: #64748b !important;
  font-size: 14.5px;
  line-height: 1.48;
}
.login-fields { display: grid; gap: 12px; }
.login-card label {
  color: #334155;
  font-size: 12.5px;
  letter-spacing: -.01em;
}
.login-card input {
  min-height: 48px;
  border-radius: 16px !important;
  border-color: rgba(148,163,184,.45) !important;
  background: rgba(255,255,255,.92) !important;
  color: #0f172a !important;
  box-shadow: inset 0 1px 0 rgba(15,23,42,.03);
}
.login-card input::placeholder { color: #94a3b8; }
.login-card input:focus {
  border-color: rgba(15,118,110,.70) !important;
  box-shadow: 0 0 0 4px rgba(15,118,110,.13) !important;
}
.login-submit {
  min-height: 50px;
  border-radius: 17px !important;
  background: linear-gradient(135deg, #0f766e, #075e54) !important;
  box-shadow: 0 14px 34px rgba(15,118,110,.28);
  font-size: 15px;
}
.login-submit:hover { filter: brightness(1.05); }
.login-assurance {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding-top: 2px;
}
.login-assurance span {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 5px 9px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #475569;
  border: 1px solid rgba(148,163,184,.28);
  font-size: 11px;
  font-weight: 850;
}
.login-card .error-message { border-radius: 14px; font-weight: 750; }
.chat-view { grid-template-rows: auto auto minmax(0, 1fr) auto auto !important; }
.message-reaction {
  left: auto !important;
  right: 10px !important;
  bottom: -15px !important;
  width: max-content !important;
  min-width: 28px !important;
  max-width: 46px !important;
  height: 24px !important;
  padding: 0 7px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  background: var(--panel-bg, #fff) !important;
  border: 1px solid var(--border-soft, #dfe6ee) !important;
  box-shadow: 0 8px 18px rgba(15,23,42,.12) !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  z-index: 4 !important;
}
.message.outbound .message-reaction {
  right: auto !important;
  left: 10px !important;
}
.message:has(.message-reaction) { margin-bottom: 12px !important; }
@supports not selector(:has(*)) {
  .message-reaction { transform: translateY(1px); }
}
@media (max-width: 760px) {
  .login-shell {
    align-items: center;
    justify-items: center;
    padding: 14px !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .login-card {
    width: min(100%, 430px) !important;
    border-radius: 26px !important;
    padding: 22px !important;
    gap: 16px !important;
  }
  .brand-mark { width: 54px !important; height: 54px !important; border-radius: 18px !important; }
  .login-card h1 { font-size: 28px !important; }
  .login-card p { font-size: 14px; }
  .login-assurance span { font-size: 10.5px; }
  .topbar {
    min-height: 68px !important;
    height: auto !important;
    padding: 8px 10px !important;
  }
  .top-actions {
    grid-template-columns: minmax(0,1fr) 34px 34px 64px 48px !important;
    gap: 6px !important;
    align-items: center !important;
  }
  .sound-toggle, .theme-toggle { width: 34px !important; height: 34px !important; }
  .top-actions button { min-width: 0 !important; }
  #refreshBtn { padding-inline: 8px !important; }
  #logoutBtn { padding-inline: 8px !important; }
  .layout { height: calc(100dvh - 68px) !important; }
  .app-shell.chat-open .chat-panel { min-height: 0 !important; }
  .chat-view { grid-template-rows: auto auto minmax(0, 1fr) auto auto !important; }
  .smart-contact-bar {
    grid-template-columns: minmax(0, 1fr) auto !important;
    min-height: 56px !important;
    padding: 8px 10px !important;
  }
  .smart-left { min-width: 0 !important; }
  .smart-identity { min-width: 0 !important; }
  .smart-name-row strong, #smartSubtitle, #smartMeta {
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }
  .messages {
    min-height: 0 !important;
    overflow-y: auto !important;
    padding: 12px 12px 20px !important;
  }
  .message-reaction {
    min-width: 26px !important;
    height: 23px !important;
    padding: 0 6px !important;
    bottom: -14px !important;
  }
  .wa-composer-row {
    grid-template-columns: 36px minmax(0, 1fr) 36px 58px !important;
    align-items: end !important;
  }
  .whatsapp-composer { padding: 8px 9px !important; }
  .pending-attachments { padding-bottom: 7px; }
}
@media (max-width: 420px) {
  .login-card { padding: 20px !important; border-radius: 24px !important; }
  .login-brand-row { gap: 10px; }
  .brand-copy span { font-size: 10.5px; }
  .brand-copy strong { font-size: 13px; }
  .login-card h1 { font-size: 25px !important; }
  .login-kicker { font-size: 10px; padding: 5px 8px; }
  .topbar > div:first-child strong { font-size: 13px !important; }
  .topbar > div:first-child span { font-size: 10.5px !important; }
  .top-actions { grid-template-columns: minmax(0,1fr) 32px 32px 54px 42px !important; }
  .top-actions button { font-size: 11px !important; }
  .sound-toggle, .theme-toggle { width: 32px !important; height: 32px !important; }
  .chat-header h2 { max-width: 40vw !important; }
  .chat-header span { max-width: 40vw !important; }
  .wa-composer-row { grid-template-columns: 34px minmax(0, 1fr) 34px 54px !important; gap: 5px !important; }
  .composer-icon { width: 34px !important; height: 34px !important; min-width: 34px !important; }
  .wa-send-btn { min-width: 54px !important; font-size: 12px !important; }
}

/* V3.9.2 — multi-números + template de retorno 24h */
.business-chip,
.window-mini {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
  line-height: 1.2;
}
.business-chip {
  background: rgba(15, 23, 42, .08);
  color: var(--text-soft, #475569);
  max-width: 96px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.window-mini.closed {
  background: #ffe4e6;
  color: #9f1239;
}
.reopen-template-box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  margin: 0;
  padding: 12px 14px;
  border-top: 1px solid rgba(245, 158, 11, .25);
  border-bottom: 1px solid rgba(245, 158, 11, .25);
  background: linear-gradient(135deg, rgba(255, 251, 235, .98), rgba(254, 243, 199, .82));
  color: #713f12;
}
.reopen-template-box[hidden] { display: none !important; }
.reopen-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.reopen-copy strong {
  font-size: 13px;
  letter-spacing: -.01em;
}
.reopen-copy span {
  font-size: 12px;
  line-height: 1.35;
  color: #854d0e;
}
#reopenTemplateBtn {
  border: 0;
  border-radius: 999px;
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  background: #0f172a;
  color: #fff;
  white-space: nowrap;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .16);
}
#reopenTemplateBtn:hover { filter: brightness(1.05); }
#reopenTemplateBtn:disabled { opacity: .62; cursor: not-allowed; }
#numberFilter {
  min-width: 0;
}
.client-mini-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 820px) {
  .reopen-template-box {
    grid-template-columns: 1fr;
    gap: 9px;
    padding: 11px 12px;
  }
  #reopenTemplateBtn { width: 100%; }
  .client-mini-grid { grid-template-columns: 1fr; }
}

/* V3.9.3 — ajustes visuais solicitados + sincronização refinada */
.app-shell.no-conversations .layout,
.app-shell.no-conversations.details-active .layout {
  background: var(--panel-bg, #ffffff) !important;
  gap: 0 !important;
}
.app-shell.no-conversations .sidebar,
.app-shell.no-conversations .chat-panel,
.app-shell.no-conversations .conversation-list,
.app-shell.no-conversations #emptyChat,
.app-shell.no-conversations .empty-state {
  background: var(--panel-bg, #ffffff) !important;
}
.app-shell.no-conversations .chat-panel {
  border-left: 1px solid var(--border-soft, #dfe6ee) !important;
}
.sidebar-empty {
  min-height: calc(100% - 1px) !important;
  align-content: start !important;
  justify-items: center !important;
  padding-top: 72px !important;
  color: var(--text-soft, #64748b) !important;
}
.sidebar-empty p {
  margin: 0 !important;
  font-weight: 850 !important;
  color: var(--text-main, #102033) !important;
}
.sidebar-empty small {
  max-width: 220px;
  line-height: 1.35;
}
#emptyChat {
  background: var(--panel-bg, #ffffff) !important;
}
#emptyChat h2,
#emptyChat p {
  color: var(--text-soft, #64748b) !important;
}
.client-mini-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
@media (max-width: 820px) {
  .client-mini-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 760px) {
  .app-shell.no-conversations .layout { background: var(--panel-bg, #ffffff) !important; }
  .app-shell.no-conversations .chat-panel { border-left: 0 !important; }
  .sidebar-empty { padding-top: 52px !important; }
}

/* V3.9.15 — barra principal, reações, mídia expandida e áudio */
.layout {
  grid-template-columns: 56px 318px minmax(360px, 1fr) 306px !important;
}
.main-rail {
  background: #1f2933;
  color: #cbd5e1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 10px 6px;
  border-right: 1px solid rgba(255,255,255,.08);
  min-height: 0;
}
.rail-btn {
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #cbd5e1;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background .16s ease, color .16s ease, transform .16s ease;
  box-shadow: none;
  padding: 0;
}
.rail-btn svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.rail-btn:hover { background: rgba(255,255,255,.08); color: #fff; }
.rail-btn.active { background: rgba(20,184,166,.18); color: #f8fafc; box-shadow: inset 3px 0 0 #14b8a6; }
.rail-logout { margin-top: auto; }
.rail-logout:hover { background: rgba(248,113,113,.16); color: #fecaca; }
.sidebar-module { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.sidebar-module[hidden] { display: none !important; }
.side-tool-panel { padding: 14px; gap: 12px; overflow: auto; background: #f8fafc; }
.side-tool-head { display: grid; gap: 4px; padding: 8px 4px; }
.side-tool-head strong { font-size: 15px; color: #0f172a; }
.side-tool-head small { color: #64748b; line-height: 1.35; }
.tool-input {
  width: 100%;
  border: 1px solid var(--line, #dbe4ec);
  background: #fff;
  border-radius: 14px;
  padding: 11px 12px;
  color: #0f172a;
  outline: none;
}
.tool-input:focus { border-color: rgba(15,118,110,.38); box-shadow: 0 0 0 4px rgba(20,184,166,.10); }
.add-contact-box { display: grid; gap: 8px; padding: 10px; border: 1px solid #e2e8f0; background: #fff; border-radius: 16px; }
.add-contact-box button,
.settings-row {
  border: 0;
  border-radius: 13px;
  background: #0f766e;
  color: #fff;
  padding: 10px 12px;
  font-weight: 800;
  cursor: pointer;
}
.tool-list { display: grid; gap: 8px; }
.tool-list.empty { color: #64748b; font-size: 13px; padding: 12px; border: 1px dashed #cbd5e1; border-radius: 14px; background: #fff; }
.contact-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px; border: 1px solid #e2e8f0; border-radius: 14px; background: #fff; }
.contact-row strong { display: block; color: #0f172a; }
.contact-row small { display: block; color: #64748b; margin-top: 2px; }
.contact-row button { border: 0; background: #fee2e2; color: #991b1b; border-radius: 999px; width: 28px; height: 28px; cursor: pointer; }
.internal-placeholder, .settings-note { border: 1px dashed #cbd5e1; background: #fff; border-radius: 16px; padding: 14px; color: #64748b; line-height: 1.45; }
.internal-placeholder strong { display: block; color: #0f172a; margin-bottom: 6px; }
.settings-row { background: #fff; color: #0f172a; border: 1px solid #e2e8f0; display: flex; align-items: center; justify-content: space-between; box-shadow: none; }
.settings-row strong { color: #0f766e; }
.top-actions { gap: 12px !important; }
.top-actions #soundToggleBtn { margin-left: 4px; }

.message { position: relative; }
.message-actions {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  gap: 5px;
  opacity: 0;
  transition: opacity .15s ease;
  z-index: 2;
}
.message.inbound .message-actions { right: -56px; }
.message.outbound .message-actions { left: -56px; right: auto; }
.message:hover .message-actions { opacity: 1; }
.message-reply-btn,
.message-react-btn {
  width: 26px;
  height: 26px;
  border: 1px solid #dbe4ec;
  border-radius: 999px;
  background: rgba(255,255,255,.96);
  color: #334155;
  display: grid;
  place-items: center;
  padding: 0;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(15,23,42,.12);
  font-size: 13px;
}
.message-reaction {
  position: absolute;
  bottom: -14px;
  right: 16px;
  min-width: 26px;
  height: 22px;
  padding: 1px 6px;
  border-radius: 999px;
  border: 1px solid #e2e8f0;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  box-shadow: 0 8px 20px rgba(15,23,42,.12);
}
.message.inbound .message-reaction { left: 14px; right: auto; }
.reaction-picker {
  position: fixed;
  z-index: 9998;
  display: flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  padding: 7px;
  box-shadow: 0 18px 50px rgba(15,23,42,.22);
}
.reaction-picker button {
  border: 0;
  background: transparent;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 20px;
  display: grid;
  place-items: center;
}
.reaction-picker button:hover { background: #f1f5f9; transform: translateY(-1px); }
.reaction-picker .reaction-remove { width: auto; padding: 0 10px; font-size: 12px; color: #64748b; font-weight: 800; }
.wa-status { font-weight: 900; letter-spacing: -1px; color: #94a3b8; font-size: 12px; }
.wa-status.delivered { color: #64748b; }
.wa-status.read { color: #0ea5e9; }
.wa-status.failed { color: #dc2626; letter-spacing: 0; }
.wa-status.pending { color: #94a3b8; letter-spacing: 0; }
.media-expand-trigger { cursor: zoom-in; display: inline-block; max-width: 100%; }
.media-video-card .media-expand-trigger { display: block; }
.media-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9997;
  background: rgba(2,6,23,.86);
  display: grid;
  place-items: center;
  padding: 28px;
}
.media-lightbox[hidden] { display: none !important; }
.media-lightbox-body { max-width: min(1100px, 94vw); max-height: 88vh; display: grid; place-items: center; }
.media-lightbox-body img,
.media-lightbox-body video { max-width: 100%; max-height: 88vh; border-radius: 16px; box-shadow: 0 24px 80px rgba(0,0,0,.38); background: #000; }
.media-lightbox-close {
  position: fixed;
  top: 18px;
  right: 22px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  color: #0f172a;
  font-size: 26px;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.media-sticker-card { background: transparent !important; border-color: transparent !important; box-shadow: none !important; }
.media-sticker-card .media-preview { max-width: 160px !important; max-height: 160px !important; object-fit: contain !important; background: transparent !important; }
.recording-overlay {
  position: fixed;
  left: 50%;
  bottom: 90px;
  transform: translateX(-50%);
  z-index: 9996;
  pointer-events: none;
}
.recording-overlay[hidden] { display: none !important; }
.recording-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #0f172a;
  color: #fff;
  padding: 12px 16px;
  border-radius: 999px;
  box-shadow: 0 18px 44px rgba(15,23,42,.30);
}
.recording-card strong { display: block; font-size: 13px; }
.recording-card small { color: #cbd5e1; font-weight: 900; }
.recording-card em { color: #cbd5e1; font-style: normal; font-size: 12px; }
.recording-pulse {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: #ef4444;
  box-shadow: 0 0 0 rgba(239,68,68,.6);
  animation: mswaPulse 1.1s infinite;
}
@keyframes mswaPulse { 0% { box-shadow: 0 0 0 0 rgba(239,68,68,.55); } 70% { box-shadow: 0 0 0 12px rgba(239,68,68,0); } 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); } }
.record-btn.recording { background: #fee2e2 !important; color: #b91c1c !important; border-color: #fecaca !important; animation: mswaRecordBlink 1s infinite; }
@keyframes mswaRecordBlink { 0%,100% { transform: scale(1); } 50% { transform: scale(1.04); } }

@media (max-width: 1100px) {
  .layout { grid-template-columns: 52px 292px 1fr !important; }
}
@media (max-width: 760px) {
  .layout { grid-template-columns: 52px 1fr !important; }
  .main-rail { grid-row: 1; }
  .app-shell.chat-open .main-rail { display: none; }
  .message.inbound .message-actions,
  .message.outbound .message-actions { left: auto; right: 8px; top: -18px; }
  .message-actions { opacity: 1; }
  .recording-overlay { bottom: 78px; width: calc(100vw - 28px); }
  .recording-card { border-radius: 18px; justify-content: center; }
}

/* V3.9.16 - Contatos persistentes */
.contacts-form textarea.tool-input { resize: vertical; min-height: 64px; font-family: inherit; }
.contacts-list { gap: 10px; }
.contact-row { align-items: flex-start; }
.contact-avatar {
  width: 34px; height: 34px; border-radius: 12px;
  display: grid; place-items: center;
  flex: 0 0 auto;
  background: #e9f5f3;
  color: #0f766e;
  font-weight: 900;
  font-size: 12px;
}
.contact-info { flex: 1; min-width: 0; display: grid; gap: 2px; }
.contact-info strong, .contact-info small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contact-tag { display: inline-flex; width: fit-content; margin-top: 4px; border-radius: 999px; background: #eef2ff; color: #334155; padding: 2px 8px; font-size: 11px; font-weight: 800; }
.contact-note { white-space: normal !important; line-height: 1.25; }
.contact-actions { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.contact-actions button { width: auto; height: 30px; border-radius: 999px; padding: 0 10px; background: #e6fffb; color: #0f766e; font-weight: 900; }
.contact-actions button.danger { width: 30px; padding: 0; background: #fee2e2; color: #991b1b; }
.add-contact-box button:disabled { opacity: .6; cursor: not-allowed; }
.tool-list.empty.error { border-color: #fecaca; color: #991b1b; background: #fff7f7; }

/* V3.9.17 — ajustes conservadores sobre a base estável */
.layout,
.app-shell .layout,
.app-shell.details-active .layout {
  grid-template-columns: 340px minmax(360px, 1fr) 320px !important;
}
.sidebar { min-width: 0 !important; }
.main-rail {
  width: 100% !important;
  height: 58px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-around !important;
  gap: 6px !important;
  padding: 8px 10px !important;
  background: #17212b !important;
  border-right: 0 !important;
  border-bottom: 1px solid #263545 !important;
  position: relative !important;
  z-index: 4 !important;
}
.rail-btn {
  width: 42px !important;
  height: 42px !important;
  border-radius: 14px !important;
  padding: 0 !important;
  display: inline-grid !important;
  place-items: center !important;
  background: transparent !important;
  color: #cbd5e1 !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
}
.rail-btn svg { width: 22px !important; height: 22px !important; stroke: currentColor !important; fill: none !important; stroke-width: 2 !important; stroke-linecap: round !important; stroke-linejoin: round !important; }
.rail-btn:hover { background: rgba(255,255,255,.07) !important; color: #fff !important; }
.rail-btn.active { background: rgba(20,184,166,.15) !important; color: #5eead4 !important; border-color: rgba(45,212,191,.55) !important; box-shadow: inset 0 0 0 1px rgba(45,212,191,.18) !important; }
.rail-logout { margin-left: 0 !important; color: #e2e8f0 !important; }
.filter-box { border-top: 0 !important; }

.add-contact-toggle {
  margin: 8px 10px 0 !important;
  width: calc(100% - 20px) !important;
  background: #0f766e !important;
  color: #fff !important;
  border-radius: 13px !important;
}
.add-contact-box[hidden] { display: none !important; }
.add-contact-box {
  margin: 8px 10px 10px !important;
  box-shadow: 0 16px 36px rgba(15,23,42,.12) !important;
}
.contact-actions button[data-contact-open]::before { content: ''; }
.contact-actions button[data-contact-open] { min-width: 124px !important; }

.message { position: relative !important; }
.message-actions {
  top: -18px !important;
  right: 10px !important;
  left: auto !important;
  transform: none !important;
  opacity: 0 !important;
  display: inline-flex !important;
  gap: 4px !important;
  padding: 3px !important;
  border: 1px solid #dbe4ee !important;
  background: rgba(255,255,255,.96) !important;
  border-radius: 999px !important;
  box-shadow: 0 8px 22px rgba(15,23,42,.12) !important;
  z-index: 3 !important;
}
.message:hover .message-actions,
.message:focus-within .message-actions { opacity: 1 !important; }
.message.inbound .message-actions,
.message.outbound .message-actions { right: 10px !important; left: auto !important; }
.message-actions button {
  width: 28px !important;
  height: 28px !important;
  border-radius: 999px !important;
  padding: 0 !important;
  background: #f8fafc !important;
  color: #334155 !important;
  display: grid !important;
  place-items: center !important;
  font-weight: 900 !important;
}
.message-actions button:hover { background: #e2e8f0 !important; }
.message-delete-btn:hover { background: #fee2e2 !important; color: #991b1b !important; }

.vertical-actions { display: grid !important; grid-template-columns: 1fr !important; gap: 8px !important; }
.danger-soft { background: #fee2e2 !important; color: #991b1b !important; }
.recording-card {
  min-width: min(520px, calc(100vw - 28px)) !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 14px 16px !important;
}
.recording-copy { display: grid !important; gap: 2px !important; min-width: 0 !important; flex: 1 !important; }
.recording-copy em { color: #64748b !important; font-style: normal !important; font-size: 12px !important; }
.recording-actions { display: flex !important; gap: 8px !important; align-items: center !important; }
.recording-actions button { white-space: nowrap !important; }
.recording-pulse { animation: mswa-pulse 1s infinite !important; }
@keyframes mswa-pulse { 0%,100%{ transform:scale(.92); opacity:.75;} 50%{ transform:scale(1.18); opacity:1;} }

.media-lightbox:not([hidden]) { display: grid !important; }
.media-lightbox-body img,
.media-lightbox-body video { max-width: min(96vw, 1280px) !important; max-height: 88vh !important; object-fit: contain !important; }
.media-sticker-card { background: transparent !important; border-color: transparent !important; box-shadow: none !important; padding: 0 !important; }
.media-sticker-card img { max-width: 160px !important; max-height: 160px !important; object-fit: contain !important; }

@media (max-width: 1100px) {
  .layout,
  .app-shell .layout,
  .app-shell.details-active .layout { grid-template-columns: 300px 1fr !important; }
}
@media (max-width: 760px) {
  .main-rail { height: 56px !important; }
  .layout,
  .app-shell .layout,
  .app-shell.details-active .layout { display: block !important; height: calc(100dvh - 92px) !important; }
  .recording-card { align-items: stretch !important; flex-wrap: wrap !important; }
  .recording-actions { width: 100% !important; }
  .recording-actions button { flex: 1 !important; }
  .message-actions { opacity: 1 !important; top: -20px !important; }
}


/* V3.9.18 — rail vertical compacto + menu premium de mensagem + correções áudio/contatos */
.layout,
.app-shell .layout,
.app-shell.details-active .layout {
  grid-template-columns: 340px minmax(360px, 1fr) 320px !important;
}
.sidebar {
  display: grid !important;
  grid-template-columns: 56px minmax(0, 1fr) !important;
  grid-template-rows: 1fr !important;
  background: #f8fafc !important;
  min-width: 0 !important;
}
.main-rail {
  grid-column: 1 !important;
  grid-row: 1 !important;
  width: 56px !important;
  height: 100% !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  padding: 10px 7px !important;
  background: #17212b !important;
  border-right: 1px solid rgba(15,23,42,.14) !important;
  border-bottom: 0 !important;
  z-index: 5 !important;
}
.rail-btn {
  width: 40px !important;
  height: 40px !important;
  border-radius: 14px !important;
  background: transparent !important;
  color: #cbd5e1 !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
}
.rail-btn svg { width: 21px !important; height: 21px !important; }
.rail-btn.active {
  color: #ecfeff !important;
  background: rgba(20,184,166,.18) !important;
  border-color: rgba(45,212,191,.52) !important;
  box-shadow: inset 3px 0 0 #2dd4bf !important;
}
.rail-logout { margin-top: auto !important; margin-left: 0 !important; }
.sidebar-module {
  grid-column: 2 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
#moduleAttendance.sidebar-module { display: flex !important; }
.sidebar-module[hidden] { display: none !important; }
.side-tool-panel { overflow: auto !important; }

.message-actions {
  top: -16px !important;
  right: 8px !important;
  left: auto !important;
  gap: 5px !important;
  padding: 3px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.96) !important;
  border: 1px solid #dbe4ee !important;
  box-shadow: 0 8px 22px rgba(15,23,42,.12) !important;
  opacity: 0 !important;
}
.message:hover .message-actions,
.message:focus-within .message-actions { opacity: 1 !important; }
.message.inbound .message-actions,
.message.outbound .message-actions { right: 8px !important; left: auto !important; }
.message-react-btn,
.message-more-btn {
  width: 27px !important;
  height: 27px !important;
  border-radius: 999px !important;
  border: 0 !important;
  background: #f8fafc !important;
  color: #334155 !important;
  display: grid !important;
  place-items: center !important;
  cursor: pointer !important;
  font-size: 16px !important;
  line-height: 1 !important;
}
.message-more-btn { font-size: 18px !important; font-weight: 900 !important; }
.message-react-btn:hover,
.message-more-btn:hover { background: #e2e8f0 !important; }
.premium-message-menu {
  position: fixed;
  z-index: 9999;
  width: 184px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(15,23,42,.18);
  padding: 8px;
}
.premium-message-menu button {
  width: 100%;
  border: 0;
  background: transparent;
  color: #0f172a;
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  font-weight: 750;
  font-size: 14px;
}
.premium-message-menu button:hover { background: #f1f5f9; }
.premium-message-menu svg { width: 17px; height: 17px; fill: none; stroke: #94a3b8; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.recording-overlay { pointer-events: auto !important; }
.recording-card { pointer-events: auto !important; background: #ffffff !important; color: #0f172a !important; border: 1px solid #dbe4ee !important; }
.recording-card small { color: #334155 !important; }
.recording-card em { color: #64748b !important; }
.recording-actions button { cursor: pointer !important; }
.add-contact-toggle { margin: 10px 0 0 !important; width: 100% !important; }
.add-contact-box { margin: 8px 0 10px !important; }
.contact-row { border-radius: 14px !important; }
.contact-actions button[data-contact-open] { background: #0f766e !important; color: #fff !important; min-width: 132px !important; }
@media (max-width: 1100px) {
  .layout,
  .app-shell .layout,
  .app-shell.details-active .layout { grid-template-columns: 300px 1fr !important; }
  .sidebar { grid-template-columns: 52px minmax(0,1fr) !important; }
  .main-rail { width: 52px !important; }
}
@media (max-width: 760px) {
  .layout,
  .app-shell .layout,
  .app-shell.details-active .layout { display: block !important; height: calc(100dvh - 68px) !important; }
  .sidebar { display: grid !important; grid-template-columns: 52px minmax(0,1fr) !important; height: 100% !important; }
  .app-shell.chat-open .sidebar { display: none !important; }
  .message-actions { opacity: 1 !important; top: -18px !important; }
}


/* V3.9.19 — correções finais: módulos sem sobreposição, contatos visíveis e ações premium */
.app-shell .layout,
.app-shell.details-active .layout {
  grid-template-columns: 340px minmax(360px, 1fr) 320px !important;
}
.sidebar {
  display: grid !important;
  grid-template-columns: 56px minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  overflow: hidden !important;
  background: #fff !important;
}
.main-rail {
  grid-column: 1 !important;
  grid-row: 1 !important;
  width: 56px !important;
  height: 100% !important;
  min-height: 0 !important;
  flex-direction: column !important;
  background: #17212b !important;
  z-index: 6 !important;
}
.sidebar-module {
  grid-column: 2 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  display: none !important;
  flex-direction: column !important;
  background: #fff !important;
}
.sidebar-module.active {
  display: flex !important;
}
.sidebar-module[hidden],
#moduleAttendance.sidebar-module[hidden],
#moduleContacts.sidebar-module[hidden],
#moduleInternal.sidebar-module[hidden],
#moduleSettings.sidebar-module[hidden] {
  display: none !important;
}
#moduleAttendance.sidebar-module.active,
#moduleContacts.sidebar-module.active,
#moduleInternal.sidebar-module.active,
#moduleSettings.sidebar-module.active {
  display: flex !important;
}
.side-tool-panel {
  overflow: auto !important;
  padding: 12px !important;
  gap: 10px !important;
  background: #fff !important;
  border-left: 1px solid #e5edf5 !important;
}
.side-tool-head {
  padding: 4px 2px 6px !important;
}
.side-tool-head strong { font-size: 15px !important; }
.side-tool-head small { font-size: 12px !important; color: #64748b !important; }
.add-contact-toggle {
  width: 100% !important;
  margin: 4px 0 0 !important;
  border: 1px solid #ccfbf1 !important;
  background: #ecfeff !important;
  color: #0f766e !important;
  border-radius: 13px !important;
  padding: 10px 12px !important;
  font-weight: 900 !important;
  box-shadow: none !important;
}
.add-contact-box {
  margin: 4px 0 8px !important;
  padding: 10px !important;
  border-radius: 14px !important;
  box-shadow: none !important;
}
.tool-list.contacts-list {
  display: grid !important;
  gap: 8px !important;
  overflow: visible !important;
}
.contacts-count {
  font-size: 11px;
  color: #64748b;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 0 2px 2px;
}
.contact-row {
  display: grid !important;
  grid-template-columns: 34px minmax(0,1fr) auto !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 9px !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  box-shadow: none !important;
}
.contact-avatar {
  width: 34px; height: 34px; border-radius: 12px;
  display: grid; place-items: center;
  background: #e0f2fe; color: #075985;
  font-weight: 950; font-size: 12px;
}
.contact-info { min-width: 0 !important; }
.contact-info strong, .contact-info small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contact-actions { display: flex !important; gap: 6px !important; align-items: center !important; }
.contact-actions button[data-contact-open] {
  width: auto !important;
  min-width: 84px !important;
  height: 30px !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  background: #0f766e !important;
  color: #fff !important;
  font-weight: 900 !important;
  font-size: 12px !important;
}
.contact-actions button[data-contact-delete] {
  width: 28px !important; height: 28px !important;
  background: #fff1f2 !important; color: #be123c !important;
  border: 1px solid #ffe4e6 !important;
}

.message-actions {
  position: absolute !important;
  top: 6px !important;
  right: 6px !important;
  left: auto !important;
  opacity: 0 !important;
  display: inline-flex !important;
  gap: 4px !important;
  padding: 2px !important;
  border: 1px solid #dbe4ee !important;
  background: rgba(255,255,255,.92) !important;
  border-radius: 999px !important;
  box-shadow: 0 8px 20px rgba(15,23,42,.10) !important;
  z-index: 5 !important;
}
.message:hover .message-actions,
.message:focus-within .message-actions { opacity: 1 !important; }
.message.inbound .message-actions,
.message.outbound .message-actions { right: 6px !important; left: auto !important; }
.message-react-btn,
.message-more-btn {
  width: 25px !important;
  height: 25px !important;
  border: 0 !important;
  background: transparent !important;
  color: #475569 !important;
  border-radius: 999px !important;
  display: grid !important;
  place-items: center !important;
  cursor: pointer !important;
  padding: 0 !important;
  box-shadow: none !important;
  line-height: 1 !important;
}
.message-react-btn { font-size: 14px !important; }
.message-more-btn { font-size: 18px !important; font-weight: 950 !important; }
.message-react-btn:hover,
.message-more-btn:hover { background: #f1f5f9 !important; color: #0f172a !important; }
.premium-message-menu {
  width: 176px !important;
  border-radius: 14px !important;
  padding: 7px !important;
}
.message-reaction {
  right: 12px !important;
  bottom: -15px !important;
  z-index: 4 !important;
}
.message.inbound .message-reaction { left: 12px !important; right: auto !important; }
.recording-overlay {
  z-index: 10020 !important;
  pointer-events: auto !important;
}
.recording-card {
  pointer-events: auto !important;
  background: #fff !important;
  color: #0f172a !important;
  border: 1px solid #dbe4ee !important;
  box-shadow: 0 18px 52px rgba(15,23,42,.22) !important;
}
.recording-card.sending { opacity: .72; }
.recording-actions,
.recording-actions button {
  pointer-events: auto !important;
}
.recording-actions button {
  cursor: pointer !important;
}
@media (max-width: 1100px) {
  .app-shell .layout,
  .app-shell.details-active .layout { grid-template-columns: 300px 1fr !important; }
  .sidebar { grid-template-columns: 52px minmax(0,1fr) !important; }
  .main-rail { width: 52px !important; }
}
@media (max-width: 760px) {
  .app-shell .layout,
  .app-shell.details-active .layout { display: block !important; height: calc(100dvh - 68px) !important; }
  .sidebar { display: grid !important; grid-template-columns: 52px minmax(0,1fr) !important; height: 100% !important; }
  .app-shell.chat-open .sidebar { display: none !important; }
  .message-actions { opacity: 1 !important; }
}


/* V3.9.20 — contatos compactos, menus limpos e sincronização fina */
.compact-contacts-list { gap: 6px !important; overflow: auto !important; }
.compact-contact.contact-row {
  grid-template-columns: 30px minmax(0,1fr) 30px !important;
  gap: 7px !important;
  padding: 8px 7px !important;
  min-height: 56px !important;
  border-radius: 12px !important;
  align-items: center !important;
}
.compact-contact .contact-avatar { width: 30px !important; height: 30px !important; border-radius: 10px !important; font-size: 11px !important; }
.compact-contact .contact-info { gap: 1px !important; line-height: 1.12 !important; }
.compact-contact .contact-info strong { font-size: 13px !important; font-weight: 950 !important; max-width: 100% !important; }
.compact-contact .contact-info small { font-size: 11px !important; color: #64748b !important; }
.contact-subline { display: flex; align-items: center; gap: 4px; min-width: 0; }
.contact-subline span { max-width: 105px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #64748b; font-size: 10.5px; font-weight: 750; }
.contact-tag.mini { margin-top: 0 !important; padding: 1px 6px !important; font-size: 10px !important; }
.compact-contact .contact-note { display: none !important; }
.contact-more-btn {
  width: 28px !important; height: 28px !important; border-radius: 999px !important;
  border: 1px solid #e2e8f0 !important; background: #f8fafc !important; color: #334155 !important;
  display: grid !important; place-items: center !important; font-size: 20px !important; line-height: 1 !important;
  cursor: pointer !important; padding: 0 !important; box-shadow: none !important;
}
.contact-more-btn:hover { background: #eef6f5 !important; color: #0f766e !important; }
.premium-contact-menu {
  position: fixed; z-index: 10001; min-width: 188px; padding: 8px;
  border: 1px solid #dbe4ee; border-radius: 14px; background: #fff;
  box-shadow: 0 18px 40px rgba(15,23,42,.18);
}
.premium-contact-menu button {
  width: 100%; height: 38px; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; border: 0; background: transparent; color: #0f172a; border-radius: 10px;
  padding: 0 10px; font-weight: 850; cursor: pointer; text-align: left;
}
.premium-contact-menu button:hover { background: #f1f5f9; }
.premium-contact-menu button.danger { color: #991b1b; }
.premium-contact-menu button.danger:hover { background: #fff1f2; }
.premium-contact-menu svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .62; }
.contacts-count { position: sticky; top: 0; z-index: 1; background: #fff; padding: 2px 2px 5px !important; }
.message-actions { top: -14px !important; right: 10px !important; transform: translateY(-2px); }
.message-react-btn { font-size: 15px !important; }
.message-more-btn { font-size: 19px !important; }

/* V3.9.25 - chips no rodape do card de atendimento */
.conversation-item.compact {
  min-height: 70px !important;
  align-items: stretch !important;
}
.conversation-item.compact .conversation-main {
  grid-template-rows: auto auto 1fr !important;
}
.conversation-item.compact .compact-line,
.conversation-item.compact .compact-meta-line {
  justify-content: flex-start !important;
}
.conversation-chip-row {
  display: flex !important;
  align-items: center !important;
  align-self: end !important;
  gap: 5px !important;
  min-width: 0 !important;
  margin-top: 3px !important;
  overflow: hidden !important;
}
.conversation-chip-row > * {
  flex: 0 1 auto !important;
  max-width: 100% !important;
}
.conversation-chip-row .business-chip {
  max-width: 112px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.conversation-dots {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}
.conversation-dots:hover {
  border: 0 !important;
  box-shadow: none !important;
  background: #eef6f5 !important;
}
@media (max-width: 760px) {
  .premium-contact-menu { min-width: 176px; }
  .compact-contact.contact-row { min-height: 58px !important; }
  .conversation-item.compact { min-height: 68px !important; }
}

/* V3.9.35 — feedback imediato de áudio e sincronização mais suave */
.audio-preparing-state {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 210px;
}
.audio-preparing-state .tiny-spinner {
  width: 14px !important;
  height: 14px !important;
  border-width: 2px !important;
  flex: 0 0 auto;
}
.conversation-item.is-opening,
.conversation-item.compact.is-opening {
  background: rgba(15, 118, 110, .10) !important;
  box-shadow: inset 4px 0 0 var(--accent, #0f766e) !important;
}

/* V3.9.36 — refinamentos operacionais */
.presence-select{height:34px;border:1px solid rgba(15,23,42,.12);border-radius:999px;background:#fff;padding:0 12px;font-size:12px;font-weight:800;color:#1f2937;outline:none;box-shadow:0 8px 18px rgba(15,23,42,.05)}
.rail-btn{font-size:11px}.filter-box input,.filter-box select{font-size:12px}.conversation-section-title{font-size:11px;letter-spacing:.08em}.conversation-name{font-size:13px}.conversation-phone{font-size:11px}.conversation-chip-row span{font-size:10px}.status-chip,.business-chip,.window-mini,.privacy-chip,.sla-chip{font-size:10px;padding:3px 7px}.side-tool-head strong{font-size:13px}.side-tool-head small{font-size:11px}.side-tool-panel,.sidebar-module{font-size:12px}.conversation-main{min-height:76px}
.sla-chip{display:inline-flex;align-items:center;border-radius:999px;background:#eff6ff;color:#1d4ed8;font-weight:800}.sla-chip.warn{background:#fff1f2;color:#be123c;animation:slaPulse 1.8s ease-in-out infinite}@keyframes slaPulse{0%,100%{box-shadow:0 0 0 rgba(190,18,60,0)}50%{box-shadow:0 0 0 3px rgba(190,18,60,.12)}}
.location-card{display:flex;flex-direction:column;gap:4px;text-decoration:none;color:#0f172a;background:linear-gradient(135deg,#f8fafc,#eef6ff);border:1px solid rgba(37,99,235,.18);border-radius:16px;padding:12px 14px;margin-top:4px;min-width:min(320px,72vw);box-shadow:0 10px 24px rgba(15,23,42,.08)}.location-card strong{font-size:13px}.location-card span{font-size:12px;color:#475569}.location-card small{font-size:11px;color:#2563eb;font-weight:800}.location-card.unavailable{background:#fff7ed;border-color:#fed7aa}
.template-btn{border:0;border-radius:999px;background:#f3f4f6;color:#111827;font-weight:800;padding:0 14px;height:42px;cursor:pointer}.template-btn:disabled{opacity:.45;cursor:not-allowed}.template-modal-card,.history-modal-card{max-width:560px}.template-modal-card label{display:flex;flex-direction:column;gap:6px;margin:10px 0;font-size:12px;font-weight:800;color:#334155}.template-status{font-size:12px;color:#64748b;min-height:18px}.history-modal-messages{max-height:58vh;overflow:auto;background:#f8fafc;border:1px solid rgba(15,23,42,.08);border-radius:16px;padding:14px}.history-modal-messages .message{position:relative}.history-modal-messages .message-actions{display:none}
.dashboard-box{display:flex;flex-direction:column;gap:12px}.dash-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.dash-card{background:#fff;border:1px solid rgba(15,23,42,.08);border-radius:16px;padding:12px;box-shadow:0 10px 24px rgba(15,23,42,.04)}.dash-card small{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:#64748b;font-weight:800}.dash-card strong{font-size:24px;color:#0f172a}.dash-sla{display:flex;justify-content:space-between;align-items:center;border-radius:16px;padding:12px;background:#ecfdf5;border:1px solid #bbf7d0;color:#166534;font-size:12px;font-weight:900}.dash-sla.warn{background:#fff1f2;border-color:#fecdd3;color:#be123c}.dash-agent-list{display:flex;flex-direction:column;gap:8px}.dash-agent-list div{display:flex;justify-content:space-between;align-items:center;background:#fff;border:1px solid rgba(15,23,42,.08);border-radius:14px;padding:10px 12px;font-size:12px}.dash-agent-list span{display:flex;align-items:center;gap:7px}.presence-dot{width:8px;height:8px;border-radius:999px;background:#22c55e;display:inline-block}.presence-dot.away{background:#f59e0b}.presence-dot.busy{background:#ef4444}
.side-item.history-item small{white-space:normal;line-height:1.35}.accordion-toggle .acc-title{font-size:12px}.accordion-panel label{font-size:12px}.settings-note{font-size:11px}
@media(max-width:720px){.presence-select{max-width:110px}.template-btn{padding:0 10px;font-size:11px}.dash-grid{grid-template-columns:1fr 1fr}.conversation-name{font-size:12.5px}}

/* V3.9.37 — cards compactos, histórico em popup de conversa e templates só fora da janela */
.conversation-item.compact {
  min-height: 54px !important;
  padding: 7px 8px !important;
  grid-template-columns: minmax(0, 1fr) 24px !important;
  gap: 3px !important;
  align-items: center !important;
}
.conversation-item.compact .conversation-main,
.conversation-main {
  min-height: 0 !important;
  padding: 0 !important;
  gap: 2px !important;
  grid-template-rows: auto auto auto !important;
}
.conversation-item.compact .conversation-name {
  font-size: 12.6px !important;
  line-height: 1.12 !important;
  font-weight: 850 !important;
}
.conversation-item.compact .conversation-phone {
  font-size: 10.7px !important;
  line-height: 1.08 !important;
}
.conversation-chip-row {
  flex-wrap: nowrap !important;
  gap: 3px !important;
  margin-top: 1px !important;
  max-height: 18px !important;
  overflow: hidden !important;
}
.conversation-chip-row > * {
  font-size: 9.4px !important;
  line-height: 1 !important;
  padding: 2px 5px !important;
  max-width: 92px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.conversation-chip-row .business-chip { max-width: 84px !important; }
.conversation-chip-row .sla-chip { max-width: 86px !important; }
.conversation-dots {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  font-size: 18px !important;
}
.conversation-section-title {
  font-size: 10px !important;
  padding: 7px 10px 5px !important;
}
.filter-box input,
.filter-box select {
  font-size: 11px !important;
  min-height: 32px !important;
  padding: 7px 9px !important;
}
.rail-btn { font-size: 10px !important; }
.sidebar-module,
.side-tool-panel { font-size: 11.5px !important; }
.side-tool-head strong { font-size: 12.5px !important; }
.side-tool-head small { font-size: 10.5px !important; }

.wa-template-btn[hidden] { display: none !important; }
.wa-template-btn {
  height: 38px !important;
  padding: 0 12px !important;
  background: #111827 !important;
  color: #fff !important;
  font-size: 11px !important;
  letter-spacing: .01em !important;
  box-shadow: 0 8px 18px rgba(15,23,42,.12) !important;
}
.reopen-template-box {
  align-items: center !important;
}
.reopen-template-box .reopen-copy span {
  line-height: 1.35 !important;
}

.history-modal-card {
  width: min(760px, 94vw) !important;
  max-width: 760px !important;
  padding: 16px !important;
}
.history-modal-card h3 {
  margin-bottom: 10px !important;
  font-size: 15px !important;
}
.history-modal-messages.history-chat-messages,
.history-chat-messages {
  height: min(66vh, 620px) !important;
  max-height: 66vh !important;
  overflow: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  padding: 16px !important;
  background-color: #edf5f2 !important;
  background-image: radial-gradient(rgba(15, 23, 42, .045) 1px, transparent 1px) !important;
  background-size: 16px 16px !important;
  border: 1px solid rgba(15,23,42,.08) !important;
  border-radius: 18px !important;
}
.history-chat-messages .message {
  max-width: min(560px, 86%) !important;
  padding: 8px 10px !important;
  border-radius: 14px !important;
  white-space: pre-wrap !important;
}
.history-chat-messages .message.inbound {
  align-self: flex-start !important;
  background: #fff !important;
  border-bottom-left-radius: 5px !important;
}
.history-chat-messages .message.outbound {
  align-self: flex-end !important;
  background: #dcfce7 !important;
  border-bottom-right-radius: 5px !important;
}
.history-chat-messages .message-actions,
.history-chat-messages .message-react-btn,
.history-chat-messages .message-more-btn,
.history-chat-messages .message-reaction { display: none !important; }
.history-chat-messages .message-meta {
  justify-content: flex-end !important;
  font-size: 10px !important;
  opacity: .68 !important;
}
.history-chat-messages .location-card {
  min-width: min(280px, 70vw) !important;
}

@media (max-width: 760px) {
  .conversation-item.compact { min-height: 52px !important; padding: 7px 8px !important; }
  .conversation-chip-row > * { font-size: 9px !important; padding: 2px 5px !important; }
  .wa-template-btn { padding: 0 9px !important; font-size: 10.5px !important; }
  .history-modal-card { width: 96vw !important; }
  .history-chat-messages { padding: 12px !important; }
}


/* V3.9.38 — menu de atendimento mais compacto e elegante */
.context-menu {
  width: 168px !important;
  padding: 5px !important;
  border-radius: 12px !important;
  box-shadow: 0 14px 36px rgba(15,23,42,.18) !important;
}
.context-menu button {
  min-height: 32px !important;
  padding: 6px 8px !important;
  font-size: 13px !important;
  line-height: 1.22 !important;
  font-weight: 760 !important;
  border-radius: 8px !important;
}
.context-menu button.danger {
  color: #991b1b !important;
  font-weight: 800 !important;
}


/* V3.9.40 — Ajustes básicos de UI */
/* Remove ruído visual: diagnóstico de áudio agora fica apenas no console. */
.smart-contact-bar {
  gap: 18px !important;
}
.smart-actions {
  gap: 12px !important;
  padding-left: 10px !important;
}
.smart-actions .icon-btn {
  flex: 0 0 auto !important;
}
@media (max-width: 760px) {
  .smart-contact-bar { gap: 10px !important; }
  .smart-actions { gap: 8px !important; padding-left: 4px !important; }
}

/* V3.9.42 — templates travados pelo número de origem */
.template-origin-info{
  margin:8px 0 12px;
  padding:9px 11px;
  border:1px solid rgba(148,163,184,.28);
  border-radius:12px;
  background:rgba(15,23,42,.035);
  color:#475569;
  font-size:12px;
  line-height:1.35;
}
#templateNumberSelect:disabled{
  opacity:.82;
  cursor:not-allowed;
  background:#f8fafc;
}

/* ===== V3.9.44 — temas extras via Configurações =====
   Observação: o tema Claro original permanece intocado. As regras abaixo só entram
   quando data-theme é ocean, gold ou violet. */
.settings-select-row {
  cursor: default;
  gap: 10px;
  padding: 10px 12px !important;
}
.settings-select-row select {
  width: 100%;
  max-width: 170px;
  padding: 7px 9px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 800;
  color: #0f172a;
  background: #f8fafc;
}

:root[data-theme="ocean"] {
  --accent: #0f6ea8;
  --accent-dark: #084f7e;
  --app-bg: #edf6fb;
  --panel-bg: #ffffff;
  --panel-soft: #f2f8fc;
  --text-main: #102033;
  --text-soft: #5f7186;
  --border-soft: #d8e8f2;
  --line: #d8e8f2;
  --soft: #f2f8fc;
  --panel: #ffffff;
  --text: #102033;
  --chat-bg: #eef7fb;
  --bubble-in: #ffffff;
  --bubble-out: #dbeafe;
  --bubble-pending: #e0f2fe;
}
:root[data-theme="gold"] {
  --accent: #9a6a16;
  --accent-dark: #74500f;
  --app-bg: #f5f1e8;
  --panel-bg: #ffffff;
  --panel-soft: #fbf8f1;
  --text-main: #1f2937;
  --text-soft: #6b7280;
  --border-soft: #e8dcc4;
  --line: #e8dcc4;
  --soft: #fbf8f1;
  --panel: #ffffff;
  --text: #1f2937;
  --chat-bg: #f4efe5;
  --bubble-in: #ffffff;
  --bubble-out: #fef3c7;
  --bubble-pending: #fffbeb;
}
:root[data-theme="violet"] {
  --accent: #6d5bd0;
  --accent-dark: #4c3ea8;
  --app-bg: #f2f1fb;
  --panel-bg: #ffffff;
  --panel-soft: #f7f6ff;
  --text-main: #171b34;
  --text-soft: #687086;
  --border-soft: #ddd9f3;
  --line: #ddd9f3;
  --soft: #f7f6ff;
  --panel: #ffffff;
  --text: #171b34;
  --chat-bg: #f1f0fb;
  --bubble-in: #ffffff;
  --bubble-out: #ede9fe;
  --bubble-pending: #eef2ff;
}

:root[data-theme="ocean"] body { background: #e6f1f8; }
:root[data-theme="gold"] body { background: #efe6d6; }
:root[data-theme="violet"] body { background: #eceaf8; }

:root[data-theme="ocean"] .login-shell { background: radial-gradient(circle at 12% 8%, #38bdf8, #0f6ea8 36%, #082f49 72%, #020617); }
:root[data-theme="gold"] .login-shell { background: radial-gradient(circle at 12% 8%, #d6b56d, #7c5514 40%, #111827 78%, #020617); }
:root[data-theme="violet"] .login-shell { background: radial-gradient(circle at 12% 8%, #a78bfa, #6366f1 35%, #312e81 72%, #020617); }

:root[data-theme="ocean"] .brand-mark,
:root[data-theme="ocean"] .topbar { background: linear-gradient(135deg, #084f7e, #0ea5e9); }
:root[data-theme="gold"] .brand-mark,
:root[data-theme="gold"] .topbar { background: linear-gradient(135deg, #111827, #7c5514 58%, #b8892d); }
:root[data-theme="violet"] .brand-mark,
:root[data-theme="violet"] .topbar { background: linear-gradient(135deg, #312e81, #6d5bd0 55%, #0ea5e9); }

:root[data-theme="ocean"] .layout,
:root[data-theme="gold"] .layout,
:root[data-theme="violet"] .layout { background: var(--line); }
:root[data-theme="ocean"] .sidebar,
:root[data-theme="ocean"] .chat-panel,
:root[data-theme="ocean"] .details-panel,
:root[data-theme="gold"] .sidebar,
:root[data-theme="gold"] .chat-panel,
:root[data-theme="gold"] .details-panel,
:root[data-theme="violet"] .sidebar,
:root[data-theme="violet"] .chat-panel,
:root[data-theme="violet"] .details-panel { background: var(--panel-bg); }

:root[data-theme="ocean"] .filter-box,
:root[data-theme="ocean"] .side-tool-panel,
:root[data-theme="gold"] .filter-box,
:root[data-theme="gold"] .side-tool-panel,
:root[data-theme="violet"] .filter-box,
:root[data-theme="violet"] .side-tool-panel { background: var(--panel-soft); }

:root[data-theme="ocean"] .main-rail,
:root[data-theme="gold"] .main-rail,
:root[data-theme="violet"] .main-rail { background: linear-gradient(180deg, rgba(255,255,255,.96), var(--panel-soft)); border-right-color: var(--line); }
:root[data-theme="ocean"] .rail-btn.active,
:root[data-theme="gold"] .rail-btn.active,
:root[data-theme="violet"] .rail-btn.active { background: var(--accent); color: #fff; box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 28%, transparent); }

:root[data-theme="ocean"] .conversation-item:hover { background: #eef8fd; }
:root[data-theme="ocean"] .conversation-item.active { background: #e0f2fe; box-shadow: inset 4px 0 0 var(--accent); }
:root[data-theme="gold"] .conversation-item:hover { background: #fffbeb; }
:root[data-theme="gold"] .conversation-item.active { background: #fef3c7; box-shadow: inset 4px 0 0 var(--accent); }
:root[data-theme="violet"] .conversation-item:hover { background: #f5f3ff; }
:root[data-theme="violet"] .conversation-item.active { background: #ede9fe; box-shadow: inset 4px 0 0 var(--accent); }

:root[data-theme="ocean"] .messages,
:root[data-theme="gold"] .messages,
:root[data-theme="violet"] .messages {
  background:
    radial-gradient(circle at 18% 10%, rgba(255,255,255,.65), transparent 24%),
    radial-gradient(circle at 88% 78%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 28%),
    var(--chat-bg) !important;
}
:root[data-theme="ocean"] .message.inbound,
:root[data-theme="gold"] .message.inbound,
:root[data-theme="violet"] .message.inbound { background: var(--bubble-in) !important; }
:root[data-theme="ocean"] .message.outbound,
:root[data-theme="gold"] .message.outbound,
:root[data-theme="violet"] .message.outbound { background: var(--bubble-out) !important; }

:root[data-theme="ocean"] button:not(.ghost):not(.rail-btn):not(.conversation-dots):not(.icon-btn):not(.message-action-btn):not(.media-lightbox-close),
:root[data-theme="gold"] button:not(.ghost):not(.rail-btn):not(.conversation-dots):not(.icon-btn):not(.message-action-btn):not(.media-lightbox-close),
:root[data-theme="violet"] button:not(.ghost):not(.rail-btn):not(.conversation-dots):not(.icon-btn):not(.message-action-btn):not(.media-lightbox-close) { background: var(--accent); }
:root[data-theme="ocean"] button:not(.ghost):not(.rail-btn):not(.conversation-dots):not(.icon-btn):not(.message-action-btn):not(.media-lightbox-close):hover,
:root[data-theme="gold"] button:not(.ghost):not(.rail-btn):not(.conversation-dots):not(.icon-btn):not(.message-action-btn):not(.media-lightbox-close):hover,
:root[data-theme="violet"] button:not(.ghost):not(.rail-btn):not(.conversation-dots):not(.icon-btn):not(.message-action-btn):not(.media-lightbox-close):hover { background: var(--accent-dark); }

:root[data-theme="ocean"] input:focus,
:root[data-theme="ocean"] textarea:focus,
:root[data-theme="ocean"] select:focus,
:root[data-theme="gold"] input:focus,
:root[data-theme="gold"] textarea:focus,
:root[data-theme="gold"] select:focus,
:root[data-theme="violet"] input:focus,
:root[data-theme="violet"] textarea:focus,
:root[data-theme="violet"] select:focus { border-color: color-mix(in srgb, var(--accent) 48%, white); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 13%, transparent); }

:root[data-theme="ocean"] .unread,
:root[data-theme="gold"] .unread,
:root[data-theme="violet"] .unread { background: var(--accent); color: #fff; }
:root[data-theme="ocean"] .settings-row strong { color: #0f6ea8; }
:root[data-theme="gold"] .settings-row strong { color: #9a6a16; }
:root[data-theme="violet"] .settings-row strong { color: #6d5bd0; }


/* ===== V3.9.45 — temas refinados sem pintar cards laterais =====
   Mantém o tema Claro original intocado. Nos temas extras, a cor fica concentrada
   em menus, barra superior, avatares, fontes e fundo do chat. Cards laterais
   permanecem neutros para reduzir poluição visual. */
:root[data-theme="ocean"] .filter-box,
:root[data-theme="ocean"] .side-tool-panel,
:root[data-theme="ocean"] .conversation-item,
:root[data-theme="ocean"] .conversation-item.compact,
:root[data-theme="ocean"] .client-panel-card,
:root[data-theme="ocean"] .mini-stat,
:root[data-theme="ocean"] .side-item,
:root[data-theme="ocean"] .info-card,
:root[data-theme="ocean"] .contact-row,
:root[data-theme="ocean"] .compact-contact.contact-row,
:root[data-theme="ocean"] .add-contact-box,
:root[data-theme="ocean"] .internal-placeholder,
:root[data-theme="gold"] .filter-box,
:root[data-theme="gold"] .side-tool-panel,
:root[data-theme="gold"] .conversation-item,
:root[data-theme="gold"] .conversation-item.compact,
:root[data-theme="gold"] .client-panel-card,
:root[data-theme="gold"] .mini-stat,
:root[data-theme="gold"] .side-item,
:root[data-theme="gold"] .info-card,
:root[data-theme="gold"] .contact-row,
:root[data-theme="gold"] .compact-contact.contact-row,
:root[data-theme="gold"] .add-contact-box,
:root[data-theme="gold"] .internal-placeholder,
:root[data-theme="violet"] .filter-box,
:root[data-theme="violet"] .side-tool-panel,
:root[data-theme="violet"] .conversation-item,
:root[data-theme="violet"] .conversation-item.compact,
:root[data-theme="violet"] .client-panel-card,
:root[data-theme="violet"] .mini-stat,
:root[data-theme="violet"] .side-item,
:root[data-theme="violet"] .info-card,
:root[data-theme="violet"] .contact-row,
:root[data-theme="violet"] .compact-contact.contact-row,
:root[data-theme="violet"] .add-contact-box,
:root[data-theme="violet"] .internal-placeholder {
  background: #ffffff !important;
  color: var(--text-main) !important;
  border-color: rgba(148,163,184,.26) !important;
}

:root[data-theme="ocean"] .conversation-item:hover,
:root[data-theme="gold"] .conversation-item:hover,
:root[data-theme="violet"] .conversation-item:hover {
  background: #ffffff !important;
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--accent) 42%, transparent) !important;
}
:root[data-theme="ocean"] .conversation-item.active,
:root[data-theme="gold"] .conversation-item.active,
:root[data-theme="violet"] .conversation-item.active {
  background: #ffffff !important;
  box-shadow: inset 4px 0 0 var(--accent), 0 8px 22px rgba(15,23,42,.05) !important;
}
:root[data-theme="ocean"] .conversation-item.locked:hover,
:root[data-theme="gold"] .conversation-item.locked:hover,
:root[data-theme="violet"] .conversation-item.locked:hover {
  background: #ffffff !important;
}

:root[data-theme="ocean"] .smart-contact-bar,
:root[data-theme="gold"] .smart-contact-bar,
:root[data-theme="violet"] .smart-contact-bar {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 10%, #ffffff) 0%, #ffffff 58%, color-mix(in srgb, var(--accent) 6%, #ffffff) 100%) !important;
  border-bottom-color: color-mix(in srgb, var(--accent) 22%, rgba(148,163,184,.28)) !important;
}

:root[data-theme="ocean"] .smart-avatar,
:root[data-theme="ocean"] .client-avatar,
:root[data-theme="ocean"] .contact-avatar {
  background: linear-gradient(135deg, #084f7e, #0ea5e9) !important;
  box-shadow: 0 8px 20px rgba(14,165,233,.18) !important;
}
:root[data-theme="gold"] .smart-avatar,
:root[data-theme="gold"] .client-avatar,
:root[data-theme="gold"] .contact-avatar {
  background: linear-gradient(135deg, #111827, #9a6a16 62%, #d6b56d) !important;
  box-shadow: 0 8px 20px rgba(154,106,22,.18) !important;
}
:root[data-theme="violet"] .smart-avatar,
:root[data-theme="violet"] .client-avatar,
:root[data-theme="violet"] .contact-avatar {
  background: linear-gradient(135deg, #312e81, #6d5bd0 62%, #0ea5e9) !important;
  box-shadow: 0 8px 20px rgba(109,91,208,.18) !important;
}

:root[data-theme="ocean"] .smart-name-row strong,
:root[data-theme="ocean"] .client-main small,
:root[data-theme="ocean"] .side-tool-head strong,
:root[data-theme="ocean"] .conversation-name,
:root[data-theme="ocean"] .contact-info strong { color: #084f7e !important; }
:root[data-theme="gold"] .smart-name-row strong,
:root[data-theme="gold"] .client-main small,
:root[data-theme="gold"] .side-tool-head strong,
:root[data-theme="gold"] .conversation-name,
:root[data-theme="gold"] .contact-info strong { color: #74500f !important; }
:root[data-theme="violet"] .smart-name-row strong,
:root[data-theme="violet"] .client-main small,
:root[data-theme="violet"] .side-tool-head strong,
:root[data-theme="violet"] .conversation-name,
:root[data-theme="violet"] .contact-info strong { color: #4c3ea8 !important; }

:root[data-theme="ocean"] .main-rail,
:root[data-theme="gold"] .main-rail,
:root[data-theme="violet"] .main-rail {
  background: #ffffff !important;
}
:root[data-theme="ocean"] .rail-btn.active,
:root[data-theme="gold"] .rail-btn.active,
:root[data-theme="violet"] .rail-btn.active {
  background: var(--accent) !important;
  color: #ffffff !important;
}
:root[data-theme="ocean"] .rail-btn:not(.active):hover,
:root[data-theme="gold"] .rail-btn:not(.active):hover,
:root[data-theme="violet"] .rail-btn:not(.active):hover {
  color: var(--accent-dark) !important;
  background: rgba(15,23,42,.045) !important;
}

:root[data-theme="ocean"] .status-chip,
:root[data-theme="gold"] .status-chip,
:root[data-theme="violet"] .status-chip,
:root[data-theme="ocean"] .smart-chip,
:root[data-theme="gold"] .smart-chip,
:root[data-theme="violet"] .smart-chip {
  background: color-mix(in srgb, var(--accent) 10%, #ffffff) !important;
  color: var(--accent-dark) !important;
  border-color: color-mix(in srgb, var(--accent) 22%, #ffffff) !important;
}

:root[data-theme="ocean"] .composer,
:root[data-theme="gold"] .composer,
:root[data-theme="violet"] .composer {
  background: #ffffff !important;
  border-top-color: color-mix(in srgb, var(--accent) 14%, rgba(148,163,184,.25)) !important;
}

/* ===== V3.9.46 — temas sem pintura pesada em cards =====
   Mantém o tema Claro original intocado. Nos temas extras, remove preenchimentos
   coloridos de cards/listas/accordions e deixa a identidade visual concentrada na
   topbar, rail/menu, avatares, títulos, botões principais e fundo do chat. */
:root[data-theme="ocean"] .topbar {
  background: linear-gradient(135deg, #083a5d 0%, #0f6ea8 58%, #0ea5e9 100%) !important;
  border-bottom: 1px solid rgba(14,165,233,.28) !important;
}
:root[data-theme="gold"] .topbar {
  background: linear-gradient(135deg, #111827 0%, #5e3f0f 54%, #b8892d 100%) !important;
  border-bottom: 1px solid rgba(184,137,45,.30) !important;
}
:root[data-theme="violet"] .topbar {
  background: linear-gradient(135deg, #1e1b4b 0%, #4c3ea8 55%, #6d5bd0 100%) !important;
  border-bottom: 1px solid rgba(109,91,208,.30) !important;
}

:root[data-theme="ocean"] .topbar strong,
:root[data-theme="gold"] .topbar strong,
:root[data-theme="violet"] .topbar strong { color: #ffffff !important; }
:root[data-theme="ocean"] .topbar span,
:root[data-theme="gold"] .topbar span,
:root[data-theme="violet"] .topbar span { color: rgba(255,255,255,.82) !important; }

:root[data-theme="ocean"] .details-panel,
:root[data-theme="gold"] .details-panel,
:root[data-theme="violet"] .details-panel,
:root[data-theme="ocean"] .sidebar,
:root[data-theme="gold"] .sidebar,
:root[data-theme="violet"] .sidebar,
:root[data-theme="ocean"] .side-tool-panel,
:root[data-theme="gold"] .side-tool-panel,
:root[data-theme="violet"] .side-tool-panel,
:root[data-theme="ocean"] .filter-box,
:root[data-theme="gold"] .filter-box,
:root[data-theme="violet"] .filter-box {
  background: #ffffff !important;
}

:root[data-theme="ocean"] .conversation-item,
:root[data-theme="ocean"] .conversation-item.compact,
:root[data-theme="ocean"] .client-panel-card,
:root[data-theme="ocean"] .mini-stat,
:root[data-theme="ocean"] .side-item,
:root[data-theme="ocean"] .info-card,
:root[data-theme="ocean"] .contact-row,
:root[data-theme="ocean"] .compact-contact.contact-row,
:root[data-theme="ocean"] .add-contact-box,
:root[data-theme="ocean"] .internal-placeholder,
:root[data-theme="ocean"] .settings-row,
:root[data-theme="ocean"] .accordion-toggle,
:root[data-theme="gold"] .conversation-item,
:root[data-theme="gold"] .conversation-item.compact,
:root[data-theme="gold"] .client-panel-card,
:root[data-theme="gold"] .mini-stat,
:root[data-theme="gold"] .side-item,
:root[data-theme="gold"] .info-card,
:root[data-theme="gold"] .contact-row,
:root[data-theme="gold"] .compact-contact.contact-row,
:root[data-theme="gold"] .add-contact-box,
:root[data-theme="gold"] .internal-placeholder,
:root[data-theme="gold"] .settings-row,
:root[data-theme="gold"] .accordion-toggle,
:root[data-theme="violet"] .conversation-item,
:root[data-theme="violet"] .conversation-item.compact,
:root[data-theme="violet"] .client-panel-card,
:root[data-theme="violet"] .mini-stat,
:root[data-theme="violet"] .side-item,
:root[data-theme="violet"] .info-card,
:root[data-theme="violet"] .contact-row,
:root[data-theme="violet"] .compact-contact.contact-row,
:root[data-theme="violet"] .add-contact-box,
:root[data-theme="violet"] .internal-placeholder,
:root[data-theme="violet"] .settings-row,
:root[data-theme="violet"] .accordion-toggle {
  background: #ffffff !important;
  color: #0f172a !important;
  border-color: color-mix(in srgb, var(--accent) 10%, #e2e8f0) !important;
  box-shadow: none !important;
}

:root[data-theme="ocean"] .conversation-item:hover,
:root[data-theme="gold"] .conversation-item:hover,
:root[data-theme="violet"] .conversation-item:hover,
:root[data-theme="ocean"] .accordion-toggle:hover,
:root[data-theme="gold"] .accordion-toggle:hover,
:root[data-theme="violet"] .accordion-toggle:hover,
:root[data-theme="ocean"] .settings-row:hover,
:root[data-theme="gold"] .settings-row:hover,
:root[data-theme="violet"] .settings-row:hover {
  background: #ffffff !important;
  border-color: color-mix(in srgb, var(--accent) 18%, #e2e8f0) !important;
}

:root[data-theme="ocean"] .conversation-item.active,
:root[data-theme="gold"] .conversation-item.active,
:root[data-theme="violet"] .conversation-item.active {
  background: #ffffff !important;
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--accent) 54%, transparent) !important;
}

:root[data-theme="ocean"] .accordion-toggle.active,
:root[data-theme="gold"] .accordion-toggle.active,
:root[data-theme="violet"] .accordion-toggle.active {
  background: #ffffff !important;
  box-shadow: inset 2px 0 0 color-mix(in srgb, var(--accent) 46%, transparent) !important;
}

:root[data-theme="ocean"] .accordion-toggle .acc-title,
:root[data-theme="ocean"] .accordion-toggle strong,
:root[data-theme="ocean"] .settings-row strong,
:root[data-theme="gold"] .accordion-toggle .acc-title,
:root[data-theme="gold"] .accordion-toggle strong,
:root[data-theme="gold"] .settings-row strong,
:root[data-theme="violet"] .accordion-toggle .acc-title,
:root[data-theme="violet"] .accordion-toggle strong,
:root[data-theme="violet"] .settings-row strong {
  color: var(--accent-dark) !important;
}

:root[data-theme="ocean"] .accordion-toggle .acc-title svg,
:root[data-theme="gold"] .accordion-toggle .acc-title svg,
:root[data-theme="violet"] .accordion-toggle .acc-title svg {
  stroke: color-mix(in srgb, var(--accent-dark) 68%, #64748b) !important;
}

:root[data-theme="ocean"] .side-tool-head,
:root[data-theme="gold"] .side-tool-head,
:root[data-theme="violet"] .side-tool-head,
:root[data-theme="ocean"] .accordion-panel,
:root[data-theme="gold"] .accordion-panel,
:root[data-theme="violet"] .accordion-panel {
  background: #ffffff !important;
}

:root[data-theme="ocean"] .smart-contact-bar,
:root[data-theme="gold"] .smart-contact-bar,
:root[data-theme="violet"] .smart-contact-bar {
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--accent) 12%, #ffffff) 0%,
    #ffffff 48%,
    color-mix(in srgb, var(--accent) 8%, #ffffff) 100%) !important;
  border-bottom-color: color-mix(in srgb, var(--accent) 22%, #e2e8f0) !important;
}

/* ===== V3.9.47 — cards de atendimento totalmente neutros =====
   Mantém o tema claro original intocado. Corrige o ponto em que o botão interno
   do card (.conversation-main) herdava a cor global dos botões nos temas extras.
   A cor agora fica apenas em borda/indicador suave, não no preenchimento do card. */
:root[data-theme="ocean"] .conversation-item .conversation-main,
:root[data-theme="gold"] .conversation-item .conversation-main,
:root[data-theme="violet"] .conversation-item .conversation-main,
:root[data-theme="ocean"] .conversation-item .conversation-main:hover,
:root[data-theme="gold"] .conversation-item .conversation-main:hover,
:root[data-theme="violet"] .conversation-item .conversation-main:hover,
:root[data-theme="ocean"] .conversation-item.active .conversation-main,
:root[data-theme="gold"] .conversation-item.active .conversation-main,
:root[data-theme="violet"] .conversation-item.active .conversation-main,
:root[data-theme="ocean"] .conversation-item.is-opening .conversation-main,
:root[data-theme="gold"] .conversation-item.is-opening .conversation-main,
:root[data-theme="violet"] .conversation-item.is-opening .conversation-main {
  background: transparent !important;
  color: #0f172a !important;
  box-shadow: none !important;
}

:root[data-theme="ocean"] .conversation-item,
:root[data-theme="gold"] .conversation-item,
:root[data-theme="violet"] .conversation-item,
:root[data-theme="ocean"] .conversation-item.compact,
:root[data-theme="gold"] .conversation-item.compact,
:root[data-theme="violet"] .conversation-item.compact,
:root[data-theme="ocean"] .conversation-item.active,
:root[data-theme="gold"] .conversation-item.active,
:root[data-theme="violet"] .conversation-item.active,
:root[data-theme="ocean"] .conversation-item.is-opening,
:root[data-theme="gold"] .conversation-item.is-opening,
:root[data-theme="violet"] .conversation-item.is-opening {
  background: #ffffff !important;
  color: #0f172a !important;
  border-bottom-color: color-mix(in srgb, var(--accent) 8%, #e2e8f0) !important;
}

:root[data-theme="ocean"] .conversation-item.active,
:root[data-theme="gold"] .conversation-item.active,
:root[data-theme="violet"] .conversation-item.active,
:root[data-theme="ocean"] .conversation-item.is-opening,
:root[data-theme="gold"] .conversation-item.is-opening,
:root[data-theme="violet"] .conversation-item.is-opening {
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--accent) 45%, transparent) !important;
}

:root[data-theme="ocean"] .conversation-item:hover,
:root[data-theme="gold"] .conversation-item:hover,
:root[data-theme="violet"] .conversation-item:hover {
  background: #ffffff !important;
  box-shadow: inset 2px 0 0 color-mix(in srgb, var(--accent) 24%, transparent) !important;
}

/* ===== V3.9.48 — pacote ultra premium de temas =====
   Tema claro legado permanece intocado. Este bloco atua somente nos temas premium
   selecionados no menu Configurações. A cor fica concentrada em barra superior,
   menu/rail, avatares, fontes, botões principais e fundo do chat. Cards laterais
   e cards de atendimento permanecem neutros, com no máximo bordas/indicadores suaves. */
:root[data-theme="ocean"] {
  --accent: #0f6ea8;
  --accent-dark: #063f65;
  --accent-soft: #dff4ff;
  --theme-start: #063f65;
  --theme-mid: #0f6ea8;
  --theme-end: #1fb6ff;
  --theme-contrast: #ffffff;
  --app-bg: #eef7fc;
  --chat-bg: #eef8fc;
  --bubble-in: #ffffff;
  --bubble-out: #dff3ff;
  --bubble-pending: #e8f7ff;
  --premium-line: rgba(14,165,233,.18);
}
:root[data-theme="gold"] {
  --accent: #a06d18;
  --accent-dark: #4b3210;
  --accent-soft: #fff2cf;
  --theme-start: #111827;
  --theme-mid: #6f4812;
  --theme-end: #d8aa4b;
  --theme-contrast: #ffffff;
  --app-bg: #f7f2e8;
  --chat-bg: #f5efe3;
  --bubble-in: #ffffff;
  --bubble-out: #fff1c9;
  --bubble-pending: #fff8e6;
  --premium-line: rgba(184,137,45,.20);
}
:root[data-theme="violet"] {
  --accent: #6755d6;
  --accent-dark: #35258e;
  --accent-soft: #ede9ff;
  --theme-start: #1e1b4b;
  --theme-mid: #5948c7;
  --theme-end: #8b5cf6;
  --theme-contrast: #ffffff;
  --app-bg: #f4f2ff;
  --chat-bg: #f2f0ff;
  --bubble-in: #ffffff;
  --bubble-out: #ede9ff;
  --bubble-pending: #f0edff;
  --premium-line: rgba(103,85,214,.18);
}
:root[data-theme="emerald"] {
  --accent: #0f8f73;
  --accent-dark: #075f4c;
  --accent-soft: #dff8ef;
  --theme-start: #063b35;
  --theme-mid: #0f8f73;
  --theme-end: #2dd4bf;
  --theme-contrast: #ffffff;
  --app-bg: #eefaf6;
  --chat-bg: #eefaf6;
  --panel-bg: #ffffff;
  --panel-soft: #f6fffb;
  --text-main: #10231f;
  --text-soft: #5c746d;
  --border-soft: #d6eee6;
  --line: #d6eee6;
  --soft: #f6fffb;
  --panel: #ffffff;
  --text: #10231f;
  --bubble-in: #ffffff;
  --bubble-out: #dcfce7;
  --bubble-pending: #ecfdf5;
  --premium-line: rgba(15,143,115,.18);
}
:root[data-theme="graphite"] {
  --accent: #334155;
  --accent-dark: #0f172a;
  --accent-soft: #e6edf4;
  --theme-start: #020617;
  --theme-mid: #1f2937;
  --theme-end: #475569;
  --theme-contrast: #ffffff;
  --app-bg: #eef2f7;
  --chat-bg: #eff3f8;
  --panel-bg: #ffffff;
  --panel-soft: #f8fafc;
  --text-main: #0f172a;
  --text-soft: #64748b;
  --border-soft: #d9e2ec;
  --line: #d9e2ec;
  --soft: #f8fafc;
  --panel: #ffffff;
  --text: #0f172a;
  --bubble-in: #ffffff;
  --bubble-out: #e2e8f0;
  --bubble-pending: #f1f5f9;
  --premium-line: rgba(51,65,85,.18);
}
:root[data-theme="rose"] {
  --accent: #b84f74;
  --accent-dark: #82324f;
  --accent-soft: #fde7ef;
  --theme-start: #4a1d2f;
  --theme-mid: #b84f74;
  --theme-end: #f0a3bd;
  --theme-contrast: #ffffff;
  --app-bg: #fff3f7;
  --chat-bg: #fff5f8;
  --panel-bg: #ffffff;
  --panel-soft: #fff8fa;
  --text-main: #241018;
  --text-soft: #755965;
  --border-soft: #efd6df;
  --line: #efd6df;
  --soft: #fff8fa;
  --panel: #ffffff;
  --text: #241018;
  --bubble-in: #ffffff;
  --bubble-out: #fde7ef;
  --bubble-pending: #fff1f6;
  --premium-line: rgba(184,79,116,.18);
}
:root[data-theme="aurora"] {
  --accent: #0ea5e9;
  --accent-dark: #1e1b4b;
  --accent-soft: #e7f5ff;
  --theme-start: #020617;
  --theme-mid: #1e3a8a;
  --theme-end: #0ea5e9;
  --theme-contrast: #ffffff;
  --app-bg: #eef4fb;
  --chat-bg: #eef6fb;
  --panel-bg: #ffffff;
  --panel-soft: #f7fbff;
  --text-main: #0f172a;
  --text-soft: #5f6f84;
  --border-soft: #d8e6f3;
  --line: #d8e6f3;
  --soft: #f7fbff;
  --panel: #ffffff;
  --text: #0f172a;
  --bubble-in: #ffffff;
  --bubble-out: #dbeafe;
  --bubble-pending: #e0f2fe;
  --premium-line: rgba(14,165,233,.18);
}

:root[data-theme="ocean"] body,
:root[data-theme="gold"] body,
:root[data-theme="violet"] body,
:root[data-theme="emerald"] body,
:root[data-theme="graphite"] body,
:root[data-theme="rose"] body,
:root[data-theme="aurora"] body {
  background: var(--app-bg) !important;
}

:root[data-theme="ocean"] .login-shell,
:root[data-theme="gold"] .login-shell,
:root[data-theme="violet"] .login-shell,
:root[data-theme="emerald"] .login-shell,
:root[data-theme="graphite"] .login-shell,
:root[data-theme="rose"] .login-shell,
:root[data-theme="aurora"] .login-shell {
  background:
    radial-gradient(circle at 14% 8%, color-mix(in srgb, var(--theme-end) 72%, white), transparent 22%),
    radial-gradient(circle at 88% 18%, color-mix(in srgb, var(--theme-mid) 48%, transparent), transparent 28%),
    linear-gradient(135deg, var(--theme-start), var(--theme-mid) 54%, var(--theme-end)) !important;
}

:root[data-theme="ocean"] .topbar,
:root[data-theme="gold"] .topbar,
:root[data-theme="violet"] .topbar,
:root[data-theme="emerald"] .topbar,
:root[data-theme="graphite"] .topbar,
:root[data-theme="rose"] .topbar,
:root[data-theme="aurora"] .topbar {
  background:
    linear-gradient(135deg, var(--theme-start) 0%, var(--theme-mid) 58%, var(--theme-end) 100%) !important;
  border-bottom: 1px solid color-mix(in srgb, var(--theme-end) 32%, rgba(255,255,255,.10)) !important;
  box-shadow: 0 10px 28px rgba(15,23,42,.10) !important;
}
:root[data-theme="ocean"] .topbar strong,
:root[data-theme="gold"] .topbar strong,
:root[data-theme="violet"] .topbar strong,
:root[data-theme="emerald"] .topbar strong,
:root[data-theme="graphite"] .topbar strong,
:root[data-theme="rose"] .topbar strong,
:root[data-theme="aurora"] .topbar strong {
  color: var(--theme-contrast) !important;
}
:root[data-theme="ocean"] .topbar span,
:root[data-theme="gold"] .topbar span,
:root[data-theme="violet"] .topbar span,
:root[data-theme="emerald"] .topbar span,
:root[data-theme="graphite"] .topbar span,
:root[data-theme="rose"] .topbar span,
:root[data-theme="aurora"] .topbar span {
  color: rgba(255,255,255,.84) !important;
}

:root[data-theme="ocean"] .brand-mark,
:root[data-theme="gold"] .brand-mark,
:root[data-theme="violet"] .brand-mark,
:root[data-theme="emerald"] .brand-mark,
:root[data-theme="graphite"] .brand-mark,
:root[data-theme="rose"] .brand-mark,
:root[data-theme="aurora"] .brand-mark,
:root[data-theme="ocean"] .smart-avatar,
:root[data-theme="ocean"] .client-avatar,
:root[data-theme="ocean"] .contact-avatar,
:root[data-theme="gold"] .smart-avatar,
:root[data-theme="gold"] .client-avatar,
:root[data-theme="gold"] .contact-avatar,
:root[data-theme="violet"] .smart-avatar,
:root[data-theme="violet"] .client-avatar,
:root[data-theme="violet"] .contact-avatar,
:root[data-theme="emerald"] .smart-avatar,
:root[data-theme="emerald"] .client-avatar,
:root[data-theme="emerald"] .contact-avatar,
:root[data-theme="graphite"] .smart-avatar,
:root[data-theme="graphite"] .client-avatar,
:root[data-theme="graphite"] .contact-avatar,
:root[data-theme="rose"] .smart-avatar,
:root[data-theme="rose"] .client-avatar,
:root[data-theme="rose"] .contact-avatar,
:root[data-theme="aurora"] .smart-avatar,
:root[data-theme="aurora"] .client-avatar,
:root[data-theme="aurora"] .contact-avatar {
  background: linear-gradient(135deg, var(--theme-start), var(--theme-mid) 62%, var(--theme-end)) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 22px color-mix(in srgb, var(--accent) 18%, transparent) !important;
}

:root[data-theme="ocean"] .layout,
:root[data-theme="gold"] .layout,
:root[data-theme="violet"] .layout,
:root[data-theme="emerald"] .layout,
:root[data-theme="graphite"] .layout,
:root[data-theme="rose"] .layout,
:root[data-theme="aurora"] .layout {
  background: color-mix(in srgb, var(--accent) 8%, #eef2f7) !important;
}
:root[data-theme="ocean"] .sidebar,
:root[data-theme="ocean"] .chat-panel,
:root[data-theme="ocean"] .details-panel,
:root[data-theme="gold"] .sidebar,
:root[data-theme="gold"] .chat-panel,
:root[data-theme="gold"] .details-panel,
:root[data-theme="violet"] .sidebar,
:root[data-theme="violet"] .chat-panel,
:root[data-theme="violet"] .details-panel,
:root[data-theme="emerald"] .sidebar,
:root[data-theme="emerald"] .chat-panel,
:root[data-theme="emerald"] .details-panel,
:root[data-theme="graphite"] .sidebar,
:root[data-theme="graphite"] .chat-panel,
:root[data-theme="graphite"] .details-panel,
:root[data-theme="rose"] .sidebar,
:root[data-theme="rose"] .chat-panel,
:root[data-theme="rose"] .details-panel,
:root[data-theme="aurora"] .sidebar,
:root[data-theme="aurora"] .chat-panel,
:root[data-theme="aurora"] .details-panel {
  background: #ffffff !important;
}

:root[data-theme="ocean"] .main-rail,
:root[data-theme="gold"] .main-rail,
:root[data-theme="violet"] .main-rail,
:root[data-theme="emerald"] .main-rail,
:root[data-theme="graphite"] .main-rail,
:root[data-theme="rose"] .main-rail,
:root[data-theme="aurora"] .main-rail {
  background: #ffffff !important;
  border-right-color: color-mix(in srgb, var(--accent) 10%, #e2e8f0) !important;
}
:root[data-theme="ocean"] .rail-btn.active,
:root[data-theme="gold"] .rail-btn.active,
:root[data-theme="violet"] .rail-btn.active,
:root[data-theme="emerald"] .rail-btn.active,
:root[data-theme="graphite"] .rail-btn.active,
:root[data-theme="rose"] .rail-btn.active,
:root[data-theme="aurora"] .rail-btn.active {
  background: linear-gradient(135deg, var(--theme-mid), var(--theme-end)) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 22%, transparent) !important;
}
:root[data-theme="ocean"] .rail-btn:not(.active):hover,
:root[data-theme="gold"] .rail-btn:not(.active):hover,
:root[data-theme="violet"] .rail-btn:not(.active):hover,
:root[data-theme="emerald"] .rail-btn:not(.active):hover,
:root[data-theme="graphite"] .rail-btn:not(.active):hover,
:root[data-theme="rose"] .rail-btn:not(.active):hover,
:root[data-theme="aurora"] .rail-btn:not(.active):hover {
  background: color-mix(in srgb, var(--accent) 6%, #ffffff) !important;
  color: var(--accent-dark) !important;
}

:root[data-theme="ocean"] .messages,
:root[data-theme="gold"] .messages,
:root[data-theme="violet"] .messages,
:root[data-theme="emerald"] .messages,
:root[data-theme="graphite"] .messages,
:root[data-theme="rose"] .messages,
:root[data-theme="aurora"] .messages {
  background:
    radial-gradient(circle at 18% 10%, rgba(255,255,255,.78), transparent 25%),
    radial-gradient(circle at 86% 80%, color-mix(in srgb, var(--accent) 11%, transparent), transparent 30%),
    linear-gradient(180deg, color-mix(in srgb, var(--chat-bg) 92%, #ffffff), var(--chat-bg)) !important;
}
:root[data-theme="ocean"] .message.inbound,
:root[data-theme="gold"] .message.inbound,
:root[data-theme="violet"] .message.inbound,
:root[data-theme="emerald"] .message.inbound,
:root[data-theme="graphite"] .message.inbound,
:root[data-theme="rose"] .message.inbound,
:root[data-theme="aurora"] .message.inbound {
  background: var(--bubble-in) !important;
}
:root[data-theme="ocean"] .message.outbound,
:root[data-theme="gold"] .message.outbound,
:root[data-theme="violet"] .message.outbound,
:root[data-theme="emerald"] .message.outbound,
:root[data-theme="graphite"] .message.outbound,
:root[data-theme="rose"] .message.outbound,
:root[data-theme="aurora"] .message.outbound {
  background: var(--bubble-out) !important;
}

:root[data-theme="ocean"] .filter-box,
:root[data-theme="ocean"] .side-tool-panel,
:root[data-theme="ocean"] .conversation-item,
:root[data-theme="ocean"] .conversation-item.compact,
:root[data-theme="ocean"] .client-panel-card,
:root[data-theme="ocean"] .mini-stat,
:root[data-theme="ocean"] .side-item,
:root[data-theme="ocean"] .info-card,
:root[data-theme="ocean"] .contact-row,
:root[data-theme="ocean"] .compact-contact.contact-row,
:root[data-theme="ocean"] .add-contact-box,
:root[data-theme="ocean"] .internal-placeholder,
:root[data-theme="ocean"] .settings-row,
:root[data-theme="ocean"] .accordion-toggle,
:root[data-theme="gold"] .filter-box,
:root[data-theme="gold"] .side-tool-panel,
:root[data-theme="gold"] .conversation-item,
:root[data-theme="gold"] .conversation-item.compact,
:root[data-theme="gold"] .client-panel-card,
:root[data-theme="gold"] .mini-stat,
:root[data-theme="gold"] .side-item,
:root[data-theme="gold"] .info-card,
:root[data-theme="gold"] .contact-row,
:root[data-theme="gold"] .compact-contact.contact-row,
:root[data-theme="gold"] .add-contact-box,
:root[data-theme="gold"] .internal-placeholder,
:root[data-theme="gold"] .settings-row,
:root[data-theme="gold"] .accordion-toggle,
:root[data-theme="violet"] .filter-box,
:root[data-theme="violet"] .side-tool-panel,
:root[data-theme="violet"] .conversation-item,
:root[data-theme="violet"] .conversation-item.compact,
:root[data-theme="violet"] .client-panel-card,
:root[data-theme="violet"] .mini-stat,
:root[data-theme="violet"] .side-item,
:root[data-theme="violet"] .info-card,
:root[data-theme="violet"] .contact-row,
:root[data-theme="violet"] .compact-contact.contact-row,
:root[data-theme="violet"] .add-contact-box,
:root[data-theme="violet"] .internal-placeholder,
:root[data-theme="violet"] .settings-row,
:root[data-theme="violet"] .accordion-toggle,
:root[data-theme="emerald"] .filter-box,
:root[data-theme="emerald"] .side-tool-panel,
:root[data-theme="emerald"] .conversation-item,
:root[data-theme="emerald"] .conversation-item.compact,
:root[data-theme="emerald"] .client-panel-card,
:root[data-theme="emerald"] .mini-stat,
:root[data-theme="emerald"] .side-item,
:root[data-theme="emerald"] .info-card,
:root[data-theme="emerald"] .contact-row,
:root[data-theme="emerald"] .compact-contact.contact-row,
:root[data-theme="emerald"] .add-contact-box,
:root[data-theme="emerald"] .internal-placeholder,
:root[data-theme="emerald"] .settings-row,
:root[data-theme="emerald"] .accordion-toggle,
:root[data-theme="graphite"] .filter-box,
:root[data-theme="graphite"] .side-tool-panel,
:root[data-theme="graphite"] .conversation-item,
:root[data-theme="graphite"] .conversation-item.compact,
:root[data-theme="graphite"] .client-panel-card,
:root[data-theme="graphite"] .mini-stat,
:root[data-theme="graphite"] .side-item,
:root[data-theme="graphite"] .info-card,
:root[data-theme="graphite"] .contact-row,
:root[data-theme="graphite"] .compact-contact.contact-row,
:root[data-theme="graphite"] .add-contact-box,
:root[data-theme="graphite"] .internal-placeholder,
:root[data-theme="graphite"] .settings-row,
:root[data-theme="graphite"] .accordion-toggle,
:root[data-theme="rose"] .filter-box,
:root[data-theme="rose"] .side-tool-panel,
:root[data-theme="rose"] .conversation-item,
:root[data-theme="rose"] .conversation-item.compact,
:root[data-theme="rose"] .client-panel-card,
:root[data-theme="rose"] .mini-stat,
:root[data-theme="rose"] .side-item,
:root[data-theme="rose"] .info-card,
:root[data-theme="rose"] .contact-row,
:root[data-theme="rose"] .compact-contact.contact-row,
:root[data-theme="rose"] .add-contact-box,
:root[data-theme="rose"] .internal-placeholder,
:root[data-theme="rose"] .settings-row,
:root[data-theme="rose"] .accordion-toggle,
:root[data-theme="aurora"] .filter-box,
:root[data-theme="aurora"] .side-tool-panel,
:root[data-theme="aurora"] .conversation-item,
:root[data-theme="aurora"] .conversation-item.compact,
:root[data-theme="aurora"] .client-panel-card,
:root[data-theme="aurora"] .mini-stat,
:root[data-theme="aurora"] .side-item,
:root[data-theme="aurora"] .info-card,
:root[data-theme="aurora"] .contact-row,
:root[data-theme="aurora"] .compact-contact.contact-row,
:root[data-theme="aurora"] .add-contact-box,
:root[data-theme="aurora"] .internal-placeholder,
:root[data-theme="aurora"] .settings-row,
:root[data-theme="aurora"] .accordion-toggle {
  background: #ffffff !important;
  color: #0f172a !important;
  border-color: color-mix(in srgb, var(--accent) 9%, #e2e8f0) !important;
  box-shadow: none !important;
}

:root[data-theme="ocean"] .conversation-item .conversation-main,
:root[data-theme="gold"] .conversation-item .conversation-main,
:root[data-theme="violet"] .conversation-item .conversation-main,
:root[data-theme="emerald"] .conversation-item .conversation-main,
:root[data-theme="graphite"] .conversation-item .conversation-main,
:root[data-theme="rose"] .conversation-item .conversation-main,
:root[data-theme="aurora"] .conversation-item .conversation-main,
:root[data-theme="ocean"] .conversation-item .conversation-main:hover,
:root[data-theme="gold"] .conversation-item .conversation-main:hover,
:root[data-theme="violet"] .conversation-item .conversation-main:hover,
:root[data-theme="emerald"] .conversation-item .conversation-main:hover,
:root[data-theme="graphite"] .conversation-item .conversation-main:hover,
:root[data-theme="rose"] .conversation-item .conversation-main:hover,
:root[data-theme="aurora"] .conversation-item .conversation-main:hover,
:root[data-theme="ocean"] .conversation-item.active .conversation-main,
:root[data-theme="gold"] .conversation-item.active .conversation-main,
:root[data-theme="violet"] .conversation-item.active .conversation-main,
:root[data-theme="emerald"] .conversation-item.active .conversation-main,
:root[data-theme="graphite"] .conversation-item.active .conversation-main,
:root[data-theme="rose"] .conversation-item.active .conversation-main,
:root[data-theme="aurora"] .conversation-item.active .conversation-main,
:root[data-theme="ocean"] .conversation-item.is-opening .conversation-main,
:root[data-theme="gold"] .conversation-item.is-opening .conversation-main,
:root[data-theme="violet"] .conversation-item.is-opening .conversation-main,
:root[data-theme="emerald"] .conversation-item.is-opening .conversation-main,
:root[data-theme="graphite"] .conversation-item.is-opening .conversation-main,
:root[data-theme="rose"] .conversation-item.is-opening .conversation-main,
:root[data-theme="aurora"] .conversation-item.is-opening .conversation-main {
  background: transparent !important;
  color: #0f172a !important;
  box-shadow: none !important;
}
:root[data-theme="ocean"] .conversation-item:hover,
:root[data-theme="gold"] .conversation-item:hover,
:root[data-theme="violet"] .conversation-item:hover,
:root[data-theme="emerald"] .conversation-item:hover,
:root[data-theme="graphite"] .conversation-item:hover,
:root[data-theme="rose"] .conversation-item:hover,
:root[data-theme="aurora"] .conversation-item:hover {
  background: #ffffff !important;
  box-shadow: inset 2px 0 0 color-mix(in srgb, var(--accent) 22%, transparent) !important;
}
:root[data-theme="ocean"] .conversation-item.active,
:root[data-theme="gold"] .conversation-item.active,
:root[data-theme="violet"] .conversation-item.active,
:root[data-theme="emerald"] .conversation-item.active,
:root[data-theme="graphite"] .conversation-item.active,
:root[data-theme="rose"] .conversation-item.active,
:root[data-theme="aurora"] .conversation-item.active,
:root[data-theme="ocean"] .conversation-item.is-opening,
:root[data-theme="gold"] .conversation-item.is-opening,
:root[data-theme="violet"] .conversation-item.is-opening,
:root[data-theme="emerald"] .conversation-item.is-opening,
:root[data-theme="graphite"] .conversation-item.is-opening,
:root[data-theme="rose"] .conversation-item.is-opening,
:root[data-theme="aurora"] .conversation-item.is-opening {
  background: #ffffff !important;
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--accent) 44%, transparent) !important;
}

:root[data-theme="ocean"] .smart-contact-bar,
:root[data-theme="gold"] .smart-contact-bar,
:root[data-theme="violet"] .smart-contact-bar,
:root[data-theme="emerald"] .smart-contact-bar,
:root[data-theme="graphite"] .smart-contact-bar,
:root[data-theme="rose"] .smart-contact-bar,
:root[data-theme="aurora"] .smart-contact-bar {
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--accent) 11%, #ffffff) 0%,
    #ffffff 50%,
    color-mix(in srgb, var(--accent) 7%, #ffffff) 100%) !important;
  border-bottom-color: color-mix(in srgb, var(--accent) 20%, #e2e8f0) !important;
}
:root[data-theme="ocean"] .smart-name-row strong,
:root[data-theme="ocean"] .client-main small,
:root[data-theme="ocean"] .side-tool-head strong,
:root[data-theme="ocean"] .conversation-name,
:root[data-theme="ocean"] .contact-info strong,
:root[data-theme="ocean"] .settings-row strong,
:root[data-theme="ocean"] .accordion-toggle .acc-title,
:root[data-theme="gold"] .smart-name-row strong,
:root[data-theme="gold"] .client-main small,
:root[data-theme="gold"] .side-tool-head strong,
:root[data-theme="gold"] .conversation-name,
:root[data-theme="gold"] .contact-info strong,
:root[data-theme="gold"] .settings-row strong,
:root[data-theme="gold"] .accordion-toggle .acc-title,
:root[data-theme="violet"] .smart-name-row strong,
:root[data-theme="violet"] .client-main small,
:root[data-theme="violet"] .side-tool-head strong,
:root[data-theme="violet"] .conversation-name,
:root[data-theme="violet"] .contact-info strong,
:root[data-theme="violet"] .settings-row strong,
:root[data-theme="violet"] .accordion-toggle .acc-title,
:root[data-theme="emerald"] .smart-name-row strong,
:root[data-theme="emerald"] .client-main small,
:root[data-theme="emerald"] .side-tool-head strong,
:root[data-theme="emerald"] .conversation-name,
:root[data-theme="emerald"] .contact-info strong,
:root[data-theme="emerald"] .settings-row strong,
:root[data-theme="emerald"] .accordion-toggle .acc-title,
:root[data-theme="graphite"] .smart-name-row strong,
:root[data-theme="graphite"] .client-main small,
:root[data-theme="graphite"] .side-tool-head strong,
:root[data-theme="graphite"] .conversation-name,
:root[data-theme="graphite"] .contact-info strong,
:root[data-theme="graphite"] .settings-row strong,
:root[data-theme="graphite"] .accordion-toggle .acc-title,
:root[data-theme="rose"] .smart-name-row strong,
:root[data-theme="rose"] .client-main small,
:root[data-theme="rose"] .side-tool-head strong,
:root[data-theme="rose"] .conversation-name,
:root[data-theme="rose"] .contact-info strong,
:root[data-theme="rose"] .settings-row strong,
:root[data-theme="rose"] .accordion-toggle .acc-title,
:root[data-theme="aurora"] .smart-name-row strong,
:root[data-theme="aurora"] .client-main small,
:root[data-theme="aurora"] .side-tool-head strong,
:root[data-theme="aurora"] .conversation-name,
:root[data-theme="aurora"] .contact-info strong,
:root[data-theme="aurora"] .settings-row strong,
:root[data-theme="aurora"] .accordion-toggle .acc-title {
  color: var(--accent-dark) !important;
}

:root[data-theme="ocean"] button:not(.ghost):not(.rail-btn):not(.conversation-dots):not(.conversation-main):not(.accordion-toggle):not(.icon-btn):not(.message-action-btn):not(.media-lightbox-close):not(.contact-more-btn):not(.message-react-btn):not(.message-more-btn):not(.reaction-remove):not([data-menu-action]):not([data-message-action]):not([data-contact-action]):not([data-reaction-emoji]),
:root[data-theme="gold"] button:not(.ghost):not(.rail-btn):not(.conversation-dots):not(.conversation-main):not(.accordion-toggle):not(.icon-btn):not(.message-action-btn):not(.media-lightbox-close):not(.contact-more-btn):not(.message-react-btn):not(.message-more-btn):not(.reaction-remove):not([data-menu-action]):not([data-message-action]):not([data-contact-action]):not([data-reaction-emoji]),
:root[data-theme="violet"] button:not(.ghost):not(.rail-btn):not(.conversation-dots):not(.conversation-main):not(.accordion-toggle):not(.icon-btn):not(.message-action-btn):not(.media-lightbox-close):not(.contact-more-btn):not(.message-react-btn):not(.message-more-btn):not(.reaction-remove):not([data-menu-action]):not([data-message-action]):not([data-contact-action]):not([data-reaction-emoji]),
:root[data-theme="emerald"] button:not(.ghost):not(.rail-btn):not(.conversation-dots):not(.conversation-main):not(.accordion-toggle):not(.icon-btn):not(.message-action-btn):not(.media-lightbox-close):not(.contact-more-btn):not(.message-react-btn):not(.message-more-btn):not(.reaction-remove):not([data-menu-action]):not([data-message-action]):not([data-contact-action]):not([data-reaction-emoji]),
:root[data-theme="graphite"] button:not(.ghost):not(.rail-btn):not(.conversation-dots):not(.conversation-main):not(.accordion-toggle):not(.icon-btn):not(.message-action-btn):not(.media-lightbox-close):not(.contact-more-btn):not(.message-react-btn):not(.message-more-btn):not(.reaction-remove):not([data-menu-action]):not([data-message-action]):not([data-contact-action]):not([data-reaction-emoji]),
:root[data-theme="rose"] button:not(.ghost):not(.rail-btn):not(.conversation-dots):not(.conversation-main):not(.accordion-toggle):not(.icon-btn):not(.message-action-btn):not(.media-lightbox-close):not(.contact-more-btn):not(.message-react-btn):not(.message-more-btn):not(.reaction-remove):not([data-menu-action]):not([data-message-action]):not([data-contact-action]):not([data-reaction-emoji]),
:root[data-theme="aurora"] button:not(.ghost):not(.rail-btn):not(.conversation-dots):not(.conversation-main):not(.accordion-toggle):not(.icon-btn):not(.message-action-btn):not(.media-lightbox-close):not(.contact-more-btn):not(.message-react-btn):not(.message-more-btn):not(.reaction-remove):not([data-menu-action]):not([data-message-action]):not([data-contact-action]):not([data-reaction-emoji]) {
  background: linear-gradient(135deg, var(--theme-mid), var(--theme-end)) !important;
  color: #ffffff !important;
  border-color: transparent !important;
}

:root[data-theme="ocean"] .status-chip,
:root[data-theme="ocean"] .smart-chip,
:root[data-theme="gold"] .status-chip,
:root[data-theme="gold"] .smart-chip,
:root[data-theme="violet"] .status-chip,
:root[data-theme="violet"] .smart-chip,
:root[data-theme="emerald"] .status-chip,
:root[data-theme="emerald"] .smart-chip,
:root[data-theme="graphite"] .status-chip,
:root[data-theme="graphite"] .smart-chip,
:root[data-theme="rose"] .status-chip,
:root[data-theme="rose"] .smart-chip,
:root[data-theme="aurora"] .status-chip,
:root[data-theme="aurora"] .smart-chip,
:root[data-theme="ocean"] .unread,
:root[data-theme="gold"] .unread,
:root[data-theme="violet"] .unread,
:root[data-theme="emerald"] .unread,
:root[data-theme="graphite"] .unread,
:root[data-theme="rose"] .unread,
:root[data-theme="aurora"] .unread {
  background: color-mix(in srgb, var(--accent) 12%, #ffffff) !important;
  color: var(--accent-dark) !important;
  border-color: color-mix(in srgb, var(--accent) 22%, #ffffff) !important;
}

:root[data-theme="ocean"] input:focus,
:root[data-theme="ocean"] textarea:focus,
:root[data-theme="ocean"] select:focus,
:root[data-theme="gold"] input:focus,
:root[data-theme="gold"] textarea:focus,
:root[data-theme="gold"] select:focus,
:root[data-theme="violet"] input:focus,
:root[data-theme="violet"] textarea:focus,
:root[data-theme="violet"] select:focus,
:root[data-theme="emerald"] input:focus,
:root[data-theme="emerald"] textarea:focus,
:root[data-theme="emerald"] select:focus,
:root[data-theme="graphite"] input:focus,
:root[data-theme="graphite"] textarea:focus,
:root[data-theme="graphite"] select:focus,
:root[data-theme="rose"] input:focus,
:root[data-theme="rose"] textarea:focus,
:root[data-theme="rose"] select:focus,
:root[data-theme="aurora"] input:focus,
:root[data-theme="aurora"] textarea:focus,
:root[data-theme="aurora"] select:focus {
  border-color: color-mix(in srgb, var(--accent) 46%, white) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 13%, transparent) !important;
}

/* V3.9.49 — menus neutros premium nos temas coloridos
   Mantém o tema claro legado intocado. Impede que os botões genéricos dos temas pintem:
   - menu de atendimento;
   - menu de ações da mensagem;
   - menu de contatos salvos;
   - reticências dos contatos salvos. */
:root[data-theme="ocean"] .context-menu,
:root[data-theme="gold"] .context-menu,
:root[data-theme="violet"] .context-menu,
:root[data-theme="emerald"] .context-menu,
:root[data-theme="graphite"] .context-menu,
:root[data-theme="rose"] .context-menu,
:root[data-theme="aurora"] .context-menu,
:root[data-theme="ocean"] .premium-message-menu,
:root[data-theme="gold"] .premium-message-menu,
:root[data-theme="violet"] .premium-message-menu,
:root[data-theme="emerald"] .premium-message-menu,
:root[data-theme="graphite"] .premium-message-menu,
:root[data-theme="rose"] .premium-message-menu,
:root[data-theme="aurora"] .premium-message-menu,
:root[data-theme="ocean"] .premium-contact-menu,
:root[data-theme="gold"] .premium-contact-menu,
:root[data-theme="violet"] .premium-contact-menu,
:root[data-theme="emerald"] .premium-contact-menu,
:root[data-theme="graphite"] .premium-contact-menu,
:root[data-theme="rose"] .premium-contact-menu,
:root[data-theme="aurora"] .premium-contact-menu {
  background: rgba(255,255,255,.98) !important;
  color: #0f172a !important;
  border: 1px solid rgba(226,232,240,.92) !important;
  box-shadow: 0 18px 46px rgba(15,23,42,.16) !important;
  backdrop-filter: blur(10px);
}

:root[data-theme="ocean"] .context-menu button,
:root[data-theme="gold"] .context-menu button,
:root[data-theme="violet"] .context-menu button,
:root[data-theme="emerald"] .context-menu button,
:root[data-theme="graphite"] .context-menu button,
:root[data-theme="rose"] .context-menu button,
:root[data-theme="aurora"] .context-menu button,
:root[data-theme="ocean"] .premium-message-menu button,
:root[data-theme="gold"] .premium-message-menu button,
:root[data-theme="violet"] .premium-message-menu button,
:root[data-theme="emerald"] .premium-message-menu button,
:root[data-theme="graphite"] .premium-message-menu button,
:root[data-theme="rose"] .premium-message-menu button,
:root[data-theme="aurora"] .premium-message-menu button,
:root[data-theme="ocean"] .premium-contact-menu button,
:root[data-theme="gold"] .premium-contact-menu button,
:root[data-theme="violet"] .premium-contact-menu button,
:root[data-theme="emerald"] .premium-contact-menu button,
:root[data-theme="graphite"] .premium-contact-menu button,
:root[data-theme="rose"] .premium-contact-menu button,
:root[data-theme="aurora"] .premium-contact-menu button {
  background: transparent !important;
  background-image: none !important;
  color: #172033 !important;
  border: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

:root[data-theme="ocean"] .context-menu button:hover,
:root[data-theme="gold"] .context-menu button:hover,
:root[data-theme="violet"] .context-menu button:hover,
:root[data-theme="emerald"] .context-menu button:hover,
:root[data-theme="graphite"] .context-menu button:hover,
:root[data-theme="rose"] .context-menu button:hover,
:root[data-theme="aurora"] .context-menu button:hover,
:root[data-theme="ocean"] .premium-message-menu button:hover,
:root[data-theme="gold"] .premium-message-menu button:hover,
:root[data-theme="violet"] .premium-message-menu button:hover,
:root[data-theme="emerald"] .premium-message-menu button:hover,
:root[data-theme="graphite"] .premium-message-menu button:hover,
:root[data-theme="rose"] .premium-message-menu button:hover,
:root[data-theme="aurora"] .premium-message-menu button:hover,
:root[data-theme="ocean"] .premium-contact-menu button:hover,
:root[data-theme="gold"] .premium-contact-menu button:hover,
:root[data-theme="violet"] .premium-contact-menu button:hover,
:root[data-theme="emerald"] .premium-contact-menu button:hover,
:root[data-theme="graphite"] .premium-contact-menu button:hover,
:root[data-theme="rose"] .premium-contact-menu button:hover,
:root[data-theme="aurora"] .premium-contact-menu button:hover {
  background: color-mix(in srgb, var(--accent) 7%, #f8fafc) !important;
  color: var(--accent-dark) !important;
}

:root[data-theme="ocean"] .context-menu button.danger,
:root[data-theme="gold"] .context-menu button.danger,
:root[data-theme="violet"] .context-menu button.danger,
:root[data-theme="emerald"] .context-menu button.danger,
:root[data-theme="graphite"] .context-menu button.danger,
:root[data-theme="rose"] .context-menu button.danger,
:root[data-theme="aurora"] .context-menu button.danger,
:root[data-theme="ocean"] .premium-contact-menu button.danger,
:root[data-theme="gold"] .premium-contact-menu button.danger,
:root[data-theme="violet"] .premium-contact-menu button.danger,
:root[data-theme="emerald"] .premium-contact-menu button.danger,
:root[data-theme="graphite"] .premium-contact-menu button.danger,
:root[data-theme="rose"] .premium-contact-menu button.danger,
:root[data-theme="aurora"] .premium-contact-menu button.danger {
  color: #991b1b !important;
}

:root[data-theme="ocean"] .context-menu button.danger:hover,
:root[data-theme="gold"] .context-menu button.danger:hover,
:root[data-theme="violet"] .context-menu button.danger:hover,
:root[data-theme="emerald"] .context-menu button.danger:hover,
:root[data-theme="graphite"] .context-menu button.danger:hover,
:root[data-theme="rose"] .context-menu button.danger:hover,
:root[data-theme="aurora"] .context-menu button.danger:hover,
:root[data-theme="ocean"] .premium-contact-menu button.danger:hover,
:root[data-theme="gold"] .premium-contact-menu button.danger:hover,
:root[data-theme="violet"] .premium-contact-menu button.danger:hover,
:root[data-theme="emerald"] .premium-contact-menu button.danger:hover,
:root[data-theme="graphite"] .premium-contact-menu button.danger:hover,
:root[data-theme="rose"] .premium-contact-menu button.danger:hover,
:root[data-theme="aurora"] .premium-contact-menu button.danger:hover {
  background: #fff1f2 !important;
  color: #991b1b !important;
}

:root[data-theme="ocean"] .premium-message-menu svg,
:root[data-theme="gold"] .premium-message-menu svg,
:root[data-theme="violet"] .premium-message-menu svg,
:root[data-theme="emerald"] .premium-message-menu svg,
:root[data-theme="graphite"] .premium-message-menu svg,
:root[data-theme="rose"] .premium-message-menu svg,
:root[data-theme="aurora"] .premium-message-menu svg,
:root[data-theme="ocean"] .premium-contact-menu svg,
:root[data-theme="gold"] .premium-contact-menu svg,
:root[data-theme="violet"] .premium-contact-menu svg,
:root[data-theme="emerald"] .premium-contact-menu svg,
:root[data-theme="graphite"] .premium-contact-menu svg,
:root[data-theme="rose"] .premium-contact-menu svg,
:root[data-theme="aurora"] .premium-contact-menu svg {
  stroke: currentColor !important;
  opacity: .52 !important;
}

:root[data-theme="ocean"] .contact-more-btn,
:root[data-theme="gold"] .contact-more-btn,
:root[data-theme="violet"] .contact-more-btn,
:root[data-theme="emerald"] .contact-more-btn,
:root[data-theme="graphite"] .contact-more-btn,
:root[data-theme="rose"] .contact-more-btn,
:root[data-theme="aurora"] .contact-more-btn {
  border: 0 !important;
  background: transparent !important;
  background-image: none !important;
  color: #64748b !important;
  box-shadow: none !important;
}
:root[data-theme="ocean"] .contact-more-btn:hover,
:root[data-theme="gold"] .contact-more-btn:hover,
:root[data-theme="violet"] .contact-more-btn:hover,
:root[data-theme="emerald"] .contact-more-btn:hover,
:root[data-theme="graphite"] .contact-more-btn:hover,
:root[data-theme="rose"] .contact-more-btn:hover,
:root[data-theme="aurora"] .contact-more-btn:hover {
  background: color-mix(in srgb, var(--accent) 8%, #f8fafc) !important;
  color: var(--accent-dark) !important;
}

/* V3.9.50 — bordas/menus totalmente neutros nos temas premium
   Mantém o tema claro legado intocado. Nos temas extras, remove herança de cor
   de menus flutuantes, reações, ações de mensagem e reticências dos contatos. */
:root[data-theme="ocean"] .context-menu,
:root[data-theme="gold"] .context-menu,
:root[data-theme="violet"] .context-menu,
:root[data-theme="emerald"] .context-menu,
:root[data-theme="graphite"] .context-menu,
:root[data-theme="rose"] .context-menu,
:root[data-theme="aurora"] .context-menu,
:root[data-theme="ocean"] .premium-message-menu,
:root[data-theme="gold"] .premium-message-menu,
:root[data-theme="violet"] .premium-message-menu,
:root[data-theme="emerald"] .premium-message-menu,
:root[data-theme="graphite"] .premium-message-menu,
:root[data-theme="rose"] .premium-message-menu,
:root[data-theme="aurora"] .premium-message-menu,
:root[data-theme="ocean"] .premium-contact-menu,
:root[data-theme="gold"] .premium-contact-menu,
:root[data-theme="violet"] .premium-contact-menu,
:root[data-theme="emerald"] .premium-contact-menu,
:root[data-theme="graphite"] .premium-contact-menu,
:root[data-theme="rose"] .premium-contact-menu,
:root[data-theme="aurora"] .premium-contact-menu,
:root[data-theme="ocean"] .reaction-picker,
:root[data-theme="gold"] .reaction-picker,
:root[data-theme="violet"] .reaction-picker,
:root[data-theme="emerald"] .reaction-picker,
:root[data-theme="graphite"] .reaction-picker,
:root[data-theme="rose"] .reaction-picker,
:root[data-theme="aurora"] .reaction-picker,
:root[data-theme="ocean"] .message-actions,
:root[data-theme="gold"] .message-actions,
:root[data-theme="violet"] .message-actions,
:root[data-theme="emerald"] .message-actions,
:root[data-theme="graphite"] .message-actions,
:root[data-theme="rose"] .message-actions,
:root[data-theme="aurora"] .message-actions {
  background: rgba(255,255,255,.98) !important;
  border-color: #e5e7eb !important;
  box-shadow: 0 18px 44px rgba(15,23,42,.15) !important;
}

:root[data-theme="ocean"] .context-menu button,
:root[data-theme="gold"] .context-menu button,
:root[data-theme="violet"] .context-menu button,
:root[data-theme="emerald"] .context-menu button,
:root[data-theme="graphite"] .context-menu button,
:root[data-theme="rose"] .context-menu button,
:root[data-theme="aurora"] .context-menu button,
:root[data-theme="ocean"] .premium-message-menu button,
:root[data-theme="gold"] .premium-message-menu button,
:root[data-theme="violet"] .premium-message-menu button,
:root[data-theme="emerald"] .premium-message-menu button,
:root[data-theme="graphite"] .premium-message-menu button,
:root[data-theme="rose"] .premium-message-menu button,
:root[data-theme="aurora"] .premium-message-menu button,
:root[data-theme="ocean"] .premium-contact-menu button,
:root[data-theme="gold"] .premium-contact-menu button,
:root[data-theme="violet"] .premium-contact-menu button,
:root[data-theme="emerald"] .premium-contact-menu button,
:root[data-theme="graphite"] .premium-contact-menu button,
:root[data-theme="rose"] .premium-contact-menu button,
:root[data-theme="aurora"] .premium-contact-menu button,
:root[data-theme="ocean"] .reaction-picker button,
:root[data-theme="gold"] .reaction-picker button,
:root[data-theme="violet"] .reaction-picker button,
:root[data-theme="emerald"] .reaction-picker button,
:root[data-theme="graphite"] .reaction-picker button,
:root[data-theme="rose"] .reaction-picker button,
:root[data-theme="aurora"] .reaction-picker button,
:root[data-theme="ocean"] .message-actions button,
:root[data-theme="gold"] .message-actions button,
:root[data-theme="violet"] .message-actions button,
:root[data-theme="emerald"] .message-actions button,
:root[data-theme="graphite"] .message-actions button,
:root[data-theme="rose"] .message-actions button,
:root[data-theme="aurora"] .message-actions button,
:root[data-theme="ocean"] .message-more-btn,
:root[data-theme="gold"] .message-more-btn,
:root[data-theme="violet"] .message-more-btn,
:root[data-theme="emerald"] .message-more-btn,
:root[data-theme="graphite"] .message-more-btn,
:root[data-theme="rose"] .message-more-btn,
:root[data-theme="aurora"] .message-more-btn,
:root[data-theme="ocean"] .message-react-btn,
:root[data-theme="gold"] .message-react-btn,
:root[data-theme="violet"] .message-react-btn,
:root[data-theme="emerald"] .message-react-btn,
:root[data-theme="graphite"] .message-react-btn,
:root[data-theme="rose"] .message-react-btn,
:root[data-theme="aurora"] .message-react-btn {
  background: #ffffff !important;
  color: #0f172a !important;
  border-color: #e5e7eb !important;
  box-shadow: none !important;
}

:root[data-theme="ocean"] .context-menu button:hover,
:root[data-theme="gold"] .context-menu button:hover,
:root[data-theme="violet"] .context-menu button:hover,
:root[data-theme="emerald"] .context-menu button:hover,
:root[data-theme="graphite"] .context-menu button:hover,
:root[data-theme="rose"] .context-menu button:hover,
:root[data-theme="aurora"] .context-menu button:hover,
:root[data-theme="ocean"] .premium-message-menu button:hover,
:root[data-theme="gold"] .premium-message-menu button:hover,
:root[data-theme="violet"] .premium-message-menu button:hover,
:root[data-theme="emerald"] .premium-message-menu button:hover,
:root[data-theme="graphite"] .premium-message-menu button:hover,
:root[data-theme="rose"] .premium-message-menu button:hover,
:root[data-theme="aurora"] .premium-message-menu button:hover,
:root[data-theme="ocean"] .premium-contact-menu button:hover,
:root[data-theme="gold"] .premium-contact-menu button:hover,
:root[data-theme="violet"] .premium-contact-menu button:hover,
:root[data-theme="emerald"] .premium-contact-menu button:hover,
:root[data-theme="graphite"] .premium-contact-menu button:hover,
:root[data-theme="rose"] .premium-contact-menu button:hover,
:root[data-theme="aurora"] .premium-contact-menu button:hover,
:root[data-theme="ocean"] .reaction-picker button:hover,
:root[data-theme="gold"] .reaction-picker button:hover,
:root[data-theme="violet"] .reaction-picker button:hover,
:root[data-theme="emerald"] .reaction-picker button:hover,
:root[data-theme="graphite"] .reaction-picker button:hover,
:root[data-theme="rose"] .reaction-picker button:hover,
:root[data-theme="aurora"] .reaction-picker button:hover,
:root[data-theme="ocean"] .message-actions button:hover,
:root[data-theme="gold"] .message-actions button:hover,
:root[data-theme="violet"] .message-actions button:hover,
:root[data-theme="emerald"] .message-actions button:hover,
:root[data-theme="graphite"] .message-actions button:hover,
:root[data-theme="rose"] .message-actions button:hover,
:root[data-theme="aurora"] .message-actions button:hover {
  background: #f8fafc !important;
  color: #0f172a !important;
  border-color: #e5e7eb !important;
}

:root[data-theme="ocean"] .context-menu button.danger,
:root[data-theme="gold"] .context-menu button.danger,
:root[data-theme="violet"] .context-menu button.danger,
:root[data-theme="emerald"] .context-menu button.danger,
:root[data-theme="graphite"] .context-menu button.danger,
:root[data-theme="rose"] .context-menu button.danger,
:root[data-theme="aurora"] .context-menu button.danger,
:root[data-theme="ocean"] .premium-contact-menu button.danger,
:root[data-theme="gold"] .premium-contact-menu button.danger,
:root[data-theme="violet"] .premium-contact-menu button.danger,
:root[data-theme="emerald"] .premium-contact-menu button.danger,
:root[data-theme="graphite"] .premium-contact-menu button.danger,
:root[data-theme="rose"] .premium-contact-menu button.danger,
:root[data-theme="aurora"] .premium-contact-menu button.danger {
  color: #991b1b !important;
  background: #ffffff !important;
}
:root[data-theme="ocean"] .context-menu button.danger:hover,
:root[data-theme="gold"] .context-menu button.danger:hover,
:root[data-theme="violet"] .context-menu button.danger:hover,
:root[data-theme="emerald"] .context-menu button.danger:hover,
:root[data-theme="graphite"] .context-menu button.danger:hover,
:root[data-theme="rose"] .context-menu button.danger:hover,
:root[data-theme="aurora"] .context-menu button.danger:hover,
:root[data-theme="ocean"] .premium-contact-menu button.danger:hover,
:root[data-theme="gold"] .premium-contact-menu button.danger:hover,
:root[data-theme="violet"] .premium-contact-menu button.danger:hover,
:root[data-theme="emerald"] .premium-contact-menu button.danger:hover,
:root[data-theme="graphite"] .premium-contact-menu button.danger:hover,
:root[data-theme="rose"] .premium-contact-menu button.danger:hover,
:root[data-theme="aurora"] .premium-contact-menu button.danger:hover {
  background: #fff1f2 !important;
  border-color: #ffe4e6 !important;
}

:root[data-theme="ocean"] .contact-more-btn,
:root[data-theme="gold"] .contact-more-btn,
:root[data-theme="violet"] .contact-more-btn,
:root[data-theme="emerald"] .contact-more-btn,
:root[data-theme="graphite"] .contact-more-btn,
:root[data-theme="rose"] .contact-more-btn,
:root[data-theme="aurora"] .contact-more-btn {
  background: transparent !important;
  border: 0 !important;
  color: #64748b !important;
  box-shadow: none !important;
}
:root[data-theme="ocean"] .contact-more-btn:hover,
:root[data-theme="gold"] .contact-more-btn:hover,
:root[data-theme="violet"] .contact-more-btn:hover,
:root[data-theme="emerald"] .contact-more-btn:hover,
:root[data-theme="graphite"] .contact-more-btn:hover,
:root[data-theme="rose"] .contact-more-btn:hover,
:root[data-theme="aurora"] .contact-more-btn:hover {
  background: #f8fafc !important;
  color: #0f172a !important;
}

/* ===== V3.9.51 — neutralização final + cache-bust =====
   Tema claro legado permanece intocado. Este bloco usa seletor por exclusão para
   todos os temas premium, garantindo que menus flutuantes, reações, reticências
   e cards operacionais não herdem o gradiente global dos botões. */
:root:not([data-theme="light"]):not([data-theme=""]) .context-menu,
:root:not([data-theme="light"]):not([data-theme=""]) .premium-message-menu,
:root:not([data-theme="light"]):not([data-theme=""]) .premium-contact-menu,
:root:not([data-theme="light"]):not([data-theme=""]) .reaction-picker,
:root:not([data-theme="light"]):not([data-theme=""]) .message-actions,
:root:not([data-theme="light"]):not([data-theme=""]) .contact-action-menu,
:root:not([data-theme="light"]):not([data-theme=""]) #contextMenu,
:root:not([data-theme="light"]):not([data-theme=""]) #messageActionMenu,
:root:not([data-theme="light"]):not([data-theme=""]) #reactionPicker,
:root:not([data-theme="light"]):not([data-theme=""]) #contactActionMenu {
  background: rgba(255,255,255,.985) !important;
  background-image: none !important;
  color: #0f172a !important;
  border: 1px solid #e5e7eb !important;
  outline: 0 !important;
  box-shadow: 0 16px 42px rgba(15,23,42,.14) !important;
}

:root:not([data-theme="light"]):not([data-theme=""]) .context-menu button,
:root:not([data-theme="light"]):not([data-theme=""]) .premium-message-menu button,
:root:not([data-theme="light"]):not([data-theme=""]) .premium-contact-menu button,
:root:not([data-theme="light"]):not([data-theme=""]) .reaction-picker button,
:root:not([data-theme="light"]):not([data-theme=""]) .message-actions button,
:root:not([data-theme="light"]):not([data-theme=""]) .contact-action-menu button,
:root:not([data-theme="light"]):not([data-theme=""]) #contextMenu button,
:root:not([data-theme="light"]):not([data-theme=""]) #messageActionMenu button,
:root:not([data-theme="light"]):not([data-theme=""]) #reactionPicker button,
:root:not([data-theme="light"]):not([data-theme=""]) #contactActionMenu button,
:root:not([data-theme="light"]):not([data-theme=""]) .message-react-btn,
:root:not([data-theme="light"]):not([data-theme=""]) .message-more-btn,
:root:not([data-theme="light"]):not([data-theme=""]) .contact-more-btn,
:root:not([data-theme="light"]):not([data-theme=""]) .conversation-dots {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  color: #475569 !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

:root:not([data-theme="light"]):not([data-theme=""]) .context-menu button:hover,
:root:not([data-theme="light"]):not([data-theme=""]) .premium-message-menu button:hover,
:root:not([data-theme="light"]):not([data-theme=""]) .premium-contact-menu button:hover,
:root:not([data-theme="light"]):not([data-theme=""]) .reaction-picker button:hover,
:root:not([data-theme="light"]):not([data-theme=""]) .message-actions button:hover,
:root:not([data-theme="light"]):not([data-theme=""]) .contact-action-menu button:hover,
:root:not([data-theme="light"]):not([data-theme=""]) #contextMenu button:hover,
:root:not([data-theme="light"]):not([data-theme=""]) #messageActionMenu button:hover,
:root:not([data-theme="light"]):not([data-theme=""]) #reactionPicker button:hover,
:root:not([data-theme="light"]):not([data-theme=""]) #contactActionMenu button:hover,
:root:not([data-theme="light"]):not([data-theme=""]) .message-react-btn:hover,
:root:not([data-theme="light"]):not([data-theme=""]) .message-more-btn:hover,
:root:not([data-theme="light"]):not([data-theme=""]) .contact-more-btn:hover,
:root:not([data-theme="light"]):not([data-theme=""]) .conversation-dots:hover {
  background: #f8fafc !important;
  background-image: none !important;
  color: #0f172a !important;
  border: 0 !important;
  box-shadow: none !important;
}

:root:not([data-theme="light"]):not([data-theme=""]) .context-menu button.danger,
:root:not([data-theme="light"]):not([data-theme=""]) .premium-contact-menu button.danger,
:root:not([data-theme="light"]):not([data-theme=""]) #contextMenu button.danger,
:root:not([data-theme="light"]):not([data-theme=""]) #contactActionMenu button.danger {
  color: #991b1b !important;
}

/* Cards operacionais sempre neutros nos temas premium. */
:root:not([data-theme="light"]):not([data-theme=""]) .conversation-item,
:root:not([data-theme="light"]):not([data-theme=""]) .conversation-item.compact,
:root:not([data-theme="light"]):not([data-theme=""]) .conversation-item.active,
:root:not([data-theme="light"]):not([data-theme=""]) .conversation-item.is-opening,
:root:not([data-theme="light"]):not([data-theme=""]) .contact-row,
:root:not([data-theme="light"]):not([data-theme=""]) .compact-contact.contact-row,
:root:not([data-theme="light"]):not([data-theme=""]) .side-item,
:root:not([data-theme="light"]):not([data-theme=""]) .accordion-toggle,
:root:not([data-theme="light"]):not([data-theme=""]) .settings-row {
  background: #ffffff !important;
  background-image: none !important;
  color: #0f172a !important;
  border-color: #e5e7eb !important;
  box-shadow: none !important;
}

:root:not([data-theme="light"]):not([data-theme=""]) .conversation-item .conversation-main,
:root:not([data-theme="light"]):not([data-theme=""]) .conversation-item .conversation-main:hover,
:root:not([data-theme="light"]):not([data-theme=""]) .conversation-item.active .conversation-main,
:root:not([data-theme="light"]):not([data-theme=""]) .conversation-item.is-opening .conversation-main {
  background: transparent !important;
  background-image: none !important;
  color: #0f172a !important;
  border: 0 !important;
  box-shadow: none !important;
}

:root:not([data-theme="light"]):not([data-theme=""]) .conversation-item:hover,
:root:not([data-theme="light"]):not([data-theme=""]) .contact-row:hover,
:root:not([data-theme="light"]):not([data-theme=""]) .compact-contact.contact-row:hover {
  background: #ffffff !important;
  background-image: none !important;
  box-shadow: 0 8px 20px rgba(15,23,42,.045) !important;
}


/* ===== V3.9.52 — menus/reticências realmente neutros e compactos =====
   Tema claro legado permanece intocado. Este bloco vence o seletor global de botões
   dos temas premium e neutraliza menus flutuantes, reação e reticências de contatos. */
html:not([data-theme="light"]) body #contactsList button.contact-more-btn,
html[data-theme="ocean"] body #contactsList button.contact-more-btn,
html[data-theme="gold"] body #contactsList button.contact-more-btn,
html[data-theme="violet"] body #contactsList button.contact-more-btn,
html[data-theme="emerald"] body #contactsList button.contact-more-btn,
html[data-theme="graphite"] body #contactsList button.contact-more-btn,
html[data-theme="rose"] body #contactsList button.contact-more-btn,
html[data-theme="aurora"] body #contactsList button.contact-more-btn,
html:not([data-theme="light"]) body .contact-row button.contact-more-btn,
html:not([data-theme="light"]) body .compact-contact.contact-row button.contact-more-btn {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  padding: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  color: #475569 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
html:not([data-theme="light"]) body #contactsList button.contact-more-btn:hover,
html:not([data-theme="light"]) body .contact-row button.contact-more-btn:hover,
html:not([data-theme="light"]) body .compact-contact.contact-row button.contact-more-btn:hover {
  border: 0 !important;
  background: #f8fafc !important;
  background-image: none !important;
  color: #0f172a !important;
  box-shadow: none !important;
}

html:not([data-theme="light"]) body #contactActionMenu.contact-action-menu,
html:not([data-theme="light"]) body #contactActionMenu.premium-contact-menu {
  min-width: 166px !important;
  width: 166px !important;
  padding: 6px !important;
  border-radius: 14px !important;
  border: 1px solid #e5e7eb !important;
  outline: 0 !important;
  background: rgba(255,255,255,.99) !important;
  background-image: none !important;
  color: #0f172a !important;
  box-shadow: 0 14px 34px rgba(15,23,42,.14) !important;
}
html:not([data-theme="light"]) body #contactActionMenu.contact-action-menu button,
html:not([data-theme="light"]) body #contactActionMenu.premium-contact-menu button,
html:not([data-theme="light"]) body #contactActionMenu button[data-contact-action] {
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 8px !important;
  border: 0 !important;
  border-radius: 9px !important;
  outline: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  color: #334155 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
}
html:not([data-theme="light"]) body #contactActionMenu.contact-action-menu button:hover,
html:not([data-theme="light"]) body #contactActionMenu.premium-contact-menu button:hover,
html:not([data-theme="light"]) body #contactActionMenu button[data-contact-action]:hover {
  background: #f8fafc !important;
  background-image: none !important;
  color: #0f172a !important;
  border: 0 !important;
  box-shadow: none !important;
}
html:not([data-theme="light"]) body #contactActionMenu button.danger,
html:not([data-theme="light"]) body #contactActionMenu button[data-contact-action="remove"] {
  color: #991b1b !important;
}
html:not([data-theme="light"]) body #contactActionMenu button.danger:hover,
html:not([data-theme="light"]) body #contactActionMenu button[data-contact-action="remove"]:hover {
  background: #fff1f2 !important;
  color: #991b1b !important;
}
html:not([data-theme="light"]) body #contactActionMenu svg {
  width: 15px !important;
  height: 15px !important;
  stroke: #94a3b8 !important;
  opacity: .72 !important;
}

html:not([data-theme="light"]) body #reactionPicker.reaction-picker,
html:not([data-theme="light"]) body .reaction-picker {
  background: rgba(255,255,255,.99) !important;
  background-image: none !important;
  border: 1px solid #e5e7eb !important;
  outline: 0 !important;
  box-shadow: 0 14px 34px rgba(15,23,42,.14) !important;
}
html:not([data-theme="light"]) body #reactionPicker.reaction-picker button,
html:not([data-theme="light"]) body .reaction-picker button,
html:not([data-theme="light"]) body #reactionPicker button[data-reaction-emoji] {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  color: #334155 !important;
}
html:not([data-theme="light"]) body #reactionPicker.reaction-picker button:hover,
html:not([data-theme="light"]) body .reaction-picker button:hover,
html:not([data-theme="light"]) body #reactionPicker button[data-reaction-emoji]:hover {
  background: #f8fafc !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

html:not([data-theme="light"]) body #contextMenu.context-menu,
html:not([data-theme="light"]) body .context-menu {
  background: rgba(255,255,255,.99) !important;
  background-image: none !important;
  border: 1px solid #e5e7eb !important;
  outline: 0 !important;
  box-shadow: 0 14px 34px rgba(15,23,42,.14) !important;
}
html:not([data-theme="light"]) body #contextMenu.context-menu button,
html:not([data-theme="light"]) body .context-menu button,
html:not([data-theme="light"]) body #contextMenu button[data-menu-action] {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  color: #334155 !important;
}
html:not([data-theme="light"]) body #contextMenu.context-menu button:hover,
html:not([data-theme="light"]) body .context-menu button:hover,
html:not([data-theme="light"]) body #contextMenu button[data-menu-action]:hover {
  background: #f8fafc !important;
  background-image: none !important;
  color: #0f172a !important;
}
html:not([data-theme="light"]) body #contextMenu button.danger,
html:not([data-theme="light"]) body #contextMenu button[data-menu-action="resolved"] {
  color: #991b1b !important;
}

html:not([data-theme="light"]) body .premium-message-menu,
html:not([data-theme="light"]) body #messageActionMenu.premium-message-menu {
  background: rgba(255,255,255,.99) !important;
  background-image: none !important;
  border: 1px solid #e5e7eb !important;
  outline: 0 !important;
  box-shadow: 0 14px 34px rgba(15,23,42,.14) !important;
}
html:not([data-theme="light"]) body .premium-message-menu button,
html:not([data-theme="light"]) body #messageActionMenu.premium-message-menu button,
html:not([data-theme="light"]) body button[data-message-action] {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  color: #334155 !important;
}
html:not([data-theme="light"]) body .premium-message-menu button:hover,
html:not([data-theme="light"]) body #messageActionMenu.premium-message-menu button:hover,
html:not([data-theme="light"]) body button[data-message-action]:hover {
  background: #f8fafc !important;
  background-image: none !important;
  color: #0f172a !important;
}

/* Mantém cards operacionais sem preenchimento temático. */
html:not([data-theme="light"]) body .conversation-item,
html:not([data-theme="light"]) body .compact-contact.contact-row,
html:not([data-theme="light"]) body .contact-row {
  background: #ffffff !important;
  background-image: none !important;
  border-color: #e5e7eb !important;
  box-shadow: none !important;
}

/* ===== V3.9.55 — Respostas rápidas por / ===== */
.whatsapp-composer { position: relative !important; }
.slash-replies-menu {
  position: absolute;
  left: 58px;
  right: 92px;
  bottom: calc(100% - 6px);
  z-index: 80;
  max-height: 285px;
  overflow: auto;
  padding: 7px;
  border-radius: 16px;
  background: rgba(255,255,255,.98);
  border: 1px solid rgba(148,163,184,.28) !important;
  box-shadow: 0 18px 42px rgba(15,23,42,.16);
  backdrop-filter: blur(14px);
}
.slash-replies-menu[hidden] { display: none !important; }
.slash-reply-item {
  width: 100%;
  border: 0 !important;
  background: transparent !important;
  color: #0f172a !important;
  box-shadow: none !important;
  display: grid;
  grid-template-columns: minmax(145px, 190px) minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  text-align: left;
  padding: 8px 10px !important;
  border-radius: 12px !important;
  cursor: pointer;
}
.slash-reply-item:hover,
.slash-reply-item.selected {
  background: rgba(15,23,42,.055) !important;
}
.slash-reply-item span { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.slash-reply-item strong { font-size: 12px; color: var(--accent, #0f766e); letter-spacing: -.01em; }
.slash-reply-item small { font-size: 11.5px; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slash-reply-item em { font-style: normal; font-size: 12.5px; color: #334155; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slash-replies-empty { padding: 11px 12px; color: #64748b; font-size: 12.5px; }
:root[data-theme]:not([data-theme="light"]) .slash-replies-menu {
  background: rgba(255,255,255,.985) !important;
  border-color: rgba(148,163,184,.28) !important;
}
:root[data-theme]:not([data-theme="light"]) .slash-reply-item,
:root[data-theme]:not([data-theme="light"]) .slash-reply-item:hover,
:root[data-theme]:not([data-theme="light"]) .slash-reply-item.selected {
  border-color: transparent !important;
}
@media (max-width: 720px) {
  .slash-replies-menu { left: 10px; right: 10px; bottom: calc(100% - 4px); max-height: 245px; }
  .slash-reply-item { grid-template-columns: 1fr; gap: 3px; }
  .slash-reply-item em { font-size: 12px; }
}


/* V3.9.56 - Caixa de texto autoexpansível */
.wa-composer-row textarea#messageInput {
  min-height: 42px !important;
  max-height: 132px !important;
  overflow-y: hidden;
  resize: none !important;
  transition: height .10s ease;
}
.wa-composer-row textarea#messageInput::-webkit-scrollbar { width: 7px; }
.wa-composer-row textarea#messageInput::-webkit-scrollbar-thumb { background: rgba(148,163,184,.55); border-radius: 999px; }
@media (max-width: 760px) {
  .wa-composer-row textarea#messageInput { max-height: 124px !important; }
}


/* V3.9.60 — Auto CPF estável na lateral */
.sgp-assist-panel {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--border, #d8dee8);
  border-radius: 14px;
  background: rgba(255,255,255,.72);
  display: grid;
  gap: 10px;
}
.sgp-assist-title { display: grid; gap: 2px; }
.sgp-assist-title strong { font-size: 13px; color: var(--text, #172033); }
.sgp-assist-title small { color: var(--muted, #6b7280); line-height: 1.35; }
.sgp-auto-cpf-panel { background: rgba(37,99,235,.055); border-color: rgba(37,99,235,.16); }
.sgp-auto-note { padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,.75); color: var(--muted, #6b7280); font-size: 12px; line-height: 1.35; }
.sgp-contract.selected { border-color: rgba(37, 99, 235, .42); box-shadow: 0 10px 24px rgba(15,23,42,.08); }
.sgp-contract-actions { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 8px; }
.sgp-status-line { display: block; margin-top: 6px; color: var(--muted, #6b7280); }
.sgp-note { margin-top: 7px; padding: 8px 10px; border-radius: 10px; background: rgba(15,23,42,.05); color: var(--text, #172033); font-size: 12px; line-height: 1.35; }

/* ======================================================================
   V3.9.83 — Indicador visual por tema no card ativo + rail temático
   Alteração restrita a CSS. Não altera HTML, JS, endpoints ou payloads.
   ====================================================================== */
:root {
  --ms-theme-accent: #0f766e;
  --ms-theme-accent-strong: #0b5f59;
  --ms-theme-selected-bg: #eefcf8;
  --ms-theme-selected-border: #99f6e4;
  --ms-theme-rail-bg: linear-gradient(180deg, #0f766e 0%, #0b5f59 100%);
  --ms-theme-rail-soft: rgba(255,255,255,.13);
}
:root[data-theme="light"] {
  --ms-theme-accent: #0f766e;
  --ms-theme-accent-strong: #0b5f59;
  --ms-theme-selected-bg: #eefcf8;
  --ms-theme-selected-border: #99f6e4;
  --ms-theme-rail-bg: linear-gradient(180deg, #0f766e 0%, #0b5f59 100%);
}
:root[data-theme="ocean"] {
  --ms-theme-accent: #0ea5e9;
  --ms-theme-accent-strong: #0369a1;
  --ms-theme-selected-bg: #edf8ff;
  --ms-theme-selected-border: #bae6fd;
  --ms-theme-rail-bg: linear-gradient(180deg, #084f7e 0%, #0ea5e9 100%);
}
:root[data-theme="gold"] {
  --ms-theme-accent: #b8892d;
  --ms-theme-accent-strong: #7c5514;
  --ms-theme-selected-bg: #fff8e8;
  --ms-theme-selected-border: #f6d99a;
  --ms-theme-rail-bg: linear-gradient(180deg, #111827 0%, #7c5514 58%, #b8892d 100%);
}
:root[data-theme="violet"] {
  --ms-theme-accent: #6d5bd0;
  --ms-theme-accent-strong: #4c3ea8;
  --ms-theme-selected-bg: #f3f0ff;
  --ms-theme-selected-border: #d8b4fe;
  --ms-theme-rail-bg: linear-gradient(180deg, #312e81 0%, #6d5bd0 58%, #0ea5e9 100%);
}
:root[data-theme="emerald"] {
  --ms-theme-accent: #10b981;
  --ms-theme-accent-strong: #047857;
  --ms-theme-selected-bg: #ecfdf5;
  --ms-theme-selected-border: #a7f3d0;
  --ms-theme-rail-bg: linear-gradient(180deg, #064e3b 0%, #047857 58%, #10b981 100%);
}
:root[data-theme="graphite"] {
  --ms-theme-accent: #475569;
  --ms-theme-accent-strong: #1e293b;
  --ms-theme-selected-bg: #f3f6fa;
  --ms-theme-selected-border: #cbd5e1;
  --ms-theme-rail-bg: linear-gradient(180deg, #0f172a 0%, #1e293b 58%, #475569 100%);
}
:root[data-theme="rose"] {
  --ms-theme-accent: #e11d48;
  --ms-theme-accent-strong: #9f1239;
  --ms-theme-selected-bg: #fff1f4;
  --ms-theme-selected-border: #fecdd3;
  --ms-theme-rail-bg: linear-gradient(180deg, #881337 0%, #be123c 58%, #f43f5e 100%);
}
:root[data-theme="aurora"] {
  --ms-theme-accent: #7c3aed;
  --ms-theme-accent-strong: #5b21b6;
  --ms-theme-selected-bg: #f4f0ff;
  --ms-theme-selected-border: #c4b5fd;
  --ms-theme-rail-bg: linear-gradient(180deg, #111827 0%, #4c1d95 48%, #0ea5e9 100%);
}

/* Rail lateral na cor do tema */
.main-rail,
:root[data-theme="ocean"] .main-rail,
:root[data-theme="gold"] .main-rail,
:root[data-theme="violet"] .main-rail,
:root[data-theme="emerald"] .main-rail,
:root[data-theme="graphite"] .main-rail,
:root[data-theme="rose"] .main-rail,
:root[data-theme="aurora"] .main-rail {
  background: var(--ms-theme-rail-bg) !important;
  border-right-color: color-mix(in srgb, var(--ms-theme-accent-strong) 72%, #000 28%) !important;
}
.main-rail .rail-btn {
  color: rgba(255,255,255,.76) !important;
}
.main-rail .rail-btn:hover {
  background: rgba(255,255,255,.13) !important;
  color: #ffffff !important;
}
.main-rail .rail-btn.active {
  background: rgba(255,255,255,.96) !important;
  color: var(--ms-theme-accent-strong) !important;
  box-shadow: 0 10px 22px rgba(0,0,0,.18) !important;
}
.main-rail .rail-logout {
  color: rgba(255,255,255,.82) !important;
}

/* Card ativo: indicador vertical + fundo suave baseado no tema */
.conversation-item,
.conversation-item.compact {
  position: relative !important;
  overflow: hidden !important;
}
.conversation-item.active,
.conversation-item.compact.active,
:root[data-theme="ocean"] .conversation-item.active,
:root[data-theme="gold"] .conversation-item.active,
:root[data-theme="violet"] .conversation-item.active,
:root[data-theme="emerald"] .conversation-item.active,
:root[data-theme="graphite"] .conversation-item.active,
:root[data-theme="rose"] .conversation-item.active,
:root[data-theme="aurora"] .conversation-item.active {
  background: var(--ms-theme-selected-bg) !important;
  border-color: var(--ms-theme-selected-border) !important;
  box-shadow: inset 5px 0 0 var(--ms-theme-accent), 0 1px 4px rgba(15,23,42,.06) !important;
}
.conversation-item.active::before,
.conversation-item.compact.active::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 5px;
  height: 100%;
  background: var(--ms-theme-accent);
  border-radius: 0;
  pointer-events: none;
}
.conversation-item.active .conversation-name,
.conversation-item.compact.active .conversation-name {
  color: #0f172a !important;
  font-weight: 900 !important;
}
.conversation-item.active .business-chip,
.conversation-item.compact.active .business-chip {
  background: color-mix(in srgb, var(--ms-theme-accent) 18%, #ffffff 82%) !important;
  border-color: color-mix(in srgb, var(--ms-theme-accent) 34%, #ffffff 66%) !important;
  color: var(--ms-theme-accent-strong) !important;
}
.conversation-item.active .unread,
.conversation-item.compact.active .unread {
  background: var(--ms-theme-accent) !important;
  color: #ffffff !important;
}


/* ======================================================================
   V3.9.84 — Centralização dos mini cards + alinhamento visual do bloco SGP
   ====================================================================== */
.client-mini-grid {
  align-items: stretch !important;
  gap: 12px !important;
}
.client-mini-grid .mini-stat {
  min-height: 74px !important;
  padding: 14px 16px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  gap: 6px !important;
  border-radius: 18px !important;
}
.client-mini-grid .mini-stat small,
.client-mini-grid .mini-stat strong,
.client-mini-grid .mini-stat span,
.client-mini-grid .mini-stat div {
  text-align: center !important;
  margin: 0 !important;
  width: 100% !important;
}
.client-mini-grid .mini-stat small {
  margin-bottom: 0 !important;
  line-height: 1.1 !important;
}
.client-mini-grid .mini-stat strong {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  line-height: 1.15 !important;
}

.sgp-card-head {
  margin-bottom: 10px !important;
  align-items: center !important;
}
.sgp-box {
  display: grid !important;
  gap: 14px !important;
}
.sgp-empty,
.sgp-assist-panel,
.sgp-contract,
.sgp-auto-note {
  border-radius: 18px !important;
}
.sgp-empty,
.sgp-assist-panel {
  padding: 14px 16px !important;
}
.sgp-empty {
  display: grid !important;
  gap: 6px !important;
  align-items: start !important;
}
.sgp-assist-panel {
  gap: 12px !important;
}
.sgp-assist-title {
  gap: 6px !important;
}
.sgp-auto-note {
  min-height: 54px !important;
  display: flex !important;
  align-items: center !important;
}

@media (max-width: 760px) {
  .client-mini-grid .mini-stat {
    min-height: 68px !important;
  }
}


/* ======================================================================
   V3.9.86 — Realce real do card ativo por tema + fontes suavizadas
   Correção: o botão .conversation-main e regras antigas neutras cobriam o
   preenchimento do card. Este bloco é o último do CSS e tem especificidade
   maior para vencer todos os overrides anteriores.
   ====================================================================== */
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body,
button,
input,
textarea,
select {
  font-synthesis-weight: none;
}
.conversation-name,
.chat-header h2,
.smart-name-row strong,
.client-main strong,
.side-tool-head strong,
.accordion-toggle,
.login-card h1,
.topbar strong {
  font-weight: 760 !important;
  letter-spacing: -0.012em !important;
}
.status-chip,
.business-chip,
.window-mini,
.privacy-chip,
.sla-chip,
.unread,
.smart-chip,
.smart-pill,
.window-badge,
.mini-stat small,
.client-main small,
.settings-row strong {
  font-weight: 720 !important;
  letter-spacing: 0.01em !important;
}
.conversation-phone,
.conversation-status,
.conversation-assigned,
.smart-identity span,
.smart-identity small,
.client-main span,
.info-card p,
.settings-note,
.sgp-assist-title small,
.sgp-auto-note,
.sgp-empty small {
  font-weight: 450 !important;
  color: #667085 !important;
}
button,
.ghost,
.icon-btn,
.conversation-dots {
  font-weight: 680 !important;
}

:root {
  --ms-active-bg: #ecfdf5;
  --ms-active-bg-2: #f7fffc;
  --ms-active-border: #99f6e4;
  --ms-active-accent: #0f766e;
  --ms-active-strong: #0b5f59;
}
html[data-theme="light"] {
  --ms-active-bg: #ecfdf5;
  --ms-active-bg-2: #f8fffc;
  --ms-active-border: #99f6e4;
  --ms-active-accent: #0f766e;
  --ms-active-strong: #0b5f59;
}
html[data-theme="ocean"] {
  --ms-active-bg: #eaf7ff;
  --ms-active-bg-2: #f6fbff;
  --ms-active-border: #bae6fd;
  --ms-active-accent: #0ea5e9;
  --ms-active-strong: #0369a1;
}
html[data-theme="gold"] {
  --ms-active-bg: #fff6dc;
  --ms-active-bg-2: #fffdf4;
  --ms-active-border: #f7d58b;
  --ms-active-accent: #b8892d;
  --ms-active-strong: #7c5514;
}
html[data-theme="violet"] {
  --ms-active-bg: #f1ecff;
  --ms-active-bg-2: #fbf9ff;
  --ms-active-border: #d8b4fe;
  --ms-active-accent: #6d5bd0;
  --ms-active-strong: #4c3ea8;
}
html[data-theme="emerald"] {
  --ms-active-bg: #e8fff5;
  --ms-active-bg-2: #f7fffb;
  --ms-active-border: #a7f3d0;
  --ms-active-accent: #10b981;
  --ms-active-strong: #047857;
}
html[data-theme="graphite"] {
  --ms-active-bg: #eef2f7;
  --ms-active-bg-2: #f8fafc;
  --ms-active-border: #cbd5e1;
  --ms-active-accent: #475569;
  --ms-active-strong: #1e293b;
}
html[data-theme="rose"] {
  --ms-active-bg: #fff0f4;
  --ms-active-bg-2: #fffbfc;
  --ms-active-border: #fecdd3;
  --ms-active-accent: #e11d48;
  --ms-active-strong: #9f1239;
}
html[data-theme="aurora"] {
  --ms-active-bg: #f2edff;
  --ms-active-bg-2: #f8fbff;
  --ms-active-border: #c4b5fd;
  --ms-active-accent: #7c3aed;
  --ms-active-strong: #5b21b6;
}

/* Rail lateral definitivamente temático */
html body .main-rail,
html[data-theme="light"] body .main-rail,
html[data-theme="ocean"] body .main-rail,
html[data-theme="gold"] body .main-rail,
html[data-theme="violet"] body .main-rail,
html[data-theme="emerald"] body .main-rail,
html[data-theme="graphite"] body .main-rail,
html[data-theme="rose"] body .main-rail,
html[data-theme="aurora"] body .main-rail {
  background: linear-gradient(180deg, var(--ms-active-strong) 0%, var(--ms-active-accent) 100%) !important;
  border-right-color: color-mix(in srgb, var(--ms-active-strong) 76%, #000 24%) !important;
}
html body .main-rail .rail-btn { color: rgba(255,255,255,.78) !important; }
html body .main-rail .rail-btn:hover { background: rgba(255,255,255,.14) !important; color: #fff !important; }
html body .main-rail .rail-btn.active {
  background: rgba(255,255,255,.96) !important;
  color: var(--ms-active-strong) !important;
  box-shadow: 0 10px 22px rgba(0,0,0,.16) !important;
}

/* Card ativo: parent, botão interno e menu recebem o mesmo fundo suave. */
html body #conversationList .conversation-item.active,
html body #conversationList .conversation-item.compact.active,
html body #conversationList .conversation-item.is-opening,
html body #conversationList .conversation-item.compact.is-opening,
html[data-theme="light"] body #conversationList .conversation-item.active,
html[data-theme="ocean"] body #conversationList .conversation-item.active,
html[data-theme="gold"] body #conversationList .conversation-item.active,
html[data-theme="violet"] body #conversationList .conversation-item.active,
html[data-theme="emerald"] body #conversationList .conversation-item.active,
html[data-theme="graphite"] body #conversationList .conversation-item.active,
html[data-theme="rose"] body #conversationList .conversation-item.active,
html[data-theme="aurora"] body #conversationList .conversation-item.active {
  position: relative !important;
  overflow: hidden !important;
  background: linear-gradient(90deg, var(--ms-active-bg) 0%, var(--ms-active-bg-2) 100%) !important;
  background-color: var(--ms-active-bg) !important;
  background-image: linear-gradient(90deg, var(--ms-active-bg) 0%, var(--ms-active-bg-2) 100%) !important;
  border-color: var(--ms-active-border) !important;
  box-shadow: inset 5px 0 0 var(--ms-active-accent), 0 4px 14px rgba(15,23,42,.065) !important;
}
html body #conversationList .conversation-item.active .conversation-main,
html body #conversationList .conversation-item.compact.active .conversation-main,
html body #conversationList .conversation-item.is-opening .conversation-main,
html body #conversationList .conversation-item.compact.is-opening .conversation-main,
html[data-theme="light"] body #conversationList .conversation-item.active .conversation-main,
html[data-theme="ocean"] body #conversationList .conversation-item.active .conversation-main,
html[data-theme="gold"] body #conversationList .conversation-item.active .conversation-main,
html[data-theme="violet"] body #conversationList .conversation-item.active .conversation-main,
html[data-theme="emerald"] body #conversationList .conversation-item.active .conversation-main,
html[data-theme="graphite"] body #conversationList .conversation-item.active .conversation-main,
html[data-theme="rose"] body #conversationList .conversation-item.active .conversation-main,
html[data-theme="aurora"] body #conversationList .conversation-item.active .conversation-main {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  color: #111827 !important;
  border: 0 !important;
  box-shadow: none !important;
}
html body #conversationList .conversation-item.active .conversation-dots,
html body #conversationList .conversation-item.compact.active .conversation-dots,
html body #conversationList .conversation-item.is-opening .conversation-dots,
html body #conversationList .conversation-item.compact.is-opening .conversation-dots {
  background: color-mix(in srgb, var(--ms-active-accent) 9%, #ffffff) !important;
  background-color: color-mix(in srgb, var(--ms-active-accent) 9%, #ffffff) !important;
  color: var(--ms-active-strong) !important;
  box-shadow: none !important;
}
html body #conversationList .conversation-item.active::before,
html body #conversationList .conversation-item.compact.active::before,
html body #conversationList .conversation-item.is-opening::before,
html body #conversationList .conversation-item.compact.is-opening::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 5px !important;
  background: var(--ms-active-accent) !important;
  pointer-events: none !important;
  z-index: 2 !important;
}
html body #conversationList .conversation-item.active .conversation-name,
html body #conversationList .conversation-item.compact.active .conversation-name,
html body #conversationList .conversation-item.is-opening .conversation-name {
  color: #101828 !important;
  font-weight: 760 !important;
}
html body #conversationList .conversation-item.active .business-chip,
html body #conversationList .conversation-item.active .status-chip,
html body #conversationList .conversation-item.active .window-mini,
html body #conversationList .conversation-item.active .sla-chip {
  background: color-mix(in srgb, var(--ms-active-accent) 12%, #ffffff 88%) !important;
  border-color: color-mix(in srgb, var(--ms-active-accent) 28%, #ffffff 72%) !important;
  color: var(--ms-active-strong) !important;
}
html body #conversationList .conversation-item.active .unread {
  background: var(--ms-active-accent) !important;
  color: #fff !important;
}

/* Hover também fica suave, porém menos marcado que o ativo. */
html body #conversationList .conversation-item:not(.active):not(.is-opening):hover {
  background: color-mix(in srgb, var(--ms-active-accent) 5%, #ffffff 95%) !important;
  background-color: color-mix(in srgb, var(--ms-active-accent) 5%, #ffffff 95%) !important;
  border-color: color-mix(in srgb, var(--ms-active-accent) 18%, #e5e7eb 82%) !important;
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--ms-active-accent) 48%, transparent) !important;
}


/* ======================================================================
   V3.9.87 — Topbar e rail com cor predominante por tema
   Tema claro permanece claro; demais temas usam a cor principal do tema.
   ====================================================================== */
html[data-theme="light"] {
  --ms-topbar-bg: linear-gradient(135deg, #ffffff 0%, #f2f7f6 55%, #e7f4f1 100%);
  --ms-topbar-border: #d9e7e4;
  --ms-topbar-text: #0f172a;
  --ms-topbar-muted: #60736f;
  --ms-rail-bg-final: linear-gradient(180deg, #ffffff 0%, #eef7f5 100%);
  --ms-rail-border-final: #d9e7e4;
  --ms-rail-icon-final: #64748b;
  --ms-rail-hover-final: #e4f4f0;
  --ms-rail-active-bg-final: #dff7ef;
  --ms-rail-active-text-final: #0f766e;
}
html[data-theme="ocean"] {
  --ms-topbar-bg: linear-gradient(135deg, #084f7e 0%, #0f6ea8 56%, #0ea5e9 100%);
  --ms-topbar-border: #075985;
  --ms-topbar-text: #ffffff;
  --ms-topbar-muted: rgba(255,255,255,.82);
  --ms-rail-bg-final: linear-gradient(180deg, #063b63 0%, #0f6ea8 58%, #0ea5e9 100%);
  --ms-rail-border-final: #075985;
  --ms-rail-icon-final: rgba(255,255,255,.76);
  --ms-rail-hover-final: rgba(255,255,255,.14);
  --ms-rail-active-bg-final: rgba(255,255,255,.94);
  --ms-rail-active-text-final: #075985;
}
html[data-theme="gold"] {
  --ms-topbar-bg: linear-gradient(135deg, #111827 0%, #7c5514 58%, #b8892d 100%);
  --ms-topbar-border: #7c5514;
  --ms-topbar-text: #ffffff;
  --ms-topbar-muted: rgba(255,255,255,.78);
  --ms-rail-bg-final: linear-gradient(180deg, #111827 0%, #7c5514 60%, #b8892d 100%);
  --ms-rail-border-final: #7c5514;
  --ms-rail-icon-final: rgba(255,255,255,.74);
  --ms-rail-hover-final: rgba(255,255,255,.13);
  --ms-rail-active-bg-final: #fff3cf;
  --ms-rail-active-text-final: #7c5514;
}
html[data-theme="violet"] {
  --ms-topbar-bg: linear-gradient(135deg, #312e81 0%, #6d5bd0 58%, #0ea5e9 100%);
  --ms-topbar-border: #4c3ea8;
  --ms-topbar-text: #ffffff;
  --ms-topbar-muted: rgba(255,255,255,.82);
  --ms-rail-bg-final: linear-gradient(180deg, #312e81 0%, #6d5bd0 72%, #0ea5e9 100%);
  --ms-rail-border-final: #4c3ea8;
  --ms-rail-icon-final: rgba(255,255,255,.76);
  --ms-rail-hover-final: rgba(255,255,255,.14);
  --ms-rail-active-bg-final: #f1ecff;
  --ms-rail-active-text-final: #4c3ea8;
}
html[data-theme="emerald"] {
  --ms-topbar-bg: linear-gradient(135deg, #064e3b 0%, #047857 58%, #10b981 100%);
  --ms-topbar-border: #047857;
  --ms-topbar-text: #ffffff;
  --ms-topbar-muted: rgba(255,255,255,.82);
  --ms-rail-bg-final: linear-gradient(180deg, #064e3b 0%, #047857 62%, #10b981 100%);
  --ms-rail-border-final: #047857;
  --ms-rail-icon-final: rgba(255,255,255,.76);
  --ms-rail-hover-final: rgba(255,255,255,.14);
  --ms-rail-active-bg-final: #dffcf0;
  --ms-rail-active-text-final: #047857;
}
html[data-theme="graphite"] {
  --ms-topbar-bg: linear-gradient(135deg, #0f172a 0%, #1e293b 62%, #475569 100%);
  --ms-topbar-border: #1e293b;
  --ms-topbar-text: #ffffff;
  --ms-topbar-muted: rgba(255,255,255,.78);
  --ms-rail-bg-final: linear-gradient(180deg, #0f172a 0%, #1e293b 70%, #334155 100%);
  --ms-rail-border-final: #1e293b;
  --ms-rail-icon-final: rgba(255,255,255,.72);
  --ms-rail-hover-final: rgba(255,255,255,.12);
  --ms-rail-active-bg-final: #e8eef6;
  --ms-rail-active-text-final: #1e293b;
}
html[data-theme="rose"] {
  --ms-topbar-bg: linear-gradient(135deg, #881337 0%, #be123c 58%, #f43f5e 100%);
  --ms-topbar-border: #9f1239;
  --ms-topbar-text: #ffffff;
  --ms-topbar-muted: rgba(255,255,255,.82);
  --ms-rail-bg-final: linear-gradient(180deg, #881337 0%, #be123c 62%, #f43f5e 100%);
  --ms-rail-border-final: #9f1239;
  --ms-rail-icon-final: rgba(255,255,255,.76);
  --ms-rail-hover-final: rgba(255,255,255,.14);
  --ms-rail-active-bg-final: #fff0f4;
  --ms-rail-active-text-final: #9f1239;
}
html[data-theme="aurora"] {
  --ms-topbar-bg: linear-gradient(135deg, #1e1b4b 0%, #5b21b6 54%, #0ea5e9 100%);
  --ms-topbar-border: #5b21b6;
  --ms-topbar-text: #ffffff;
  --ms-topbar-muted: rgba(255,255,255,.82);
  --ms-rail-bg-final: linear-gradient(180deg, #1e1b4b 0%, #5b21b6 64%, #0ea5e9 100%);
  --ms-rail-border-final: #5b21b6;
  --ms-rail-icon-final: rgba(255,255,255,.76);
  --ms-rail-hover-final: rgba(255,255,255,.14);
  --ms-rail-active-bg-final: #f2edff;
  --ms-rail-active-text-final: #5b21b6;
}

html body .topbar,
html[data-theme="light"] body .topbar,
html[data-theme="ocean"] body .topbar,
html[data-theme="gold"] body .topbar,
html[data-theme="violet"] body .topbar,
html[data-theme="emerald"] body .topbar,
html[data-theme="graphite"] body .topbar,
html[data-theme="rose"] body .topbar,
html[data-theme="aurora"] body .topbar {
  background: var(--ms-topbar-bg) !important;
  background-image: var(--ms-topbar-bg) !important;
  border-bottom: 1px solid var(--ms-topbar-border) !important;
  color: var(--ms-topbar-text) !important;
  box-shadow: 0 1px 0 rgba(15,23,42,.04), 0 10px 28px rgba(15,23,42,.08) !important;
}
html body .topbar strong,
html[data-theme="light"] body .topbar strong,
html[data-theme="ocean"] body .topbar strong,
html[data-theme="gold"] body .topbar strong,
html[data-theme="violet"] body .topbar strong,
html[data-theme="emerald"] body .topbar strong,
html[data-theme="graphite"] body .topbar strong,
html[data-theme="rose"] body .topbar strong,
html[data-theme="aurora"] body .topbar strong,
html body .topbar #agentName {
  color: var(--ms-topbar-text) !important;
}
html body .topbar span,
html body .topbar #connectionStatus {
  color: var(--ms-topbar-muted) !important;
}
html body .topbar .presence-select,
html body .topbar .ghost,
html body .topbar .sound-toggle {
  background: rgba(255,255,255,.16) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  color: var(--ms-topbar-text) !important;
}
html[data-theme="light"] body .topbar .presence-select,
html[data-theme="light"] body .topbar .ghost,
html[data-theme="light"] body .topbar .sound-toggle {
  background: rgba(255,255,255,.78) !important;
  border: 1px solid #d9e7e4 !important;
  color: #0f172a !important;
}
html[data-theme="light"] body .topbar {
  box-shadow: 0 1px 0 #e6efed, 0 10px 28px rgba(15,23,42,.045) !important;
}

html body .main-rail,
html[data-theme="light"] body .main-rail,
html[data-theme="ocean"] body .main-rail,
html[data-theme="gold"] body .main-rail,
html[data-theme="violet"] body .main-rail,
html[data-theme="emerald"] body .main-rail,
html[data-theme="graphite"] body .main-rail,
html[data-theme="rose"] body .main-rail,
html[data-theme="aurora"] body .main-rail {
  background: var(--ms-rail-bg-final) !important;
  background-image: var(--ms-rail-bg-final) !important;
  border-right-color: var(--ms-rail-border-final) !important;
  box-shadow: 1px 0 0 rgba(15,23,42,.03) !important;
}
html body .main-rail .rail-btn {
  color: var(--ms-rail-icon-final) !important;
}
html body .main-rail .rail-btn:hover {
  background: var(--ms-rail-hover-final) !important;
  color: var(--ms-rail-active-text-final) !important;
}
html[data-theme="ocean"] body .main-rail .rail-btn:hover,
html[data-theme="gold"] body .main-rail .rail-btn:hover,
html[data-theme="violet"] body .main-rail .rail-btn:hover,
html[data-theme="emerald"] body .main-rail .rail-btn:hover,
html[data-theme="graphite"] body .main-rail .rail-btn:hover,
html[data-theme="rose"] body .main-rail .rail-btn:hover,
html[data-theme="aurora"] body .main-rail .rail-btn:hover {
  color: #ffffff !important;
}
html body .main-rail .rail-btn.active {
  background: var(--ms-rail-active-bg-final) !important;
  background-image: none !important;
  color: var(--ms-rail-active-text-final) !important;
  border-color: color-mix(in srgb, var(--ms-rail-active-text-final) 18%, transparent) !important;
  box-shadow: 0 8px 22px rgba(15,23,42,.13) !important;
}
html body .main-rail .rail-logout {
  color: var(--ms-rail-icon-final) !important;
}
html[data-theme="light"] body .main-rail .rail-logout {
  color: #be123c !important;
}


/* ======================================================================
   V3.9.88 — Sem card Auto CPF + Temas suavizados
   Alteração visual. A função Auto CPF permanece ativa no JS/plugin.
   ====================================================================== */

/* Remove somente o card visual de CPF/CNPJ automático, sem remover a função. */
.sgp-assist-panel.sgp-auto-cpf-panel {
  display: none !important;
}

/* Suavização global das fontes dos temas. */
body,
button,
input,
select,
textarea,
.conversation-item,
.message,
.details-panel,
.sidebar,
.topbar {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
.conversation-name,
.client-main strong,
.smart-name-row strong,
.side-tool-head strong,
.chat-header h2 {
  font-weight: 750 !important;
}
.conversation-phone,
.conversation-status,
.conversation-assigned,
.client-main span,
.smart-identity span,
.smart-identity small,
.info-card p,
.sgp-box,
.settings-note {
  font-weight: 450 !important;
}

/* Paletas suavizadas para topbar/rail e elementos ativos. */
:root[data-theme="light"] {
  --ms-theme-accent: #3b6f82;
  --ms-theme-accent-strong: #28586a;
  --ms-theme-selected-bg: #eef7fa;
  --ms-theme-selected-border: #b9dbe5;
  --ms-theme-rail-bg: linear-gradient(180deg, #e5edf3 0%, #d7e4ec 100%);
  --ms-theme-topbar-bg: linear-gradient(135deg, #fbfdff 0%, #edf4f8 100%);
  --ms-theme-topbar-text: #19313d;
  --ms-theme-rail-text: #335766;
}
:root[data-theme="ocean"] {
  --ms-theme-accent: #2f8fbd;
  --ms-theme-accent-strong: #1f6f96;
  --ms-theme-selected-bg: #edf8fd;
  --ms-theme-selected-border: #b9def0;
  --ms-theme-rail-bg: linear-gradient(180deg, #e4f3fa 0%, #cfeaf6 100%);
  --ms-theme-topbar-bg: linear-gradient(135deg, #f2faff 0%, #d9eef8 100%);
  --ms-theme-topbar-text: #14445b;
  --ms-theme-rail-text: #1f5f7d;
}
:root[data-theme="gold"] {
  --ms-theme-accent: #b8872f;
  --ms-theme-accent-strong: #8b6420;
  --ms-theme-selected-bg: #fff7e6;
  --ms-theme-selected-border: #ead19a;
  --ms-theme-rail-bg: linear-gradient(180deg, #fbf0d6 0%, #eed7a7 100%);
  --ms-theme-topbar-bg: linear-gradient(135deg, #fffaf0 0%, #f0dfb7 100%);
  --ms-theme-topbar-text: #543f16;
  --ms-theme-rail-text: #654b19;
}
:root[data-theme="violet"] {
  --ms-theme-accent: #7b6fd6;
  --ms-theme-accent-strong: #5f55b8;
  --ms-theme-selected-bg: #f4f1ff;
  --ms-theme-selected-border: #d2cafd;
  --ms-theme-rail-bg: linear-gradient(180deg, #f0ecff 0%, #ddd6fb 100%);
  --ms-theme-topbar-bg: linear-gradient(135deg, #faf8ff 0%, #e5defc 100%);
  --ms-theme-topbar-text: #403987;
  --ms-theme-rail-text: #5046a2;
}
:root[data-theme="emerald"] {
  --ms-theme-accent: #2f9a6b;
  --ms-theme-accent-strong: #21744f;
  --ms-theme-selected-bg: #effaf4;
  --ms-theme-selected-border: #b9e6cd;
  --ms-theme-rail-bg: linear-gradient(180deg, #e7f7ee 0%, #cdebdc 100%);
  --ms-theme-topbar-bg: linear-gradient(135deg, #f4fbf7 0%, #d9f0e3 100%);
  --ms-theme-topbar-text: #1d5138;
  --ms-theme-rail-text: #266446;
}
:root[data-theme="graphite"] {
  --ms-theme-accent: #64748b;
  --ms-theme-accent-strong: #475569;
  --ms-theme-selected-bg: #f3f6f9;
  --ms-theme-selected-border: #cbd5e1;
  --ms-theme-rail-bg: linear-gradient(180deg, #e8edf3 0%, #d7dfe9 100%);
  --ms-theme-topbar-bg: linear-gradient(135deg, #f8fafc 0%, #e4eaf2 100%);
  --ms-theme-topbar-text: #263445;
  --ms-theme-rail-text: #3d4c60;
}
:root[data-theme="rose"] {
  --ms-theme-accent: #c46a8b;
  --ms-theme-accent-strong: #994767;
  --ms-theme-selected-bg: #fff2f6;
  --ms-theme-selected-border: #f3c3d2;
  --ms-theme-rail-bg: linear-gradient(180deg, #fff0f5 0%, #f6d6e2 100%);
  --ms-theme-topbar-bg: linear-gradient(135deg, #fff8fb 0%, #f8dfe8 100%);
  --ms-theme-topbar-text: #6c2d45;
  --ms-theme-rail-text: #7c3b55;
}
:root[data-theme="aurora"] {
  --ms-theme-accent: #6685d9;
  --ms-theme-accent-strong: #4f68b4;
  --ms-theme-selected-bg: #f1f5ff;
  --ms-theme-selected-border: #c7d4fb;
  --ms-theme-rail-bg: linear-gradient(180deg, #eef2ff 0%, #d8e0fb 55%, #dff4f2 100%);
  --ms-theme-topbar-bg: linear-gradient(135deg, #f8faff 0%, #e3e9fd 55%, #e2f4f1 100%);
  --ms-theme-topbar-text: #344171;
  --ms-theme-rail-text: #465899;
}

/* Topbar e rail mais suaves por tema, usando variáveis acima. */
:root[data-theme] .topbar {
  background: var(--ms-theme-topbar-bg) !important;
  color: var(--ms-theme-topbar-text) !important;
  border-bottom: 1px solid color-mix(in srgb, var(--ms-theme-accent) 18%, #e5edf3) !important;
  box-shadow: 0 8px 24px rgba(15,23,42,.045) !important;
}
:root[data-theme] .topbar strong,
:root[data-theme] .topbar span,
:root[data-theme] #agentName,
:root[data-theme] #connectionStatus {
  color: var(--ms-theme-topbar-text) !important;
}
:root[data-theme] .topbar .presence-select,
:root[data-theme] .topbar .ghost,
:root[data-theme] .top-actions .ghost,
:root[data-theme] .sound-toggle {
  background: rgba(255,255,255,.62) !important;
  color: var(--ms-theme-topbar-text) !important;
  border: 1px solid color-mix(in srgb, var(--ms-theme-accent) 18%, #dbe4ee) !important;
}
:root[data-theme] .main-rail {
  background: var(--ms-theme-rail-bg) !important;
  border-right: 1px solid color-mix(in srgb, var(--ms-theme-accent) 18%, #dbe4ee) !important;
  box-shadow: inset -1px 0 0 rgba(255,255,255,.45) !important;
}
:root[data-theme] .rail-btn {
  color: var(--ms-theme-rail-text) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
}
:root[data-theme] .rail-btn:hover {
  background: rgba(255,255,255,.48) !important;
  color: var(--ms-theme-accent-strong) !important;
}
:root[data-theme] .rail-btn.active {
  background: rgba(255,255,255,.78) !important;
  color: var(--ms-theme-accent-strong) !important;
  border-color: color-mix(in srgb, var(--ms-theme-accent) 22%, #ffffff) !important;
  box-shadow: 0 8px 20px rgba(15,23,42,.07) !important;
}
:root[data-theme] .rail-logout {
  color: color-mix(in srgb, #b42318 55%, var(--ms-theme-rail-text)) !important;
}

/* Mantém card ativo suave conforme tema depois da suavização. */
:root[data-theme] .conversation-item.active,
:root[data-theme] .conversation-item.is-opening {
  background: var(--ms-theme-selected-bg) !important;
  border-color: var(--ms-theme-selected-border) !important;
  box-shadow: inset 5px 0 0 var(--ms-theme-accent), 0 4px 12px rgba(15,23,42,.045) !important;
}
:root[data-theme] .conversation-item.active .conversation-main,
:root[data-theme] .conversation-item.is-opening .conversation-main {
  background: transparent !important;
}
:root[data-theme] .conversation-item:hover:not(.active):not(.is-opening) {
  background: color-mix(in srgb, var(--ms-theme-selected-bg) 52%, #ffffff) !important;
}

/* Suaviza chips/avatares sem apagar a identidade do tema. */
:root[data-theme] .business-chip,
:root[data-theme] .window-mini,
:root[data-theme] .sla-chip,
:root[data-theme] .status-chip,
:root[data-theme] .smart-chip,
:root[data-theme] .unread,
:root[data-theme] .client-avatar,
:root[data-theme] .smart-avatar,
:root[data-theme] .contact-avatar {
  filter: saturate(.82) brightness(1.03) !important;
}


/* ======================================================================
   V3.9.97.1 — Sidebar proporcional REAL
   Redução perceptível da lateral de atendimentos:
   - coluna total: 306px no desktop
   - rail: 52px
   - lista: confortável, sem ficar espremida
   ====================================================================== */
:root {
  --ms-sidebar-total-real: 306px;
  --ms-sidebar-rail-real: 52px;
}

html body .app-shell .layout,
html body .app-shell.details-active .layout,
html body .layout {
  grid-template-columns: var(--ms-sidebar-total-real) minmax(430px, 1fr) 318px !important;
}

html body .app-shell:not(.details-active) .layout {
  grid-template-columns: var(--ms-sidebar-total-real) minmax(430px, 1fr) !important;
}

html body .sidebar {
  width: var(--ms-sidebar-total-real) !important;
  min-width: var(--ms-sidebar-total-real) !important;
  max-width: var(--ms-sidebar-total-real) !important;
  grid-template-columns: var(--ms-sidebar-rail-real) minmax(0, 1fr) !important;
}

html body .main-rail {
  width: var(--ms-sidebar-rail-real) !important;
  min-width: var(--ms-sidebar-rail-real) !important;
  max-width: var(--ms-sidebar-rail-real) !important;
}

html body .filter-box {
  padding-left: 9px !important;
  padding-right: 9px !important;
  gap: 8px !important;
}

html body .conversation-list {
  padding-left: 7px !important;
  padding-right: 7px !important;
}

html body .conversation-item,
html body .conversation-item.compact {
  padding-left: 9px !important;
  padding-right: 7px !important;
}

html body .conversation-main,
html body .conversation-tags,
html body .conversation-meta,
html body .conversation-row,
html body .conversation-footer {
  min-width: 0 !important;
}

html body .conversation-name,
html body .conversation-phone,
html body .conversation-status,
html body .conversation-assigned {
  max-width: 100% !important;
}

html body .conversation-dots {
  flex: 0 0 auto !important;
}

@media (max-width: 1180px) {
  :root {
    --ms-sidebar-total-real: 292px;
    --ms-sidebar-rail-real: 50px;
  }

  html body .app-shell .layout,
  html body .app-shell.details-active .layout,
  html body .app-shell:not(.details-active) .layout,
  html body .layout {
    grid-template-columns: var(--ms-sidebar-total-real) minmax(360px, 1fr) !important;
  }
}

@media (max-width: 760px) {
  html body .sidebar {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    grid-template-columns: var(--ms-sidebar-rail-real) minmax(0, 1fr) !important;
  }

  html body .app-shell .layout,
  html body .app-shell.details-active .layout,
  html body .app-shell:not(.details-active) .layout,
  html body .layout {
    grid-template-columns: 1fr !important;
  }
}


/* ======================================================================
   V3.9.97.5 — Fluidez Mobile + Envio Otimizado
   ====================================================================== */

.wa-status {
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  line-height: 1;
}
.wa-status.pending { color: #64748b !important; }
.wa-status.failed { color: #dc2626 !important; font-weight: 800; }
.wa-status-text { font-size: 10px; font-weight: 700; }
.message.optimistic { opacity: .96 !important; filter: none !important; }
.message.optimistic .message-body { color: #334155 !important; }

.wa-send-btn.sending,
.wa-send-btn.send-active-feedback,
.send-btn.sending,
.send-btn.send-active-feedback {
  background: linear-gradient(135deg, #bbf7d0, #86efac) !important;
  color: #065f46 !important;
  border-color: rgba(34,197,94,.28) !important;
  box-shadow: 0 8px 22px rgba(34,197,94,.22) !important;
  transform: translateY(-1px);
}
.wa-send-btn.sending::after,
.send-btn.sending::after { content: ""; }

.smart-mobile-back {
  display: none !important;
  flex: 0 0 auto;
  border: 1px solid rgba(148,163,184,.34) !important;
  background: rgba(255,255,255,.88) !important;
  color: #0f172a !important;
  box-shadow: 0 5px 14px rgba(15,23,42,.08) !important;
}

@media (max-width: 760px) {
  .smart-contact-bar { gap: 8px !important; }
  .smart-mobile-back {
    display: inline-flex !important;
    height: 34px !important;
    padding: 0 9px !important;
    border-radius: 10px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
  }
  .smart-left { min-width: 0 !important; gap: 8px !important; }
  .app-shell.chat-open .chat-panel { min-height: 0 !important; }
}


/* ======================================================================
   V3.9.97.6 — Cache de conversa sem feedback "Abrindo conversa"
   Mantém a abertura natural da conversa. Se já houver cache local, mostra o histórico
   imediatamente enquanto a API atualiza em segundo plano.
   ====================================================================== */


/* ======================================================================
   V3.9.97.29 — Mobile Visual + ESC Desktop
   Base V3.9.97.6. Ajuste visual mobile sem mexer no fluxo de dados.
   ====================================================================== */
@media (max-width: 760px) {
  /* Topbar principal: Online entre marca e atendente; som antes do status do atendente. */
  .topbar {
    min-height: 66px !important;
    height: auto !important;
    padding: 8px 12px !important;
    gap: 5px !important;
    display: grid !important;
    grid-template-rows: auto auto !important;
    align-items: stretch !important;
  }

  .topbar > div:first-child {
    display: grid !important;
    grid-template-columns: auto auto minmax(0, 1fr) !important;
    align-items: center !important;
    justify-content: start !important;
    gap: 7px !important;
    min-width: 0 !important;
  }

  .topbar > div:first-child strong {
    font-size: 15px !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
  }

  #connectionStatus {
    display: inline-flex !important;
    align-items: center !important;
    max-width: 72px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 11px !important;
    color: rgba(255,255,255,.82) !important;
    padding: 2px 7px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.12) !important;
  }

  .top-actions {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 38px 104px !important;
    gap: 7px !important;
    align-items: center !important;
  }

  #agentName {
    min-width: 0 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    align-self: center !important;
    font-size: 12px !important;
    line-height: 1.15 !important;
    color: rgba(255,255,255,.86) !important;
  }

  .sound-toggle {
    width: 38px !important;
    height: 34px !important;
    min-width: 38px !important;
    padding: 0 !important;
    border-radius: 13px !important;
    display: inline-grid !important;
    place-items: center !important;
  }

  .sound-toggle span {
    display: none !important;
  }

  .sound-toggle svg {
    width: 17px !important;
    height: 17px !important;
  }

  #presenceSelect.presence-select {
    width: 104px !important;
    height: 34px !important;
    min-height: 34px !important;
    border-radius: 13px !important;
    font-size: 12px !important;
    padding: 0 28px 0 10px !important;
  }

  /* Remove visualmente botões de voltar para conversas. Mantém DOM para não quebrar JS. */
  #chatHeader #mobileBackBtn,
  #smartContactBar #mobileBackSmartBtn,
  .smart-mobile-back {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* Topbar do cliente: menos amontoado, usando melhor o espaço. */
  .smart-contact-bar {
    min-height: 62px !important;
    max-height: 70px !important;
    padding: 8px 10px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 8px !important;
    overflow: hidden !important;
  }

  .smart-left {
    display: grid !important;
    grid-template-columns: 38px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 9px !important;
    min-width: 0 !important;
  }

  .smart-avatar {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    border-radius: 14px !important;
    font-size: 12px !important;
  }

  .smart-identity {
    min-width: 0 !important;
    display: grid !important;
    gap: 2px !important;
  }

  .smart-name-row {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    min-width: 0 !important;
  }

  .smart-name-row strong,
  #smartName {
    display: block !important;
    min-width: 0 !important;
    max-width: calc(100vw - 178px) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 14px !important;
    line-height: 1.1 !important;
    color: #0f172a !important;
    letter-spacing: .01em !important;
  }

  #smartSubtitle,
  #smartMeta {
    max-width: calc(100vw - 178px) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    line-height: 1.12 !important;
  }

  #smartSubtitle {
    font-size: 12px !important;
    color: #64748b !important;
  }

  #smartMeta {
    font-size: 11px !important;
    color: #64748b !important;
  }

  #smartPriority,
  .smart-indicators {
    display: none !important;
  }

  .smart-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 4px !important;
    flex: 0 0 auto !important;
  }

  .smart-actions .icon-btn {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    border-radius: 12px !important;
    padding: 0 !important;
  }

  .smart-actions .icon-btn svg {
    width: 17px !important;
    height: 17px !important;
  }

  /* Composer: botão enviar compacto, sem ocupar largura total. */
  .composer,
  .whatsapp-composer {
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .composer-row,
  .wa-composer-row {
    display: grid !important;
    grid-template-columns: 36px minmax(0, 1fr) 36px 62px !important;
    align-items: end !important;
    gap: 6px !important;
    width: 100% !important;
  }

  .composer-icon,
  .attach-btn,
  .record-btn {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    border-radius: 13px !important;
    padding: 0 !important;
  }

  .composer textarea,
  #messageInput {
    min-height: 38px !important;
    max-height: 96px !important;
    padding: 9px 11px !important;
    border-radius: 16px !important;
    font-size: 14px !important;
    line-height: 1.25 !important;
  }

  .send-btn,
  .wa-send-btn,
  #sendBtn {
    grid-column: auto !important;
    width: 62px !important;
    min-width: 62px !important;
    max-width: 62px !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 8px !important;
    border-radius: 13px !important;
    font-size: 11.5px !important;
    font-weight: 900 !important;
    box-shadow: 0 8px 18px rgba(15,118,110,.18) !important;
  }

  .send-hint {
    display: none !important;
  }
}

@media (max-width: 420px) {
  .topbar {
    min-height: 64px !important;
    padding: 7px 10px !important;
  }

  .top-actions {
    grid-template-columns: minmax(0, 1fr) 36px 96px !important;
    gap: 6px !important;
  }

  #presenceSelect.presence-select {
    width: 96px !important;
    font-size: 11.5px !important;
  }

  .sound-toggle {
    width: 36px !important;
    min-width: 36px !important;
  }

  .smart-contact-bar {
    padding: 7px 8px !important;
    gap: 6px !important;
  }

  .smart-left {
    grid-template-columns: 34px minmax(0, 1fr) !important;
    gap: 7px !important;
  }

  .smart-avatar {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    border-radius: 12px !important;
  }

  .smart-actions .icon-btn {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
  }

  .smart-name-row strong,
  #smartName,
  #smartSubtitle,
  #smartMeta {
    max-width: calc(100vw - 156px) !important;
  }

  .composer-row,
  .wa-composer-row {
    grid-template-columns: 34px minmax(0, 1fr) 34px 56px !important;
    gap: 5px !important;
  }

  .composer-icon,
  .attach-btn,
  .record-btn {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
  }

  .send-btn,
  .wa-send-btn,
  #sendBtn {
    width: 56px !important;
    min-width: 56px !important;
    max-width: 56px !important;
    height: 34px !important;
    font-size: 11px !important;
  }

  .composer textarea,
  #messageInput {
    min-height: 36px !important;
  }
}


/* ======================================================================
   V3.9.97.30 — Mobile ESC + alinhamento do status
   Ajusta som/status do atendente à direita e adiciona botão ⤺ no mobile.
   ====================================================================== */
.mobile-esc-btn {
  display: none !important;
}

@media (max-width: 760px) {
  /* Topbar principal: nome à esquerda, som + status grudados à direita. */
  .top-actions {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 7px !important;
  }

  #agentName {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin-right: auto !important;
    text-align: left !important;
  }

  #soundToggleBtn.sound-toggle {
    flex: 0 0 38px !important;
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    height: 34px !important;
    margin-left: auto !important;
  }

  #presenceSelect.presence-select {
    flex: 0 0 104px !important;
    width: 104px !important;
    min-width: 104px !important;
    max-width: 104px !important;
  }

  /* Botão ESC mobile no topbar do cliente. */
  #mobileEscBtn.mobile-esc-btn {
    display: inline-grid !important;
    place-items: center !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    border-radius: 12px !important;
    padding: 0 !important;
    border: 1px solid rgba(15,118,110,.18) !important;
    background: rgba(15,118,110,.10) !important;
    color: #0f766e !important;
    font-size: 18px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    box-shadow: none !important;
  }

  #mobileEscBtn.mobile-esc-btn:active {
    transform: scale(.96);
  }

  /* Ajusta espaço do nome considerando o novo botão ⤺ nas ações. */
  .smart-name-row strong,
  #smartName {
    max-width: calc(100vw - 212px) !important;
  }

  #smartSubtitle,
  #smartMeta {
    max-width: calc(100vw - 212px) !important;
  }
}

@media (max-width: 420px) {
  #soundToggleBtn.sound-toggle {
    flex-basis: 36px !important;
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
  }

  #presenceSelect.presence-select {
    flex-basis: 96px !important;
    width: 96px !important;
    min-width: 96px !important;
    max-width: 96px !important;
  }

  #mobileEscBtn.mobile-esc-btn {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    border-radius: 11px !important;
    font-size: 17px !important;
  }

  .smart-name-row strong,
  #smartName,
  #smartSubtitle,
  #smartMeta {
    max-width: calc(100vw - 188px) !important;
  }
}


/* ======================================================================
   V3.9.97.31 — Mobile Chat Overlay
   Conversa mobile abre como camada fixa sobre a lista, sem desmontar sidebar,
   contatos, temas, dashboard ou módulos laterais.
   ====================================================================== */
@media (max-width: 760px) {
  /* A lista/sidebar permanece montada por baixo. */
  body.mobile-chat-overlay-open .app-shell.chat-open .sidebar,
  .app-shell[data-mobile-view="chat-overlay"] .sidebar {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: none !important;
  }

  body.mobile-chat-overlay-open .app-shell.chat-open .layout,
  .app-shell[data-mobile-view="chat-overlay"] .layout {
    position: relative !important;
    overflow: hidden !important;
  }

  /* Painel de conversa vira overlay full-screen, sem parecer modal. */
  body.mobile-chat-overlay-open .app-shell.chat-open .chat-panel,
  .app-shell[data-mobile-view="chat-overlay"] .chat-panel {
    display: flex !important;
    flex-direction: column !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    max-width: none !important;
    max-height: none !important;
    z-index: 9000 !important;
    background: var(--chat-bg, #efeae2) !important;
    transform: translateX(0) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    box-shadow: -20px 0 60px rgba(15, 23, 42, .18) !important;
    transition: transform .20s ease, opacity .16s ease !important;
  }

  body.mobile-chat-overlay-closed .app-shell:not(.chat-open) .chat-panel,
  .app-shell[data-mobile-view="list"] .chat-panel {
    display: none !important;
  }

  /* A lateral de detalhes nunca entra no overlay mobile. */
  body.mobile-chat-overlay-open .details-panel,
  .app-shell[data-mobile-view="chat-overlay"] .details-panel {
    display: none !important;
  }

  /* Botão ⤺ agora é o recolher do overlay. */
  #mobileEscBtn.mobile-esc-btn {
    display: inline-grid !important;
    place-items: center !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    border-radius: 12px !important;
    padding: 0 !important;
    border: 1px solid rgba(15,118,110,.18) !important;
    background: rgba(15,118,110,.12) !important;
    color: #0f766e !important;
    font-size: 18px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    box-shadow: none !important;
    touch-action: manipulation !important;
  }

  /* Topbar do cliente no overlay: compacto e com respiro. */
  body.mobile-chat-overlay-open .smart-contact-bar,
  .app-shell[data-mobile-view="chat-overlay"] .smart-contact-bar {
    position: sticky !important;
    top: 0 !important;
    z-index: 3 !important;
    background: rgba(255,255,255,.96) !important;
    backdrop-filter: blur(14px) !important;
  }

  /* Mensagens e composer ocupam corretamente a altura do overlay. */
  body.mobile-chat-overlay-open #messageList,
  .app-shell[data-mobile-view="chat-overlay"] #messageList {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: auto !important;
  }

  body.mobile-chat-overlay-open .composer,
  .app-shell[data-mobile-view="chat-overlay"] .composer {
    flex: 0 0 auto !important;
  }

  /* Evita que o topbar principal fique por cima da conversa-overlay. */
  body.mobile-chat-overlay-open .topbar {
    z-index: 1 !important;
  }
}


/* ======================================================================
   V3.9.97.32 — Mobile Overlay Close Fix
   Impede que polling/load silencioso reabra o overlay após clicar em ⤺.
   ====================================================================== */
@media (max-width: 760px) {
  body.mobile-chat-overlay-closed .chat-panel,
  .app-shell[data-mobile-view="list"] .chat-panel {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  body.mobile-chat-overlay-closed .sidebar,
  .app-shell[data-mobile-view="list"] .sidebar {
    pointer-events: auto !important;
  }
}


/* ======================================================================
   V3.9.97.33 — SGP Client Summary Card
   Card único envolvendo as informações superiores do Cliente SGP.
   ====================================================================== */
.sgp-client-summary-card {
  display: grid !important;
  gap: 7px !important;
  padding: 12px 13px !important;
  margin: 0 !important;
  border-radius: 18px !important;
  border: 1px solid rgba(15, 118, 110, .18) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.96)) !important;
  box-shadow: 0 10px 26px rgba(15, 23, 42, .06) !important;
}

.sgp-client-summary-card .sgp-found {
  width: fit-content !important;
  max-width: 100% !important;
  margin: 0 !important;
}

.sgp-client-summary-card h4 {
  margin: 2px 0 0 0 !important;
  line-height: 1.18 !important;
}

.sgp-client-summary-card p {
  margin: 0 !important;
  line-height: 1.35 !important;
}

.sgp-client-summary-card .sgp-tags {
  margin-top: 2px !important;
}

.sgp-client-summary-card > small {
  display: block !important;
  margin-top: 1px !important;
  color: #64748b !important;
}

@media (max-width: 760px) {
  .sgp-client-summary-card {
    padding: 11px 12px !important;
    border-radius: 16px !important;
    margin-bottom: 0 !important;
  }
}


/* ======================================================================
   V3.9.97.34 — SGP Refresh Topbar Chip
   Remove cabeçalho lateral Cliente SGP/Atualizar SGP e move ação para chip
   textual no topbar do cliente.
   ====================================================================== */
.sgp-card-head-hidden,
.sgp-card-head-hidden[hidden] {
  display: none !important;
}

.smart-sgp-refresh-chip {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 32px !important;
  height: 32px !important;
  min-width: 0 !important;
  width: auto !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(15, 118, 110, .18) !important;
  background: rgba(15, 118, 110, .10) !important;
  color: #0f766e !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  box-shadow: none !important;
  transition: transform .12s ease, background .12s ease, border-color .12s ease, opacity .12s ease !important;
}

.smart-sgp-refresh-chip:hover:not(:disabled) {
  background: rgba(15, 118, 110, .16) !important;
  border-color: rgba(15, 118, 110, .28) !important;
  transform: translateY(-1px);
}

.smart-sgp-refresh-chip:disabled {
  opacity: .58 !important;
  cursor: not-allowed !important;
  transform: none !important;
}

@media (max-width: 760px) {
  .smart-sgp-refresh-chip {
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 9px !important;
    border-radius: 999px !important;
    font-size: 11px !important;
  }

  .smart-actions {
    gap: 4px !important;
  }

  .smart-name-row strong,
  #smartName {
    max-width: calc(100vw - 238px) !important;
  }

  #smartSubtitle,
  #smartMeta {
    max-width: calc(100vw - 238px) !important;
  }
}

@media (max-width: 420px) {
  .smart-sgp-refresh-chip {
    height: 29px !important;
    min-height: 29px !important;
    padding: 0 8px !important;
    font-size: 10.5px !important;
  }

  .smart-name-row strong,
  #smartName,
  #smartSubtitle,
  #smartMeta {
    max-width: calc(100vw - 214px) !important;
  }
}


/* ======================================================================
   V3.9.97.35 — SGP Contract Select Logic
   Exibe "Selecionar" só quando há múltiplos contratos e apenas nos não selecionados.
   ====================================================================== */
.sgp-client-summary-card .sgp-found,
.sgp-found {
  font-size: 12px !important;
  padding: 5px 10px !important;
  line-height: 1.05 !important;
}

.sgp-contract-actions:empty {
  display: none !important;
}

.sgp-contract.selected .sgp-contract-actions {
  grid-template-columns: auto !important;
}

.sgp-contract.selected .sgp-contract-actions .ghost.mini {
  justify-self: start;
}

@media (max-width: 760px) {
  .sgp-contract-actions {
    gap: 7px !important;
  }
}


/* ======================================================================
   V3.9.97.36 — SGP Auto Maintenance + Auto Invoices
   Remove consulta manual de manutenção e consulta faturas automaticamente.
   ====================================================================== */
.sgp-contract-actions:empty {
  display: none !important;
}

#invoiceRefreshBtn {
  display: none !important;
}

.invoice-actions-head {
  grid-template-columns: minmax(0, 1fr) !important;
}

#invoiceStatusText {
  display: block !important;
  width: 100% !important;
}

.invoice-loading {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

@media (max-width: 760px) {
  .invoice-actions-head {
    padding-top: 2px !important;
  }
}


/* V3.9.97.37 — remove spacing when no contract action exists */
.sgp-contract-actions { margin-top: 0 !important; }


/* ======================================================================
   V3.9.97.38 — Invoice Status Hidden
   Remove a linha de status acima dos cards de fatura.
   ====================================================================== */
.invoice-actions-head {
  display: none !important;
}

#invoiceStatusText {
  display: none !important;
}


/* ======================================================================
   V3.9.97.39 — Occurrences Hidden
   Remove visualmente o acordeão Ocorrências da barra lateral direita,
   sem mexer na funcionalidade/JS.
   ====================================================================== */
#occurrencesSection,
.sidebar-panel-section[data-panel="occurrences"],
.accordion-item[data-accordion="occurrences"],
[data-side-section="occurrences"],
#occurrencesPanelWrap,
#occurrencesPanelCard {
  display: none !important;
}


/* ======================================================================
   V3.9.97.40 — Occurrences Real Hidden
   Remove visualmente o acordeão Ocorrências real da barra lateral direita.
   ====================================================================== */
.accordion-toggle[data-accordion="ocorrencias"],
#acc-ocorrencias {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}


/* ======================================================================
   V3.9.97.43 — SGP Cards Gap Fix
   Reduz o espaço vertical entre o card-resumo do cliente SGP e o(s) card(s)
   de contrato(s), removendo margem extra do resumo e reduzindo o gap interno.
   ====================================================================== */
.sgp-client { gap: 6px !important; }
.sgp-client-summary-card { margin-bottom: 0 !important; }
@media (max-width: 760px) {
  .sgp-client-summary-card { margin-bottom: 0 !important; }
}


/* ======================================================================
   V3.9.97.46 — Audio Card Played Frontend Only
   Remove tamanho de arquivo nos cards de áudio e mapeia status `played`
   recebido do webhook estável como Reproduzido na interface.
   ====================================================================== */
.media-audio-card .media-size { display: none !important; }
.wa-status.played { color: #0ea5e9 !important; letter-spacing: 0 !important; font-weight: 900 !important; }
.wa-status.played .wa-status-text { color: #0ea5e9 !important; font-weight: 800 !important; }

/* ======================================================================
   V3.9.97.47 — Floating Menu Edge Fix + Incoming Types Render
   - menu de atendimento flutua dentro da janela e abre para cima na extremidade;
   - cards legíveis para contatos, botões, listas/interativos e unsupported recebidos.
   ====================================================================== */
.context-menu {
  position: fixed !important;
  max-height: min(72vh, 340px) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  z-index: 12000 !important;
}
.incoming-special-card {
  display: grid;
  gap: 7px;
  min-width: min(320px, 72vw);
  max-width: 520px;
  padding: 11px 13px;
  border-radius: 16px;
  border: 1px solid rgba(15, 23, 42, .10);
  background: rgba(255, 255, 255, .74);
  box-shadow: 0 8px 20px rgba(15, 23, 42, .06);
  color: #0f172a;
}
.message.inbound .incoming-special-card { background: rgba(255,255,255,.86); }
.message.outbound .incoming-special-card { background: rgba(255,255,255,.54); }
.incoming-special-badge {
  width: max-content;
  border-radius: 999px;
  padding: 3px 8px;
  background: #eef2ff;
  color: #3730a3;
  font-size: 10.5px;
  line-height: 1.1;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.incoming-special-card > strong {
  font-size: 13.5px;
  line-height: 1.2;
}
.incoming-special-row,
.incoming-contact-item {
  display: grid;
  gap: 2px;
  padding: 8px 9px;
  border-radius: 12px;
  background: rgba(248,250,252,.88);
  border: 1px solid rgba(15,23,42,.06);
}
.incoming-special-row small,
.incoming-contact-item small {
  color: #64748b;
  font-size: 11.5px;
  line-height: 1.25;
  word-break: break-word;
}
.incoming-special-row span,
.incoming-contact-item strong {
  color: #0f172a;
  font-size: 13px;
  line-height: 1.28;
  word-break: break-word;
}
.incoming-unsupported-card .incoming-special-badge {
  background: #fff7ed;
  color: #9a3412;
}
@media (max-width: 760px) {
  .context-menu { max-height: min(68vh, 300px) !important; }
  .incoming-special-card { min-width: min(280px, 76vw); }
}


/* ======================================================================
   V3.9.97.48 — Composer Contextual + Emoji Menu
   Ajuste frontend-only: composer estilo WhatsApp, com botão de envio
   contextual e menu de emojis ao lado do anexo.
   ====================================================================== */
.whatsapp-composer {
  position: relative !important;
}
.wa-composer-row {
  display: flex !important;
  grid-template-columns: none !important;
  align-items: flex-end !important;
  gap: 7px !important;
  width: 100% !important;
}
.wa-composer-row #messageInput {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
.emoji-btn span {
  display: inline-grid !important;
  place-items: center !important;
  line-height: 1 !important;
  font-size: 19px !important;
}
.emoji-btn.active,
.emoji-btn:hover:not(:disabled) {
  background: #dcfce7 !important;
  color: #047857 !important;
  border-color: rgba(16,185,129,.35) !important;
}
.emoji-btn.disabled,
.emoji-btn:disabled {
  opacity: .45 !important;
  cursor: not-allowed !important;
}
.composer-emoji-picker {
  position: absolute !important;
  left: 54px !important;
  bottom: calc(100% + 8px) !important;
  z-index: 80 !important;
  width: min(330px, calc(100vw - 28px)) !important;
  max-height: 228px !important;
  overflow: auto !important;
  display: grid !important;
  grid-template-columns: repeat(8, minmax(30px, 1fr)) !important;
  gap: 6px !important;
  padding: 10px !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,.98) !important;
  border: 1px solid rgba(148,163,184,.34) !important;
  box-shadow: 0 18px 52px rgba(15,23,42,.20) !important;
  backdrop-filter: blur(12px) !important;
}
.composer-emoji-picker[hidden] {
  display: none !important;
}
.composer-emoji-option {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  padding: 0 !important;
  border-radius: 12px !important;
  border: 0 !important;
  background: transparent !important;
  font-size: 21px !important;
  line-height: 1 !important;
  box-shadow: none !important;
}
.composer-emoji-option:hover {
  background: #f1f5f9 !important;
  transform: translateY(-1px) !important;
}
.wa-send-btn,
.send-btn#sendBtn {
  width: 38px !important;
  min-width: 38px !important;
  max-width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  font-size: 18px !important;
  line-height: 1 !important;
  display: inline-grid !important;
  place-items: center !important;
}
.wa-send-btn[hidden],
.send-btn#sendBtn[hidden],
.record-btn[hidden],
#recordBtn[hidden] {
  display: none !important;
}
.wa-send-btn.sending,
.wa-send-btn.send-active-feedback,
.send-btn#sendBtn.sending,
.send-btn#sendBtn.send-active-feedback {
  width: auto !important;
  min-width: 86px !important;
  max-width: none !important;
  padding: 0 12px !important;
  font-size: 12px !important;
}
.composer-disabled .emoji-btn,
.composer-disabled .record-btn,
.composer-disabled .wa-send-btn {
  opacity: .45 !important;
}
@media (max-width: 760px) {
  .wa-composer-row {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 6px !important;
  }
  .composer-emoji-picker {
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    grid-template-columns: repeat(7, minmax(30px, 1fr)) !important;
  }
  .emoji-btn span { font-size: 18px !important; }
  .wa-send-btn,
  .send-btn#sendBtn {
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    height: 36px !important;
  }
}
@media (max-width: 420px) {
  .wa-composer-row {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 5px !important;
  }
  .composer-emoji-picker {
    grid-template-columns: repeat(6, minmax(30px, 1fr)) !important;
  }
  .composer-icon,
  .attach-btn,
  .emoji-btn,
  .record-btn {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
  }
  .wa-send-btn,
  .send-btn#sendBtn {
    width: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
    height: 34px !important;
  }
}


/* ======================================================================
   V3.9.97.49 — Call Events UI
   Exibe eventos recebidos do webhook calls como card operacional no chat.
   ====================================================================== */
.incoming-call-card .incoming-special-badge {
  background: #ecfdf5;
  color: #047857;
}
.incoming-call-card {
  border-color: rgba(5, 150, 105, .18);
}


/* ======================================================================
   V3.9.97.51 — Global Incoming Call Popup
   Chamada recebida aparece como notificação global, fora da área de mensagens
   e sem ocupar espaço no histórico da conversa.
   ====================================================================== */
.incoming-call-popup {
  position: fixed;
  right: 18px;
  top: 82px;
  width: min(360px, calc(100vw - 28px));
  border: 1px solid rgba(5, 150, 105, .22);
  background: linear-gradient(135deg, rgba(236,253,245,.98), rgba(240,253,250,.96));
  color: #064e3b;
  box-shadow: 0 20px 50px rgba(15, 23, 42, .18);
  border-radius: 18px;
  padding: 12px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 9998;
  pointer-events: auto;
}
.incoming-call-popup[hidden] { display: none !important; }
.incoming-call-pulse {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: #10b981;
  color: #fff;
  box-shadow: 0 0 0 0 rgba(16,185,129,.35);
  animation: incomingCallPulse 1.25s ease-out infinite;
  flex: 0 0 auto;
}
.incoming-call-copy { display: grid; gap: 2px; min-width: 0; flex: 1; }
.incoming-call-copy strong { font-size: 14px; letter-spacing: .01em; color: #064e3b; }
.incoming-call-copy span { font-size: 12px; font-weight: 800; color: #047857; }
.incoming-call-copy small { font-size: 11px; color: #64748b; font-weight: 700; }
.incoming-call-actions { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.incoming-call-open {
  border: 0;
  background: #10b981;
  color: #fff;
  border-radius: 999px;
  height: 30px;
  padding: 0 10px;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
  white-space: nowrap;
}
.incoming-call-open:hover { filter: brightness(.96); }
.incoming-call-close {
  border: 0;
  background: rgba(255,255,255,.78);
  color: #065f46;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  font-weight: 700;
}
.incoming-call-close:hover { background: #fff; }
@keyframes incomingCallPulse {
  0% { box-shadow: 0 0 0 0 rgba(16,185,129,.38); }
  70% { box-shadow: 0 0 0 11px rgba(16,185,129,0); }
  100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); }
}
@media (max-width: 760px) {
  .incoming-call-popup {
    left: 10px;
    right: 10px;
    top: 74px;
    width: auto;
    border-radius: 16px;
    padding: 10px 10px;
  }
  .incoming-call-pulse { width: 36px; height: 36px; }
  .incoming-call-open { display: none; }
}


/* ======================================================================
   V3.9.97.53 — Call Actions Test
   Botões experimentais de Atender/Recusar/Desligar no popup global.
   ====================================================================== */
.incoming-call-accept,
.incoming-call-reject,
.incoming-call-end {
  border: 0;
  border-radius: 999px;
  height: 30px;
  padding: 0 10px;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
  white-space: nowrap;
}
.incoming-call-accept { background: #16a34a; color: #fff; }
.incoming-call-reject,
.incoming-call-end { background: #ef4444; color: #fff; }
.incoming-call-accept:hover,
.incoming-call-reject:hover,
.incoming-call-end:hover { filter: brightness(.96); }
.incoming-call-actions button:disabled { opacity: .58; cursor: wait; }
@media (max-width: 760px) {
  .incoming-call-popup { left: 10px; right: 10px; top: 72px; width: auto; align-items: flex-start; }
  .incoming-call-actions { flex-wrap: wrap; justify-content: flex-end; }
}


/* ======================================================================
   V3.9.97.54 — Call Popup UI Polish + Video Caption Cleanup
   Refina o popup global de ligação e remove rótulos técnicos de mídia
   recebida quando o vídeo já está renderizado no card.
   ====================================================================== */
.incoming-call-popup.global-call-popup,
.incoming-call-popup {
  position: fixed !important;
  top: 76px !important;
  right: 18px !important;
  left: auto !important;
  width: min(410px, calc(100vw - 32px)) !important;
  min-height: 0 !important;
  border: 1px solid rgba(15, 118, 110, .18) !important;
  border-left: 4px solid #10b981 !important;
  background: rgba(255, 255, 255, .98) !important;
  color: #0f172a !important;
  box-shadow: 0 18px 46px rgba(15, 23, 42, .16) !important;
  border-radius: 20px !important;
  padding: 13px 14px 12px 13px !important;
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) !important;
  grid-template-areas:
    "icon copy"
    "actions actions" !important;
  align-items: center !important;
  gap: 10px 12px !important;
  z-index: 9999 !important;
  pointer-events: auto !important;
  overflow: visible !important;
}
.incoming-call-popup[hidden] { display: none !important; }
.incoming-call-pulse {
  grid-area: icon !important;
  width: 42px !important;
  height: 42px !important;
  border-radius: 999px !important;
  display: grid !important;
  place-items: center !important;
  background: linear-gradient(135deg, #10b981, #059669) !important;
  color: #fff !important;
  font-size: 18px !important;
  box-shadow: 0 10px 22px rgba(16,185,129,.26), 0 0 0 0 rgba(16,185,129,.34) !important;
  animation: incomingCallPulse 1.35s ease-out infinite !important;
}
.incoming-call-copy {
  grid-area: copy !important;
  display: grid !important;
  gap: 1px !important;
  min-width: 0 !important;
  padding-right: 34px !important;
}
.incoming-call-eyebrow {
  display: block !important;
  color: #059669 !important;
  font-size: 10px !important;
  font-weight: 950 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  line-height: 1.15 !important;
}
.incoming-call-copy strong {
  display: block !important;
  color: #0f172a !important;
  font-size: 15px !important;
  font-weight: 950 !important;
  line-height: 1.18 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
}
.incoming-call-copy span:not(.incoming-call-eyebrow) {
  color: #475569 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
}
.incoming-call-copy small {
  color: #64748b !important;
  font-size: 11px !important;
  font-weight: 750 !important;
  line-height: 1.2 !important;
}
.incoming-call-actions {
  grid-area: actions !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 7px !important;
  flex-wrap: nowrap !important;
  min-width: 0 !important;
  padding-top: 2px !important;
}
.incoming-call-accept,
.incoming-call-reject,
.incoming-call-end,
.incoming-call-open {
  height: 32px !important;
  min-width: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 0 13px !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  letter-spacing: .01em !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  box-shadow: none !important;
}
.incoming-call-accept { background: #10b981 !important; color: #fff !important; }
.incoming-call-reject,
.incoming-call-end { background: #ef4444 !important; color: #fff !important; }
.incoming-call-open {
  background: #f1f5f9 !important;
  color: #0f766e !important;
  border: 1px solid rgba(15,118,110,.12) !important;
}
.incoming-call-close {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  width: 28px !important;
  height: 28px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #f8fafc !important;
  color: #64748b !important;
  cursor: pointer !important;
  font-size: 18px !important;
  line-height: 1 !important;
  font-weight: 850 !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
}
.incoming-call-close:hover { background: #e2e8f0 !important; color: #0f172a !important; }
.incoming-call-actions button:disabled { opacity: .58 !important; cursor: wait !important; }
@media (max-width: 760px) {
  .incoming-call-popup.global-call-popup,
  .incoming-call-popup {
    top: 68px !important;
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    grid-template-columns: 38px minmax(0, 1fr) !important;
    border-radius: 18px !important;
    padding: 12px 12px 11px 11px !important;
    gap: 9px 10px !important;
  }
  .incoming-call-pulse { width: 38px !important; height: 38px !important; font-size: 16px !important; }
  .incoming-call-copy { padding-right: 31px !important; }
  .incoming-call-copy strong { font-size: 14px !important; }
  .incoming-call-actions { justify-content: flex-start !important; flex-wrap: wrap !important; gap: 6px !important; }
  .incoming-call-accept,
  .incoming-call-reject,
  .incoming-call-end,
  .incoming-call-open { height: 31px !important; padding: 0 11px !important; }
}


/* ======================================================================
   V3.9.97.55 — Calls module + media download polish
   ====================================================================== */
.media-size { display: none !important; }
.media-lightbox-download {
  position: fixed;
  top: 18px;
  right: 78px;
  z-index: 10000;
  min-height: 44px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(255,255,255,.94);
  color: #0f172a;
  font-weight: 900;
  text-decoration: none;
  box-shadow: 0 18px 55px rgba(0,0,0,.28);
}
.media-lightbox-download:hover { background: #fff; transform: translateY(-1px); }
.media-lightbox-download[hidden] { display: none !important; }
.calls-module { gap: 12px; }
.calls-summary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.calls-summary-grid div {
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 16px;
  padding: 11px 12px;
  box-shadow: 0 10px 26px rgba(15,23,42,.05);
}
.calls-summary-grid small {
  display: block;
  color: var(--text-soft, #64748b);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 900;
}
.calls-summary-grid strong { font-size: 22px; color: var(--text-main, #0f172a); }
.call-refresh-row { width: 100%; }
.calls-list { display: grid; gap: 9px; overflow: auto; }
.call-log-item {
  display: grid;
  grid-template-columns: 36px minmax(0,1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,.08);
  background: rgba(255,255,255,.92);
  box-shadow: 0 10px 26px rgba(15,23,42,.05);
}
.call-log-icon {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(16,185,129,.12);
  color: #047857;
  font-weight: 900;
}
.call-log-item.missed .call-log-icon,
.call-log-item.rejected .call-log-icon { background: rgba(239,68,68,.12); color: #b91c1c; }
.call-log-item.active .call-log-icon { background: rgba(14,165,233,.12); color: #0369a1; }
.call-log-main { min-width: 0; display: grid; gap: 2px; }
.call-log-main strong { font-size: 13px; color: var(--text-main, #0f172a); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.call-log-main span { font-size: 12px; font-weight: 850; color: var(--text-main, #0f172a); }
.call-log-main small { font-size: 11px; color: var(--text-soft, #64748b); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.call-log-meta { display: grid; justify-items: end; gap: 4px; color: var(--text-soft, #64748b); }
.call-log-meta b { font-size: 12px; color: var(--text-main, #0f172a); }
.call-log-meta small { font-size: 10px; white-space: nowrap; }
@media (max-width: 760px) {
  .media-lightbox-download { right: 72px; top: 14px; min-height: 40px; padding: 0 14px; }
  .call-log-item { grid-template-columns: 32px minmax(0,1fr); }
  .call-log-meta { grid-column: 2; justify-items: start; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
}


/* ======================================================================
   V3.9.97.57 — Calls Status Classification Fix
   Ajusta resumo do módulo Ligações para incluir Recusadas e manter grid flexível.
   ====================================================================== */
.calls-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.calls-summary-grid div:last-child:nth-child(odd) { grid-column: span 2; }


/* ======================================================================
   V3.9.97.58 — Call Time + Invoice Due + Neutral Emoji
   Ajustes front-end: horário local nas chamadas, botão de emoji neutro e
   prioridade do vencimento original nos cards de fatura.
   ====================================================================== */
.emoji-btn svg {
  width: 20px !important;
  height: 20px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}
.emoji-btn span { display: none !important; }


/* ======================================================================
   V3.9.97.59 — Calls/Invoice/Menu Polish
   Remove botão Abrir no módulo Ligações, compacta ações/reação e melhora
   uso de espaço nos registros de chamada.
   ====================================================================== */
.call-log-item {
  grid-template-columns: 34px minmax(0,1fr) auto !important;
  gap: 8px !important;
  padding: 9px 10px !important;
}
.call-log-icon { width: 34px !important; height: 34px !important; }
.call-log-main strong { font-size: 13px !important; line-height: 1.15 !important; }
.call-log-main span { font-size: 11px !important; line-height: 1.15 !important; }
.call-log-main small { font-size: 10.5px !important; }
.call-log-meta { gap: 2px !important; min-width: 58px !important; }
.call-log-meta b { font-size: 11.5px !important; }
.call-log-meta small { font-size: 10px !important; }
.premium-message-menu { width: 172px !important; padding: 6px !important; border-radius: 13px !important; }
.premium-message-menu button { padding: 8px 10px !important; font-size: 13px !important; gap: 8px !important; border-radius: 9px !important; }
.premium-message-menu button.danger-action { color: #b91c1c !important; }
.premium-message-menu button.danger-action svg { stroke: #ef4444 !important; }
.reaction-picker { gap: 3px !important; padding: 5px !important; box-shadow: 0 14px 36px rgba(15,23,42,.18) !important; }
.reaction-picker button { width: 29px !important; height: 29px !important; font-size: 17px !important; }
.reaction-picker .reaction-remove { padding: 0 7px !important; height: 29px !important; font-size: 10.5px !important; }
@media (max-width: 760px) {
  .call-log-item { grid-template-columns: 32px minmax(0,1fr) auto !important; }
  .call-log-meta { grid-column: auto !important; justify-items: end !important; display: grid !important; gap: 2px !important; }
  .reaction-picker button { width: 28px !important; height: 28px !important; }
}


/* ======================================================================
   V3.9.97.60 — Reactions/Menu/Calls Compact Polish
   Remove ação Apagar do menu de mensagens, remove opção Remover do seletor
   de reações, mantém reações contidas no card e compacta Ligações.
   ====================================================================== */
.call-log-item {
  grid-template-columns: 34px minmax(0,1fr) !important;
  gap: 9px !important;
  align-items: center !important;
  padding: 9px 10px !important;
}
.call-log-main { gap: 1px !important; }
.call-log-main strong { font-size: 13px !important; line-height: 1.16 !important; }
.call-log-main span { font-size: 11.5px !important; line-height: 1.2 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
.call-log-main small { font-size: 10.5px !important; line-height: 1.2 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
.call-log-meta { display: none !important; }
.premium-message-menu { width: 150px !important; }
.message-more-btn[title*="apagar"] { title: "Responder ou copiar"; }
.reaction-picker {
  gap: 2px !important;
  padding: 5px !important;
  max-width: calc(100vw - 16px) !important;
  overflow: hidden !important;
}
.reaction-picker button { width: 30px !important; height: 30px !important; font-size: 17px !important; flex: 0 0 auto !important; }
.reaction-picker .reaction-remove { display: none !important; }
.message-reaction {
  bottom: 4px !important;
  right: 8px !important;
  left: auto !important;
  min-width: 22px !important;
  height: 20px !important;
  padding: 0 5px !important;
  font-size: 13px !important;
  box-shadow: 0 4px 12px rgba(15,23,42,.12) !important;
}
.message.inbound .message-reaction { left: 8px !important; right: auto !important; }
.message.outbound .message-reaction { right: 8px !important; left: auto !important; }
.message:has(.message-reaction) { margin-bottom: 4px !important; }
@media (max-width: 760px) {
  .call-log-item { grid-template-columns: 32px minmax(0,1fr) !important; }
  .reaction-picker button { width: 29px !important; height: 29px !important; }
}


/* ======================================================================
   V3.9.97.61 — Reaction Picker Boundary Fix
   Mantém o seletor de reações dentro do balão/card da mensagem, evitando
   extrapolar a borda em mensagens curtas.
   ====================================================================== */
#reactionPicker.reaction-picker {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  width: 118px !important;
  max-width: min(118px, calc(100vw - 18px)) !important;
  gap: 3px !important;
  padding: 6px !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}
#reactionPicker.reaction-picker button[data-reaction-emoji] {
  width: 32px !important;
  height: 28px !important;
  min-width: 0 !important;
  border-radius: 12px !important;
  font-size: 16px !important;
}
#reactionPicker.reaction-picker .reaction-remove { display: none !important; }
@media (max-width: 760px) {
  #reactionPicker.reaction-picker { width: 112px !important; max-width: calc(100vw - 16px) !important; }
  #reactionPicker.reaction-picker button[data-reaction-emoji] { width: 30px !important; height: 27px !important; }
}


/* ======================================================================
   V3.9.97.62 — Reaction Picker Single Row Boundary Fix
   Retorna o seletor de reações para uma única barra horizontal e restringe
   o posicionamento ao painel de mensagens/viewport, sem quebrar em 2 linhas.
   ====================================================================== */
#reactionPicker.reaction-picker {
  display: inline-flex !important;
  grid-template-columns: none !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: calc(100vw - 20px) !important;
  gap: 4px !important;
  padding: 5px 6px !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
}
#reactionPicker.reaction-picker button[data-reaction-emoji] {
  width: 29px !important;
  height: 29px !important;
  min-width: 29px !important;
  flex: 0 0 29px !important;
  border-radius: 999px !important;
  font-size: 17px !important;
}
#reactionPicker.reaction-picker .reaction-remove { display: none !important; }
@media (max-width: 760px) {
  #reactionPicker.reaction-picker { gap: 3px !important; padding: 5px !important; }
  #reactionPicker.reaction-picker button[data-reaction-emoji] { width: 28px !important; height: 28px !important; min-width: 28px !important; flex-basis: 28px !important; }
}


/* ======================================================================
   V3.9.97.63 — Reaction Picker Borderless Fix
   Remove a cápsula/borda externa do seletor de reações, deixando apenas
   uma barra horizontal de emojis. Mantém a opção remover oculta e reduz
   o impacto visual quando a barra precisa ser reposicionada nas bordas.
   ====================================================================== */
#reactionPicker.reaction-picker,
html body #reactionPicker.reaction-picker,
html:not([data-theme="light"]) body #reactionPicker.reaction-picker {
  display: inline-flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 0 !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: calc(100vw - 18px) !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
}
#reactionPicker.reaction-picker button[data-reaction-emoji],
html body #reactionPicker.reaction-picker button[data-reaction-emoji],
html:not([data-theme="light"]) body #reactionPicker.reaction-picker button[data-reaction-emoji] {
  width: 27px !important;
  height: 27px !important;
  min-width: 27px !important;
  flex: 0 0 27px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  background-image: none !important;
  border-radius: 999px !important;
  font-size: 18px !important;
  line-height: 1 !important;
}
#reactionPicker.reaction-picker button[data-reaction-emoji]:hover,
html body #reactionPicker.reaction-picker button[data-reaction-emoji]:hover,
html:not([data-theme="light"]) body #reactionPicker.reaction-picker button[data-reaction-emoji]:hover {
  background: rgba(15, 23, 42, .06) !important;
  transform: translateY(-1px) !important;
}
#reactionPicker.reaction-picker .reaction-remove { display: none !important; }
@media (max-width: 760px) {
  #reactionPicker.reaction-picker { gap: 5px !important; }
  #reactionPicker.reaction-picker button[data-reaction-emoji] {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    flex-basis: 26px !important;
    font-size: 17px !important;
  }
}


/* V3.9.97.66 — Modo Foco/Teste restrito a Admin/Dev + cache bust */
.focus-top-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 8px 11px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(148, 163, 184, .42) !important;
  background: rgba(226, 232, 240, .9) !important;
  color: #0f172a !important;
  white-space: nowrap;
}
.focus-top-btn.active {
  background: rgba(20, 184, 166, .18) !important;
  color: #ccfbf1 !important;
  border-color: rgba(94, 234, 212, .5) !important;
  box-shadow: 0 0 0 3px rgba(20, 184, 166, .12);
}
.focus-mode-box {
  display: grid;
  gap: 10px;
  border: 1px solid rgba(15, 118, 110, .18);
  background: linear-gradient(180deg, rgba(240,253,250,.96), rgba(255,255,255,.98));
  border-radius: 18px;
  padding: 13px;
  box-shadow: 0 14px 36px rgba(15, 23, 42, .06);
}
.focus-mode-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
}
.focus-mode-head strong { color: #0f172a; font-size: 14px; }
.focus-mode-head span {
  color: #0f766e;
  font-size: 11px;
  font-weight: 900;
  text-align: right;
  line-height: 1.25;
}
.focus-toggle-line {
  display: flex;
  grid-template-columns: auto 1fr;
  gap: 9px;
  align-items: center;
  font-size: 12px;
  font-weight: 800;
  color: #334155;
}
.focus-toggle-line input { width: 17px; height: 17px; accent-color: #0f766e; }
.focus-field { display: grid; gap: 6px; font-size: 11px; color: #475569; }
.focus-field input,
.focus-field select {
  width: 100%;
  border-radius: 12px;
  border: 1px solid #cbd5e1;
  padding: 9px 10px;
  background: #fff;
}
.focus-clear-btn {
  background: #e2e8f0 !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: none !important;
}
.focus-mode-box small { color: #64748b; line-height: 1.35; }
.app-shell.focus-mode-active .filter-box {
  box-shadow: inset 3px 0 0 rgba(20, 184, 166, .55);
}
.app-shell.focus-mode-active .conversation-section-title:first-child::after {
  content: 'Modo Foco';
  margin-left: auto;
  color: #0f766e;
  font-size: 10px;
  font-weight: 900;
}
@media (max-width: 760px) {
  .focus-top-btn span { display: none; }
  .focus-top-btn::before { content: '◎'; font-size: 16px; }
}


/* ======================================================================
   V3.9.97.72 — Inbound Invoice Bot Foundation
   Mantém o popup visualmente vivo sem interferir nas ações WebRTC.
   ====================================================================== */
.incoming-call-popup.global-call-popup:not([hidden]),
.incoming-call-popup:not([hidden]) {
  animation: incomingCallCardIn .22s ease-out, incomingCallCardBreath 2.35s ease-in-out infinite !important;
}
.incoming-call-popup.call-accepted {
  border-left-color: #0ea5e9 !important;
}
.incoming-call-popup.call-accepted .incoming-call-pulse {
  background: linear-gradient(135deg, #0ea5e9, #2563eb) !important;
  animation: incomingCallInProgress 1.85s ease-in-out infinite !important;
}
.incoming-call-popup.call-ringing .incoming-call-pulse {
  animation: incomingCallPulse 1.05s ease-out infinite, incomingCallRing 1.7s ease-in-out infinite !important;
}
.incoming-call-pulse {
  position: relative !important;
}
.incoming-call-pulse::before,
.incoming-call-pulse::after {
  content: "" !important;
  position: absolute !important;
  inset: -7px !important;
  border-radius: inherit !important;
  border: 1px solid rgba(16,185,129,.26) !important;
  opacity: .85 !important;
  pointer-events: none !important;
  animation: incomingCallWave 1.45s ease-out infinite !important;
}
.incoming-call-pulse::after {
  inset: -12px !important;
  animation-delay: .36s !important;
  opacity: .45 !important;
}
.incoming-call-live-dot {
  position: absolute !important;
  right: 1px !important;
  bottom: 2px !important;
  width: 9px !important;
  height: 9px !important;
  border-radius: 999px !important;
  background: #22c55e !important;
  box-shadow: 0 0 0 3px rgba(255,255,255,.95), 0 0 0 6px rgba(34,197,94,.18) !important;
  animation: incomingCallDot 1.05s ease-in-out infinite !important;
}
.incoming-call-eyebrow::after {
  content: "" !important;
  display: inline-block !important;
  width: 4px !important;
  height: 4px !important;
  margin-left: 7px !important;
  border-radius: 999px !important;
  background: currentColor !important;
  vertical-align: middle !important;
  animation: incomingCallDot .95s ease-in-out infinite !important;
}
@keyframes incomingCallCardIn {
  from { opacity: 0; transform: translateY(-8px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes incomingCallCardBreath {
  0%, 100% { box-shadow: 0 18px 46px rgba(15,23,42,.16), 0 0 0 rgba(16,185,129,0) !important; }
  50% { box-shadow: 0 20px 52px rgba(15,23,42,.20), 0 0 26px rgba(16,185,129,.16) !important; }
}
@keyframes incomingCallRing {
  0%, 100% { transform: rotate(0deg) scale(1); }
  18% { transform: rotate(-8deg) scale(1.04); }
  36% { transform: rotate(8deg) scale(1.04); }
  54% { transform: rotate(-4deg) scale(1.02); }
  72% { transform: rotate(4deg) scale(1.02); }
}
@keyframes incomingCallInProgress {
  0%, 100% { transform: scale(1); box-shadow: 0 10px 22px rgba(14,165,233,.26), 0 0 0 0 rgba(14,165,233,.30) !important; }
  50% { transform: scale(1.035); box-shadow: 0 12px 26px rgba(14,165,233,.32), 0 0 0 9px rgba(14,165,233,0) !important; }
}
@keyframes incomingCallWave {
  0% { transform: scale(.82); opacity: .55; }
  100% { transform: scale(1.35); opacity: 0; }
}
@keyframes incomingCallDot {
  0%, 100% { opacity: .45; transform: scale(.82); }
  50% { opacity: 1; transform: scale(1.12); }
}
@media (prefers-reduced-motion: reduce) {
  .incoming-call-popup.global-call-popup:not([hidden]),
  .incoming-call-popup:not([hidden]),
  .incoming-call-pulse,
  .incoming-call-pulse::before,
  .incoming-call-pulse::after,
  .incoming-call-live-dot,
  .incoming-call-eyebrow::after {
    animation: none !important;
  }
}

/* V3.9.97.96 — Safe Send Retry + SGP Persistence */
.message-retry-btn {
  border: 0;
  background: rgba(239, 68, 68, .10);
  color: #b91c1c;
  border-radius: 999px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-weight: 800;
}
.message-retry-btn:hover { background: rgba(239, 68, 68, .18); }
.message-error-text {
  margin-top: 6px;
  font-size: 11px;
  line-height: 1.35;
  color: #b91c1c;
  opacity: .92;
}


/* V3.9.97.97 — Persistent Outbox + Audio Playback Speed */
.media-audio-player {
  display: flex;
  align-items: center;
  gap: 8px;
  width: min(410px, 100%);
}
.media-audio-player .media-audio {
  flex: 1 1 auto;
  min-width: 180px;
}
.audio-speed-btn {
  border: 0;
  border-radius: 999px;
  background: rgba(15, 23, 42, .08);
  color: #0f172a;
  min-width: 42px;
  height: 30px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .08);
}
.audio-speed-btn:hover { background: rgba(37, 99, 235, .12); color: #1d4ed8; }
.message.persistent-outbox .message-bubble,
.message.optimistic .message-bubble { opacity: .96; }
@media (max-width: 640px) {
  .media-audio-player { width: 100%; }
  .audio-speed-btn { min-width: 38px; height: 28px; padding: 0 8px; }
}


/* V3.9.97.98 — Compact Audio Card
   Ajuste estritamente visual: reduz largura/altura/padding dos cards de áudio
   e deixa o botão de velocidade mais discreto, sem alterar gravação/envio. */
.message .media-box.media-audio-card {
  min-width: auto !important;
  width: fit-content !important;
  max-width: min(286px, 70vw) !important;
  padding: 5px 6px !important;
  border-radius: 13px !important;
}
.message .media-audio-player {
  width: min(274px, 68vw) !important;
  max-width: 100% !important;
  gap: 5px !important;
}
.message .media-audio-player .media-audio,
.message .media-audio-card audio.media-audio {
  width: min(220px, 56vw) !important;
  min-width: 150px !important;
  height: 28px !important;
  flex: 1 1 auto !important;
}
.message .audio-speed-btn {
  min-width: 32px !important;
  height: 24px !important;
  padding: 0 7px !important;
  font-size: 10.5px !important;
  line-height: 1 !important;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .08) !important;
}
.message .media-audio-card .media-size,
.message .media-audio-card .media-title,
.message .media-audio-card .media-caption {
  display: none !important;
}
@media (max-width: 640px) {
  .message .media-box.media-audio-card {
    max-width: min(270px, 76vw) !important;
    padding: 5px !important;
  }
  .message .media-audio-player {
    width: min(258px, 74vw) !important;
    gap: 4px !important;
  }
  .message .media-audio-player .media-audio,
  .message .media-audio-card audio.media-audio {
    width: min(204px, 60vw) !important;
    min-width: 132px !important;
    height: 26px !important;
  }
  .message .audio-speed-btn {
    min-width: 30px !important;
    height: 23px !important;
    padding: 0 6px !important;
    font-size: 10px !important;
  }
}


/* ======================================================================
   V3.9.97.102 — Composer Send Button Cleanup
   Remove visualmente o botão de envio/enviando do composer.
   O envio por Enter permanece pelo JavaScript e o status fica no balão.
   ====================================================================== */
#sendBtn,
.send-btn#sendBtn,
.wa-send-btn#sendBtn {
  display: none !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
}
.wa-composer-row,
.composer-row {
  grid-template-columns: none !important;
}


/* V3.9.97.104 — Audio Player Behavior Fix
   Mantém o visual compacto existente, adicionando apenas comportamento/ações discretas. */
.message .audio-speed-btn[hidden] {
  display: none !important;
}
.message .audio-download-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  border-radius: 999px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
  color: #0f172a;
  background: rgba(15, 23, 42, .08);
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .08);
}
.message .audio-download-btn:hover {
  background: rgba(37, 99, 235, .12);
  color: #1d4ed8;
}
@media (max-width: 640px) {
  .message .audio-download-btn {
    width: 23px;
    height: 23px;
    flex-basis: 23px;
    font-size: 13px;
  }
}


/* ======================================================================
   V3.9.97.105 — Audio Player Native Compact Fix
   Mantém o player nativo/compacto, sem botão extra de download e sem
   ocupar espaço para o antigo botão. O download fica no menu nativo de
   reticências do áudio. Oculta controles de volume quando o navegador
   permite via WebKit/Blink; volume fica sob controle do dispositivo.
   ====================================================================== */
.message .media-audio-player {
  width: min(248px, 64vw) !important;
  max-width: 100% !important;
  gap: 4px !important;
}
.message .media-audio-player .media-audio,
.message .media-audio-card audio.media-audio {
  width: min(208px, 56vw) !important;
  min-width: 148px !important;
  height: 26px !important;
  flex: 1 1 auto !important;
}
.message .audio-download-btn {
  display: none !important;
  width: 0 !important;
  min-width: 0 !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.message .media-audio::-webkit-media-controls-volume-control-container,
.message .media-audio::-webkit-media-controls-volume-slider-container,
.message .media-audio::-webkit-media-controls-volume-slider,
.message .media-audio::-webkit-media-controls-mute-button {
  display: none !important;
  width: 0 !important;
  min-width: 0 !important;
  opacity: 0 !important;
}
.message .media-audio::-webkit-media-controls-timeline,
.message .media-audio::-webkit-media-controls-current-time-display,
.message .media-audio::-webkit-media-controls-time-remaining-display,
.message .media-audio::-webkit-media-controls-play-button,
.message .media-audio::-webkit-media-controls-overflow-button {
  display: flex !important;
}
@media (max-width: 640px) {
  .message .media-audio-player { width: min(236px, 72vw) !important; }
  .message .media-audio-player .media-audio,
  .message .media-audio-card audio.media-audio {
    width: min(196px, 62vw) !important;
    min-width: 132px !important;
    height: 25px !important;
  }
}


/* ======================================================================
   V3.9.97.128 — V105 Text Send Arrow Fix
   Base: V3.9.97.126.
   Escopo original: renderizar seta padrão WhatsApp somente quando houver texto
   digitado no composer.
   V3.9.97.147: expandido para composer-has-content, incluindo anexos pendentes.
   ====================================================================== */

#sendForm .visual-send-btn {
  display: none !important;
}

#sendForm.composer-has-content .visual-send-btn:not([hidden]) {
  display: inline-grid !important;
}

#sendForm.composer-has-content #recordBtn {
  display: none !important;
}

#sendForm:not(.composer-has-content) #recordBtn {
  display: inline-grid !important;
}

#sendForm .visual-send-btn svg {
  width: 20px !important;
  height: 20px !important;
  fill: currentColor !important;
  stroke: none !important;
}

#sendForm .visual-send-btn:disabled {
  opacity: .48 !important;
  cursor: not-allowed !important;
}


/* ======================================================================
   V3.9.97.129 — Section Highlight Polish
   Base: V3.9.97.128.
   Escopo: dar mais presença visual às seções "Em atendimento" e
   "Em espera", mantendo o visual geral da V105.
   ====================================================================== */

.conversation-section-title {
  background: linear-gradient(180deg, #eef7f4 0%, #e7f3ef 100%) !important;
  color: #0f766e !important;
  border-top: 1px solid rgba(15, 118, 110, .12) !important;
  border-bottom: 1px solid rgba(15, 118, 110, .12) !important;
  font-size: 10.8px !important;
  font-weight: 900 !important;
  letter-spacing: .055em !important;
  padding: 8px 11px 6px !important;
}

.conversation-section-title strong {
  min-width: 24px !important;
  height: 24px !important;
  padding: 0 8px !important;
  display: inline-grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  background: #c9f5ea !important;
  border: 1px solid rgba(15, 118, 110, .14) !important;
  color: #0f766e !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

.app-shell.focus-mode-active .conversation-section-title:first-child::after {
  color: #0f766e !important;
}

/* V3.9.97.148 — Interactive Composer Basic */
.interactive-btn {
  border: 0;
  border-radius: 999px;
  background: #eef6ff;
  color: #075985;
  font-weight: 850;
  padding: 0 13px;
  height: 42px;
  cursor: pointer;
  white-space: nowrap;
}
.interactive-btn:hover { background: #e0f2fe; }
.interactive-btn:disabled,
.interactive-btn.disabled {
  opacity: .45;
  cursor: not-allowed;
}
.interactive-modal-card {
  width: min(620px, 100%);
  max-height: 88vh;
  overflow: auto;
}
.interactive-modal-card label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 8px 0;
  font-size: 12px;
  font-weight: 800;
  color: #334155;
}
.interactive-section {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 14px;
  background: #f8fafc;
}
.interactive-section strong {
  font-size: 12px;
  color: #0f172a;
}
.interactive-section small {
  color: #64748b;
  font-size: 11px;
}
.interactive-grid {
  display: grid;
  grid-template-columns: minmax(90px, .75fr) minmax(130px, 1.25fr);
  gap: 8px;
}
@media (max-width: 760px) {
  .interactive-btn {
    height: 38px;
    padding: 0 10px;
    font-size: 12px;
  }
  .interactive-grid {
    grid-template-columns: 1fr;
  }
}

/* V3.9.97.149 — MS Connect Interactive Presets */
.interactive-preset-note {
  margin: 6px 0 10px;
  padding: 9px 11px;
  border-radius: 12px;
  background: #f1f5f9;
  color: #475569;
  font-size: 12px;
  font-weight: 750;
  border: 1px solid rgba(15,23,42,.07);
}
.interactive-modal-card optgroup {
  font-weight: 900;
  color: #0f172a;
}

/* V3.9.97.150 — Hide Manual Interactive Button
   O motor interativo continua no backend, mas o uso manual pelo atendente fica oculto. */
#interactiveBtn,
.wa-interactive-btn {
  display: none !important;
}



/* V3.9.97.158 — White Label Branding UI */
:root {
  --mswa-brand-primary: #0f766e;
  --mswa-brand-accent: #0891b2;
}
.brand-mark { background: linear-gradient(135deg, var(--mswa-brand-primary), var(--mswa-brand-accent)) !important; overflow: hidden; }
.brand-mark.has-logo { background: rgba(255,255,255,.92) !important; border: 1px solid rgba(15,23,42,.08); color: transparent !important; padding: 0 !important; }
.brand-mark.has-logo img { width: 100%; height: 100%; object-fit: contain; display: block; padding: 7px; box-sizing: border-box; }
.login-powered-by { margin-top: 14px; text-align: center; font-size: 11px; color: rgba(71,85,105,.72); }
.login-submit { background: linear-gradient(135deg, var(--mswa-brand-primary), var(--mswa-brand-accent)) !important; }
.login-kicker { color: var(--mswa-brand-primary) !important; }
.topbar { --ms-topbar-bg: linear-gradient(135deg, var(--mswa-brand-primary), var(--mswa-brand-accent)); }