/* st-responsive.css — Responsive/media queries, reduced motion, mic recording, heading styles */
/* ===== Responsive: Tablet (768-1023px) ===== */
@media (max-width: 1023px) and (min-width: 768px) {
  .st-source-editor .ql-editor,
  .st-target-output .ql-editor {
    padding: var(--space-4);
  }

  .st-panel-toolbar {
    padding: var(--space-2) var(--space-2);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .st-panel-toolbar::-webkit-scrollbar {
    display: none;
  }

  .st-edit-label {
    display: none;
  }

  .st-edit-toggle {
    width: 36px;
    padding: 0;
  }

  /* Tone segment may be tight on narrow tablets */
  .st-tone-segment {
    flex-shrink: 1;
    min-width: 0;
  }

  .st-tone-segment .st-tone-preset-btn {
    font-size: 11px;
    padding: 3px 6px;
  }
}

/* ===== Responsive: Mobile (<768px) ===== */
@media (max-width: 767px) {
  .split-translator {
    padding: var(--space-2);
    gap: var(--space-2);
  }

  .st-panels {
    flex-direction: column;
    gap: var(--space-2);
  }

  .st-source-panel {
    flex: 45;
  }

  .st-target-panel {
    flex: 55;
  }

  .st-panel-divider {
    display: none;
  }

  .st-source-editor .ql-editor,
  .st-target-output .ql-editor {
    padding: var(--space-3);
    font-size: 15px;
  }

  .st-panel-toolbar {
    padding: var(--space-1) var(--space-2);
    gap: 2px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
  }

  .st-panel-toolbar::-webkit-scrollbar {
    display: none;
  }

  .st-toolbar-btn {
    width: 32px;
    height: 32px;
  }

  .st-toolbar-btn svg {
    width: 16px;
    height: 16px;
  }

  .st-toolbar-divider {
    height: 20px;
  }

  .st-edit-label {
    display: none;
  }

  .st-edit-toggle {
    width: 32px;
    padding: 0;
  }

  /* Language bar: shrink to fit on narrow screens */
  .st-language-bar {
    height: 48px;
    min-height: 48px;
    padding: 0 var(--space-3);
    gap: var(--space-1);
  }

  .st-lang-selector {
    padding: var(--space-1) var(--space-1);
    font-size: var(--font-size-xs);
    gap: var(--space-1);
  }

  .st-flag {
    width: 16px;
    height: 12px;
  }

  .st-chevron {
    width: 10px;
    height: 10px;
  }

  .st-swap-btn {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
  }

  .st-swap-btn svg {
    width: 16px;
    height: 16px;
  }

  .st-overflow-btn {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
  }

  /* Hide labels on status bar and toolbar toggle buttons */
  .st-status-icon-btn.st-edit-toggle .st-edit-label {
    display: none;
  }

  .st-status-icon-btn.st-edit-toggle {
    width: 32px;
    padding: 0;
  }

  /* Segmented control: scrollable on mobile to prevent overflow */
  .st-tone-segment {
    padding: 1px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-shrink: 1;
    min-width: 0;
  }

  .st-tone-segment::-webkit-scrollbar {
    display: none;
  }

  .st-tone-segment .st-tone-preset-btn {
    font-size: 11px;
    padding: 3px 6px;
  }

  .st-status-bar {
    height: 48px;
    min-height: 48px;
    padding: 0 var(--space-3);
    gap: var(--space-1);
  }

  .st-char-count {
    display: none;
  }

  /* Translate button stays in status bar on mobile (no FAB — avoids
     overlap with parent bottom nav which sits at fixed bottom) */
  .st-translate-btn {
    padding: 8px var(--space-4);
    font-size: var(--font-size-xs);
    border-radius: var(--radius-md);
    white-space: nowrap;
  }

  /* Drawer full width on mobile */
  .st-drawer {
    width: 100%;
  }

  .st-lang-dropdown {
    min-width: 160px;
  }
}


/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .st-drawer {
    transition: none;
  }
}

/* Mic recording — soft purple with rec dot */
.st-toolbar-btn.active.st-stt-active {
  background: rgba(0, 0, 0, 0.08) !important;
  color: var(--color-text-primary) !important;
  animation: none !important;
  position: relative;
}
.st-toolbar-btn.active.st-stt-active::after {
  content: '';
  position: absolute;
  top: 4px;
  right: 4px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ef4444;
  animation: st-rec-dot 1.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes st-rec-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* Match Skrivebord heading styling in Quill editors */
.st-source-panel .ql-editor h1,
.st-source-panel .ql-editor h2,
.st-source-panel .ql-editor h3,
.st-target-panel .ql-editor h1,
.st-target-panel .ql-editor h2,
.st-target-panel .ql-editor h3 {
  font-weight: 700 !important;
  margin-bottom: 0.3em;
}

.st-source-panel .ql-editor h1,
.st-target-panel .ql-editor h1 {
  font-size: 1.6em;
  line-height: 1.3;
}

.st-source-panel .ql-editor h2,
.st-target-panel .ql-editor h2 {
  font-size: 1.3em;
  line-height: 1.35;
}

/* Remove extra spacing between heading and next paragraph */
.st-source-panel .ql-editor h1 + p,
.st-source-panel .ql-editor h2 + p,
.st-target-panel .ql-editor h1 + p,
.st-target-panel .ql-editor h2 + p {
  margin-top: 0;
}