@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap");

.chevron {
  display: inline-block;
  transition: transform 0.3s;
}

.rotate-90 {
  transform: rotate(90deg);
}

.rotate {
  animation: spin 1s infinite linear;
}

/* Removed local @keyframes spin; now lives in animations.css */

* {
  font-family: "Inter", sans-serif !important;
}

/* ========== HTMX Loading Indicators ========== */
.htmx-indicator {
  display: none;
}
.htmx-request .htmx-indicator {
  display: inline;
}
.htmx-request .htmx-indicator-hide {
  display: none;
}

/* ========== Performance Tweaks ========== */
.group {
  will-change: background-color, color;
}

/* ========== Hero Section Visibility Overrides ========== */
#hero {
  opacity: 1 !important;
  visibility: visible !important;
}
#hero .hero-content {
  opacity: 1 !important;
  visibility: visible !important;
}

/* ========== Typewriter Effect ========== */
.typewriter {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  border-right: 4px solid;
  animation: typing 5s steps(40, end), blink 0.75s step-end infinite;
}
/* Removed local @keyframes typing/blink; now live in animations.css */

/* ========== Meeting Page Styles ========== */
/* Spinner visual style (animation defined in animations.css) */
.spinner {
  display: inline-block;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: #fff;
  vertical-align: middle;
}

/* Button state */
button.loading {
  opacity: 0.8;
  cursor: not-allowed;
}

/* Tab content transition */
.tab-content {
  transition: opacity 0.3s ease;
  display: block;
}

/* Audio bars (animation keyframes in animations.css) */
.audio-bar,
.desktop-audio-bar {
  animation: pulse 1.5s ease-in-out infinite;
  transform-origin: bottom;
}

/* Audio bars: delays */
.audio-bar:nth-child(1) {
  animation-delay: 0.2s;
}
.audio-bar:nth-child(2) {
  animation-delay: 0.4s;
}
.audio-bar:nth-child(3) {
  animation-delay: 0.1s;
}
.audio-bar:nth-child(4) {
  animation-delay: 0.3s;
}
.audio-bar:nth-child(5) {
  animation-delay: 0.5s;
}

.desktop-audio-bar:nth-child(1) {
  animation-delay: 0.3s;
}
.desktop-audio-bar:nth-child(2) {
  animation-delay: 0.5s;
}
.desktop-audio-bar:nth-child(3) {
  animation-delay: 0.2s;
}
.desktop-audio-bar:nth-child(4) {
  animation-delay: 0.4s;
}
.desktop-audio-bar:nth-child(5) {
  animation-delay: 0.1s;
}

/* ========== GUI Styles (templates/gui/gui.html) ========== */
.button-container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 150px;
  height: 150px;
  overflow: visible;
  }

.record-btn-Gui {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: none;
  background-color: #d10303;
  color: white;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  outline: none;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
  text-align: center;
  transform-origin: center center;
  overflow: hidden;
}

.record-btn-Gui.active {
  background-color: #3b82f6;
  box-shadow: 0 0 5px rgba(59, 130, 246, 0.5), 0 0 10px rgba(59, 130, 246, 0.5);
  animation: pulse-scale 1.5s ease-in-out infinite; /* keyframes in animations.css */
}

.response-area {
  margin-top: 20px;
  width: 80%;
  max-width: 600px;
}
.response-area textarea {
  width: 100%;
  height: 200px;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid #ddd;
  resize: none;
  font-size: 14px;
  font-family: "Arial", sans-serif;
  color: #333;
  background-color: #f9fafb;
}

/* ========== Icons / Navbar tweaks ========== */
iconify-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  transform: translateY(-1.8px);
  margin-right: 0.2rem;
}
/* Specific icon wrapper sizing (from gollam/face) */
.w-5.h-5 {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ========== Home / Welcome Page ========== */
/* Initial states */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(60px) rotateX(10deg);
  filter: blur(2px);
}
.animate-slideUp {
  opacity: 0;
  transform: translateY(50px);
}
.feature-card {
  opacity: 0;
  transform: translateY(30px);
  transition: box-shadow 0.3s ease;
}
.step-card {
  opacity: 0;
  transform: translateY(50px) rotateX(8deg);
  filter: blur(2px);
}
.stat-card {
  opacity: 0;
  transform: translateY(30px) scale(0.8) translateX(15px);
  filter: blur(1px);
  transition: box-shadow 0.3s ease;
}

/* Hover effects */
.feature-card:hover {
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.stat-card:hover {
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08);
}
.feature-card .w-16 {
  transition: box-shadow 0.3s ease;
}
.feature-card:hover .w-16 {
  box-shadow: 0 0 20px rgba(var(--color-primary-rgb), 0.3);
}

/* Rocket booster and particles */
.booster {
  position: absolute;
  bottom: 13px;
  left: 4px;
  transform: rotate(45deg);
  pointer-events: none;
}
.particle {
  position: absolute;
  background: radial-gradient(
    circle,
    rgba(255, 220, 100, 0.9) 0%,
    rgba(255, 100, 50, 0) 65%
  );
  opacity: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.group:hover .particle {
  animation: shoot 1.2s ease-out infinite;
}
.group:hover .particle-2 {
  animation-delay: 0.2s;
}
.group:hover .particle-3 {
  animation-delay: 0.4s;
}
.group:hover .particle-4 {
  animation-delay: 0.6s;
}
.group:hover .particle-5 {
  animation-delay: 0.8s;
}



/* ========== Animation Helpers ========== */
.animation-delay-200 {
  animation-delay: 0.2s !important;
}
.animation-delay-400 {
  animation-delay: 0.4s !important;
}
.animation-delay-600 {
  animation-delay: 0.6s !important;
}
.animation-delay-800 {
  animation-delay: 0.8s !important;
}

/* ========== Utilities ========== */
.max-h-40vh {
  max-height: 40vh;
}

/* ========== Support UI Enhancements ========== */
.support-attachment-preview {
  @apply flex items-center gap-3 p-3 bg-base-200/50 border border-base-300 rounded-lg 
         hover:bg-base-200 transition-colors duration-200;
}

.support-attachment-preview img {
  @apply w-12 h-12 object-cover rounded border border-base-300 
         hover:scale-105 transition-transform duration-200 cursor-pointer;
}

.support-notification {
  @apply alert text-sm py-2 animate-in slide-in-from-top-2 duration-300;
}

.support-char-counter {
  @apply absolute bottom-2 right-2 text-xs transition-colors duration-200;
}

.support-form-enhanced {
  @apply space-y-3;
}

.support-form-enhanced .textarea {
  @apply transition-all duration-200 focus:ring-2 focus:ring-primary/20;
}

.support-capture-btn {
  @apply btn btn-sm btn-outline gap-2 transition-all duration-200 hover:scale-105 active:scale-95;
}

.support-capture-btn:disabled {
  @apply opacity-50 cursor-not-allowed;
}

/* Mobile-specific enhancements */
@media (max-width: 640px) {
  .support-capture-btn span {
    @apply hidden;
  }
  
  .support-form-enhanced .textarea {
    @apply text-base; /* Prevent zoom on iOS */
  }
}

/* ========== Chat (templates/gollam/gollam_chat.html) ========== */
/* Message bubbles */
.user-message {
  background: var(--color-primary);
  color: var(--color-primary-content);
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
  margin: 0.5rem 0 0.5rem auto;
  max-width: 85%;
  position: relative;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
  animation: slideInRight 0.3s ease-out forwards;
  width: fit-content;
  font-size: 0.875rem;
}

.assistant-message {
  background: var(--color-base-200);
  color: var(--color-base-content);
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
  margin: 0.5rem auto 0.5rem 0;
  max-width: 85%;
  position: relative;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
  animation: slideInLeft 0.3s ease-out forwards;
  width: fit-content;
  font-size: 0.875rem;
}

.user-message .message-meta {
  color: color-mix(in srgb, var(--color-primary-content) 70%, transparent);
}

/* Notifications */
.notification-message {
  background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
  color: #0f172a;
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
  margin: 0.5rem auto 0.5rem 0;
  max-width: 100%;
  position: relative;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
  animation: slideInLeft 0.3s ease-out forwards;
  width: fit-content;
  border-left: 4px solid #3b82f6;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
}

.notification-cog {
  width: 1rem;
  height: 1rem;
  color: #3b82f6;
  animation: spin 2s linear infinite;
  flex-shrink: 0;
}

.notification-text {
  font-weight: 500;
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
  white-space: nowrap;
}

.cog-icon {
    width: 100%;
  height: 100%;
  fill: currentColor;
}

.cog-emoji {
  font-size: 1rem;
  display: inline-block;
  animation: spin 2s linear infinite;
}

/* Notification variants */
.notification-message.processing {
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  border-left-color: #f59e0b;
}
.notification-message.processing .notification-cog {
  color: #f59e0b;
}

.notification-message.success {
  background: linear-gradient(135deg, #dcfce7, #bbf7d0);
  border-left-color: #22c55e;
}
.notification-message.success .notification-cog {
  color: #22c55e;
  animation: none;
}

.notification-message.error {
  background: linear-gradient(135deg, #fee2e2, #fecaca);
  border-left-color: #ef4444;
  }
.notification-message.error .notification-cog {
  color: #ef4444;
  animation: none;
}

/* Scrollbar for chat history */
.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  background: hsl(var(--bc) / 0.2);
  border-radius: 20px;
  transition: background 0.2s;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: hsl(var(--bc) / 0.3);
}

/* Message container */
#chat-history {
  scroll-behavior: smooth;
}

/* Metadata */
.message-meta {
  font-size: 0.75rem;
  color: #6b7280;
  margin-top: 0.25rem;
}
.user-message .message-meta {
  text-align: right;
}

/* Audio visualization on record button */
#record-btn {
  position: relative;
  overflow: hidden;
}
#record-btn #mic-icon {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}
#record-btn #audio-bars {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}
#record-btn.recording #mic-icon {
  display: none;
}
#record-btn.recording #audio-bars {
  display: flex;
}

.bar {
  background: hsl(var(--a));
  height: 6px;
  width: 2px;
  margin: 0 1px;
  animation: pulse 1.2s infinite ease-in-out;
  border-radius: 1px;
}
.bar:nth-child(1) {
  animation-delay: 0s;
}
.bar:nth-child(2) {
  animation-delay: 0.2s;
}
.bar:nth-child(3) {
  animation-delay: 0.4s;
}

/* Chat input states */
#transcription-input:focus {
  box-shadow: 0 0 0 2px hsl(var(--p) / 0.2);
  border-color: hsl(var(--p) / 0.5);
}
#transcription-input.recording-active {
  background: linear-gradient(90deg, hsl(var(--a) / 0.1) 0%, transparent 100%);
  animation: pulse-glow 2s infinite;
}
#transcription-input.streaming {
  background: linear-gradient(90deg, hsl(var(--a) / 0.05) 0%, transparent 100%);
  animation: streaming-gradient 2s linear infinite;
}
#transcription-input.completed {
  background: linear-gradient(90deg, hsl(var(--su) / 0.1) 0%, transparent 100%);
  transition: all 0.3s ease;
}