/**
 * UNIFIED WIDGET - THEME ADAPTATIONS
 * Makes the support widget match System 3046 or Pip-Boy aesthetics
 * 
 * Auto-detects theme from:
 * - body.system-3046 → System 3046 (Sci-Fi / Cyberpunk)
 * - body.pip-boy-theme, [data-theme="pip-boy"] → Pip-Boy (Retro Terminal)
 */

/* =========================================
   SYSTEM 3046 // THE FLIGHT DECK
   Sci-Fi Cyberpunk Aesthetic
   ========================================= */

body.system-3046 .unified-widget-fab,
.system-3046 .unified-widget-fab {
  background: linear-gradient(
    135deg,
    var(--neon-cyan, #00f0ff),
    var(--neon-magenta, #ff2a6d)
  );
  border: 2px solid var(--neon-cyan, #00f0ff);
  box-shadow:
    0 0 20px rgba(0, 240, 255, 0.5),
    0 0 40px rgba(0, 240, 255, 0.2),
    inset 0 0 10px rgba(0, 240, 255, 0.3);
  clip-path: polygon(15% 0, 100% 0, 100% 85%, 85% 100%, 0 100%, 0 15%);
  border-radius: 0;
}

body.system-3046 .unified-widget-fab:hover,
.system-3046 .unified-widget-fab:hover {
  box-shadow:
    0 0 30px rgba(0, 240, 255, 0.7),
    0 0 60px rgba(0, 240, 255, 0.4),
    0 0 80px rgba(255, 42, 109, 0.3);
  transform: scale(1.1);
}

body.system-3046 .unified-widget-fab-badge,
.system-3046 .unified-widget-fab-badge {
  background: var(--neon-danger, #ff2a6d);
  box-shadow: 0 0 10px rgba(255, 42, 109, 0.8);
  clip-path: polygon(10% 0, 100% 0, 100% 90%, 90% 100%, 0 100%, 0 10%);
  border-radius: 0;
}

body.system-3046 .unified-widget,
.system-3046 .unified-widget {
  background: rgba(5, 5, 5, 0.95);
  backdrop-filter: blur(20px) saturate(180%);
  border: 2px solid var(--neon-cyan, #00f0ff);
  border-radius: 0;
  clip-path: polygon(
    20px 0,
    100% 0,
    100% calc(100% - 20px),
    calc(100% - 20px) 100%,
    0 100%,
    0 20px
  );
  box-shadow:
    0 0 30px rgba(0, 240, 255, 0.3),
    0 0 60px rgba(0, 240, 255, 0.1),
    inset 0 1px 0 rgba(0, 240, 255, 0.2);
}

/* 3046 Header */
body.system-3046 .unified-widget-header,
.system-3046 .unified-widget-header {
  background: linear-gradient(
    135deg,
    rgba(0, 240, 255, 0.15),
    rgba(255, 42, 109, 0.05)
  );
  border-bottom: 2px solid var(--neon-cyan, #00f0ff);
  position: relative;
}

body.system-3046 .unified-widget-header::before,
.system-3046 .unified-widget-header::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(
    180deg,
    var(--neon-cyan, #00f0ff),
    var(--neon-magenta, #ff2a6d)
  );
  box-shadow: 0 0 15px rgba(0, 240, 255, 0.8);
}

body.system-3046 .unified-widget-header h2,
.system-3046 .unified-widget-header h2 {
  font-family: "Space Mono", "Orbitron", monospace;
  color: var(--neon-cyan, #00f0ff);
  text-shadow: 0 0 10px rgba(0, 240, 255, 0.8);
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* 3046 Tabs */
body.system-3046 .unified-widget-tabs,
.system-3046 .unified-widget-tabs {
  background: rgba(0, 15, 30, 0.8);
  border-bottom: 1px solid rgba(0, 240, 255, 0.2);
}

body.system-3046 .unified-widget-tab,
.system-3046 .unified-widget-tab {
  font-family: "Space Mono", monospace;
  color: var(--text-muted, #6b7a8f);
  border-radius: 0;
  clip-path: polygon(
    8px 0,
    100% 0,
    100% calc(100% - 8px),
    calc(100% - 8px) 100%,
    0 100%,
    0 8px
  );
  transition: all 0.3s ease;
}

body.system-3046 .unified-widget-tab:hover,
.system-3046 .unified-widget-tab:hover {
  background: rgba(0, 240, 255, 0.1);
  color: var(--neon-cyan, #00f0ff);
}

body.system-3046 .unified-widget-tab.active,
.system-3046 .unified-widget-tab.active {
  background: rgba(0, 240, 255, 0.15);
  color: var(--neon-cyan, #00f0ff);
  border: 1px solid var(--neon-cyan, #00f0ff);
  box-shadow: 0 0 15px rgba(0, 240, 255, 0.3);
}

/* 3046 Content Area */
body.system-3046 .unified-widget-content,
.system-3046 .unified-widget-content {
  background: linear-gradient(
    180deg,
    rgba(5, 5, 5, 0.95),
    rgba(0, 15, 30, 0.9)
  );
}

/* 3046 Chat Messages */
body.system-3046 .support-chat-messages,
.system-3046 .support-chat-messages {
  background: rgba(0, 10, 20, 0.8);
  border: 1px solid rgba(0, 240, 255, 0.15);
  border-radius: 0;
  clip-path: polygon(
    10px 0,
    100% 0,
    100% calc(100% - 10px),
    calc(100% - 10px) 100%,
    0 100%,
    0 10px
  );
}

body.system-3046 .user-message,
.system-3046 .user-message {
  background: linear-gradient(
    135deg,
    rgba(0, 240, 255, 0.2),
    rgba(0, 150, 200, 0.15)
  );
  border: 1px solid rgba(0, 240, 255, 0.4);
  border-radius: 0;
  clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%, 0 10px);
}

body.system-3046 .bot-message,
.system-3046 .bot-message {
  background: rgba(20, 30, 40, 0.8);
  border: 1px solid rgba(255, 42, 109, 0.3);
  border-radius: 0;
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - 10px),
    calc(100% - 10px) 100%,
    0 100%
  );
}

body.system-3046 .bot-message .message-avatar,
.system-3046 .bot-message .message-avatar {
  background: linear-gradient(
    135deg,
    var(--neon-magenta, #ff2a6d),
    var(--neon-cyan, #00f0ff)
  );
  box-shadow: 0 0 10px rgba(255, 42, 109, 0.5);
}

body.system-3046 .user-message .message-avatar,
.system-3046 .user-message .message-avatar {
  background: linear-gradient(135deg, var(--neon-cyan, #00f0ff), #0080ff);
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.5);
}

body.system-3046 .message-sender,
.system-3046 .message-sender {
  font-family: "Space Mono", monospace;
  color: var(--neon-cyan, #00f0ff);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.75rem;
}

body.system-3046 .message-time,
.system-3046 .message-time {
  font-family: "Space Mono", monospace;
  color: var(--text-muted, #6b7a8f);
}

body.system-3046 .message-content,
.system-3046 .message-content {
  font-family: "Inter", "Rajdhani", sans-serif;
  color: var(--text-main, #e0e6ed);
  line-height: 1.6;
}

/* 3046 Suggested Questions */
body.system-3046 .suggested-questions,
.system-3046 .suggested-questions {
  background: rgba(0, 15, 30, 0.6);
  border: 1px solid rgba(0, 240, 255, 0.2);
  border-radius: 0;
  clip-path: polygon(
    10px 0,
    100% 0,
    100% calc(100% - 10px),
    calc(100% - 10px) 100%,
    0 100%,
    0 10px
  );
}

body.system-3046 .suggested-questions-label,
.system-3046 .suggested-questions-label {
  font-family: "Space Mono", monospace;
  color: var(--neon-cyan, #00f0ff);
  text-transform: uppercase;
  letter-spacing: 2px;
}

body.system-3046 .suggested-question-btn,
.system-3046 .suggested-question-btn {
  background: rgba(0, 240, 255, 0.05);
  border: 1px solid rgba(0, 240, 255, 0.2);
  color: var(--text-main, #e0e6ed);
  border-radius: 0;
  clip-path: polygon(
    5px 0,
    100% 0,
    100% calc(100% - 5px),
    calc(100% - 5px) 100%,
    0 100%,
    0 5px
  );
  font-family: "Inter", sans-serif;
}

body.system-3046 .suggested-question-btn:hover,
.system-3046 .suggested-question-btn:hover {
  background: rgba(0, 240, 255, 0.15);
  border-color: var(--neon-cyan, #00f0ff);
  color: var(--neon-cyan, #00f0ff);
  box-shadow: 0 0 15px rgba(0, 240, 255, 0.3);
}

/* 3046 Input Area */
body.system-3046 .support-chat-input,
.system-3046 .support-chat-input {
  background: rgba(0, 10, 20, 0.9);
  border: 1px solid rgba(0, 240, 255, 0.3);
  color: var(--text-main, #e0e6ed);
  font-family: "Inter", sans-serif;
  border-radius: 0;
  clip-path: polygon(
    8px 0,
    100% 0,
    100% calc(100% - 8px),
    calc(100% - 8px) 100%,
    0 100%,
    0 8px
  );
}

body.system-3046 .support-chat-input:focus,
.system-3046 .support-chat-input:focus {
  border-color: var(--neon-cyan, #00f0ff);
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.3);
  outline: none;
}

body.system-3046 .support-chat-input::placeholder,
.system-3046 .support-chat-input::placeholder {
  color: var(--text-muted, #6b7a8f);
}

body.system-3046 .support-chat-send,
.system-3046 .support-chat-send {
  background: linear-gradient(
    135deg,
    var(--neon-cyan, #00f0ff),
    var(--neon-magenta, #ff2a6d)
  );
  border: none;
  color: #000;
  font-family: "Space Mono", monospace;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  border-radius: 0;
  clip-path: polygon(
    10px 0,
    100% 0,
    100% calc(100% - 10px),
    calc(100% - 10px) 100%,
    0 100%,
    0 10px
  );
  box-shadow: 0 0 15px rgba(0, 240, 255, 0.4);
}

body.system-3046 .support-chat-send:hover,
.system-3046 .support-chat-send:hover {
  box-shadow:
    0 0 25px rgba(0, 240, 255, 0.6),
    0 0 40px rgba(255, 42, 109, 0.3);
  transform: scale(1.02);
}

body.system-3046 .support-chat-clear,
.system-3046 .support-chat-clear {
  background: rgba(0, 10, 20, 0.8);
  border: 1px solid rgba(255, 42, 109, 0.3);
  color: var(--neon-danger, #ff2a6d);
  border-radius: 0;
  clip-path: polygon(
    5px 0,
    100% 0,
    100% calc(100% - 5px),
    calc(100% - 5px) 100%,
    0 100%,
    0 5px
  );
}

body.system-3046 .support-chat-clear:hover,
.system-3046 .support-chat-clear:hover {
  background: rgba(255, 42, 109, 0.2);
  border-color: var(--neon-danger, #ff2a6d);
  box-shadow: 0 0 15px rgba(255, 42, 109, 0.4);
}

/* 3046 Typing Indicator */
body.system-3046 .typing-indicator span,
.system-3046 .typing-indicator span {
  background: var(--neon-cyan, #00f0ff);
  box-shadow: 0 0 8px rgba(0, 240, 255, 0.8);
}

/* 3046 LLM Badge */
body.system-3046 .llm-badge,
.system-3046 .llm-badge {
  background: linear-gradient(
    135deg,
    rgba(255, 42, 109, 0.2),
    rgba(157, 78, 221, 0.2)
  );
  border: 1px solid rgba(157, 78, 221, 0.5);
  color: #9d4edd;
  padding: 2px 6px;
  font-family: "Space Mono", monospace;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* 3046 Scrollbar */
body.system-3046 .support-chat-messages::-webkit-scrollbar,
.system-3046 .support-chat-messages::-webkit-scrollbar {
  width: 8px;
}

body.system-3046 .support-chat-messages::-webkit-scrollbar-track,
.system-3046 .support-chat-messages::-webkit-scrollbar-track {
  background: rgba(0, 10, 20, 0.5);
}

body.system-3046 .support-chat-messages::-webkit-scrollbar-thumb,
.system-3046 .support-chat-messages::-webkit-scrollbar-thumb {
  background: var(--neon-cyan, #00f0ff);
  border-radius: 0;
}

/* =========================================
   PIP-BOY // RETRO TERMINAL
   Fallout-inspired CRT Monitor Aesthetic
   ========================================= */

body.pip-boy-theme .unified-widget-fab,
[data-theme="pip-boy"] .unified-widget-fab,
.pip-boy .unified-widget-fab {
  background: var(--pip-bg, #050a05);
  border: 2px solid var(--pip-green, #1aff1a);
  box-shadow:
    var(--pip-glow, 0 0 10px rgba(26, 255, 26, 0.7)),
    inset 0 0 20px rgba(26, 255, 26, 0.1);
  border-radius: 0;
}

body.pip-boy-theme .unified-widget-fab:hover,
[data-theme="pip-boy"] .unified-widget-fab:hover,
.pip-boy .unified-widget-fab:hover {
  box-shadow:
    0 0 20px rgba(26, 255, 26, 0.9),
    0 0 40px rgba(26, 255, 26, 0.5),
    inset 0 0 30px rgba(26, 255, 26, 0.2);
}

body.pip-boy-theme .unified-widget-fab-badge,
[data-theme="pip-boy"] .unified-widget-fab-badge,
.pip-boy .unified-widget-fab-badge {
  background: var(--pip-crimson, #ff3333);
  box-shadow: var(--pip-crimson-glow, 0 0 8px rgba(255, 51, 51, 0.8));
  border-radius: 0;
}

body.pip-boy-theme .unified-widget,
[data-theme="pip-boy"] .unified-widget,
.pip-boy .unified-widget {
  background: var(--pip-bg, #050a05);
  border: 2px solid var(--pip-green, #1aff1a);
  border-radius: 0;
  box-shadow:
    var(--pip-glow, 0 0 10px rgba(26, 255, 26, 0.7)),
    inset 0 0 30px rgba(26, 255, 26, 0.05);
}

/* Pip-Boy Scanlines Effect */
body.pip-boy-theme .unified-widget::before,
[data-theme="pip-boy"] .unified-widget::before,
.pip-boy .unified-widget::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.15) 2px,
    rgba(0, 0, 0, 0.15) 4px
  );
  pointer-events: none;
  z-index: 1000;
}

/* Pip-Boy Header */
body.pip-boy-theme .unified-widget-header,
[data-theme="pip-boy"] .unified-widget-header,
.pip-boy .unified-widget-header {
  background: transparent;
  border-bottom: 2px solid var(--pip-green, #1aff1a);
  position: relative;
}

body.pip-boy-theme .unified-widget-header::after,
[data-theme="pip-boy"] .unified-widget-header::after,
.pip-boy .unified-widget-header::after {
  content: "[ SUPPORT TERMINAL ]";
  position: absolute;
  right: 60px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--pip-font, "VT323", monospace);
  font-size: 0.7rem;
  color: var(--pip-dim, #0f4d0f);
  letter-spacing: 2px;
}

body.pip-boy-theme .unified-widget-header h2,
[data-theme="pip-boy"] .unified-widget-header h2,
.pip-boy .unified-widget-header h2 {
  font-family: var(--pip-font, "VT323", monospace);
  color: var(--pip-green, #1aff1a);
  text-shadow: var(--pip-text-glow, 0 0 8px rgba(26, 255, 26, 0.8));
  letter-spacing: 3px;
  text-transform: uppercase;
  font-size: 1.3rem;
}

body.pip-boy-theme .unified-widget-close,
[data-theme="pip-boy"] .unified-widget-close,
.pip-boy .unified-widget-close {
  color: var(--pip-green, #1aff1a);
  text-shadow: var(--pip-glow, 0 0 10px rgba(26, 255, 26, 0.7));
}

body.pip-boy-theme .unified-widget-close:hover,
[data-theme="pip-boy"] .unified-widget-close:hover,
.pip-boy .unified-widget-close:hover {
  color: var(--pip-amber, #ffb000);
  text-shadow: var(--pip-amber-glow, 0 0 8px rgba(255, 176, 0, 0.8));
}

/* Pip-Boy Tabs */
body.pip-boy-theme .unified-widget-tabs,
[data-theme="pip-boy"] .unified-widget-tabs,
.pip-boy .unified-widget-tabs {
  background: rgba(26, 255, 26, 0.03);
  border-bottom: 1px solid var(--pip-dim, #0f4d0f);
}

body.pip-boy-theme .unified-widget-tab,
[data-theme="pip-boy"] .unified-widget-tab,
.pip-boy .unified-widget-tab {
  font-family: var(--pip-font, "VT323", monospace);
  color: var(--pip-dim, #0f4d0f);
  border-radius: 0;
  font-size: 1.1rem;
  letter-spacing: 1px;
}

body.pip-boy-theme .unified-widget-tab:hover,
[data-theme="pip-boy"] .unified-widget-tab:hover,
.pip-boy .unified-widget-tab:hover {
  background: rgba(26, 255, 26, 0.1);
  color: var(--pip-green, #1aff1a);
  text-shadow: var(--pip-text-glow, 0 0 8px rgba(26, 255, 26, 0.8));
}

body.pip-boy-theme .unified-widget-tab.active,
[data-theme="pip-boy"] .unified-widget-tab.active,
.pip-boy .unified-widget-tab.active {
  background: rgba(26, 255, 26, 0.15);
  color: var(--pip-green, #1aff1a);
  border: 1px solid var(--pip-green, #1aff1a);
  text-shadow: var(--pip-text-glow, 0 0 8px rgba(26, 255, 26, 0.8));
  box-shadow: var(--pip-glow, 0 0 10px rgba(26, 255, 26, 0.7));
}

/* Pip-Boy Content Area */
body.pip-boy-theme .unified-widget-content,
[data-theme="pip-boy"] .unified-widget-content,
.pip-boy .unified-widget-content {
  background: transparent;
}

/* Pip-Boy Chat Messages */
body.pip-boy-theme .support-chat-messages,
[data-theme="pip-boy"] .support-chat-messages,
.pip-boy .support-chat-messages {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--pip-dim, #0f4d0f);
  border-radius: 0;
}

body.pip-boy-theme .user-message,
[data-theme="pip-boy"] .user-message,
.pip-boy .user-message {
  background: rgba(26, 255, 26, 0.1);
  border: 1px solid var(--pip-green, #1aff1a);
  border-radius: 0;
}

body.pip-boy-theme .bot-message,
[data-theme="pip-boy"] .bot-message,
.pip-boy .bot-message {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--pip-dim, #0f4d0f);
  border-radius: 0;
}

body.pip-boy-theme .message-avatar,
[data-theme="pip-boy"] .message-avatar,
.pip-boy .message-avatar {
  background: var(--pip-bg, #050a05);
  border: 1px solid var(--pip-green, #1aff1a);
  box-shadow: var(--pip-glow, 0 0 10px rgba(26, 255, 26, 0.7));
}

body.pip-boy-theme .message-sender,
[data-theme="pip-boy"] .message-sender,
.pip-boy .message-sender {
  font-family: var(--pip-font, "VT323", monospace);
  color: var(--pip-green, #1aff1a);
  text-shadow: var(--pip-text-glow, 0 0 8px rgba(26, 255, 26, 0.8));
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 1rem;
}

body.pip-boy-theme .message-time,
[data-theme="pip-boy"] .message-time,
.pip-boy .message-time {
  font-family: var(--pip-font, "VT323", monospace);
  color: var(--pip-dim, #0f4d0f);
  font-size: 0.9rem;
}

body.pip-boy-theme .message-content,
[data-theme="pip-boy"] .message-content,
.pip-boy .message-content {
  font-family: var(--pip-font, "VT323", monospace);
  color: var(--pip-green, #1aff1a);
  text-shadow: 0 0 5px rgba(26, 255, 26, 0.5);
  font-size: 1.1rem;
  line-height: 1.5;
  letter-spacing: 0.5px;
}

body.pip-boy-theme .user-message .message-content,
[data-theme="pip-boy"] .user-message .message-content,
.pip-boy .user-message .message-content {
  color: var(--pip-green, #1aff1a);
}

/* Pip-Boy Suggested Questions */
body.pip-boy-theme .suggested-questions,
[data-theme="pip-boy"] .suggested-questions,
.pip-boy .suggested-questions {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--pip-dim, #0f4d0f);
  border-radius: 0;
}

body.pip-boy-theme .suggested-questions-label,
[data-theme="pip-boy"] .suggested-questions-label,
.pip-boy .suggested-questions-label {
  font-family: var(--pip-font, "VT323", monospace);
  color: var(--pip-amber, #ffb000);
  text-shadow: var(--pip-amber-glow, 0 0 8px rgba(255, 176, 0, 0.8));
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 1rem;
}

body.pip-boy-theme .suggested-question-btn,
[data-theme="pip-boy"] .suggested-question-btn,
.pip-boy .suggested-question-btn {
  background: transparent;
  border: 1px solid var(--pip-dim, #0f4d0f);
  color: var(--pip-dim, #0f4d0f);
  border-radius: 0;
  font-family: var(--pip-font, "VT323", monospace);
  font-size: 1rem;
  letter-spacing: 1px;
}

body.pip-boy-theme .suggested-question-btn:hover,
[data-theme="pip-boy"] .suggested-question-btn:hover,
.pip-boy .suggested-question-btn:hover {
  background: rgba(26, 255, 26, 0.1);
  border-color: var(--pip-green, #1aff1a);
  color: var(--pip-green, #1aff1a);
  text-shadow: var(--pip-text-glow, 0 0 8px rgba(26, 255, 26, 0.8));
  box-shadow: var(--pip-glow, 0 0 10px rgba(26, 255, 26, 0.7));
}

/* Pip-Boy Input Area */
body.pip-boy-theme .support-chat-input,
[data-theme="pip-boy"] .support-chat-input,
.pip-boy .support-chat-input {
  background: rgba(0, 0, 0, 0.5);
  border: 2px solid var(--pip-dim, #0f4d0f);
  color: var(--pip-green, #1aff1a);
  font-family: var(--pip-font, "VT323", monospace);
  font-size: 1.1rem;
  letter-spacing: 1px;
  border-radius: 0;
  text-shadow: 0 0 5px rgba(26, 255, 26, 0.5);
}

body.pip-boy-theme .support-chat-input:focus,
[data-theme="pip-boy"] .support-chat-input:focus,
.pip-boy .support-chat-input:focus {
  border-color: var(--pip-green, #1aff1a);
  box-shadow:
    var(--pip-glow, 0 0 10px rgba(26, 255, 26, 0.7)),
    inset 0 0 20px rgba(26, 255, 26, 0.1);
  outline: none;
}

body.pip-boy-theme .support-chat-input::placeholder,
[data-theme="pip-boy"] .support-chat-input::placeholder,
.pip-boy .support-chat-input::placeholder {
  color: var(--pip-dim, #0f4d0f);
}

body.pip-boy-theme .support-chat-send,
[data-theme="pip-boy"] .support-chat-send,
.pip-boy .support-chat-send {
  background: var(--pip-green, #1aff1a);
  border: none;
  color: var(--pip-bg, #050a05);
  font-family: var(--pip-font, "VT323", monospace);
  font-weight: normal;
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  border-radius: 0;
  box-shadow: var(--pip-glow, 0 0 10px rgba(26, 255, 26, 0.7));
}

body.pip-boy-theme .support-chat-send:hover,
[data-theme="pip-boy"] .support-chat-send:hover,
.pip-boy .support-chat-send:hover {
  background: var(--pip-amber, #ffb000);
  color: var(--pip-bg, #050a05);
  box-shadow: var(--pip-amber-glow, 0 0 8px rgba(255, 176, 0, 0.8));
}

body.pip-boy-theme .support-chat-clear,
[data-theme="pip-boy"] .support-chat-clear,
.pip-boy .support-chat-clear {
  background: transparent;
  border: 1px solid var(--pip-crimson, #ff3333);
  color: var(--pip-crimson, #ff3333);
  border-radius: 0;
}

body.pip-boy-theme .support-chat-clear:hover,
[data-theme="pip-boy"] .support-chat-clear:hover,
.pip-boy .support-chat-clear:hover {
  background: rgba(255, 51, 51, 0.2);
  box-shadow: var(--pip-crimson-glow, 0 0 8px rgba(255, 51, 51, 0.8));
}

/* Pip-Boy Typing Indicator */
body.pip-boy-theme .typing-indicator span,
[data-theme="pip-boy"] .typing-indicator span,
.pip-boy .typing-indicator span {
  background: var(--pip-green, #1aff1a);
  box-shadow: var(--pip-glow, 0 0 10px rgba(26, 255, 26, 0.7));
}

/* Pip-Boy LLM Badge */
body.pip-boy-theme .llm-badge,
[data-theme="pip-boy"] .llm-badge,
.pip-boy .llm-badge {
  background: transparent;
  border: 1px solid var(--pip-amber, #ffb000);
  color: var(--pip-amber, #ffb000);
  text-shadow: var(--pip-amber-glow, 0 0 8px rgba(255, 176, 0, 0.8));
  font-family: var(--pip-font, "VT323", monospace);
  font-size: 0.8rem;
  padding: 2px 6px;
}

/* Pip-Boy Scrollbar */
body.pip-boy-theme .support-chat-messages::-webkit-scrollbar,
[data-theme="pip-boy"] .support-chat-messages::-webkit-scrollbar,
.pip-boy .support-chat-messages::-webkit-scrollbar {
  width: 8px;
}

body.pip-boy-theme .support-chat-messages::-webkit-scrollbar-track,
[data-theme="pip-boy"] .support-chat-messages::-webkit-scrollbar-track,
.pip-boy .support-chat-messages::-webkit-scrollbar-track {
  background: var(--pip-bg, #050a05);
  border: 1px solid var(--pip-dim, #0f4d0f);
}

body.pip-boy-theme .support-chat-messages::-webkit-scrollbar-thumb,
[data-theme="pip-boy"] .support-chat-messages::-webkit-scrollbar-thumb,
.pip-boy .support-chat-messages::-webkit-scrollbar-thumb {
  background: var(--pip-green, #1aff1a);
  box-shadow: var(--pip-glow, 0 0 10px rgba(26, 255, 26, 0.7));
}

/* Pip-Boy CRT Flicker Effect (optional, subtle) */
@keyframes pip-boy-flicker {
  0%,
  100% {
    opacity: 1;
  }
  92% {
    opacity: 1;
  }
  93% {
    opacity: 0.9;
  }
  94% {
    opacity: 1;
  }
}

body.pip-boy-theme .unified-widget-header h2,
[data-theme="pip-boy"] .unified-widget-header h2,
.pip-boy .unified-widget-header h2 {
  animation: pip-boy-flicker 4s ease-in-out infinite;
}

/* =========================================
   SHARED ENHANCEMENTS
   Applied to both themes
   ========================================= */

/* Smooth transitions for theme switching */
.unified-widget-fab,
.unified-widget,
.unified-widget-header,
.unified-widget-tabs,
.unified-widget-tab,
.support-chat-messages,
.user-message,
.bot-message,
.support-chat-input,
.support-chat-send {
  transition: all 0.3s ease;
}

/* Message entry animation */
@keyframes messageEnter {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.chat-message {
  animation: messageEnter 0.3s ease-out;
}

/* Focus states for accessibility */
body.system-3046 .unified-widget-tab:focus,
.system-3046 .unified-widget-tab:focus {
  outline: 2px solid var(--neon-cyan, #00f0ff);
  outline-offset: 2px;
}

body.pip-boy-theme .unified-widget-tab:focus,
[data-theme="pip-boy"] .unified-widget-tab:focus,
.pip-boy .unified-widget-tab:focus {
  outline: 2px solid var(--pip-green, #1aff1a);
  outline-offset: 2px;
}

/* =========================================
   TYPING CURSOR ANIMATIONS
   Retro terminal feel for bot messages
   ========================================= */

/* Pip-Boy: Blinking terminal cursor */
@keyframes pipBoyCursor {
  0%,
  50% {
    opacity: 1;
  }
  51%,
  100% {
    opacity: 0;
  }
}

body.pip-boy-theme .bot-message.typing::after,
[data-theme="pip-boy"] .bot-message.typing::after,
.pip-boy .bot-message.typing::after {
  content: "█";
  display: inline-block;
  color: var(--pip-green, #1aff1a);
  animation: pipBoyCursor 0.7s step-end infinite;
  text-shadow: var(--pip-glow, 0 0 10px rgba(26, 255, 26, 0.7));
  margin-left: 2px;
}

/* System 3046: Holographic cursor */
@keyframes holoCursor {
  0% {
    opacity: 0.3;
    transform: scaleY(1);
  }
  50% {
    opacity: 1;
    transform: scaleY(1.1);
  }
  100% {
    opacity: 0.3;
    transform: scaleY(1);
  }
}

body.system-3046 .bot-message.typing::after,
.system-3046 .bot-message.typing::after {
  content: "▌";
  display: inline-block;
  color: var(--neon-cyan, #00f0ff);
  animation: holoCursor 0.5s ease-in-out infinite;
  text-shadow:
    0 0 10px rgba(0, 240, 255, 0.8),
    0 0 20px rgba(0, 240, 255, 0.4);
  margin-left: 2px;
}

/* Typewriter effect for new messages */
@keyframes typewriter {
  from {
    max-width: 0;
  }
  to {
    max-width: 100%;
  }
}

body.pip-boy-theme .bot-message.new-message .message-content,
[data-theme="pip-boy"] .bot-message.new-message .message-content,
.pip-boy .bot-message.new-message .message-content {
  overflow: hidden;
  white-space: nowrap;
  animation: typewriter 0.5s steps(30) forwards;
}

/* =========================================
   CUSTOM SCROLLBARS
   Theme-matched scroll experiences
   ========================================= */

/* System 3046 Scrollbar */
body.system-3046 .support-chat-messages::-webkit-scrollbar,
.system-3046 .support-chat-messages::-webkit-scrollbar,
body.system-3046 .unified-widget-content::-webkit-scrollbar,
.system-3046 .unified-widget-content::-webkit-scrollbar {
  width: 8px;
}

body.system-3046 .support-chat-messages::-webkit-scrollbar-track,
.system-3046 .support-chat-messages::-webkit-scrollbar-track,
body.system-3046 .unified-widget-content::-webkit-scrollbar-track,
.system-3046 .unified-widget-content::-webkit-scrollbar-track {
  background: rgba(0, 15, 30, 0.5);
  border-left: 1px solid rgba(0, 240, 255, 0.1);
}

body.system-3046 .support-chat-messages::-webkit-scrollbar-thumb,
.system-3046 .support-chat-messages::-webkit-scrollbar-thumb,
body.system-3046 .unified-widget-content::-webkit-scrollbar-thumb,
.system-3046 .unified-widget-content::-webkit-scrollbar-thumb {
  background: linear-gradient(
    180deg,
    var(--neon-cyan, #00f0ff),
    var(--neon-magenta, #ff2a6d)
  );
  border-radius: 0;
  clip-path: polygon(
    0 5px,
    5px 0,
    100% 0,
    100% calc(100% - 5px),
    calc(100% - 5px) 100%,
    0 100%
  );
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.5);
}

body.system-3046 .support-chat-messages::-webkit-scrollbar-thumb:hover,
.system-3046 .support-chat-messages::-webkit-scrollbar-thumb:hover,
body.system-3046 .unified-widget-content::-webkit-scrollbar-thumb:hover,
.system-3046 .unified-widget-content::-webkit-scrollbar-thumb:hover {
  box-shadow:
    0 0 20px rgba(0, 240, 255, 0.8),
    0 0 30px rgba(255, 42, 109, 0.4);
}

/* Pip-Boy Scrollbar */
body.pip-boy-theme .support-chat-messages::-webkit-scrollbar,
[data-theme="pip-boy"] .support-chat-messages::-webkit-scrollbar,
.pip-boy .support-chat-messages::-webkit-scrollbar,
body.pip-boy-theme .unified-widget-content::-webkit-scrollbar,
[data-theme="pip-boy"] .unified-widget-content::-webkit-scrollbar,
.pip-boy .unified-widget-content::-webkit-scrollbar {
  width: 10px;
}

body.pip-boy-theme .support-chat-messages::-webkit-scrollbar-track,
[data-theme="pip-boy"] .support-chat-messages::-webkit-scrollbar-track,
.pip-boy .support-chat-messages::-webkit-scrollbar-track,
body.pip-boy-theme .unified-widget-content::-webkit-scrollbar-track,
[data-theme="pip-boy"] .unified-widget-content::-webkit-scrollbar-track,
.pip-boy .unified-widget-content::-webkit-scrollbar-track {
  background: var(--pip-bg, #050a05);
  border: 1px solid var(--pip-dim, #0f4d0f);
}

body.pip-boy-theme .support-chat-messages::-webkit-scrollbar-thumb,
[data-theme="pip-boy"] .support-chat-messages::-webkit-scrollbar-thumb,
.pip-boy .support-chat-messages::-webkit-scrollbar-thumb,
body.pip-boy-theme .unified-widget-content::-webkit-scrollbar-thumb,
[data-theme="pip-boy"] .unified-widget-content::-webkit-scrollbar-thumb,
.pip-boy .unified-widget-content::-webkit-scrollbar-thumb {
  background: var(--pip-dim, #0f4d0f);
  border: 1px solid var(--pip-green, #1aff1a);
  box-shadow: inset 0 0 5px rgba(26, 255, 26, 0.3);
}

body.pip-boy-theme .support-chat-messages::-webkit-scrollbar-thumb:hover,
[data-theme="pip-boy"] .support-chat-messages::-webkit-scrollbar-thumb:hover,
.pip-boy .support-chat-messages::-webkit-scrollbar-thumb:hover,
body.pip-boy-theme .unified-widget-content::-webkit-scrollbar-thumb:hover,
[data-theme="pip-boy"] .unified-widget-content::-webkit-scrollbar-thumb:hover,
.pip-boy .unified-widget-content::-webkit-scrollbar-thumb:hover {
  background: var(--pip-green, #1aff1a);
  box-shadow: var(--pip-glow, 0 0 10px rgba(26, 255, 26, 0.7));
}

/* =========================================
   LOADING STATES
   Themed loading indicators
   ========================================= */

/* System 3046: Holographic Spinner */
@keyframes holoSpin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes holoGlow {
  0%,
  100% {
    filter: drop-shadow(0 0 5px rgba(0, 240, 255, 0.5));
  }
  50% {
    filter: drop-shadow(0 0 20px rgba(0, 240, 255, 1))
      drop-shadow(0 0 30px rgba(255, 42, 109, 0.5));
  }
}

.support-loading.system-3046,
body.system-3046 .support-loading,
.system-3046 .support-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px;
  gap: 15px;
}

.support-loading.system-3046::before,
body.system-3046 .support-loading::before,
.system-3046 .support-loading::before {
  content: "";
  width: 50px;
  height: 50px;
  border: 3px solid transparent;
  border-top-color: var(--neon-cyan, #00f0ff);
  border-right-color: var(--neon-magenta, #ff2a6d);
  clip-path: polygon(15% 0, 100% 0, 100% 85%, 85% 100%, 0 100%, 0 15%);
  animation:
    holoSpin 1s linear infinite,
    holoGlow 2s ease-in-out infinite;
}

.support-loading.system-3046::after,
body.system-3046 .support-loading::after,
.system-3046 .support-loading::after {
  content: "ACCESSING DATASTREAM...";
  font-family: "Space Mono", monospace;
  font-size: 0.75rem;
  color: var(--neon-cyan, #00f0ff);
  text-transform: uppercase;
  letter-spacing: 3px;
  text-shadow: 0 0 10px rgba(0, 240, 255, 0.8);
  animation: holoGlow 2s ease-in-out infinite;
}

/* Pip-Boy: Terminal Text Loader */
@keyframes terminalBlink {
  0%,
  49% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0;
  }
}

@keyframes terminalDots {
  0% {
    content: "LOADING";
  }
  25% {
    content: "LOADING.";
  }
  50% {
    content: "LOADING..";
  }
  75% {
    content: "LOADING...";
  }
  100% {
    content: "LOADING";
  }
}

.support-loading.pip-boy,
body.pip-boy-theme .support-loading,
[data-theme="pip-boy"] .support-loading,
.pip-boy .support-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px;
  gap: 10px;
  font-family: var(--pip-font, "VT323", monospace);
}

.support-loading.pip-boy::before,
body.pip-boy-theme .support-loading::before,
[data-theme="pip-boy"] .support-loading::before,
.pip-boy .support-loading::before {
  content: "[ PLEASE WAIT ]";
  font-size: 1.2rem;
  color: var(--pip-green, #1aff1a);
  text-shadow: var(--pip-text-glow, 0 0 8px rgba(26, 255, 26, 0.8));
  letter-spacing: 2px;
}

.support-loading.pip-boy::after,
body.pip-boy-theme .support-loading::after,
[data-theme="pip-boy"] .support-loading::after,
.pip-boy .support-loading::after {
  content: "LOADING...";
  font-size: 1.5rem;
  color: var(--pip-green, #1aff1a);
  text-shadow: var(--pip-text-glow, 0 0 8px rgba(26, 255, 26, 0.8));
  animation: terminalBlink 0.5s step-end infinite;
}

/* Loading bar animation for Pip-Boy */
@keyframes terminalLoadBar {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}

.support-loading-bar.pip-boy,
body.pip-boy-theme .support-loading-bar,
[data-theme="pip-boy"] .support-loading-bar,
.pip-boy .support-loading-bar {
  width: 200px;
  height: 15px;
  background: var(--pip-bg, #050a05);
  border: 1px solid var(--pip-green, #1aff1a);
  position: relative;
  overflow: hidden;
}

.support-loading-bar.pip-boy::before,
body.pip-boy-theme .support-loading-bar::before,
[data-theme="pip-boy"] .support-loading-bar::before,
.pip-boy .support-loading-bar::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  height: calc(100% - 4px);
  background: var(--pip-green, #1aff1a);
  box-shadow: var(--pip-glow, 0 0 10px rgba(26, 255, 26, 0.7));
  animation: terminalLoadBar 2s ease-in-out infinite;
}

/* =========================================
   ENHANCED BUTTON ANIMATIONS
   Satisfying click feedback
   ========================================= */

/* System 3046 button press */
body.system-3046 .support-chat-send:active,
.system-3046 .support-chat-send:active,
body.system-3046 .escalation-btn:active,
.system-3046 .escalation-btn:active,
body.system-3046 .suggested-question-btn:active,
.system-3046 .suggested-question-btn:active {
  transform: scale(0.95);
  box-shadow:
    0 0 5px rgba(0, 240, 255, 0.3),
    inset 0 0 20px rgba(0, 240, 255, 0.3);
}

/* Pip-Boy button press */
body.pip-boy-theme .support-chat-send:active,
[data-theme="pip-boy"] .support-chat-send:active,
.pip-boy .support-chat-send:active,
body.pip-boy-theme .escalation-btn:active,
[data-theme="pip-boy"] .escalation-btn:active,
.pip-boy .escalation-btn:active {
  transform: scale(0.95);
  background: var(--pip-green, #1aff1a) !important;
  color: var(--pip-bg, #050a05) !important;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
}

/* =========================================
   FAB PULSE ANIMATION
   Attention-grabbing when unread
   ========================================= */

@keyframes fabPulse3046 {
  0%,
  100% {
    box-shadow:
      0 0 20px rgba(0, 240, 255, 0.5),
      0 0 40px rgba(0, 240, 255, 0.2);
  }
  50% {
    box-shadow:
      0 0 30px rgba(0, 240, 255, 0.8),
      0 0 60px rgba(0, 240, 255, 0.4),
      0 0 80px rgba(255, 42, 109, 0.3);
  }
}

@keyframes fabPulsePipBoy {
  0%,
  100% {
    box-shadow: var(--pip-glow, 0 0 10px rgba(26, 255, 26, 0.7));
  }
  50% {
    box-shadow:
      0 0 20px rgba(26, 255, 26, 1),
      0 0 40px rgba(26, 255, 26, 0.5);
  }
}

body.system-3046 .unified-widget-fab.has-unread,
.system-3046 .unified-widget-fab.has-unread {
  animation: fabPulse3046 2s ease-in-out infinite;
}

body.pip-boy-theme .unified-widget-fab.has-unread,
[data-theme="pip-boy"] .unified-widget-fab.has-unread,
.pip-boy .unified-widget-fab.has-unread {
  animation: fabPulsePipBoy 1.5s ease-in-out infinite;
}

/* =========================================
   CRT FLICKER EFFECT (Pip-Boy)
   Subtle vintage monitor feel
   ========================================= */

@keyframes crtFlicker {
  0% {
    opacity: 1;
  }
  3% {
    opacity: 0.95;
  }
  6% {
    opacity: 1;
  }
  9% {
    opacity: 0.97;
  }
  12% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

body.pip-boy-theme .unified-widget,
[data-theme="pip-boy"] .unified-widget,
.pip-boy .unified-widget {
  animation: crtFlicker 4s infinite;
}

/* =========================================
   HOLO-GRID BACKGROUND (System 3046)
   Subtle animated grid effect
   ========================================= */

@keyframes holoGridMove {
  0% {
    background-position:
      0 0,
      0 0;
  }
  100% {
    background-position:
      50px 50px,
      50px 50px;
  }
}

body.system-3046 .unified-widget-content,
.system-3046 .unified-widget-content {
  background-image:
    linear-gradient(rgba(0, 240, 255, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 240, 255, 0.02) 1px, transparent 1px);
  background-size: 25px 25px;
  animation: holoGridMove 20s linear infinite;
}