/* The phone's sliding sidebar (mobileSidebar.js, David 2026-11-02, as the
   Claude app has it). One position drives everything (2026-11-03, David: "more
   seamless"): --ms-x is how far the page has moved right (0 closed, the
   sidebar's width open, the finger's place mid-swipe) and --ms-p the same as a
   fraction. The sidebar rides on the page's left edge, and the page's menu
   button, status-bar frost, corners, shadow and dim all move with it on one
   curve. A swipe sets --ms-drawer-x/--ms-drawer-p; letting go runs the same
   curve from the finger, timed to its speed (--ms-drawer-dur). The page keeps
   its transform until the close has finished sliding (ms-drawer-settling). */
.ms-drawer, .ms-drawer-scrim, .ms-menu-btn { display: none; }
@media (max-width: 768px) {
  .kairos-redesign {
    --ms-drawer-w: min(84vw, 330px); --ms-drawer-ease: cubic-bezier(.32, .72, 0, 1); --ms-drawer-dur: 420ms;
    --ms-x: 0px; --ms-p: 0;
  }
  .kairos-redesign.ms-drawer-open { --ms-x: var(--ms-drawer-w); --ms-p: 1; }
  .kairos-redesign.ms-drawer-dragging { --ms-x: var(--ms-drawer-x, 0px); --ms-p: var(--ms-drawer-p, 0); }

  .kairos-redesign .ms-drawer {
    position: fixed; z-index: 1160; top: 0; left: 0; bottom: calc(0px - var(--ms-below-fold, 0px)); width: var(--ms-drawer-w);
    display: flex; flex-direction: column; box-sizing: border-box;
    padding: calc(var(--mobile-safe-top, env(safe-area-inset-top, 0px)) + 14px) 14px calc(max(16px, var(--mobile-safe-bottom, env(safe-area-inset-bottom, 0px))));
    background: var(--rd-ground); color: var(--rd-ink); font-family: var(--rd-font-ui);
    transform: translateX(calc(var(--ms-x) - 100%)); visibility: hidden;
    transition: transform var(--ms-drawer-dur) var(--ms-drawer-ease), visibility 0s var(--ms-drawer-dur);
  }
  .kairos-redesign:is(.ms-drawer-open, .ms-drawer-dragging) .ms-drawer { visibility: visible; transition: transform var(--ms-drawer-dur) var(--ms-drawer-ease), visibility 0s; }

  /* The page: slides aside with rounded corners and a shadow while the sidebar is open. */
  .kairos-redesign #content {
    transition: transform var(--ms-drawer-dur) var(--ms-drawer-ease), border-radius var(--ms-drawer-dur) var(--ms-drawer-ease), box-shadow var(--ms-drawer-dur) var(--ms-drawer-ease);
  }
  .kairos-redesign:is(.ms-drawer-open, .ms-drawer-dragging, .ms-drawer-settling) #content {
    transform: translateX(var(--ms-x)); border-radius: calc(28px * var(--ms-p)); overflow: hidden;
    box-shadow: -10px 0 40px rgba(var(--shade-rgb), calc(.18 * var(--ms-p)));
  }
  /* What sits over the page outside it moves with it. */
  .kairos-redesign :is(.ms-global-frost, .ms-menu-btn) { transition: transform var(--ms-drawer-dur) var(--ms-drawer-ease); }
  .kairos-redesign:is(.ms-drawer-open, .ms-drawer-dragging, .ms-drawer-settling) :is(.ms-global-frost, .ms-menu-btn) { transform: translateX(var(--ms-x)); }

  /* The dim over the page, and the tap target that closes the sidebar. */
  .kairos-redesign .ms-drawer-scrim {
    display: block; position: fixed; z-index: 1155; top: 0; left: 0; width: 100%; bottom: calc(0px - var(--ms-below-fold, 0px));
    border-radius: calc(28px * var(--ms-p)); background: rgba(var(--shade-rgb), .22);
    transform: translateX(var(--ms-x)); opacity: 0; visibility: hidden; pointer-events: none;
    transition: transform var(--ms-drawer-dur) var(--ms-drawer-ease), border-radius var(--ms-drawer-dur) var(--ms-drawer-ease),
      opacity var(--ms-drawer-dur) var(--ms-drawer-ease), visibility 0s var(--ms-drawer-dur);
  }
  .kairos-redesign.ms-drawer-open .ms-drawer-scrim {
    opacity: 1; visibility: visible; pointer-events: auto;
    transition: transform var(--ms-drawer-dur) var(--ms-drawer-ease), border-radius var(--ms-drawer-dur) var(--ms-drawer-ease),
      opacity var(--ms-drawer-dur) var(--ms-drawer-ease), visibility 0s;
  }
  .kairos-redesign.ms-drawer-dragging .ms-drawer-scrim { opacity: var(--ms-p); visibility: visible; }
  /* Swipe back on a pushed page (2026-11-03): the page follows the finger right
     (--ms-back-x), slides off as its Back runs, or eases back if let go short. */
  .kairos-redesign:is(.ms-back-dragging, .ms-back-leaving, .ms-back-return) :is(#content, .ms-global-frost) { transform: translateX(var(--ms-back-x, 0px)); }
  .kairos-redesign:is(.ms-back-dragging, .ms-back-leaving, .ms-back-return) #content { box-shadow: -12px 0 32px rgba(var(--shade-rgb), .16); }
  .kairos-redesign.ms-back-dragging :is(#content, .ms-global-frost) { transition: none; }
  .kairos-redesign:is(.ms-back-leaving, .ms-back-return) :is(#content, .ms-global-frost) { transition: transform var(--ms-back-dur, 300ms) var(--ms-drawer-ease); }
  /* Under the finger nothing eases. */
  .kairos-redesign.ms-drawer-dragging :is(.ms-drawer, #content, .ms-drawer-scrim, .ms-global-frost, .ms-menu-btn) { transition: none; }

  .kairos-redesign .ms-drawer-brand { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 10px; margin-bottom: 14px; }
  .kairos-redesign .ms-drawer-brand svg { flex: none; width: 30px; height: 30px; }
  .kairos-redesign .ms-drawer-brand span { font: italic 600 26px/1 var(--rd-font-title); letter-spacing: .01em; }

  .kairos-redesign .ms-drawer-nav { display: flex; flex-direction: column; gap: 2px; min-height: 0; overflow-y: auto; }
  .kairos-redesign .ms-drawer-row {
    position: relative; display: flex; align-items: center; gap: 14px; min-height: 48px; padding: 0 12px;
    border: 0; border-radius: 16px; background: transparent; color: var(--rd-ink);
    font: 500 16px/1.2 var(--rd-font-ui); text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .kairos-redesign .ms-drawer-row[hidden] { display: none; }
  .kairos-redesign .ms-drawer-row svg { flex: none; width: 22px; height: 22px; color: var(--rd-ink-dim); }
  .kairos-redesign .ms-drawer-row:active { background: var(--rd-surface-2); }
  .kairos-redesign .ms-drawer-row[aria-current=page] { background: var(--rd-surface-solid); font-weight: 600; box-shadow: inset 0 0 0 1px var(--rd-line); }
  .kairos-redesign .ms-drawer-row[aria-current=page] svg { color: var(--rd-ink); }
  .kairos-redesign .ms-drawer-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .kairos-redesign .ms-drawer-badge {
    flex: none; min-width: 20px; height: 20px; padding: 0 6px; box-sizing: border-box; border-radius: 999px;
    background: var(--rd-ink); color: var(--rd-ground); font: 600 11px/20px var(--rd-font-ui); text-align: center;
  }
  .kairos-redesign .ms-drawer-badge[hidden] { display: none; }

  /* The bottom: the profile (to Settings) and New chat. */
  .kairos-redesign .ms-drawer-foot { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--rd-line); }
  .kairos-redesign .ms-drawer-profile {
    flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 6px;
    border: 0; border-radius: 16px; background: transparent; color: var(--rd-ink); font: 500 15px var(--rd-font-ui); text-align: left; cursor: pointer;
  }
  .kairos-redesign .ms-drawer-avatar {
    flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
    background: var(--rd-primary-bg); color: var(--rd-primary-fg); font: italic 600 18px var(--rd-font-title);
  }
  .kairos-redesign .ms-drawer-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .kairos-redesign .ms-drawer-new {
    flex: none; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px;
    border: 0; border-radius: 999px; background: var(--rd-primary-bg); color: var(--rd-primary-fg);
    font: 600 14px var(--rd-font-ui); cursor: pointer; box-shadow: 0 8px 20px rgba(var(--shade-rgb), .18);
  }
  .kairos-redesign .ms-drawer-new svg { width: 18px; height: 18px; }
  /* Focus lands on the sidebar itself when it opens; it draws no ring. */
  .kairos-redesign .ms-drawer:focus { outline: none; }
  .kairos-redesign :is(.ms-drawer-row, .ms-drawer-profile, .ms-drawer-new, .ms-menu-btn):focus-visible { outline: 2px solid var(--rd-focus); outline-offset: 2px; }

  /* The round menu button beside a top-level page's title. */
  .kairos-redesign .ms-menu-btn {
    position: fixed; z-index: 60; top: var(--ms-menu-top, calc(var(--mobile-safe-top, env(safe-area-inset-top, 0px)) + 10px));
    left: max(12px, env(safe-area-inset-left, 0px)); display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
    border: 1px solid var(--rd-line); border-radius: 999px; background: color-mix(in srgb, var(--rd-surface-solid) 88%, transparent);
    color: var(--rd-ink); box-shadow: 0 4px 14px rgba(var(--shade-rgb), .1); cursor: pointer;
    backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%);
  }
  .kairos-redesign .ms-menu-btn[hidden] { display: none; }
  .kairos-redesign .ms-menu-btn svg { width: 20px; height: 20px; }
  /* The title it sits beside makes room for it. */
  .kairos-redesign .ms-menu-indent { margin-inline-start: 52px !important; padding-block: var(--ms-menu-pad, 0px); }

  @media (prefers-reduced-motion: reduce) {
    .kairos-redesign :is(.ms-drawer, .ms-drawer-scrim, #content, .ms-global-frost, .ms-menu-btn) { transition: none !important; }
  }
}