/* ==========================================================================
   Host Page Styles (Optional)
   ========================================================================== */

.remote-control-highlight {
  box-shadow: 0 0 0 3px var(--cb-highlight-color, rgba(0, 123, 255, 0.7)) !important;
  transition: box-shadow 0.2s ease-in-out;
}

/* ==========================================================================
   Cobrowse Chat Widget Styles
   ========================================================================== */

/*
 * Theme color variables
 * The theme is applied by setting the `data-theme` attribute on the container.
 */
#cobrowse-ui-container {
  /* Light Theme (Default) */
  --cb-primary-color: #cd2732;
  --cb-primary-text-color: #ffffff;
  --cb-widget-bg: #ffffff;
  --cb-messages-bg: #f9f9f9;
  --cb-border-color: #ddd;
  --cb-text-primary: #1c1c1e;
  --cb-text-secondary: #5f606d;
  --cb-assistant-msg-bg: #e9e9eb;
  --cb-user-msg-bg: var(--cb-primary-color);
  --cb-input-bg: #ffffff;
  --cb-input-text: #333;
  --cb-input-border: #ccc;
  --cb-input-placeholder: #a1a1a1;
  --cb-input-disabled-bg: #f1f1f1;
  --cb-button-disabled-bg: #a8a8a8;
  --cb-suggestion-bg: #f1f1f1;
  --cb-suggestion-bg-hover: #e0e0e0;
  --cb-suggestion-border: #ddd;
  --cb-suggestion-text: #333;
  --cb-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  --cb-highlight-color: rgba(0, 123, 255, 0.7);
  --cb-icon-color: #000000;
  --cb-start-btn-bg: var(--cb-primary-color);
  --cb-start-btn-text: #ffffff;
}

#cobrowse-ui-container[data-theme="dark"] {
  /* Dark Theme */
  --cb-primary-color: #da2525;
  --cb-primary-text-color: #ffffff;
  --cb-widget-bg: #1c1c1e;
  --cb-messages-bg: #2c2c2e;
  --cb-border-color: #444;
  --cb-text-primary: #f2f2f7;
  --cb-text-secondary: #8e8e93;
  --cb-assistant-msg-bg: #3a3a3c;
  --cb-user-msg-bg: var(--cb-primary-color);
  --cb-input-bg: #3a3a3c;
  --cb-input-text: #f2f2f7;
  --cb-input-border: #555;
  --cb-input-placeholder: #8e8e93;
  --cb-input-disabled-bg: #2c2c2e;
  --cb-button-disabled-bg: #555;
  --cb-suggestion-bg: #3a3a3c;
  --cb-suggestion-bg-hover: #4a4a4c;
  --cb-suggestion-border: #555;
  --cb-suggestion-text: #f2f2f7;
  --cb-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  --cb-highlight-color: rgba(48, 128, 255, 0.7);
  --cb-icon-color: #ffffff;
  --cb-start-btn-bg: var(--cb-primary-color);
  --cb-start-btn-text: #ffffff;
}

/* Universal box-sizing and font-family for all widget elements */
#cobrowse-ui-container *,
#cobrowse-ui-container *::before,
#cobrowse-ui-container *::after {
  box-sizing: border-box;
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
    sans-serif;
}

/* Reset for common text elements to avoid host-page styles */
#cobrowse-ui-container h1,
#cobrowse-ui-container h2,
#cobrowse-ui-container h3,
#cobrowse-ui-container p,
#cobrowse-ui-container ul,
#cobrowse-ui-container ol,
#cobrowse-ui-container li,
#cobrowse-ui-container pre,
#cobrowse-ui-container code {
  all: revert;
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
    sans-serif;
  font-size: inherit;
  line-height: 1.4;
  color: inherit;
  margin-bottom: 0.25em;
  margin-top: 0.25em;
}

#cobrowse-ui-container .cb-chat-message > *:last-child {
  margin-bottom: 0;
}

#cobrowse-ui-container ul,
#cobrowse-ui-container ol {
  padding-inline-start: 25px;
}

/*
 * Main Widget Elements: Start Button & Chat Window
 */

#cobrowse-ui-container #cobrowse-start-btn-1,
#cobrowse-ui-container #cobrowse-chat-widget {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 99998;
  border-radius: 8px;
  /* box-shadow: var(--cb-shadow); */
}

/* START BUTTON */
#cobrowse-ui-container .ask-innosearch-container {
  position: fixed;
  z-index: 99998;
  bottom: 12px;
  right: 12px;
  max-width: calc(100% - 24px);
}

#cobrowse-ui-container .ask-innosearch-btn {
  cursor: pointer;
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-start;
  width: 200px;
  max-width: 100%;
  padding: 4px 5px;
  border: 1px solid var(--cb-primary-color);
  border-radius: 16px;
  font-size: 18px;
  font-weight: 500;
  color: var(--cb-text-secondary);
  text-align: center;
  white-space: nowrap;
  background: var(--cb-widget-bg);
  box-shadow: 0 0 10px rgba(68, 13, 207, 0.25);
}

#cobrowse-ui-container .ask-innosearch-img {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
}

#cobrowse-ui-container .ask-innosearch-content {
  width: 1px;
  height: 32px;
  background: #28292f;
}

/* CHAT WIDGET */
#cobrowse-ui-container #cobrowse-chat-widget {
  width: 350px;
  height: 500px;
  background-color: var(--cb-widget-bg);
  display: none; /* Initially hidden */
  flex-direction: column;
  overflow: hidden;
  font-size: 16px;
  border: 1px solid var(--cb-border-color);
}

/* Chat Header */
#cobrowse-ui-container #cobrowse-chat-header {
  background-color: var(--cb-primary-color);
  color: var(--cb-primary-text-color);
  padding: 12px 15px;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
  border-bottom: 1px solid var(--cb-border-color);
}

#cobrowse-ui-container #cobrowse-chat-header h1 {
  color: var(--cb-primary-text-color);
}

#cobrowse-ui-container .cobrowse-header-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

#cobrowse-ui-container #cobrowse-chat-close-btn {
  all: initial;
  font-family: inherit;
  background: none;
  color: var(--cb-primary-text-color);
  font-size: 24px;
  cursor: pointer;
  opacity: 0.8;
  line-height: 1;
}

#cobrowse-ui-container #cobrowse-chat-close-btn:hover {
  opacity: 1;
}

#cobrowse-ui-container #cobrowse-chat-close-btn svg {
  stroke: var(--cb-primary-text-color);
}

/* Status Indicator */
#cobrowse-ui-container #cobrowse-status {
  font-size: 12px;
  font-weight: normal;
  text-transform: capitalize;
  display: flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 5px;
}

#cobrowse-ui-container #cobrowse-status.pending {
  background-color: #ffe082;
  color: #493800;
}

#cobrowse-ui-container #cobrowse-status.connected {
  background-color: #d4edda;
  color: #155724;
}

#cobrowse-ui-container #cobrowse-status.disconnected {
  background-color: #f8d7da;
  color: #721c24;
}

/* Message Area */
#cobrowse-ui-container #cobrowse-chat-messages {
  flex-grow: 1;
  padding: 10px;
  overflow-y: auto;
  background-color: var(--cb-messages-bg);
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--cb-text-primary);
}

#cobrowse-ui-container .cb-chat-message {
  padding: 6px 10px;
  border-radius: 12px;
  max-width: 85%;
  word-wrap: break-word;
  font-size: 14px;
}

#cobrowse-ui-container .cb-chat-user {
  background-color: var(--cb-user-msg-bg);
  color: var(--cb-primary-text-color);
  align-self: flex-end;
  border-bottom-right-radius: 2px;
}

#cobrowse-ui-container .cb-chat-assistant {
  background-color: var(--cb-assistant-msg-bg);
  color: var(--cb-text-primary);
  align-self: flex-start;
  border-bottom-left-radius: 2px;
}

/* Suggestion Buttons */
#cobrowse-ui-container #cobrowse-chat-suggestions {
  padding: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex-shrink: 0;
  background-color: var(--cb-widget-bg);
  border-top: 1px solid var(--cb-border-color);
}

#cobrowse-ui-container .suggestion-btn {
  all: initial;
  font-family: inherit;
  background-color: var(--cb-suggestion-bg);
  border: 1px solid var(--cb-suggestion-border);
  border-radius: 16px;
  padding: 6px 12px;
  font-size: 13px;
  color: var(--cb-suggestion-text);
  cursor: pointer;
  transition: background-color 0.2s;
}

#cobrowse-ui-container .suggestion-btn:hover {
  background-color: var(--cb-suggestion-bg-hover);
}

/* Chat Footer */
#cobrowse-ui-container #cobrowse-chat-footer {
  border-top: 1px solid var(--cb-border-color);
  display: flex;
  align-items: center;
  padding: 8px 8px 0px 8px;
  flex-shrink: 0;
  gap: 8px;
  background-color: var(--cb-widget-bg);
}

#cobrowse-ui-container .cb-powered-by {
  font-size: 11px;
  text-align: center;
  padding: 4px 8px 8px 8px;
  color: var(--cb-text-secondary);
  background-color: var(--cb-widget-bg);
}

#cobrowse-ui-container .cb-powered-by a {
  color: inherit;
  text-decoration: underline;
}

#cobrowse-ui-container .cb-powered-by a:hover {
  text-decoration: underline;
}

#cobrowse-ui-container #cobrowse-chat-input {
  all: initial;
  font-family: inherit;
  flex-grow: 1;
  border: 1px solid var(--cb-input-border);
  border-radius: 4px;
  padding: 8px;
  font-size: 14px;
  background-color: var(--cb-input-bg);
  color: var(--cb-input-text);
}

#cobrowse-ui-container #cobrowse-chat-input:focus {
  outline: none;
  border-color: var(--cb-primary-color);
  box-shadow: 0 0 0 2px
    color-mix(in srgb, var(--cb-primary-color) 20%, transparent);
}

#cobrowse-ui-container #cobrowse-chat-input:disabled {
  background-color: var(--cb-input-disabled-bg);
  color: var(--cb-input-placeholder);
  cursor: not-allowed;
}

#cobrowse-ui-container #cobrowse-voice-toggle,
#cobrowse-ui-container #cobrowse-chat-send {
  all: initial;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

#cobrowse-ui-container #cobrowse-chat-send {
  padding: 8px 12px;
  background-color: var(--cb-primary-color);
  color: var(--cb-primary-text-color);
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
}

#cobrowse-ui-container #cobrowse-voice-toggle {
  padding: 5px;
  opacity: 0.6;
}

#cobrowse-ui-container #cobrowse-voice-toggle:hover {
  opacity: 1;
}

#cobrowse-ui-container #cobrowse-voice-toggle.active {
  opacity: 1;
}

.voice-status-button.active .icon-mic {
  filter: drop-shadow(0 0 2px var(--cb-primary-color));
}

.voice-status-button svg path {
  fill: var(--cb-icon-color);
}

.voice-status-button .icon-mic {
  display: block; /* Default icon */
}

/* When listening (user is talking) */
.voice-status-button.listening .icon-mic,
.voice-status-button.listening .icon-speaker {
  display: none;
}
.voice-status-button.listening .icon-sound-wave {
  display: block;
}

/* When playing audio (assistant is talking) */
.voice-status-button.playing-audio .icon-mic,
.voice-status-button.playing-audio .icon-sound-wave {
  display: none;
}
.voice-status-button.playing-audio .icon-speaker {
  display: block;
}

/* Make sure stroke colors are set correctly via the class */
.voice-status-button .icon-sound-wave,
.voice-status-button .icon-speaker path {
  stroke: var(--cb-icon-color);
}

/* Update animation rules to use the class selector */
.voice-status-button.listening .icon-sound-wave path {
  transform-origin: center;
  animation: sound-wave-animation 1.2s infinite ease-in-out;
}

.voice-status-button.listening .icon-sound-wave path:nth-of-type(2) {
  animation-delay: -1s;
}
.voice-status-button.listening .icon-sound-wave path:nth-of-type(3) {
  animation-delay: -0.8s;
}
.voice-status-button.listening .icon-sound-wave path:nth-of-type(4) {
  animation-delay: -0.6s;
}

.voice-status-button.playing-audio .speaker-wave-1 {
  animation: speaker-wave-animation 1.5s infinite ease-in-out;
}

.voice-status-button.playing-audio .speaker-wave-2 {
  animation: speaker-wave-animation 1.5s infinite ease-in-out;
  animation-delay: -0.75s;
}

/* Update all icon visibility and animation rules */
.voice-status-button .icon-sound-wave,
.voice-status-button .icon-speaker {
  display: none;
}

#cobrowse-ui-container #cobrowse-voice-toggle svg {
  width: 24px;
  height: 24px;
}

#cobrowse-ui-container #cobrowse-chat-send:disabled,
#cobrowse-ui-container #cobrowse-voice-toggle:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

#cobrowse-ui-container #cobrowse-chat-send:disabled {
  background-color: var(--cb-button-disabled-bg);
}

/* Typing Indicator */
#cobrowse-ui-container .cb-chat-typing-indicator {
  background-color: var(--cb-assistant-msg-bg);
  align-self: flex-start;
  border-bottom-left-radius: 2px;
  display: flex;
  align-items: center;
  padding: 12px;
  height: 37px;
}

#cobrowse-ui-container .cb-chat-typing-indicator span {
  height: 8px;
  width: 8px;
  background-color: var(--cb-text-secondary);
  border-radius: 50%;
  display: inline-block;
  margin: 0 2px;
  animation: bounce 1.2s infinite ease-in-out;
}

#cobrowse-ui-container .cb-chat-typing-indicator span:nth-of-type(2) {
  animation-delay: -0.9s;
}
#cobrowse-ui-container .cb-chat-typing-indicator span:nth-of-type(3) {
  animation-delay: -0.6s;
}

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

/* MOBILE RESPONSIVE STYLES */
@media (max-width: 600px) {
  #cobrowse-ui-container .MS {
    bottom: 10px;
    right: 10px;
  }
  #cobrowse-ui-container .OS {
    padding: 6px 12px;
    font-size: 16px;
    border-radius: 12px;
  }
  #cobrowse-ui-container #cobrowse-chat-widget {
    width: 100%;
    height: 500px;
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15); /* Note: This is not using a variable, which is a minor inconsistency but acceptable for mobile-specific override */
    max-height: 90vh;
  }
  #cobrowse-ui-container #cobrowse-chat-header {
    padding: 12px;
  }
  #cobrowse-ui-container #cobrowse-chat-messages {
    padding: 8px;
  }
  #cobrowse-ui-container .cb-chat-message {
    font-size: 15px;
    max-width: 90%;
  }
  #cobrowse-ui-container #cobrowse-chat-footer {
    padding: 8px;
  }
  #cobrowse-ui-container #cobrowse-chat-input {
    font-size: 15px;
  }
  #cobrowse-ui-container .suggestion-btn {
    padding: 8px 14px;
    font-size: 14px;
  }
}

/* Screen Reader Only Utility */
#cobrowse-ui-container .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Style for the new button in the header */
#cobrowse-ui-container #cobrowse-minimize-btn {
  all: initial;
  font-family: inherit;
  background: none;
  color: var(--cb-primary-text-color);
  cursor: pointer;
  opacity: 0.8;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

#cobrowse-ui-container #cobrowse-minimize-btn:hover {
  opacity: 1;
}

#cobrowse-ui-container #cobrowse-minimize-btn svg {
  width: 20px;
  height: 20px;
  stroke: var(--cb-primary-text-color);
  stroke-width: 2.5;
}

/* Logic to show/hide the correct icon */
#cobrowse-minimize-btn .icon-maximize {
  display: none;
}

#cobrowse-chat-widget.minimized #cobrowse-minimize-btn .icon-minimize {
  display: none;
}

#cobrowse-chat-widget.minimized #cobrowse-minimize-btn .icon-maximize {
  display: block;
}

/* --- Definitive Fix for Minimize State --- */

/* 1. Force the widget's height to collapse */
#cobrowse-ui-container #cobrowse-chat-widget.minimized {
  height: auto !important;
  transition: height 0.3s ease-in-out;
}

/* 2. Force the child sections to be hidden using hyper-specific selectors */
#cobrowse-ui-container #cobrowse-chat-widget.minimized #cobrowse-chat-messages,
#cobrowse-ui-container
  #cobrowse-chat-widget.minimized
  #cobrowse-chat-suggestions,
#cobrowse-ui-container #cobrowse-chat-widget.minimized #cobrowse-chat-footer {
  display: none !important;
}

/* Hide the status icon placeholder by default */
#cobrowse-minimized-voice-status {
  display: none;
  align-items: center;
  justify-content: center;
  margin-right: 8px; /* Add some spacing */
}

/* When the widget is minimized, show the icon placeholder */
#cobrowse-chat-widget.minimized #cobrowse-minimized-voice-status {
  display: flex;
}

/* Style the cloned button to look like a simple status icon */
.minimized-icon-display {
  all: unset; /* Remove all button styling */
  display: flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  width: 24px;
  cursor: pointer; /* Add pointer to show it's clickable */
  border-radius: 50%; /* Make it circular for a nice hover effect */
  transition: background-color 0.2s ease; /* Smooth transition for hover */
}

/* Add a subtle hover effect for better user feedback */
.minimized-icon-display:hover {
  background-color: rgba(255, 255, 255, 0.15);
}

.minimized-icon-display svg {
  width: 20px;
  height: 20px;
}

/*
 * IMPORTANT: Override the icon's colors to match the header's theme.
 * The header has a dark background with light icons, regardless of the page theme.
 */
.minimized-icon-display svg path {
  fill: var(--cb-primary-text-color) !important;
  stroke: var(--cb-primary-text-color) !important;
}

/* Initially hide the sound wave and new speaker icon */
#cobrowse-voice-toggle .icon-sound-wave,
#cobrowse-voice-toggle .icon-speaker {
  display: none;
}

#cobrowse-voice-toggle .icon-mic {
  display: block; /* Default icon */
}

/* Ensure the sound wave icon has the correct stroke color from the theme */
#cobrowse-voice-toggle .icon-sound-wave {
  stroke: var(--cb-icon-color);
}

/* When the "listening" class is added (user is talking) */
#cobrowse-voice-toggle.listening .icon-mic,
#cobrowse-voice-toggle.listening .icon-speaker {
  display: none; /* Hide other icons */
}

#cobrowse-voice-toggle.listening .icon-sound-wave {
  display: block; /* Show the sound wave */
  filter: none;
}

/* STYLES for Speaker Icon */

/* When the "playing-audio" class is added (assistant is talking) */
#cobrowse-voice-toggle.playing-audio .icon-mic,
#cobrowse-voice-toggle.playing-audio .icon-sound-wave {
  display: none; /* Hide other icons */
}
#cobrowse-voice-toggle.playing-audio .icon-speaker {
  display: block; /* Show the speaker icon */
}

/* Ensure the speaker icon's stroke color matches the theme */
#cobrowse-voice-toggle .icon-speaker path {
  stroke: var(--cb-icon-color);
}

/* Define the animation for the speaker's sound waves */
@keyframes speaker-wave-animation {
  0%,
  100% {
    opacity: 0.3;
  }
  50% {
    opacity: 1;
  }
}

/* Apply the animation to the speaker's wave paths */
#cobrowse-voice-toggle.playing-audio .speaker-wave-1 {
  animation: speaker-wave-animation 1.5s infinite ease-in-out;
}

#cobrowse-voice-toggle.playing-audio .speaker-wave-2 {
  animation: speaker-wave-animation 1.5s infinite ease-in-out;
  animation-delay: -0.75s;
}

/* Define the animation for the listening bars */
@keyframes sound-wave-animation {
  0%,
  100% {
    transform: scaleY(0.4);
  }
  50% {
    transform: scaleY(1);
  }
}

/* Apply the animation to the paths (bars) of the sound wave SVG */
#cobrowse-voice-toggle.listening .icon-sound-wave path {
  transform-origin: center;
  animation: sound-wave-animation 1.2s infinite ease-in-out;
}

/* Add different delays to each bar to create the wave effect */
#cobrowse-voice-toggle.listening .icon-sound-wave path:nth-of-type(2) {
  animation-delay: -1s;
}
#cobrowse-voice-toggle.listening .icon-sound-wave path:nth-of-type(3) {
  animation-delay: -0.8s;
}
#cobrowse-voice-toggle.listening .icon-sound-wave path:nth-of-type(4) {
  animation-delay: -0.6s;
}