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

  .mchrome { display: flex; }

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