/* ============================================================================
   SYLLOVO STUDIO — CROSS-TAB MOBILE & DESKTOP UX POLISH (studio-ux-polish.css)
   Surgical responsive containment, iOS auto-zoom prevention, WCAG Light/Dark
   contrast fixes, modal/popover viewport clamping, touch-friendly tables, and
   Desktop 390x844 iPhone Studio Preview frame parity (body.force-mobile-preview).
   ============================================================================ */

/* ----------------------------------------------------------------------------
   1. MISSING CSS CUSTOM PROPERTY ALIASES & THEME TOKENS (LIGHT + DARK)
   ---------------------------------------------------------------------------- */
:root {
  --primary: var(--brand-blue, #2563eb);
  --emerald-bg: var(--emerald-soft, rgba(5, 150, 105, 0.1));
  --amber-bg: var(--amber-soft, rgba(217, 119, 6, 0.1));
  --rose-bg: var(--rose-soft, rgba(225, 29, 72, 0.1));
  --border-subtle: var(--border, #e4e4e7);
  --text-primary: var(--text-main, #09090b);
  --bg-elevated: var(--bg-surface, #ffffff);
}

[data-theme="dark"] {
  --primary: var(--brand-blue, #3b82f6);
  --emerald-bg: var(--emerald-soft, rgba(16, 185, 129, 0.14));
  --amber-bg: var(--amber-soft, rgba(245, 158, 11, 0.14));
  --rose-bg: var(--rose-soft, rgba(244, 63, 94, 0.14));
  --border-subtle: var(--border, #27272a);
  --text-primary: var(--text-main, #fafafa);
  --bg-elevated: var(--bg-surface, #121215);
}

/* ----------------------------------------------------------------------------
   2. CRISP LIGHT / DARK MODE CONTRAST & DESKTOP OVERFLOW GUARD (WCAG AA+)
   ---------------------------------------------------------------------------- */
/* Downloads page .cmproj buttons had inline #c4b5fd (1.85:1 on white in Light mode) */
:root:not([data-theme="dark"]) a.btn[style*="c4b5fd"],
:root:not([data-theme="dark"]) button.btn[style*="c4b5fd"],
[data-theme="light"] a.btn[style*="c4b5fd"],
[data-theme="light"] button.btn[style*="c4b5fd"] {
  color: #6d28d9 !important;
  border-color: rgba(109, 40, 217, 0.38) !important;
  background: rgba(109, 40, 217, 0.06) !important;
}

[data-theme="dark"] a.btn[style*="c4b5fd"],
[data-theme="dark"] button.btn[style*="c4b5fd"] {
  color: #ddd6fe !important;
  border-color: rgba(167, 139, 250, 0.45) !important;
  background: rgba(139, 92, 246, 0.14) !important;
}

/* Profile popover buttons had hardcoded dark-mode pastel inline colors */
:root:not([data-theme="dark"]) #header-staff-logout-btn,
[data-theme="light"] #header-staff-logout-btn {
  color: #be123c !important;
  border-color: rgba(190, 18, 60, 0.34) !important;
  background: rgba(225, 29, 72, 0.07) !important;
}

:root:not([data-theme="dark"]) #header-users-db-btn,
[data-theme="light"] #header-users-db-btn {
  color: #1d4ed8 !important;
  border-color: rgba(29, 78, 216, 0.32) !important;
  background: rgba(37, 99, 235, 0.07) !important;
}

/* Amber & magenta inline action buttons in Light mode (#d97706 / #e80a89) */
:root:not([data-theme="dark"]) button.btn[style*="d97706"],
:root:not([data-theme="dark"]) a.btn[style*="d97706"],
[data-theme="light"] button.btn[style*="d97706"],
[data-theme="light"] a.btn[style*="d97706"] {
  color: #92400e !important;
  border-color: rgba(180, 83, 9, 0.4) !important;
}

:root:not([data-theme="dark"]) button.btn[style*="e80a89"],
:root:not([data-theme="dark"]) a.btn[style*="e80a89"],
[data-theme="light"] button.btn[style*="e80a89"],
[data-theme="light"] a.btn[style*="e80a89"] {
  color: #9d174d !important;
}

/* Header Popovers inherit .palette-swatch-popover (white-space: nowrap); allow wrapping */
#header-notif-popover,
#user-profile-dropdown-popover {
  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: break-word;
  box-sizing: border-box !important;
}

#header-notif-popover *,
#user-profile-dropdown-popover * {
  max-width: 100%;
  box-sizing: border-box;
}

/* Prevent ultra-long pills on About / Docs / Settings from overflowing desktop cards */
#page-view-container .pill {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}

#page-view-container table .pill {
  white-space: nowrap;
  max-width: none;
}

/* Official HTML Outline card: allow horizontal scroll if wide nested tables appear on desktop */
.outline-table-card {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

/* ============================================================================
   3. MOBILE VIEWPORTS (<= 768px) — INPUTS, MODALS, TABLES, TOUCH TARGETS
   ============================================================================ */
@media (max-width: 768px) {
  /* 3A. Prevent iOS Safari Auto-Zoom on Focus (>= 16px on all text/select controls,
     using high specificity to beat #mobile-course-bar .course-select & .clip-owner-select) */
  html body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]),
  html body select,
  html body textarea,
  html body .form-input,
  html body .course-select,
  html body #mobile-course-selector,
  html body .clip-owner-select,
  html body .role-select,
  html body #role-selector {
    font-size: 16px !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  html body select,
  html body .course-select {
    text-overflow: ellipsis;
  }

  /* 3B. Comfortable >= 36px Mobile Touch Targets on Action Buttons, Sub-Tabs & Close Buttons */
  .top-header .btn,
  #mobile-theme-toggle-btn,
  #header-device-preview-toggle-btn,
  #header-notif-bell-btn,
  #header-theme-btn,
  #header-user-profile-btn,
  #page-view-container .btn,
  .modal-box .btn,
  .modal-box button,
  #header-notif-popover .btn,
  #user-profile-dropdown-popover .btn,
  .mobile-sheet-card .btn {
    min-height: 36px !important;
  }

  #mobile-theme-toggle-btn {
    height: 36px !important;
  }

  /* Keep compact header bar fitting cleanly within 360px while preserving 36px height */
  .top-header {
    padding: 0 8px !important;
    gap: 4px !important;
  }

  .top-header .header-actions {
    gap: 4px !important;
    flex-shrink: 0;
  }

  .top-header .btn {
    padding-left: 7px !important;
    padding-right: 7px !important;
  }

  /* 3C. Cross-Tab Zero-Overflow Containment (Wrap Long Buttons, Pills, Code & URLs) */
  html,
  body,
  .app-main,
  .workspace-scroll,
  #page-view-container {
    max-width: 100vw !important;
  }

  #page-view-container,
  #page-view-container .card,
  #page-view-container .card > div,
  #page-view-container section,
  #page-view-container article {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* Collapse wide inline multi-column grids (minmax(240px..400px, 1fr)) cleanly to 1 column */
  #page-view-container [style*="minmax(240px"],
  #page-view-container [style*="minmax(250px"],
  #page-view-container [style*="minmax(260px"],
  #page-view-container [style*="minmax(280px"],
  #page-view-container [style*="minmax(300px"],
  #page-view-container [style*="minmax(310px"],
  #page-view-container [style*="minmax(320px"],
  #page-view-container [style*="minmax(340px"],
  #page-view-container [style*="minmax(360px"],
  #page-view-container [style*="repeat(3"],
  #page-view-container [style*="repeat(4"],
  #page-view-container [style*="1fr 1fr"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* Allow long button & pill labels outside scrolling data tables to wrap cleanly */
  #page-view-container .btn,
  .modal-box .btn,
  #header-notif-popover .btn,
  #user-profile-dropdown-popover .btn,
  .mobile-sheet-card .btn {
    white-space: normal !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    line-height: 1.3 !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    overflow-wrap: anywhere;
  }

  .mobile-sheet-card [style*="grid-template-columns"],
  .mobile-sheet-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #page-view-container .pill,
  .modal-box .pill {
    white-space: normal !important;
    max-width: 100% !important;
    height: auto !important;
    line-height: 1.35 !important;
    overflow-wrap: anywhere;
  }

  #page-view-container a:not(.btn),
  #page-view-container code,
  #page-view-container .card-title,
  #page-view-container .card-subtitle,
  .modal-box a:not(.btn),
  .modal-box code {
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    white-space: normal !important;
  }

  #page-view-container pre,
  .modal-box pre {
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Ensure flex toolbars & chart cards wrap instead of squeezing on 360px */
  #page-view-container [style*="display:flex"],
  #page-view-container [style*="display: flex"] {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #page-view-container .card div[style*="gap:18px"],
  #page-view-container .card div[style*="gap: 18px"] {
    flex-wrap: wrap !important;
  }

  /* 3D. Wide Data Tables Across Downloads, Feedback, KB, Drive Vault, Confidence & Settings
     Keep Outline clip rows (tr.clip-row) as mobile cards, while restoring real horizontal
     touch-scrolling tables (with visible thead headers!) for all multi-column data tables. */
  #page-view-container .card:has(> table.clean-table:not(:has(tr.clip-row))) {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    max-width: 100% !important;
  }

  table.clean-table:not(:has(tr.clip-row)) {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    border-collapse: collapse !important;
  }

  table.clean-table:not(:has(tr.clip-row)) > thead {
    display: table-header-group !important;
  }

  table.clean-table:not(:has(tr.clip-row)) > tbody {
    display: table-row-group !important;
  }

  table.clean-table:not(:has(tr.clip-row)) tr {
    display: table-row !important;
    padding: 0 !important;
    border-bottom: 1px solid var(--border) !important;
  }

  table.clean-table:not(:has(tr.clip-row)) th,
  table.clean-table:not(:has(tr.clip-row)) td {
    display: table-cell !important;
    padding: 8px 10px !important;
    vertical-align: middle !important;
    white-space: normal !important;
    min-width: 84px;
  }

  table.clean-table:not(:has(tr.clip-row)) th {
    white-space: nowrap !important;
    font-size: 11px !important;
  }

  table.clean-table:not(:has(tr.clip-row)) .btn,
  table.clean-table:not(:has(tr.clip-row)) .pill {
    white-space: nowrap !important;
    max-width: none !important;
  }

  /* Official HTML Outline View: stack label/value columns cleanly on 360px-390px screens,
     while letting nested clip tables scroll smoothly inside .outline-val-col */
  .outline-table-card {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    max-width: 100% !important;
  }

  table.outline-html-table,
  table.outline-html-table > tbody {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  table.outline-html-table > tbody > tr {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  table.outline-html-table > tbody > tr > td.outline-label-col {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    border-right: none !important;
    border-bottom: 1px dashed var(--border) !important;
    padding: 8px 12px 4px !important;
    font-size: 11.5px !important;
  }

  table.outline-html-table > tbody > tr > td.outline-val-col {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 6px 12px 10px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    box-sizing: border-box !important;
  }

  table.outline-html-table > tbody > tr.outline-section-banner-row > td {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  table.outline-nested-table {
    min-width: 480px;
  }

  /* 3E. Modals, Drawers & Header Popovers — 100% Contained on 360px-390px Screens */
  .modal-backdrop {
    padding: 8px !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  .modal-box,
  #new-course-modal-backdrop .modal-box,
  #registered-users-db-modal-box,
  #qr-modal-box,
  #course-copilot-drawer-box,
  #camtasia-roundtrip-modal-backdrop .modal-box {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    max-height: 88dvh !important;
    margin: 0 auto !important;
    padding: 14px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    border-radius: 14px !important;
    box-sizing: border-box !important;
  }

  #cmdk-modal-backdrop .modal-box {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    max-height: 86dvh !important;
    margin: 0 auto !important;
    padding: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    border-radius: 14px !important;
    box-sizing: border-box !important;
  }

  /* New Course Modal: single-column .grid-3 & wrapping footer actions */
  #new-course-modal-backdrop .grid-3,
  #new-course-modal-backdrop .grid-2,
  #new-course-modal-backdrop [style*="grid-template-columns"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #new-course-modal-backdrop .modal-box div[style*="display:flex"],
  #new-course-modal-backdrop .modal-box div[style*="display: flex"],
  #registered-users-db-modal-box div[style*="display:flex"],
  #registered-users-db-modal-box div[style*="display: flex"],
  #qr-modal-box div[style*="display:flex"],
  #qr-modal-box div[style*="display: flex"] {
    flex-wrap: wrap !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #new-course-modal-backdrop input[type="file"] {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  /* Registered Users DB Modal: horizontal scroll inside table wrapper without widening modal */
  #registered-users-db-modal-box div[style*="overflow-x:auto"],
  #registered-users-db-modal-box div[style*="overflow-x: auto"] {
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  #registered-users-db-modal-box table {
    display: table !important;
    width: max-content !important;
    min-width: 100% !important;
  }

  #registered-users-db-modal-box thead {
    display: table-header-group !important;
  }

  #registered-users-db-modal-box tbody {
    display: table-row-group !important;
  }

  #registered-users-db-modal-box tr {
    display: table-row !important;
  }

  #registered-users-db-modal-box th,
  #registered-users-db-modal-box td {
    display: table-cell !important;
    white-space: nowrap !important;
    padding: 8px 10px !important;
  }

  /* Header Notification & User Profile Popovers: override inline 400px width & prevent left/right clipping */
  #header-notif-popover,
  #user-profile-dropdown-popover {
    position: fixed !important;
    top: 54px !important;
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    max-width: calc(100vw - 16px) !important;
    max-height: min(82dvh, calc(100dvh - 66px)) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    margin: 0 !important;
    z-index: 2600 !important;
  }

  /* Slide-Over Side Drawers (Module Submit & Course Depth): full-width safe-area sheet */
  #page-view-container aside[style*="position:fixed"] {
    width: 100vw !important;
    max-width: 100vw !important;
    left: 0 !important;
    right: 0 !important;
    padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important;
    box-sizing: border-box !important;
    z-index: 2200 !important;
  }
}

/* ============================================================================
   4. ZERO-SCROLLBAR MOBILE SHELL & DESKTOP 390x844 iPHONE STUDIO PREVIEW PARITY
   (body.force-mobile-preview & body.mobile-preview-active)
   Ensures clicking "📱 Mobile" on desktop (> 768px) renders a crisp centered
   390x844 frame with mobile bottom nav, More sheet, modals, popovers, tables,
   Guides Domain Hub, Watch-First Video Editor + Bottom-Composer Chat, touch
   targets, and 16px inputs behaving 100% identically to a real iPhone 14 Pro.
   ============================================================================ */
@media (max-width: 820px) {
  html,
  body,
  .workspace-scroll,
  #page-view-container,
  #page-view-container * {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }

  html::-webkit-scrollbar,
  body::-webkit-scrollbar,
  .workspace-scroll::-webkit-scrollbar,
  #page-view-container::-webkit-scrollbar,
  #page-view-container *::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
  }
}

body:is(.force-mobile-preview, .mobile-preview-active),
body:is(.force-mobile-preview, .mobile-preview-active) * {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

body:is(.force-mobile-preview, .mobile-preview-active)::-webkit-scrollbar,
body:is(.force-mobile-preview, .mobile-preview-active) *::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

@media (min-width: 769px) {
  html:has(body:is(.force-mobile-preview, .mobile-preview-active)) {
    background: #0b0c10 !important;
  }

  body:is(.force-mobile-preview, .mobile-preview-active) {
    background: radial-gradient(circle at 50% 0%, #1f2333 0%, #090a0f 72%) !important;
    overflow: hidden !important;
  }

  body:is(.force-mobile-preview, .mobile-preview-active) #app-layout-root {
    width: 390px !important;
    max-width: 390px !important;
    height: min(844px, calc(100dvh - 28px)) !important;
    min-height: 0 !important;
    margin: 14px auto !important;
    border-radius: 32px !important;
    border: 6px solid #232634 !important;
    box-shadow:
      0 28px 80px rgba(0, 0, 0, 0.68),
      0 0 0 1px rgba(255, 255, 255, 0.12) !important;
    overflow: hidden !important;
    position: relative !important;
    background: var(--bg-app, #ffffff) !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* Pixel-perfect bottom nav flush with the inner bottom bezel on any monitor height */
  body:is(.force-mobile-preview, .mobile-preview-active) .mobile-bottom-nav {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important;
    position: fixed !important;
    top: calc(14px + min(844px, calc(100dvh - 28px)) - 66px) !important;
    bottom: auto !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 378px !important;
    height: 60px !important;
    padding: 4px 4px 6px !important;
    z-index: 1500 !important;
    border-radius: 0 0 26px 26px !important;
    background: var(--bg-surface, #ffffff) !important;
    border-top: 1px solid var(--border, #e4e4e7) !important;
    box-sizing: border-box !important;
  }

  body:is(.force-mobile-preview, .mobile-preview-active) .mobile-nav-btn {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    background: transparent !important;
    border: none !important;
    color: var(--text-muted) !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    border-radius: 8px !important;
    padding: 2px !important;
  }

  body:is(.force-mobile-preview, .mobile-preview-active) .mobile-nav-btn.active {
    color: var(--brand-blue) !important;
    background: var(--brand-blue-soft) !important;
  }

  body:is(.force-mobile-preview, .mobile-preview-active) .mobile-nav-btn .m-icon {
    font-size: 15px !important;
    line-height: 1 !important;
  }

  /* Mobile Course Bar & Clip Header Parity inside Desktop Mobile Preview */
  body:is(.force-mobile-preview, .mobile-preview-active):not(:has(#mobile-yt-studio-root)) #mobile-course-bar {
    display: block !important;
    margin-bottom: 10px !important;
  }

  body:is(.force-mobile-preview, .mobile-preview-active):has(#mobile-yt-studio-root) #mobile-course-bar,
  body:is(.force-mobile-preview, .mobile-preview-active) #syllovo-ai-fab,
  body:is(.force-mobile-preview, .mobile-preview-active) #mobile-floating-chat-fab {
    display: none !important;
  }

  body:is(.force-mobile-preview, .mobile-preview-active) .mobile-clip-card-header {
    display: flex !important;
  }

  /* Mobile "More" bottom sheet (.mobile-sheet-card) inside the 390x844 frame */
  body:is(.force-mobile-preview, .mobile-preview-active) #mobile-menu-sheet.open {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
    position: fixed !important;
    top: 20px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 378px !important;
    height: calc(min(844px, calc(100dvh - 28px)) - 12px) !important;
    border-radius: 26px !important;
    background: rgba(9, 9, 11, 0.56) !important;
    z-index: 2100 !important;
    overflow: hidden !important;
  }

  body:is(.force-mobile-preview, .mobile-preview-active) .mobile-sheet-card {
    width: 100% !important;
    max-height: 84% !important;
    overflow-y: auto !important;
    background: var(--bg-surface, #ffffff) !important;
    border-top: 1px solid var(--border, #e4e4e7) !important;
    border-radius: 18px 18px 26px 26px !important;
    padding: 14px !important;
    box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.35) !important;
    box-sizing: border-box !important;
  }

  /* Prevent 16px auto-zoom discrepancy & constrain wide desktop <select> inside preview */
  html body:is(.force-mobile-preview, .mobile-preview-active) input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]),
  html body:is(.force-mobile-preview, .mobile-preview-active) select,
  html body:is(.force-mobile-preview, .mobile-preview-active) textarea,
  html body:is(.force-mobile-preview, .mobile-preview-active) .form-input,
  html body:is(.force-mobile-preview, .mobile-preview-active) .course-select,
  html body:is(.force-mobile-preview, .mobile-preview-active) #mobile-course-selector,
  html body:is(.force-mobile-preview, .mobile-preview-active) .clip-owner-select,
  html body:is(.force-mobile-preview, .mobile-preview-active) .role-select,
  html body:is(.force-mobile-preview, .mobile-preview-active) #role-selector {
    font-size: 16px !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  html body:is(.force-mobile-preview, .mobile-preview-active) #page-view-container select:not(#mobile-clip-switcher-select):not(.mobile-editor-clip-select),
  html body:is(.force-mobile-preview, .mobile-preview-active) #page-view-container .course-select,
  html body:is(.force-mobile-preview, .mobile-preview-active) #page-view-container .role-select {
    width: 100% !important;
    max-width: 100% !important;
    text-overflow: ellipsis !important;
  }

  body:is(.force-mobile-preview, .mobile-preview-active) .top-header .btn,
  body:is(.force-mobile-preview, .mobile-preview-active) #mobile-theme-toggle-btn,
  body:is(.force-mobile-preview, .mobile-preview-active) #header-device-preview-toggle-btn,
  body:is(.force-mobile-preview, .mobile-preview-active) #header-notif-bell-btn,
  body:is(.force-mobile-preview, .mobile-preview-active) #header-theme-btn,
  body:is(.force-mobile-preview, .mobile-preview-active) #header-user-profile-btn,
  body:is(.force-mobile-preview, .mobile-preview-active) #page-view-container .btn,
  body:is(.force-mobile-preview, .mobile-preview-active) .modal-box .btn,
  body:is(.force-mobile-preview, .mobile-preview-active) .modal-box button,
  body:is(.force-mobile-preview, .mobile-preview-active) #header-notif-popover .btn,
  body:is(.force-mobile-preview, .mobile-preview-active) #user-profile-dropdown-popover .btn,
  body:is(.force-mobile-preview, .mobile-preview-active) .mobile-sheet-card .btn {
    min-height: 36px !important;
  }

  body:is(.force-mobile-preview, .mobile-preview-active) #mobile-theme-toggle-btn {
    height: 36px !important;
  }

  body:is(.force-mobile-preview, .mobile-preview-active) .top-header .btn {
    padding-left: 7px !important;
    padding-right: 7px !important;
  }

  /* Mirror mobile fluid wrapping & single-column grids inside preview */
  body:is(.force-mobile-preview, .mobile-preview-active) #page-view-container,
  body:is(.force-mobile-preview, .mobile-preview-active) #page-view-container .card,
  body:is(.force-mobile-preview, .mobile-preview-active) #page-view-container .card > div,
  body:is(.force-mobile-preview, .mobile-preview-active) #page-view-container section,
  body:is(.force-mobile-preview, .mobile-preview-active) #page-view-container article {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  body:is(.force-mobile-preview, .mobile-preview-active) .domain-video-grid,
  body:is(.force-mobile-preview, .mobile-preview-active) .domain-cards-grid,
  body:is(.force-mobile-preview, .mobile-preview-active) .domain-cards-grid-3 {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body:is(.force-mobile-preview, .mobile-preview-active) .domain-preset-metrics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* Downloads & Outline Sub-Tabs inside Desktop Mobile Preview */
  body:is(.force-mobile-preview, .mobile-preview-active) .dl-master-row {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    padding: 10px 12px !important;
  }

  body:is(.force-mobile-preview, .mobile-preview-active) .dl-mini-actions {
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
  }

  body:is(.force-mobile-preview, .mobile-preview-active) .dl-search-input {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  body:is(.force-mobile-preview, .mobile-preview-active) .dl-seg-group,
  body:is(.force-mobile-preview, .mobile-preview-active) .dl-section-head {
    flex-wrap: wrap !important;
    max-width: 100% !important;
  }

  body:is(.force-mobile-preview, .mobile-preview-active) .studio-bottom-tabs,
  body:is(.force-mobile-preview, .mobile-preview-active) .outline-subtabs,
  body:is(.force-mobile-preview, .mobile-preview-active) .outline-sub-tabs {
    flex-wrap: wrap !important;
    overflow-x: hidden !important;
    max-width: 100% !important;
    gap: 5px !important;
    padding: 4px !important;
  }

  body:is(.force-mobile-preview, .mobile-preview-active) .studio-bottom-tab,
  body:is(.force-mobile-preview, .mobile-preview-active) .studio-subtab-btn {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
    text-align: center !important;
    justify-content: center !important;
    padding: 7px 9px !important;
    font-size: 11.5px !important;
  }

  body:is(.force-mobile-preview, .mobile-preview-active) #page-view-container [style*="display:flex"]:not(.mobile-editor-controls-strip):not(.mobile-chat-header-bar):not(.mobile-chat-composer-row):not(.domain-subpage-link-row):not(.timeline-track-row),
  body:is(.force-mobile-preview, .mobile-preview-active) #page-view-container [style*="display: flex"]:not(.mobile-editor-controls-strip):not(.mobile-chat-header-bar):not(.mobile-chat-composer-row):not(.domain-subpage-link-row):not(.timeline-track-row) {
    flex-wrap: wrap !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body:is(.force-mobile-preview, .mobile-preview-active) #page-view-container [style*="minmax(200px"],
  body:is(.force-mobile-preview, .mobile-preview-active) #page-view-container [style*="minmax(210px"],
  body:is(.force-mobile-preview, .mobile-preview-active) #page-view-container [style*="minmax(240px"],
  body:is(.force-mobile-preview, .mobile-preview-active) #page-view-container [style*="minmax(250px"],
  body:is(.force-mobile-preview, .mobile-preview-active) #page-view-container [style*="minmax(260px"],
  body:is(.force-mobile-preview, .mobile-preview-active) #page-view-container [style*="minmax(280px"],
  body:is(.force-mobile-preview, .mobile-preview-active) #page-view-container [style*="minmax(300px"],
  body:is(.force-mobile-preview, .mobile-preview-active) #page-view-container [style*="minmax(310px"],
  body:is(.force-mobile-preview, .mobile-preview-active) #page-view-container [style*="minmax(320px"],
  body:is(.force-mobile-preview, .mobile-preview-active) #page-view-container [style*="minmax(340px"],
  body:is(.force-mobile-preview, .mobile-preview-active) #page-view-container [style*="minmax(360px"],
  body:is(.force-mobile-preview, .mobile-preview-active) #page-view-container [style*="repeat(3"],
  body:is(.force-mobile-preview, .mobile-preview-active) #page-view-container [style*="repeat(4"],
  body:is(.force-mobile-preview, .mobile-preview-active) #page-view-container [style*="1fr 1fr"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body:is(.force-mobile-preview, .mobile-preview-active) #page-view-container .btn,
  body:is(.force-mobile-preview, .mobile-preview-active) .modal-box .btn,
  body:is(.force-mobile-preview, .mobile-preview-active) #header-notif-popover .btn,
  body:is(.force-mobile-preview, .mobile-preview-active) #user-profile-dropdown-popover .btn,
  body:is(.force-mobile-preview, .mobile-preview-active) .mobile-sheet-card .btn {
    white-space: normal !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    line-height: 1.3 !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    overflow-wrap: anywhere;
  }

  body:is(.force-mobile-preview, .mobile-preview-active) .mobile-sheet-card [style*="grid-template-columns"],
  body:is(.force-mobile-preview, .mobile-preview-active) .mobile-sheet-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body:is(.force-mobile-preview, .mobile-preview-active) #page-view-container .pill,
  body:is(.force-mobile-preview, .mobile-preview-active) .modal-box .pill {
    white-space: normal !important;
    max-width: 100% !important;
    height: auto !important;
    line-height: 1.35 !important;
    overflow-wrap: anywhere;
  }

  body:is(.force-mobile-preview, .mobile-preview-active) #page-view-container a:not(.btn),
  body:is(.force-mobile-preview, .mobile-preview-active) #page-view-container code,
  body:is(.force-mobile-preview, .mobile-preview-active) #page-view-container .card-title,
  body:is(.force-mobile-preview, .mobile-preview-active) #page-view-container .card-subtitle,
  body:is(.force-mobile-preview, .mobile-preview-active) .modal-box a:not(.btn),
  body:is(.force-mobile-preview, .mobile-preview-active) .modal-box code {
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    white-space: normal !important;
  }

  /* Outline clip rows: compact mobile card layout inside force-mobile-preview / mobile-preview-active */
  body:is(.force-mobile-preview, .mobile-preview-active) table.clean-table:has(tr.clip-row),
  body:is(.force-mobile-preview, .mobile-preview-active) table.clean-table:has(tr.clip-row) > tbody {
    display: block !important;
    width: 100% !important;
  }

  body:is(.force-mobile-preview, .mobile-preview-active) table.clean-table:has(tr.clip-row) > thead {
    display: none !important;
  }

  body:is(.force-mobile-preview, .mobile-preview-active) table.clean-table tr.clip-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    padding: 10px 12px !important;
    border-bottom: 1px solid var(--border) !important;
  }

  body:is(.force-mobile-preview, .mobile-preview-active) table.clean-table tr.clip-row td {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    border: none !important;
  }

  body:is(.force-mobile-preview, .mobile-preview-active) table.clean-table tr.clip-row .td-clip-check,
  body:is(.force-mobile-preview, .mobile-preview-active) table.clean-table tr.clip-row .td-clip-code,
  body:is(.force-mobile-preview, .mobile-preview-active) table.clean-table tr.clip-row .td-clip-ps,
  body:is(.force-mobile-preview, .mobile-preview-active) table.clean-table tr.clip-row .td-clip-dur {
    display: none !important;
  }

  /* Non-clip data tables inside mobile preview: smooth horizontal touch scroll */
  body:is(.force-mobile-preview, .mobile-preview-active) table.clean-table:not(:has(tr.clip-row)) {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  body:is(.force-mobile-preview, .mobile-preview-active) table.clean-table:not(:has(tr.clip-row)) .btn,
  body:is(.force-mobile-preview, .mobile-preview-active) table.clean-table:not(:has(tr.clip-row)) .pill {
    white-space: nowrap !important;
    max-width: none !important;
  }

  /* Official HTML Outline stacked rows inside mobile preview */
  body:is(.force-mobile-preview, .mobile-preview-active) table.outline-html-table,
  body:is(.force-mobile-preview, .mobile-preview-active) table.outline-html-table > tbody,
  body:is(.force-mobile-preview, .mobile-preview-active) table.outline-html-table > tbody > tr {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  body:is(.force-mobile-preview, .mobile-preview-active) table.outline-html-table > tbody > tr > td.outline-label-col {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    border-right: none !important;
    border-bottom: 1px dashed var(--border) !important;
    padding: 8px 12px 4px !important;
  }

  body:is(.force-mobile-preview, .mobile-preview-active) table.outline-html-table > tbody > tr > td.outline-val-col {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 6px 12px 10px !important;
    overflow-x: auto !important;
    box-sizing: border-box !important;
  }

  /* Constrain Modals, Drawers & Popovers cleanly inside the 390x844 phone frame */
  body:is(.force-mobile-preview, .mobile-preview-active) .modal-backdrop {
    top: 14px !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translateX(-50%) !important;
    width: 390px !important;
    height: min(844px, calc(100dvh - 28px)) !important;
    border-radius: 32px !important;
    padding: 10px !important;
    box-sizing: border-box !important;
  }

  body:is(.force-mobile-preview, .mobile-preview-active) .modal-box,
  body:is(.force-mobile-preview, .mobile-preview-active) #new-course-modal-backdrop .modal-box,
  body:is(.force-mobile-preview, .mobile-preview-active) #registered-users-db-modal-box,
  body:is(.force-mobile-preview, .mobile-preview-active) #qr-modal-box,
  body:is(.force-mobile-preview, .mobile-preview-active) #course-copilot-drawer-box,
  body:is(.force-mobile-preview, .mobile-preview-active) #camtasia-roundtrip-modal-backdrop .modal-box {
    width: 366px !important;
    max-width: 366px !important;
    max-height: calc(min(844px, calc(100dvh - 28px)) - 36px) !important;
    padding: 14px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    border-radius: 14px !important;
    box-sizing: border-box !important;
  }

  body:is(.force-mobile-preview, .mobile-preview-active) #cmdk-modal-backdrop .modal-box {
    width: 366px !important;
    max-width: 366px !important;
    max-height: calc(min(844px, calc(100dvh - 28px)) - 48px) !important;
    padding: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    border-radius: 14px !important;
    box-sizing: border-box !important;
  }

  body:is(.force-mobile-preview, .mobile-preview-active) #new-course-modal-backdrop .grid-3,
  body:is(.force-mobile-preview, .mobile-preview-active) #new-course-modal-backdrop .grid-2,
  body:is(.force-mobile-preview, .mobile-preview-active) #new-course-modal-backdrop [style*="grid-template-columns"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body:is(.force-mobile-preview, .mobile-preview-active) #new-course-modal-backdrop .modal-box div[style*="display:flex"],
  body:is(.force-mobile-preview, .mobile-preview-active) #new-course-modal-backdrop .modal-box div[style*="display: flex"] {
    flex-wrap: wrap !important;
  }

  body:is(.force-mobile-preview, .mobile-preview-active) #header-notif-popover,
  body:is(.force-mobile-preview, .mobile-preview-active) #user-profile-dropdown-popover {
    position: fixed !important;
    top: 72px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: 366px !important;
    max-width: 366px !important;
    max-height: calc(min(844px, calc(100dvh - 28px)) - 96px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    z-index: 2600 !important;
  }

  body:is(.force-mobile-preview, .mobile-preview-active) #page-view-container aside[style*="position:fixed"] {
    top: 20px !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translateX(-50%) !important;
    width: 378px !important;
    max-width: 378px !important;
    height: calc(min(844px, calc(100dvh - 28px)) - 12px) !important;
    border-radius: 26px !important;
    padding-bottom: 76px !important;
    box-sizing: border-box !important;
  }
}

/* ============================================================================
   12. WCAG 2.1 AA CONTRAST & TOUCH TARGET GUARANTEES (v17.1)
   ============================================================================ */
#home-showcase-cc-btn {
  min-height: 32px !important;
  min-width: 32px !important;
  padding-top: 5px !important;
  padding-bottom: 5px !important;
}

.app-sidebar,
.app-sidebar .nav-item,
.app-sidebar .nav-label-text,
.app-sidebar .nav-badge {
  transition: none !important;
}

:root:not([data-theme="dark"]) .app-sidebar .nav-item:not(.active),
[data-theme="light"] .app-sidebar .nav-item:not(.active),
:root:not([data-theme="dark"]) .app-sidebar .nav-item:not(.active) .nav-label-text,
[data-theme="light"] .app-sidebar .nav-item:not(.active) .nav-label-text {
  color: #27272a !important;
}

[data-theme="dark"] .app-sidebar .nav-item:not(.active),
[data-theme="dark"] .app-sidebar .nav-item:not(.active) .nav-label-text {
  color: #e4e4e7 !important;
}

:root:not([data-theme="dark"]) .app-sidebar .nav-item:not(.active) .nav-badge:not(#badge-vendor-env),
[data-theme="light"] .app-sidebar .nav-item:not(.active) .nav-badge:not(#badge-vendor-env) {
  color: #18181b !important;
  background: #e4e4e7 !important;
}

[data-theme="dark"] .app-sidebar .nav-item:not(.active) .nav-badge:not(#badge-vendor-env) {
  color: #f4f4f5 !important;
  background: #27272a !important;
}

:root:not([data-theme="dark"]) .app-sidebar .nav-item.active .nav-badge:not(#badge-vendor-env),
[data-theme="light"] .app-sidebar .nav-item.active .nav-badge:not(#badge-vendor-env) {
  color: #fafafa !important;
  background: #27272a !important;
}

[data-theme="dark"] .app-sidebar .nav-item.active .nav-badge:not(#badge-vendor-env) {
  color: #09090b !important;
  background: #e4e4e7 !important;
}

:root:not([data-theme="dark"]) .app-sidebar .nav-item:not(.active) #badge-vendor-env,
[data-theme="light"] .app-sidebar .nav-item:not(.active) #badge-vendor-env {
  color: #065f46 !important;
  background: #d1fae5 !important;
}

[data-theme="dark"] .app-sidebar .nav-item:not(.active) #badge-vendor-env {
  color: #6ee7b7 !important;
  background: rgba(16, 185, 129, 0.2) !important;
}

:root:not([data-theme="dark"]) .app-sidebar .nav-item.active #badge-vendor-env,
[data-theme="light"] .app-sidebar .nav-item.active #badge-vendor-env {
  color: #ecfdf5 !important;
  background: #047857 !important;
}

[data-theme="dark"] .app-sidebar .nav-item.active #badge-vendor-env {
  color: #052e16 !important;
  background: #6ee7b7 !important;
}

[data-theme="dark"] [style*="0B5394" i] {
  color: #93c5fd !important;
  background: rgba(59, 130, 246, 0.18) !important;
  border-color: rgba(147, 197, 253, 0.45) !important;
}

/* ============================================================================
   13. SYLLOVO AI VIDEO EDITOR CHAT, COMPOSER & AUTO/TURBO ROUTER (WCAG >= 7:1)
   ============================================================================ */
:root,
:root:not([data-theme="dark"]),
[data-theme="light"] {
  --syl-ai-panel-bg: #f8fafc;
  --syl-ai-header-bg: #ffffff;
  --syl-ai-feed-bg: #f8fafc;
  --syl-ai-card-bg: #ffffff;
  --syl-ai-subcard-bg: #f1f5f9;
  --syl-ai-user-bg: #eef2ff;
  --syl-ai-user-border: #a5b4fc;
  --syl-ai-composer-bg: #ffffff;
  --syl-ai-composer-bar-bg: #f1f5f9;
  --syl-ai-border: #cbd5e1;
  --syl-ai-border-strong: #94a3b8;
  --syl-ai-ink-strong: #0f172a;
  --syl-ai-ink-body: #1e293b;
  --syl-ai-ink-muted: #334155;
  --syl-ai-accent-ink: #1e3a8a;
  --syl-ai-code-bg: #f1f5f9;
  --syl-ai-code-border: #cbd5e1;
  --syl-ai-code-ink: #1e3a8a;
  --syl-ai-pill-bg: #eef2ff;
  --syl-ai-pill-border: #a5b4fc;
  --syl-ai-pill-ink: #1e1b4b;
  --syl-ai-verified-bg: #ecfdf5;
  --syl-ai-verified-border: #10b981;
  --syl-ai-verified-ink: #064e3b;
  --syl-ai-queued-bg: #eef2ff;
  --syl-ai-queued-border: #6366f1;
  --syl-ai-queued-ink: #1e1b4b;
  --syl-ai-inspected-bg: #f0f9ff;
  --syl-ai-inspected-border: #0284c7;
  --syl-ai-inspected-ink: #0c4a6e;
  --syl-ai-warn-bg: #fffbeb;
  --syl-ai-warn-border: #d97706;
  --syl-ai-warn-ink: #78350f;
  --syl-ai-chip-bg: #f8fafc;
  --syl-ai-chip-border: #94a3b8;
  --syl-ai-chip-ink: #0f172a;
  --syl-ai-chip-primary-bg: #e0e7ff;
  --syl-ai-chip-primary-border: #4f46e5;
  --syl-ai-chip-primary-ink: #1e1b4b;
  --syl-ai-mode-track-bg: #e2e8f0;
  --syl-ai-mode-active-bg: #0f172a;
  --syl-ai-mode-active-ink: #ffffff;
  --syl-ai-mode-idle-ink: #1e293b;
  --syl-ai-send-bg: #0f172a;
  --syl-ai-send-ink: #ffffff;
  --syl-ai-shadow: 0 6px 20px rgba(15, 23, 42, 0.08);
}

[data-theme="dark"] {
  --syl-ai-panel-bg: #0b0d14;
  --syl-ai-header-bg: #0f1320;
  --syl-ai-feed-bg: #0b0d14;
  --syl-ai-card-bg: #131724;
  --syl-ai-subcard-bg: #0d101a;
  --syl-ai-user-bg: #192036;
  --syl-ai-user-border: #384673;
  --syl-ai-composer-bg: #131724;
  --syl-ai-composer-bar-bg: #0f1320;
  --syl-ai-border: #242c42;
  --syl-ai-border-strong: #36415e;
  --syl-ai-ink-strong: #f8fafc;
  --syl-ai-ink-body: #e2e8f0;
  --syl-ai-ink-muted: #cbd5e1;
  --syl-ai-accent-ink: #bfdbfe;
  --syl-ai-code-bg: #1a2136;
  --syl-ai-code-border: #334155;
  --syl-ai-code-ink: #dbeafe;
  --syl-ai-pill-bg: #1a2136;
  --syl-ai-pill-border: #3b4970;
  --syl-ai-pill-ink: #e0e7ff;
  --syl-ai-verified-bg: #06281e;
  --syl-ai-verified-border: #10b981;
  --syl-ai-verified-ink: #a7f3d0;
  --syl-ai-queued-bg: #171c36;
  --syl-ai-queued-border: #818cf8;
  --syl-ai-queued-ink: #e0e7ff;
  --syl-ai-inspected-bg: #0a2236;
  --syl-ai-inspected-border: #38bdf8;
  --syl-ai-inspected-ink: #e0f2fe;
  --syl-ai-warn-bg: #2b1c07;
  --syl-ai-warn-border: #f59e0b;
  --syl-ai-warn-ink: #fef3c7;
  --syl-ai-chip-bg: #181e30;
  --syl-ai-chip-border: #334155;
  --syl-ai-chip-ink: #f8fafc;
  --syl-ai-chip-primary-bg: #1e2444;
  --syl-ai-chip-primary-border: #6366f1;
  --syl-ai-chip-primary-ink: #eef2ff;
  --syl-ai-mode-track-bg: #0b0d14;
  --syl-ai-mode-active-bg: #e0e7ff;
  --syl-ai-mode-active-ink: #0f172a;
  --syl-ai-mode-idle-ink: #e2e8f0;
  --syl-ai-send-bg: #f8fafc;
  --syl-ai-send-ink: #0f172a;
  --syl-ai-shadow: 0 8px 24px rgba(0, 0, 0, 0.42);
}

/* High-Contrast Containers Across Light & Dark Themes */
#studio-side-comment-dock,
#fullscreen-chat-drawer,
#course-copilot-drawer-box,
.syllovo-ai-panel,
.studio-agent-panel,
.ai-chat-panel {
  background: var(--syl-ai-panel-bg) !important;
  color: var(--syl-ai-ink-strong) !important;
  border-left: 1px solid var(--syl-ai-border) !important;
}

#studio-side-comment-dock #side-dock-chat-scroll,
#mobile-studio-chat-card #mobile-inline-chat-feed,
#mobile-inline-chat-card #mobile-inline-chat-feed,
#mobile-video-chat-sheet #mobile-floating-chat-feed,
#fullscreen-chat-drawer .syllovo-ai-feed {
  background: var(--syl-ai-feed-bg) !important;
  color: var(--syl-ai-ink-body) !important;
}

/* Guarantee Readable Typography (>= 7:1 Contrast) in All Chat Cards, Lists & Bullets */
:is(
    #studio-side-comment-dock,
    #mobile-studio-chat-card,
    #mobile-inline-chat-card,
    #mobile-video-chat-sheet,
    #fullscreen-chat-drawer,
    #course-copilot-drawer-box,
    [class*="ai-chat-"],
    [class*="studio-agent-"],
    [class*="syllovo-ai-"]:not(.syllovo-ai-fab):not(.syllovo-ai-send-btn):not(.syllovo-ai-mode-opt)
  )
  :is(p, li, ul, ol) {
  color: var(--syl-ai-ink-body) !important;
}

:is(
    #studio-side-comment-dock,
    #mobile-studio-chat-card,
    #mobile-inline-chat-card,
    #mobile-video-chat-sheet,
    #fullscreen-chat-drawer,
    #course-copilot-drawer-box,
    [class*="ai-chat-"],
    [class*="studio-agent-"],
    [class*="syllovo-ai-"]:not(.syllovo-ai-fab):not(.syllovo-ai-send-btn):not(.syllovo-ai-mode-opt)
  )
  :is(h1, h2, h3, h4, strong, b) {
  color: var(--syl-ai-ink-strong) !important;
}

:is(
    #studio-side-comment-dock,
    #mobile-studio-chat-card,
    #mobile-inline-chat-card,
    #mobile-video-chat-sheet,
    #fullscreen-chat-drawer,
    #course-copilot-drawer-box
  )
  code {
  background: var(--syl-ai-code-bg) !important;
  border: 1px solid var(--syl-ai-code-border) !important;
  color: var(--syl-ai-code-ink) !important;
  border-radius: 4px;
  padding: 1px 5px;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 11px;
}

/* Chat Header & Context Pills */
.syl-chat-header,
.syllovo-ai-header {
  padding: 10px 12px;
  background: var(--syl-ai-header-bg) !important;
  color: var(--syl-ai-ink-strong) !important;
  border-bottom: 1px solid var(--syl-ai-border) !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-shrink: 0;
}

.syl-chat-ctx-pill,
.syllovo-ai-tier-badge {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--syl-ai-pill-bg) !important;
  border: 1px solid var(--syl-ai-pill-border) !important;
  color: var(--syl-ai-pill-ink) !important;
  white-space: nowrap;
}

.syl-chat-hdr-btn {
  background: var(--syl-ai-chip-bg) !important;
  border: 1px solid var(--syl-ai-border-strong) !important;
  color: var(--syl-ai-ink-strong) !important;
  font-size: 11px;
  font-weight: 700;
  min-height: 30px;
  min-width: 30px;
  padding: 3px 9px;
  border-radius: 7px;
  cursor: pointer;
}

.syl-chat-hdr-btn:hover {
  background: var(--syl-ai-chip-primary-bg) !important;
  border-color: var(--syl-ai-chip-primary-border) !important;
  color: var(--syl-ai-chip-primary-ink) !important;
}

/* Welcome State & Prompt Starters */
.syllovo-ai-welcome-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--syl-ai-ink-strong) !important;
  letter-spacing: -0.01em;
  line-height: 1.35;
}

.syllovo-ai-welcome-sub {
  font-size: 11.5px;
  color: var(--syl-ai-ink-muted) !important;
  max-width: 306px;
  line-height: 1.48;
}

.syl-hero-prompt-pill {
  width: 100%;
  text-align: left;
  padding: 8px 11px;
  min-height: 36px;
  border-radius: 10px;
  background: var(--syl-ai-card-bg) !important;
  border: 1px solid var(--syl-ai-border) !important;
  color: var(--syl-ai-ink-body) !important;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.38;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.syl-hero-prompt-pill span {
  color: var(--syl-ai-ink-body) !important;
}

.syl-hero-prompt-pill:hover {
  background: var(--syl-ai-chip-primary-bg) !important;
  border-color: var(--syl-ai-chip-primary-border) !important;
  color: var(--syl-ai-chip-primary-ink) !important;
}

/* User & Assistant Message Cards */
.syl-user-turn-bubble {
  align-self: flex-end;
  max-width: 94%;
  padding: 8px 11px;
  border-radius: 12px 12px 3px 12px;
  background: var(--syl-ai-user-bg) !important;
  border: 1px solid var(--syl-ai-user-border) !important;
  color: var(--syl-ai-ink-strong) !important;
  font-size: 12.5px;
  line-height: 1.45;
  word-break: break-word;
}

.syl-user-turn-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 5px;
  flex-wrap: wrap;
}

.syl-user-avatar-badge {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #4f46e5;
  color: #ffffff !important;
  font-size: 9.5px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.syl-agent-card,
.studio-agent-card,
.ai-chat-card,
.syllovo-ai-card {
  flex: 1;
  min-width: 0;
  background: var(--syl-ai-card-bg) !important;
  border: 1px solid var(--syl-ai-border) !important;
  border-radius: 12px;
  padding: 10px 11px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--syl-ai-ink-strong) !important;
  font-size: 12.5px;
  line-height: 1.5;
  box-shadow: var(--syl-ai-shadow);
}

.syl-thinking-box,
.syllovo-ai-phases-box {
  background: var(--syl-ai-subcard-bg) !important;
  border: 1px solid var(--syl-ai-border) !important;
  border-radius: 9px;
  padding: 7px 9px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 11.5px;
  color: var(--syl-ai-ink-body) !important;
}

.syllovo-ai-understanding-box {
  background: var(--syl-ai-subcard-bg) !important;
  border: 1px solid var(--syl-ai-border) !important;
  border-left: 3px solid #4f46e5 !important;
  border-radius: 8px;
  padding: 6px 9px;
  font-size: 11.5px;
  line-height: 1.42;
  color: var(--syl-ai-ink-body) !important;
}

.syl-spec-blueprint-box {
  background: var(--syl-ai-subcard-bg) !important;
  border: 1px solid var(--syl-ai-border-strong) !important;
  border-left: 3px solid #4f46e5 !important;
  border-radius: 8px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 11.5px;
  color: var(--syl-ai-ink-strong) !important;
}

/* Status Pills & Skill Badges (WCAG >= 7:1 in Both Themes) */
.syl-status-pill--verified {
  background: var(--syl-ai-verified-bg) !important;
  border: 1px solid var(--syl-ai-verified-border) !important;
  color: var(--syl-ai-verified-ink) !important;
}

.syl-status-pill--queued {
  background: var(--syl-ai-queued-bg) !important;
  border: 1px solid var(--syl-ai-queued-border) !important;
  color: var(--syl-ai-queued-ink) !important;
}

.syl-status-pill--inspected {
  background: var(--syl-ai-inspected-bg) !important;
  border: 1px solid var(--syl-ai-inspected-border) !important;
  color: var(--syl-ai-inspected-ink) !important;
}

.syl-skill-badge {
  background: var(--syl-ai-pill-bg) !important;
  border: 1px solid var(--syl-ai-pill-border) !important;
  color: var(--syl-ai-pill-ink) !important;
}

.syl-step-row {
  color: var(--syl-ai-ink-body) !important;
}

.syl-action-chip {
  min-height: 30px;
  background: var(--syl-ai-chip-bg) !important;
  border: 1px solid var(--syl-ai-chip-border) !important;
  color: var(--syl-ai-chip-ink) !important;
}

.syl-action-chip--primary {
  background: var(--syl-ai-chip-primary-bg) !important;
  border: 1px solid var(--syl-ai-chip-primary-border) !important;
  color: var(--syl-ai-chip-primary-ink) !important;
}

.syl-action-chip:hover {
  border-color: #10b981 !important;
}

/* Antigravity-Style Composer & Auto/Turbo Mode Selector */
.syllovo-ai-composer-dock {
  flex: 0 0 auto;
  padding: 8px 10px 10px;
  background: var(--syl-ai-panel-bg) !important;
  border-top: 1px solid var(--syl-ai-border) !important;
}

.syllovo-ai-composer {
  position: relative;
  border-radius: 14px;
  background: var(--syl-ai-composer-bg) !important;
  border: 1px solid var(--syl-ai-border-strong) !important;
  box-shadow: var(--syl-ai-shadow);
  display: flex;
  flex-direction: column;
  overflow: visible !important;
}

.syllovo-ai-composer:focus-within {
  border-color: #4f46e5 !important;
}

.syllovo-ai-composer-ctx-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 6px 10px;
  background: var(--syl-ai-composer-bar-bg) !important;
  border-bottom: 1px solid var(--syl-ai-border) !important;
  border-radius: 13px 13px 0 0;
}

.syllovo-ai-ctx-summary {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--syl-ai-ink-muted) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.syllovo-ai-frame-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 26px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--syl-ai-border-strong) !important;
  background: var(--syl-ai-card-bg) !important;
  color: var(--syl-ai-ink-strong) !important;
  font-size: 10.5px;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
}

.syllovo-ai-frame-toggle[aria-pressed="true"] {
  background: var(--syl-ai-chip-primary-bg) !important;
  border-color: var(--syl-ai-chip-primary-border) !important;
  color: var(--syl-ai-chip-primary-ink) !important;
}

.syllovo-ai-textarea {
  width: 100%;
  min-height: 48px;
  max-height: 140px;
  overflow-y: auto;
  padding: 9px 11px 6px;
  font-size: 13px;
  line-height: 1.45;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  color: var(--syl-ai-ink-strong) !important;
  resize: none;
  font-family: inherit;
  box-sizing: border-box;
}

.syllovo-ai-textarea::placeholder {
  color: var(--syl-ai-ink-muted) !important;
  opacity: 0.88;
}

.syllovo-ai-composer-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 5px 8px 8px;
}

.syllovo-ai-controls-left {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  position: relative;
}

.syllovo-ai-plus-btn {
  width: 30px;
  min-width: 30px;
  height: 30px;
  min-height: 30px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--syl-ai-border-strong) !important;
  background: var(--syl-ai-subcard-bg) !important;
  color: var(--syl-ai-ink-strong) !important;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}

.syllovo-ai-plus-btn:hover {
  background: var(--syl-ai-chip-primary-bg) !important;
  border-color: var(--syl-ai-chip-primary-border) !important;
}

.syllovo-ai-plus-menu {
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  min-width: 224px;
  padding: 5px;
  border-radius: 11px;
  background: var(--syl-ai-card-bg) !important;
  border: 1px solid var(--syl-ai-border-strong) !important;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.22);
  display: flex;
  flex-direction: column;
  gap: 3px;
  z-index: 90;
}

.syllovo-ai-plus-item {
  width: 100%;
  min-height: 32px;
  padding: 6px 9px;
  border-radius: 7px;
  border: none;
  background: transparent;
  color: var(--syl-ai-ink-strong) !important;
  font-size: 11.5px;
  font-weight: 600;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
}

.syllovo-ai-plus-item:hover {
  background: var(--syl-ai-subcard-bg) !important;
}

.syllovo-ai-mode-selector {
  display: inline-flex;
  align-items: center;
  padding: 2px;
  border-radius: 999px;
  background: var(--syl-ai-mode-track-bg) !important;
  border: 1px solid var(--syl-ai-border) !important;
  gap: 2px;
  flex-shrink: 0;
}

.syllovo-ai-mode-opt {
  min-height: 26px;
  padding: 2px 9px;
  border-radius: 999px;
  border: none;
  background: transparent !important;
  color: var(--syl-ai-mode-idle-ink) !important;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  white-space: nowrap;
}

.syllovo-ai-mode-opt[aria-pressed="true"],
.syllovo-ai-mode-opt.is-active {
  background: var(--syl-ai-mode-active-bg) !important;
  color: var(--syl-ai-mode-active-ink) !important;
}

.syllovo-ai-send-btn {
  width: 30px;
  min-width: 30px;
  height: 30px;
  min-height: 30px;
  padding: 0 !important;
  border-radius: 999px !important;
  border: none !important;
  background: var(--syl-ai-send-bg) !important;
  color: var(--syl-ai-send-ink) !important;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer;
  flex-shrink: 0;
}

.syllovo-ai-send-btn:hover {
  opacity: 0.9;
}

/* Mobile Chat Card & Sheet Contrast + Touch Targets (>= 34px, 16px Inputs) */
#mobile-studio-chat-card,
#mobile-inline-chat-card,
#mobile-video-chat-sheet .mobile-video-chat-card {
  background: var(--syl-ai-panel-bg) !important;
  color: var(--syl-ai-ink-strong) !important;
  border: 1px solid var(--syl-ai-border) !important;
}

#mobile-studio-chat-card .mobile-chat-header-bar,
#mobile-inline-chat-card .mobile-yt-chat-header {
  background: var(--syl-ai-header-bg) !important;
  color: var(--syl-ai-ink-strong) !important;
  border-bottom: 1px solid var(--syl-ai-border) !important;
}

#mobile-studio-chat-card .mobile-chat-header-bar span,
#mobile-inline-chat-card .mobile-yt-chat-header span {
  color: var(--syl-ai-ink-strong) !important;
}

#mobile-studio-chat-card .mobile-chat-composer-bar,
#mobile-inline-chat-card .mobile-yt-chat-composer {
  background: var(--syl-ai-panel-bg) !important;
  color: var(--syl-ai-ink-strong) !important;
  border-top: 1px solid var(--syl-ai-border) !important;
  padding: 6px 8px !important;
}

#mobile-studio-chat-card .mobile-chat-empty-greeting {
  color: var(--syl-ai-ink-strong) !important;
  font-size: 12.5px;
  font-weight: 600;
}

#mobile-studio-chat-card .mobile-chat-quick-chip {
  background: var(--syl-ai-card-bg) !important;
  border: 1px solid var(--syl-ai-border-strong) !important;
  color: var(--syl-ai-ink-strong) !important;
  min-height: 32px;
  font-weight: 600;
}

/* Floating Course Copilot Button High-Contrast Safeguard */
:root:not([data-theme="dark"]) #syllovo-ai-fab,
[data-theme="light"] #syllovo-ai-fab {
  background: #0f172a !important;
  color: #ffffff !important;
  border: 1px solid #334155 !important;
}

[data-theme="dark"] #syllovo-ai-fab {
  background: #f8fafc !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
}

@media (max-width: 768px) {
  .syllovo-ai-textarea,
  #side-dock-comment-input,
  #ve-ai-chat-input,
  #mobile-floating-chat-input,
  #fs-chat-comment-input {
    font-size: 16px !important;
  }

  .syllovo-ai-plus-btn,
  .syllovo-ai-send-btn {
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
  }

  .syllovo-ai-mode-opt,
  .syllovo-ai-frame-toggle {
    min-height: 32px !important;
  }
}

body:is(.force-mobile-preview, .mobile-preview-active) :is(
    .syllovo-ai-textarea,
    #side-dock-comment-input,
    #ve-ai-chat-input,
    #mobile-floating-chat-input,
    #fs-chat-comment-input
  ) {
  font-size: 16px !important;
}

body:is(.force-mobile-preview, .mobile-preview-active) :is(.syllovo-ai-plus-btn, .syllovo-ai-send-btn) {
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
}

/* v21.0 Interactive Caption Pill & Collapsible Module Header Polish */
#stage-live-caption-bar {
  pointer-events: auto !important;
}

.sidebar-module-collapse-hdr:hover {
  background: var(--bg-subtle);
}