/* SixSigmaTraders support chat widget — dark-fintech, mobile-first (spec §1.8).
   Inherits global theme tokens (--bg-surface, --accent-green, etc.). */

#sst-chat-root { position: fixed; bottom: 0; right: 0; z-index: 9999; font-family: var(--font-body, sans-serif); }

#sst-chat-bubble {
  position: fixed; bottom: 20px; right: 20px;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--accent-green, #00d4aa); color: #050810;
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-lift, 0 8px 24px rgba(0,0,0,0.45));
  transition: transform 0.15s ease;
}
#sst-chat-bubble:hover { transform: scale(1.06); }
#sst-chat-bubble:focus-visible { outline: none; box-shadow: var(--ring-focus, 0 0 0 3px rgba(0,212,170,0.25)); }

#sst-chat-panel {
  position: fixed; bottom: 88px; right: 20px;
  width: 360px; max-width: calc(100vw - 40px); height: 520px; max-height: calc(100vh - 120px);
  background: var(--bg-surface, #15171C);
  border: 1px solid var(--border-subtle, #2A2D35);
  border-radius: var(--radius-lg, 16px);
  box-shadow: var(--shadow-lift, 0 8px 24px rgba(0,0,0,0.45));
  display: flex; flex-direction: column; overflow: hidden;
}
#sst-chat-panel[hidden] { display: none; }

#sst-chat-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--border-subtle, #2A2D35);
  font-family: var(--font-display, monospace); font-weight: 700; font-size: 0.95rem;
  color: var(--text-primary, #fff); background: var(--bg-elevated, #1C1E24);
}
#sst-chat-close { background: none; border: none; color: var(--text-secondary, #9CA3AF); font-size: 1.5rem; line-height: 1; cursor: pointer; padding: 0 4px; }
#sst-chat-close:hover { color: var(--text-primary, #fff); }

#sst-chat-log { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; }

.sst-chat-msg { max-width: 85%; padding: 10px 13px; border-radius: 12px; font-size: 0.9rem; line-height: 1.45; word-wrap: break-word; }
.sst-chat-bot { align-self: flex-start; background: var(--bg-elevated, #1C1E24); color: var(--text-primary, #f0f6fc); border-bottom-left-radius: 4px; }
.sst-chat-user { align-self: flex-end; background: var(--accent-green, #00d4aa); color: #050810; border-bottom-right-radius: 4px; }
.sst-chat-bot a { color: var(--accent-green, #00d4aa); }

#sst-chat-form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--border-subtle, #2A2D35); }
#sst-chat-input {
  flex: 1; padding: 10px 12px; font-size: 16px; /* 16px stops iOS zoom (lesson #8) */
  background: var(--bg-base, #0E0F12); color: var(--text-primary, #fff);
  border: 1px solid var(--border-subtle, #2A2D35); border-radius: var(--radius-md, 10px);
}
#sst-chat-input:focus { outline: none; border-color: var(--accent-green, #00d4aa); }
#sst-chat-form button {
  padding: 10px 16px; background: var(--accent-green, #00d4aa); color: #050810;
  border: none; border-radius: var(--radius-md, 10px); font-weight: 700; cursor: pointer; font-size: 0.9rem;
}

/* Mobile: full-width bottom sheet, big tap targets, safe-area (lesson #8) */
@media (max-width: 600px) {
  #sst-chat-panel {
    bottom: 0; right: 0; left: 0; width: 100%; max-width: 100%;
    height: 85vh; max-height: 85vh; border-radius: 16px 16px 0 0;
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  #sst-chat-bubble { bottom: 16px; right: 16px; width: 52px; height: 52px; }
  #sst-chat-form button, #sst-chat-close { min-height: 44px; min-width: 44px; }
}