/* mobile.css
 *
 * Simple, focused mobile experience. EVERY layout rule is inside a
 * `@media (max-width: 820px)` query, so the desktop app is completely
 * unchanged. On a phone the app is a clean viewer for the three main functions
 * — Floor Plan, 3D View and Image Render — plus a small menu for the account
 * (cloud save/load) and New.
 */

/* Hidden on desktop. */
#mobile-menu-btn,
#mobile-sidebar-backdrop,
#mobile-menu,
#mobile-toolbar {
  display: none;
}

@media (max-width: 820px) {

  /* Hide the full desktop sidebar entirely — mobile uses its own small menu. */
  .sidebar {
    display: none !important;
  }

  /* Canvas fills the screen. */
  .main {
    flex-direction: row;
  }
  .canvas-wrap {
    width: 100%;
    min-width: 0;
  }

  /* The app handles its own touch gestures (draw + pinch-zoom/pan). Tell the
     browser not to also pan/zoom the page from touches on the canvas, otherwise
     two-finger pinches fight the app and end up dragging geometry. */
  #workspace-container,
  #workspace,
  #draw-layer {
    touch-action: none;
  }

  /* Manual dimensions are drawn in world units (1px lines, 13px text) which is
     invisible on a phone where the sheet is zoomed way out (~0.3x). Thicken and
     enlarge them on mobile so kept measurements are actually readable. */
  .dim-manual-line,
  .dim-manual-extension,
  .dim-manual-tick {
    stroke-width: 3px !important;
  }
  .dim-manual-text {
    font-size: 30px !important;
    font-weight: 700 !important;
  }

  /* ── Top tabs: only the three main functions, big and full-width ─────── */
  #tab-main-layers,
  #tab-foundation,
  #tab-roof-planner,
  #tab-technical,
  #tab-elevation,
  #tab-detail,
  #tab-drawing2d,
  #tab-topography,
  #tab-room,
  #tab-landscape {
    display: none !important;
  }
  .view-tabs {
    overflow-x: hidden;
    flex-wrap: nowrap !important;
    padding: 0 6px 0 52px !important;   /* clear the hamburger on the left */
  }
  .view-tabs .view-tab {
    flex: 1 1 0;
    text-align: center;
    padding: 12px 4px !important;
    font-size: 13px !important;
  }
  #room-planner-subtabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    white-space: nowrap;
  }

  /* ── Hamburger ───────────────────────────────────────────────────────── */
  #mobile-menu-btn {
    display: flex;
    position: fixed;
    top: 7px;
    left: 8px;
    z-index: 1200;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    background: #1e293b;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 19px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    -webkit-tap-highlight-color: transparent;
  }

  /* ── Simple slide-in menu (NOT the desktop sidebar) ──────────────────── */
  #mobile-menu {
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 82vw;
    max-width: 320px;
    padding: 16px 16px 20px;
    background: #ffffff;
    box-shadow: 0 0 24px rgba(0, 0, 0, 0.35);
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    z-index: 1100;
    overflow-y: auto;
  }
  body.mobile-menu-open #mobile-menu {
    transform: translateX(0);
  }

  #mobile-sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1050;
  }
  body.mobile-menu-open #mobile-sidebar-backdrop {
    display: block;
  }

  #mobile-menu .mm-brand {
    font-weight: 700;
    font-size: 16px;
    color: #0f172a;
    margin: 4px 0 6px;
  }
  #mobile-menu .mm-views {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  #mobile-menu .mm-views button {
    text-align: left;
    padding: 12px 14px;
    font-size: 15px;
    font-weight: 600;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    background: #f1f5f9;
    color: #0f172a;
    cursor: pointer;
  }
  #mobile-menu .mm-label {
    font-size: 12px;
    color: #475569;
    margin-top: 6px;
  }
  #mobile-menu input,
  #mobile-menu select {
    padding: 10px 12px;
    font-size: 14px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #fff;
  }
  #mobile-menu .mm-row {
    display: flex;
    gap: 8px;
  }
  #mobile-menu .mm-row button {
    flex: 1;
    padding: 11px 8px;
    font-size: 14px;
    font-weight: 600;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #f1f5f9;
    color: #0f172a;
    cursor: pointer;
  }
  #mobile-menu .mm-primary {
    background: #2563eb;
    border-color: #2563eb;
    color: #fff;
  }
  #mobile-menu .mm-danger {
    margin-top: auto;
    padding: 11px;
    font-size: 14px;
    font-weight: 600;
    border: 1px solid #fecaca;
    border-radius: 8px;
    background: #fef2f2;
    color: #b91c1c;
    cursor: pointer;
  }
  #mobile-menu .mm-status {
    font-size: 12px;
    color: #475569;
    min-height: 1em;
  }

  /* ── Floating edit toolbar (plan view only): draw / select / delete / undo ─ */
  body.mobile-plan-view #mobile-toolbar {
    display: flex;
    position: fixed;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    gap: 6px;
    z-index: 1150;
    padding: 6px;
    border-radius: 12px;
    background: rgba(30, 41, 59, 0.95);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  }
  #mobile-toolbar button {
    background: #334155;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  #mobile-toolbar button.active {
    background: #2563eb;
  }

  /* Keep overlay toolbars (3D toggles, render controls) fully on-screen. */
  #three-d-view > div[style*="absolute"],
  #render-toolbar,
  #render-presets,
  .topography-planner-toolbar {
    max-width: calc(100vw - 16px);
    flex-wrap: wrap;
  }
  /* The inner button/checkbox groups must wrap too, otherwise a single long row
     (Walls … Ground … Extend ground …) runs off the right edge of the phone. */
  #three-d-view > div[style*="absolute"] > div {
    flex-wrap: wrap;
    max-width: 100%;
  }

  /* ── Design Render: stack everything vertically and scroll, so all the
     preprompts and the generated image are visible (instead of desktop
     absolute-positioned overlays that crop off-screen). ─────────────────── */
  /* The element has an inline overflow:hidden, so !important is required to let
     the render view scroll on a phone. */
  #render-view {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
  }
  #render-toolbar,
  #render-presets,
  #render-panels {
    position: static !important;
  }
  #render-toolbar {
    flex-wrap: wrap;
  }
  #render-toolbar #render-prompt {
    flex: 1 1 100% !important;
    order: 90;            /* prompt drops to its own full-width row */
    min-height: 38px;
  }
  /* Each preset category (Style / Light / Facade …) gets its own full-width row
     and wraps its options so none are cut off. */
  #render-presets > div {
    flex: 1 1 100% !important;
    flex-wrap: wrap;
  }
  #render-panels {
    flex-direction: column;
    height: auto;
    margin: 8px;
    /* Extra space at the bottom so the last element (the history strip of
       previously generated images) can scroll fully clear of the phone's nav bar. */
    margin-bottom: 96px;
    gap: 12px;
  }
  /* Cap the image heights so the source capture doesn't fill the whole screen
     and push the generated image off the bottom. The AI render gets more room. */
  #render-panels > div { flex: 0 0 auto; min-width: 0; }
  #render-source-img { max-height: 26vh; }
  #render-output-img { max-height: 52vh; }
  /* The image frames shouldn't grow taller than their (capped) image. */
  #render-panels > div > div { min-height: 0; }
  /* Show the history strip of generated images. */
  #render-history img { height: 64px; }
}