/* Shared device support. Keep document scrolling available; constrain the
   component that needs scrolling instead of hiding overflowing page content. */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 90px; }
*, *::before, *::after { box-sizing: border-box; }
img, video { max-width: 100%; }
input, select, textarea { min-width: 0; max-width: 100%; }
textarea { resize: vertical; }
:where(h1, h2, h3, h4, p, a, label, li) { overflow-wrap: anywhere; }
:where(button, a, input, select, textarea):focus-visible {
  outline: 3px solid #a78bfa; outline-offset: 3px;
}
:where(.main-content, .container, .db-main-grid, .db-grid, .rp-selects,
  .rr-container, .rh-container, .db-container) { min-width: 0; }
:where(.db-main-grid, .db-grid, .rp-selects) > * { min-width: 0; }
pre { max-width: 100%; overflow-x: auto; }
.responsive-table { width: 100%; max-width: 100%; overflow-x: auto;
  overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.responsive-table table { width: 100%; }
.responsive-table:focus-visible { outline: 2px solid #a78bfa; }
.rp-modal { max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto; }
.modal-content, .feedback-modal-content, #shareModal > div {
  max-width: calc(100vw - 32px); max-height: calc(100dvh - 32px); overflow-y: auto;
}
.chat-layout { height: calc(100dvh - 70px); }
.db-plan-item { gap: 16px; }
.db-plan-item > div { min-width: 0; }
.db-btn { flex-shrink: 0; text-align: center; }
.db-section canvas { max-width: 100%; }
.blog-grid { grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); }
.services-grid { grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); }
.company-detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 3rem; }
.company-detail-grid > * { min-width: 0; }
@media (max-width: 900px) {
  .company-detail-grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
}
.admin-dashboard-container :is(.charts-section, .details-grid, .chart-card, .chart-body) { min-width: 0; }
.admin-dashboard-container canvas { max-width: 100%; }
.admin-dashboard-container .header-actions { flex-wrap: wrap; }

/* Use the drawer through tablet landscape and iPad split-screen widths. */
@media (max-width: 1100px) {
  .navbar { z-index: 10000; }
  .tv-home .hamburger-menu { display: flex !important; align-items: center; justify-content: center;
    width: 44px; height: 44px; padding: 0; border: 0; background: transparent; color: white; }
  .tv-home .mobile-nav-overlay { display: none !important; }
  .tv-home .mobile-nav-overlay.active { display: flex !important; position: fixed;
    inset: 0; width: 100%; height: 100vh; height: 100dvh; overflow-y: auto;
    padding: 90px 24px 32px; flex-direction: column; align-items: stretch;
    gap: 20px; background: #080f1e; opacity: 1; visibility: visible; z-index: 1000; }
  .tv-home .mobile-nav-overlay a { min-height: 44px; display: flex; align-items: center; }
  .navbar .desktop-only { display: none !important; }
  .navbar .nav-container { gap: 12px; padding-inline: 16px; }
  /* The button's own z-index cannot escape its parent's stacking context. */
  .navbar .nav-right { position: relative; z-index: 10003; }
  .navbar #nav-toggle { display: flex !important; visibility: visible !important;
    opacity: 1 !important; position: relative !important; z-index: 10003 !important;
    width: 44px; height: 44px; min-width: 44px; border: 0; background: transparent;
    align-items: center; justify-content: center; cursor: pointer; }
  .navbar #nav-menu { display: none !important; position: fixed !important;
    inset: 0 0 0 auto !important; width: min(360px, 100%) !important;
    max-width: 100% !important; height: 100vh !important; height: 100dvh !important;
    margin: 0 !important; padding: 80px 24px max(24px, env(safe-area-inset-bottom)) !important;
    background: #080f1e !important; flex-direction: column !important;
    align-items: stretch !important; justify-content: flex-start !important;
    gap: 8px !important; overflow-y: auto !important; z-index: 10002 !important;
    transform: none !important; list-style: none; }
  .navbar #nav-menu.active { display: flex !important; visibility: visible !important;
    opacity: 1 !important; pointer-events: auto !important; }
  .navbar #nav-menu .nav-link { min-height: 44px; white-space: normal; }
  .nav-menu-backdrop.active { display: block !important; position: fixed !important;
    inset: 0 !important; opacity: 1 !important; visibility: visible !important;
    background: rgba(0, 0, 0, .55); z-index: 9998 !important; }
}
@media (min-width: 1101px) {
  .tv-home .hamburger-menu, .tv-home .mobile-nav-overlay { display: none !important; }
  .navbar #nav-toggle, .navbar #nav-menu.mobile-only-menu { display: none !important; }
}

@media (max-width: 767px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea {
    font-size: 16px !important; /* Prevent focus zoom on iOS. */
  }
  :where(button, .btn, .db-btn, .rr-btn, .mm-start-btn, .btn-end) { min-height: 44px; }
  .mm-landing { padding-inline: 16px !important; }
  .mm-main-title { font-size: clamp(2rem, 8vw, 3rem) !important; }
  .rp-modal { padding: 20px; }
  .db-main-grid { grid-template-columns: minmax(0, 1fr); }
  .db-plan-item, .rh-header { flex-wrap: wrap; gap: 16px; }
  .db-section, .rr-section { padding: 18px; }
  .db-section > div[style*="display: flex"] { flex-wrap: wrap; gap: 12px; }
  .rr-container > div[style*="grid-template-columns"],
  .credits-visual-section > div[style*="grid-template-columns"],
  .tv-home .tech-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .rh-table { min-width: 560px; }
  .timeline-item { flex-direction: column; align-items: flex-start; gap: 8px; }
  .timeline-item strong { min-width: 0; }
  .analytics-card > div[style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; }
  .back-to-top { bottom: max(16px, env(safe-area-inset-bottom)); }
}
@media (pointer: coarse) {
  :where(button, .btn, .nav-link, .dropdown-item) { touch-action: manipulation; }
  :where(button, .btn, .nav-link, .dropdown-item) { min-height: 44px; }
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea {
    font-size: 16px !important;
  }
}

/* Voice rooms: preserve the interview logic and make every panel reachable. */
.tv-interview-room .waveform-container { width: 100%; max-width: 600px; }
.tv-interview-room .waveform-container canvas { width: 100%; max-width: 100%; }
.tv-interview-room .header-left, .tv-interview-room .header-right,
.tv-interview-room .interview-meta, .tv-interview-room .content-panel { min-width: 0; }
.tv-interview-room .tabs { overflow-x: auto; flex-shrink: 0; }
.tv-interview-room .tab { flex-shrink: 0; min-height: 44px; }
@media (max-width: 1100px) {
  body.tv-interview-room { height: auto; min-height: 100dvh; overflow-y: auto; }
  .tv-interview-room .interview-room { min-height: 100dvh; height: auto; }
  .tv-interview-room .header { height: auto; min-height: 70px; flex-wrap: wrap;
    gap: 8px; padding: 12px 16px; }
  .tv-interview-room .header-left { flex: 1 1 180px; }
  .tv-interview-room .header-right { flex: 1 1 260px; gap: 8px; flex-wrap: wrap; }
  .tv-interview-room .interview-title { font-size: 1rem; }
  .tv-interview-room .header-right button { min-width: 44px; min-height: 44px; }
  .tv-interview-room .report-problem-btn { margin-left: 0; }
  .tv-interview-room .main-container { flex-direction: column; height: auto; overflow: visible; }
  .tv-interview-room .interviewer-panel { width: 100%; height: auto; min-height: 350px; flex: auto; }
  .tv-interview-room .connection-status { position: static; transform: none; align-self: center; margin-top: 16px; }
  .tv-interview-room .metrics-panel { position: static; transform: none; flex-wrap: wrap; justify-content: center; }
  .tv-interview-room .content-panel { width: 100%; height: max(400px, 55dvh); flex: auto; }
  .tv-interview-room .controls-bar { flex-wrap: wrap; padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  .tv-interview-room .connecting-content { max-width: calc(100vw - 32px); }
}

.tv-benchmark-room .voice-room { grid-template-rows: auto 3px minmax(0, 1fr) auto;
  height: 100vh; height: 100dvh; min-width: 0; }
.tv-benchmark-room .vr-header { min-height: 56px; flex-wrap: wrap; gap: 8px; padding: 8px 16px; }
.tv-benchmark-room .vr-meta { flex-wrap: wrap; justify-content: flex-end; gap: 8px; min-width: 0; }
.tv-benchmark-room .vr-main { min-width: 0; min-height: 0; overflow-y: auto; }
.tv-benchmark-room .transcript-box { max-width: 100%; flex-shrink: 0; }
.tv-benchmark-room .vr-controls { flex-wrap: wrap; gap: 12px;
  padding-bottom: max(16px, env(safe-area-inset-bottom)); }
@media (max-width: 600px), (max-height: 600px) {
  .tv-benchmark-room .vr-main { margin-top: 0; padding: 16px; gap: 16px; justify-content: flex-start; }
  .tv-benchmark-room .shortcut-hint { display: none; }
  .tv-benchmark-room .vr-logo { font-size: 1rem; }
  .tv-benchmark-room .avatar-area { flex-shrink: 0; }
}
body.tv-tech-check { height: auto; min-height: 100vh; min-height: 100dvh;
  overflow-y: auto; padding-block: max(24px, env(safe-area-inset-top)); }
body.tv-ai-interview { overflow-y: auto; }
.tv-ai-interview .setup-screen { min-height: 100dvh; }
.tv-ai-interview .interview-screen { height: 100vh; height: 100dvh; }
.tv-ai-interview .top-bar { flex-wrap: wrap; gap: 8px; height: auto; min-height: 56px; }
@media (max-width: 1100px) {
  .tv-interview-room.coding-mode #mobileWarningOverlay { display: none !important; }
  .tv-interview-room.coding-mode .content-panel { height: auto; min-height: 70dvh; }
  .tv-interview-room.coding-mode .code-input-container { min-width: 0; }
  .tv-interview-room.coding-mode .code-editor-header { flex-wrap: wrap; gap: 8px; }
  .tv-ai-interview .interview-main.coding-mode { grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(200px, 40dvh) minmax(300px, 50dvh); overflow-y: auto; }
  .tv-ai-interview .interview-main.coding-mode .code-panel { display: flex !important; min-width: 0; }
}
@media (max-width: 600px) {
  .tv-ai-interview .form-row { grid-template-columns: minmax(0, 1fr); }
  .tv-ai-interview .setup-screen { padding: 16px; }
}

/* The design workspace remains usable on touch devices: palette, canvas and
   conversation stack instead of forcing a desktop-sized document. */
body.tv-design-room { min-width: 0; }
@media (max-width: 1100px) {
  body.tv-design-room { overflow-y: auto; }
  .tv-design-room .system-design-container { min-width: 0; height: auto; min-height: 100dvh; }
  .tv-design-room .sd-header { height: auto; min-height: 60px; padding: 12px; flex-wrap: wrap; gap: 12px; }
  .tv-design-room .header-right { flex-wrap: wrap; gap: 8px; }
  .tv-design-room .system-design-container > .main-content { display: flex; flex-direction: column; overflow: visible; }
  .tv-design-room .component-palette,
  .tv-design-room .component-palette:not(.collapsed) { position: relative; flex: none; width: 100%; height: 240px; max-height: 240px; overflow-y: auto; }
  .tv-design-room .component-palette > * { flex-shrink: 0; }
  .tv-design-room .component-palette.collapsed { display: none; }
  .tv-design-room .component-grid { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
  .tv-design-room .component-item { min-height: 44px; cursor: pointer; }
  .tv-design-room .palette-toggle { display: none; }
  .tv-design-room .canvas-container { flex: none; width: 100%; min-width: 0; height: 60dvh; min-height: 350px; }
  .tv-design-room .chat-panel { display: flex; width: 100%; height: 400px; flex: none; }
  .tv-design-room .canvas-status { flex-wrap: wrap; height: auto; gap: 8px; }
  .tv-design-room .canvas-tools { max-width: calc(100% - 16px); flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after { animation-duration: .01ms !important;
    animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ====== GLOBAL RESPONSIVE FAILSAFES ====== */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
  width: 100%;
}

img, video, canvas, iframe {
  max-width: 100%;
  height: auto;
}

* {
  box-sizing: border-box;
}

/* Ensure padding doesn't break max-widths */
.mm-landing, .hero-section, .pricing-container, .main-container {
  box-sizing: border-box;
  max-width: 100%;
}