/* Pixara Mobile Studio Architecture (Bottom Sheet) */

@media (max-width: 1023px) {
  /* Layout adjustments */
  body {
    overflow: hidden;
    touch-action: pan-x pan-y;
  }

  /* Header adjustments for mobile */
  header {
    height: 48px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    gap: 6px !important;
  }

  main {
    flex-direction: column !important;
    position: relative;
    height: calc(100dvh - 48px);
    overflow: hidden;
  }

  /* Center Stage Container on mobile */
  section.flex-1 {
    height: 100% !important;
    padding-bottom: 56px; /* leave room for bottom nav */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
  }

  /* Canvas viewport */
  .checker-pattern {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px !important;
    width: 100% !important;
    flex: 1 !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-x pan-y !important;
  }

  /* Responsive Stage Scaling */
  #ie-stage {
    max-width: calc(100vw - 20px) !important;
    max-height: calc(100dvh - 48px - 60px) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.8), 0 0 0 1px rgba(255,255,255,0.08) !important;
    transition: width 0.25s cubic-bezier(0.16, 1, 0.3, 1), height 0.25s cubic-bezier(0.16, 1, 0.3, 1), max-height 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    transform-origin: center center;
  }

  /* When layer selected but drawer closed (mini state) */
  body.sheet-mini #ie-stage {
    max-height: calc(100dvh - 48px - 98px) !important;
  }

  /* When drawer panel is open (half or full), scale stage smoothly to fit upper half */
  body.sheet-open #ie-stage {
    max-height: calc(52dvh - 58px) !important;
  }

  body.sheet-open section.flex-1 {
    padding-bottom: min(48dvh, 420px) !important;
  }

  /* Mobile Floating Toolbar over Canvas */
  #ie-mobile-floating-bar {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    pointer-events: none;
    z-index: 25;
  }

  #ie-mobile-floating-bar > * {
    pointer-events: auto;
  }

  .floating-pill {
    background: rgba(26, 26, 26, 0.88);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 9999px;
    padding: 6px 10px;
    min-height: 36px;
    min-width: 36px;
    font-size: 11px;
    font-weight: 500;
    color: #E5E5E5;
    box-shadow: 0 4px 14px rgba(0,0,0,0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    position: relative;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
    transition: all 0.15s ease;
  }

  .floating-pill::before {
    content: '';
    position: absolute;
    top: -6px;
    bottom: -6px;
    left: -6px;
    right: -6px;
    min-width: 44px;
    min-height: 44px;
  }

  .floating-pill.active {
    background: rgba(0, 163, 255, 0.22);
    border-color: rgba(0, 163, 255, 0.65);
    color: #00A3FF;
    box-shadow: 0 0 12px rgba(0, 163, 255, 0.35);
  }

  /* Mobile Bottom Sheet Container */
  #ie-mobile-sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 35;
    background: #161616;
    border-top: 1px solid #2E2E2E;
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.8);
    display: flex;
    flex-direction: column;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    transition: height 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: height;
  }

  /* State 1: Bar only (no layer selected, drawer closed) */
  #ie-mobile-sheet.state-bar {
    height: calc(52px + env(safe-area-inset-bottom, 0px));
  }
  #ie-mobile-sheet.state-bar .sheet-handle-area,
  #ie-mobile-sheet.state-bar .sheet-context-bar,
  #ie-mobile-sheet.state-bar .sheet-body,
  #ie-mobile-sheet.state-bar #sheet-btn-close {
    display: none !important;
  }

  /* State 2: Mini (layer selected, quick actions visible, drawer closed) */
  #ie-mobile-sheet.state-mini {
    height: calc(90px + env(safe-area-inset-bottom, 0px));
  }
  #ie-mobile-sheet.state-mini .sheet-handle-area {
    display: flex;
    padding: 3px 0 1px 0;
  }
  #ie-mobile-sheet.state-mini .sheet-context-bar {
    display: flex;
  }
  #ie-mobile-sheet.state-mini .sheet-body,
  #ie-mobile-sheet.state-mini #sheet-btn-close {
    display: none !important;
  }

  /* State 3: Half (drawer open for editing) */
  #ie-mobile-sheet.state-half {
    height: 48vh !important;
    max-height: 440px !important;
  }
  #ie-mobile-sheet.state-half .sheet-handle-area {
    display: flex;
  }
  #ie-mobile-sheet.state-half .sheet-context-bar {
    display: flex;
  }
  #ie-mobile-sheet.state-half .sheet-body {
    display: block;
    flex: 1;
    overflow-y: auto;
  }
  #ie-mobile-sheet.state-half #sheet-btn-close {
    display: flex;
  }

  /* State 4: Full (drawer full screen) */
  #ie-mobile-sheet.state-full {
    height: 84vh !important;
  }
  #ie-mobile-sheet.state-full .sheet-handle-area {
    display: flex;
  }
  #ie-mobile-sheet.state-full .sheet-context-bar {
    display: flex;
  }
  #ie-mobile-sheet.state-full .sheet-body {
    display: block;
    flex: 1;
    overflow-y: auto;
  }
  #ie-mobile-sheet.state-full #sheet-btn-close {
    display: flex;
  }

  /* Drag Handle Area */
  .sheet-handle-area {
    padding: 8px 0 4px 0;
    display: flex;
    justify-content: center;
    cursor: grab;
    touch-action: none;
  }

  .sheet-handle-bar {
    width: 36px;
    height: 4px;
    background: #444444;
    border-radius: 9999px;
    transition: background 0.15s;
  }

  .sheet-handle-area:active .sheet-handle-bar {
    background: #00A3FF;
  }

  /* Context Bar (Active Selection Header) */
  .sheet-context-bar {
    height: 38px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #262626;
    background: #1A1A1A;
    font-size: 11px;
    font-weight: 600;
  }

  .context-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px;
    border-radius: 4px;
    background: #242424;
    border: 1px solid #333333;
    color: #E5E5E5;
    font-size: 11px;
    font-family: 'JetBrains Mono', monospace;
  }

  .context-badge.badge-img {
    color: #00A3FF;
    border-color: rgba(0, 163, 255, 0.4);
    background: rgba(0, 163, 255, 0.12);
  }

  .context-badge.badge-txt {
    color: #38BDF8;
    border-color: rgba(56, 189, 248, 0.4);
    background: rgba(56, 189, 248, 0.12);
  }

  .context-badge.badge-shp {
    color: #C084FC;
    border-color: rgba(192, 132, 252, 0.4);
    background: rgba(192, 132, 252, 0.12);
  }

  .context-badge.badge-canvas {
    color: #A3A3A3;
  }

  .context-actions {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .context-btn {
    width: 32px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    background: #262626;
    border: 1px solid #383838;
    color: #A3A3A3;
    font-size: 11px;
    position: relative;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
    transition: all 0.15s;
  }

  .context-btn::before {
    content: '';
    position: absolute;
    top: -8px;
    bottom: -8px;
    left: -6px;
    right: -6px;
    min-width: 44px;
    min-height: 44px;
  }

  #sheet-btn-close {
    width: 34px !important;
    height: 28px !important;
    color: #00A3FF !important;
    background: rgba(0, 163, 255, 0.15) !important;
    border-color: rgba(0, 163, 255, 0.45) !important;
  }

  #sheet-btn-close:hover, #sheet-btn-close:active {
    background: #00A3FF !important;
    color: #FFFFFF !important;
  }

  .context-btn:hover, .context-btn:active {
    background: #333333;
    color: #FFFFFF;
    border-color: #555555;
  }

  .context-btn.btn-danger:hover, .context-btn.btn-danger:active {
    background: rgba(239, 68, 68, 0.2);
    color: #EF4444;
    border-color: rgba(239, 68, 68, 0.5);
  }

  .context-btn.context-btn-edit {
    width: auto !important;
    padding: 0 8px !important;
    gap: 4px;
    background: rgba(0, 163, 255, 0.2) !important;
    border-color: rgba(0, 163, 255, 0.6) !important;
    color: #00A3FF !important;
    font-weight: 600;
    font-size: 11px;
  }

  .context-btn.context-btn-edit:hover, .context-btn.context-btn-edit:active {
    background: #00A3FF !important;
    color: #FFFFFF !important;
    box-shadow: 0 0 10px rgba(0, 163, 255, 0.4);
  }

  .context-btn.context-btn-collapse {
    color: #888888;
  }

  .context-btn.context-btn-collapse:hover, .context-btn.context-btn-collapse:active {
    color: #FFFFFF;
    background: #333333;
  }

  /* Sheet Scrollable Body */
  .sheet-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 12px;
    background: #141414;
  }

  /* Tab Panes */
  .sheet-tab-pane {
    display: none;
  }

  .sheet-tab-pane.active {
    display: block;
    animation: fadeIn 0.15s ease;
  }

  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(3px); }
    to { opacity: 1; transform: translateY(0); }
  }

  /* Mobile Bottom Navigation Bar */
  .sheet-nav-bar {
    height: 52px;
    border-top: 1px solid #262626;
    background: #181818;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    z-index: 10;
  }

  .sheet-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    background: none;
    border: none;
    color: #8A8A8A;
    font-size: 10px;
    font-weight: 500;
    transition: color 0.15s ease;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    padding: 4px 0;
  }

  .sheet-nav-item i {
    font-size: 14px;
    transition: transform 0.15s ease;
  }

  .sheet-nav-item.active {
    color: #00A3FF;
    font-weight: 600;
  }

  .sheet-nav-item.active i {
    transform: scale(1.1);
    color: #00A3FF;
    filter: drop-shadow(0 0 6px rgba(0, 163, 255, 0.4));
  }

  /* Mobile Overflow Dropdown Menu */
  #mobile-dropdown-menu {
    position: fixed;
    top: 50px;
    right: 10px;
    width: 220px;
    background: #1C1C1C;
    border: 1px solid #2E2E2E;
    border-radius: 8px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.85);
    padding: 8px;
    z-index: 50;
    display: none;
    flex-direction: column;
    gap: 6px;
  }

  #mobile-dropdown-menu.show {
    display: flex;
    animation: fadeIn 0.15s ease;
  }

  .menu-item {
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    color: #E5E5E5;
    display: flex;
    align-items: center;
    gap: 10px;
    background: transparent;
    border: none;
    width: 100%;
    text-align: left;
    transition: background 0.12s;
  }

  .menu-item:hover, .menu-item:active {
    background: #282828;
    color: #FFFFFF;
  }
}

/* Desktop safety: Completely hide all mobile elements on desktop */
@media (min-width: 1024px) {
  #ie-mobile-sheet,
  #ie-mobile-floating-bar,
  #mobile-menu-btn,
  #mobile-dropdown-menu,
  #ie-adjust-empty {
    display: none !important;
  }
}

/* Auto-hide adjust-empty when any property panel is active */
#panel-adjust:has(#ieProps:not([style*="display: none"]):not([style*="display:none"])) #ie-adjust-empty,
#panel-adjust:has(#ieImgProps:not([style*="display: none"]):not([style*="display:none"])) #ie-adjust-empty,
#panel-adjust:has(#ieShapeProps:not([style*="display: none"]):not([style*="display:none"])) #ie-adjust-empty {
  display: none !important;
}