:root {
    --slate: #2f3f54;
    --light: #f5f6f8;
    --text: #1e2228;
    --white: #ffffff;
    --chip: #f1c84c;
    --chipText: #2b2b2b;
    --sidebar-w: 320px;
    --elev: 0 10px 30px rgba(0, 0, 0, .35);
    --overlay: rgba(0, 0, 0, .48);
    --radius: 12px;
    --speed: .28s;
    --focus: #6ea8fe;
  }
  
  /* Base helpers (btn only) */
  .btn-mobile {
    appearance: none;
    border: 0;
    border-radius: 10px;
    padding: 10px 14px;
    background: #1f232b;
    color: #fff;
    cursor: pointer;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
  }
  .btn-mobile:hover { background: #2a2f3a; }
  .btn-mobile:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
  .btn--primary-mobile { background: var(--focus); color: #0b1324; }
  .btn--secondary-mobile { background: #1f232b; }
  
  /* Arrow tab (trigger) */
  .sidebar-tab-mobile {
    position: fixed;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    z-index: 61;
    width: 40px;
    height: 44px;
    border: 0;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    background: var(--slate);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .25);
  }
  .sidebar-tab-mobile:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
  }
  
  /* Rotate chevron when open (root class toggled by JS) */
  .sidebar-open-mobile .sidebar-tab-mobile svg {
    transform: rotate(180deg);
    transition: transform var(--speed) ease;
  }
  
  /* Slide the tab left so it sits against the open panel */
  .sidebar-open-mobile .sidebar-tab-mobile {
    right: var(--sidebar-w);
  }
  
  /* Overlay */
  .sidebar-overlay-mobile {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: var(--overlay);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--speed) ease;
    z-index: 57;
  }
  
  /* Sidebar panel (right) */
  .sidebar-mobile {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 0;
    background: var(--white);
    color: var(--text);
    z-index: 70;
    transform: translateX(113%);
    transition: width 1.3s, transform 0.3s;
    display: flex;
    flex-direction: column;
    will-change: width, transform;
  }
  
  /* Header bar */
  .sidebar-header-mobile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0px 15px;
    background: var(--slate);
    color: #fff;
  }
  
  .sidebar-title-mobile { margin: 0; font-size: 1.05rem; }
  
  /* Icon button */
  .icon-btn-mobile {
    appearance: none;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    padding: 8px;
    border-radius: 10px;
    line-height: 10px;
  }
  .icon-btn-mobile:hover { background: rgba(255, 255, 255, .12); }
  /* remove focus ring when focus is NOT keyboard-driven */
  .icon-btn-mobile:focus:not(:focus-visible) {
    outline: none;
  }
  .icon-btn-mobile:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
  
  /* Content area */
  .sidebar-content-mobile {
    flex: 1 1 auto;
    overflow: clip;
    background: var(--light);
    padding: 12px;
    display: contents;
    gap: 12px;
  }
  
  /* Footer */
  .sidebar-footer-mobile {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px;
    background: #fff;
    border-top: 1px solid rgba(0, 0, 0, .06);
  }
  
  /* Responsiveness */
  @media (max-width: 767px) { /* unchanged rules omitted */ }
  
  .sidebar-right-desktop { /* left untouched on purpose */ display: block; }
  /* .sidebar-right-mobile { display: none; } */
  
  @media (max-width: 991.98px) {
    .sidebar-right-desktop { display: none; }
    .sidebar-right-mobile { display: block; }
  }
  
  @media only screen and (min-width: 1024px) {
    .sidebar-right-mobile {
        display: block;
    }

    #sidebarTab-mobile {
        transform: rotate(180deg) translateY(-50%);
        transform-origin: center;
        left: 0;
        right: unset;
    }

    .sidebar-open-mobile .sidebar-tab-mobile {
        right: unset;
        left: var(--sidebar-w) !important;
    }
    .sidebar-mobile {
      
    }
    .sidebar-mobile.is-open {
        transform: translateX(-70px);
        transition: width 0s, transform 0.3s;
        transition-delay: 0.3s;
        width: 340px;
        box-shadow: -3px 0px 15px 0px #2b2b2b;
    }
}

@media only screen and (max-width: 1024px) {
    .sidebar-mobile {
      z-index: 9999999;
    }
    .sidebar-mobile.is-open {
        transform: translateX(0px);
        transition: width 0s, transform 0.3s;
        width: 340px;
    }
    .sidebar-overlay-mobile.is-open {
    opacity: 1;
    pointer-events: auto;
    }
}

.real-sidebar-tab-mobile,
.real-sidebar-overlay-mobile,
.real-sidebar-mobile { display: none; }

@media (max-width: 1024px) {
  /* show only on mobile */
  :is(.real-sidebar-tab-mobile,.real-sidebar-overlay-mobile,.real-sidebar-mobile){ display: block; }

  /* ---------- Overlay ---------- */
  .real-sidebar-overlay-mobile{
    position: fixed;
    inset: 0;
    z-index: 999996;
    background: var(--overlay);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--speed) ease;
  }
  .real-sidebar-overlay-mobile.is-open{
    opacity: 1;
    pointer-events: auto;
  }

  /* ---------- Panel ---------- */
  .real-sidebar-mobile{
    position: fixed;
    inset: 0 0 0 auto;
    z-index: 999998;
    width: 0;
    height: 100%;
    background: var(--white);
    color: var(--text);
    display: flex;
    flex-direction: column;
    transform: translate3d(105%, 0, 0);
    transition: width 1.3s, transform 0.3s;
    will-change: width, transform;
    margin-bottom: calc(0px + env(safe-area-inset-bottom));
  }
  .real-sidebar-mobile.is-open{
    transform: translate3d(0, 0, 0);
    width: var(--sidebar-w);
    transition: width 0s, transform 0.3s;
  }

  /* ---------- Header ---------- */
  .real-sidebar-header-mobile{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding: 0px 15px;
    background: var(--slate);
    color: #fff;
  }
  .real-sidebar-title-mobile{ margin: 0; font-size: 1.05rem; }

  .real-sidebar-close-mobile{
    appearance:none;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    padding: 8px;
    border-radius: 10px;
    line-height: 10px;
  }
  .real-sidebar-close-mobile:hover{ background: rgba(255,255,255,.12); }
  .real-sidebar-close-mobile:focus-visible{ outline: 3px solid var(--focus); outline-offset: 2px; }

  /* ---------- Content (scroll only; no typography overrides) ---------- */
  .real-sidebar-content-mobile{
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--light);
    padding: 10px 10px 70px 10px;
    padding-bottom: calc(59px + env(safe-area-inset-bottom));
    overflow-x: hidden;
    scrollbar-color: #ffc037 transparent;
    scrollbar-width: thin;
  }
  .real-sidebar-content-mobile img{ max-width: 100%; height: auto; }
  .real-sidebar-content-mobile::after{ content:""; display:block; clear:both; }

  /* ---------- Tab trigger (compositor-friendly) ---------- */
  .real-sidebar-tab-mobile{
    position: fixed;
    top: 50%;
    top: 50lvh;
    right: 0;
    z-index: 999997;
    border: 0;
    border-top-left-radius: 7px;
    border-bottom-left-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #ffc037;
    background: #33333377; /* slate translucent */
    
    
    
    

    /* animate ONLY using transform */
    transition: transform var(--speed) ease, background var(--speed) ease, opacity var(--speed) ease;
    will-change: transform;
    padding: 10px 0px;
  }
  .real-sidebar-tab-mobile:hover{background: #333333;}
  .real-sidebar-tab-mobile:focus-visible{ outline: 3px solid var(--focus); outline-offset: 2px; }

  /* Chevron rotation */
  .real-sidebar-tab-icon{
    transition: transform var(--speed) ease;
    transform-origin: 50% 50%;
    will-change: transform;
    width: 30px;
    height: 30px;
  }
  .real-sidebar-tab-mobile.is-open .real-sidebar-tab-icon{
    transform: rotate(180deg);
  }

  /* When open, slide tab left by panel width (transform-based, no layout) */
  .real-sidebar-tab-mobile.is-open{
    transform: translate3d(calc(-1 * var(--sidebar-w)), -50%, 0);
  }
}