/* Sulong Studio v2.0 — iPhone/iPad interaction layer */
:root {
  --mobile-dock-h: 72px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --mobile-vh: 100dvh;
}

html {
  min-height: 100%;
  background: #050908;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  overscroll-behavior-y: none;
}

body {
  min-height: var(--mobile-vh);
  padding-left: max(var(--space-6), var(--safe-left));
  padding-right: max(var(--space-6), var(--safe-right));
}

button, input, select, textarea, [role="button"] {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* PWA install/setup notice */
.dp-mobile-install-card {
  display: none;
  position: fixed;
  left: max(12px, var(--safe-left));
  right: max(12px, var(--safe-right));
  top: max(10px, calc(var(--safe-top) + 8px));
  z-index: 30000;
  padding: 14px;
  border: 1px solid rgba(96, 228, 178, .28);
  border-radius: 16px;
  background: rgba(7, 15, 12, .96);
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  box-shadow: 0 20px 70px rgba(0,0,0,.62);
  color: #eafff6;
}
.dp-mobile-install-card.visible { display: block; }
.dp-mobile-install-card strong { display:block; font-size:14px; margin-bottom:5px; }
.dp-mobile-install-card p { margin:0 0 10px; color:#a8bbb2; font-size:12px; line-height:1.5; }
.dp-mobile-install-actions { display:flex; gap:8px; }
.dp-mobile-install-actions button { min-height:42px; flex:1; }
.dp-mobile-install-steps { display:none; margin-top:10px; padding:10px; border-radius:10px; background:rgba(255,255,255,.035); color:#cbd8d2; font-size:12px; line-height:1.55; }
.dp-mobile-install-card.show-steps .dp-mobile-install-steps { display:block; }

/* Bottom navigation — only touch/mobile layouts */
.dp-mobile-dock {
  display:none;
  position:fixed;
  z-index:22000;
  left:0;
  right:0;
  bottom:0;
  min-height:calc(var(--mobile-dock-h) + var(--safe-bottom));
  padding:7px max(8px, var(--safe-right)) calc(7px + var(--safe-bottom)) max(8px, var(--safe-left));
  grid-template-columns:repeat(5, minmax(0,1fr));
  gap:4px;
  background:rgba(5,10,8,.94);
  border-top:1px solid rgba(100,218,174,.18);
  backdrop-filter:blur(24px) saturate(150%);
  -webkit-backdrop-filter:blur(24px) saturate(150%);
  box-shadow:0 -16px 40px rgba(0,0,0,.45);
}
.dp-mobile-dock button {
  min-width:0 !important;
  min-height:52px !important;
  padding:6px 3px !important;
  display:flex !important;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  border-radius:12px !important;
  background:transparent !important;
  border:1px solid transparent !important;
  box-shadow:none !important;
  color:#83968d !important;
  font-size:9px !important;
  line-height:1 !important;
  letter-spacing:.35px !important;
  text-transform:none !important;
}
.dp-mobile-dock button .ico { font-size:18px; line-height:1; }
.dp-mobile-dock button.active { color:#dff9ed !important; background:rgba(45,122,98,.22) !important; border-color:rgba(92,219,171,.2) !important; }

.mobile-export-actions { display:none; gap:8px; margin-top:10px; }
.mobile-export-actions button { flex:1; }
.mobile-device-note { display:none; margin-top:10px; padding:10px 12px; border:1px solid rgba(92,219,171,.14); border-radius:10px; background:rgba(45,122,98,.07); color:#9fb5aa; font-size:11px; line-height:1.5; }

/* iPad: remove sidebar before it becomes cramped. */
@media (max-width:1180px) {
  .dp-sidebar {
    transform:translateX(-105%);
    transition:transform .24s ease;
    box-shadow:24px 0 70px rgba(0,0,0,.55);
  }
  body.dp-nav-open .dp-sidebar { transform:translateX(0); }
  body.dp-redesign > .container {
    width:100%;
    margin-left:0 !important;
    padding-left:max(14px, var(--safe-left));
    padding-right:max(14px, var(--safe-right));
  }
  .dp-mobile-menu { display:grid !important; place-items:center; }
}

/* iPad portrait and phones */
@media (max-width:900px), (hover:none) and (pointer:coarse) {
  body {
    padding-bottom:calc(var(--mobile-dock-h) + var(--safe-bottom) + 18px) !important;
    background-attachment:scroll;
  }
  .dp-mobile-dock { display:grid; }
  .mobile-export-actions, .mobile-device-note { display:flex; }
  .ambient-orbs, #particleCanvas, .film-grain { display:none !important; }
  * { -webkit-overflow-scrolling:touch; }

  /* Prevent iOS auto-zoom when focusing form controls. */
  input, select, textarea { font-size:16px !important; }
  input[type="range"] { font-size:initial !important; min-height:34px; }
  button, .icon-btn, .small, .secondary, .big-btn { min-height:44px; }
  .scene-dot { min-height:40px; min-width:40px; display:grid; place-items:center; }

  body.dp-redesign header {
    top:max(6px, var(--safe-top));
    padding:10px 11px;
    border-radius:14px;
  }
  body.dp-redesign > .container { padding-bottom:calc(var(--mobile-dock-h) + var(--safe-bottom) + 24px); }
  .dp-view-hero { padding:18px; }
  .dp-view-hero h2 { font-size:clamp(24px,5vw,34px); }
  .dp-stepbar {
    margin-left:-14px;
    margin-right:-14px;
    padding-left:14px;
    padding-right:14px;
    scroll-snap-type:x proximity;
    scrollbar-width:none;
  }
  .dp-stepbar::-webkit-scrollbar { display:none; }
  .dp-step { scroll-snap-align:start; min-height:48px; }

  .layout { gap:12px !important; }
  .panel { border-radius:15px; }
  .panel h2 { align-items:flex-start; gap:8px; }
  .panel h2 > div { flex-wrap:wrap; justify-content:flex-end; }

  .preview-wrapper {
    max-height:min(68svh,720px);
    display:flex;
    justify-content:center;
    overflow:hidden;
    border-radius:14px;
  }
  .preview-wrapper canvas {
    width:auto !important;
    max-width:100% !important;
    max-height:min(68svh,720px) !important;
    object-fit:contain;
  }
  .scene-nav { overflow-x:auto; flex-wrap:nowrap; padding-bottom:4px; scroll-snap-type:x proximity; }
  .scene-nav .scene-dot { flex:0 0 auto; scroll-snap-align:center; }

  .thumb-grid { grid-template-columns:repeat(4,minmax(0,1fr)) !important; gap:8px !important; }
  .thumb { min-width:0; border-radius:10px; }
  .thumb .regen { width:38px; height:38px; display:grid; place-items:center; }

  .visual-timing-controls, .visual-style-panel { padding:12px !important; }
  .visual-style-toggles label { padding:12px; }
  .folder-row { flex-wrap:wrap; }
  #chooseFolderBtn, #clearFolderBtn { display:none !important; }
  .folder-display { width:100%; }

  /* Full-screen mobile modals */
  .v15-modal-backdrop { padding:0 !important; align-items:stretch !important; }
  .v15-modal {
    width:100vw !important;
    height:var(--mobile-vh) !important;
    max-height:none !important;
    border-radius:0 !important;
    padding-top:var(--safe-top);
    padding-bottom:var(--safe-bottom);
  }
  .v15-modal-header { position:sticky; top:0; z-index:3; background:rgba(8,12,10,.96); }
  .v15-modal-body { overscroll-behavior:contain; }
  .v15-grid.three, .v15-grid.two { grid-template-columns:1fr !important; }

  #calendarOverlay { padding:0 !important; }
  #calendarModal {
    width:100vw !important;
    height:var(--mobile-vh) !important;
    max-height:none !important;
    border-radius:0 !important;
    padding:max(16px,var(--safe-top)) max(14px,var(--safe-right)) max(18px,var(--safe-bottom)) max(14px,var(--safe-left)) !important;
    overflow-y:auto;
  }
  .cal-grid { grid-template-columns:1fr !important; }

  #chatToggle { bottom:calc(var(--mobile-dock-h) + var(--safe-bottom) + 14px) !important; }
  #chatPanel {
    top:max(6px,var(--safe-top)) !important;
    bottom:calc(var(--mobile-dock-h) + var(--safe-bottom) + 6px) !important;
    left:max(6px,var(--safe-left)) !important;
    right:max(6px,var(--safe-right)) !important;
    width:auto !important;
    height:auto !important;
    max-height:none !important;
  }
  .chat-composer { grid-template-columns:46px minmax(0,1fr) 46px; }
  #chatAttach, #chatSend { width:46px !important; height:46px !important; }
  #chatInput { min-height:46px; max-height:30svh; }

  .v15-queue-dock {
    left:max(8px,var(--safe-left)) !important;
    right:max(8px,var(--safe-right)) !important;
    bottom:calc(var(--mobile-dock-h) + var(--safe-bottom) + 8px) !important;
    width:auto !important;
    max-height:55svh !important;
  }
}

/* Phone-specific compaction */
@media (max-width:600px) {
  body.dp-redesign > .container { padding:8px max(8px,var(--safe-right)) calc(var(--mobile-dock-h) + var(--safe-bottom) + 18px) max(8px,var(--safe-left)); }
  body.dp-redesign header .logo { width:36px; height:36px; }
  body.dp-redesign header h1 { font-size:14px; letter-spacing:1.2px; }
  .dp-view-hero, .dp-step-context, .panel { padding:13px !important; }
  .dp-view-hero p { display:none; }
  .dp-hero-actions { gap:7px; }
  .dp-hero-actions button { padding:9px !important; }
  .dp-step-context p { display:none; }
  .dp-step-controls { gap:6px; }
  .dp-stepbar { grid-template-columns:repeat(6,108px) !important; }
  .dp-step { font-size:9px; }

  .row-2, .row-3, .button-row { grid-template-columns:1fr !important; }
  .thumb-grid { grid-template-columns:repeat(3,minmax(0,1fr)) !important; }
  .api-row { padding:9px 0; }
  .key-tab-bar, #scriptProviderToggle, #voiceProviderToggle { overflow-x:auto; flex-wrap:nowrap !important; }
  .key-tab, .vp-btn { flex:0 0 auto !important; }
  .visual-style-preview-wrap textarea { min-height:160px; }
  .chat-power-header .chat-header-status { font-size:8px; }
}

@media (orientation:landscape) and (max-height:600px) and (hover:none) {
  .preview-wrapper, .preview-wrapper canvas { max-height:72svh !important; }
  .dp-view-hero { display:none !important; }
  .dp-step-context { padding:8px 12px !important; }
}

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
}