/* ==========================================================
   HNAI 0.8.3-F3
   Dedicated iPhone layout

   IMPORTANT:
   - phone only: <= 430 CSS px
   - application only: #app-view
   - login/auth UI is intentionally untouched
   - desktop and tablet remain unchanged
   ========================================================== */

@media (max-width:430px) {

  /* --------------------------------------------------------
     APP SHELL
     -------------------------------------------------------- */

  #app-view {
    width:100%;
    min-width:0;
    overflow-x:hidden;
  }

  #app-view .app-shell {
    display:block;
    width:100%;
    min-width:0;
  }

  #app-view .sidebar {
    display:none;
  }

  #app-view .content {
    width:100%;
    min-width:0;
    max-width:none;
    padding:10px 12px 96px;
    overflow-x:hidden;
  }

  /* --------------------------------------------------------
     TOP BAR
     -------------------------------------------------------- */

  #app-view .topbar {
    position:sticky;
    top:0;
    z-index:40;

    width:100%;
    min-width:0;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;

    padding:
      calc(8px + env(safe-area-inset-top,0px))
      12px
      8px;

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
  }

  #app-view .topbar h2,
  #app-view #page-title {
    margin:0;
    font-size:1.18rem;
    line-height:1.2;
  }

  #app-view .topbar-actions {
    display:flex;
    align-items:center;
    gap:5px;
    min-width:0;
  }

  #app-view .search-box,
  #app-view .user-badge {
    display:none;
  }

  #app-view .clock {
    min-width:auto;
    padding:6px 8px;
  }

  /* --------------------------------------------------------
     HOME
     -------------------------------------------------------- */

  #app-view .home-view {
    display:grid;
    gap:16px;
    width:100%;
    min-width:0;
  }

  /* --------------------------------------------------------
     HERO -> MOBILE STATUS CARD
     -------------------------------------------------------- */

  #app-view .hero {
    width:100%;
    min-width:0;
    min-height:190px;

    padding:22px 18px;

    border-radius:22px;

    display:flex;
    flex-direction:column;
    justify-content:flex-end;

    background-position:center;
    background-size:cover;
  }

  #app-view .hero h3 {
    margin:0 0 7px;

    max-width:90%;

    font-size:1.65rem;
    line-height:1.08;
    font-weight:750;
  }

  #app-view .hero p {
    max-width:92%;

    margin:0 0 8px;

    font-size:.84rem;
    line-height:1.4;
  }

  #app-view .hero-status {
    max-width:100%;

    font-size:.69rem;
    line-height:1.35;
  }

  /* --------------------------------------------------------
     QUICK ACTIONS
     -------------------------------------------------------- */

  #app-view .quick-actions {
    display:flex;
    gap:10px;

    width:calc(100% + 12px);

    margin:0 -12px 0 0;
    padding:0 12px 4px 0;

    overflow-x:auto;
    overflow-y:hidden;

    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }

  #app-view .quick-actions::-webkit-scrollbar {
    display:none;
  }

  #app-view .action-card {
    flex:0 0 142px;

    min-width:142px;
    min-height:78px;

    padding:12px;

    border-radius:17px;

    scroll-snap-align:start;
  }

  #app-view .action-card strong {
    font-size:.8rem;
    line-height:1.2;
  }

  #app-view .action-card small {
    display:none;
  }

  /* --------------------------------------------------------
     METRICS
     -------------------------------------------------------- */

  #app-view .stats-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;

    width:100%;
    min-width:0;
  }

  #app-view .stat-card {
    min-width:0;
    min-height:82px;

    padding:13px;

    border-radius:17px;
  }

  #app-view .stat-card strong {
    font-size:1.3rem;
    line-height:1;
  }

  #app-view .stat-card small {
    font-size:.68rem;
  }

  /* --------------------------------------------------------
     MAIN DASHBOARD
     -------------------------------------------------------- */

  #app-view .dashboard-columns {
    display:block;
    width:100%;
    min-width:0;
  }

  #app-view .dashboard-main,
  #app-view .dashboard-side {
    width:100%;
    min-width:0;
    max-width:none;
  }

  /* --------------------------------------------------------
     ROOMS -> REAL PHONE LIST
     -------------------------------------------------------- */

  #app-view .rooms-grid {
    display:grid;
    grid-template-columns:1fr;
    gap:10px;

    width:100%;
    min-width:0;
  }

  #app-view .room-card {
    display:grid;
    grid-template-columns:112px minmax(0,1fr);

    width:100%;
    min-width:0;
    min-height:92px;

    overflow:hidden;

    border-radius:17px;
  }

  #app-view .room-art {
    width:112px;
    min-width:112px;
    height:100%;
    min-height:92px;

    border-radius:0;
  }

  #app-view .room-info {
    min-width:0;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;

    padding:12px 13px;
  }

  #app-view .room-info h4 {
    margin:0 0 3px;

    font-size:.88rem;
    line-height:1.25;
  }

  #app-view .room-info p,
  #app-view .room-info small {
    font-size:.68rem;
    line-height:1.35;
  }

  #app-view .chevron {
    flex:0 0 auto;
    font-size:1.35rem;
  }

  /* --------------------------------------------------------
     ACTIVE DEVICES -> PHONE LIST
     -------------------------------------------------------- */

  #app-view .active-section {
    width:100%;
    min-width:0;
    margin-top:16px;
  }

  #app-view #active-devices,
  #app-view .device-list {
    display:grid;
    grid-template-columns:1fr;
    gap:8px;

    width:100%;
    min-width:0;
  }

  #app-view .device-row {
    width:100%;
    min-width:0;
    min-height:60px;

    padding:10px 11px;

    border-radius:15px;
  }

  #app-view .device-copy {
    min-width:0;
  }

  #app-view .device-copy strong,
  #app-view .device-copy small {
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  /* --------------------------------------------------------
     MOBILE BOTTOM NAV
     -------------------------------------------------------- */

  #app-view .mobile-nav {
    position:fixed;

    z-index:80;

    left:10px;
    right:10px;

    bottom:
      calc(8px + env(safe-area-inset-bottom,0px));

    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:2px;

    padding:7px;

    border-radius:19px;

    backdrop-filter:blur(22px);
    -webkit-backdrop-filter:blur(22px);
  }

  #app-view .mobile-nav button {
    min-width:0;
    min-height:50px;

    padding:6px 3px;

    border-radius:13px;
  }

  #app-view .mobile-nav button span {
    display:block;

    font-size:.61rem;
    line-height:1.15;
  }

}

/* ==========================================================
   HNAI 0.8.3-F3 – mobile refinement step 2

   Visual refinement only.
   Auth, application logic and desktop layout are untouched.
   ========================================================== */

@media (max-width:430px) {

  /* Leave enough scroll clearance behind the fixed bottom nav. */
  #app-view .content {
    padding-bottom:
      calc(150px + env(safe-area-inset-bottom,0px));
  }

  /* More compact mobile hero. */
  #app-view .hero {
    min-height:168px;
    padding:18px 16px;
    border-radius:20px;
  }

  #app-view .hero h3 {
    max-width:94%;
    margin-bottom:6px;

    font-size:1.45rem;
    line-height:1.08;
  }

  #app-view .hero p {
    max-width:94%;
    margin-bottom:7px;

    font-size:.8rem;
  }

  #app-view .hero-status {
    font-size:.66rem;
  }

  /* Quick actions remain horizontally swipeable,
     but use less viewport height. */
  #app-view .quick-actions {
    gap:9px;
  }

  #app-view .action-card {
    flex-basis:132px;
    min-width:132px;
    min-height:70px;

    padding:11px;

    border-radius:16px;
  }

  /* Slightly denser dashboard statistics. */
  #app-view .stats-grid {
    gap:9px;
  }

  #app-view .stat-card {
    min-height:74px;
    padding:12px;
  }

  /* Compact phone room cards. */
  #app-view .rooms-grid {
    gap:9px;
  }

  #app-view .room-card {
    grid-template-columns:
      104px minmax(0,1fr);

    min-height:86px;
  }

  #app-view .room-art {
    width:104px;
    min-width:104px;

    min-height:86px;
  }

  #app-view .room-info {
    padding:10px 12px;
  }

  /* Give the fixed navigation clearer separation
     from scrolling content. */
  #app-view .mobile-nav {
    box-shadow:
      0 14px 34px rgba(15,23,42,.28);
  }

}

/* ==========================================================
   HNAI 0.8.3-F3 – mobile refinement step 3

   Bottom-navigation and scrolling refinement only.
   ========================================================== */

@media (max-width:430px) {

  /*
   * Fixed navigation overlays the document by design.
   * Reserve enough scroll space so the final cards can always
   * be moved fully above the navigation.
   */
  #app-view .content {
    padding-bottom:
      calc(190px + env(safe-area-inset-bottom,0px));
  }

  /*
   * Sections can be scrolled into view without their heading
   * disappearing underneath the fixed bottom navigation.
   */
  #app-view section,
  #app-view .section-head,
  #app-view .rooms-grid,
  #app-view .active-section {
    scroll-margin-bottom:
      calc(110px + env(safe-area-inset-bottom,0px));
  }

  /*
   * Slightly smaller floating phone navigation.
   */
  #app-view .mobile-nav {
    left:12px;
    right:12px;

    bottom:
      calc(10px + env(safe-area-inset-bottom,0px));

    min-height:68px;

    padding:6px;

    border-radius:18px;

    box-shadow:
      0 12px 30px rgba(15,23,42,.24);
  }

  #app-view .mobile-nav button {
    min-height:54px;

    padding:5px 2px;

    border-radius:13px;
  }

  #app-view .mobile-nav button span {
    margin-top:3px;

    font-size:.59rem;
    line-height:1.1;
  }

  /*
   * Give the first room some breathing room below its heading.
   */
  #app-view .rooms-grid {
    margin-top:4px;
  }

  /*
   * Prevent room text from being pushed underneath controls.
   */
  #app-view .room-info {
    min-width:0;
  }

  #app-view .room-info > * {
    min-width:0;
  }

}

/* ==========================================================
   HNAI 0.8.3-F3 – mobile refinement step 4

   Rooms and active-device presentation only.
   ========================================================== */

@media (max-width:430px) {

  /* More separation between mobile sections. */
  #app-view .dashboard-main > section,
  #app-view .active-section {
    margin-top:18px;
  }

  /* Room heading should stay visually above the first card. */
  #app-view .section-head {
    position:relative;
    z-index:2;

    margin-bottom:10px;
  }

  /* Phone room cards. */
  #app-view .room-card {
    min-height:90px;

    background:
      var(--panel,#fff);

    box-shadow:
      0 5px 18px rgba(15,23,42,.05);
  }

  #app-view .room-art {
    min-height:90px;

    object-fit:cover;
  }

  #app-view .room-info {
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    gap:8px;
  }

  #app-view .room-info h4,
  #app-view .room-info strong {
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  #app-view .room-info p,
  #app-view .room-info small {
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  /* Active devices get stronger card separation. */
  #app-view #active-devices,
  #app-view .device-list {
    gap:9px;
  }

  #app-view .device-row {
    min-height:62px;

    padding:11px 12px;

    background:
      var(--panel,#fff);

    box-shadow:
      0 4px 15px rgba(15,23,42,.045);
  }

  /* Controls remain comfortably tappable. */
  #app-view .device-row button,
  #app-view .device-row input[type="checkbox"],
  #app-view .device-row [role="switch"] {
    flex:0 0 auto;
  }

  /* Prevent the fixed nav from visually touching the
     final list card at the end of the page. */
  #app-view .active-section {
    margin-bottom:30px;
  }

}


/* ==========================================================
   HNAI 0.8.3-F3 – left mobile drawer step 1

   IMPORTANT:
   - body scrolling remains unchanged
   - app-shell remains unchanged
   - content scrolling remains unchanged
   - existing mobile-nav buttons are reused
   ========================================================== */

@media (max-width:430px) {

  /*
   * app.css reserves 78px for the former bottom navigation.
   * The drawer no longer needs that space.
   */
  body {
    padding-bottom:
      calc(18px + env(safe-area-inset-bottom,0px));
  }

  /*
   * Small permanent trigger on the left.
   */
  #app-view .mobile-drawer-toggle {
    position:fixed;

    left:10px;
    top:50%;

    transform:translateY(-50%);

    z-index:102;

    width:42px;
    height:54px;

    display:grid;
    place-items:center;

    padding:0;

    border:1px solid rgba(255,255,255,.16);
    border-radius:0 15px 15px 0;

    background:rgba(15,23,42,.94);
    color:#fff;

    box-shadow:
      5px 10px 28px rgba(15,23,42,.22);

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);

    font:inherit;
    font-size:1.25rem;
    line-height:1;

    cursor:pointer;
  }

  /*
   * Backdrop exists only while drawer is open.
   */
  #app-view .mobile-drawer-backdrop {
    position:fixed;
    inset:0;

    z-index:99;

    background:rgba(15,23,42,.28);

    backdrop-filter:blur(1px);
    -webkit-backdrop-filter:blur(1px);
  }

  #app-view .mobile-drawer-backdrop[hidden] {
    display:none;
  }

  /*
   * Reuse the EXISTING mobile navigation.
   * Only its presentation changes from bottom bar to left drawer.
   */
  #app-view .mobile-nav {
    position:fixed;

    top:
      calc(10px + env(safe-area-inset-top,0px));

    bottom:
      calc(10px + env(safe-area-inset-bottom,0px));

    left:0;
    right:auto;

    width:min(280px,82vw);
    min-height:0;

    z-index:101;

    display:flex;
    flex-direction:column;

    justify-content:flex-start;
    align-items:stretch;

    gap:5px;

    padding:
      18px
      12px
      14px;

    overflow-x:hidden;
    overflow-y:auto;

    border-radius:0 22px 22px 0;

    background:rgba(15,23,42,.97);

    box-shadow:
      16px 0 48px rgba(15,23,42,.28);

    backdrop-filter:blur(22px);
    -webkit-backdrop-filter:blur(22px);

    transform:translateX(calc(-100% - 18px));

    transition:
      transform .22s ease;

    visibility:hidden;

    pointer-events:none;
  }

  .mobile-drawer-open #app-view .mobile-nav {
    transform:translateX(0);

    visibility:visible;

    pointer-events:auto;
  }

  /*
   * Turn former bottom-nav buttons into normal menu rows.
   */
  #app-view .mobile-nav button {
    width:100%;
    min-height:48px;

    display:grid;

    grid-template-columns:
      32px
      minmax(0,1fr);

    align-items:center;
    justify-items:start;

    gap:10px;

    padding:8px 11px;

    border-radius:12px;

    text-align:left;

    color:#cbd5e1;
  }

  #app-view .mobile-nav button > :first-child {
    display:grid;
    place-items:center;

    width:30px;
    min-width:30px;

    margin:0;

    font-size:1rem;
  }

  #app-view .mobile-nav button span {
    margin:0;

    font-size:.76rem;
    line-height:1.2;
  }

  #app-view .mobile-nav button.active {
    background:rgba(255,255,255,.12);
    color:#fff;
  }

  /*
   * Old fixed-bottom-nav compensation from Step 3/4
   * is no longer needed.
   */
  #app-view .content {
    padding-bottom:
      calc(24px + env(safe-area-inset-bottom,0px));
  }

  #app-view section,
  #app-view .section-head,
  #app-view .rooms-grid,
  #app-view .active-section {
    scroll-margin-bottom:24px;
  }

  #app-view .active-section {
    margin-bottom:24px;
  }

}


/* ==========================================================
   HNAI 0.8.3-F3 – left mobile drawer visual step 2

   Visual refinement only.
   Navigation logic and scrolling stay unchanged.
   ========================================================== */

@media (max-width:430px) {

  /*
   * Slightly narrower drawer so more of the current page
   * remains visible while navigation is open.
   */
  #app-view .mobile-nav {
    width:min(260px,68vw);

    gap:3px;

    padding:
      16px
      10px
      12px;

    border-radius:
      0 20px 20px 0;
  }

  /*
   * Slightly denser navigation rows.
   */
  #app-view .mobile-nav button {
    min-height:46px;

    grid-template-columns:
      28px
      minmax(0,1fr);

    gap:9px;

    padding:
      7px
      10px;

    border-radius:11px;
  }

  #app-view .mobile-nav button > :first-child {
    width:27px;
    min-width:27px;

    font-size:.95rem;
  }

  #app-view .mobile-nav button span {
    font-size:.72rem;
  }

  /*
   * Smaller permanent handle.
   */
  #app-view .mobile-drawer-toggle {
    left:8px;

    width:38px;
    height:50px;

    border-radius:
      0 14px 14px 0;

    font-size:1.12rem;
  }

}


/* ==========================================================
   HNAI 0.8.3-F3 – left mobile drawer visual step 3

   Smaller and less intrusive drawer handle only.
   ========================================================== */

@media (max-width:430px) {

  #app-view .mobile-drawer-toggle {
    left:6px;
    top:42%;

    width:34px;
    height:46px;

    border-radius:
      0 13px 13px 0;

    font-size:1rem;

    box-shadow:
      4px 8px 22px rgba(15,23,42,.18);

    opacity:.94;
  }

}


/* ==========================================================
   HNAI 0.8.3-F3 – mobile home visual step 4

   Compact hero and quick actions only.
   Drawer, navigation and scrolling stay unchanged.
   ========================================================== */

@media (max-width:430px) {

  /*
   * Reduce vertical space without losing the visual identity.
   */
  #app-view .hero {
    min-height:148px;

    padding:
      16px
      15px;

    border-radius:19px;
  }

  #app-view .hero h3 {
    max-width:96%;

    margin-bottom:5px;

    font-size:1.34rem;
    line-height:1.06;
  }

  #app-view .hero p {
    margin-bottom:6px;

    font-size:.76rem;
    line-height:1.32;
  }

  #app-view .hero-status {
    font-size:.63rem;
    line-height:1.28;
  }

  /*
   * Slightly smaller quick-action cards so more of the
   * next section is visible without extra scrolling.
   */
  #app-view .quick-actions {
    gap:8px;
  }

  #app-view .action-card {
    flex-basis:122px;
    min-width:122px;
    min-height:64px;

    padding:10px;

    border-radius:15px;
  }

  #app-view .action-card strong {
    font-size:.76rem;
  }

}