/* Mobile full menu drawer overrides. Kept separate so it loads after the legacy details-based menu styles. */

.bk-mobile-menu-layer {
  display: none;
}

@media (max-width: 767px) {
  .bk-mobile-top-actions {
    display: flex;
    align-items: center;
    gap: var(--bk-space-2);
  }

  .bk-mobile-menu-trigger {
    width: 48px;
    min-width: 48px;
    height: 48px;
    border-radius: 16px;
    border-color: rgba(96, 165, 250, .46);
    color: var(--bk-text);
    background: linear-gradient(135deg, rgba(37, 99, 235, .34), rgba(34, 211, 238, .18));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 12px 26px rgba(37, 99, 235, .2);
  }

  .bk-mobile-menu-trigger span {
    font-size: 1.32rem;
    line-height: 1;
  }

  .bk-mobile-menu-layer {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: block;
    pointer-events: none;
    visibility: hidden;
  }

  .bk-mobile-menu-layer.is-open {
    pointer-events: auto;
    visibility: visible;
  }

  .bk-mobile-menu-backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    padding: 0;
    border-radius: 0;
    background: rgba(0, 0, 0, .36);
    opacity: 0;
    transition: opacity .2s ease;
  }

  .bk-mobile-menu-layer.is-open .bk-mobile-menu-backdrop {
    opacity: 1;
  }

  .bk-mobile-menu-panel {
    position: absolute;
    top: calc(var(--bk-space-3) + env(safe-area-inset-top));
    right: var(--bk-space-3);
    bottom: calc(var(--bk-space-3) + env(safe-area-inset-bottom));
    z-index: 1;
    width: min(390px, calc(100vw - var(--bk-space-6)));
    max-width: calc(100vw - var(--bk-space-6));
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: var(--bk-space-3);
    padding: var(--bk-space-4);
    border: 1px solid rgba(96, 165, 250, .32);
    border-radius: 26px;
    background:
      radial-gradient(circle at 18% 0%, rgba(37, 99, 235, .22), transparent 34%),
      linear-gradient(180deg, rgba(18, 28, 48, .98), rgba(8, 13, 26, .99));
    box-shadow: 0 26px 80px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .08);
    transform: translateX(calc(100% + var(--bk-space-5)));
    transition: transform .22s ease;
    overflow: hidden;
  }

  .bk-mobile-menu-layer.is-open .bk-mobile-menu-panel {
    transform: translateX(0);
  }

  .bk-mobile-menu-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--bk-space-3);
    padding-bottom: var(--bk-space-3);
    border-bottom: 1px solid rgba(148, 163, 184, .18);
  }

  .bk-mobile-menu-head strong,
  .bk-mobile-menu-head .bk-meta {
    color: var(--bk-text);
  }

  .bk-mobile-menu-head .bk-icon-button {
    width: 40px;
    min-width: 40px;
    min-height: 40px;
    height: 40px;
    border-radius: 14px;
    color: var(--bk-text);
    border-color: rgba(148, 163, 184, .28);
    background: rgba(255, 255, 255, .06);
    font-size: 1.2rem;
  }

  .bk-mobile-menu-list {
    display: grid;
    align-content: start;
    gap: var(--bk-space-2);
    overflow: auto;
    padding-right: 2px;
  }

  .bk-mobile-menu-list .bk-nav-item {
    min-height: 48px;
    width: 100%;
    color: var(--bk-text);
    border-color: rgba(148, 163, 184, .16);
    background: rgba(255, 255, 255, .035);
    opacity: 1;
  }

  .bk-mobile-menu-list .bk-nav-item span {
    color: var(--bk-text);
    opacity: 1;
  }

  .bk-mobile-menu-list .bk-nav-item .bk-nav-icon {
    opacity: .95;
  }

  .bk-mobile-menu-list .bk-nav-item[aria-current="page"] {
    border-color: rgba(56, 189, 248, .52);
    background: linear-gradient(135deg, rgba(37, 99, 235, .26), rgba(34, 211, 238, .12));
    box-shadow: inset 3px 0 0 rgba(56, 189, 248, .9);
  }

  .bk-mobile-menu-workspace {
    padding: var(--bk-space-3);
    border-color: rgba(96, 165, 250, .2);
    background: rgba(255, 255, 255, .045);
  }

  .bk-mobile-menu-workspace strong,
  .bk-mobile-menu-workspace .bk-meta {
    color: var(--bk-text);
  }
}