/* MedDex — the navigator's chrome.
   ---------------------------------------------------------------------------
   Everything is built from the shell's own tokens (--mdx-*), so dark mode,
   the glass material and the motion curves are inherited rather than
   re-invented. Every class is prefixed `mdx-drawer-`, `mdx-menu-` or
   `mdx-sheetview-`, which exist nowhere else in the codebase. */

/* ==========================================================================
   1. The trigger
   ==========================================================================
   It sits FIRST in the topline, on the side a right thumb reaches on a phone
   held one-handed, and it is a real 40px target rather than a 24px glyph. The
   topline's existing button pushes itself to the right with margin-left:auto,
   so the menu button explicitly does not. */

.mdx-menu-trigger {
  margin-left: 0 !important;
  margin-right: 2px;
  width: 40px;
  height: 40px;
  color: var(--mdx-ink-2);
  background: var(--mdx-hair);
  border-radius: 13px;
}
.mdx-menu-trigger svg { width: 20px; height: 20px; }
.mdx-menu-trigger:hover { background: var(--mdx-hair-strong); color: var(--mdx-ink); }
.mdx-menu-trigger:active { transform: scale(0.93); }
.mdx-topline.has-menu { padding-left: 0; }

/* ==========================================================================
   2. The drawer
   ========================================================================== */

.mdx-drawer {
  position: fixed;
  inset: 0;
  z-index: 4200;
}
.mdx-drawer[hidden] { display: none; }

.mdx-drawer-scrim {
  position: absolute;
  inset: 0;
  background: rgba(9, 15, 26, 0.34);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity 0.34s var(--mdx-ease);
}
.mdx-drawer.is-open .mdx-drawer-scrim { opacity: 1; }

.mdx-drawer-panel {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(86vw, 348px);
  display: flex;
  flex-direction: column;
  padding: calc(env(safe-area-inset-top, 0px) + 10px) 0 calc(env(safe-area-inset-bottom, 0px) + 10px);
  background: var(--mdx-surface);
  border-right: 1px solid var(--mdx-hair);
  box-shadow: var(--mdx-glass-shadow-lift);
  transform: translate3d(-101%, 0, 0);
  transition: transform 0.42s var(--mdx-ease-spring);
  will-change: transform;
}
.mdx-drawer.is-open .mdx-drawer-panel { transform: translate3d(0, 0, 0); }

/* The one piece of ornament: a soft brand wash at the head of the column, so
   the panel reads as MedDex rather than as a generic sheet. */
.mdx-drawer-panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 210px;
  pointer-events: none;
  background:
    radial-gradient(320px 180px at 14% 0%, rgba(23, 105, 255, 0.1), transparent 68%),
    radial-gradient(260px 160px at 92% 6%, rgba(200, 163, 74, 0.09), transparent 64%);
}

.mdx-drawer-head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px 12px 18px;
  flex: none;
}
.mdx-drawer-mark {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  font-size: 0.7rem;
  font-weight: 750;
  letter-spacing: 0.2em;
  color: var(--mdx-faint);
}
.mdx-drawer-mark b {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  background: linear-gradient(145deg, #e0bd63, var(--mdx-gold) 52%, #a8811f);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.mdx-drawer-close {
  margin-left: auto;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--mdx-faint);
  transition: background 0.2s var(--mdx-ease), color 0.2s var(--mdx-ease);
}
.mdx-drawer-close svg { width: 18px; height: 18px; }
.mdx-drawer-close:hover { background: var(--mdx-hair); color: var(--mdx-ink); }

.mdx-drawer-body {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 0 12px 14px;
}

/* ---- new chat ----------------------------------------------------------- */

.mdx-drawer-new {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--mdx-hair);
  border-radius: 15px;
  background: var(--mdx-surface-2);
  color: var(--mdx-ink);
  font-size: 0.94rem;
  font-weight: 650;
  box-shadow: var(--mdx-lift-1);
  transition: transform 0.2s var(--mdx-ease), box-shadow 0.24s var(--mdx-ease);
}
.mdx-drawer-new svg { width: 18px; height: 18px; color: var(--mdx-blue); }
.mdx-drawer-new:active { transform: scale(0.985); }

/* ---- section headings --------------------------------------------------- */

.mdx-drawer-sechead {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 18px 6px 7px;
}
.mdx-drawer-sechead h3 {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mdx-faint);
}
.mdx-drawer-seclink {
  margin-left: auto;
  border: 0;
  background: transparent;
  color: var(--mdx-blue);
  font-size: 0.78rem;
  font-weight: 650;
  padding: 2px 4px;
}

.mdx-drawer-empty {
  margin: 2px 6px 0;
  font-size: 0.83rem;
  line-height: 1.5;
  color: var(--mdx-faint);
}

/* ---- a conversation ----------------------------------------------------- */

.mdx-drawer-recent { display: flex; flex-direction: column; gap: 2px; }

.mdx-drawer-thread {
  position: relative;
  display: flex;
  align-items: center;
  border-radius: 13px;
  transition: background 0.18s var(--mdx-ease);
}
.mdx-drawer-thread:hover { background: var(--mdx-hair); }
.mdx-drawer-thread.is-active { background: var(--mdx-blue-wash); }

.mdx-drawer-thread-open {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 4px 10px 11px;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
}
.mdx-drawer-thread-open svg {
  width: 17px;
  height: 17px;
  flex: none;
  color: var(--mdx-faint);
}
.mdx-drawer-thread.is-active .mdx-drawer-thread-open svg { color: var(--mdx-blue); }

.mdx-drawer-thread-text { min-width: 0; display: block; }
.mdx-drawer-thread-text b {
  display: block;
  font-size: 0.885rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--mdx-ink);
  /* A thread title is one line. Wrapping turns a list of ten conversations
     into a wall of prose, which is the opposite of scanning. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mdx-drawer-thread-text i {
  display: block;
  margin-top: 1px;
  font-size: 0.72rem;
  font-style: normal;
  color: var(--mdx-faint);
}

.mdx-drawer-thread-menu {
  flex: none;
  width: 34px;
  height: 34px;
  margin-right: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--mdx-faint);
  opacity: 0;
  transition: opacity 0.18s var(--mdx-ease), background 0.18s var(--mdx-ease);
}
.mdx-drawer-thread-menu svg { width: 16px; height: 16px; }
.mdx-drawer-thread:hover .mdx-drawer-thread-menu,
.mdx-drawer-thread.is-active .mdx-drawer-thread-menu { opacity: 1; }
/* On touch there is no hover, so the control is simply always there. */
@media (pointer: coarse) {
  .mdx-drawer-thread-menu { opacity: 1; }
}

.mdx-drawer-thread-actions {
  position: absolute;
  right: 8px;
  top: calc(100% - 6px);
  z-index: 3;
  display: flex;
  flex-direction: column;
  min-width: 152px;
  padding: 5px;
  border: 1px solid var(--mdx-hair);
  border-radius: 13px;
  background: var(--mdx-surface);
  box-shadow: var(--mdx-lift-2);
}
.mdx-drawer-thread-actions button {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--mdx-ink-2);
  font-size: 0.85rem;
  font-weight: 600;
  text-align: left;
}
.mdx-drawer-thread-actions button svg { width: 16px; height: 16px; }
.mdx-drawer-thread-actions button:hover { background: var(--mdx-hair); color: var(--mdx-ink); }
.mdx-drawer-thread-actions button.is-danger { color: var(--mdx-red); }
.mdx-drawer-thread-actions button.is-danger:hover { background: rgba(220, 38, 38, 0.1); }

.mdx-drawer-rename {
  position: absolute;
  inset: 3px 6px;
  z-index: 4;
  display: flex;
}
.mdx-drawer-rename input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0 11px;
  border: 1.5px solid var(--mdx-blue);
  border-radius: 11px;
  background: var(--mdx-surface);
  color: var(--mdx-ink);
  font-size: 0.885rem;
  font-weight: 600;
  font-family: inherit;
}
.mdx-drawer-rename input:focus { outline: none; }

/* ---- destinations ------------------------------------------------------- */

.mdx-drawer-list { display: flex; flex-direction: column; gap: 1px; }

.mdx-drawer-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 11px;
  border: 0;
  border-radius: 13px;
  background: transparent;
  color: inherit;
  text-align: left;
  transition: background 0.18s var(--mdx-ease);
}
.mdx-drawer-item:hover { background: var(--mdx-hair); }
.mdx-drawer-item:active { background: var(--mdx-hair-strong); }

.mdx-drawer-item-icon {
  flex: none;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  background: var(--mdx-surface-2);
  border: 1px solid var(--mdx-hair);
  color: var(--mdx-ink-2);
}
.mdx-drawer-item-icon svg { width: 18px; height: 18px; }
.mdx-drawer-item[data-key="connected"] .mdx-drawer-item-icon {
  background: var(--mdx-blue-wash);
  border-color: rgba(23, 105, 255, 0.2);
  color: var(--mdx-blue);
}

.mdx-drawer-item-text { min-width: 0; display: block; }
.mdx-drawer-item-text b {
  display: block;
  font-size: 0.92rem;
  font-weight: 620;
  color: var(--mdx-ink);
}
.mdx-drawer-item-text i {
  display: block;
  margin-top: 1px;
  font-size: 0.735rem;
  font-style: normal;
  color: var(--mdx-faint);
}

/* ---- account ------------------------------------------------------------ */

.mdx-drawer-account {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0 12px;
  padding: 11px 12px;
  border: 1px solid var(--mdx-hair);
  border-radius: 15px;
  background: var(--mdx-surface-2);
  color: inherit;
  text-align: left;
}
.mdx-drawer-account:hover { background: var(--mdx-hair); }

.mdx-drawer-avatar {
  flex: none;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(145deg, var(--mdx-blue), #0b46b5);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 750;
}
.mdx-drawer-avatar img { width: 100%; height: 100%; object-fit: cover; }

.mdx-drawer-account-text { min-width: 0; display: block; }
.mdx-drawer-account-text b {
  display: block;
  font-size: 0.885rem;
  font-weight: 650;
  color: var(--mdx-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mdx-drawer-account-text i {
  display: block;
  font-size: 0.735rem;
  font-style: normal;
  color: var(--mdx-faint);
}

/* ==========================================================================
   3. The phone rule
   ==========================================================================
   THIS is the change: on a phone the persistent six-slot bar is gone, and the
   78px it occupied goes back to the Sphere and the conversation. The bar is
   the app's own element and is only hidden, never removed, so
   updateBottomNav() and every coach-mark still address the same nodes. */

@media (max-width: 767px) {
  body.mdx .bottom-nav,
  body.mdx .mdx-nav {
    display: none !important;
  }
}

/* Above that the existing navigation is still the right answer — a bar on a
   tablet, a left column on a desktop — and the drawer becomes what a sidebar
   is in every other assistant: where the conversations live. */
@media (min-width: 768px) {
  .mdx-drawer-panel { width: 340px; }
}

/* ==========================================================================
   4. History / Connected Apps sheet
   ==========================================================================
   One presentation for both: a sheet from the bottom on a phone, a centred
   card on a wide screen. */

.mdx-sheetview {
  position: fixed;
  inset: 0;
  z-index: 4300;
}
.mdx-sheetview[hidden] { display: none; }

.mdx-sheetview-scrim {
  position: absolute;
  inset: 0;
  background: rgba(9, 15, 26, 0.4);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 0.3s var(--mdx-ease);
}
.mdx-sheetview.is-open .mdx-sheetview-scrim { opacity: 1; }

.mdx-sheetview-card {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  border-radius: 26px 26px 0 0;
  background: var(--mdx-surface);
  box-shadow: var(--mdx-glass-shadow-lift);
  transform: translate3d(0, 101%, 0);
  transition: transform 0.42s var(--mdx-ease-spring);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  will-change: transform;
}
.mdx-sheetview.is-open .mdx-sheetview-card { transform: translate3d(0, 0, 0); }

.mdx-sheetview-head {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 16px 10px 20px;
}
.mdx-sheetview-head h2 {
  margin: 0;
  font-size: 1.12rem;
  font-weight: 730;
  letter-spacing: -0.02em;
  color: var(--mdx-ink);
}
.mdx-sheetview-close {
  margin-left: auto;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: var(--mdx-hair);
  color: var(--mdx-ink-2);
}
.mdx-sheetview-close svg { width: 17px; height: 17px; }

.mdx-sheetview-tabs {
  flex: none;
  display: flex;
  gap: 4px;
  margin: 0 16px 6px;
  padding: 4px;
  border-radius: var(--mdx-r-pill);
  background: var(--mdx-surface-sunken);
}
.mdx-sheetview-tab {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 12px;
  border: 0;
  border-radius: var(--mdx-r-pill);
  background: transparent;
  color: var(--mdx-muted);
  font-size: 0.85rem;
  font-weight: 640;
  transition: background 0.24s var(--mdx-ease), color 0.24s var(--mdx-ease);
}
.mdx-sheetview-tab svg { width: 16px; height: 16px; }
.mdx-sheetview-tab.is-active {
  background: var(--mdx-surface);
  color: var(--mdx-ink);
  box-shadow: var(--mdx-lift-1);
}
.mdx-sheetview-tab.is-active svg { color: var(--mdx-blue); }

.mdx-sheetview-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 8px 12px 20px;
}

.mdx-sheetview-note {
  margin: 14px 8px;
  font-size: 0.87rem;
  line-height: 1.55;
  color: var(--mdx-muted);
}

.mdx-sheetview-body .mdx-drawer-thread.is-wide { border-radius: 14px; }
.mdx-sheetview-body .mdx-drawer-thread.is-wide .mdx-drawer-thread-open { padding: 13px 4px 13px 13px; }

.mdx-sheetview-read {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 9px 11px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: inherit;
  text-align: left;
}
.mdx-sheetview-read:hover { background: var(--mdx-hair); }
.mdx-sheetview-read img,
.mdx-sheetview-read-thumb {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 11px;
  object-fit: cover;
  background: var(--mdx-surface-sunken);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--mdx-faint);
}
.mdx-sheetview-read-thumb svg { width: 20px; height: 20px; }
.mdx-sheetview-read-text { min-width: 0; display: block; }
.mdx-sheetview-read-text b {
  display: block;
  font-size: 0.885rem;
  font-weight: 620;
  color: var(--mdx-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.mdx-sheetview-read-text i {
  display: block;
  margin-top: 2px;
  font-size: 0.73rem;
  font-style: normal;
  color: var(--mdx-faint);
}

.mdx-sheetview-clear {
  display: block;
  width: calc(100% - 16px);
  margin: 18px 8px 4px;
  padding: 11px;
  border: 1px solid rgba(220, 38, 38, 0.24);
  border-radius: 13px;
  background: transparent;
  color: var(--mdx-red);
  font-size: 0.85rem;
  font-weight: 640;
}

@media (min-width: 768px) {
  .mdx-sheetview-card {
    left: 50%;
    right: auto;
    bottom: auto;
    top: 50%;
    width: min(560px, calc(100vw - 48px));
    max-height: min(76vh, 760px);
    border-radius: 24px;
    transform: translate3d(-50%, -46%, 0) scale(0.97);
    opacity: 0;
    transition: transform 0.36s var(--mdx-ease-spring), opacity 0.24s var(--mdx-ease);
  }
  .mdx-sheetview.is-open .mdx-sheetview-card {
    transform: translate3d(-50%, -50%, 0) scale(1);
    opacity: 1;
  }
}

/* The page behind a drawer or a sheet does not scroll under it. */
body.mdx-drawer-open,
body.mdx-sheet-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .mdx-drawer-panel,
  .mdx-drawer-scrim,
  .mdx-sheetview-card,
  .mdx-sheetview-scrim {
    transition-duration: 0.001ms !important;
  }
}

/* ==========================================================================
   5. Connected Apps
   ==========================================================================
   One card per provider: who it is, which of your accounts, what Baihaqi is
   allowed to do with it, and a single control. A provider that this deployment
   cannot offer says so instead of showing a button. */

.mdx-apps-card {
  margin: 10px 4px;
  padding: 15px 16px 14px;
  border: 1px solid var(--mdx-hair);
  border-radius: 18px;
  background: var(--mdx-surface-2);
  box-shadow: var(--mdx-lift-1);
}
.mdx-apps-card.is-connected {
  border-color: rgba(15, 157, 108, 0.28);
  background:
    linear-gradient(180deg, rgba(15, 157, 108, 0.05), transparent 42%),
    var(--mdx-surface-2);
}

.mdx-apps-card-head { display: flex; align-items: center; gap: 12px; }

.mdx-apps-logo {
  flex: none;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: var(--mdx-surface);
  border: 1px solid var(--mdx-hair);
}
.mdx-apps-logo svg { width: 26px; height: 26px; }

.mdx-apps-card-title { min-width: 0; flex: 1 1 auto; }
.mdx-apps-card-title b {
  display: block;
  font-size: 0.98rem;
  font-weight: 680;
  color: var(--mdx-ink);
}
.mdx-apps-card-title i {
  display: block;
  margin-top: 1px;
  font-size: 0.78rem;
  font-style: normal;
  line-height: 1.4;
  color: var(--mdx-faint);
  overflow: hidden;
  text-overflow: ellipsis;
}

.mdx-apps-badge {
  flex: none;
  align-self: flex-start;
  padding: 3px 9px;
  border-radius: var(--mdx-r-pill);
  background: rgba(15, 157, 108, 0.14);
  color: var(--mdx-green);
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.04em;
}

.mdx-apps-caps {
  margin: 12px 0 0;
  padding: 0 0 0 2px;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.mdx-apps-caps li {
  position: relative;
  padding-left: 20px;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--mdx-muted);
}
.mdx-apps-caps li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.55em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--mdx-blue);
  opacity: 0.55;
}

.mdx-apps-actions { margin-top: 14px; display: flex; align-items: center; gap: 10px; }

.mdx-apps-btn {
  padding: 10px 16px;
  border: 0;
  border-radius: 12px;
  background: var(--mdx-blue);
  color: #fff;
  font-size: 0.86rem;
  font-weight: 650;
  box-shadow: 0 2px 10px rgba(23, 105, 255, 0.24);
}
.mdx-apps-btn:disabled { opacity: 0.6; }
.mdx-apps-btn.is-ghost {
  background: transparent;
  color: var(--mdx-muted);
  border: 1px solid var(--mdx-hair-strong);
  box-shadow: none;
}
.mdx-apps-btn.is-ghost:hover { color: var(--mdx-red); border-color: rgba(220, 38, 38, 0.3); }

.mdx-apps-unavailable {
  font-size: 0.8rem;
  color: var(--mdx-faint);
  font-style: italic;
}

.mdx-apps-warn {
  margin: 6px 4px 12px;
  padding: 11px 13px;
  border: 1px solid rgba(200, 163, 74, 0.34);
  border-radius: 13px;
  background: var(--mdx-gold-wash);
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--mdx-ink-2);
}

.mdx-apps-signin {
  display: block;
  margin: 8px;
  padding: 11px 18px;
  border: 0;
  border-radius: 12px;
  background: var(--mdx-blue);
  color: #fff;
  font-size: 0.88rem;
  font-weight: 650;
}

/* The line under an answer that says what Baihaqi is doing in someone else's
   product right now. It is a status, not a bubble. */
.bchat-tool {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 6px 0 2px;
  padding: 9px 13px;
  border: 1px solid var(--mdx-hair);
  border-radius: 13px;
  background: var(--mdx-surface-2);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--mdx-muted);
  align-self: flex-start;
}
.bchat-tool i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--mdx-blue);
  animation: mdxToolPulse 1.3s var(--mdx-ease) infinite;
}
@keyframes mdxToolPulse {
  0%, 100% { opacity: 0.35; transform: scale(0.82); }
  50% { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) { .bchat-tool i { animation: none; opacity: 1; } }