/* ============================================================
   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;
  }

  /* 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-header *, .mchrome-menu *, .mchrome-nav *, .mchrome-dropdown *,
  #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-header *, .mchrome-menu *, .mchrome-nav *, .mchrome-dropdown * {
    font-family: 'Roboto', Helvetica, Arial, sans-serif !important;
  }
  .mchrome-header .mdi, .mchrome-menu .mdi, .mchrome-nav .mdi, .mchrome-dropdown .mdi,
  .mchrome-header .mdi::before, .mchrome-menu .mdi::before,
  .mchrome-nav .mdi::before, .mchrome-dropdown .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 {
    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 img { width: 100%; height: 100%; object-fit: cover; }
  .mchrome-history {
    display: flex; align-items: center; font-size: 13px; font-weight: 700;
    color: #EAECEF; background: none; border: 0; padding: 0; cursor: pointer;
    font-family: inherit;
  }
  .mchrome-history .mdi { font-size: 15px; color: #858C97; }
  .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 {
    font-size: 13px; font-weight: 700; color: #EAECEF; background: none; border: 0;
    padding: 0; cursor: pointer; font-family: inherit;
  }
  /* 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 (History / 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; }
  .mchrome-menu__item {
    display: flex; align-items: center; gap: 14px; padding: 17px 20px;
    color: #EAECEF; text-decoration: none; cursor: pointer;
  }
  .mchrome-menu__item:active { background: #0A0F15; }
  .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;
    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;
    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; }

  /* ---------- 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; }