/* ============================================================
   Desktop application shell (Phase 1).

   Loaded only by pages that opt in (see fragments/desktop-shell.html), and
   every layout rule here is inside a min-width: 768px query, so below 768px
   this file changes nothing and the existing mobile chrome is the page.

     768–1199px  compact icon rail (76px) + top utility bar
     1200px+     full sidebar (248px) + top utility bar

   Tokens: the values below are the palette the mobile chrome already uses
   (mobile-chrome.css, new-design/ spec). They are named here so desktop pages
   can share them instead of repeating literals.
   ============================================================ */
:root {
  --ex-bg: #070B11;          /* page */
  --ex-bg-deep: #04070B;     /* outer canvas */
  --ex-surface: #0A0F15;     /* chrome: header, nav, sidebar */
  --ex-card: #11161E;        /* cards */
  --ex-card-2: #141A22;      /* inset controls */
  --ex-hover: #1A212B;
  --ex-line: #151B24;        /* hairlines */
  --ex-line-2: #1E2632;      /* card borders */
  --ex-text: #EAECEF;
  --ex-text-2: #B7BDC6;
  --ex-muted: #858C97;       /* lowest-contrast text allowed on --ex-bg (≈5.6:1) */
  --ex-accent: #18BB59;
  --ex-accent-hover: #20CA63;
  --ex-on-accent: #05130A;
  --ex-down: #EB4536;
  --ex-danger-text: #F07167;
  --ex-radius: 14px;
  --ex-radius-sm: 10px;
  --ex-focus: 0 0 0 2px var(--ex-bg), 0 0 0 4px var(--ex-accent);
  --ex-font: 'Roboto', Helvetica, Arial, sans-serif;

  --dshell-rail: 76px;
  --dshell-sidebar: 248px;
  --dshell-topbar: 64px;
}

/* Below 768px the shell does not exist. */
.dshell-skip,
.dshell-sidebar,
.dshell-topbar,
.dshell-footer { display: none; }

@media (min-width: 768px) {
  /* ---------- Hand the page over from the mobile chrome ---------- */
  html[data-desktop-shell] .mchrome-header,
  html[data-desktop-shell] .mchrome-nav,
  html[data-desktop-shell] .mchrome-menu,
  html[data-desktop-shell] #mchrome-lang-menu { display: none !important; }

  html[data-desktop-shell] { background: var(--ex-bg); }
  /* root.css paints the page scrollbar white with !important; keep it in the dark theme. */
  html[data-desktop-shell]::-webkit-scrollbar { background-color: var(--ex-bg) !important; width: 8px !important; }
  html[data-desktop-shell]::-webkit-scrollbar-thumb { background-color: #2A3441 !important; border-radius: 4px !important; }

  /* mobile-chrome.css pads the body for its fixed 56px header and 66px tab bar.
     Here the sidebar is fixed on the left instead, and the top bar is sticky. */
  html[data-desktop-shell] body.mchrome-on {
    padding: 0 0 0 var(--dshell-rail);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--ex-bg);
  }
  html[data-desktop-shell] .dshell-main { flex: 1 0 auto; outline: none; }

  /* The support widget and toast no longer have a tab bar to clear. */
  html[data-desktop-shell] body.mchrome-on .support-button,
  html[data-desktop-shell] body.mchrome-on .chat-box { bottom: 24px; }
  html[data-desktop-shell] #mchrome-toast { bottom: 24px; }

  /* The Add to Desktop sheet keeps its bottom-sheet behaviour but not a full-width one. */
  html[data-desktop-shell] .mchrome-install__sheet { max-width: 520px; border-radius: 22px 22px 0 0; }

  .dshell-sidebar, .dshell-sidebar *,
  .dshell-topbar, .dshell-topbar *,
  .dshell-footer, .dshell-footer *,
  .dshell-skip { box-sizing: border-box; font-family: var(--ex-font); }
  .dshell-sidebar .mdi::before, .dshell-topbar .mdi::before { font-family: 'Material Design Icons'; }

  /* ---------- Skip link ---------- */
  .dshell-skip {
    display: block; position: fixed; top: 8px; left: 8px; z-index: 1500;
    padding: 10px 16px; border-radius: var(--ex-radius-sm);
    background: var(--ex-accent); color: var(--ex-on-accent); font-weight: 700; font-size: 14px;
    text-decoration: none; transform: translateY(-200%);
  }
  .dshell-skip:focus { transform: none; outline: none; box-shadow: var(--ex-focus); }

  /* ---------- Sidebar (rail by default, full from 1200px) ---------- */
  .dshell-sidebar {
    display: flex; flex-direction: column;
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 1100;
    width: var(--dshell-rail);
    padding: 12px 10px;
    background: var(--ex-surface); border-right: 1px solid var(--ex-line);
    color: var(--ex-text);
  }

  .dshell-brand {
    display: flex; align-items: center; gap: 10px; min-width: 0;
    height: 48px; padding: 0 9px; margin-bottom: 12px;
    border-radius: var(--ex-radius-sm); color: var(--ex-text); text-decoration: none;
  }
  .dshell-brand__mark {
    width: 34px; height: 34px; flex: none; overflow: hidden;
    border-radius: 10px; background: var(--ex-accent); color: var(--ex-on-accent);
    display: flex; align-items: center; justify-content: center;
    font-weight: 900; font-size: 17px;
  }
  .dshell-brand__mark img { width: 100%; height: 100%; object-fit: cover; }
  .dshell-brand__text { display: none; min-width: 0; flex-direction: column; gap: 4px; }
  /* A long whitelabel name is cut short rather than pushing the layout; the full name is the link title. */
  .dshell-brand__name {
    font-size: 16px; font-weight: 700; letter-spacing: -0.2px; line-height: 1.15;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .dshell-brand__quantum { gap: 6px; }
  .dshell-brand__quantum .mchrome-quantum__lock { width: 15px; height: 17px; }
  .dshell-brand__quantum .mchrome-quantum__text { font-size: 9.5px; }

  .dshell-nav { flex: 1 1 auto; min-height: 0; }
  .dshell-list, .dshell-sub { list-style: none; margin: 0; padding: 0; }
  .dshell-list > li { position: relative; }

  /* Rows are <a> for destinations and <button> for group headers; the reset makes them one. */
  .dshell-link {
    position: relative; display: flex; align-items: center; gap: 12px;
    width: 100%; min-height: 44px; padding: 0 17px; margin: 1px 0;
    border: 0; border-radius: var(--ex-radius-sm); background: none;
    color: var(--ex-text-2); font: 500 14px/1.2 var(--ex-font); text-align: left;
    text-decoration: none; cursor: pointer;
  }
  .dshell-link .mdi { font-size: 20px; line-height: 1; flex: none; color: var(--ex-muted); }
  .dshell-link:hover { background: var(--ex-hover); color: var(--ex-text); }
  .dshell-link:hover .mdi { color: var(--ex-text); }
  .dshell-link:focus-visible,
  .dshell-sub a:focus-visible,
  .dshell-brand:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--ex-accent); }
  .dshell-link.is-active,
  .dshell-group.has-active > .dshell-link { color: var(--ex-text); background: rgba(24, 187, 89, .10); }
  .dshell-link.is-active .mdi,
  .dshell-group.has-active > .dshell-link .mdi:not(.dshell-group__chevron) { color: var(--ex-accent); }
  .dshell-link.is-active::before {
    content: ""; position: absolute; left: -10px; top: 10px; bottom: 10px;
    width: 3px; border-radius: 0 3px 3px 0; background: var(--ex-accent);
  }
  .dshell-group__chevron { display: none; }

  /* Rail: the label is the icon's accessible name, shown as a tooltip on hover/focus. */
  .dshell-link__label {
    position: absolute; left: calc(100% + 12px); top: 50%; transform: translateY(-50%);
    z-index: 2; white-space: nowrap; pointer-events: none;
    padding: 6px 10px; border-radius: 8px;
    background: var(--ex-card); border: 1px solid var(--ex-line-2); color: var(--ex-text);
    font-size: 13px; font-weight: 500; box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
    opacity: 0; visibility: hidden; transition: opacity .12s ease;
  }
  .dshell-link:hover .dshell-link__label,
  .dshell-link:focus-visible .dshell-link__label { opacity: 1; visibility: visible; }
  /* While a group's flyout is open the tooltip would sit on top of it. */
  .dshell-group.is-flyout > .dshell-link .dshell-link__label { opacity: 0; visibility: hidden; }

  /* Rail groups open as a flyout beside the rail. */
  .dshell-sub { display: none; }
  .dshell-group.is-flyout > .dshell-sub {
    display: block; position: absolute; left: calc(100% + 12px); top: 0; z-index: 3;
    min-width: 210px; padding: 6px;
    background: var(--ex-card); border: 1px solid var(--ex-line-2); border-radius: 12px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .55);
  }
  .dshell-sub__title {
    padding: 8px 12px 6px; color: var(--ex-muted);
    font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  }
  .dshell-sub a {
    display: flex; align-items: center; min-height: 40px; padding: 0 12px;
    border-radius: 8px; color: var(--ex-text-2); font-size: 14px; text-decoration: none;
  }
  .dshell-sub a:hover { background: var(--ex-hover); color: var(--ex-text); }
  .dshell-sub a.is-active { color: var(--ex-accent); font-weight: 500; background: rgba(24, 187, 89, .08); }

  .dshell-sidebar__end {
    display: flex; flex-direction: column; gap: 6px;
    padding-top: 10px; margin-top: 10px; border-top: 1px solid var(--ex-line);
  }
  /* Guests have no panel link and no Log out: drop the empty section and its divider. */
  .dshell-sidebar__end:not(:has(a)) { display: none; }
  .dshell-link--panel { color: var(--ex-accent); }
  .dshell-link--panel .mdi { color: var(--ex-accent); }
  .dshell-link--logout { color: var(--ex-danger-text); }
  .dshell-link--logout .mdi { color: var(--ex-danger-text); }
  .dshell-link--logout:hover { background: rgba(235, 69, 54, .10); color: var(--ex-danger-text); }
  .dshell-link--logout:hover .mdi { color: var(--ex-danger-text); }

  /* Short tablet screens in landscape: tighten the rail rather than scroll it,
     because a scrolling rail would clip its tooltips and flyouts. */
  @media (max-height: 760px) {
    .dshell-link { min-height: 38px; }
    .dshell-brand { margin-bottom: 6px; }
  }

  /* ---------- Top utility bar ---------- */
  .dshell-topbar {
    display: flex; align-items: center; gap: 16px;
    position: sticky; top: 0; z-index: 1050;
    height: var(--dshell-topbar); padding: 0 24px;
    background: rgba(7, 11, 17, .92);
    -webkit-backdrop-filter: saturate(140%) blur(10px); backdrop-filter: saturate(140%) blur(10px);
    border-bottom: 1px solid var(--ex-line);
    color: var(--ex-text);
  }
  .dshell-topbar__title {
    margin: 0; flex: none; font-size: 20px; font-weight: 700; letter-spacing: -0.3px; color: var(--ex-text);
  }
  .dshell-search {
    display: flex; align-items: center; gap: 8px; flex: 0 1 320px; min-width: 0;
    height: 40px; padding: 0 14px;
    border-radius: 999px; background: var(--ex-card-2); border: 1px solid var(--ex-line-2);
    color: var(--ex-muted); text-decoration: none; font-size: 14px;
  }
  .dshell-search .mdi { font-size: 19px; }
  .dshell-search__label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .dshell-search:hover { border-color: #2A3441; color: var(--ex-text-2); }
  .dshell-topbar__actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }

  .dshell-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: 40px; padding: 0 16px; border-radius: 999px;
    font-size: 14px; font-weight: 700; text-decoration: none; white-space: nowrap;
    transition: background .15s ease, border-color .15s ease;
  }
  .dshell-btn .mdi { font-size: 18px; }
  .dshell-btn--primary { background: var(--ex-accent); color: var(--ex-on-accent); }
  .dshell-btn--primary:hover { background: var(--ex-accent-hover); }
  .dshell-btn--ghost { background: transparent; color: var(--ex-text); border: 1px solid #2A3441; }
  .dshell-btn--ghost:hover { border-color: var(--ex-accent); }

  .dshell-iconbtn {
    display: inline-flex; align-items: center; gap: 4px;
    height: 40px; padding: 0 10px; border: 0; border-radius: 999px;
    background: none; color: var(--ex-text); font: 700 13px var(--ex-font); cursor: pointer;
  }
  .dshell-iconbtn:hover { background: var(--ex-hover); }
  .dshell-iconbtn .mdi { font-size: 16px; color: var(--ex-muted); }
  .dshell-iconbtn .mdi-web { font-size: 19px; }

  .dshell-lang { position: relative; }
  .dshell-popover {
    position: absolute; right: 0; top: calc(100% + 8px); z-index: 1260;
    min-width: 190px; margin: 0; padding: 6px; list-style: none;
    background: var(--ex-card); border: 1px solid var(--ex-line-2); border-radius: 12px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .5);
  }
  .dshell-popover[hidden] { display: none; }
  .dshell-popover a {
    display: flex; align-items: center; min-height: 40px; padding: 0 12px;
    border-radius: 8px; color: var(--ex-text); font-size: 14px; text-decoration: none;
  }
  .dshell-popover a:hover { background: var(--ex-hover); }
  .dshell-popover a[aria-current] { color: var(--ex-accent); }

  .dshell-avatar {
    width: 38px; height: 38px; flex: none; overflow: hidden;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; background: #1E2632; color: var(--ex-muted); text-decoration: none;
  }
  .dshell-avatar img { width: 100%; height: 100%; object-fit: cover; }
  .dshell-avatar .mdi { font-size: 20px; }

  .dshell-search:focus-visible,
  .dshell-btn:focus-visible,
  .dshell-iconbtn:focus-visible,
  .dshell-avatar:focus-visible,
  .dshell-popover a:focus-visible,
  .dshell-footer a:focus-visible { outline: none; box-shadow: var(--ex-focus); }

  /* ---------- Footer ---------- */
  .dshell-footer {
    display: block; margin-top: 32px; padding: 0 24px;
    border-top: 1px solid var(--ex-line); background: var(--ex-surface);
    color: var(--ex-muted); font-size: 13px;
  }
  .dshell-footer a { color: var(--ex-text-2); text-decoration: none; border-radius: 4px; }
  .dshell-footer a:hover { color: var(--ex-text); text-decoration: underline; }
  /* padding-right keeps the last links clear of the floating support launcher (52px, 24px
     from the right edge) when the footer sits at the bottom of the viewport. */
  .dshell-footer__bar {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px;
    min-height: 56px; padding: 14px 72px 14px 0;
  }
  .dshell-footer__copy { margin: 0; color: var(--ex-muted); }
  .dshell-footer__links { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-left: auto; }

  .dshell-footer--full .dshell-footer__cols {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 32px;
    padding: 32px 0 24px; border-bottom: 1px solid var(--ex-line);
  }
  .dshell-footer__head {
    margin: 0 0 12px; color: var(--ex-text); font-size: 13px; font-weight: 700;
    letter-spacing: .04em; text-transform: uppercase;
  }
  .dshell-footer__cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }

  /* Height-sensitive pages (trading, futures, assistant, support) fill the viewport under the
     top bar; the full footer starts below the fold instead of taking height from them. */
  .dshell-footer--workspace { margin-top: 0; }
  html[data-desktop-shell] body.mchrome-on:has(> .dshell-footer--workspace) > .dshell-main {
    min-height: calc(100vh - var(--dshell-topbar));
  }

  /* ---------- Coin pickers (Phase 3) ----------
     A page's bottom-sheet picker (marked data-dshell-picker, its sheet role="dialog")
     opens as a centred dialog instead of a full-width sheet. */
  html[data-desktop-shell] [data-dshell-picker] > [role="dialog"] {
    box-sizing: border-box; left: 50%; right: auto; top: 12vh; bottom: auto; margin: 0;
    width: min(440px, calc(100vw - 48px)); max-width: none; max-height: 76vh;
    transform: translateX(-50%);
    border: 1px solid var(--ex-line-2); border-radius: 16px; box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
  }
  html[data-desktop-shell] [data-dshell-picker] [role="button"] { transition: background .15s ease; }
  html[data-desktop-shell] [data-dshell-picker] [role="button"]:hover,
  html[data-desktop-shell] [data-dshell-picker] [role="button"]:focus-visible { background: var(--ex-hover); outline: none; }
  html[data-desktop-shell] [data-dshell-picker] [role="button"]:focus-visible { box-shadow: inset 0 0 0 2px var(--ex-accent); }
}

/* ---------- Desktop: full sidebar ---------- */
@media (min-width: 1200px) {
  html[data-desktop-shell] body.mchrome-on { padding-left: var(--dshell-sidebar); }

  .dshell-sidebar {
    width: var(--dshell-sidebar); padding: 16px 14px;
    overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #2A3441 transparent;
  }
  .dshell-brand { padding: 0 8px; margin-bottom: 18px; }
  .dshell-brand__text { display: flex; }

  .dshell-link { padding: 0 12px; }
  .dshell-link.is-active::before { left: -14px; }
  .dshell-link__label {
    position: static; transform: none; z-index: auto; flex: 1; min-width: 0;
    padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
    font-size: 14px; font-weight: inherit; color: inherit;
    overflow: hidden; text-overflow: ellipsis;
    opacity: 1; visibility: visible; transition: none; pointer-events: auto;
  }
  .dshell-group__chevron { display: block; margin-left: auto; font-size: 18px; transition: transform .2s ease; }
  .dshell-group.is-open > .dshell-link .dshell-group__chevron { transform: rotate(180deg); }

  /* Groups are an accordion in the full sidebar. */
  .dshell-group.is-open > .dshell-sub {
    display: block; position: static; min-width: 0;
    margin: 2px 0 6px 21px; padding: 0 0 0 13px;
    background: none; border: 0; border-left: 1px solid var(--ex-line-2); border-radius: 0; box-shadow: none;
  }
  .dshell-sub__title { display: none; }
  .dshell-sub a { min-height: 38px; }

  .dshell-footer { padding: 0 32px; }
  .dshell-topbar { padding: 0 32px; }
  .dshell-footer--full .dshell-footer__cols { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- Legacy page content (Phases 6 and 7) ----------
   The informational, legal, tools and error pages are still the legacy #__nuxt tree,
   laid out by root.css, which forces .container to 1328px. Pages opt in with
   <main class="dshell-main dshell-legacy">, so the Phase 4–5 legacy pages are unaffected.
   Content blocks get a sane maximum and gutters; long-form legal text a readable measure
   (about 75 characters a line); the TradingView tools an inset. Copy is untouched. */
@media (min-width: 768px) {
  html[data-desktop-shell] .dshell-legacy #__nuxt .container {
    max-width: 1160px !important; padding-left: 24px; padding-right: 24px;
  }
  html[data-desktop-shell] .dshell-legacy #__nuxt .container.global-information {
    max-width: calc(76ch + 60px) !important;
  }
  html[data-desktop-shell] .dshell-legacy .tradingview-widget-container {
    box-sizing: border-box; padding: 16px 24px 24px;
  }
  /* Real links inside legal text: visible focus, like the rest of the shell. */
  html[data-desktop-shell] .dshell-legacy a:focus-visible,
  html[data-desktop-shell] .dshell-legacy button:focus-visible,
  html[data-desktop-shell] .dshell-legacy input:focus-visible {
    outline: none; box-shadow: var(--ex-focus); border-radius: 6px;
  }
}

/* Tablet: keep the top bar compact so the quick actions always fit. */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .dshell-search { flex: 0 0 40px; width: 40px; padding: 0; justify-content: center; }
  .dshell-search__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .dshell-btn { padding: 0 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .dshell-link__label, .dshell-group__chevron, .dshell-btn,
  [data-dshell-picker] [role="button"] { transition: none !important; }
}

/* Phase 8: the floating support launcher's "live" pulse (support.css / root.css, shared with
   other surfaces and left untouched) loops forever, even for visitors who ask for reduced
   motion. On shell pages from 768px it stops for them. Below 768px nothing changes. */
@media (min-width: 768px) and (prefers-reduced-motion: reduce) {
  html[data-desktop-shell] .support-button,
  html[data-desktop-shell] .support-button *,
  html[data-desktop-shell] .support-button::before,
  html[data-desktop-shell] .support-button::after,
  html[data-desktop-shell] .msupport__mark::after,
  html[data-desktop-shell] .msupport__status::before { animation: none !important; }
}