/* Purpose-ID: HOTEL-CSS-007 | Purpose: Preserve one persistent hotel sidebar across viewports while adapting page content and topbar density. */
/* 01. Compact layouts */
@media (max-width: 1279px) {
  .metric-grid { grid-template-columns: repeat(2,1fr); }
  .ticket-grid { grid-template-columns: repeat(2,1fr); }
  .agent-console { grid-template-columns: 1fr; }
  .conversation-panel { min-height: 440px; }
  .transcript { max-height: 360px; }
}

/* 02. Compact shell: the same persistent sidebar and collapse button stay authoritative. */
@media (max-width: 1279px) {
  .topbar { padding-inline: 24px; }
  .topbar time, .live-pill { display: none; }
}

/* 03. Handset: keep the icon rail visible; expansion uses the same sidebar button, never a second drawer control. */
@media (max-width: 899px) {
  .app-shell { display: grid; grid-template-columns: var(--layout-sidebar-rail-width) minmax(0,1fr); }
  .sidebar {
    max-width: min(320px, calc(100vw - 24px));
    box-shadow: 12px 0 36px rgba(4,19,13,.18);
  }
  .topbar {
    min-height: 64px;
    padding: max(8px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 8px max(12px, env(safe-area-inset-left));
    gap: 10px;
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }
  .topbar-start { gap: 10px; flex: 0 0 auto; }
  .topbar-title span { display: none; }
  .topbar-title strong { max-width: none; overflow: visible; text-overflow: clip; font-size: .88rem; }
  .topbar-actions { gap: 7px; min-width: max-content; flex: 0 0 max-content; }
  .phone-launch { width:auto; height:44px; padding:0 var(--space-3); justify-content:center; }
  .phone-launch span { display:grid; }
  .copilot-launch { width:auto; padding:0 11px; justify-content:center; }
  .copilot-launch-label { display:inline; }
  .topbar time, .live-pill { display: none; }
  .topbar-theme { width: 44px; height: 44px; }
  .app-body {
    --layout-topbar-height: 64px;
    --shell-content-pad-top: 22px;
    --shell-content-pad-right: 16px;
    --shell-content-pad-bottom: max(40px, env(safe-area-inset-bottom));
    --shell-content-pad-left: 16px;
  }

  .hero-panel { grid-template-columns: 1fr; }
  .hero-agent { max-width: 440px; }
  .content-grid, .hotel-qr-grid, .import-grid { grid-template-columns: 1fr; }
  .page-intro { align-items: start; flex-direction: column; }
  .auth-wrap, .guest-access-wrap { grid-template-columns: 1fr; }
  .auth-story h1, .guest-access-copy h1 { font-size: clamp(2.5rem,11vw,5rem); }
  .auth-story > p { margin-bottom: 24px; }
  .public-main { padding-top: 15px; }
}

@media (max-width: 620px) {
  .app-body {
    --shell-content-pad-right: 12px;
    --shell-content-pad-left: 12px;
  }
  .hero-panel { min-height: 380px; padding: 28px 23px; border-radius: 23px; }
  .hero-panel h1 { font-size: 2.35rem; }
  .hero-agent { grid-template-columns: 58px 1fr 38px; }
  .mini-orb { width: 58px; height: 58px; }
  .metric-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .metric-card { display: block; min-height: 145px; padding: 17px; }
  .metric-card .metric-icon { width: 38px; height: 38px; margin-bottom: 13px; }
  .metric-card strong { font-size: 1.55rem; }
  .panel-head { padding: 20px; }
  .table-head { align-items: start; flex-direction: column; }
  .table-tools { width: 100%; flex-wrap: wrap; }
  .search-field { flex: 1 1 100%; min-width: 0; }
  .upload-card { padding: 20px; }
  .ticket-grid { grid-template-columns: 1fr; }
  .public-header, .public-main, .public-footer { width: min(100% - 24px, 1200px); }
  .public-header .brand-mark { width: 39px; height: 39px; }
  .auth-card, .guest-access-card { padding: 23px; border-radius: 22px; }
  .auth-proof { display: none; }
  .agent-console { min-height: 0; border-radius: 22px; }
  .agent-stage, .agent-console-public .agent-stage { min-height: 560px; }
  .avatar-scene { width: 100%; }
  .voice-avatar { width: 155px; height: 155px; }
  .call-controls { gap: 7px; }
  .call-button { width: 46px; padding: 0; }
  .call-button span { display: none; }
  .call-button.start { width: auto; min-width: 140px; padding: 0 14px; }
  .call-button.start span { display: inline; }
  .guest-preview { right: 13px; width: 100px; }
  .preview-label { right: 13px; width: 100px; }
  .conversation-panel { min-height: 420px; }
  .digital-ticket { border-radius: 24px; }
  .digital-ticket > header, .digital-ticket-main, .ticket-info-grid { padding: 22px; }
  .digital-ticket-main { grid-template-columns: 1fr auto; gap: 12px; }
  .room-hero > strong { font-size: 4.4rem; }
  .qr-shell img { width: 95px; height: 95px; }
  .qr-shell small { display: none; }
  .ticket-info-grid { grid-template-columns: 1fr; gap: 15px; }
  .ticket-info-grid > div { padding: 0 0 15px; border-left: 0; border-bottom: 1px solid var(--color-border); }
  .ticket-info-grid > div:last-child { border-bottom: 0; }
  .ticket-cta { grid-template-columns: 1fr; padding: 0 22px 22px; }
  .digital-ticket > footer { padding: 14px 22px; flex-direction: column; }
}

@media (max-width: 390px) {
  .topbar { padding-inline: 9px; }
  .topbar-theme { width: 44px; height: 44px; }
  .topbar-title strong { font-size: .84rem; }
  .metric-grid { grid-template-columns: 1fr; }
}

@media print {
  @page { size: A4 portrait; margin: 0; }
  html, body { width: 210mm; height: 297mm; margin: 0 !important; padding: 0 !important; }
  .public-header, .public-footer, .privacy-links, .ticket-cta, .qr-print-button, .back-to-top { display: none !important; }
  .public-body, .public-main { display: block; color: #10231d !important; background: #fff !important; }
  .public-main { box-sizing: border-box; width: 210mm !important; height: 297mm !important; margin: 0 !important; padding: 0 !important; }
  .digital-ticket { width: 100%; box-shadow: none; border: 1px solid #bbb; break-inside: avoid; }
  .qr-print-sheet {
    box-sizing: border-box;
    width: 210mm !important;
    height: 297mm !important;
    min-height: 0 !important;
    max-height: 297mm;
    margin: 0 !important;
    padding: 18mm 22mm 14mm !important;
    overflow: hidden;
    color: #10231d !important;
    background: #fff !important;
    border: 0 !important;
    box-shadow: none !important;
    break-inside: avoid;
    page-break-inside: avoid;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
  .qr-print-sheet .ticket-logo { color: #fff !important; background: #12372a !important; }
  .qr-print-sheet.assistant-qr-poster .ticket-logo { background: #294f7d !important; }
  .qr-print-sheet .eyebrow { color: #287a59 !important; }
  .qr-print-sheet h1, .qr-print-sheet strong, .qr-print-sheet p { color: #10231d !important; }
  .qr-print-sheet h1 { font-size: 28pt; line-height: 1.12; }
  .qr-print-image { width: 72mm !important; max-width: 72mm; margin: 10mm auto; }
}