/* =========================================================
   AI CHAT WIDGET — fully namespaced styles.
   - No selector here touches `body`, `html`, or any bare
     element/class that isn't prefixed with ai- / #ai-.
   - All custom colors are CSS variables scoped to
     #ai-widget-root only (not :root), so they can never
     leak into or clash with the host site's own variables.
   ========================================================= */

#ai-widget-root {
  --ai-bg: #0a0e15;
  --ai-panel: #0e1420;
  --ai-card: #131a26;
  --ai-border: #22303f;
  --ai-text: #cbd3dc;
  --ai-text-dim: #6f7c8c;
  --ai-accent: #2dd9b8;
  --ai-accent-dark: #17b89a;
  --ai-bubble-bot: #171f2c;
  all: initial; /* isolate from host page's inherited text styles */
}
#ai-widget-root,
#ai-widget-root * {
  box-sizing: border-box;
  font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ---- Launcher: fixed size circular icon button, never resizes ---- */
#ai-launcher {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--ai-card);
  border: 1.5px solid var(--ai-accent);
  color: var(--ai-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(0,0,0,0.45), 0 0 14px rgba(45,217,184,0.3);
  z-index: 2147483000;
  transition: box-shadow 0.2s ease, transform 0.15s ease;
  padding: 0;
}
#ai-launcher:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(0,0,0,0.5), 0 0 20px rgba(45,217,184,0.5);
}
#ai-launcher svg { width: 22px; height: 22px; }
#ai-launcher.ai-hacker-launcher {
  border-color: #2dd9b8;
  color: #2dd9b8;
  box-shadow: 0 4px 18px rgba(0,0,0,0.45), 0 0 20px rgba(45,217,184,0.55);
}

/* ---- Panel: fixed size/position in both modes, nothing shifts ---- */
#ai-panel {
  position: fixed;
  bottom: 92px;
  right: 24px;
  width: 340px;
  max-width: 90vw;
  height: 460px;
  background: var(--ai-panel);
  border: 1px solid var(--ai-border);
  border-radius: 16px;
  box-shadow: 0 16px 44px rgba(0,0,0,0.5), 0 0 22px rgba(45,217,184,0.12);
  display: none;
  flex-direction: column;
  overflow: hidden;
  font-size: 14px;
  z-index: 2147483000;
}
#ai-panel.ai-open { display: flex; }

/* ---- Header: one fixed-height row in both modes ---- */
#ai-header {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 50px;
  padding: 0 14px;
  background: var(--ai-card);
  border-bottom: 1px solid var(--ai-border);
  flex-shrink: 0;
}
#ai-title {
  font-family: "SFMono-Regular", Consolas, "Courier New", monospace;
  color: var(--ai-accent);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.2px;
  white-space: nowrap;
}
#ai-mode-toggle {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
  margin-left: auto;
}
.ai-mode-btn {
  border: 1px solid var(--ai-border);
  background: transparent;
  color: var(--ai-text-dim);
  padding: 5px 11px;
  border-radius: 20px;
  font-size: 11.5px;
  font-family: "SFMono-Regular", Consolas, "Courier New", monospace;
  cursor: pointer;
  transition: all 0.15s ease;
}
.ai-mode-btn.ai-active {
  background: var(--ai-accent);
  color: #06110e;
  font-weight: 700;
  border-color: var(--ai-accent);
}

/* ---- Messages ---- */
#ai-messages {
  flex: 1;
  padding: 14px;
  overflow-y: auto;
  background: var(--ai-bg);
  color: var(--ai-text);
}
.ai-msg {
  max-width: 82%;
  padding: 9px 13px;
  border-radius: 10px;
  margin-bottom: 9px;
  line-height: 1.45;
  word-wrap: break-word;
  white-space: pre-wrap;
  font-size: 13.5px;
}
.ai-msg.ai-user {
  background: var(--ai-accent);
  color: #06110e;
  font-weight: 500;
  margin-left: auto;
  border-bottom-right-radius: 2px;
}
.ai-msg.ai-bot {
  background: var(--ai-bubble-bot);
  color: var(--ai-text);
  border: 1px solid var(--ai-border);
  margin-right: auto;
  border-bottom-left-radius: 2px;
}
.ai-msg.ai-bot::before {
  content: attr(data-prefix);
  display: block;
  font-family: "SFMono-Regular", Consolas, "Courier New", monospace;
  font-size: 10.5px;
  color: var(--ai-accent);
  opacity: 0.7;
  margin-bottom: 3px;
}
.ai-msg.ai-user::before {
  content: attr(data-prefix);
  display: block;
  font-family: "SFMono-Regular", Consolas, "Courier New", monospace;
  font-size: 10.5px;
  color: #06110e;
  opacity: 0.6;
  margin-bottom: 3px;
}

/* ---- Input row ---- */
#ai-input-row {
  display: flex;
  height: 50px;
  flex-shrink: 0;
  border-top: 1px solid var(--ai-border);
  background: var(--ai-card);
}
#ai-input {
  flex: 1;
  border: none;
  padding: 0 14px;
  font-size: 13.5px;
  outline: none;
  background: transparent;
  color: var(--ai-text);
}
#ai-input::placeholder { color: var(--ai-text-dim); }
#ai-send {
  border: none;
  background: var(--ai-accent);
  color: #06110e;
  font-weight: 700;
  font-size: 13px;
  padding: 0 18px;
  cursor: pointer;
  transition: background 0.15s ease;
}
#ai-send:hover { background: var(--ai-accent-dark); }

/* =========================================================
   MY AI variant — same structure/sizes as Gen AI (nothing
   shifts on switch), only colors/fonts/extra flourish differ.
   ========================================================= */
#ai-panel.ai-hacker-theme {
  box-shadow: 0 16px 44px rgba(0,0,0,0.55), 0 0 28px rgba(45,217,184,0.2);
  overflow: hidden;
}
#ai-panel.ai-hacker-theme::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  background: repeating-linear-gradient(
    to bottom,
    rgba(45,217,184,0.05) 0px,
    rgba(45,217,184,0.05) 1px,
    transparent 1px,
    transparent 3px
  );
}
#ai-panel.ai-hacker-theme #ai-header {
  background: #131a24;
  border-bottom: 1px solid #232d3a;
}
#ai-panel.ai-hacker-theme #ai-dots { display: flex; }
#ai-panel.ai-hacker-theme #ai-title {
  text-shadow: 0 0 6px var(--ai-accent);
}
#ai-panel.ai-hacker-theme #ai-title::after {
  content: "_";
  animation: ai-blink-cursor 1s steps(1) infinite;
}
@keyframes ai-blink-cursor {
  50% { opacity: 0; }
}
#ai-panel.ai-hacker-theme #ai-messages {
  background: #0d1117;
}
#ai-panel.ai-hacker-theme #ai-messages,
#ai-panel.ai-hacker-theme #ai-input {
  font-family: "SFMono-Regular", Consolas, "Courier New", monospace;
}
#ai-panel.ai-hacker-theme .ai-msg {
  text-shadow: 0 0 3px currentColor;
}
#ai-panel.ai-hacker-theme .ai-msg.ai-bot {
  background: #161d29;
  border: 1px solid rgba(45,217,184,0.3);
}
#ai-panel.ai-hacker-theme .ai-msg.ai-user {
  border: 1px solid rgba(45,217,184,0.45);
}
#ai-panel.ai-hacker-theme #ai-input-row {
  background: #131a24;
  border-top: 1px solid #232d3a;
}
#ai-panel.ai-hacker-theme #ai-input {
  caret-color: var(--ai-accent);
  text-shadow: 0 0 4px var(--ai-accent);
}
#ai-panel.ai-hacker-theme #ai-input::placeholder {
  color: #4a5b68;
}
#ai-panel.ai-hacker-theme #ai-send {
  box-shadow: 0 0 10px rgba(45,217,184,0.6);
}

/* ---- Mac-style title dots — reserved space, hidden for Gen AI ---- */
#ai-dots {
  display: none;
  align-items: center;
  gap: 5px;
  margin-right: 8px;
  flex-shrink: 0;
}
.ai-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.ai-dot.ai-red { background: #ff5f57; }
.ai-dot.ai-yellow { background: #febc2e; }
.ai-dot.ai-green { background: #28c840; }