/* Forerunner AI Live Chat Widget CSS */
/* Using WordPress default fonts instead of external Google Fonts for privacy compliance */

#forerunner-chat-widget, 
#forerunner-chat-icon-container, 
#forerunner-chat-greeting {
  font-family: inherit;
}

:root {
  --forerunner-primary-color: #F47F1F;
  --forerunner-primary-color-darker: #d86d14;
  --forerunner-secondary-color: #f8f9fa;
  --forerunner-background-color: #ffffff;
  --forerunner-font-color: #212529;
  --forerunner-font-color-light: #6c757d;
  --forerunner-light-font-color: #ffffff;
  --forerunner-border-color: #e9ecef;
  
  /* Customizable color variables - can be overridden via admin settings */
  --forerunner-button-bg: var(--forerunner-primary-color);
  --forerunner-button-hover: var(--forerunner-primary-color-darker);
  --forerunner-voice-connecting: #ffc107;
  --forerunner-voice-active: #dc3545;
  --forerunner-widget-header: var(--forerunner-primary-color);
  --forerunner-chat-bubble-user: var(--forerunner-primary-color);
}

#forerunner-chat-icon-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  align-items: center;
  cursor: pointer;
  z-index: 999999;
  gap: 12px;
}

#forerunner-chat-greeting {
  position: relative;
  background: var(--forerunner-background-color);
  color: var(--forerunner-font-color);
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 13px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  opacity: 1;
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
  visibility: visible;
  max-width: 200px;
  line-height: 1.4;
  border: 1px solid rgba(200, 200, 200, 0.6);
  backdrop-filter: blur(10px);
  overflow: hidden;
}

#forerunner-chat-greeting {
  --shimmer-angle: 45deg;
}

#forerunner-chat-greeting::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 12px;
  background: linear-gradient(
    45deg,
    transparent 0%,
    transparent 40%,
    rgba(255, 255, 255, 0.7) 50%,
    transparent 60%,
    transparent 100%
  );
  opacity: 0;
  animation: glistenEffect 4s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

@keyframes glistenEffect {
  0% {
    opacity: 0;
    transform: translateX(-100%) rotate(45deg);
  }
  5% {
    opacity: 0.6;
  }
  10% {
    opacity: 0;
    transform: translateX(100%) rotate(45deg);
  }
  100% {
    opacity: 0;
    transform: translateX(100%) rotate(45deg);
  }
}

@keyframes textGradientMove {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}

#forerunner-chat-greeting.hidden {
  opacity: 0;
  visibility: hidden;
}

#forerunner-chat-icon {
  background: var(--forerunner-button-bg, #F47F1F);
  color: var(--forerunner-light-font-color, #ffffff);
  border: none;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
  position: relative;
  transition: transform 0.3s ease-in-out;
  overflow: visible;
}

/* Animated rotating border */
#forerunner-chat-icon::before {
  content: '';
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    transparent 200deg,
    rgba(255, 255, 255, 0.2) 220deg,
    rgba(255, 255, 255, 0.5) 250deg,
    rgba(255, 255, 255, 0.9) 280deg,
    rgba(255, 255, 255, 0.6) 310deg,
    rgba(255, 255, 255, 0.3) 330deg,
    transparent 350deg,
    transparent 360deg
  );
  animation: rotateGradient 2.5s linear infinite;
  z-index: -1;
}

/* Inner border for cleaner look */
#forerunner-chat-icon::after {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  border-radius: 50%;
  background: var(--forerunner-button-bg, #F47F1F);
  z-index: -1;
}

@keyframes rotateGradient {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

#forerunner-chat-icon-container:hover #forerunner-chat-icon {
  transform: scale(1.1);
}



#forerunner-chat-icon svg {
  width: 24px;
  height: 24px;
  fill: var(--forerunner-light-font-color, #ffffff);
}

#forerunner-chat-widget {
  position: fixed;
  bottom: 95px;
  right: 20px;
  width: 370px;
  height: min(60vh, 720px);
  background: transparent;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(230, 235, 240, 0.8);
  display: none;
  flex-direction: column;
  overflow: hidden;
  transform-origin: bottom right;
  animation: forerunner-scale-in 0.3s ease-in-out;
  z-index: 999998;
}

@keyframes forerunner-scale-in {
  from {
    opacity: 0;
    transform: scale(0.5);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

#forerunner-chat-header {
  background: rgba(242, 245, 247, 0.85);
  backdrop-filter: blur(15px) brightness(1.1);
  -webkit-backdrop-filter: blur(15px) brightness(1.1);
  color: #020D28;
  padding: 18px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
  border-bottom: 1px solid rgba(210, 220, 230, 0.8);
  border-radius: 12px 12px 0 0;
  position: relative;
  text-shadow: none;
}

.header-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.header-title {
  font-size: 18px;
  font-weight: 800;
  line-height: 1.2;
  background-image: linear-gradient(90deg, #ff9b26, #ee4f27, #ff9b26);
  background-size: 200% auto;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: textGradientMove 3s linear infinite;
}

.header-subtitle {
  font-size: 13px;
  font-weight: 400;
  color: #020D28;
  opacity: 0.8;
  line-height: 1.3;
}

#forerunner-close-chat-btn {
  background: none;
  border: none;
  color: #020D28;
  font-size: 28px;
  font-weight: 400;
  cursor: pointer;
  line-height: 1;
  padding: 0;
  opacity: 0.9;
  transition: opacity 0.2s ease;
  z-index: 10;
}

#forerunner-close-chat-btn:hover {
  opacity: 1;
}

#forerunner-chat-messages {
  flex-grow: 1;
  padding: 20px;
  padding-bottom: 20px;
  overflow-y: auto;
  background: var(--forerunner-background-color);
  border-radius: 0 0 12px 12px;
  backdrop-filter: blur(20px);
}

#forerunner-quick-actions {
  padding: 5px 5px 15px;
  background: var(--forerunner-background-color);
  border-radius: 0 0 12px 13px;
  margin-top: -12px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-start;
}

.quick-action-btn {
  background: var(--forerunner-background-color);
  color: var(--forerunner-font-color);
  border: 2px solid var(--forerunner-button-bg);
  border-radius: 20px;
  padding: 10px 18px;
  margin: 4px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-family: inherit;
  line-height: 1;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

.quick-action-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s ease;
}

.quick-action-btn:hover {
  background: rgba(242, 245, 247, 0.8);
  border-color: #d35400;
  color: #2c3e50;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.quick-action-btn:hover::before {
  left: 100%;
}

.quick-action-btn:active {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.forerunner-message {
  margin-bottom: 15px;
  display: flex;
  flex-direction: column;
  animation: forerunner-fade-in 0.3s ease-in;
}

@keyframes forerunner-fade-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.forerunner-message .sender {
  display: flex;
  align-items: center;
  font-weight: 500;
  margin-bottom: 4px;
  font-size: 13px;
  color: var(--forerunner-font-color);
  gap: 6px;
}

.forerunner-message .bot-icon {
  max-width: 32px;
  max-height: 32px;
  width: 32px;
  height: 32px;
  margin-right: 8px;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.forerunner-message .bot-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

.forerunner-message .bot-icon-svg {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--forerunner-button-bg);
  border-radius: 50%;
  color: var(--forerunner-light-font-color);
}

.forerunner-message .bot-icon-svg svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.forerunner-user-message {
  align-items: flex-end;
}

.forerunner-bot-message {
  align-items: flex-start;
}

.forerunner-message .text {
  padding: 10px 16px;
  border-radius: 16px;
  max-width: 85%;
  word-wrap: break-word;
  line-height: 1.4;
  font-size: 13px;
}

.forerunner-user-message .text {
  background: var(--forerunner-chat-bubble-user);
  color: var(--forerunner-light-font-color);
  border: 1px solid var(--forerunner-button-bg);
  border-bottom-right-radius: 4px;
}

.forerunner-bot-message .text {
  background: var(--forerunner-background-color);
  color: var(--forerunner-font-color);
  border: 1px solid rgba(200, 210, 220, 0.8);
  border-bottom-left-radius: 4px;
}

.forerunner-bot-message .text strong {
  font-weight: 600;
  color: var(--forerunner-font-color);
}

.forerunner-bot-message .text em {
  font-style: italic;
  color: var(--forerunner-font-color);
}

.forerunner-bot-message .text a {
  color: var(--forerunner-button-bg);
  text-decoration: none;
  border-bottom: 1px solid var(--forerunner-button-bg);
  transition: all 0.2s ease;
  word-break: break-all;
}

.forerunner-bot-message .text a:hover {
  color: #1565c0;
  text-decoration: underline;
}



#forerunner-chat-input-container {
  flex-shrink: 0;
  background: var(--forerunner-background-color);
  border-radius: 10px 10px 0 0;
  border: 1px solid rgba(220, 230, 240, 0.7);
  border-bottom: none;
  margin-top: -15px;
  overflow: hidden;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
}

#forerunner-chat-input {
  display: flex;
  align-items: center;
  padding: 10px 15px;
  background: var(--forerunner-background-color);
}

#forerunner-chat-input input {
  flex-grow: 1;
  min-width: 0;
  height: 45px;
  padding: 0 20px;
  border: 1px solid rgba(200, 210, 220, 0.8);
  border-radius: 22.5px;
  outline: none;
  font-size: 16px; /* Increased to 16px to prevent mobile zoom */
  transition: border-color 0.3s;
  font-family: inherit;
}

#forerunner-chat-input input:focus {
  border-color: var(--forerunner-button-bg);
}

#forerunner-send-btn {
  position: relative;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  margin-left: 10px;
  padding: 0;
  flex-shrink: 0;
  background-color: var(--forerunner-button-bg);
  border: 1px solid var(--forerunner-button-bg);
  cursor: pointer;
  transition: all 0.3s ease;
}

#forerunner-send-btn:hover:not(:disabled) {
  background-color: var(--forerunner-button-hover);
  transform: scale(1.05);
}

#forerunner-send-btn.loading {
  cursor: wait;
  transform: scale(1);
}

.forerunner-typing-indicator {
  display: flex;
  align-items: center;
  padding: 12px 18px;
  background: var(--forerunner-background-color);
  border: 1px solid rgba(200, 210, 220, 0.8);
  border-radius: 20px;
  border-bottom-left-radius: 4px;
}

.forerunner-typing-indicator span {
  height: 8px;
  width: 8px;
  background-color: #999;
  border-radius: 50%;
  display: inline-block;
  margin: 0 2px;
  animation: forerunner-bounce 1.4s infinite ease-in-out both;
}

.forerunner-typing-indicator span:nth-child(2) {
  animation-delay: -0.8s;
}

.forerunner-typing-indicator span:nth-child(3) {
  animation-delay: -0.4s;
}

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

#forerunner-end-chat-container {
  display: none;
  text-align: center;
  padding: 20px;
}

#forerunner-end-chat-container p {
  margin: 0 0 15px 0;
  font-size: 14px;
  color: var(--forerunner-font-color-light);
}

#forerunner-start-new-chat-btn {
  background: var(--forerunner-button-bg);
  color: var(--forerunner-light-font-color);
  border: 1px solid var(--forerunner-button-bg);
  padding: 10px 20px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

#forerunner-start-new-chat-btn:hover {
  background-color: var(--forerunner-primary-color-darker);
}

#forerunner-ai-disclaimer {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 30px 15px 8px 15px;
  background: var(--forerunner-background-color);
  border-top: 1px solid rgba(220, 230, 240, .6);
}

#forerunner-ai-disclaimer svg {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: block;
  margin-top: 2px;
}

/* Additional styling for disclaimer icon when using custom images */
.disclaimer-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}

.disclaimer-icon img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}

.disclaimer-icon svg {
  width: 32px;
  height: 32px;
}

#forerunner-ai-disclaimer .disclaimer-text {
  flex: 1;
}

#forerunner-ai-disclaimer .primary-text {
  font-size: 15px;
  font-weight: 700;
  color: var(--forerunner-font-color);
  margin-bottom: 2px;
  line-height: 1.2;
}

#forerunner-ai-disclaimer .secondary-text {
  font-size: 13px;
  color: var(--forerunner-font-color-light);
  line-height: 1.2;
  margin-bottom: 8px;
}

#forerunner-ai-disclaimer .tertiary-text {
  font-size: 11px;
  color: var(--forerunner-font-color-light);
  font-weight: 400;
  line-height: 1.2;
  margin-bottom: 8px;
  opacity: 0.8;
}

.speak-to-team-btn {
  background: var(--forerunner-button-bg);
  color: var(--forerunner-light-font-color);
  border: 1px solid var(--forerunner-button-bg);
  border-radius: 16px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
  font-family: inherit;
  line-height: 1;
}

.speak-to-team-btn:hover {
  background: var(--forerunner-primary-color-darker);
  transform: translateY(-1px);
}

.speak-to-team-btn:active {
  transform: translateY(0);
}

.speak-to-team-btn svg {
  fill: currentColor;
  flex-shrink: 0;
}

#forerunner-ai-disclaimer .primary-text, #forerunner-ai-disclaimer .secondary-text {
  display: block;
}

/* Mobile-specific styles to prevent zoom and improve UX */
@media screen and (max-width: 768px) {
  #forerunner-chat-widget {
    width: calc(100vw - 20px);
    max-width: 370px;
    height: min(70vh, 600px);
    bottom: 80px;
    right: 10px;
  }
  
  #forerunner-chat-input input {
    font-size: 16px; /* Ensure 16px minimum on mobile to prevent zoom */
    -webkit-text-size-adjust: 100%; /* Prevent text size adjustment */
  }
  
  /* Prevent zoom on input focus for iOS */
  #forerunner-chat-input input:focus {
    transform: translateZ(0); /* Force hardware acceleration */
  }
}
st
/* Voice Chat Styles */
#forerunner-voice-btn {
  position: relative;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  margin-right: 10px;
  padding: 0;
  flex-shrink: 0;
  background-color: var(--forerunner-button-bg);
  border: 1px solid var(--forerunner-button-bg);
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

#forerunner-voice-btn:hover:not(:disabled) {
  background-color: var(--forerunner-button-hover);
  transform: scale(1.05);
}

#forerunner-voice-btn:active {
  transform: scale(1);
}

#forerunner-voice-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

#forerunner-voice-status {
  background: #ffffff !important;
  border: 2px solid var(--forerunner-button-bg, #F47F1F);
  border-radius: 0px;
  padding: 12px 16px;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 4px 12px var(--forerunner-button-bg);
  min-height: 40px;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  opacity: 1 !important;
  position: relative;
  z-index: 10;
  width: 100%;
  box-sizing: border-box;
}

.voice-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  height: 20px; /* Fixed height container */
  min-width: 25px; /* Fixed width to prevent horizontal shift */
}

.voice-status-text {
  font-size: 13px;
  color: #333;
  font-weight: 500;
}

.voice-animation {
  display: flex;
  gap: 2px;
  align-items: center;
  height: 20px; /* Fixed height container */
}

.voice-bar {
  width: 3px;
  background: var(--forerunner-button-bg);
  border-radius: 2px;
  transition: transform 0.1s ease;
  transform-origin: center;
}

.voice-bar:nth-child(1) { height: 8px; animation-delay: 0s; }
.voice-bar:nth-child(2) { height: 12px; animation-delay: 0.1s; }
.voice-bar:nth-child(3) { height: 16px; animation-delay: 0.2s; }
.voice-bar:nth-child(4) { height: 12px; animation-delay: 0.3s; }
.voice-bar:nth-child(5) { height: 8px; animation-delay: 0.4s; }

/* Voice status states */
.voice-connecting .voice-bar {
  animation: voice-pulse 1s infinite;
  background: #ffc107;
}

.voice-listening .voice-bar {
  animation: voice-bounce 0.6s infinite alternate;
  background: var(--forerunner-button-bg);
}

.voice-speaking .voice-bar {
  background: #2ecc71;
  animation: voice-bounce 0.4s infinite alternate;
}

/* Legacy support for old voice-animation spans */
.voice-animation span {
  width: 3px;
  height: 12px;
  background: var(--forerunner-button-bg);
  border-radius: 2px;
  animation: voice-pulse 1.2s ease-in-out infinite;
}

.voice-animation span:nth-child(2) {
  animation-delay: 0.1s;
}

.voice-animation span:nth-child(3) {
  animation-delay: 0.2s;
}

@keyframes voice-pulse {
  0%, 100% {
    opacity: 0.3;
    transform: scaleY(0.4);
  }
  50% {
    opacity: 1;
    transform: scaleY(1);
  }
}

@keyframes voice-bounce {
  from { 
    transform: scaleY(0.4);
  }
  to { 
    transform: scaleY(1.2);
  }
}

/* Adjust chat input layout for voice button */
#forerunner-chat-input {
  display: flex;
  align-items: center;
  gap: 4px;
}

#forerunner-chat-input input {
  flex: 1;
}

/* Voice button states */
#forerunner-voice-btn[data-state="connecting"] {
  background: var(--forerunner-voice-connecting);
  animation: pulse 1.5s ease-in-out infinite;
}

#forerunner-voice-btn[data-state="active"] {
  background: var(--forerunner-voice-active);
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.7);
  }
  70% {
    box-shadow: 0 0 0 6px rgba(255, 193, 7, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 193, 7, 0);
  }
}

/* Voice-Only Mode Styles - Adaptive Clean Design */
#forerunner-chat-widget.voice-only-mode {
  background: rgba(0, 0, 0, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 0;
  width: 420px !important;
  height: 220px !important;
  min-height: 220px !important;
  max-height: 220px !important;
}

#forerunner-chat-widget.voice-only-mode #forerunner-chat-header {
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: white;
  padding: 16px 20px 12px 20px;
}

#forerunner-chat-widget.voice-only-mode #forerunner-chat-header .header-title {
  color: white;
  font-size: 18px;
  font-weight: 800;
}

#forerunner-chat-widget.voice-only-mode #forerunner-chat-header .header-subtitle {
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
}

#forerunner-chat-widget.voice-only-mode #forerunner-close-chat-btn {
  color: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(10px);
  transition: all 0.2s ease;
}

#forerunner-chat-widget.voice-only-mode #forerunner-close-chat-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  color: white;
  transform: scale(1.1);
}

/* OpenAI Voice Status Layout - Better Spacing */
#forerunner-chat-widget.voice-only-mode #forerunner-voice-status {
  background: rgba(255, 255, 255, 0.1) !important;
  border-radius: 16px;
  margin: 0px;
  padding: 10px;
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  position: relative;
  min-height: 120px;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.openai-voice-layout {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  justify-content: space-between;
  gap: 0px;
}

.openai-status-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  font-weight: 500;
  text-align: center;
}

.openai-status-dot {
  width: 8px;
  height: 8px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  display: block;
}

.openai-status-text {
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  font-weight: 500;
}

.openai-waveform-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  padding: 12px 0;
}

.openai-waveform {
  display: flex;
  align-items: end;
  justify-content: center;
  gap: 1px;
  height: 40px;
  width: 100%;
  padding: 0 12px;
}

.openai-bar {
  width: 2px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 1px;
  transition: height 0.05s ease;
  height: 8px;
  min-height: 4px;
  flex: 1;
  max-width: 4px;
}

/* Bars now use real-time audio data instead of CSS animations */

.openai-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.openai-pause-btn {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
}

.openai-pause-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.5);
  transform: scale(1.05);
}

.openai-pause-btn svg {
  width: 16px;
  height: 16px;
}

.openai-timer {
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  font-weight: 600;
  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
}

/* Enhanced Waveform for Voice-Only Mode */
#forerunner-chat-widget.voice-only-mode .voice-indicator {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 24px;
  padding: 16px 24px;
  min-width: 200px;
  height: 60px;
  backdrop-filter: blur(15px);
  align-self: center;
}

#forerunner-chat-widget.voice-only-mode .voice-bar {
  width: 3px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 2px;
}

/* Voice Status Text in Voice-Only Mode */
#forerunner-chat-widget.voice-only-mode .voice-status-text {
  color: white;
  font-size: 16px;
  font-weight: 500;
  text-align: center;
  margin-top: 8px;
}

/* Voice-Only Mode Animations */
.voice-only-mode.voice-connecting {
  animation: voice-mode-pulse 2s ease-in-out infinite;
}

.voice-only-mode.voice-listening {
  animation: voice-mode-breathe 4s ease-in-out infinite;
}

.voice-only-mode.voice-speaking {
  animation: voice-mode-active 0.8s ease-in-out infinite alternate;
}

@keyframes voice-mode-pulse {
  0%, 100% {
    box-shadow: 0 20px 60px rgba(102, 126, 234, 0.3);
  }
  50% {
    box-shadow: 0 25px 80px rgba(102, 126, 234, 0.5);
  }
}

@keyframes voice-mode-breathe {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 20px 60px rgba(102, 126, 234, 0.3);
  }
  50% {
    transform: scale(1.02);
    box-shadow: 0 22px 70px rgba(102, 126, 234, 0.4);
  }
}

@keyframes voice-mode-active {
  0% {
    transform: scale(1);
    box-shadow: 0 20px 60px rgba(79, 172, 254, 0.4);
  }
  100% {
    transform: scale(1.03);
    box-shadow: 0 25px 80px rgba(79, 172, 254, 0.6);
  }
}

@keyframes openai-wave {
  0%, 100% {
    transform: scaleY(0.3);
  }
  50% {
    transform: scaleY(1);
  }
}

/* Responsive Voice-Only Mode */
@media screen and (max-width: 768px) {
  #forerunner-chat-widget.voice-only-mode {
    width: calc(100vw - 40px) !important;
    max-width: 380px !important;
    height: auto !important;
    min-height: 200px !important;
    max-height: 280px !important;
    bottom: 20px !important;
    right: 20px !important;
  }
  
  #forerunner-chat-widget.voice-only-mode #forerunner-voice-status {
    margin: 0px;
    padding: 24px 20px;
    min-height: 100px;
  }
  
  #forerunner-chat-widget.voice-only-mode .voice-indicator {
    min-width: 150px;
    height: 50px;
    padding: 12px 20px;
  }
}