/* css/modules/voice.css */
/* Voice Module Styles - Full-screen voice interaction overlay */

/* =============================================================================
   LISTENING INDICATOR (Full-width orange line - separate from overlay)
   ============================================================================= */

.listening-indicator {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 15vh; /* 15% from bottom of viewport */
  height: 8px;
  z-index: 10002; /* Above voice overlay (10000) */
  pointer-events: none; /* Don't block clicks */
  opacity: 0;
  transition: opacity 0.2s ease;
}

.listening-indicator--visible {
  opacity: 1;
}

.listening-indicator__line {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 6px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--accent-secondary, #FF6B1A) 15%,
    var(--accent-secondary, #FF6B1A) 85%,
    transparent 100%
  );
  box-shadow: 0 0 30px rgba(255, 107, 26, 0.6);
  animation: listening-line-pulse 2.5s ease-in-out infinite;
}

@keyframes listening-line-pulse {
  0%, 100% {
    opacity: 0.5;
    transform: scaleY(1);
    box-shadow: 0 0 30px rgba(255, 107, 26, 0.6),
                0 0 60px rgba(255, 107, 26, 0.3);
  }
  50% {
    opacity: 1;
    transform: scaleY(1.5);
    box-shadow: 0 0 80px rgba(255, 107, 26, 1),
                0 0 160px rgba(255, 107, 26, 0.6),
                0 0 240px rgba(255, 107, 26, 0.3);
  }
}

/* =============================================================================
   VOICE OVERLAY (Full-screen)
   ============================================================================= */

.voice-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5); /* Semi-transparent overlay */
  display: flex;
  align-items: flex-end; /* Align to bottom */
  justify-content: center;
  z-index: 10000; /* Above everything including modals */
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.voice-overlay--visible {
  opacity: 1;
  pointer-events: auto;
}

/* Sidebar mode - match right column widget width (30% of grid) */
/* Grid layout: 70% / 30% columns with 60px sidebar and 10px padding on each side */
/* Available grid width = 100vw - 60px (sidebar) - 20px (padding) = 100vw - 80px */
/* Right column = 30% of that = 0.3 * (100vw - 80px) = 30vw - 24px */
.voice-overlay--sidebar {
  left: auto; /* Don't extend from left */
  right: 0; /* Flush to right edge of viewport */
  width: calc(30vw - 24px + 10px); /* Right column width + grid padding */
  min-width: 280px; /* Minimum width for readability */
  /* No max-width - let it match the actual widget column width */
  background: rgba(0, 0, 0, 0.85); /* Slightly transparent */
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.5); /* Shadow on left edge */
  backdrop-filter: blur(10px); /* Blur background for modern look */
}

.voice-overlay--sidebar .voice-overlay__inner {
  padding: 12px; /* Reduced padding for sidebar */
}

.voice-overlay--sidebar .voice-overlay__response-section {
  padding: 12px 16px; /* Reduced padding for sidebar */
  gap: 8px; /* Tighter spacing */
}

.voice-overlay--sidebar .voice-overlay__ai-message {
  font-size: 13px; /* Smaller font for sidebar */
  line-height: 1.4; /* Tighter line height */
}

.voice-overlay--sidebar .voice-overlay__voiced-text {
  font-size: 15px; /* Smaller voiced text for sidebar */
  margin-bottom: 8px; /* Less margin */
}

.voice-overlay--sidebar .voice-overlay__user-message {
  font-size: 12px; /* Smaller user message */
  padding: 6px 10px; /* Less padding */
}

.voice-overlay--sidebar .voice-overlay__thinking-text {
  font-size: 12px; /* Smaller thinking text */
}

.voice-overlay--sidebar .voice-overlay__thinking-dot {
  width: 8px; /* Smaller dots */
  height: 8px;
}

/* Position metadata inside sidebar at bottom */
.voice-overlay--sidebar .voice-overlay__metadata-section {
  position: absolute; /* Position at bottom of overlay */
  left: 0;
  right: 0;
  bottom: 10px; /* 10px from bottom of overlay */
  transform: none; /* Remove centering transform */
  padding: 8px 12px; /* Smaller padding */
}

.voice-overlay--sidebar .voice-overlay__metadata {
  font-size: 9px; /* Smaller metadata text */
  padding: 6px 10px; /* Smaller padding */
}

.voice-overlay--sidebar .voice-overlay__metadata-model {
  font-size: 10px; /* Smaller model name */
}

.voice-overlay--sidebar .voice-overlay__metadata-cost {
  font-size: 8px; /* Smaller cost text */
}

/* Chore completion display - shrink for sidebar mode (~40% reduction) */
.voice-overlay--sidebar .chore-completion {
  gap: 0.75rem; /* Reduced from 1.5rem */
  padding: 0.75rem; /* Reduced from 1.5rem */
}

.voice-overlay--sidebar .chore-completion__response-text {
  font-size: 15px; /* Match sidebar voiced text size (was 24px) */
  max-width: 100%;
  line-height: 1.3;
}

.voice-overlay--sidebar .chore-completion__chore-card {
  gap: 0.4rem; /* Reduced from 0.75rem */
  padding: 0.75rem 1rem; /* Reduced from 1.5rem 2rem */
  border-radius: 10px; /* Reduced from 16px */
}

.voice-overlay--sidebar .chore-completion__emoji {
  font-size: 1.8rem; /* Reduced from 3rem (~40%) */
}

.voice-overlay--sidebar .chore-completion__emoji--small {
  font-size: 1.2rem; /* Reduced from 2rem */
}

.voice-overlay--sidebar .chore-completion__title {
  font-size: 0.75rem; /* Reduced from 1.25rem (~40%) */
}

.voice-overlay--sidebar .chore-completion__title--small {
  font-size: 0.6rem; /* Reduced from 1rem */
}

.voice-overlay--sidebar .chore-completion__points {
  font-size: 0.9rem; /* Reduced from 1.5rem (~40%) */
}

.voice-overlay--sidebar .chore-completion__card-points {
  font-size: 0.6rem; /* Reduced from 1rem */
  margin-top: 0.25rem; /* Reduced from 0.5rem */
}

.voice-overlay--sidebar .chore-completion__chore-card--small {
  padding: 0.5rem 0.75rem; /* Reduced from 1rem 1.5rem */
}

.voice-overlay--sidebar .chore-completion__chores-row {
  gap: 0.5rem; /* Reduced from 1rem */
}

/* Multiple chores in sidebar */
.voice-overlay--sidebar .chore-completion--multiple .chore-completion__response-text {
  font-size: 13px; /* Match sidebar AI message size (was 1.25rem) */
}

/* Sidebar mode - minimal overlay adjustments */
.voice-overlay--sidebar.voice-overlay--minimal {
  background: transparent; /* Keep transparent in minimal mode */
  width: 100%; /* Full width for minimal mode */
  left: 0; /* Reset to full width */
  backdrop-filter: none; /* Remove blur in minimal mode */
  box-shadow: none; /* Remove shadow in minimal mode */
}

/* Minimal mode - only show orange line (for wake word detection) */
.voice-overlay--minimal {
  background: rgba(0, 0, 0, 0.3); /* Light transparent overlay - more visible */
  align-items: flex-start; /* Align to top for positioning */
  justify-content: center; /* Center horizontally */
}

.voice-overlay--minimal .voice-overlay__response-section {
  display: none; /* Hide response section */
}

.voice-overlay--minimal .voice-overlay__metadata-section {
  display: none; /* Hide metadata section */
}

.voice-overlay--minimal .voice-overlay__inner {
  height: 100%; /* Full height for positioning */
  align-items: stretch; /* Stretch mic section to full width */
  justify-content: flex-end; /* Push to bottom */
}

/* Minimal mode - mic section spans full viewport width */
/* Use fixed positioning to ensure line goes across entire screen */
/* regardless of whether sidebar mode is active */
.voice-overlay--minimal .voice-overlay__mic-section {
  position: fixed; /* Fixed to viewport, not parent container */
  left: 0;
  right: 0;
  width: 100vw; /* Explicit full viewport width */
  bottom: 15vh; /* 15% from bottom of viewport */
  z-index: 10001; /* Above overlay */
}

/* Hide mic section when NOT in minimal mode (full screen with AI response) */
/* The ListeningIndicator now handles the orange line separately */
.voice-overlay:not(.voice-overlay--minimal) .voice-overlay__mic-section {
  display: none;
}

.voice-overlay__inner {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* =============================================================================
   CLOSE BUTTON (Top right X button for touch dismiss)
   ============================================================================= */

.voice-overlay__close-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 10001;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.voice-overlay__close-btn svg {
  width: 18px;
  height: 18px;
}

.voice-overlay__close-btn:hover {
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
  transform: scale(1.1);
}

.voice-overlay__close-btn:active {
  transform: scale(0.95);
  background: rgba(255, 255, 255, 0.3);
}

/* Hide close button in minimal mode (just the orange line) */
.voice-overlay--minimal .voice-overlay__close-btn {
  display: none;
}

/* Sidebar mode - adjust position */
.voice-overlay--sidebar .voice-overlay__close-btn {
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
}

.voice-overlay--sidebar .voice-overlay__close-btn svg {
  width: 16px;
  height: 16px;
}

/* =============================================================================
   AI RESPONSE SECTION (Top 1/3)
   ============================================================================= */

.voice-overlay__response-section {
  flex: 0 0 33.33%; /* Top 1/3 of screen */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 40px 60px 0;
  gap: 20px;
}

/* Thinking indicator */
.voice-overlay__thinking {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: 800px; /* Wider to prevent overflow */
  width: 100%;
}

.voice-overlay__thinking-dots {
  display: flex;
  gap: 8px;
}

.voice-overlay__thinking-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent-secondary, #FF6B1A);
  animation: thinking-pulse 1.4s ease-in-out infinite;
}

.voice-overlay__thinking-dot:nth-child(2) {
  animation-delay: 0.2s;
}

.voice-overlay__thinking-dot:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes thinking-pulse {
  0%, 100% {
    opacity: 0.3;
    transform: scale(0.8);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
  }
}

.voice-overlay__thinking-text {
  font-size: 16px; /* Slightly smaller to prevent overflow */
  color: rgba(180, 180, 180, 0.9); /* Consistent gray - not theme-dependent */
  margin: 0;
  text-align: center;
  word-wrap: break-word;
  max-width: 100%;
}

/* User message - showing current query */
.voice-overlay__user-message {
  font-size: 20px; /* Larger text */
  color: #000; /* Black text for better contrast */
  text-align: center;
  max-width: 800px;
  margin: 0;
  padding: 12px 20px;
  background: rgba(255, 255, 255, 0.9); /* Mostly solid white box (90% opacity) */
  border-radius: 8px;
  backdrop-filter: blur(4px); /* Subtle blur behind */
}

/* AI response message */
.voice-overlay__ai-message {
  font-size: 20px; /* Larger text for additional text */
  color: #fff; /* White text */
  text-align: center;
  width: 100%;
  line-height: 1.5;
  margin: 0;
}

/* Voiced text (bold and larger) */
.voice-overlay__voiced-text {
  font-size: 28px; /* Even larger for voiced portion */
  font-weight: 700;
  color: #fff; /* White text */
  display: block; /* Makes it take full width */
  margin-bottom: 16px; /* Two line breaks worth of spacing */
}

/* =============================================================================
   METADATA SECTION (Bottom of screen)
   ============================================================================= */

.voice-overlay__metadata-section {
  position: fixed;
  bottom: 80px; /* Above chat input bar */
  left: 50%;
  transform: translateX(-50%);
  z-index: 10000;
  pointer-events: none;
}

/* Metadata (model name and token usage) */
.voice-overlay__metadata {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5); /* Light gray */
  text-align: center;
  background: rgba(0, 0, 0, 0.3);
  padding: 8px 16px;
  border-radius: 6px;
  backdrop-filter: blur(4px);
}

.voice-overlay__metadata-line {
  margin: 4px 0;
}

.voice-overlay__metadata-model {
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  font-size: 13px;
}

.voice-overlay__metadata-cost {
  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
}

/* =============================================================================
   MICROPHONE SECTION (Center with orange line)
   ============================================================================= */

.voice-overlay__mic-section {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 15vh; /* 15% from bottom of screen */
  height: 8px; /* Line height with pulse expansion room */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1; /* Ensure it's above overlay background */
}

/* Orange gradient line - full width with gradient edges */
.voice-overlay__gradient-line {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 6px; /* Slightly thicker for visibility */
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--accent-secondary, #FF6B1A) 15%,
    var(--accent-secondary, #FF6B1A) 85%,
    transparent 100%
  );
  box-shadow: 0 0 30px rgba(255, 107, 26, 0.6);
  animation: line-pulse 2.5s ease-in-out infinite;
}

@keyframes line-pulse {
  0%, 100% {
    opacity: 0.5;
    transform: scaleY(1);
    box-shadow: 0 0 30px rgba(255, 107, 26, 0.6),
                0 0 60px rgba(255, 107, 26, 0.3);
  }
  50% {
    opacity: 1;
    transform: scaleY(1.5);
    box-shadow: 0 0 80px rgba(255, 107, 26, 1),
                0 0 160px rgba(255, 107, 26, 0.6),
                0 0 240px rgba(255, 107, 26, 0.3);
  }
}

/* Microphone container and icon - no longer used (removed) */

/* =============================================================================
   CHAT INPUT BAR (Bottom of screen)
   ============================================================================= */

.voice-chat-input {
  position: fixed;
  bottom: 5px; /* 5px from bottom */
  left: calc(var(--sidebar-width-collapsed, 60px) + 40px); /* 40px from sidebar */
  right: 40px; /* 40px from right edge */
  height: 60px;
  background: var(--bg-primary, #222);
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
  border-radius: var(--border-radius, 8px); /* Rounded corners like widgets */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 500; /* Above dashboard (200), below sidebar (1000), below modals (9000) */
  padding: 0 20px;
  transition: left 0.3s ease; /* Smooth transition when sidebar expands */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); /* Subtle shadow for depth */
}

/* Adjust when sidebar is expanded (plus mode) */
.sidebar-mode-plus .voice-chat-input {
  left: calc(var(--sidebar-width-expanded, 200px) + 40px); /* 40px from expanded sidebar */
}

.voice-chat-input__inner {
  width: 100%;
  max-width: 1200px;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Microphone button */
.voice-chat-input__mic-button {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  background: var(--bg-secondary, rgba(255, 255, 255, 0.05));
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.2));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-primary, #fff);
  cursor: pointer;
  transition: all 0.2s ease;
}

.voice-chat-input__mic-button svg {
  width: 20px;
  height: 20px;
}

.voice-chat-input__mic-button:hover {
  background: var(--bg-tertiary, rgba(255, 255, 255, 0.1));
  border-color: var(--accent-secondary, #FF6B1A);
  color: var(--accent-secondary, #FF6B1A);
  transform: scale(1.05);
}

.voice-chat-input__mic-button:active {
  transform: scale(0.95);
}

/* Text input */
.voice-chat-input__text {
  flex: 1;
  height: 44px;
  background: var(--bg-secondary, rgba(255, 255, 255, 0.05));
  border: 1px solid rgba(128, 128, 128, 0.4); /* Gray outline */
  border-radius: 22px;
  padding: 0 20px;
  font-size: 14px;
  color: var(--text-primary, #fff);
  outline: none;
  transition: all 0.2s ease;
}

.voice-chat-input__text::placeholder {
  color: var(--text-muted, rgba(255, 255, 255, 0.4));
}

.voice-chat-input__text:focus {
  border-color: rgba(128, 128, 128, 0.6);
  background: var(--bg-tertiary, rgba(255, 255, 255, 0.08));
}

/* Send button */
.voice-chat-input__send-button {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  background: var(--accent-secondary, #FF6B1A);
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  cursor: pointer;
  transition: all 0.2s ease;
}

.voice-chat-input__send-button svg {
  width: 20px;
  height: 20px;
}

.voice-chat-input__send-button:hover:not(:disabled) {
  background: #ff7a2e;
  transform: scale(1.05);
}

.voice-chat-input__send-button:active:not(:disabled) {
  transform: scale(0.95);
}

.voice-chat-input__send-button:disabled {
  background: var(--bg-secondary, rgba(255, 255, 255, 0.05));
  color: var(--text-muted, rgba(255, 255, 255, 0.3));
  cursor: not-allowed;
  opacity: 0.5;
}

/* =============================================================================
   RESPONSIVE ADJUSTMENTS
   ============================================================================= */

@media (max-width: 768px) {
  .voice-overlay__response-section {
    padding: 20px 30px 10px;
  }

  .voice-overlay__ai-message {
    font-size: 20px;
  }

  .voice-overlay__voiced-text {
    font-size: 24px;
  }

  .voice-overlay__user-message {
    font-size: 14px;
  }

  .voice-overlay__mic-icon {
    width: 70px;
    height: 70px;
  }

  .voice-overlay__progress-circle {
    width: 120px;
    height: 120px;
  }

  .voice-chat-input {
    padding: 0 12px;
  }
}

/* Hide chat input on TV/mobile */
.tv-mode-active .voice-chat-input,
.mobile-mode-active .voice-chat-input {
  display: none;
}

/* =============================================================================
   IMAGE DISPLAY IN AI RESPONSES
   ============================================================================= */

/* Image display in voice overlay response */
.voice-overlay__response-with-image {
  display: flex;
  align-items: center;
  gap: 2rem;
  width: 100%;
  max-width: 1200px;
}

.voice-overlay__response-text {
  flex: 1;
  min-width: 0; /* Allow text to shrink */
}

.voice-overlay__response-image {
  flex-shrink: 0;
  width: 300px;
  max-width: 40%;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.voice-overlay__response-image img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  object-fit: cover;
  max-height: 300px;
}

.voice-overlay__image-attribution {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.4;
}

.voice-overlay__image-attribution a {
  color: var(--accent-color);
  text-decoration: none;
}

.voice-overlay__image-attribution a:hover {
  text-decoration: underline;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .voice-overlay__response-with-image {
    flex-direction: column;
    gap: 1rem;
  }

  .voice-overlay__response-image {
    width: 100%;
    max-width: 100%;
  }

  .voice-overlay__response-image img {
    max-height: 250px;
  }
}