/* KLAK Mobile Batch B — 2026-10-24.
   Visual corrections only; no wallet, order, fee, header, or component JavaScript changes.
   Applies AFTER Batch A and corrects its overly broad active-Trade treatment. */
@media (max-width: 767px) {
  /* B1: remove Batch A's active-only band / indicator. Respect the original
     active route text treatment; the center Trade icon is accented on EVERY tab. */
  :is(.v3-trading-shell, .v3-public-shell) .klak-mobile-app-nav .klak-mobile-app-link[href="/trade"].active {
    background: transparent !important;
    border-radius: 6px;
    color: var(--klak-orange, #f69b32) !important;
  }
  :is(.v3-trading-shell, .v3-public-shell) .klak-mobile-app-nav .klak-mobile-app-link[href="/trade"].active::before {
    content: none !important;
    display: none !important;
    background: none !important;
  }

  /* B2: a restrained floating badge around the MIDDLE Trade glyph—not an
     active tab highlight. Same appearance on Home, Markets, Trade and Assets. */
  :is(.v3-trading-shell, .v3-public-shell) .klak-mobile-app-nav .klak-mobile-app-link[href="/trade"] {
    position: relative;
    isolation: isolate;
    overflow: visible;
    background: transparent !important;
  }
  :is(.v3-trading-shell, .v3-public-shell) .klak-mobile-app-nav .klak-mobile-app-link[href="/trade"]::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: 50%;
    top: -5px;
    width: 37px;
    height: 35px;
    box-sizing: border-box;
    transform: translateX(-50%);
    border-radius: 12px;
    border: 1px solid rgba(246, 157, 53, .38);
    background: linear-gradient(160deg, #39291c 0%, #251e17 68%, #1c1d20 100%);
    box-shadow: 0 2px 10px rgba(240, 143, 36, .11), inset 0 1px rgba(255, 200, 123, .10);
    pointer-events: none;
  }
  :is(.v3-trading-shell, .v3-public-shell) .klak-mobile-app-nav .klak-mobile-app-link[href="/trade"] svg {
    position: relative;
    z-index: 1;
    color: #f3b15a;
    transform: translateY(-3px);
  }
  :is(.v3-trading-shell, .v3-public-shell) .klak-mobile-app-nav .klak-mobile-app-link[href="/trade"] span {
    position: relative;
    z-index: 1;
    margin-top: -3px;
  }

  /* B3: lift the entire Share Studio into a centered, viewport-safe dialog
     instead of burying a short bottom sheet under the phone controls. */
  .klak-studio-backdrop:has(> .klak-studio.klak7k3-compact.klak-bx-studio) {
    align-items: center !important;
    justify-content: center !important;
    padding: max(9px, env(safe-area-inset-top, 0px)) 0 max(12px, env(safe-area-inset-bottom, 0px)) !important;
    box-sizing: border-box;
  }
  .klak-studio.klak7k3-compact.klak-bx-studio {
    height: min(86dvh, 740px) !important;
    max-height: min(86dvh, 740px) !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    border-radius: 20px !important;
  }
  .klak-studio.klak7k3-compact.klak-bx-studio .klak-studio-header {
    flex: 0 0 auto !important;
    padding: 11px 14px 8px !important;
  }
  .klak-studio.klak7k3-compact.klak-bx-studio .klak-studio-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior-y: contain;
    padding: 0 9px 4px !important;
  }
  .klak-studio.klak7k3-compact.klak-bx-studio .klak-studio-gallery {
    flex: 0 0 auto !important;
    padding: 4px 5px 0 !important;
    min-height: 0;
  }
  .klak-studio.klak7k3-compact.klak-bx-studio .klak7k3-picker-stage {
    min-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .klak-studio.klak7k3-compact.klak-bx-studio .klak7k3-picker-art {
    min-height: 0 !important;
    overflow: visible !important;
  }
  .klak-studio.klak7k3-compact.klak-bx-studio .klak7k3-picker-art > :is(canvas, img) {
    height: auto !important;
    width: auto !important;
    max-height: min(40dvh, 380px) !important;
    max-width: 100% !important;
    object-fit: contain !important;
  }
  .klak-studio.klak7k3-compact.klak-bx-studio .klak-studio-settings {
    flex: 0 0 auto !important;
    padding: 0 5px 4px !important;
  }
  .klak-studio.klak7k3-compact.klak-bx-studio .klak7k3-controls {
    padding-top: 5px !important;
    margin-top: 2px !important;
  }
  .klak-studio.klak7k3-compact.klak-bx-studio .klak-studio-footer {
    flex: 0 0 auto !important;
    margin-top: auto;
    padding: 8px 10px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    position: relative;
    z-index: 2;
  }
  .klak-studio.klak7k3-compact.klak-bx-studio .klak-studio-download {
    flex: 1 1 100% !important;
    min-height: 46px;
  }
}

/* On a short phone or landscape view, the canvas shrinks before the footer
   does. The customization panel may scroll, but export is never clipped. */
@media (max-width: 767px) and (max-height: 680px) {
  .klak-studio.klak7k3-compact.klak-bx-studio .klak7k3-picker-art > :is(canvas, img) {
    max-height: min(34dvh, 255px) !important;
  }
  .klak-studio.klak7k3-compact.klak-bx-studio .klak-studio-header {
    padding: 7px 12px 5px !important;
  }
}
@media (max-width: 767px) and (max-height: 480px) {
  .klak-studio.klak7k3-compact.klak-bx-studio .klak7k3-picker-art > :is(canvas, img) {
    max-height: min(27dvh, 150px) !important;
  }
}
@media (max-width: 767px) {
  html[data-klak-theme="light"] :is(.v3-trading-shell, .v3-public-shell) .klak-mobile-app-nav .klak-mobile-app-link[href="/trade"]::after {
    border-color: rgba(185, 108, 29, .39);
    background: linear-gradient(160deg, #fff6e9, #f7e6d2);
    box-shadow: 0 2px 10px rgba(167, 100, 25, .10);
  }
  html[data-klak-theme="light"] :is(.v3-trading-shell, .v3-public-shell) .klak-mobile-app-nav .klak-mobile-app-link[href="/trade"].active {
    background: transparent !important;
    color: var(--klak-orange, #a84e00) !important;
  }
  html[data-klak-theme="light"] :is(.v3-trading-shell, .v3-public-shell) .klak-mobile-app-nav .klak-mobile-app-link[href="/trade"] svg {
    color: #aa5915;
  }
}
@media (prefers-reduced-motion: reduce) {
  :is(.v3-trading-shell, .v3-public-shell) .klak-mobile-app-nav .klak-mobile-app-link[href="/trade"] svg {
    transition: none !important;
  }
}