/* Responsive view layout. The same navigation drawer serves all four sections. */
#root [data-karma-mobile-back],
#root [data-karma-mobile-filter-toggle],
#root [data-karma-mobile-menu-button],
#root [data-karma-drawer-close],
body > [data-karma-drawer-scrim] { display: none; }

@media (max-width: 899px) {
  :root { --karma-mobile-nav-size: 0px; }
  body[data-karma-view="dialogs"], body[data-karma-view="analytics"],
  body[data-karma-view="reports"], body[data-karma-view="transcription"] {
    overflow-x: hidden;
    background: var(--cabinet-canvas);
  }
  #root > [class~="h-screen"] { height: 100dvh !important; min-width: 0; }
  #root > [class~="h-screen"] > [class~="flex-1"][class~="overflow-hidden"] { min-width: 0; }
  body[data-karma-view="dialogs"] #root [class~="h-screen"][class~="overflow-hidden"],
  body[data-karma-view="analytics"] #root [class~="h-screen"][class~="overflow-hidden"],
  body[data-karma-view="reports"] #root [class~="h-screen"][class~="overflow-hidden"],
  body[data-karma-view="transcription"] #root .karma-transcription-page {
    height: 100dvh !important;
    min-width: 0;
    overflow: hidden;
  }
  body > [data-karma-drawer-scrim] {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 59;
    width: 100%;
    height: 100%;
    border: 0;
    background: rgb(7 23 27 / 50%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 230ms ease, visibility 230ms ease;
  }
  body[data-karma-drawer-open] > [data-karma-drawer-scrim] {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  #root [data-karma-mobile-nav] {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    width: min(312px, calc(100vw - 48px)) !important;
    min-width: 0;
    height: 100dvh !important;
    flex-direction: column !important;
    align-items: stretch;
    z-index: 60;
    border: 0 !important;
    border-radius: 0 28px 28px 0;
    background: var(--md-sys-color-surface-container-low) !important;
    color: var(--md-sys-color-on-surface) !important;
    box-shadow: 0 16px 36px rgb(0 0 0 / 20%);
    padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px);
    transform: translateX(calc(-100% - 40px));
    visibility: hidden;
    pointer-events: none;
    transition: transform 310ms cubic-bezier(.2,.8,.2,1), visibility 310ms !important;
  }
  body[data-karma-drawer-open] #root [data-karma-mobile-nav] {
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
  }
  #root [data-karma-mobile-nav] > :first-child {
    display: flex !important;
    flex: none;
    min-height: 76px;
    padding: 18px 19px !important;
    justify-content: space-between !important;
    border: 0 !important;
  }
  #root [data-karma-mobile-nav] > :first-child > button:not([data-karma-drawer-close]),
  #root [data-karma-mobile-nav] > [class~="absolute"] { display: none !important; }
  #root [data-karma-drawer-close] {
    display: inline-flex !important;
    flex: none;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--md-sys-color-on-surface-variant);
  }
  #root [data-karma-drawer-close]:hover { background: var(--md-sys-color-surface-container-high); }
  #root [data-karma-mobile-links] { flex: 1 !important; min-height: 0; padding: 12px !important; overflow-y: auto !important; }
  #root [data-karma-mobile-links] > nav { display: flex; flex-direction: column; align-items: stretch; gap: 4px; height: auto; }
  #root [data-karma-mobile-links] > nav > button,
  #root [data-karma-mobile-tools] > button {
    display: flex !important;
    width: 100% !important;
    height: auto;
    min-height: 56px;
    padding: 10px 16px !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 14px !important;
    border: 0 !important;
    border-radius: 28px !important;
    text-align: left;
    color: var(--md-sys-color-on-surface-variant) !important;
    background: transparent !important;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
  }
  #root [data-karma-mobile-links] > nav > button > div,
  #root [data-karma-mobile-tools] > button > div { display: flex; align-items: center; gap: 14px; }
  #root [data-karma-mobile-links] > nav > button svg,
  #root [data-karma-mobile-tools] > button svg { width: 22px; height: 22px; flex: none; }
  #root [data-karma-mobile-links] > nav > button[title]:not(:has(span))::after,
  #root [data-karma-mobile-tools] > button[title]:not(:has(span))::after { content: attr(title); }
  #root [data-karma-mobile-links] > nav > button[class~="bg-gray-100"],
  #root [data-karma-mobile-links] > nav > button[class~="dark:bg-gray-700"] {
    background: var(--md-sys-color-secondary-container) !important;
    color: var(--md-sys-color-on-secondary-container) !important;
  }
  #root [data-karma-mobile-links] > nav > button:hover,
  #root [data-karma-mobile-tools] > button:hover { background: var(--md-sys-color-surface-container-high) !important; }
  #root [data-karma-mobile-tools] {
    display: flex !important;
    flex: none;
    flex-direction: column;
    gap: 4px;
    padding: 12px 12px 16px !important;
    border-top: 1px solid var(--md-sys-color-outline-variant);
    background: transparent !important;
  }
  #root [data-karma-mobile-tools] > button { min-height: 48px; }
  #root [data-karma-mobile-menu-button] {
    display: inline-flex !important;
    width: 44px;
    height: 44px;
    flex: none;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--md-sys-color-on-surface) !important;
  }
  #root [data-karma-mobile-menu-button]:hover,
  #root [data-karma-mobile-menu-button]:active { background: var(--md-sys-color-surface-container-high); }
  #root .karma-transcription-header { display: flex; align-items: center; }
  body[data-karma-view="dialogs"] #root [class~="h-screen"][class~="overflow-hidden"] > [class~="border-b"],
  body[data-karma-view="analytics"] #root [class~="h-screen"][class~="overflow-hidden"] > [class~="border-b"],
  body[data-karma-view="reports"] #root [class~="h-screen"][class~="overflow-hidden"] > [class~="border-b"] {
    min-height: 66px;
    padding: 11px 15px !important;
  }
  body[data-karma-view="dialogs"] #root [class~="h-screen"][class~="overflow-hidden"] > [class~="border-b"] h1,
  body[data-karma-view="analytics"] #root [class~="h-screen"][class~="overflow-hidden"] > [class~="border-b"] h1,
  body[data-karma-view="reports"] #root [class~="h-screen"][class~="overflow-hidden"] > [class~="border-b"] h1 { font-size: 18px; line-height: 1.25; }
  body[data-karma-view="dialogs"] #root [class~="h-screen"][class~="overflow-hidden"] > [class~="border-b"] h2,
  body[data-karma-view="analytics"] #root [class~="h-screen"][class~="overflow-hidden"] > [class~="border-b"] h2,
  body[data-karma-view="reports"] #root [class~="h-screen"][class~="overflow-hidden"] > [class~="border-b"] h2 { font-size: 12px; }

  /* One dialog panel at a time; the selected dialog stays in React state. */
  body[data-karma-view="dialogs"] #root [class~="w-1/2"][class~="border-r"],
  body[data-karma-view="dialogs"] #root [class~="w-1/2"][class~="bg-gray-50"] {
    width: 100% !important;
    flex: 1 1 100%;
    min-width: 0;
  }
  body[data-karma-view="dialogs"] #root [class~="w-1/2"][class~="bg-gray-50"] { display: none !important; }
  body[data-karma-view="dialogs"][data-karma-mobile-detail="open"] #root [class~="w-1/2"][class~="border-r"] { display: none !important; }
  body[data-karma-view="dialogs"][data-karma-mobile-detail="open"] #root [class~="w-1/2"][class~="bg-gray-50"] { display: flex !important; }
  body[data-karma-view="dialogs"][data-karma-mobile-detail="open"] #root [class~="h-screen"][class~="overflow-hidden"] > [class~="border-b"] > div:first-child > h1,
  body[data-karma-view="dialogs"][data-karma-mobile-detail="open"] #root [class~="h-screen"][class~="overflow-hidden"] > [class~="border-b"] > div:first-child > h2 { display: none; }
  body[data-karma-view="dialogs"][data-karma-mobile-detail="open"] #root [data-karma-mobile-back] {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    border: 0;
    background: transparent;
    font-size: 15px;
    font-weight: 600;
    color: #396779;
  }
  html.dark body[data-karma-view="dialogs"][data-karma-mobile-detail="open"] #root [data-karma-mobile-back] { color: #acd5e7; }
  body[data-karma-view="dialogs"] #root [class~="w-1/2"][class~="border-r"] > div { padding: 10px 12px 22px !important; }
  body[data-karma-view="dialogs"] #root [data-karma-mobile-filters] { padding: 12px !important; border-radius: 16px; }
  body[data-karma-view="dialogs"] #root [data-karma-mobile-filters]:not([data-karma-filters-open]) > [class~="space-y-4"] { display: none !important; }
  body[data-karma-view="dialogs"] #root [data-karma-mobile-filter-toggle] {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    padding: 0 8px;
    border: 0;
    border-radius: 10px;
    background: #e4edf1;
    color: #395b6a;
    font-size: 12px;
    font-weight: 600;
  }
  html.dark body[data-karma-view="dialogs"] #root [data-karma-mobile-filter-toggle] { background: #324757; color: #dce9ef; }
  body[data-karma-view="dialogs"] #root [data-karma-analysis-part="header"] { padding: 10px 13px !important; }
  body[data-karma-view="dialogs"] #root [data-karma-analysis-part="header"] h2 { font-size: 16px; }
  body[data-karma-view="dialogs"] #root [data-karma-analysis-part="player"] > div { padding: 9px 12px !important; }
  body[data-karma-view="dialogs"] #root [data-karma-analysis-part="body"] { padding: 14px 13px 25px !important; }
  body[data-karma-view="dialogs"] #root [data-karma-analysis-section="metrics"] .grid { grid-template-columns: repeat(2, minmax(0,1fr)); }

  /* Keep the metric matrix exact and scroll it inside its own surface. */
  body[data-karma-view="analytics"] #root [class~="max-w-[1600px]"] { padding: 15px 12px 30px !important; min-width: 0; }
  body[data-karma-view="analytics"] #root [class~="max-w-[1600px]"] > div:first-child { min-width: 0; }
  body[data-karma-view="analytics"] #root [class~="max-w-[1600px]"] > div:first-child > [class~="flex-wrap"] { width: 100%; }
  body[data-karma-view="analytics"] #root [class~="max-w-[1600px]"] > div:first-child > [class~="flex-wrap"] > button {
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
    min-height: 42px;
    justify-content: flex-start;
  }
  body[data-karma-view="analytics"] #root .karma-m3-table { max-width: 100%; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
  body[data-karma-view="analytics"] #root .karma-m3-table > .grid {
    width: max-content;
    min-width: 100%;
    grid-template-columns: 152px 76px 85px repeat(var(--karma-metric-count, 5), 116px) !important;
  }
  body[data-karma-view="analytics"] #root .karma-m3-table > .grid > :first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--karma-surface);
    box-shadow: 5px 0 10px rgb(18 37 47 / 8%);
  }
  body[data-karma-view="analytics"] #root .karma-m3-table > .grid:first-child > :first-child { background: var(--karma-header); z-index: 3; }
  body[data-karma-view="analytics"] #root .karma-m3-table > .grid:nth-child(2n + 3) > :first-child { background: var(--karma-surface-soft); }
  body[data-karma-view="analytics"] #root [class~="max-w-[1600px]"] .grid:has(> [class~="border-l-2"]) { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  body[data-karma-view="analytics"] #root [class~="fixed"][class~="right-0"] { max-width: 100vw; }

  /* Report parameters first, preview second; PDF remains scrollable. */
  body[data-karma-view="reports"] #root [class~="h-screen"][class~="overflow-hidden"] > [class~="flex-1"] {
    display: flex;
    flex-direction: column;
    overflow-y: auto !important;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }
  body[data-karma-view="reports"] #root [class~="w-72"] {
    width: 100% !important;
    flex: none !important;
    overflow: visible !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--kr-line);
  }
  body[data-karma-view="reports"] #root [class~="w-72"] > [class~="p-4"] { flex: none !important; }
  body[data-karma-view="reports"] #root [class~="h-screen"][class~="overflow-hidden"] [class~="min-w-0"][class~="flex-col"] {
    width: 100%;
    min-height: min(76dvh, 660px);
    flex: none !important;
    overflow: hidden;
  }
  body[data-karma-view="reports"] #root [class~="min-w-0"][class~="flex-col"] > [class~="border-b"] { gap: 7px; padding: 8px 12px !important; }
  body[data-karma-view="reports"] #root [class~="min-w-0"][class~="flex-col"] > [class~="border-b"] button { white-space: nowrap; font-size: 12px; }
  body[data-karma-view="reports"] #root iframe { width: 100%; height: 100%; }

  /* Upload, authentication and result remain within the safe viewport. */
  body[data-karma-view="transcription"] #root .karma-transcription-header { padding: 12px 15px; }
  body[data-karma-view="transcription"] #root .karma-transcription-header h1 { font-size: 18px; }
  body[data-karma-view="transcription"] #root .karma-transcription-header p { font-size: 12px; line-height: 1.45; }
  body[data-karma-view="transcription"] #root .karma-transcription-scroll { padding: 14px 12px 28px; -webkit-overflow-scrolling: touch; }
  body[data-karma-view="transcription"] #root .karma-transcription-card,
  body[data-karma-view="transcription"] #root .karma-transcription-result { padding: 17px 14px; }
  body[data-karma-view="transcription"] #root .karma-transcription-drop { min-height: 175px; padding: 17px 10px; }
  body[data-karma-view="transcription"] #root .karma-transcription-drop small { overflow-wrap: anywhere; }
  body[data-karma-view="transcription"] #root .karma-transcription-actions { align-items: stretch; flex-direction: column; }
  body[data-karma-view="transcription"] #root .karma-transcription-actions button { min-height: 44px; width: 100%; }
  body[data-karma-view="transcription"] #root .karma-transcription-login > div { flex-direction: column; }
  body[data-karma-view="transcription"] #root .karma-transcription-login input,
  body[data-karma-view="transcription"] #root .karma-transcription-login button { width: 100%; min-height: 44px; }
  body[data-karma-view="transcription"] #root .karma-transcription-selected audio,
  body[data-karma-view="transcription"] #root .karma-transcription-selected video { max-width: 100%; }

  /* Date pickers render in portals; prevent their desktop calendar from widening the page. */
  body[data-karma-view="dialogs"] [data-radix-popper-content-wrapper],
  body[data-karma-view="analytics"] [data-radix-popper-content-wrapper],
  body[data-karma-view="reports"] [data-radix-popper-content-wrapper] { max-width: calc(100vw - 16px) !important; }
  body[data-karma-view="dialogs"] .rdrCalendarWrapper,
  body[data-karma-view="analytics"] .rdrCalendarWrapper,
  body[data-karma-view="reports"] .rdrCalendarWrapper {
    max-width: calc(100vw - 20px);
    max-height: calc(100dvh - var(--karma-mobile-nav-size) - 30px);
    overflow-y: auto;
  }
  body[data-karma-view="dialogs"] .rdrMonthsHorizontal,
  body[data-karma-view="analytics"] .rdrMonthsHorizontal,
  body[data-karma-view="reports"] .rdrMonthsHorizontal { flex-direction: column; }
  body[data-karma-view="dialogs"] .rdrMonth:nth-child(n + 2) { display: none; }
  body[data-karma-view="dialogs"] .rdrMonth,
  body[data-karma-view="analytics"] .rdrMonth,
  body[data-karma-view="reports"] .rdrMonth { width: min(310px, calc(100vw - 34px)) !important; padding: 0 8px; }
}

@media (max-width: 390px) {
  body[data-karma-view="analytics"] #root [class~="max-w-[1600px]"] > div:first-child > [class~="flex-wrap"] > button { flex-basis: 100%; }
  body[data-karma-view="dialogs"] #root [data-karma-analysis-section="metrics"] .grid { grid-template-columns: minmax(0,1fr); }
}

@media (prefers-reduced-motion: reduce) {
  #root [data-karma-mobile-nav], body > [data-karma-drawer-scrim] { transition-duration: .01ms !important; }
}