/**
 * MAXIMO-SEO — ui-global-fix.css
 * Global UI foundations + per-tab P0 fixes
 * Applied after design-improvements.css
 *
 * SCROLL HEALTH CHECKLIST:
 *  ✓ One primary scroll container per view (.tab-content.active)
 *  ✓ No accidental overflow:hidden on body/html blocking scroll
 *  ✓ Modals: internal scroll + stable background lock via body.modal-open
 *  ✓ Sticky headers: no parent overflow conflict (use overflow:clip not hidden)
 *  ✓ iOS momentum: -webkit-overflow-scrolling:touch on all scroll containers
 */

/* ===================================================================
   §1  TYPOGRAPHY SCALE
   =================================================================== */
.tab-content h1, .tab-panel h1 {
  font-size: var(--text-2xl, 22px);
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-primary);
  margin: 0 0 6px;
}
.tab-content h2, .tab-panel h2,
.tool-title, .section-title {
  font-size: var(--text-xl, 18px);
  font-weight: 700;
  line-height: 1.35;
  color: var(--text-primary);
  margin: 0 0 4px;
}
.tab-content h3, .tab-panel h3,
.card-title, .panel-title {
  font-size: var(--text-lg, 15px);
  font-weight: 600;
  line-height: 1.4;
  color: var(--text-primary);
  margin: 0 0 3px;
}
.tab-content h4, .tab-panel h4 {
  font-size: var(--text-base, 13px);
  font-weight: 600;
  color: var(--text-secondary);
  margin: 0;
}
.tab-content p, .tab-panel p {
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0 0 10px;
}

/* Accessibility: bump muted text contrast (was #7781a8 ≈ 3.2:1 → now ≈ 4.6:1) */
:root {
  --text-muted: #8b96c0;
}


/* ===================================================================
   §2  SPACING SYSTEM
   =================================================================== */
.tab-content.active {
  padding: 20px 24px;
  box-sizing: border-box;
}
.tool-section {
  margin-bottom: 20px;
}
.tool-row {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
}


/* ===================================================================
   §3  BUTTON CONSISTENCY
   =================================================================== */

/* Standardize primary/secondary heights */
.btn {
  min-height: 36px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  border-radius: var(--radius-sm, 8px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.12s, background 0.15s;
  white-space: nowrap;
}

/* Disabled states — universal */
.btn:disabled,
button:disabled,
[role="button"][aria-disabled="true"] {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* Loading state spinner (leverages existing .btn-loading) */
.btn-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}
.btn-loading::after {
  content: '';
  position: absolute;
  width: 14px; height: 14px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: ux-spin 0.6s linear infinite;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
}

@keyframes ux-spin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Hover / focus states */
.btn-primary:hover:not(:disabled) { opacity: 0.88; }
.btn:focus-visible {
  outline: 2px solid var(--accent, #7c5cff);
  outline-offset: 2px;
}


/* ===================================================================
   §4  TOOLBAR WRAP
   =================================================================== */
.toolbar,
.tool-controls,
.form-actions,
.filter-row,
.controls-row,
.action-bar,
.btn-toolbar,
[class*="controls-bar"],
[class*="toolbar-row"],
[class*="tool-bar"] {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

/* Ensure inputs in toolbars don't shrink to zero */
.toolbar input, .tool-controls input,
.filter-row input, .controls-row input {
  min-width: 140px;
  flex: 1 1 140px;
}

@media (max-width: 768px) {
  .toolbar, .tool-controls, .filter-row, .controls-row,
  .action-bar, .btn-toolbar, [class*="controls-bar"] {
    flex-direction: column;
    align-items: stretch;
  }
  .toolbar > *, .tool-controls > *, .filter-row > * {
    width: 100%;
  }
  /* Exception: small icon buttons can stay inline */
  .toolbar .btn-icon, .toolbar [aria-label] {
    width: auto !important;
    flex: 0 0 auto !important;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .toolbar, .tool-controls, .filter-row {
    flex-wrap: wrap;
  }
}


/* ===================================================================
   §5  CARD / PANEL STANDARD
   =================================================================== */
.card, .panel, .tool-card {
  background: var(--surface, #141a31);
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: var(--radius-md, 12px);
  overflow: hidden;
}
.card > .card-header,
.panel > .panel-header {
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: rgba(255,255,255,0.01);
  flex-wrap: wrap;
}
.card > .card-body,
.panel > .panel-body {
  padding: 16px 18px;
}


/* ===================================================================
   §6  TABLE MOBILE (h-scroll + gradient hint)
   =================================================================== */
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
}
/* Auto-wrap any raw table in a scroll container */
@media (max-width: 768px) {
  .tab-content table:not([class*="no-wrap"]) {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: calc(100vw - 32px);
    box-sizing: border-box;
  }
  /* Gradient fade hint on right edge */
  .table-responsive::after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 32px;
    background: linear-gradient(to right, transparent, var(--bg, #0a0d17));
    pointer-events: none;
  }
}

/* Sticky first column on wide data tables */
@media (max-width: 768px) {
  .tab-content table th:first-child,
  .tab-content table td:first-child {
    position: sticky;
    left: 0;
    background: var(--surface, #141a31);
    z-index: 2;
  }
}


/* ===================================================================
   §7  EMPTY STATE STANDARD
   =================================================================== */
.ux-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 24px;
  gap: 10px;
  color: var(--text-muted);
}
.ux-empty-state__icon {
  font-size: 36px;
  margin-bottom: 4px;
  opacity: 0.7;
}
.ux-empty-state__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-secondary);
  margin: 0;
}
.ux-empty-state__desc {
  font-size: 12px;
  color: var(--text-muted);
  max-width: 320px;
  line-height: 1.5;
  margin: 0;
}
.ux-empty-state__cta {
  margin-top: 8px;
}


/* ===================================================================
   §8  LOADING SKELETON
   =================================================================== */
.ux-skeleton {
  background: linear-gradient(
    90deg,
    var(--surface, #141a31) 25%,
    rgba(255,255,255,0.06) 50%,
    var(--surface, #141a31) 75%
  );
  background-size: 200% 100%;
  animation: ux-shimmer 1.4s ease infinite;
  border-radius: var(--radius-sm, 8px);
}
@keyframes ux-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.ux-skeleton-line {
  height: 14px;
  margin-bottom: 8px;
  border-radius: 4px;
}
.ux-skeleton-line.wide  { width: 75%; }
.ux-skeleton-line.medium { width: 55%; }
.ux-skeleton-line.short { width: 35%; }


/* ===================================================================
   §9  ERROR BANNER
   =================================================================== */
.ux-error-banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: var(--radius-sm, 8px);
  color: var(--text-primary);
  margin: 12px 0;
  font-size: 13px;
  line-height: 1.5;
}
.ux-error-banner__icon {
  font-size: 18px;
  flex-shrink: 0;
  margin-top: 1px;
}
.ux-error-banner__body { flex: 1; }
.ux-error-banner__title {
  font-weight: 600;
  color: #f87171;
  margin: 0 0 2px;
}
.ux-error-banner__message { color: var(--text-secondary); margin: 0; }
.ux-error-banner__retry {
  background: none;
  border: 1px solid rgba(239,68,68,0.4);
  border-radius: 6px;
  color: #f87171;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  cursor: pointer;
  margin-top: 8px;
  font-family: inherit;
}
.ux-error-banner__retry:hover { background: rgba(239,68,68,0.12); }

/* Inline API-key-required banner */
.ux-api-required {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(245,158,11,0.08);
  border: 1px solid rgba(245,158,11,0.25);
  border-radius: var(--radius-sm, 8px);
  font-size: 12px;
  color: var(--text-muted);
  margin: 8px 0;
}
.ux-api-required a {
  color: var(--accent, #7c5cff);
  text-decoration: none;
  font-weight: 600;
}
.ux-api-required a:hover { text-decoration: underline; }


/* ===================================================================
   §10  MODAL — mobile full-width + internal scroll
   =================================================================== */

/* All modals: full-width on mobile, capped on desktop */
.modal-overlay, .modal-backdrop,
[class*="modal-wrap"], [class*="overlay-wrap"],
#r37-onboarding-overlay,
.maximo-confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  padding: 16px;
  box-sizing: border-box;
}

.modal, .modal-dialog,
[class*="modal-box"], [class*="modal-content"],
#r37-onboarding,
.maximo-confirm-modal {
  background: var(--surface-elevated, #1c2340);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-lg, 16px);
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - 40px);
  overflow: hidden;
  width: 100%;
}

/* Desktop: cap modal width */
@media (min-width: 769px) {
  .modal, .modal-dialog, [class*="modal-box"], [class*="modal-content"] {
    max-width: 560px;
  }
  .modal-lg { max-width: 800px; }
  .modal-xl { max-width: 1000px; }
}

/* Modal header */
.modal-header, [class*="modal-head"] {
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.modal-header h2, .modal-header h3 {
  font-size: 15px;
  font-weight: 700;
  margin: 0;
  color: var(--text-primary);
}

/* Modal body — scrollable */
.modal-body, [class*="modal-body"] {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 18px 20px;
}

/* Modal footer */
.modal-footer, [class*="modal-foot"] {
  padding: 14px 20px 18px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  flex-shrink: 0;
  flex-wrap: wrap;
}

/* Lock background scroll when modal is open */
body.modal-open {
  overflow: hidden !important;
  /* Prevent layout shift from scrollbar disappearing */
  padding-right: var(--scrollbar-width, 0px);
}

/* Mobile: full-width modal */
@media (max-width: 768px) {
  .modal-overlay, .modal-backdrop,
  [class*="modal-wrap"], [class*="overlay-wrap"] {
    align-items: flex-end;
    padding: 0;
  }
  .modal, .modal-dialog,
  [class*="modal-box"], [class*="modal-content"],
  #r37-onboarding,
  .maximo-confirm-modal {
    max-width: 100vw !important;
    width: 100vw !important;
    border-radius: var(--radius-lg, 16px) var(--radius-lg, 16px) 0 0 !important;
    max-height: 90dvh;
  }
  .modal-footer, [class*="modal-foot"] {
    padding-bottom: max(18px, env(safe-area-inset-bottom));
  }
}


/* ===================================================================
   §11  SCROLL HEALTH
   =================================================================== */

/* Primary scroll container */
.tab-content.active {
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  /* Use dvh for mobile keyboard awareness */
  max-height: calc(100dvh - var(--header-height, 60px));
}

/* Remove overflow:hidden from containers that break sticky children */
.tab-panel, .main-wrap, .content-wrap {
  overflow: clip; /* clips without forming a scroll container */
}

/* All scroll areas: momentum scrolling on iOS */
.tab-nav,
.modal-body,
[class*="results-list"],
[class*="output-area"],
[class*="chat-messages"],
[class*="activity-list"] {
  -webkit-overflow-scrolling: touch;
}

/* Prevent horizontal overflow globally */
.tab-content.active > * {
  max-width: 100%;
  box-sizing: border-box;
}

/* Code blocks: internal h-scroll only */
pre, code {
  white-space: pre;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  box-sizing: border-box;
}

/* Dynamic viewport height for modals (keyboard-aware) */
@supports (height: 100dvh) {
  .tab-content.active { max-height: calc(100dvh - var(--header-height, 60px)); }
}


/* ===================================================================
   §12  FOCUS-VISIBLE / ACCESSIBILITY
   =================================================================== */
*:focus { outline: none; }
*:focus-visible {
  outline: 2px solid var(--accent, #7c5cff);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Visually hidden (screen reader only) */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* Minimum touch targets on coarse devices */
@media (pointer: coarse) {
  button:not(.bottom-nav-item):not([class*="icon-btn"]),
  [role="button"],
  select,
  input[type="checkbox"],
  input[type="radio"] {
    min-height: 44px !important;
    min-width: 44px;
  }
  input[type="checkbox"], input[type="radio"] {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px;
    min-height: 20px !important;
    cursor: pointer;
  }
}


/* ===================================================================
   §13  CODE BLOCKS — overflow + copy-ready wrapper
   =================================================================== */
.ux-code-wrap {
  position: relative;
  background: rgba(0,0,0,0.3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 8px);
  overflow: hidden;
}
.ux-code-wrap pre {
  padding: 14px 16px;
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  tab-size: 2;
}
.ux-copy-btn {
  position: absolute;
  top: 8px; right: 8px;
  background: var(--glass, rgba(255,255,255,0.06));
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, color 0.15s;
  z-index: 2;
}
.ux-copy-btn:hover { background: var(--accent-muted); color: var(--accent); }
.ux-copy-btn.copied { color: #10b981; border-color: #10b981; }


/* ===================================================================
   §14  CUSTOM PROMPT DIALOG (replaces native prompt())
   =================================================================== */
#ux-prompt-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(4px);
  padding: 20px;
  box-sizing: border-box;
}
#ux-prompt-modal .prompt-box {
  background: var(--surface-elevated, #1c2340);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-lg, 16px);
  padding: 24px;
  width: 100%;
  max-width: 420px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
#ux-prompt-modal .prompt-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 14px;
}
#ux-prompt-modal input {
  width: 100%;
  background: var(--glass, rgba(255,255,255,0.04));
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 8px);
  padding: 10px 14px;
  font-size: 14px;
  color: var(--text-primary);
  font-family: inherit;
  margin-bottom: 14px;
  box-sizing: border-box;
}
#ux-prompt-modal input:focus {
  outline: 2px solid var(--accent, #7c5cff);
  border-color: transparent;
}
#ux-prompt-modal .prompt-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
@media (max-width: 480px) {
  #ux-prompt-modal { align-items: flex-end; padding: 0; }
  #ux-prompt-modal .prompt-box {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    padding: 20px 20px max(20px, env(safe-area-inset-bottom));
    max-width: 100%;
  }
}


/* ===================================================================
   §15  PER-TAB P0 FIXES
   =================================================================== */

/* ── Dashboard ────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .stats-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  .quick-actions-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .quick-action-btn {
    font-size: 10px !important;
    padding: 10px 4px !important;
    min-height: 64px !important;
  }
}

/* ── Task Manager: Kanban ─────────────────────────────────────────── */
.kanban-board, [class*="kanban-col"], [id*="kanban"] {
  min-width: 240px;
}
@media (max-width: 768px) {
  .kanban-board, [class*="kanban-container"],
  [class*="kanban-columns"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    overflow-x: visible !important;
  }
  [class*="kanban-col"], [class*="kanban-column"] {
    width: 100% !important;
    min-width: unset !important;
  }
}

/* ── Content Calendar ─────────────────────────────────────────────── */
@media (max-width: 600px) {
  .content-calendar-grid,
  [class*="calendar-grid"],
  [id*="contentCalendar"] table {
    display: none !important; /* hidden on very small screens */
  }
  .calendar-mobile-list {
    display: block !important;
  }
}
/* Show agenda list on mobile (injected by JS) */
.calendar-mobile-list {
  display: none;
}
.calendar-mobile-item {
  display: flex;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 8px);
  margin-bottom: 8px;
  background: var(--surface);
}
.calendar-mobile-date {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  min-width: 36px;
  text-align: center;
  flex-shrink: 0;
}

/* ── Editor toolbar ───────────────────────────────────────────────── */
.ProseMirror-toolbar, .tiptap-toolbar,
[class*="editor-toolbar"], [class*="rich-text-toolbar"] {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 2px !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

/* ── SERP Preview: fixed-width card ──────────────────────────────── */
[class*="serp-preview-card"],
[class*="serp-result-card"],
#serp-preview-tab [class*="preview-card"] {
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
#serp-preview-tab .preview-url {
  word-break: break-all !important;
  overflow-wrap: anywhere !important;
}

/* ── Schema Generator + all code outputs ─────────────────────────── */
[id*="schema-output"], [id*="jsonld"],
[class*="schema-output"], [class*="code-output"],
[id*="robots-content"], [id*="sitemap-output"],
[id*="hreflang-output"] {
  max-width: 100% !important;
  overflow-x: auto !important;
  word-break: break-word !important;
  white-space: pre-wrap !important;
  -webkit-overflow-scrolling: touch !important;
  font-size: 12px !important;
  line-height: 1.6 !important;
}

/* ── Blog Writer / AI output textareas ───────────────────────────── */
[id*="blogOutput"], [id*="output"],
[class*="output-textarea"], [class*="result-textarea"],
#blog-writer-tab textarea, #content-brief-tab textarea {
  min-height: 200px !important;
}
@media (min-width: 769px) {
  [id*="blogOutput"], [id*="output"],
  [class*="output-textarea"] {
    min-height: 340px !important;
  }
}

/* ── Prompt Library: 3-col → 1-col ───────────────────────────────── */
@media (max-width: 600px) {
  #prompt-library-tab [class*="prompt-grid"],
  [id="promptLibraryGrid"] {
    grid-template-columns: 1fr !important;
  }
}

/* ── Competitor Tracker: side-by-side panels ─────────────────────── */
@media (max-width: 900px) {
  #competitor-tracker-tab [class*="competitor-split"],
  #competitor-tracker-tab [class*="comparison-row"] {
    flex-direction: column !important;
    gap: 16px !important;
  }
}

/* ── Subscription cards: 3-col → 1-col ──────────────────────────── */
@media (max-width: 600px) {
  #subscription-tiers-tab [class*="pricing-grid"],
  #subscription-tiers-tab [class*="plan-cards"] {
    grid-template-columns: 1fr !important;
  }
}

/* ── Team permissions table ──────────────────────────────────────── */
@media (max-width: 768px) {
  #team-permissions-tab table {
    font-size: 11px !important;
  }
  #team-permissions-tab table th,
  #team-permissions-tab table td {
    padding: 6px 8px !important;
  }
}

/* ── API docs: pre blocks ─────────────────────────────────────────── */
#api-tab pre, #public-api-v2-tab pre {
  max-width: 100%;
  overflow-x: auto;
  white-space: pre;
  font-size: 12px;
  -webkit-overflow-scrolling: touch;
  background: rgba(0,0,0,0.3);
  border-radius: 8px;
  padding: 14px 16px;
}

/* ── Page Speed / CWV: metrics grid ─────────────────────────────── */
@media (max-width: 600px) {
  #page-speed-tab [class*="metrics-grid"],
  #core-web-vitals-tab [class*="metrics-grid"],
  #gsc-analytics-tab [class*="metrics-grid"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
}
@media (max-width: 380px) {
  #page-speed-tab [class*="metrics-grid"],
  #core-web-vitals-tab [class*="metrics-grid"] {
    grid-template-columns: 1fr !important;
  }
}

/* ── Tool Chaining: drag handles ─────────────────────────────────── */
@media (pointer: coarse) {
  [class*="drag-handle"], [class*="draggable-handle"],
  [class*="sort-handle"] {
    min-width: 44px !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* ── Social platform subtabs ─────────────────────────────────────── */
@media (max-width: 768px) {
  #social-media-tab [class*="platform-tabs"],
  #content-repurposer-tab [class*="platform-tabs"],
  #tiktok-seo-tab [class*="platform-tabs"] {
    display: flex !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 4px !important;
    padding-bottom: 4px !important;
  }
}

/* ── Image output: max-width ─────────────────────────────────────── */
#image-generator-tab img,
[class*="generated-image"] img,
[id*="generatedImage"] {
  max-width: 100% !important;
  height: auto !important;
  border-radius: var(--radius-md, 12px);
}

/* ── GeoGrid / map container ─────────────────────────────────────── */
@media (max-width: 768px) {
  [id*="geogrid-map"], [class*="geogrid-map"],
  [id*="geoGrid"] {
    max-width: 100% !important;
    overflow: hidden !important;
    height: 260px !important;
  }
}

/* ── Chat input stays above keyboard (mobile) ─────────────────────── */
@media (max-width: 768px) {
  [class*="chat-input-area"],
  [class*="chat-input-row"] {
    position: sticky !important;
    bottom: 0 !important;
    background: var(--surface, #141a31) !important;
    padding: 8px !important;
    border-top: 1px solid var(--border) !important;
    z-index: 10 !important;
  }
}

/* ── Rank Tracker / GSC chart containers ─────────────────────────── */
@media (max-width: 768px) {
  [id*="rankChart"], [id*="gscChart"], [id*="ga4Chart"],
  [class*="rank-chart"], [class*="chart-container"] {
    max-width: 100% !important;
    overflow-x: auto !important;
  }
  [id*="rankChart"] canvas,
  [id*="gscChart"] canvas,
  [id*="ga4Chart"] canvas {
    max-width: 100% !important;
  }
}

/* ── Diff viewer (Template Improver) ─────────────────────────────── */
@media (max-width: 640px) {
  .diff-container {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}

/* ── Report Builder: multi-col form → single col ─────────────────── */
@media (max-width: 768px) {
  #report-builder-tab [class*="report-form"],
  #report-builder-tab [class*="builder-grid"] {
    grid-template-columns: 1fr !important;
  }
}

/* ── RTL support (Hebrew) ─────────────────────────────────────────── */
[dir="rtl"] .toolbar,
[dir="rtl"] .tool-controls,
[dir="rtl"] .filter-row {
  flex-direction: row-reverse;
}
[dir="rtl"] .modal-footer,
[dir="rtl"] .modal-header {
  flex-direction: row-reverse;
}
[dir="rtl"] .tab-nav {
  right: 0;
  left: auto !important;
  transform: translateX(100%);
}
[dir="rtl"] .tab-nav.open,
[dir="rtl"] .tab-nav.active {
  transform: translateX(0);
}
[dir="rtl"] .main-wrap {
  margin-left: 0;
  margin-right: var(--sidebar-collapsed-width, 0);
}