/*
 * Phone-only Interior Painting room flow.
 *
 * This layer changes navigation and focus only. Protected room pricing,
 * fields, formulas, saved data, and the desktop estimator remain untouched.
 */
@media (max-width:760px) {
  /* Keep the direct Painting entry usable on narrow phones. The shared picker
     previously let its tall header consume the entire customer-list row. */
  .premium-app .painting-customer-start-modal {
    width:100vw !important;
    height:100dvh !important;
    padding:8px !important;
  }

  .premium-app .painting-customer-start-modal .hgc-customer-start-dialog {
    width:100% !important;
    max-height:calc(100dvh - 16px) !important;
    grid-template-rows:auto auto minmax(150px,1fr) auto auto !important;
  }

  .premium-app .painting-customer-start-modal .hgc-customer-start-dialog > header {
    grid-template-columns:48px minmax(0,1fr) 38px !important;
    gap:8px !important;
    padding:14px 12px 10px !important;
  }

  .premium-app .painting-customer-start-modal .hgc-customer-start-dialog > header > span {
    width:48px !important;
    height:48px !important;
  }

  .premium-app .painting-customer-start-modal .hgc-customer-start-dialog > header > span svg {
    width:24px !important;
    height:24px !important;
  }

  .premium-app .painting-customer-start-modal .hgc-customer-start-dialog > header h3 {
    font-size:22px !important;
    line-height:1.08 !important;
  }

  .premium-app .painting-customer-start-modal .hgc-customer-start-dialog > header small {
    display:-webkit-box !important;
    overflow:hidden !important;
    font-size:13px !important;
    line-height:1.3 !important;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:3;
  }

  .premium-app .painting-customer-start-modal .hgc-customer-choice-list {
    min-height:150px !important;
    max-height:none !important;
  }

  .premium-app .painting-module-shell.interior.painting-mobile-guided-flow.has-painting-rooms
    .painting-reference-rooms > .paint-add-room,
  .premium-app .painting-module-shell.interior.painting-mobile-guided-flow
    .painting-empty-room-state [data-pe-action="add-room"],
  .premium-app .painting-module-shell.interior.painting-mobile-guided-flow.is-adding-room
    [data-pe-action="add-room"] {
    display:none !important;
  }

  .premium-app .painting-module-shell.interior.painting-mobile-guided-flow
    .painting-mobile-room-progress {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    min-height:48px;
    margin:0 10px 10px;
    padding:10px 12px;
    border-left:3px solid #f58214;
    border-bottom:1px solid #29475a;
    background:#07131e;
    scroll-margin-top:104px;
    outline:none;
  }

  .premium-app .painting-module-shell.interior.painting-mobile-guided-flow
    .painting-mobile-room-progress:focus-visible {
    border-radius:7px;
    box-shadow:0 0 0 2px #2db9ed;
  }

  .premium-app .painting-module-shell.interior.painting-mobile-guided-flow
    .painting-mobile-room-progress span {
    color:#9fb6c7;
    font-size:12px;
    font-weight:800;
  }

  .premium-app .painting-module-shell.interior.painting-mobile-guided-flow
    .painting-mobile-room-progress strong {
    min-width:0;
    overflow:hidden;
    color:#f7f9fb;
    font-size:16px;
    line-height:1.2;
    text-align:right;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .premium-app .painting-module-shell.interior.painting-mobile-guided-flow
    .painting-reference-room {
    scroll-margin-top:104px;
  }

  .premium-app .painting-module-shell.interior.painting-mobile-guided-flow
    .painting-room-actions {
    position:static !important;
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:9px !important;
    padding:12px 10px !important;
    background:#06111b !important;
  }

  .premium-app .painting-module-shell.interior.painting-mobile-guided-flow
    .painting-room-actions > :is(.btn,.primary,.outline-danger) {
    width:100% !important;
    min-width:0 !important;
    min-height:48px !important;
    height:auto !important;
    padding:10px 12px !important;
    border-radius:8px !important;
    font-size:13px !important;
    line-height:1.25 !important;
  }

  .premium-app .painting-module-shell.interior.painting-mobile-guided-flow
    .painting-room-actions > .primary {
    grid-column:1 / -1;
    grid-row:1;
  }

  .premium-app .painting-module-shell.interior.painting-mobile-guided-flow
    .painting-room-actions > .painting-mobile-review-action {
    grid-column:1 / -1;
    grid-row:2;
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    gap:8px;
    border-color:#2db9ed !important;
    background:rgba(45,185,237,.12) !important;
    color:#dff6ff !important;
  }

  .premium-app .painting-module-shell.interior.painting-mobile-guided-flow
    .painting-room-actions > [data-paint-room-nav="-1"] {
    grid-column:1;
    grid-row:3;
  }

  .premium-app .painting-module-shell.interior.painting-mobile-guided-flow
    .painting-room-actions > [data-paint-room-duplicate] {
    grid-column:2;
    grid-row:3;
  }

  .premium-app .painting-module-shell.interior.painting-mobile-guided-flow
    .painting-room-actions > [data-delete-room] {
    grid-column:1 / -1;
    grid-row:4;
  }

  .premium-app .painting-module-shell.interior.painting-mobile-guided-flow
    .painting-room-actions.is-adding-room {
    display:none !important;
  }

  .premium-app .painting-module-shell.interior.painting-mobile-guided-flow
    .painting-bottom-add-room {
    padding:10px 10px 16px !important;
  }

  .premium-app .painting-module-shell.interior.painting-mobile-guided-flow
    .painting-mobile-room-review-notice {
    display:grid;
    gap:5px;
    margin:0 10px 12px;
    padding:12px 14px;
    border:1px solid #d99b18;
    border-left-width:4px;
    border-radius:8px;
    background:rgba(217,155,24,.1);
    scroll-margin-top:104px;
    outline:none;
  }

  .premium-app .painting-module-shell.interior.painting-mobile-guided-flow
    .painting-mobile-room-review-notice strong {
    color:#ffe09a;
    font-size:15px;
    line-height:1.3;
  }

  .premium-app .painting-module-shell.interior.painting-mobile-guided-flow
    .painting-mobile-room-review-notice span {
    color:#dce7ef;
    font-size:13px;
    line-height:1.45;
  }

  .premium-app .proposal-page.pe-live:has(.painting-mobile-guided-flow),
  .premium-app .proposal-section-shell:has(.painting-mobile-guided-flow) {
    padding-bottom:32px !important;
  }

  .premium-app .painting-module-shell.interior.painting-mobile-guided-flow
    .painting-pricing-workspace > .paint-center {
    padding-bottom:32px !important;
    scroll-padding-bottom:32px !important;
  }

  /* Keep app navigation available, but let it follow the estimator instead of
     covering the room actions and add-room form. */
  .premium-app:has(.painting-mobile-guided-flow) > main > section.content {
    padding-bottom:16px !important;
  }

  .premium-app:has(.painting-mobile-guided-flow) .mobile-bottom-nav {
    position:static !important;
    inset:auto !important;
    width:auto !important;
    margin:14px 8px max(8px,env(safe-area-inset-bottom)) !important;
  }
}

@media (min-width:761px) {
  .painting-mobile-room-progress,
  .painting-mobile-review-action,
  .painting-mobile-room-review-notice {
    display:none !important;
  }
}