/* Dark theme + custom brand + ajustes de layout */
:root {
  --sf-bg: #0b1220;
  --sf-card: #0f172a;
  --sf-text: #e5e7eb;
  --sf-muted: #9ca3af;
  --sf-border: #283042;
}

.sf-launcher{
  position: fixed; bottom: 20px;
  background: var(--sf-card); color: var(--sf-text);
  border: 1px solid var(--sf-border); border-radius: 999px;
  padding: 12px 16px; font: 15px/1.2 system-ui, Arial, sans-serif;
  box-shadow:0 8px 24px rgba(0,0,0,.4);
  cursor: pointer; z-index: 99998;
  left: 20px;
}

.sf-panel{
  position: fixed; bottom: 84px;
  width: 360px; max-height: 70vh; display: none;
  border:1px solid var(--sf-border); border-radius:14px; overflow:hidden; background: var(--sf-card);
  box-shadow:0 12px 36px rgba(0,0,0,.45); z-index:99999;
  left: 20px;
}
.sf-panel.open{ display:block; }

@media (max-width: 640px){
  .sf-launcher{ bottom: 90px !important; left: 12px; }
  .sf-panel{ bottom: 160px !important; left: 8px; right: 8px; width: auto; max-width: 100vw; }
}

.sf-header{
  padding:12px 14px; color:#fff; display:flex; align-items:center; justify-content:space-between;
  background: #0f172a;
}
.sf-head-left{ display:flex; gap:10px; align-items:center; }
.sf-avatar{ width:32px; height:32px; border-radius:50%; object-fit:cover; background:#fff }
.sf-head-txt{ display:flex; flex-direction:column; justify-content:center; }
.sf-head-txt .sf-title{ font-weight:700; color: #fff }
.sf-head-txt .sf-sub{ font-size:12px; color: var(--sf-muted) }
.sf-close{ background:transparent; color:#fff; border:0; font-size:24px; cursor:pointer; padding:4px 8px }

.sf-window{ height:46vh; overflow:auto; padding:12px; background: var(--sf-bg); color: var(--sf-text); }
.sf-msg{ padding:10px 12px; border-radius:10px; margin:8px 0; white-space:pre-wrap; word-wrap:break-word; border:1px solid var(--sf-border) }
.sf-msg.user{ background:#132036; margin-left:20% }
.sf-msg.assistant{ background:#0e1526; margin-right:20% }

.sf-form{ display:flex; gap:8px; border-top:1px solid var(--sf-border); padding:8px; background: var(--sf-card) }
.sf-form textarea{ flex:1; resize:vertical; padding:10px; border:1px solid var(--sf-border); border-radius:8px; background: var(--sf-bg); color: var(--sf-text) }
.sf-form button{ padding:10px 16px; border:0; border-radius:8px; background:#111827; color:#fff; cursor:pointer }
.sf-form button:hover{ opacity:.92 }

.sf-chat.sf-embed{
  max-width:720px;margin:16px auto;border:1px solid var(--sf-border);border-radius:12px;overflow:hidden;
  font:16px/1.5 system-ui, Arial, sans-serif;background:var(--sf-card);box-shadow:0 4px 18px rgba(0,0,0,.35); color: var(--sf-text)
}
.sf-chat.sf-embed .sf-window{ height:440px; overflow:auto; padding:16px; background: var(--sf-bg); color: var(--sf-text) }
.sf-chat.sf-embed .sf-msg{ padding:10px 12px; border-radius:10px; margin:8px 0; white-space:pre-wrap; word-wrap:break-word; border:1px solid var(--sf-border) }
.sf-chat.sf-embed .sf-msg.user{ background:#132036; margin-left:20% }
.sf-chat.sf-embed .sf-msg.assistant{ background:#0e1526; margin-right:20% }
.sf-chat.sf-embed .sf-form{ display:flex; gap:8px; border-top:1px solid var(--sf-border); padding:8px; background: var(--sf-card) }
.sf-chat.sf-embed .sf-form textarea{ flex:1; resize:vertical; padding:10px; border:1px solid var(--sf-border); border-radius:8px; background: var(--sf-bg); color: var(--sf-text) }
.sf-chat.sf-embed .sf-form button{ padding:10px 16px; border:0; border-radius:8px; background:#111827; color:#fff; cursor:pointer }
.sf-chat.sf-embed .sf-form button:hover{ opacity:.92 }