/* Mobile & Tablet overrides (<=900px) */
@media (max-width: 900px) {
  /* Prevent horizontal clipping on very narrow phones */
  html, body, .app { overflow-x: hidden; }
  
  /* Topbar: title left with flex, actions compact; safe-area padding */
  .topbar-inner {
    justify-content: space-between;
    padding: calc(0.5rem + env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 0.5rem max(12px, env(safe-area-inset-left));
  }
  .topbar-title {
    position: static; 
    transform: none; 
    font-size: 1.2rem; 
    pointer-events: auto;
    flex: 1 1 auto;
    min-width: 0;           /* allow ellipsis to work */
    max-width: 42vw;        /* leave room for actions/login */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .topbar-actions { gap: 0.4rem; flex: 0 0 auto; }
  .topbar-actions .btn { padding: 0.5rem; min-width: 40px; min-height: 36px; }
  .topbar-actions .btn .btn-text { display: none !important; }
  .btn .icon { width: 18px; height: 18px; }
  .btn { padding-left: 0.9rem; padding-right: 0.9rem; }
  .btn-primary { border-radius: 10px; }

  /* Show truncated email/name in the login pill on mobile */
  .topbar-actions #loginOpenButton {
    padding: 0.38rem 0.6rem;
    min-height: 36px;
    flex: 0 1 min(58vw, 260px); /* grow but cap width */
    min-width: 0;               /* enable ellipsis */
    max-width: min(58vw, 260px);
    font-size: 0.9rem;
  }
  .topbar-actions #loginOpenButton .btn-text {
    display: inline !important;   /* override icon-only rule */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100% !important;   /* override hover-hide max-width */
    opacity: 1 !important;        /* ensure visible on mobile */
    margin-left: .4rem !important;/* spacing from icon */
  }
  /* Icon-only look when logged in (label is still present for title/tooltip) */
  .topbar-actions #loginOpenButton.logged-in .btn-text { display: none !important; }
  .topbar-actions #loginOpenButton.logged-in { background: var(--accent); color: #fff; }
  /* Keep other buttons icon-only to save space */
  .topbar-actions #btnAbout .btn-text,
  .topbar-actions #btnOpenMenu .btn-text { display: none !important; }

  /* App spacing and scroll */
  .app { 
    padding: calc(3.0rem + env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 1.25rem max(12px, env(safe-area-inset-left)); 
    min-height: 100vh; 
  }
  .card, .start-grid, .session-display { max-width: 100%; }
  .card { overflow: visible; } /* don't clip button edges/glows on phones */
  .start-col { min-width: 0; }
  .card h2, .card p, .btn .btn-text { overflow-wrap: anywhere; }
  .btn { max-width: 100%; }
  .app > .card:not(.hidden) { margin-top: 0.5rem; margin-bottom: 1rem; }

  /* Start layout */
  .start-grid { grid-template-columns: 1fr; gap: 1rem; }
  .card { padding: 1.25rem; }
  .hero { text-align: left; }
  .site-footer .footer-inner { padding: .75rem; }

  /* Wait screen stacks */
  .wait-grid { grid-template-columns: 1fr !important; }
  .waiting-radar { max-width: 360px; margin: .5rem auto 0; }
  
  /* Transfer header: wrap and stack actions to avoid right-edge clipping */
  .transfer-section > div:first-child { 
    flex-wrap: wrap !important; 
    gap: 0.5rem !important; 
    align-items: stretch !important;
  }
  .transfer-section > div:first-child > h3 { 
    flex: 1 1 100%; 
    margin: 0; 
  }
  .transfer-section > div:first-child > div { 
    display: flex; 
    flex-wrap: wrap; 
    gap: 0.5rem; 
    width: 100%; 
  }
  .transfer-section > div:first-child > div > .btn { 
    flex: 1 1 100%; 
    min-width: 0; 
    max-width: 100%; 
  }
  
  /* Dropzone full width */
  .file-input-display { width: 100%; padding: 2rem 1rem; min-height: 140px; }
  .file-name, .file-size { overflow-wrap: anywhere; }
  .file-size { font-size: 0.9rem; }

  /* Action row under dropzone: wrap and stack */
  .transfer-section > div:nth-of-type(3) {
    display: flex; /* keep flex but allow wrap */
    flex-wrap: wrap;
    gap: 0.5rem !important;
    align-items: stretch;
  }
  .transfer-section > div:nth-of-type(3) > .btn {
    flex: 1 1 100%;
    min-width: 0;
    max-width: 100%;
    height: 44px;
  }
  .start-grid .start-col > .btn,
  .start-grid .join-section .btn,
  .start-grid .join-section .form-control {
    width: 100%;
    max-width: 100%;
  }
  .btn { white-space: normal; line-height: 1.25; }

  /* Join stacked */
  .start-grid .join-section { display: grid; grid-template-columns: 1fr; gap: 0.75rem; align-items: stretch; }
  .start-grid .join-section .btn { width: 100%; height: 44px; }
  .start-grid .join-section .form-control { height: 44px; }

  /* Stepper single column */
  .start-steps { grid-template-columns: 1fr; }

  /* Prevent horizontal scroll */
  html, body { overflow-x: hidden; }
}