/* ============================================================
   Mobile chrome (redesign): slim top header + bottom tab bar +
   hamburger menu. This is the only exchange chrome at every viewport size;
   larger screens intentionally keep the same mobile experience, centred in a
   phone-width column (see mobile-frame.css).
   Design tokens are the inline values from new-design/ (spec).
   ============================================================ */

/* Hide the menu until it is opened. The remaining mobile chrome is visible
   at every viewport size. */
.mchrome-menu { display: none; }

  /* Hide the legacy chrome only when the new chrome is active (mchrome-on).
     Pages without it — e.g. the guest landing — keep their own header/footer. */
  body.mchrome-on .main-header { display: none !important; }
  body.mchrome-on .footer { display: none !important; }

  /* Offset page content so it clears the fixed header and bottom nav.
     margin-top:0 cancels any top margin a page set for its own desktop header. */
  body.mchrome-on {
    margin-top: 0 !important;
    padding-top: 56px;
    padding-bottom: calc(66px + env(safe-area-inset-bottom, 0px));
    background: #070B11;
  }

  /* root.css reserves 64px on .v-main for the hidden desktop header; the body padding above
     already clears the new one, so that reserve was an empty band on top of every page. */
  body.mchrome-on .v-main { padding-top: 0 !important; }

  /* The support/assistant chat widget is position:fixed at bottom:15px, which the
     60px bottom nav would sit across. Lift both the launcher and the panel clear of it. */
  body.mchrome-on .support-button,
  body.mchrome-on .chat-box { bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }

  /* ---------- Support/assistant launcher ---------- */
  /* The legacy widget ships a flat black square (border-radius 20px on a 50px
     box) with the unread badge pinned at top:80%/right:5%, which leaves it
     hanging half outside the bottom-right corner. Restyle it as a round button
     in the chrome's own accent — the same tokens as .mchrome-menu__panel — with
     the badge tucked into the top-right corner where a badge belongs. */
  body.mchrome-on .support-button {
    width: 52px; height: 52px; min-width: 0; padding: 0;
    border-radius: 50%;
    background: #18BB59;
    box-shadow: 0 8px 22px rgba(24, 187, 89, .28);
    transition: background .15s ease, box-shadow .15s ease, transform .15s ease;
  }
  body.mchrome-on .support-button:hover {
    background: #20CA63;
    box-shadow: 0 10px 26px rgba(24, 187, 89, .38);
  }
  body.mchrome-on .support-button:active { transform: scale(.94); }
  /* The caption only ever fitted the wide legacy pill. */
  body.mchrome-on .support-button p { display: none; }
  /* chat.svg is a white glyph; darken it to read on the green. */
  body.mchrome-on .support-button img {
    width: 24px; height: 24px; margin: 0; filter: brightness(0);
  }

  body.mchrome-on .support-unviewed {
    top: 0; right: 0; transform: translate(30%, -30%);
    width: auto; min-width: 20px; height: 20px; padding: 0 5px;
    font-size: 11px; font-weight: 700; line-height: 16px;
    background: #EB4536;
    border: 2px solid #070B11;
    /* The legacy blink reads as a rendering fault more than as a notification. */
    animation: none;
  }
  body.mchrome-on .support-unviewed > span { line-height: inherit; }

  .mchrome { display: flex; }

  /* Pages that skip root.css (the fully redesigned ones) inherit no global
     reset, so state the chrome's box model here rather than rely on the host. */
  .mchrome-header, .mchrome-menu, .mchrome-nav, .mchrome-dropdown, .mchrome-install,
  .mchrome-header *, .mchrome-menu *, .mchrome-nav *, .mchrome-dropdown *, .mchrome-install *,
  #mchrome-toast, #mchrome-toast * { box-sizing: border-box; }

  /* Force Roboto on the chrome (site default is Inter). MDI glyphs are
     unaffected — the .mdi class sets its own icon font on ::before. */
  .mchrome-header, .mchrome-menu, .mchrome-nav, .mchrome-dropdown, .mchrome-install,
  .mchrome-header *, .mchrome-menu *, .mchrome-nav *, .mchrome-dropdown *, .mchrome-install * {
    font-family: 'Roboto', Helvetica, Arial, sans-serif !important;
  }
  .mchrome-header .mdi, .mchrome-menu .mdi, .mchrome-nav .mdi, .mchrome-dropdown .mdi, .mchrome-install .mdi,
  .mchrome-header .mdi::before, .mchrome-menu .mdi::before,
  .mchrome-nav .mdi::before, .mchrome-dropdown .mdi::before, .mchrome-install .mdi::before {
    font-family: 'Material Design Icons' !important;
  }

  /* ---------- Top header (56px) ---------- */
  .mchrome-header {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1200;
    align-items: center; gap: 14px; height: 56px; padding: 0 14px;
    background: #0A0F15; border-bottom: 1px solid #151B24;
  }
  .mchrome-brand {
    display: flex; align-items: center; gap: 9px; min-width: 0;
    text-decoration: none; color: #EAECEF;
  }
  .mchrome-brand__mark {
    width: 30px; height: 30px; border-radius: 9px; background: #18BB59;
    color: #05130A; display: flex; align-items: center; justify-content: center;
    font-weight: 900; font-size: 16px; overflow: hidden; flex: none;
  }
  .mchrome-brand__mark img { width: 100%; height: 100%; object-fit: cover; }
  /* A long whitelabel name must not push the avatar and burger off the header. */
  .mchrome-brand__name {
    font-size: 16px; font-weight: 700; letter-spacing: -0.2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 42vw;
  }
  .mchrome-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
  .mchrome-avatar {
    width: 30px; height: 30px; border-radius: 50%; background: #1E2632; overflow: hidden;
    display: flex; align-items: center; justify-content: center; flex: none;
  }
  .mchrome-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
  .mchrome-avatar .mdi { font-size: 17px; color: #858C97; }
  .mchrome-lang {
    display: flex; align-items: center; gap: 3px;
    font-size: 13px; font-weight: 700; color: #EAECEF; background: none; border: 0;
    padding: 0; cursor: pointer; font-family: inherit;
  }
  .mchrome-lang .mdi { font-size: 15px; color: #858C97; }
  .mchrome-lang .mdi-web { font-size: 17px; }
  /* Tap targets: keep the hit area >=44px while the glyph stays 22px. */
  .mchrome-iconbtn {
    display: flex; align-items: center; justify-content: center;
    min-width: 30px; height: 44px; margin: -7px 0; cursor: pointer; color: #EAECEF;
  }
  .mchrome-iconbtn .mdi { font-size: 22px; }

  /* ---------- Dropdown (Language) ---------- */
  .mchrome-dropdown {
    position: fixed; top: 52px; z-index: 1250; min-width: 200px;
    background: #11161E; border: 1px solid #1E2632; border-radius: 12px;
    padding: 6px; display: none; box-shadow: 0 12px 30px rgba(0,0,0,0.5);
  }
  .mchrome-dropdown.open { display: block; }
  .mchrome-dropdown a {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 11px 12px; border-radius: 8px; font-size: 14px; color: #EAECEF;
    text-decoration: none;
  }
  .mchrome-dropdown a:active { background: #1A212B; }
  .mchrome-dropdown a .mdi { font-size: 16px; color: #858C97; }
  .mchrome-dropdown a.active { color: #18BB59; }

  /* ---------- Hamburger menu overlay ---------- */
  .mchrome-menu {
    position: fixed; top: 56px; left: 0; right: 0;
    bottom: calc(66px + env(safe-area-inset-bottom, 0px));
    z-index: 1150; background: #070B11; overflow-y: auto; padding: 8px 0;
    display: none;
  }
  .mchrome-menu.open { display: flex; flex-direction: column; }
  /* Rows are <a> for destinations and <button> for group headers and Add to Desktop;
     the reset makes the two indistinguishable. 13px vertical padding (spec: 17px) keeps
     ten top-level rows within one scroll on a phone. */
  .mchrome-menu__item {
    display: flex; align-items: center; gap: 14px; padding: 13px 20px;
    color: #EAECEF; text-decoration: none; cursor: pointer;
    width: 100%; background: none; border: 0; text-align: left; font: inherit; flex: none;
  }
  .mchrome-menu__item:active { background: #0A0F15; }
  .mchrome-menu__item:focus-visible { outline: 2px solid #18BB59; outline-offset: -2px; }
  .mchrome-menu__item.current .mchrome-menu__label { color: #18BB59; }

  /* ---------- Menu groups (accordion) ---------- */
  .mchrome-menu__group { flex: none; }
  .mchrome-menu__group .mchrome-menu__chevron { transition: transform .2s ease; }
  .mchrome-menu__group.open .mchrome-menu__chevron { transform: rotate(180deg); color: #EAECEF; }
  .mchrome-menu__group.open > .mchrome-menu__item .mchrome-menu__icon { background: rgba(24, 187, 89, .12); }
  .mchrome-menu__sub {
    display: none; margin: 0 20px 6px 38px; padding: 2px 0 2px 17px;
    border-left: 1px solid #1E2632;
  }
  .mchrome-menu__group.open .mchrome-menu__sub { display: block; }
  .mchrome-menu__sub a {
    display: flex; align-items: center; min-height: 42px; padding: 0 12px;
    border-radius: 9px; font-size: 14px; color: #B7BDC6; text-decoration: none;
  }
  .mchrome-menu__sub a:active { background: #11161E; }
  .mchrome-menu__sub a.current { color: #18BB59; font-weight: 500; background: rgba(24, 187, 89, .06); }
  .mchrome-menu__icon {
    width: 36px; height: 36px; border-radius: 9px; background: #141A22;
    display: flex; align-items: center; justify-content: center; flex: none;
  }
  .mchrome-menu__icon .mdi { font-size: 19px; color: #18BB59; }
  .mchrome-menu__label { font-size: 15px; font-weight: 500; flex: 1; }
  .mchrome-menu__chevron { font-size: 18px; color: #858C97; }
  .mchrome-menu__panel {
    min-height: 54px; margin: 8px 16px 12px; padding: 9px 12px; width: auto;
    border: 1px solid rgba(24, 187, 89, .65); border-radius: 13px;
    background: #18BB59; color: #05130A;
    box-shadow: 0 10px 28px rgba(24, 187, 89, .18);
  }
  .mchrome-menu__panel:active { background: #20CA63; }
  .mchrome-menu__panel .mchrome-menu__icon {
    background: rgba(5, 19, 10, .12);
  }
  .mchrome-menu__panel .mchrome-menu__icon .mdi,
  .mchrome-menu__panel .mchrome-menu__chevron { color: #05130A; }
  .mchrome-menu__panel .mchrome-menu__label { font-weight: 700; }
  .mchrome-menu__logout {
    min-height: 54px; margin: auto 16px 8px; padding: 9px 12px; width: auto;
    border: 1px solid rgba(235, 69, 54, .28); border-radius: 13px;
    background: rgba(235, 69, 54, .07); color: #F07167;
  }
  .mchrome-menu__logout:active { background: rgba(235, 69, 54, .14); }
  .mchrome-menu__logout .mchrome-menu__icon { background: rgba(235, 69, 54, .1); }
  .mchrome-menu__logout .mchrome-menu__icon .mdi,
  .mchrome-menu__logout .mchrome-menu__chevron { color: #F07167; }
  .mchrome-menu__logout .mchrome-menu__label { font-weight: 700; }

  /* ---------- Bottom tab bar (60px + 6px safe area) ---------- */
  .mchrome-nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1200;
    align-items: stretch; height: 60px; padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid #151B24; background: #0A0F15;
  }
  .mchrome-nav__item {
    flex: 1; display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 3px; color: #5B6472; text-decoration: none;
  }
  .mchrome-nav__item .mdi { font-size: 22px; line-height: 1; }
  .mchrome-nav__item span { font-size: 10px; font-weight: 500; }
  .mchrome-nav__item.active { color: #EAECEF; }

  /* Sage — the one raised tab. The disc lifts out of the bar and keeps its accent
     whether or not the tab is current, so it reads as the thing to reach for
     rather than a fifth equal link. The bar does not clip it: .mchrome-nav has no
     overflow, so the disc is free to sit above the top edge. */
  .mchrome-nav__item--sage { position: relative; color: #EAECEF; }
  .mchrome-nav__fab {
    width: 42px; height: 42px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin-top: -20px; margin-bottom: 1px;
    background: linear-gradient(150deg, #18BB59, #0E8F41);
    border: 3px solid #0A0F15;
    box-shadow: 0 6px 16px rgba(24, 187, 89, .34);
    transition: transform .15s ease, box-shadow .15s ease;
  }
  .mchrome-nav__fab .mdi { font-size: 21px; color: #05130A; }
  .mchrome-nav__item--sage:active .mchrome-nav__fab { transform: scale(.92); }
  .mchrome-nav__item--sage.active .mchrome-nav__fab {
    box-shadow: 0 0 0 3px rgba(24, 187, 89, .22), 0 6px 18px rgba(24, 187, 89, .42);
  }
  .mchrome-nav__item--sage span { color: #18BB59; font-weight: 700; }
  /* A domain can give the assistant its own logo and name. The logo fills the disc; a long
     name is cut short rather than pushing the neighbouring tabs aside. */
  .mchrome-nav__fab { overflow: hidden; }
  .mchrome-nav__fab-img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .mchrome-nav__label { display: block; max-width: 76px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* ---------- Add to Desktop sheet ---------- */
  .mchrome-install {
    position: fixed; inset: 0; z-index: 1400; display: none;
    background: rgba(2, 4, 7, .62); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
    color: #EAECEF;
  }
  .mchrome-install.open { display: flex; align-items: flex-end; justify-content: center; }
  .mchrome-install__sheet {
    position: relative; width: 100%; max-height: 90vh; overflow-y: auto;
    background: #0D1219; border-top: 1px solid #1E2632; border-radius: 22px 22px 0 0;
    padding: 6px 18px calc(22px + env(safe-area-inset-bottom, 0px));
    animation: mchrome-sheet-in .24s cubic-bezier(.2, .8, .2, 1);
  }
  @keyframes mchrome-sheet-in { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
  @media (prefers-reduced-motion: reduce) { .mchrome-install__sheet { animation: none; } }
  .mchrome-install__grab { width: 38px; height: 4px; border-radius: 999px; background: #2A3441; margin: 6px auto 10px; }
  .mchrome-install__close {
    position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 50%;
    border: 0; background: #151B24; color: #B7BDC6; display: flex; align-items: center; justify-content: center; cursor: pointer;
  }
  .mchrome-install__close .mdi { font-size: 18px; }

  .mchrome-install__hero { display: flex; align-items: center; gap: 14px; padding: 8px 44px 18px 0; }
  .mchrome-install__app {
    width: 56px; height: 56px; border-radius: 15px; flex: none; overflow: hidden;
    background: #18BB59; color: #05130A; font-weight: 900; font-size: 26px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 8px 22px rgba(24, 187, 89, .22), inset 0 0 0 1px rgba(255, 255, 255, .06);
  }
  .mchrome-install__app img { width: 100%; height: 100%; object-fit: cover; }
  .mchrome-install__title { font-size: 17px; font-weight: 700; line-height: 1.3; }
  .mchrome-install__sub { font-size: 12.5px; color: #858C97; margin-top: 3px; line-height: 1.4; }

  .mchrome-install [data-install-state] { display: none; }
  .mchrome-install[data-state="guide"] [data-install-state="guide"],
  .mchrome-install[data-state="installed"] [data-install-state="installed"] { display: block; }
  .mchrome-install__done {
    background: rgba(24, 187, 89, .08); border: 1px solid rgba(24, 187, 89, .3); border-radius: 14px;
    padding: 14px; font-size: 13.5px; color: #B7BDC6;
  }
  .mchrome-install[data-state="installed"] .mchrome-install__done { display: flex; align-items: center; gap: 10px; }
  .mchrome-install__done .mdi { font-size: 22px; color: #18BB59; }

  .mchrome-install__native {
    display: none; width: 100%; height: 50px; border: 0; border-radius: 999px; cursor: pointer;
    background: #18BB59; color: #05130A; font-size: 15px; font-weight: 700;
    align-items: center; justify-content: center; gap: 8px; margin-bottom: 18px;
  }
  .mchrome-install__native .mdi { font-size: 20px; }
  .mchrome-install__native:active { background: #20CA63; }
  .mchrome-install.can-prompt .mchrome-install__native { display: flex; }

  .mchrome-install__tabs {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px;
    background: #11161E; border-radius: 12px; margin-bottom: 14px;
  }
  .mchrome-install__tabs button {
    height: 36px; border: 0; border-radius: 9px; background: none; cursor: pointer;
    color: #858C97; font-size: 13px; font-weight: 500;
    display: flex; align-items: center; justify-content: center; gap: 5px;
  }
  .mchrome-install__tabs button .mdi { font-size: 16px; }
  .mchrome-install__tabs button.active { background: #1E2632; color: #EAECEF; font-weight: 700; }

  .mchrome-install__steps { list-style: none; margin: 0; padding: 0; display: none; }
  .mchrome-install__steps.active { display: block; }
  .mchrome-install__steps li {
    display: flex; align-items: center; gap: 12px; padding: 12px;
    background: #11161E; border-radius: 12px; margin-bottom: 8px;
    font-size: 13.5px; line-height: 1.4; color: #B7BDC6;
  }
  .mchrome-install__steps li b { color: #EAECEF; font-weight: 700; }
  .mchrome-install__steps li > span:nth-child(2) { flex: 1; }
  .mchrome-install__n {
    width: 26px; height: 26px; border-radius: 50%; flex: none;
    background: rgba(24, 187, 89, .12); color: #18BB59; font-size: 12px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
  }
  .mchrome-install__glyph {
    width: 34px; height: 34px; border-radius: 9px; flex: none; background: #1A212B;
    display: flex; align-items: center; justify-content: center;
  }
  .mchrome-install__glyph .mdi { font-size: 19px; color: #EAECEF; }
  .mchrome-install__warn { display: none !important; }
  .mchrome-install.ios-other .mchrome-install__warn {
    display: flex !important; background: rgba(232, 178, 58, .08) !important;
    border: 1px solid rgba(232, 178, 58, .28); color: #E8C27A !important;
  }
  .mchrome-install__warn .mchrome-install__n { background: rgba(232, 178, 58, .14); color: #E8B23A; }
  .mchrome-install__warn .mchrome-install__n .mdi { font-size: 16px; }

  /* ---------- Toast ---------- */
  /* Positioned from the stylesheet rather than inline so mobile-frame.css can
     re-centre it on the desktop frame; mobile-chrome.js only builds the
     elements. */
  #mchrome-toast {
    position: fixed; left: 0; right: 0; bottom: 84px; z-index: 2000;
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 0 16px; pointer-events: none;
  }
  .mchrome-toast__msg {
    max-width: 340px; background: #11161E; color: #EAECEF;
    border: 1px solid #1E2632; border-radius: 12px; padding: 12px 16px;
    font: 500 13px Roboto, Helvetica, Arial, sans-serif;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .45); transition: opacity .3s;
  }
  .mchrome-toast__msg.success { border-color: #18BB59; }
  .mchrome-toast__msg.error { border-color: #EB4536; }

  /* ---------- Number fields ---------- */
  /* Amount fields are type=number for the decimal keypad on phones, which also brings the
     desktop spinner arrows — they landed on top of the MAX button on Transfer, and nobody
     adjusts a crypto amount in steps of 1 anyway. The keypad stays; the arrows go. */
  body.mchrome-on input[type="number"]::-webkit-outer-spin-button,
  body.mchrome-on input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
  }
  body.mchrome-on input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
  }