/* Phone trade dock: toggles, chart and Long / Short on one screen; trades and feed below the fold. */

.m-toggles, .m-icon, .m-title, .m-step, .lev-pill, .lev-sheet-head, .lev-scrim, .m-position, .side-liq, .trades-handle { display: none; }
.lev-sheet { display: contents; }

@media (max-width: 640px) {
  body:has(.futures) { grid-template-rows: 52px minmax(0, 1fr) 28px; }
  body:has(.futures):has(.live-ticker) { grid-template-rows: 52px 0 minmax(0, 1fr) 28px; }
  body:has(.futures) .bottombar { padding: 0 12px; }
  body:has(.futures) .motion-control { min-height: 0; height: 22px; padding: 0 10px; }
  body:has(.futures) .live-ticker,
  body:has(.futures) .topbar-ticker,
  body:has(.futures) .sfx,
  body:has(.futures) .user-btn { display: none; }
  body:has(.futures) .sidebar,
  body.nav-open:has(.futures) .scrim,
  body:has(.futures):has(.live-ticker) .sidebar,
  body.nav-open:has(.futures):has(.live-ticker) .scrim { top: 52px; }
  body:has(.futures) .topbar { gap: 8px; padding: 0 8px; }
  body:has(.futures) .topbar .icon-btn { width: 44px; height: 44px; border: 0; background: none; }
  body:has(.futures) .topbar .launch-btn { padding: 8px 12px; font-size: 13px; }
  body:has(.futures) .balance-chip { height: 34px; font-size: 13px; }

  .main:has(> .futures) { padding: 8px; }

  /* The first screen is exactly the outlet's height; the trades panel hangs below it. */
  .futures {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: 100%;
  }

  /* One joined strip of keys; the main's 8px padding plus 4px gives the 12px side inset. */
  .m-toggles {
    display: grid;
    flex: none;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    margin: 0 4px;
    padding: 3px;
    border-radius: 10px;
    background: #08090b;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.8);
  }

  .m-toggle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 0;
    height: 32px;
    padding: 0 2px;
    border: 0;
    border-left: 1px solid #2a3039;
    border-radius: 0;
    background: linear-gradient(#20252d, #14181d);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
    color: #9aa3b0;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
  }

  .m-toggle:first-child { border-left: 0; border-radius: 7px 0 0 7px; }
  .m-toggle:last-child { border-radius: 0 7px 7px 0; }
  .m-toggle:active:not(:disabled) { background: #14181d; box-shadow: none; }
  .m-toggle[aria-pressed="true"] { color: #e8ecf1; }
  .m-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

  .m-led {
    --led: #2ecc8f;
    width: 12px;
    height: 2px;
    border-radius: 1px;
    background: #3a414b;
  }

  .m-toggle[data-led="on"] .m-led,
  .m-toggle[data-led="fallback"] .m-led,
  .m-toggle[data-led="error"] .m-led { background: var(--led); box-shadow: 0 0 8px var(--led); }
  .m-toggle[data-led="fallback"] .m-led { --led: #f5b041; }
  .m-toggle[data-led="error"] .m-led { --led: #f0606a; }
  .m-toggle[data-led="loading"] .m-led,
  .m-toggle[data-led="spin"] .m-led {
    width: 10px;
    height: 10px;
    margin: -4px 0;
    border-radius: 50%;
    background: conic-gradient(var(--led) var(--led-fill, 0%), #3a414b 0);
    -webkit-mask: radial-gradient(circle, transparent 3px, #000 3.5px);
    mask: radial-gradient(circle, transparent 3px, #000 3.5px);
  }
  .m-toggle[data-led="spin"] .m-led { animation: voice-ring-spin 0.9s linear infinite; }
  .m-toggle[data-led]:not([data-led="off"]) { color: #e8ecf1; }

  body:has(.futures):not(.debug-on) .dbg-fab { display: none; }

  .futures > [data-chart] {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    min-height: 0;
    padding: 8px;
  }

  .futures > [data-chart] > .coin-head { flex-wrap: nowrap; align-items: center; overflow: hidden; }
  .card > .coin-head::after,
  .coin-head .price-header,
  .coin-head .trophy-strip,
  .coin-title .muted { display: none; }
  .coin-title { font-size: 16px; }
  .coin-price { order: 0; font-size: 18px; line-height: 28px; }
  .coin-head .cd-chip { order: 0; }

  .futures > [data-chart] > .chart { display: flex; flex: 1 1 0; flex-direction: column; min-height: 0; margin-top: 4px; }
  .futures .chart-bar { min-height: 0; margin: 0; }
  .futures .chart-bar .voice-controls { display: none; }
  .futures .voice-line { min-height: 0; }
  .futures .chart-canvas { flex: 1 1 0; height: auto; min-height: 0; }

  .futures > .trade {
    display: grid;
    flex: none;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    padding: 10px 10px 0;
  }

  .trade > * { grid-column: 1 / -1; margin: 0; }
  .trade > .trade-head { display: none; }

  .trade > .amount-box {
    grid-column: 1;
    height: 44px;
    margin: 0;
    padding: 0;
    gap: 0;
    font-size: 18px;
    font-weight: 700;
  }

  .amount-box > span { flex: none; padding-left: 4px; }
  .amount-box input { text-align: left; font-variant-numeric: tabular-nums; }

  .m-step {
    display: block;
    flex: none;
    width: 44px;
    height: 44px;
    border: 0;
    background: none;
    color: var(--muted);
    font-size: 20px;
    cursor: pointer;
  }

  .lev-pill {
    display: flex;
    grid-column: 2;
    align-items: center;
    gap: 6px;
    height: 44px;
    padding: 0 12px;
    border: 1px solid #5a4a1f;
    border-radius: 12px;
    background: #241e10;
    color: var(--warn);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
  }

  .trade > .quick { padding: 0; gap: 6px; border: 0; background: none; }
  .trade > .quick button { min-height: 34px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); }
  .trade > .quick button[aria-pressed="true"] { border-color: #2a5a47; background: #11241d; box-shadow: none; }

  .lev-sheet {
    display: none;
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 51;
    padding: 14px 16px calc(16px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
    border-radius: 18px 18px 0 0;
    background: var(--panel);
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.5);
  }

  .trade.lev-open .lev-sheet { display: grid; gap: 12px; }
  .trade.lev-open .lev-scrim { display: block; position: fixed; inset: 0; z-index: 50; background: rgba(0, 0, 0, 0.55); }
  .lev-sheet-head { display: flex; align-items: center; justify-content: space-between; }
  .lev-sheet-head .btn-mini { min-height: 40px; padding: 0 16px; }
  .lev-sheet .stats { margin: 0; }
  .lev-sheet .lev-chips button { min-height: 40px; }

  .trade > .jev, .trade > .voice-control { display: contents; }
  .trade .jev > .switch, .trade .voice-control-head { display: none; }
  .trade .jev-line { grid-column: 1 / -1; min-height: 0; margin: 0; font-size: 12px; }
  .trade .jev-line:empty, .trade .voice-control-line { display: none; }

  .m-position {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2px 10px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--panel-2);
  }

  .m-position-id { display: grid; min-width: 0; }
  .m-position-id .muted { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
  .m-position-pnl { align-self: center; font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
  .m-position-pnl[data-tone="up"] { color: var(--long); }
  .m-position-pnl[data-tone="down"] { color: var(--short); }
  .m-position-dist { grid-column: 1 / -1; font-size: 12px; }

  .futures.has-position .trade > .amount-box,
  .futures.has-position .lev-pill,
  .futures.has-position .trade > .quick { display: none; }

  .trade > .actions { gap: 8px; }
  .actions .btn.long, .actions .btn.short, .actions .btn.close {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    height: 60px;
    padding: 0 8px;
    border-radius: 14px;
    font-size: 18px;
    font-weight: 800;
  }

  .actions .btn[hidden] { display: none; }
  .side-liq { display: block; font-size: 11px; font-weight: 600; opacity: 0.75; font-variant-numeric: tabular-nums; }
  .side-liq:empty { display: none; }

  .trade > .note { min-height: 0; font-size: 12px; }
  /* The close result stays in Trades and the chart's settle animation. */
  .trade > .note:empty, .trade > .note[data-settled], .trade > .settlement-receipt { display: none; }

  .trades-handle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    margin: 0 -10px;
    border: 0;
    border-top: 1px solid var(--line);
    border-radius: 0 0 14px 14px;
    background: none;
    color: var(--muted);
    font-size: 13px;
    cursor: pointer;
  }

  .trades-handle span { width: 32px; height: 4px; border-radius: 2px; background: #3a414b; }

  .futures > .trades-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    left: 0;
    margin-bottom: 8px;
  }
}

/* Desktop: the same joined keys, each with icon, title and LED, in place of the switches. */
@media (min-width: 641px) {
  .m-toggles {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-self: start;
    padding: 3px;
    border-radius: 12px;
    background: #08090b;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.8);
  }

  .m-toggle {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 5px;
    min-width: 0;
    height: 64px;
    padding: 6px 2px;
    border: 0;
    border-left: 1px solid #2a3039;
    border-radius: 0;
    background: linear-gradient(#20252d, #14181d);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
    color: #9aa3b0;
    font: inherit;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
  }

  .m-toggle:first-child { border-left: 0; border-radius: 9px 0 0 9px; }
  .m-toggle:last-child { border-radius: 0 9px 9px 0; }
  .m-toggle:hover:not(:disabled) { background: linear-gradient(#262c35, #191d23); }
  .m-toggle:active:not(:disabled) { background: #14181d; box-shadow: none; }
  .m-toggle:focus-visible { position: relative; z-index: 1; outline: 2px solid var(--accent); outline-offset: -2px; }
  .m-toggle:disabled { cursor: default; opacity: 0.55; }
  .m-toggle[aria-pressed="true"], .m-toggle[data-led]:not([data-led="off"]) { color: #e8ecf1; }

  .m-icon { display: block; }
  .m-title { display: block; order: 1; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .m-label { display: none; }

  .m-led {
    --led: #2ecc8f;
    order: 2;
    width: 16px;
    height: 3px;
    border-radius: 2px;
    background: #3a414b;
  }

  .m-toggle[data-led="on"] .m-led,
  .m-toggle[data-led="fallback"] .m-led,
  .m-toggle[data-led="error"] .m-led { background: var(--led); box-shadow: 0 0 8px var(--led); }
  .m-toggle[data-led="fallback"] .m-led { --led: #f5b041; }
  .m-toggle[data-led="error"] .m-led { --led: #f0606a; }
  .m-toggle[data-led="loading"] .m-led,
  .m-toggle[data-led="spin"] .m-led {
    width: 10px;
    height: 10px;
    margin: -3px 0 -4px;
    border-radius: 50%;
    background: conic-gradient(var(--led) var(--led-fill, 0%), #3a414b 0);
    -webkit-mask: radial-gradient(circle, transparent 3px, #000 3.5px);
    mask: radial-gradient(circle, transparent 3px, #000 3.5px);
  }
  .m-toggle[data-led="spin"] .m-led { animation: voice-ring-spin 0.9s linear infinite; }

  body:has(.futures) .sfx-toggle,
  .futures .chart-bar .voice-controls,
  .futures .jev > .switch,
  .futures .voice-control-head { display: none; }
  .futures > .trade > .jev { margin: 12px 0 0; }
  .futures .jev-line { margin: 0; }
  .futures .voice-control-line { margin: 4px 0 10px; }
}

@media (min-width: 1100px) {
  .futures > .m-toggles { grid-column: 2; grid-row: 1; }
  .futures > [data-chart] { grid-column: 1; grid-row: 1 / span 2; }
  .futures > .trade { grid-column: 2; grid-row: 2; align-self: start; }
}