/* =====================================================
   OPENDRAW MOBILE UI LAYER
   Apple-inspired: Clean, Fluid, Intuitive
   Philosophy: Desktop unchanged, Mobile refined
   ===================================================== */

/* ✅ Global ONLY: variables.
   Nada de resets globales, nada de helpers globales, nada de modals globales.
   Esto evita que openindex2.css "contamine" el desktop (openindex.css). */
:root{
  /* Orange palette (brand) */
  --od-orange:#ff6b35;
  --od-orange-dark:#e85a28;
  --od-orange-light:#ff8159;
  --od-orange-alpha:rgba(255, 107, 53, 0.1);

  /* Neutrals (Apple-grade) */
  --od-bg:#ffffff;
  --od-gray-50:#fafafa;
  --od-gray-100:#f5f5f5;
  --od-gray-200:#e8e8e8;
  --od-gray-300:#d1d1d6;
  --od-gray-400:#aeaeb2;
  --od-gray-500:#8e8e93;
  --od-gray-600:#636366;
  --od-gray-700:#48484a;
  --od-gray-800:#3a3a3c;
  --od-gray-900:#1c1c1e;

  /* Radii (fluid, generous) */
  --od-radius-xl:20px;
  --od-radius-lg:16px;
  --od-radius-md:12px;
  --od-radius-sm:8px;
  --od-radius-xs:6px;

  /* Shadows (layered, soft) */
  --od-shadow-sm:0 1px 3px rgba(0,0,0,.04), 0 1px 2px rgba(0,0,0,.02);
  --od-shadow-md:0 4px 12px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.04);
  --od-shadow-lg:0 10px 30px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.06);
  --od-shadow-xl:0 20px 40px rgba(0,0,0,.15), 0 8px 16px rgba(0,0,0,.08);

  /* Transitions (Apple-smooth) */
  --od-ease-out:cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --od-ease-spring:cubic-bezier(0.68, -0.55, 0.27, 1.55);
  --od-duration-fast:200ms;
  --od-duration-normal:300ms;
  --od-duration-slow:400ms;
}

/* Desktop: solo ocultamos lo mobile por default.
   (NO forzamos .od-desktopOnly, para no pisar layouts del web) */
.od-mobileOnly{ display:none; }

/* =====================================================
   MOBILE MODE - Apple-grade Refinement
   (Todo lo mobile queda dentro del @media)
   ===================================================== */
@media (max-width: 900px), (pointer:coarse){

  /* -------------------------
     BASE SAFE RESET (MOBILE ONLY)
     ------------------------- */
  button{
    -webkit-appearance:none;
    appearance:none;
    outline:none;
    border-radius:0;
    color:inherit;
    touch-action:manipulation;
  }

  button:focus-visible{
    outline:2px solid var(--od-orange);
    outline-offset:2px;
  }

  a, button{
    -webkit-tap-highlight-color:transparent;
  }

  /* Helpers (MOBILE ONLY) */
  .od-desktopOnly{ display:none !important; }
  .od-mobileOnly{ display:flex !important; }

  /* Modals hidden by default (MOBILE ONLY) */
  .modal{ display:none; }

  .modal[aria-hidden="false"] {
    display: flex !important;
  }

  /* ===========================
     LAYOUT FOUNDATION
     =========================== */

  html, body{
    overflow:hidden;
    height:100%;
    width:100%;
    overscroll-behavior:none;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
  }

  .app{
    height:100vh;
    height:100dvh; /* Dynamic viewport */
    width:100vw;
    overflow:hidden;
    background:var(--od-gray-50);
    position:relative;
  }

  .main{
    width:100%;
    height:100%;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    background:var(--od-gray-50);
  }

  /* ===========================
     TOP BAR - Completely Hidden in Mobile
     =========================== */

  .topbar,
  header.topbar,
  .topbarRow,
  .editorNavBar,
  #newPlayBtn,
  #renamePlayBtn {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
  }

  /* ===========================
     WORKSPACE - More Space
     =========================== */

  .workspace{
    flex:1;
    overflow-y:auto;
    overflow-x:hidden;
    -webkit-overflow-scrolling:touch;
    padding:16px;
    padding-top:max(16px, env(safe-area-inset-top));
    padding-bottom:calc(150px + env(safe-area-inset-bottom));
    background:var(--od-gray-50);
  }

  /* ===========================
     FRAME NAVIGATION - Hero Element
     =========================== */

  .frameNav{
    position:sticky;
    top:16px;
    z-index:100;

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

    padding:14px 18px;
    margin:0 auto 20px;
    max-width:720px;

    background:#fff;
    border:none;
    border-radius:var(--od-radius-lg);
    box-shadow:var(--od-shadow-md);

    transition:box-shadow var(--od-duration-fast) var(--od-ease-out);
  }

  .frameNav:active{
    box-shadow:var(--od-shadow-sm);
  }

  .frameNavBtn{
    width:48px;
    height:48px;
    font-size:24px;
    font-weight:700;
    line-height:1;

    border:none;
    border-radius:var(--od-radius-md);
    background:var(--od-gray-100);
    color:var(--od-gray-900);

    display:flex;
    align-items:center;
    justify-content:center;

    transition:all var(--od-duration-fast) var(--od-ease-out);
    position:relative;
  }

  .frameNavBtn:active{
    background:var(--od-gray-200);
    transform:scale(0.96);
  }

  .frameNavBtn:disabled{
    opacity:0.35;
    cursor:not-allowed;
  }

  /* Haptic feedback hint */
  .frameNavBtn::after{
    content:'';
    position:absolute;
    inset:0;
    border-radius:inherit;
    background:var(--od-orange);
    opacity:0;
    transition:opacity var(--od-duration-fast);
  }

  .frameNavBtn:active:not(:disabled)::after{
    opacity:0.1;
  }

  .frameNavMeta{
    font-weight:700;
    font-size:15px;
    letter-spacing:-0.02em;
    color:var(--od-gray-600);
    user-select:none;
  }

  /* ===========================
     FRAMES - Focus on Content
     =========================== */

  .framesGrid{
    max-width:720px;
    margin:0 auto;
  }

  .frameCard{
    display:none !important;
    background:#fff;
    border:none;
    border-radius:var(--od-radius-lg);
    padding:16px;
    box-shadow:var(--od-shadow-md);
    margin-bottom:16px;
  }

  .frameCard.selected,
  .frameCard.odActive{
    display:block !important;
  }

  .frameTitle{
    font-size:15px;
    font-weight:700;
    letter-spacing:-0.02em;
    color:var(--od-gray-900);
    margin:0 0 12px;
    text-transform:uppercase;
  }

  .frameCanvasWrap{
    width:100%;
    background:var(--od-gray-50);
    border:none;
    border-radius:var(--od-radius-md);
    overflow:hidden;
    box-shadow:inset 0 1px 3px rgba(0,0,0,.06);
    position:relative;
  }

  /* Subtle inner glow */
  .frameCanvasWrap::before{
    content:'';
    position:absolute;
    inset:0;
    border-radius:inherit;
    pointer-events:none;
    border:0.5px solid rgba(0,0,0,.06);
  }

  .frameCanvas{
    display:block;
    width:100%;
    height:100%;
  }

  /* ===========================
     STATUS BAR - Glanceable Info
     =========================== */

  .statusbar{
    padding:8px 16px;
    font-size:12px;
    font-weight:500;
    letter-spacing:-0.01em;

    background:rgba(255, 255, 255, 0.88);
    backdrop-filter:saturate(180%) blur(20px);
    -webkit-backdrop-filter:saturate(180%) blur(20px);

    border-top:0.5px solid var(--od-gray-200);
    color:var(--od-gray-600);
    z-index:210;

    display:flex;
    justify-content:space-between;
    align-items:center;
  position:fixed;
  left:0;
  right:0;
  bottom:calc(148px + env(safe-area-inset-bottom));
  }

  .status{
    display:inline-flex;
    align-items:center;
    gap:6px;
  }

  /* Saved pulse (refined) */
  #statusLeft.odSavedPulse{
    animation:savedPulse 500ms var(--od-ease-out);
  }

  @keyframes savedPulse{
    0%, 100%{
      color:var(--od-gray-600);
    }
    50%{
      color:var(--od-orange);
    }
  }

  /* ===========================
     BOTTOM TOOLBAR - 2 Rows Grid
     =========================== */

  .mobileToolbar{
    position:fixed !important;
    left:0;
    right:0;
    bottom:0;
    z-index:300;

    display:grid !important;
    grid-template-columns:repeat(5, 1fr);
    grid-template-rows:repeat(2, 1fr);
    gap:6px;

    background:rgba(255, 255, 255, 0.95);
    backdrop-filter:saturate(180%) blur(20px);
    -webkit-backdrop-filter:saturate(180%) blur(20px);

    border-top:0.5px solid var(--od-gray-200);

padding:8px 8px calc(6px + env(safe-area-inset-bottom));
    box-shadow:0 -2px 10px rgba(0,0,0,.04);
  }

  .toolbarBtn{
    height:60px;
    min-width:0;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;

    border:none;
    border-radius:var(--od-radius-sm);
    background:transparent;

    font-weight:700;
    font-size:10px;
    letter-spacing:0.3px;
    color:var(--od-gray-700);

    transition:all var(--od-duration-fast) var(--od-ease-out);
    position:relative;
    overflow:hidden;
  }

  /* Active state feedback */
  .toolbarBtn::before{
    content:'';
    position:absolute;
    inset:8px;
    border-radius:var(--od-radius-md);
    background:var(--od-gray-100);
    opacity:0;
    transform:scale(0.8);
    transition:all var(--od-duration-fast) var(--od-ease-spring);
  }

  .toolbarBtn:active::before{
    opacity:1;
    transform:scale(1);
  }

  /* Primary button (SELECT) */
  .toolbarBtn--primary{
    color:var(--od-orange);
  }

  .toolbarBtn--primary::before{
    background:var(--od-orange-alpha);
  }

  .toolbarBtn--primary .toolbarIcon{
    color:var(--od-orange);
  }

  .toolbarIcon{
    font-size:20px;
    line-height:1;
    position:relative;
    z-index:1;
  }

  .toolbarLabel{
    letter-spacing:0.3px;
    text-transform:uppercase;
    position:relative;
    z-index:1;
  }

  /* Long-press hint (subtle) */
  @media (hover: none){
    .toolbarBtn:active{
      transform:scale(0.96);
    }
  }

  /* ===========================
     MODALS - Bottom Sheet Perfection
     =========================== */

  .modal{
    position:fixed;
    inset:0;
    z-index:999;
    display:none !important;
    align-items:flex-end;
    justify-content:center;
    padding:0;
  }

  .modal[aria-hidden="false"]{
    display:flex !important;
    animation:modalFadeIn var(--od-duration-normal) var(--od-ease-out);
  }

  @keyframes modalFadeIn{
    from{ opacity:0; }
    to{ opacity:1; }
  }

  .modalBackdrop{
    position:absolute;
    inset:0;
    background:rgba(0, 0, 0, 0.4);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
  }

  .modalContent{
    width:100%;
    max-width:680px;
    max-height:82vh;

    background:#fff;
    border-radius:var(--od-radius-xl) var(--od-radius-xl) 0 0;

    overflow:hidden;
    box-shadow:var(--od-shadow-xl);

    display:flex;
    flex-direction:column;

    animation:modalSlideUp var(--od-duration-normal) var(--od-ease-out);

    /* Pill indicator */
    position:relative;
  }

  .modalContent::before{
    content:'';
    position:absolute;
    top:10px;
    left:50%;
    transform:translateX(-50%);
    width:36px;
    height:5px;
    background:var(--od-gray-300);
    border-radius:999px;
    z-index:1;
  }

  @keyframes modalSlideUp{
    from{
      transform:translateY(100%);
      opacity:0;
    }
    to{
      transform:translateY(0);
      opacity:1;
    }
  }

  .modalHeader{
    padding:28px 20px 16px;
    border-bottom:0.5px solid var(--od-gray-200);

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

    background:#fff;
    flex-shrink:0;
  }

  .modalTitle{
    font-weight:800;
    font-size:13px;
    letter-spacing:1.2px;
    text-transform:uppercase;
    color:var(--od-gray-900);
  }

  .modalClose{
    width:32px;
    height:32px;
    border-radius:50%;
    border:none;
    background:var(--od-gray-100);
    color:var(--od-gray-700);
    font-size:16px;
    font-weight:600;

    display:flex;
    align-items:center;
    justify-content:center;

    transition:all var(--od-duration-fast) var(--od-ease-out);
  }

  .modalClose:active{
    background:var(--od-gray-200);
    transform:scale(0.95);
  }

  .modalBody{
    padding:20px;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    flex:1;
  }

  .modalHint{
    text-align:center;
    margin-top:16px;
    font-size:13px;
    font-weight:500;
    color:var(--od-gray-500);
    line-height:1.4;
  }

  /* ===========================
     MODAL GRIDS - Spacious & Touch-friendly
     =========================== */

  .arrowGrid,
  .pathGrid{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:12px;
  }

  .iconGridModal{
    display:grid;
    grid-template-columns:repeat(5, 1fr);
    gap:10px;
  }

  .colorGridModal{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:12px;
  }

  /* ===========================
     MODAL BUTTONS - Premium Touch Targets
     =========================== */

  .arrowBtn,
  .pathBtnModal{
    background:#fff;
    border:1px solid var(--od-gray-200);
    border-radius:var(--od-radius-lg);
    padding:20px 16px;

    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px;

    font-weight:700;
    color:var(--od-gray-900);

    transition:all var(--od-duration-fast) var(--od-ease-out);
    position:relative;
    overflow:hidden;
  }

  .arrowBtn::before,
  .pathBtnModal::before{
    content:'';
    position:absolute;
    inset:0;
    background:var(--od-gray-100);
    opacity:0;
    transition:opacity var(--od-duration-fast);
  }

  .arrowBtn:active::before,
  .pathBtnModal:active::before{
    opacity:1;
  }

  .arrowBtn:active,
  .pathBtnModal:active{
    transform:scale(0.97);
    box-shadow:var(--od-shadow-sm);
  }

  /* Active selection state */
  .arrowBtn.active,
  .pathBtnModal.active{
    border-color:var(--od-orange);
    border-width:2px;
    background:var(--od-orange-alpha);
  }

  .arrowBtn.active::before,
  .pathBtnModal.active::before{
    display:none;
  }

  /* Danger variant */
  .arrowBtn--danger{
    border-color:rgba(255, 69, 58, 0.3);
  }

  .arrowBtn--danger:active{
    background:rgba(255, 69, 58, 0.08);
  }

  .arrowLabel,
  .pathLabel{
    font-size:12px;
    letter-spacing:0.8px;
    text-transform:uppercase;
    position:relative;
    z-index:1;
  }

  .arrowPreview,
  .pathPreview{
    position:relative;
    z-index:1;
  }

  /* ===========================
     COLOR SWATCHES - Visual Delight
     =========================== */

  .colorSwatchModal{
    background:#fff;
    border:1px solid var(--od-gray-200);
    border-radius:var(--od-radius-lg);
    padding:16px;

    display:flex;
    align-items:center;
    gap:14px;

    font-weight:700;

    transition:all var(--od-duration-fast) var(--od-ease-out);
    position:relative;
  }

  .colorSwatchModal::before{
    content:'';
    position:absolute;
    inset:0;
    background:var(--od-gray-100);
    border-radius:inherit;
    opacity:0;
    transition:opacity var(--od-duration-fast);
  }

  .colorSwatchModal:active::before{
    opacity:1;
  }

  .colorSwatchModal:active{
    transform:scale(0.97);
  }

  .colorSwatchModal.active{
    border-color:var(--od-orange);
    border-width:2px;
    background:var(--od-orange-alpha);
  }

  .colorSwatchModal.active::before{
    display:none;
  }

  .colorSwatchInner{
    width:40px;
    height:40px;
    border-radius:50%;
    border:0.5px solid rgba(0, 0, 0, 0.1);
    flex-shrink:0;
    box-shadow:var(--od-shadow-sm);
    position:relative;
    z-index:1;
  }

  .colorSwatchLabel{
    font-size:13px;
    font-weight:700;
    letter-spacing:0.5px;
    text-transform:uppercase;
    color:var(--od-gray-900);
    position:relative;
    z-index:1;
  }

  /* ===========================
     ICON BUTTONS - Grid Density
     =========================== */

  .iconBtnModal{
    aspect-ratio:1;
    background:#fff;
    border:1px solid var(--od-gray-200);
    border-radius:var(--od-radius-md);
    padding:8px;

    display:flex;
    align-items:center;
    justify-content:center;

    transition:all var(--od-duration-fast) var(--od-ease-out);
    position:relative;
  }

  .iconBtnModal::before{
    content:'';
    position:absolute;
    inset:0;
    background:var(--od-gray-100);
    border-radius:inherit;
    opacity:0;
    transition:opacity var(--od-duration-fast);
  }

  .iconBtnModal:active::before{
    opacity:1;
  }

  .iconBtnModal:active{
    transform:scale(0.95);
  }

  .iconBtnModal.active{
    border-color:var(--od-orange);
    border-width:2px;
    background:var(--od-orange-alpha);
  }

  .iconBtnModal img{
    width:100%;
    height:100%;
    object-fit:contain;
    position:relative;
    z-index:1;
  }

  /* ===========================
     ACCESSIBILITY ENHANCEMENTS
     =========================== */

  @media (prefers-reduced-motion: reduce){
    *,
    *::before,
    *::after{
      animation-duration:0.01ms !important;
      animation-iteration-count:1 !important;
      transition-duration:0.01ms !important;
    }
  }

  @media (prefers-color-scheme: dark){
    /* Future: dark mode support */
  }

  /* ===========================
     PERFORMANCE OPTIMIZATIONS
     =========================== */

  .frameCanvas,
  .arrowPreview canvas,
  .pathPreview{
    will-change:transform;
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
  }

  .modalContent,
  .toolbarBtn,
  .frameNavBtn{
    will-change:transform;
  }
}

/* =========================================================
   MOBILE DOCK LAYOUT REFINES (Back next to frame selector, FRAME row, DELETE)
   ========================================================= */

@media (max-width: 900px), (pointer:coarse){

  /* Hide desktop topbar explicitly (in case od-desktopOnly isn't defined) */
  .topbar{ display:none !important; }
  .mobileTopbar,
  header.mobileTopbar{
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
  }

  /* Frame nav: (BACK)(< 1/3 >) */
  .frameNav{
    justify-content: flex-start;
    gap: 10px;
    padding: 8px 10px;
  }
  .frameNavCluster{
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }
  .frameNavMeta{
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.4px;
  }
  .frameBackBtn{
    flex: 0 0 auto;
    height: 44px;
    padding: 0 10px;
    border: 1px solid var(--border-main);
    background: var(--bg-main);
    color: var(--text-main);
    border-radius: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.15s ease;
  }
  .frameBackBtn:active{
    background: var(--gray-100);
    border-color: var(--border-hover);
  }
  .frameBackIcon{
    font-size: 16px;
    font-weight: 900;
    line-height: 1;
  }
  .frameBackLabel{
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.6px;
  }

  /* FRAME row docked above toolbar */
  .mobileFrameDock{
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(70px + env(safe-area-inset-bottom));
    z-index: 205;
    background: var(--bg-main);
    border-top: 1px solid var(--border-main);
    padding: 8px;
  }
  .mobileFrameBtn{
    width: 100%;
    height: 48px;
    border: 1px solid var(--border-main);
    background: var(--bg-main);
    color: var(--text-main);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 0;
    transition: all 0.15s ease;
  }
  .mobileFrameBtn:active{
    background: var(--gray-100);
    border-color: var(--border-hover);
  }

  /* Toolbar: add DELETE styling */
  .toolbarBtn--danger{
    border-color: rgba(214,31,31,.45);
    color: var(--red-primary);
    background: rgba(214,31,31,.03);
  }
  .toolbarBtn--danger:active{
    background: rgba(214,31,31,.08);
    border-color: rgba(214,31,31,.75);
  }

  /* Space for frame dock + toolbar */
.workspace{
  padding-bottom: calc(78px + 64px + env(safe-area-inset-bottom));
}

.statusbar{
  bottom: calc(78px + 64px + env(safe-area-inset-bottom));
}
@media (max-width: 900px), (pointer:coarse){
  header.topbar,
  .topbar,
  #topbar {
    display: none !important;
  }
}