/* Shared mobile-first usability overrides for user-facing pages.
   Target profile: Android Chrome/WebView on phones and tablets.
   Every rule is scoped by data-shai-page to avoid global collisions. */

@media (max-width: 1023px) {
  body[data-shai-page="history"] {
    overflow-y: auto !important;
    height: auto !important;
    min-height: 100vh;
  }

  body[data-shai-page="history"] .main {
    height: auto !important;
    overflow: visible !important;
    padding: 18px 14px 24px !important;
    gap: 14px !important;
  }
}

@media (max-width: 768px) {
  body[data-shai-page="home"] .navbar,
  body[data-shai-page="history"] .navbar,
  body[data-shai-page="settings"] .navbar {
    min-height: 58px !important;
    padding: 0 12px !important;
  }

  body[data-shai-page="home"] .navbar-right,
  body[data-shai-page="history"] .navbar-right,
  body[data-shai-page="settings"] .navbar-right {
    gap: 10px !important;
  }

  body[data-shai-page="home"] .nav-links,
  body[data-shai-page="history"] .nav-links,
  body[data-shai-page="settings"] .nav-links {
    gap: 10px !important;
  }

  body[data-shai-page="home"] .nav-link,
  body[data-shai-page="history"] .nav-link,
  body[data-shai-page="settings"] .nav-link,
  body[data-shai-page="interview-category"] .nav-link {
    font-size: 12px !important;
  }

  body[data-shai-page="home"] .nav-user-btn,
  body[data-shai-page="history"] .nav-user-btn,
  body[data-shai-page="interview-category"] .nav-user-btn {
    padding-right: 2px !important;
    gap: 6px !important;
  }

  body[data-shai-page="home"] .nav-avatar-wrap,
  body[data-shai-page="history"] .nav-avatar-wrap,
  body[data-shai-page="interview-category"] .nav-avatar-wrap {
    width: 34px !important;
    height: 34px !important;
  }

  body[data-shai-page="home"] .nav-username-text,
  body[data-shai-page="history"] .nav-username-text,
  body[data-shai-page="interview-category"] .nav-username-text {
    display: none !important;
  }

  body[data-shai-page="home"] .theme-toggle-btn,
  body[data-shai-page="history"] .theme-toggle-btn,
  body[data-shai-page="settings"] .theme-toggle-btn {
    display: none !important;
  }

  body[data-shai-page="home"] .main {
    padding: 14px 10px 18px !important;
    gap: 10px !important;
  }

  body[data-shai-page="home"] .hero-row {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  body[data-shai-page="home"] .welcome-title {
    font-size: clamp(1.26rem, 5.6vw, 1.5rem) !important;
    line-height: 1.15 !important;
  }

  body[data-shai-page="home"] .welcome-sub {
    font-size: 12px !important;
    margin-top: 4px !important;
  }

  body[data-shai-page="home"] .stats-row {
    gap: 6px !important;
  }

  body[data-shai-page="home"] .stats-card,
  body[data-shai-page="home"] .hero-model-slot,
  body[data-shai-page="home"] .card-actions,
  body[data-shai-page="home"] .resume-card {
    border-radius: 12px !important;
  }

  body[data-shai-page="home"] .stats-card {
    padding: 8px !important;
  }

  body[data-shai-page="home"] .card-actions {
    min-height: 252px !important;
    padding: 13px 18px !important;
    border-radius: 12px !important;
  }

  body[data-shai-page="home"] .action-section {
    gap: 6px !important;
    padding: 2px 0 !important;
  }

  body[data-shai-page="home"] .action-row-head {
    gap: 8px !important;
    align-items: center !important;
  }

  body[data-shai-page="home"] .action-icon-wrap {
    width: 34px !important;
    height: 34px !important;
    border-radius: 10px !important;
  }

  body[data-shai-page="home"] .action-heading {
    font-size: 12px !important;
    line-height: 1.2 !important;
  }

  body[data-shai-page="home"] .action-desc {
    font-size: 11px !important;
    line-height: 1.3 !important;
    padding-left: 0 !important;
    margin-top: 0 !important;
  }

  body[data-shai-page="home"] .action-divider {
    margin: 6px 0 !important;
  }

  body[data-shai-page="home"] .btn-dash {
    margin-left: 0 !important;
    margin-top: 2px !important;
    min-height: 32px !important;
    height: 32px !important;
    padding: 0 12px !important;
    font-size: 11px !important;
    border-radius: 10px !important;
  }

  body[data-shai-page="home"] .stat-value {
    font-size: clamp(1.2rem, 4.8vw, 1.44rem) !important;
    line-height: 1.05 !important;
  }

  body[data-shai-page="home"] .stat-label {
    font-size: 10px !important;
  }

  body[data-shai-page="history"] .stats-row {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  body[data-shai-page="history"] .chart-card,
  body[data-shai-page="history"] .evals-card {
    padding: 8px !important;
    border-radius: 12px !important;
  }

  body[data-shai-page="history"] .page-title {
    font-size: clamp(1.4rem, 5.6vw, 1.66rem) !important;
  }

  body[data-shai-page="history"] .page-sub {
    font-size: 11px !important;
  }

  body[data-shai-page="history"] .eval-item {
    padding: 8px !important;
    border-radius: 10px !important;
  }

  body[data-shai-page="settings"] .main {
    padding: 14px 10px 18px !important;
  }

  body[data-shai-page="settings"] .content {
    gap: 10px !important;
  }

  body[data-shai-page="settings"] .settings-card {
    padding: 8px !important;
    border-radius: 12px !important;
  }

  body[data-shai-page="score"] .score-navbar {
    padding: 8px 10px !important;
    margin-bottom: 10px !important;
  }

  body[data-shai-page="score"] .page {
    padding: 0 10px !important;
    gap: 6px !important;
  }

  body[data-shai-page="score"] .header-card,
  body[data-shai-page="score"] .result-card,
  body[data-shai-page="score"] .skills-card,
  body[data-shai-page="score"] .feedback-card {
    padding: 8px !important;
    border-radius: 12px !important;
  }

  body[data-shai-page="score"] .header-text h1 {
    font-size: clamp(0.88rem, 3.7vw, 1rem) !important;
  }

  body[data-shai-page="interview"] {
    overflow-y: auto !important;
    height: auto !important;
  }

  body[data-shai-page="interview"] .topbar {
    min-height: 56px;
    height: auto;
    padding: 6px 8px !important;
    align-items: flex-start;
  }

  body[data-shai-page="interview"] .topbar-right {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px !important;
  }

  body[data-shai-page="interview"] .interview-sub,
  body[data-shai-page="interview-tutorial"] .interview-sub {
    display: none !important;
  }

  body[data-shai-page="interview"] .main {
    height: auto !important;
    min-height: calc(100vh - 56px);
    padding: 6px !important;
    gap: 8px !important;
    flex-direction: column !important;
  }

  body[data-shai-page="interview"] .left-col,
  body[data-shai-page="interview"] .right-col {
    width: 100% !important;
    flex: 1 1 auto;
  }

  body[data-shai-page="interview"] .camera-card {
    height: 136px !important;
  }

  body[data-shai-page="interview"] .panel-card,
  body[data-shai-page="interview-tutorial"] .panel-card {
    min-height: 186px !important;
    border-radius: 12px !important;
  }

  body[data-shai-page="interview"] .ai-static-img-box,
  body[data-shai-page="interview-tutorial"] .ai-static-img-box {
    max-height: 145px !important;
    min-height: 96px !important;
  }

  body[data-shai-page="interview"] .ai-subtitle,
  body[data-shai-page="interview-tutorial"] .ai-subtitle {
    left: 8px !important;
    right: 8px !important;
    bottom: 8px !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    max-height: 64px !important;
    overflow-y: auto !important;
  }

  body[data-shai-page="interview"] .question-card,
  body[data-shai-page="interview"] .response-card,
  body[data-shai-page="interview-tutorial"] .question-card,
  body[data-shai-page="interview-tutorial"] .response-card {
    border-radius: 12px !important;
    padding: 8px !important;
  }

  body[data-shai-page="interview"] .question-text,
  body[data-shai-page="interview-tutorial"] .question-text {
    font-size: 11px !important;
    line-height: 1.4 !important;
  }

  body[data-shai-page="interview"] .response-textarea,
  body[data-shai-page="interview-tutorial"] .response-textarea {
    font-size: 11px !important;
    line-height: 1.45 !important;
    padding: 8px !important;
  }

  body[data-shai-page="interview"] .btn-next,
  body[data-shai-page="interview"] .btn-skip,
  body[data-shai-page="interview"] .btn-retry,
  body[data-shai-page="interview"] .exit-btn {
    min-height: 44px;
  }

  body[data-shai-page="interview"] .topbar-left .interview-title,
  body[data-shai-page="interview-tutorial"] .topbar-left .interview-title {
    font-size: 11px !important;
  }

  body[data-shai-page="interview"] .mode-btn,
  body[data-shai-page="interview"] .personality-btn,
  body[data-shai-page="interview"] .badge-practice,
  body[data-shai-page="interview"] .badge-official,
  body[data-shai-page="interview"] .timer-badge,
  body[data-shai-page="interview"] .exit-btn,
  body[data-shai-page="interview-tutorial"] .personality-btn,
  body[data-shai-page="interview-tutorial"] .badge-practice,
  body[data-shai-page="interview-tutorial"] .badge-official,
  body[data-shai-page="interview-tutorial"] .timer-badge,
  body[data-shai-page="interview-tutorial"] .exit-btn {
    font-size: 9px !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  body[data-shai-page="interview-tutorial"] {
    overflow-y: auto !important;
    height: auto !important;
  }

  body[data-shai-page="interview-tutorial"] .topbar {
    min-height: 56px;
    height: auto;
    padding: 6px 8px !important;
    align-items: flex-start;
  }

  body[data-shai-page="interview-tutorial"] .topbar-right {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px !important;
  }

  body[data-shai-page="interview-tutorial"] .main {
    height: auto !important;
    min-height: calc(100vh - 56px);
    padding: 6px !important;
    gap: 8px !important;
    flex-direction: column !important;
  }

  body[data-shai-page="interview-tutorial"] .left-col,
  body[data-shai-page="interview-tutorial"] .right-col {
    width: 100% !important;
    flex: 1 1 auto;
  }

  body[data-shai-page="account-settings"] .navbar {
    min-height: 58px !important;
    padding: 0 12px !important;
  }

  body[data-shai-page="account-settings"] .navbar-right {
    gap: 8px !important;
  }

  body[data-shai-page="account-settings"] .main {
    padding: 10px !important;
  }

  body[data-shai-page="account-settings"] .title {
    font-size: clamp(1.7rem, 8vw, 2.2rem) !important;
  }

  body[data-shai-page="account-settings"] .field-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  body[data-shai-page="resume-onboarding"],
  body[data-shai-page="resume-view"] {
    padding: 10px !important;
    padding-bottom: 18px !important;
  }

  body[data-shai-page="resume-onboarding"] .form-card,
  body[data-shai-page="resume-view"] .form-card {
    padding: 12px 10px !important;
    border-radius: 12px !important;
  }

  body[data-shai-page="resume-onboarding"] .stepper {
    gap: 8px;
  }

  body[data-shai-page="resume-onboarding"] .step-label {
    font-size: 10px !important;
  }

  body[data-shai-page="login"],
  body[data-shai-page="signup"] {
    overflow-y: auto !important;
    height: auto !important;
    justify-content: flex-start !important;
    padding: 16px 12px !important;
  }

  body[data-shai-page="login"] .card,
  body[data-shai-page="signup"] .card {
    width: min(100%, 436px) !important;
    padding: 18px 12px 16px !important;
    border-radius: 14px !important;
  }

  body[data-shai-page="login"] .btn-primary,
  body[data-shai-page="signup"] .btn-primary,
  body[data-shai-page="login"] .form-input,
  body[data-shai-page="signup"] .form-input {
    min-height: 44px;
    height: 44px;
  }

  body[data-shai-page="interview-category"] #shai-category-intro-bubble {
    top: 66px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    max-width: calc(100vw - 24px) !important;
  }

  body[data-shai-page="interview-category"] .shai-ai-intro-bubble-text {
    max-height: 88px !important;
    font-size: 11px !important;
    line-height: 1.3 !important;
  }

  body[data-shai-page="interview-category"] .shai-ai-intro-bubble-panel {
    padding: 7px 8px !important;
  }

  body[data-shai-page="interview-category"] .page-title {
    font-size: clamp(1.34rem, 5.3vw, 1.56rem) !important;
  }

  body[data-shai-page="interview-category"] .page-sub {
    font-size: 11px !important;
  }

  body[data-shai-page="interview-category"] .card-header {
    min-height: 116px !important;
    padding: 10px 12px !important;
  }

  body[data-shai-page="interview-category"] .card-title {
    font-size: clamp(1rem, 4.3vw, 1.18rem) !important;
  }

  body[data-shai-page="interview-category"] .card-subtitle {
    font-size: 10px !important;
    line-height: 1.3 !important;
  }

  body[data-shai-page="interview-category"] .card-body {
    padding: 8px 10px !important;
  }

  body[data-shai-page="interview-category"] .sample-list li {
    font-size: 10px !important;
    line-height: 1.3 !important;
  }

  body[data-shai-page="interview-category"] .btn-start {
    height: 36px !important;
    min-height: 36px !important;
    font-size: 12px !important;
    margin-top: 8px !important;
  }

  /* Docked floating AI: pin bottom-right on narrow viewports (frame size → shai-mobile-shell.css) */
  body[data-shai-page="history"] #shai-floating-ai-root.shai-ai-overlay--dock-top-right:not(.shai-ai-overlay--anchored),
  body[data-shai-page="interview-category"] #shai-floating-ai-root.shai-ai-overlay--dock-top-right:not(.shai-ai-overlay--anchored),
  body.shai-home-mobile-floating #shai-floating-ai-root.shai-ai-overlay--dock-top-right:not(.shai-ai-overlay--anchored) {
    top: auto !important;
    bottom: 12px !important;
    right: 10px !important;
    left: auto !important;
    align-items: flex-end !important;
  }
}

/* Explicit compact profile for 720-wide Android class and below */
@media (max-width: 720px) {
  body[data-shai-page="home"] .main,
  body[data-shai-page="history"] .main,
  body[data-shai-page="settings"] .main,
  body[data-shai-page="interview-category"] .main {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  body[data-shai-page="home"] .stats-row {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  body[data-shai-page="home"] .stats-card {
    padding: 8px !important;
  }

  body[data-shai-page="history"] .stat-card,
  body[data-shai-page="history"] .eval-item {
    padding: 7px !important;
  }

  body[data-shai-page="interview"] .question-card,
  body[data-shai-page="interview"] .response-card,
  body[data-shai-page="interview-tutorial"] .question-card,
  body[data-shai-page="interview-tutorial"] .response-card {
    padding: 7px !important;
  }

  body[data-shai-page="interview"] .controls-row .ctrl-btn,
  body[data-shai-page="interview-tutorial"] .controls-row .ctrl-btn {
    width: 38px !important;
    height: 38px !important;
  }
}

@media (max-width: 412px) {
  /* Only hide the inline tab row, not items inside the mobile dropdown */
  body[data-shai-page="home"] .nav-links > a.nav-link:not(.active),
  body[data-shai-page="history"] .nav-links > a.nav-link:not(.active),
  body[data-shai-page="interview-category"] .nav-links > a.nav-link:not(.active) {
    display: none !important;
  }

  body[data-shai-page="home"] .nav-links,
  body[data-shai-page="history"] .nav-links,
  body[data-shai-page="interview-category"] .nav-links {
    gap: 0 !important;
  }

  body[data-shai-page="interview"] .personality-toggle,
  body[data-shai-page="interview-tutorial"] .personality-toggle {
    display: none !important;
  }

  body[data-shai-page="interview"] .topbar-right,
  body[data-shai-page="interview-tutorial"] .topbar-right {
    max-width: 58%;
  }
}

/* Android compact phones (320-360dp class) */
@media (max-width: 360px) {
  body[data-shai-page="home"] .nav-link,
  body[data-shai-page="history"] .nav-link,
  body[data-shai-page="settings"] .nav-link {
    font-size: 11px !important;
  }

  body[data-shai-page="home"] .main,
  body[data-shai-page="history"] .main,
  body[data-shai-page="settings"] .main {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  body[data-shai-page="interview"] .controls-row,
  body[data-shai-page="interview-tutorial"] .controls-row {
    gap: 8px !important;
  }

  body[data-shai-page="interview"] .btn-next,
  body[data-shai-page="interview-tutorial"] .btn-next {
    width: 100%;
    margin-left: 0 !important;
    justify-content: center;
  }

  body[data-shai-page="interview"] .personality-btn:not(.active),
  body[data-shai-page="interview-tutorial"] .personality-btn:not(.active),
  body[data-shai-page="interview"] .mode-btn:not(.active) {
    display: none !important;
  }

  body[data-shai-page="interview"] .topbar,
  body[data-shai-page="interview-tutorial"] .topbar {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }

  body[data-shai-page="login"] .card,
  body[data-shai-page="signup"] .card {
    padding: 18px 12px 16px !important;
  }
}

/* Android tablets (7"-13" classes, portrait+landscape) */
@media (min-width: 769px) and (max-width: 1280px) {
  body[data-shai-page="home"] .main,
  body[data-shai-page="history"] .main,
  body[data-shai-page="settings"] .main {
    padding: 22px 20px 26px !important;
  }

  body[data-shai-page="history"] .stats-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body[data-shai-page="home"] .hero-row {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  body[data-shai-page="home"] .welcome-title,
  body[data-shai-page="history"] .page-title,
  body[data-shai-page="interview-category"] .page-title {
    font-size: clamp(1.72rem, 3.2vw, 2rem) !important;
  }

  body[data-shai-page="home"] .welcome-sub,
  body[data-shai-page="history"] .page-sub,
  body[data-shai-page="interview-category"] .page-sub {
    font-size: 13px !important;
  }

  body[data-shai-page="home"] .stat-value {
    font-size: clamp(1.8rem, 3.3vw, 2.2rem) !important;
  }

  body[data-shai-page="interview"] .main,
  body[data-shai-page="interview-tutorial"] .main {
    padding: 12px !important;
    gap: 12px !important;
  }

  body[data-shai-page="interview"] .question-text,
  body[data-shai-page="interview-tutorial"] .question-text,
  body[data-shai-page="interview"] .response-textarea,
  body[data-shai-page="interview-tutorial"] .response-textarea {
    font-size: 13px !important;
  }

  body[data-shai-page="interview-category"] .card-title {
    font-size: 1.22rem !important;
  }

  body[data-shai-page="interview-category"] .card-subtitle,
  body[data-shai-page="interview-category"] .sample-list li {
    font-size: 12px !important;
  }

  body[data-shai-page="interview"] .left-col,
  body[data-shai-page="interview-tutorial"] .left-col {
    width: 48% !important;
  }

  body[data-shai-page="interview"] .right-col,
  body[data-shai-page="interview-tutorial"] .right-col {
    width: 52% !important;
  }
}