#scw-root { position: fixed; right: 20px; bottom: 20px; z-index: 10030; font-size: 14px; }
  #scw-bubble {
    width: 56px; height: 56px; border-radius: 9999px; border: 0; cursor: pointer;
    background: var(--primary-color, #22c55e); color: #fff;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .22);
    display: flex; align-items: center; justify-content: center;
    transition: transform .15s ease;
  }
  #scw-bubble:hover { transform: translateY(-2px); }
  #scw-badge {
    position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px;
    border-radius: 9999px; background: #ef4444; color: #fff; font-size: 11px; font-weight: 700;
    display: none; align-items: center; justify-content: center; border: 2px solid #fff;
  }
  #scw-panel {
    position: absolute; right: 0; bottom: 68px; width: 360px; max-width: calc(100vw - 40px);
    height: 520px; max-height: calc(100vh - 120px);
    background: #fff; border-radius: 16px; box-shadow: 0 12px 40px rgba(0, 0, 0, .25);
    display: none; flex-direction: column; overflow: hidden;
  }
  #scw-panel.scw-open { display: flex; }
  .scw-head { padding: 14px 16px; background: var(--primary-color, #22c55e); color: #fff; display: flex; align-items: center; gap: 10px; }
  .scw-head h3 { margin: 0; font-size: 15px; font-weight: 600; }
  .scw-head button { background: transparent; border: 0; color: #fff; cursor: pointer; padding: 4px; opacity: .9; }
  .scw-body { flex: 1; overflow-y: auto; background: #f8fafc; }
  .scw-foot { padding: 10px 12px; border-top: 1px solid #e2e8f0; background: #fff; }
  .scw-item { padding: 12px 14px; border-bottom: 1px solid #e9eef5; cursor: pointer; background: #fff; text-align: left; }
  .scw-item:hover { background: #f1f5f9; }
  .scw-item-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  .scw-subject { font-weight: 600; color: #0f172a; line-height: 1.3; }
  .scw-meta { font-size: 12px; color: #64748b; margin-top: 3px; }
  .scw-prev { font-size: 12px; color: #64748b; margin-top: 5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .scw-dot { width: 9px; height: 9px; border-radius: 9999px; background: #ef4444; flex-shrink: 0; }
  .scw-chip { font-size: 11px; padding: 2px 8px; border-radius: 9999px; background: #e2e8f0; color: #475569; white-space: nowrap; }
  .scw-msg {
    max-width: 85%; width: fit-content; padding: 9px 12px; border-radius: 14px; margin: 8px 12px;
    font-size: 13px; line-height: 1.45; word-break: break-word; text-align: left;
  }
  /* pre-wrap SÓ no texto da mensagem: no container ele preservaria a indentação do HTML */
  .scw-text { white-space: pre-wrap; }
  /* Linha da mensagem: avatar de quem atende + balao. O balao perdeu a margem
     lateral para a linha, senao o avatar empurraria tudo para dentro. */
  .scw-row { display: flex; align-items: flex-end; gap: 6px; margin: 0 12px; }
  .scw-row.mine { justify-content: flex-end; }
  .scw-row .scw-msg { margin: 8px 0; }
  .scw-av, .scw-av-ini {
    width: 26px; height: 26px; flex: 0 0 26px; border-radius: 50%;
    margin-bottom: 9px; object-fit: cover;
  }
  .scw-av-ini {
    display: flex; align-items: center; justify-content: center;
    background: var(--primary-color, #22c55e); color: #fff;
    font-size: 11px; font-weight: 700; line-height: 1;
  }
  .scw-msg.mine { margin-left: auto; background: var(--primary-color, #22c55e); color: #fff; border-bottom-right-radius: 4px; }
  .scw-msg.theirs { background: #fff; border: 1px solid #e2e8f0; color: #1e293b; border-bottom-left-radius: 4px; }
  .scw-msg .scw-who { font-size: 11px; opacity: .75; margin-bottom: 3px; }
  .scw-msg code { background: rgba(0,0,0,.08); padding: 1px 4px; border-radius: 4px; }
  .scw-input { width: 100%; border: 1px solid #cbd5e1; border-radius: 10px; padding: 8px 10px; font-size: 13px; font-family: inherit; resize: none; box-sizing: border-box; }
  .scw-btn { background: var(--primary-color, #22c55e); color: #fff; border: 0; border-radius: 10px; padding: 8px 14px; font-size: 13px; font-weight: 600; cursor: pointer; }
  .scw-btn:disabled { opacity: .65; cursor: wait; }
  .scw-btn.ghost { background: transparent; color: #475569; }
  .scw-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
  .scw-mic { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #cbd5e1; padding: 7px 12px; }
  .scw-vstatus { margin-top: 6px; font-size: 12px; text-align: left; }
  .scw-empty { padding: 32px 20px; text-align: center; color: #64748b; font-size: 13px; }
  .scw-hint {
    margin: 10px 12px; padding: 8px 12px; border-radius: 10px; font-size: 12px;
    background: #eff6ff; color: #1d4ed8; border: 1px solid #dbeafe; text-align: left;
  }
  /* Tema escuro: segue o tema DO SISTEMA (classe .dark no <html>), nao o do
     sistema operacional — prefers-color-scheme escurecia o modal com o app claro. */
  .dark #scw-panel, .dark .scw-item, .dark .scw-foot, .dark .scw-msg.theirs { background: #1e293b; color: #e2e8f0; }
  .dark .scw-body { background: #0f172a; }
  .dark .scw-item { border-bottom-color: #334155; }
  .dark .scw-item:hover { background: #334155; }
  .dark .scw-subject { color: #f1f5f9; }
  .dark .scw-msg.theirs { border-color: #334155; }
  .dark .scw-foot { border-top-color: #334155; }
  .dark .scw-input { background: #0f172a; border-color: #334155; color: #e2e8f0; }
  .dark .scw-chip { background: #334155; color: #cbd5e1; }
  .dark .scw-mic { border-color: #334155; color: #cbd5e1; }
  .dark .scw-hint { background: #1e3a5f33; color: #93c5fd; border-color: #1e40af55; }
  #scw-root.scw-sidebar-mode #scw-bubble { display:none; }
  #scw-root.scw-sidebar-mode #scw-panel { bottom:68px; }
  .scw-sidebar-badge { position:absolute;top:-5px;right:-6px;min-width:16px;height:16px;padding:0 4px;border-radius:10px;background:#ef4444;color:#fff;align-items:center;justify-content:center;font-size:9px;line-height:16px; }
  @media(max-width:640px){#scw-root.scw-sidebar-mode{right:12px;bottom:calc(88px + env(safe-area-inset-bottom,0px));z-index:10040}#scw-root.scw-sidebar-mode #scw-panel{bottom:0;width:calc(100vw - 24px);max-width:calc(100vw - 24px);height:min(520px,calc(100dvh - 160px));max-height:calc(100dvh - 160px)}}