/**
 * WSA AI Interface Stylesheet
 * High-Performance, Hardware-Accelerated Glassmorphism UI
 */

:root {
  --wsa-blue: #1178cd;
  --wsa-blue-hover: #0d5ea1;
  --wsa-green: #2ec4b6;
  --wsa-red: #e71d36;
  --glass-bg: rgba(255, 255, 255, 0.88);
  --glass-border: rgba(17, 120, 205, 0.12);
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --avatar-width-desktop: min(16vw, 180px);
  --avatar-width-mobile: min(32vw, 130px);
}

/* Force strict box-sizing within widget boundaries to prevent layout bleeding on mobile */
.ai-robot-widget-fixed,
.ai-robot-widget-fixed *,
#ai-qa-slide-panel,
#ai-qa-slide-panel * {
  box-sizing: border-box !important;
}

/* Core Widget Wrapper */
.ai-robot-widget-fixed {
 position: fixed;
 bottom: 20px;
 left: 20px;
 z-index: 10000;
 display: flex;
 flex-direction: column;
 align-items: flex-start;
 pointer-events: none;
 font-family: 'Roboto', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
 transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
 backface-visibility: hidden;
 will-change: transform;
}

/* Close Widget Button */
.ai-widget-close-btn {
 position: absolute;
 top: -15px;
 left: 0px;
 background: var(--wsa-red);
 color: white;
 border: none;
 border-radius: 50%;
 width: 30px;
 height: 30px;
 cursor: pointer;
 display: flex;
 align-items: center;
 justify-content: center;
 box-shadow: 0 4px 12px rgba(231, 29, 54, 0.35);
 pointer-events: auto;
 z-index: 10005;
 transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.ai-widget-close-btn:hover {
 transform: scale(1.15) rotate(90deg);
}

/* Avatar Image Container - Quarter size of screen width with responsive caps */
.ai-avatar-image-container {
 position: relative;
 width: 16vw !important; /* Proportional scaling across standard PC layouts */
 max-width: 180px !important;
 height: auto !important;
 aspect-ratio: 220 / 380 !important;
 border-radius: 20px;
 overflow: visible;
 pointer-events: auto;
 display: flex;
 align-items: flex-end;
 justify-content: center;
 transition: none !important; /* Keep static layout locked */
}

/* Clean, Non-Shaking Static Image Representation */
.ai-avatar-img-element {
 width: 100% !important;
 height: auto !important;
 max-height: 100% !important;
 object-fit: contain !important;
 display: block !important;
 background: transparent !important;
 transform: none !important; /* Lock static frames */
 animation: none !important; /* Block wavy inline vibrations */
 transition: none !important;
 filter: drop-shadow(0 12px 24px rgba(0,0,0,0.15)) !important;
}

/* Controller Deck - Responsive matching width */
.ai-control-deck {
 display: flex;
 flex-direction: column;
 gap: 6px;
 margin-top: 8px;
 pointer-events: auto !important;
 width: 16vw !important;
 max-width: 180px !important;
 transition: none !important;
}

.ai-switches-row {
 display: flex !important;
 gap: 6px !important;
 width: 100% !important;
 align-items: center !important;
}

/* Side-by-Side Left Alignment Dropdown Container */
.ai-language-panel {
 flex: 1 !important;
 width: 50% !important;
 display: block !important;
}

/* Matched Tiny Oval Dropdown Selector */
.ai-language-panel select {
 width: 100% !important;
 height: 32px !important;
 padding: 0 14px 0 8px !important;
 border-radius: 50px !important;
 border: 1.5px solid var(--glass-border) !important;
 background: #ffffff !important;
 color: var(--wsa-blue) !important;
 font-size: 11px !important;
 font-weight: 700 !important;
 cursor: pointer !important;
 outline: none !important;
 box-shadow: 0 4px 10px rgba(17, 120, 205, 0.05) !important;
 appearance: none !important;
 -webkit-appearance: none !important;
 background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231178cd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important;
 background-repeat: no-repeat !important;
 background-position: right 8px center !important;
 background-size: 10px !important;
 text-overflow: ellipsis !important;
 white-space: nowrap !important;
}

.ai-language-panel select:hover {
 border-color: var(--wsa-blue) !important;
 background-color: #f4f8ff !important;
}

/* Matched Tiny Oval Toggle Button (Stretched & Expanded) */
.ai-oval-btn {
 width: 100% !important;
 flex: none !important;
 height: 38px !important;
 display: inline-flex !important;
 align-items: center !important;
 justify-content: center !important;
 padding: 0 16px !important;
 border-radius: 50px !important;
 border: none !important;
 font-size: 13px !important;
 font-weight: 700 !important;
 cursor: pointer !important;
 text-align: center !important;
 white-space: nowrap !important;
 box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08) !important;
 box-sizing: border-box !important;
}

/* Custom classes for manual selection toggle buttons */
.ai-lang-toggle-btn {
  background-color: #f1f5f9 !important;
  color: #475569 !important;
  border: 1px solid rgba(17, 120, 205, 0.15) !important;
  font-weight: bold !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}
.ai-lang-toggle-active {
  background-color: var(--wsa-blue) !important;
  color: #ffffff !important;
  border-color: var(--wsa-blue) !important;
  box-shadow: 0 4px 12px rgba(17, 120, 205, 0.2) !important;
}

.ai-oval-btn:active { transform: scale(0.95) !important; }
.ai-btn-blue { background-color: var(--wsa-blue) !important; color: white !important; }
.ai-btn-blue:hover {
 background-color: var(--wsa-blue-hover) !important;
 box-shadow: 0 4px 10px rgba(17, 120, 205, 0.2) !important;
}

/* Assistant Message Bubble Layout: Adds base padding for bottom-right icons */
.ai-msg-assistant {
 position: relative !important;
 background: #ffffff !important;
 color: var(--text-primary) !important;
 align-self: flex-start !important;
 border: 1px solid rgba(17, 120, 205, 0.08) !important;
 border-bottom-left-radius: 4px !important;
 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02) !important;
 padding-bottom: 40px !important; /* CRITICAL FIX: Increased base padding to fit larger mobile buttons safely */
}

/* Gemini-Style Voice and Copy Action Dock styling */
.ai-msg-actions-dock {
 position: absolute !important;
 bottom: 6px !important;
 right: 12px !important;
 display: flex !important;
 gap: 8px !important;
 align-items: center !important;
 opacity: 1 !important; 
 transition: opacity 0.2s ease !important;
 z-index: 10 !important; /* CRITICAL FIX: Forces the buttons to stay above invisible text overlays */
}

.ai-tiny-action-btn {
 background: #f1f5f9 !important; 
 border: none !important;
 cursor: pointer !important;
 padding: 0 !important;
 display: inline-flex !important;
 align-items: center !important;
 justify-content: center !important;
 outline: none !important;
 border-radius: 50% !important;
 width: 32px !important;  /* CRITICAL FIX: Increased from 22px to 32px so Mobile fingers can actually tap it reliably */
 height: 32px !important; /* CRITICAL FIX: Increased from 22px to 32px so Mobile fingers can actually tap it reliably */
 transition: background-color 0.2s, transform 0.1s !important;
}
.ai-tiny-action-btn:hover { background-color: #e2e8f0 !important; transform: scale(1.1) !important; }
.ai-tiny-action-btn svg { width: 16px !important; height: 16px !important; fill: #64748b !important; } /* Scaled SVG to match new button size */

/* Absolute Legacy Copy Button Override - Hidden to prevent duplicates */
.ai-msg-copy-btn {
 display: none !important;
}

/* Speaking Pulse Effect */
.ai-speaking-pulse {
 background-color: rgba(46, 196, 182, 0.15) !important;
 animation: ai-speaking-glow 1.2s infinite ease-in-out !important;
}
@keyframes ai-speaking-glow {
 0% { transform: scale(1); }
 50% { transform: scale(1.12); }
 100% { transform: scale(1); }
}

/* Responsive Scaling Constraints on Mobile Viewports */
@media screen and (max-width: 768px) {
  /* Lock background document scrolling on mobile devices when panel is active */
  body.ai-mobile-scroll-lock {
overflow: hidden !important;
height: 100vh !important;
position: fixed !important;
width: 100% !important;
  }

 .ai-robot-widget-fixed {
 bottom: 10px !important;
 left: 10px !important;
 }
 .ai-avatar-image-container {
 width: 32vw !important; /* Proportional relative scaling on Mobile/Tablets */
 max-width: 130px !important;
 height: auto !important;
 aspect-ratio: 220 / 380 !important;
 }
 .ai-control-deck {
 width: 32vw !important;
 max-width: 130px !important;
 }
 .ai-language-panel select {
 font-size: 9px !important;
 height: 26px !important;
 padding: 0 10px 0 4px !important;
 background-position: right 4px center !important;
 background-size: 8px !important;
 }
 .ai-oval-btn {
 font-size: 12px !important;
 height: 30px !important;
 padding: 0 2px !important;
 }

 #ai-qa-slide-panel {
 bottom: 0;
 left: 0;
 width: 100vw;
 height: 60vh; /* Slides up beautifully without fully overlaying or stretching screen */
 border-radius: 24px 24px 0 0;
 }
 .ai-panel-retracted { transform: translateY(100%); }
 .ai-panel-expanded { transform: translateY(0); }
}

/* Horizontal Screen View Auto-Alignment Fix */
@media screen and (max-height: 480px) and (orientation: landscape) {
 .ai-avatar-image-container {
 width: 90px;
 height: 140px;
 }
 .ai-control-deck {
 width: 90px;
 margin-top: 5px;
 }
 .ai-language-panel select, .ai-oval-btn {
 font-size: 9px;
 padding: 4px 2px;
 }
 #ai-qa-slide-panel {
 height: 80vh;
 }
}

/* Processing HUD Overlay - Redesigned to match conversation fonts and floats under the query input bar */
#ai-processing-hud {
 align-self: flex-end; /* Automatically floats the timer to the bottom-right of the chat body */
 margin-top: 6px; /* Perfect small gap below the input bar */
 z-index: 10;
 transition: opacity 0.15s ease;
}

.ai-hud-hidden { opacity: 0; pointer-events: none; height: 0; overflow: hidden; margin-top: 0 !important; }
.ai-hud-visible { opacity: 1; height: auto; }
#ai-calculation-timer {
 font-family: 'Roboto', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
 font-size: 11px;
 color: var(--text-secondary); /* Matches your slate-gray discussion font color */
 font-weight: 700;
 letter-spacing: 0.5px;
}

/* --- THE FLOATING CHAT CONSOLE PANEL --- */
#ai-qa-slide-panel {
 position: fixed;
 z-index: 9999;
 background: #ffffff;
 box-shadow: 0 15px 50px rgba(15, 23, 42, 0.15);
 border: 1px solid var(--glass-border);
 display: flex;
 flex-direction: column;
 overflow: hidden;
 transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s;
 will-change: transform, opacity;
 pointer-events: auto;
}

/* Adaptive Sizes: Sleek floating card on Desktop, Bottom Sheet on Mobile */
@media screen and (min-width: 769px) {
 #ai-qa-slide-panel {
 bottom: 30px;
 left: calc(var(--avatar-width-desktop) + 40px);
 width: 400px;
 height: 600px;
 border-radius: 24px;
 }
 .ai-panel-retracted {
  transform: translateY(120%) scale(0.9);
  opacity: 0;
  pointer-events: none;
 }
 .ai-panel-expanded {
  transform: translateY(0) scale(1);
  opacity: 1;
 }
}

@media screen and (max-width: 768px) {
 #ai-qa-slide-panel {
 bottom: 0;
 left: 0;
 width: 100vw;
 height: 75vh;
 border-radius: 30px 30px 0 0;
 }
 .ai-panel-body {
 padding: 20px 20px 20px calc(var(--avatar-width-mobile) + 15px) !important;
 }
 .ai-panel-retracted { transform: translateY(100%); }
 .ai-panel-expanded { transform: translateY(0); }
}

.ai-panel-header {
 background: var(--wsa-blue);
 color: #ffffff;
 padding: 18px 24px;
 display: flex;
 align-items: center;
 justify-content: space-between;
}

.ai-panel-header h3 { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: 0.3px; }
.ai-close-icon {
 background: transparent;
 border: none;
 color: rgba(255, 255, 255, 0.8);
 font-size: 24px;
 cursor: pointer;
 transition: color 0.2s, transform 0.2s;
 line-height: 1;
}
.ai-close-icon:hover { color: #ffffff; transform: scale(1.1); }

.ai-panel-body {
 flex: 1;
 display: flex;
 flex-direction: column;
 background: #f8fafc;
 padding: 20px;
 overflow: hidden;
}

.ai-scroll-container {
 flex: 1;
 overflow-y: auto;
 padding-right: 8px;
 margin-bottom: 10px;
 display: flex;
 flex-direction: column;
 gap: 12px;
 overscroll-behavior: contain !important; /* Contains boundaries inside the chat scroll thread */
}

/* Chat Message Bubbles */
.ai-msg {
 position: relative;
 max-width: 80%;
 padding: 12px 16px;
 border-radius: 18px;
 font-size: 14px;
 line-height: 1.5;
 -webkit-user-select: text !important; /* CRITICAL FIX: Allow finger text highlighting on iOS/Safari */
 user-select: text !important; /* CRITICAL FIX: Allow finger text highlighting on Android/Chrome */
 cursor: text !important;
}

.ai-msg-assistant {
 background: #ffffff;
 color: var(--text-primary);
 align-self: flex-start;
 border: 1px solid rgba(17, 120, 205, 0.08);
 border-bottom-left-radius: 4px;
 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
 padding-right: 36px; /* Space for the copy button */
}

.ai-msg-user {
 background: var(--wsa-blue);
 color: #ffffff;
 align-self: flex-end;
 border-bottom-right-radius: 4px;
 box-shadow: 0 4px 15px rgba(17, 120, 205, 0.18);
}

/* Sleek Message Copy Button */
.ai-msg-copy-btn {
 position: absolute;
 top: 10px;
 right: 10px;
 background: transparent;
 border: none;
 cursor: pointer;
 padding: 2px;
 opacity: 0;
 transition: opacity 0.2s, transform 0.1s;
}
.ai-msg-assistant:hover .ai-msg-copy-btn { opacity: 0.6; }
.ai-msg-copy-btn:hover { opacity: 1 !important; transform: scale(1.1); }
.ai-msg-copy-btn svg { width: 14px; height: 14px; fill: var(--text-secondary); }

/* --- SUGGESTION CHIPS INTERFACE --- */
.ai-suggestions-wrapper {
 display: flex;
 gap: 8px;
 overflow-x: auto;
 padding: 5px 0 10px 0;
 white-space: nowrap;
 scrollbar-width: none; /* Hide scrollbar for clean look */
}
.ai-suggestions-wrapper::-webkit-scrollbar { display: none; }

.ai-chip {
 background: #ffffff;
 border: 1px solid var(--glass-border);
 border-radius: 50px;
 padding: 8px 16px;
 font-size: 12px;
 font-weight: 500;
 color: var(--text-secondary);
 cursor: pointer;
 transition: all 0.2s ease;
 box-shadow: 0 2px 6px rgba(0,0,0,0.02);
}
.ai-chip:hover {
 background: var(--wsa-blue);
 color: #ffffff;
 border-color: var(--wsa-blue);
 transform: translateY(-1px);
}

/* Custom Input Cluster */
#ai-question-submission-form {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.ai-input-cluster {
 display: flex;
 width: 100% !important;
 max-width: 100% !important;
 align-items: center !important; /* Centering fix: Prevents children like buttons from stretching vertically */
 background: #ffffff;
 border: 1.5px solid rgba(17, 120, 205, 0.15);
 border-radius: 50px;
 padding: 5px 5px 5px 20px;
 box-shadow: 0 4px 18px rgba(15, 23, 42, 0.04);
 transition: border-color 0.2s;
}

.ai-input-cluster:focus-within { border-color: var(--wsa-blue); }
#ai-user-query-input { flex: 1 !important; min-width: 0 !important; width: 100% !important; border: none; outline: none; background: transparent; font-size: 14px; color: var(--text-primary); }
#ai-user-query-input::placeholder { color: #94a3b8; }

.ai-send-icon-btn {
 background: var(--wsa-blue) !important;
 color: #ffffff !important;
 border: none !important;
 width: 38px !important;
 height: 38px !important;
 min-width: 38px !important;
 min-height: 38px !important;
 border-radius: 50% !important;
 cursor: pointer !important;
 display: inline-flex !important;
 align-items: center !important;
 justify-content: center !important;
 flex-shrink: 0 !important; /* Alignment fix: Prevents parent flexbox from altering button shape */
 padding: 0 !important; /* Alignment fix: Clears global theme button paddings */
 margin: 0 !important;
 transition: background 0.2s, transform 0.2s !important;
}
.ai-send-icon-btn:hover { background: var(--wsa-blue-hover) !important; transform: scale(1.05) !important; }
.ai-send-icon-btn svg { 
 width: 16px !important; 
 height: 16px !important; 
 fill: #ffffff !important; 
 transform: rotate(-45deg) !important; /* Centering fix: Clean rotation around true origin */
 transform-origin: center !important;
 margin: 0 !important;
 padding: 0 !important;
 display: block !important;
}

/* --- BOUNCING TYPING INDICATOR --- */
.ai-typing-indicator {
 display: flex;
 gap: 4px;
 align-items: center;
 padding: 12px 18px;
 background: #ffffff;
 border-radius: 18px;
 border-bottom-left-radius: 4px;
 width: fit-content;
 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
 border: 1px solid rgba(17, 120, 205, 0.08);
}
.ai-typing-dot {
 width: 6px;
 height: 6px;
 background-color: #94a3b8;
 border-radius: 50%;
 animation: ai-bounce 1.4s infinite ease-in-out both;
}
.ai-typing-dot:nth-child(1) { animation-delay: -0.32s; }
.ai-typing-dot:nth-child(2) { animation-delay: -0.16s; }

@keyframes ai-bounce {
 0%, 80%, 100% { transform: scale(0); }
 40% { transform: scale(1.0); }
}


/* ========================================================
  DYNAMIC FLOATING RESTORE BUTTON STYLES
  ======================================================== */
.ai-restore-btn {
 position: fixed;
 bottom: 20px;
 left: 20px;
 width: 50px;
 height: 50px;
 background: linear-gradient(135deg, #1178cd 0%, #004085 100%);
 border: none;
 border-radius: 50%;
 cursor: pointer;
 display: flex;
 align-items: center;
 justify-content: center;
 box-shadow: 0 8px 25px rgba(17, 120, 205, 0.35);
 z-index: 10000;
 transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.2s ease;
 pointer-events: auto;
 outline: none;
}

.ai-restore-btn svg {
 width: 24px;
 height: 24px;
 fill: #ffffff;
}

.ai-restore-btn:hover {
 transform: scale(1.1);
 box-shadow: 0 10px 30px rgba(17, 120, 205, 0.55);
}

.ai-restore-btn:active {
 transform: scale(0.95);
}

/* Mobile Responsive Scaling for Restore Button */
@media screen and (max-width: 768px) {
 .ai-restore-btn {
 bottom: 10px;
 left: 10px;
 width: 42px;
 height: 42px;
 box-shadow: 0 6px 18px rgba(17, 120, 205, 0.3);
 }
 .ai-restore-btn svg {
 width: 20px;
 height: 20px;
 }
}

/* ========================================================
  DYNAMIC COOLDOWN UI LOCK STATE
  ======================================================== */
.ai-input-cooldown {
 background-color: #f1f5f9 !important; /* Soft light grey shade */
 cursor: not-allowed !important;
 text-align: center !important;
 font-weight: 700 !important;
 border-radius: 50px !important;
}
.ai-input-cooldown::placeholder {
 color: #e71d36 !important; /* Bold Red Warning Color */
 opacity: 1 !important;
}
.ai-send-btn-disabled {
 background: #cbd5e1 !important; /* Greyed out send button */
 cursor: not-allowed !important;
 transform: none !important;
 box-shadow: none !important;
}