/* 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: var(--forerunner-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);
  
  /* Typography - overridable via admin settings */
  --forerunner-font-size-base: 13.5px;
  --forerunner-font-size-header: 18px;
}

#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: var(--forerunner-font-size-base, 13.5px);
  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;
  color: var(--forerunner-light-font-color, #ffffff);
}

#forerunner-chat-widget {
  position: fixed;
  bottom: 95px;
  right: 20px;
  width: var(--forerunner-widget-width, 425px);
  max-width: min(var(--forerunner-widget-width, 425px), calc(100vw - 40px));
  height: var(--forerunner-widget-height, 675px);
  background: transparent;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  border: none !important;
  display: none;
  flex-direction: column;
  overflow: hidden;
  transform-origin: bottom right;
  animation: forerunner-scale-in 0.3s ease-in-out;
  z-index: 999998;
  transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              max-width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              bottom 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              right 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              border-radius 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

@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: var(--forerunner-font-size-header, 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: var(--forerunner-font-size-base, 13.5px);
  font-weight: 400;
  color: #020D28;
  opacity: 0.8;
  line-height: 1.3;
}

#forerunner-close-chat-btn {
  background: none;
  border: none;
  color: var(--forerunner-font-color-light, #6c757d);
  cursor: pointer;
  padding: 4px 6px;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: background 0.2s, color 0.2s;
}

#forerunner-close-chat-btn svg {
  width: 18px;
  height: 18px;
}

#forerunner-close-chat-btn:hover {
  background: rgba(0, 0, 0, 0.08);
  color: var(--forerunner-font-color, #212529);
}

#forerunner-reset-chat-btn {
  background: none;
  border: none;
  color: var(--forerunner-font-color-light, #6c757d);
  cursor: pointer;
  padding: 4px 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: background 0.2s, color 0.2s;
}

#forerunner-reset-chat-btn svg {
  width: 16px;
  height: 16px;
}

#forerunner-reset-chat-btn:hover {
  background: rgba(0, 0, 0, 0.08);
  color: var(--forerunner-font-color, #212529);
}

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

#forerunner-quick-actions {
  padding: 5px 5px 15px;
  background: var(--forerunner-background-color);
  border-radius: 0 0 12px 13px;
  margin-top: -9px;
  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: 1px solid var(--forerunner-button-bg);
  border-radius: 20px;
  padding: 10px 18px;
  margin: 4px;
  font-size: var(--forerunner-font-size-base, 13.5px);
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  font-family: inherit;
  line-height: 1;
  white-space: nowrap;
  flex-shrink: 0;
}

.quick-action-btn:hover {
  background: rgba(242, 245, 247, 0.9);
  color: var(--forerunner-font-color, #212529);
  border-color: var(--forerunner-button-hover, #d86d14);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.quick-action-btn:active {
  background: rgba(230, 235, 240, 1);
}

/* ===========================
   ChatKit Landing Page Layout (Pro)
   =========================== */

.forerunner-chatkit-welcome {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 0 4px;
  flex: 1;
  box-sizing: border-box;
  opacity: 1;
  transition: opacity 0.2s ease;
}

.forerunner-chatkit-heading {
  font-size: 21px;
  font-weight: 600;
  color: var(--forerunner-font-color, #212529);
  margin: 0 0 8px 0;
  line-height: 1.3;
}

.forerunner-chatkit-actions {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.forerunner-chatkit-action {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 12px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--forerunner-font-size-base, 14px);
  font-weight: 400;
  color: var(--forerunner-font-color, #212529);
  text-align: left;
  text-decoration: none;
  transition: background-color 0.15s ease;
  border-radius: 8px;
  margin-bottom: 2px;
  position: relative;
}

.forerunner-chatkit-action:hover {
  background-color: #f4f4f5;
  color: var(--forerunner-font-color, #212529);
  text-decoration: none;
}

.forerunner-chatkit-action-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--forerunner-font-color-light, #6c757d);
}

.forerunner-chatkit-action:hover .forerunner-chatkit-action-icon {
  color: var(--forerunner-font-color, #212529);
}

.forerunner-chatkit-action-icon svg {
  width: 20px;
  height: 20px;
}

.forerunner-chatkit-action-label {
  flex: 1;
}

/* Send arrow that appears on hover */
.forerunner-chatkit-action-send {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.15s ease;
  color: var(--forerunner-font-color-light, #6c757d);
}

.forerunner-chatkit-action-send svg {
  width: 16px;
  height: 16px;
}

.forerunner-chatkit-action:hover .forerunner-chatkit-action-send {
  opacity: 1;
}

/* Maximized mode ChatKit adjustments */
#forerunner-chat-widget.forerunner-maximized .forerunner-chatkit-heading {
  font-size: 26px;
}

#forerunner-chat-widget.forerunner-maximized .forerunner-chatkit-action {
  font-size: 15px;
  padding: 15px 14px;
}

.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: var(--forerunner-font-size-base, 13.5px);
  color: var(--forerunner-font-color);
}

.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: 12px 18px;
  border-radius: 16px;
  max-width: 85%;
  word-wrap: break-word;
  line-height: 1.2;
  font-size: var(--forerunner-font-size-base, 13.5px);
  font-weight: var(--forerunner-font-weight, 400);
}

.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: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  transition: opacity 0.2s ease;
  word-break: break-all;
}

.forerunner-bot-message .text a:hover {
  opacity: 0.7;
}



#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: -20px;
  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: 12px 16px;
  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%;
  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;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

#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); }
}

/* Streaming word reveal for AI responses */
.forerunner-stream-word {
  opacity: 0;
  transition: opacity 0.15s ease;
}

.forerunner-stream-word.forerunner-visible {
  opacity: 1;
}

/* Pulsing dot cursor during streaming */
.forerunner-streaming::after {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--forerunner-font-color-light, #6c757d);
  margin-left: 4px;
  vertical-align: middle;
  animation: forerunner-pulse-dot 1.2s ease-in-out infinite;
}

@keyframes forerunner-pulse-dot {
  0%, 100% { opacity: 0.3; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1); }
}

#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: var(--forerunner-font-size-base, 13.5px);
  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: 0px !important;
  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: min(var(--forerunner-widget-width, 425px), calc(100vw - 20px));
    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 */
  }
}

/* Voice Chat Styles */
#forerunner-voice-btn {
  position: relative;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  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;
  color: #fff;
  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,
#forerunner-chat-widget.voice-only-mode #forerunner-reset-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,
#forerunner-chat-widget.voice-only-mode #forerunner-reset-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);
  }
}

/* ===========================
   Markdown Content Styles
   =========================== */

/* Table wrapper for horizontal scroll */
.forerunner-table-wrapper {
  overflow-x: auto;
  margin: 8px 0;
  border-radius: 6px;
  border: 1px solid var(--forerunner-border-color, #e9ecef);
}

.forerunner-md-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--forerunner-font-size-base, 13.5px);
  line-height: 1.4;
}

.forerunner-md-table th,
.forerunner-md-table td {
  padding: 6px 10px;
  text-align: left;
  border-bottom: 1px solid var(--forerunner-border-color, #e9ecef);
  white-space: nowrap;
}

.forerunner-md-table th {
  background: rgba(0, 0, 0, 0.04);
  font-weight: 600;
  font-size: calc(var(--forerunner-font-size-base, 13.5px) - 1.5px);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--forerunner-font-color-light, #6c757d);
}

.forerunner-md-table tbody tr:last-child td {
  border-bottom: none;
}

.forerunner-md-table tbody tr:hover {
  background: rgba(0, 0, 0, 0.02);
}

/* Headings in chat */
.forerunner-md-heading {
  margin: 10px 0 4px 0;
  font-size: calc(var(--forerunner-font-size-base, 13.5px) + 0.5px);
  font-weight: 600;
  color: var(--forerunner-font-color, #212529);
  line-height: 1.3;
}

h3.forerunner-md-heading {
  font-size: calc(var(--forerunner-font-size-base, 13.5px) + 1.5px);
}

/* Lists */
.forerunner-md-list {
  margin: 6px 0;
  padding-left: 20px;
}

.forerunner-md-list li {
  margin: 3px 0;
  line-height: 1.2;
  font-size: var(--forerunner-font-size-base, 13.5px);
}

/* Code blocks */
.forerunner-code-block {
  background: #1e1e2e;
  color: #cdd6f4;
  padding: 10px 14px;
  border-radius: 6px;
  margin: 8px 0;
  overflow-x: auto;
  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
  font-size: 12px;
  line-height: 1.5;
  white-space: pre;
}

.forerunner-code-block code {
  background: none;
  padding: 0;
  color: inherit;
  font-size: inherit;
}

/* Inline code */
.forerunner-inline-code {
  background: rgba(0, 0, 0, 0.06);
  padding: 1px 5px;
  border-radius: 3px;
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 12px;
  color: #d63384;
}

/* Links in messages */
/* ===========================
   Maximized Chat Mode (Pro)
   =========================== */

body #forerunner-chat-widget.forerunner-maximized {
  width: var(--forerunner-maximized-width, 90vw);
  max-width: var(--forerunner-maximized-max-width, 900px);
  height: var(--forerunner-maximized-height, 85vh);
  bottom: 5vh;
  right: 5vw;
  border-radius: 12px;
}

#forerunner-maximize-btn {
  background: none;
  border: none;
  color: var(--forerunner-font-color-light, #6c757d);
  font-size: 16px;
  cursor: pointer;
  padding: 4px 6px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: background 0.2s, color 0.2s;
}

#forerunner-maximize-btn:hover {
  background: rgba(0, 0, 0, 0.08);
  color: var(--forerunner-font-color, #212529);
}

#forerunner-maximize-btn svg {
  width: 16px;
  height: 16px;
}

.forerunner-header-buttons {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Maximized mode table adjustments */
#forerunner-chat-widget.forerunner-maximized .forerunner-md-table th,
#forerunner-chat-widget.forerunner-maximized .forerunner-md-table td {
  white-space: normal;
  padding: 8px 12px;
}

#forerunner-chat-widget.forerunner-maximized .forerunner-md-table {
  font-size: var(--forerunner-font-size-base, 14px);
}

#forerunner-chat-widget.forerunner-maximized .forerunner-code-block {
  font-size: 13px;
}

/* Responsive maximized mode */
@media screen and (max-width: 768px) {
  body #forerunner-chat-widget.forerunner-maximized {
    width: calc(100vw - 20px);
    height: calc(100vh - 20px);
    bottom: 10px;
    right: 10px;
    max-width: none;
    border-radius: 8px;
  }
}

/* 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;
  }
}