/* ============================================================
   common.css — shared structural rules across modules.
   Loads BEFORE the per-theme stylesheet so themes can override
   colors via CSS variables or direct rules.
   ============================================================ */

/* ---- Header actions container ---- */
.gq-header-actions,
.t-header-actions { display: flex; gap: 8px; align-items: center; justify-content: flex-end; }

/* ---- History modal (theme provides colors) ---- */
.history-backdrop {
  position: fixed; inset: 0; z-index: 1000;
  backdrop-filter: blur(6px);
  display: flex; align-items: flex-end; justify-content: center;
  opacity: 0;
  transition: opacity 0.18s ease;
}
.history-backdrop.open    { opacity: 1; }
.history-backdrop.closing { opacity: 0; }

.history-modal {
  width: 100%; max-width: 480px;
  max-height: 80vh; overflow-y: auto;
  border-radius: 20px 20px 0 0;
  padding: 20px;
  transform: translateY(20px);
  transition: transform 0.22s ease;
}
.history-backdrop.open .history-modal { transform: translateY(0); }

@media (min-width: 640px) {
  .history-backdrop { align-items: center; }
  .history-modal { border-radius: 20px; max-height: 70vh; }
}

.history-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 16px; padding-bottom: 12px;
}
.history-title {
  font-family: inherit;
  font-size: 17px; font-weight: 700;
}
.history-close {
  width: 32px; height: 32px; border-radius: 50%;
  border: none; background: transparent;
  font-size: 22px; line-height: 1; cursor: pointer;
  transition: all 0.18s;
}
.history-list { display: flex; flex-direction: column; gap: 10px; }
.history-empty {
  text-align: center; padding: 32px 0; font-size: 14px;
}
.history-item {
  padding: 14px; border-radius: 12px;
}
.history-item-head {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 6px;
}
.history-question {
  font-size: 13.5px;
  font-style: italic;
  line-height: 1.5;
}
.history-time { margin-top: 8px; font-size: 11.5px; }
.history-clear {
  display: block; margin: 16px auto 0;
  padding: 8px 16px; border-radius: 10px;
  font-size: 12.5px; font-weight: 600; cursor: pointer;
  transition: all 0.18s;
}

/* ---- Retry button (used in chat error bubbles) ---- */
.btn-retry {
  margin-top: 10px;
  padding: 6px 14px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-retry:active { transform: scale(0.97); }

/* Global utility classes */
.hidden { display: none !important; }

/* ---- Google Gemini-style Ambient Fluid Glows ---- */
.gemini-glow-1,
.gemini-glow-2,
.gemini-glow-3 {
  position: fixed;
  border-radius: 50%;
  filter: blur(120px);
  z-index: 1;
  pointer-events: none;
  opacity: 0.15;
  will-change: transform, opacity;
}
.gemini-glow-1 {
  width: 50vw;
  height: 50vw;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.25) 0%, rgba(139, 92, 246, 0) 70%); /* Purple */
  top: -10vw;
  left: -10vw;
  animation: float-glow-1 25s ease-in-out infinite alternate;
}
.gemini-glow-2 {
  width: 60vw;
  height: 60vw;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.22) 0%, rgba(16, 185, 129, 0) 70%); /* Emerald/Jade */
  bottom: -15vw;
  right: -10vw;
  animation: float-glow-2 30s ease-in-out infinite alternate;
}
.gemini-glow-3 {
  width: 45vw;
  height: 45vw;
  background: radial-gradient(circle, rgba(234, 88, 12, 0.18) 0%, rgba(234, 88, 12, 0) 70%); /* Orange */
  top: 45%;
  left: 55%;
  transform: translate(-50%, -50%);
  animation: float-glow-3 20s ease-in-out infinite alternate;
}

@keyframes float-glow-1 {
  0% { transform: translate(0, 0) scale(1); opacity: 0.1; }
  50% { transform: translate(10vw, 8vw) scale(1.25); opacity: 0.18; }
  100% { transform: translate(3vw, -5vw) scale(0.9); opacity: 0.1; }
}
@keyframes float-glow-2 {
  0% { transform: translate(0, 0) scale(1.15); opacity: 0.1; }
  50% { transform: translate(-8vw, -10vw) scale(0.85); opacity: 0.18; }
  100% { transform: translate(5vw, 4vw) scale(1.2); opacity: 0.1; }
}
@keyframes float-glow-3 {
  0% { transform: translate(-50%, -50%) translate(-5vw, 3vw) scale(0.85); opacity: 0.08; }
  50% { transform: translate(-50%, -50%) translate(6vw, -8vw) scale(1.15); opacity: 0.15; }
  100% { transform: translate(-50%, -50%) translate(-3vw, -2vw) scale(1); opacity: 0.08; }
}

#app, .l-page {
  position: relative;
  z-index: 10;
}

/* ---- Google Gemini-style Animated Wave Loading Bar ---- */
.gemini-loader {
  display: block;
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, #4285f4 0%, #9b72ff 25%, #d96570 50%, #f48b36 75%, #4285f4 100%);
  background-size: 200% 100%;
  animation: gemini-wave 2s linear infinite;
  margin: 14px 0;
}
@keyframes gemini-wave {
  0% { background-position: 0% 50%; }
  100% { background-position: -200% 50%; }
}

.ai-loading {
  display: flex;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 8px !important;
  width: 100%;
}

/* ---- Google Gemini-style Outline Glow (Cross-Browser background-clip) ---- */
.gemini-glow-border {
  position: relative;
  border: 1.5px solid transparent !important;
  background-clip: padding-box, border-box !important;
  background-origin: border-box !important;
  background-size: 100% 100%, 200% 100% !important;
  animation: gemini-border-wave 4s linear infinite !important;
}

@keyframes gemini-border-wave {
  0% { background-position: 0% 0%, 0% 50%; }
  100% { background-position: 0% 0%, -200% 50%; }
}