/* bundle-overrides.css — Override styles for the grammar bot bundle: dark mode for V2 components, focus indicators, setup panel transition, loading states, heading styles, refine loader, sidebar button normalization, annuller button, restyle bundle toolbars */
/* ============================================================
   DARK MODE — New V2 Components
   ============================================================ */

/* Dark mode: data-theme attribute */
[data-theme="dark"] .check-analysis-card,
[data-theme="dark"] .practice-report,
[data-theme="dark"] .practice-score-bar {
  background: #1e293b;
  border-color: #334155;
  color: #e2e8f0;
}

[data-theme="dark"] .check-text-content {
  background: #0f172a;
  color: #e2e8f0;
}

[data-theme="dark"] .check-error-badge--stavning { background: rgba(239, 68, 68, 0.15); color: #fca5a5; }
[data-theme="dark"] .check-error-badge--grammatik { background: rgba(245, 158, 11, 0.15); color: #fcd34d; }
[data-theme="dark"] .check-error-badge--stil { background: rgba(59, 130, 246, 0.15); color: #93c5fd; }

[data-theme="dark"] .check-error--stavning { background: rgba(239, 68, 68, 0.2); }
[data-theme="dark"] .check-error--grammatik { background: rgba(245, 158, 11, 0.2); }
[data-theme="dark"] .check-error--stil { background: rgba(59, 130, 246, 0.2); }

[data-theme="dark"] .practice-feedback--correct { background: rgba(16, 185, 129, 0.15); border-left-color: #34d399; }
[data-theme="dark"] .practice-feedback--incorrect { background: rgba(245, 158, 11, 0.15); border-left-color: #fbbf24; }
[data-theme="dark"] .practice-feedback--correct .practice-feedback-header { color: #34d399; }
[data-theme="dark"] .practice-feedback--incorrect .practice-feedback-header { color: #fbbf24; }

[data-theme="dark"] .practice-feedback-btn {
  background: #1e293b;
  border-color: #334155;
  color: #e2e8f0;
}

[data-theme="dark"] .mode-setup-textarea,
[data-theme="dark"] .mode-setup-input {
  background: #0f172a;
  border-color: #334155;
  color: #e2e8f0;
}

[data-theme="dark"] .mode-chip {
  background: #1e293b;
  border-color: #334155;
  color: #e2e8f0;
}

[data-theme="dark"] .tutor-mode-card {
  background: #1e293b;
  border-color: #334155;
  color: #e2e8f0;
}

[data-theme="dark"] .tutor-mode-features { color: #94a3b8; }
[data-theme="dark"] .tutor-mode-fallback { color: #94a3b8; }

[data-theme="dark"] .practice-score-text { color: #e2e8f0; }
[data-theme="dark"] .practice-dot--pending { background: #334155; }
[data-theme="dark"] .practice-report-score { color: #60a5fa; }
[data-theme="dark"] .practice-report-pct { color: #94a3b8; }
[data-theme="dark"] .check-progress { color: #94a3b8; }
[data-theme="dark"] .check-progress-bar { background: #334155; }

/* prefers-color-scheme fallback removed — theme controlled by [data-theme] only */

/* ============================================================
   FOCUS INDICATORS — V2 Interactive Elements
   ============================================================ */

.mode-setup-back:focus-visible {
  outline: 2px solid rgba(31, 31, 30, 0.3);
  outline-offset: 2px;
}

.mode-chip:focus-visible {
  outline: 2px solid rgba(31, 31, 30, 0.3);
  outline-offset: 2px;
}

.mode-setup-submit:focus-visible {
  outline: 2px solid rgba(31, 31, 30, 0.3);
  outline-offset: 2px;
}

.mode-setup-textarea:focus-visible {
  border-color: var(--chat-user-bg);
  outline: 2px solid rgba(37, 99, 235, 0.3);
  outline-offset: -2px;
}

.mode-setup-input:focus-visible {
  border-color: var(--chat-user-bg);
  outline: 2px solid rgba(37, 99, 235, 0.3);
  outline-offset: -2px;
}

.practice-feedback-btn:focus-visible {
  outline: 2px solid rgba(31, 31, 30, 0.3);
  outline-offset: 2px;
}

.check-error:focus-visible {
  outline: 2px solid rgba(31, 31, 30, 0.3);
  outline-offset: 1px;
}

/* ============================================================
   SETUP PANEL TRANSITION
   ============================================================ */

@media (prefers-reduced-motion: no-preference) {
  .mode-setup {
    animation: fade-in 200ms ease;
  }
}

/* ============================================================
   GRAMMAR BOT — LOADING STATES
   Overrides bundle styles for both editor overlay and sidebar.
   Loads AFTER grammar_bot.bundle.min.css so wins by cascade.
   ============================================================ */

/* --- Keyframes --- */

@keyframes editor-spinner {
  to { transform: rotate(360deg); }
}

@keyframes gentle-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@keyframes bubble-breathe {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
  }
  50% {
    transform: scale(1.02);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
  }
}

/* --- 1. Pink dot → Purple Sneat spinner --- */
/* The .gradient-loader is the animated dot next to "Arbejder..."
   and "Retter teksten..." — replace pink gradient with a proper
   Sneat-style border-spinner in our brand purple. */

.gradient-loader,
.gradient-loader-smart {
  animation: editor-spinner 0.9s linear infinite;
  background: transparent;
  border: 2.5px solid rgba(0, 0, 0, 0.08);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  height: 20px;
  width: 20px;
}

/* --- 2. Editor text area loading overlay --- */
/* The frosted overlay that covers the text while the robot works.
   Soft blur so the kid can still see their text "being processed". */

.textarea-wrapper .loader-backdrop {
  background: rgba(245, 245, 249, 0.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 0;
}

/* --- 3. Sidebar loading — robot + speech bubble --- */
/* When correction-content does NOT have .has-explanations,
   the robot and speech bubble are visible (loading state).
   Make it feel alive and warm. */

/* Robot: gentle floating motion */
.correction-content:not(.has-explanations) .hamdan-robot-container {
  animation: gentle-float 2.5s ease infinite;
}

/* Speech bubble: subtle breathing with purple-tinted shadow */
.correction-content:not(.has-explanations) .hamdan-speech-bubble {
  animation: bubble-breathe 2.5s ease infinite;
  border: 0.5px solid rgba(0, 0, 0, 0.08);
}

/* Hide legend during loading — it's noise, only useful after results */
.correction-content:not(.has-explanations) .legend-section {
  opacity: 0;
  height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

/* --- 4. Explanation cards — results state --- */
/* cursor pointer on hover + subtle lift */

.explanation-item {
  cursor: pointer;
}

.explanation-item:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

/* --- 5. Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  .gradient-loader,
  .gradient-loader-smart {
    animation: none;
    border-top-color: var(--color-primary);
  }

  .correction-content:not(.has-explanations) .hamdan-robot-container,
  .correction-content:not(.has-explanations) .hamdan-speech-bubble {
    animation: none;
  }

  .explanation-item:hover {
    transform: none;
  }
}

/* ============ HEADING STYLES — bundle sets h1-h6 to 16px, missing font-weight ============ */
/* The bundle strips heading font-size to 16px. We keep that but add bold weight so headings are visible. */
#inputText h1, #inputText h2, #inputText h3,
#inputText h4, #inputText h5, #inputText h6,
.ql-editor h1, .ql-editor h2, .ql-editor h3,
.ql-editor h4, .ql-editor h5, .ql-editor h6 {
  font-weight: 650 !important;
}

/* ============ REFINE LOADER ============ */
.loader-backdrop {
  background: rgba(255, 255, 255, 0.88) !important;
  backdrop-filter: none !important;
}

/* Replace pink bubbles with Sneat-style growing spinner */
.bubble-loader {
  height: 40px !important;
  gap: 0 !important;
  justify-content: center !important;
}

/* Hide the individual pink bubbles */
.bubble {
  display: none !important;
}

/* Replace with a single growing spinner (Sneat spinner-grow pattern) */
.bubble-loader::before {
  content: '';
  display: block;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: rgb(19, 19, 19);
  opacity: 0;
  animation: sneat-spinner-grow 1.2s ease-in-out infinite;
}

@keyframes sneat-spinner-grow {
  0% {
    transform: scale(0);
    opacity: 0.6;
  }
  50% {
    transform: scale(1);
    opacity: 0.3;
  }
  100% {
    transform: scale(0);
    opacity: 0;
  }
}

/* Loader text — clean, neutral, not attention-grabbing */
.loader-text {
  font-family: 'Nunito Sans', sans-serif !important;
  color: rgb(60, 60, 58) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}

/* Cancel button — Sneat outline style */
.text-area-cancel-btn {
  font-family: 'Nunito Sans', sans-serif !important;
  border-radius: 6px !important;
  border: 0.5px solid rgba(0, 0, 0, 0.08) !important;
  background: var(--color-card, #fff) !important;
  box-shadow: none !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: rgb(60, 60, 58) !important;
  padding: 6px 16px !important;
  transition: all 0.15s ease !important;
}

.text-area-cancel-btn:hover {
  border-color: rgb(19, 19, 19) !important;
  color: rgb(19, 19, 19) !important;
  background: rgba(0, 0, 0, 0.04) !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Speech bubble (.hamdan-speech-bubble) — LEFT ALONE
   Shows "Arbejder...", "Teksten er korrekt!", and correction explanations.
   All are useful. Do not hide. */

/* ============ NORMALIZE SIDEBAR BUTTONS — Tone/Bedre match Stave (write-applicationDiv) ============ */
.voice-change-btn,
.analyze-request-btn {
  background: rgb(19, 19, 19) !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.25) !important;
  transition: all 0.2s ease !important;
}

.voice-change-btn:hover,
.analyze-request-btn:hover {
  background: rgb(50, 50, 48) !important;
  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.25) !important;
  transform: translateY(-1px) !important;
}

.voice-change-btn::before,
.analyze-request-btn::before {
  display: none !important;
}

/* ============ ANNULLER BUTTON — on each correction card ============ */
.ed-annuller-btn {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  margin-top: 6px;
  border: 0.5px solid #d4d8dd;
  border-radius: 6px;
  background: transparent;
  color: rgb(60, 60, 58);
  font-size: 12px;
  font-family: 'Nunito Sans', sans-serif;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  float: right;
}

.ed-annuller-btn:hover {
  border-color: #ff3e1d;
  color: #ff3e1d;
  background: rgba(255, 62, 29, 0.04);
}

/* ── Annuller loading: subtle pulse on the card only ── */
.ed-reverting {
  opacity: 0.6;
  pointer-events: none;
  animation: ed-pulse 1.2s ease infinite;
}

@keyframes ed-pulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 0.35; }
}

/* ============ RESTYLE BUNDLE TOOLBARS — modern clean look ============ */

/* ── Top controls: title on left, action icons on right ── */
.top-controls {
  padding: 6px 12px !important;
  gap: 4px !important;
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.08) !important;
  background: var(--color-card, #fff) !important;
  align-items: center !important;
}

/* Top-control buttons: Sneat navbar icon style — clean rounds, no visible background */
.top-controls .control-btn {
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  border: none !important;
  background: transparent !important;
  color: rgb(60, 60, 58) !important;
  transition: all 0.15s ease !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

/* Uniform icons 18px */
.top-controls .control-btn svg {
  width: 18px !important;
  height: 18px !important;
}

/* Hover: soft circle appears */
.top-controls .control-btn:hover {
  background: rgba(0, 0, 0, 0.07) !important;
  color: rgb(19, 19, 19) !important;
}

/* Never visually disable top-controls buttons — user needs them to start writing */
.top-controls .control-btn:disabled {
  opacity: 1 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* Mic — same style as others but primary color to signal "input method" */
.top-controls #micButton1 {
  color: rgb(19, 19, 19) !important;
}

.top-controls #micButton1:hover {
  background: rgba(0, 0, 0, 0.08) !important;
}

/* Hide legacy buttons — no longer needed with Supabase documents system */
#showSavedResponsesBtn { display: none !important; } /* Old WordPress saved responses */
#clearBtn { display: none !important; } /* "Slet alt" — dangerous with auto-save */

/* Push right-controls to the far right */
.top-controls .right-controls {
  margin-left: auto !important;
  gap: 2px !important;
}

/* ── Hide only the character counter text, keep the format toolbar visible ── */
.counter-nav-div .word-counter-div {
  display: none !important;
}

/* ── Format toolbar: clean modern editor bar (QuillBot style) ── */
.format-toolbar {
  padding: 6px 16px !important;
  gap: 2px !important;
  border-top: 0.5px solid rgba(0, 0, 0, 0.08) !important;
  background: var(--color-card, #fff) !important;
  align-items: center !important;
  display: flex !important;
  flex-wrap: nowrap !important;
}

.format-toolbar .format-group {
  display: inline-flex !important;
  align-items: center !important;
  gap: 2px !important;
}

/* Clean naked buttons — no borders, no boxes. Just icons. */
.format-toolbar .format-btn {
  width: 32px !important;
  height: 32px !important;
  border: none !important;
  background: transparent !important;
  color: rgb(19, 19, 19) !important;
  border-radius: 6px !important;
  transition: all 0.12s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  font-size: 15px !important;
  font-weight: 600 !important;
}

/* All icons: 16px uniform */
.format-toolbar .format-btn svg {
  width: 16px !important;
  height: 16px !important;
}

/* Hover: subtle round background */
.format-toolbar .format-btn:hover {
  background: rgba(0, 0, 0, 0.05) !important;
  color: rgb(19, 19, 19) !important;
}

.format-toolbar .format-btn:disabled {
  opacity: 0.35 !important;
  cursor: default !important;
  pointer-events: none !important;
}

/* Active state: primary tint */
.format-toolbar .format-btn.active {
  background: rgba(0, 0, 0, 0.07) !important;
  color: rgb(19, 19, 19) !important;
}

/* Separators: thin subtle line between groups */
.format-toolbar .format-separator {
  width: 1px !important;
  height: 16px !important;
  background: #d4d8dd !important;
  margin: 0 6px !important;
  flex-shrink: 0 !important;
}

/* Divider between group-1 and group-2 */
.format-toolbar .format-divider {
  width: 1px !important;
  height: 16px !important;
  background: #d4d8dd !important;
  margin: 0 8px !important;
  flex-shrink: 0 !important;
}

/* Hide mainSwitcher (compare before/after) — rarely used */
#mainSwitcher { display: none !important; }
/* Also hide the separator before it */
.format-toolbar .group-2 .format-separator { display: none !important; }

/* Show the divider between group-1 (formatting) and group-2 (tools) */
.format-toolbar .format-divider {
  display: block !important;
  width: 1px !important;
  height: 16px !important;
  background: #d4d8dd !important;
  margin: 0 8px !important;
}

/* Inside group-1: hide the second separator so B I ≡ read as one formatting group */
.format-toolbar .group-1 .format-separator:last-of-type {
  display: none !important;
}