/* =========================================================
   SKYSUITE STAGE 87.3 — PERFORMANCE-TUNED MOBILE SHELL
   Builds on the existing whole-platform mobile/PWA foundation.
   Desktop remains unchanged.  Mobile gets a persistent app dock,
   safe-area handling, standalone polish and a native-feeling More sheet.
   ========================================================= */

:root{
  --sky87-dock-height:68px;
  --sky87-dock-gap:8px;
  --sky87-dock-safe:env(safe-area-inset-bottom,0px);
  --sky87-top-safe:env(safe-area-inset-top,0px);
  --sky87-burgundy:#741a3b;
  --sky87-deep:#4a1026;
  --sky87-soft:#f8edf2;
  --sky87-line:rgba(225,211,217,.92);
  --sky87-ink:#271b21;
  --sky87-muted:#786a71;
}

html{background:#f8f6f7}
body.sky-native-mobile{-webkit-tap-highlight-color:transparent;touch-action:manipulation}

/* Stage 87.1 supersedes the first-generation generated bottom bar. */
.sky-mobile-bottom-nav{display:none!important}

.sky87-mobile-dock,
.sky87-more-backdrop,
.sky87-more-sheet{display:none}

@media (max-width:980px){
  body.sky-native-mobile{
    min-height:100dvh;
    padding-bottom:calc(var(--sky87-dock-height) + 18px + var(--sky87-dock-safe));
  }

  body.sky-native-mobile .main-content,
  body.sky-native-mobile .sf-content,
  body.sky-native-mobile .sp-content,
  body.sky-native-mobile .fp-content,
  body.sky-native-mobile .learn-main{
    padding-bottom:calc(104px + var(--sky87-dock-safe))!important;
  }

  /* Give installed PWA mode proper room around the phone status/home areas. */
  body.sky-pwa-standalone .sky-global-topbar,
  body.sky-pwa-standalone .sf-topbar,
  body.sky-pwa-standalone .sp-topbar,
  body.sky-pwa-standalone .fp-top,
  body.sky-pwa-standalone .learn-nav{
    padding-top:var(--sky87-top-safe)!important;
    min-height:calc(62px + var(--sky87-top-safe))!important;
    height:auto!important;
  }

  body.sky-pwa-standalone .sidebar{
    top:calc(var(--sky-global-topbar-height,48px) + var(--sky87-top-safe))!important;
    height:calc(100dvh - var(--sky-global-topbar-height,48px) - var(--sky87-top-safe))!important;
  }

  .sky87-mobile-dock{
    position:fixed;
    z-index:1585;
    left:var(--sky87-dock-gap);
    right:var(--sky87-dock-gap);
    bottom:calc(var(--sky87-dock-gap) + var(--sky87-dock-safe));
    min-height:var(--sky87-dock-height);
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    align-items:end;
    gap:3px;
    padding:6px;
    border:1px solid var(--sky87-line);
    border-radius:22px;
    background:#fff;
    box-shadow:0 10px 26px rgba(43,18,29,.14),0 1px 4px rgba(43,18,29,.05);
    contain:layout paint style;
  }

  .sky87-dock-item{
    position:relative;
    min-width:0;
    min-height:54px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
    padding:6px 2px 5px;
    border:0;
    border-radius:15px;
    background:transparent;
    color:var(--sky87-muted);
    text-decoration:none;
    font:inherit;
    cursor:pointer;
    touch-action:manipulation;
    transition:transform .16s ease,background .16s ease,color .16s ease;
  }

  .sky87-dock-item:active{transform:scale(.95)}
  .sky87-dock-item.active{background:var(--sky87-soft);color:var(--sky87-burgundy)}
  .sky87-dock-icon{font-size:18px;line-height:1;min-height:20px;display:grid;place-items:center}
  .sky87-dock-label{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:8px;font-weight:900;letter-spacing:-.01em}

  /* The operational portal already owns a real AI drawer. Make that action central. */
  .sky87-dock-item.sky87-primary{
    align-self:center;
    width:58px;
    height:58px;
    min-height:58px;
    margin:-23px auto 1px;
    border:5px solid rgba(255,255,255,.97);
    border-radius:21px;
    color:#fff;
    background:linear-gradient(145deg,#4c0d25,#8d2850 70%,#b24771);
    box-shadow:0 10px 27px rgba(116,26,59,.34);
  }
  .sky87-dock-item.sky87-primary .sky87-dock-icon{font-size:20px}
  .sky87-dock-item.sky87-primary .sky87-dock-label{color:#fff;font-size:7px}
  .sky87-dock-item.sky87-primary.active{background:linear-gradient(145deg,#4c0d25,#8d2850 70%,#b24771)}

  .sky87-dock-badge{
    position:absolute;
    top:4px;
    left:calc(50% + 7px);
    min-width:16px;
    height:16px;
    padding:0 4px;
    display:grid;
    place-items:center;
    border-radius:999px;
    border:2px solid #fff;
    background:#d92f57;
    color:#fff;
    font-size:7px;
    font-weight:950;
  }

  /* Native-style More sheet, mainly used by Learning and as a safe fallback. */
  .sky87-more-backdrop{
    position:fixed;
    inset:0;
    z-index:1720;
    display:block;
    background:rgba(29,12,20,.30);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .2s ease,visibility .2s ease;
  }
  .sky87-more-sheet{
    position:fixed;
    z-index:1730;
    left:8px;
    right:8px;
    bottom:calc(8px + var(--sky87-dock-safe));
    display:block;
    max-height:min(72dvh,620px);
    overflow:auto;
    padding:8px 8px calc(10px + var(--sky87-dock-safe));
    border:1px solid var(--sky87-line);
    border-radius:24px;
    background:#fff;
    box-shadow:0 25px 80px rgba(38,14,25,.30);
    transform:translateY(calc(100% + 30px));
    visibility:hidden;
    transition:transform .18s cubic-bezier(.2,.8,.2,1),visibility .18s ease;
  }
  body.sky87-more-open{overflow:hidden}
  body.sky87-more-open .sky87-more-backdrop{opacity:1;visibility:visible;pointer-events:auto}
  body.sky87-more-open .sky87-more-sheet{transform:translateY(0);visibility:visible}
  .sky87-more-grabber{width:42px;height:4px;margin:2px auto 10px;border-radius:999px;background:#ddd2d7}
  .sky87-more-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:5px 8px 10px}
  .sky87-more-head strong{display:block;color:var(--sky87-ink);font-size:14px;letter-spacing:-.02em}
  .sky87-more-head span{display:block;margin-top:2px;color:#8c7e85;font-size:9px}
  .sky87-more-close{width:38px;height:38px;border:0;border-radius:12px;background:#f7f1f4;color:#6f203d;font-size:18px;cursor:pointer}
  .sky87-more-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
  .sky87-more-link{min-width:0;display:flex;align-items:center;gap:10px;padding:12px;border:1px solid #eee3e8;border-radius:15px;background:#fff;color:var(--sky87-ink);text-decoration:none;font-size:10px;font-weight:850}
  .sky87-more-link.active{border-color:#ddbdc9;background:#fbf2f5;color:var(--sky87-burgundy)}
  .sky87-more-link .ico{width:30px;height:30px;display:grid;place-items:center;border-radius:10px;background:#f8edf2;font-size:15px;flex:0 0 30px}

  /* Stage 87.3 removes whole-page entrance animation to reduce mobile paint/compositing work. */
}

@media(max-width:420px){
  .sky87-mobile-dock{left:6px;right:6px;bottom:calc(6px + var(--sky87-dock-safe));border-radius:20px;padding:5px}
  .sky87-dock-label{font-size:7.3px}
  .sky87-dock-item.sky87-primary{width:56px;height:56px;min-height:56px}
  .sky87-more-links{grid-template-columns:1fr}
}

@media(prefers-reduced-motion:reduce){
  .sky87-dock-item,.sky87-more-backdrop,.sky87-more-sheet,
  body.sky-native-mobile .main-content,body.sky-native-mobile .sf-main,
  body.sky-native-mobile .sp-main,body.sky-native-mobile .fp-main,
  body.sky-native-mobile .learn-main{transition:none!important;animation:none!important}
}

@media print{
  .sky87-mobile-dock,.sky87-more-backdrop,.sky87-more-sheet{display:none!important}
  body.sky-native-mobile{padding-bottom:0!important}
}