/*
DroneHQ Help Drawer v145
Visual alignment only. Existing Help behavior, content, role checks, and
developer tools remain owned by the current Help implementation.
*/

:root {
  --dronehq-help-drawer-width-v145: 520px;
  --dronehq-help-bg-v145: #071c31;
  --dronehq-help-bg-deep-v145: #06182a;
  --dronehq-help-panel-v145: #0b2743;
  --dronehq-help-panel-soft-v145: #102f50;
  --dronehq-help-border-v145: rgba(64, 144, 211, 0.34);
  --dronehq-help-accent-v145: #45b9ff;
  --dronehq-help-text-v145: #f2f7ff;
  --dronehq-help-muted-v145: #a8c0d9;
}

/* Support the current ID and common Help-panel hooks without changing markup. */
#page-help-panel,
[data-help-panel],
[data-page-help-panel],
.dhq-help-panel,
.page-help-panel {
  position: fixed !important;
  inset: 0 0 0 auto !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: auto !important;
  width: min(var(--dronehq-help-drawer-width-v145), 96vw) !important;
  max-width: 96vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-height: 100vh !important;
  max-height: 100dvh !important;
  margin: 0 !important;
  border: 0 !important;
  border-left: 1px solid var(--dronehq-help-border-v145) !important;
  border-radius: 0 !important;
  background:
    linear-gradient(180deg, rgba(13, 45, 76, 0.46), rgba(5, 23, 40, 0.12)),
    var(--dronehq-help-bg-v145) !important;
  color: var(--dronehq-help-text-v145) !important;
  box-shadow: -24px 0 64px rgba(0, 0, 0, 0.46) !important;
  z-index: 1220 !important;
  overflow: hidden !important;
}

/* Respect native hidden state. */
#page-help-panel[hidden],
[data-help-panel][hidden],
[data-page-help-panel][hidden],
.dhq-help-panel[hidden],
.page-help-panel[hidden] {
  display: none !important;
}

/* Keep Help scrolling inside the drawer. */
#page-help-panel > *,
[data-help-panel] > *,
[data-page-help-panel] > *,
.dhq-help-panel > *,
.page-help-panel > * {
  box-sizing: border-box;
}

#page-help-panel [class*="body"],
#page-help-panel [class*="content"],
[data-help-panel] [class*="body"],
[data-help-panel] [class*="content"],
[data-page-help-panel] [class*="body"],
[data-page-help-panel] [class*="content"],
.dhq-help-panel [class*="body"],
.dhq-help-panel [class*="content"],
.page-help-panel [class*="body"],
.page-help-panel [class*="content"] {
  min-height: 0 !important;
}

/* Header styling aligned to AI and Notifications. */
#page-help-panel header,
#page-help-panel [class*="header"],
[data-help-panel] header,
[data-help-panel] [class*="header"],
[data-page-help-panel] header,
[data-page-help-panel] [class*="header"],
.dhq-help-panel header,
.dhq-help-panel [class*="header"],
.page-help-panel header,
.page-help-panel [class*="header"] {
  background: rgba(7, 28, 49, 0.96) !important;
  border-bottom: 1px solid var(--dronehq-help-border-v145) !important;
  color: var(--dronehq-help-text-v145) !important;
}

/* Eyebrow and title colors. */
#page-help-panel .eyebrow,
#page-help-panel [class*="eyebrow"],
[data-help-panel] .eyebrow,
[data-help-panel] [class*="eyebrow"],
[data-page-help-panel] .eyebrow,
[data-page-help-panel] [class*="eyebrow"],
.dhq-help-panel .eyebrow,
.dhq-help-panel [class*="eyebrow"],
.page-help-panel .eyebrow,
.page-help-panel [class*="eyebrow"] {
  color: var(--dronehq-help-accent-v145) !important;
  letter-spacing: 0.12em !important;
  font-weight: 800 !important;
}

#page-help-panel h1,
#page-help-panel h2,
#page-help-panel h3,
[data-help-panel] h1,
[data-help-panel] h2,
[data-help-panel] h3,
[data-page-help-panel] h1,
[data-page-help-panel] h2,
[data-page-help-panel] h3,
.dhq-help-panel h1,
.dhq-help-panel h2,
.dhq-help-panel h3,
.page-help-panel h1,
.page-help-panel h2,
.page-help-panel h3 {
  color: var(--dronehq-help-text-v145) !important;
}

/* Tabs styled like compact utility-drawer controls. */
#page-help-panel [role="tablist"],
#page-help-panel [class*="tabs"],
[data-help-panel] [role="tablist"],
[data-help-panel] [class*="tabs"],
[data-page-help-panel] [role="tablist"],
[data-page-help-panel] [class*="tabs"],
.dhq-help-panel [role="tablist"],
.dhq-help-panel [class*="tabs"],
.page-help-panel [role="tablist"],
.page-help-panel [class*="tabs"] {
  background: rgba(8, 31, 54, 0.78) !important;
  border-bottom: 1px solid var(--dronehq-help-border-v145) !important;
}

#page-help-panel [role="tab"],
#page-help-panel [class*="tab"],
[data-help-panel] [role="tab"],
[data-help-panel] [class*="tab"],
[data-page-help-panel] [role="tab"],
[data-page-help-panel] [class*="tab"],
.dhq-help-panel [role="tab"],
.dhq-help-panel [class*="tab"],
.page-help-panel [role="tab"],
.page-help-panel [class*="tab"] {
  color: var(--dronehq-help-muted-v145) !important;
}

#page-help-panel [role="tab"][aria-selected="true"],
#page-help-panel [class*="tab"].active,
[data-help-panel] [role="tab"][aria-selected="true"],
[data-help-panel] [class*="tab"].active,
[data-page-help-panel] [role="tab"][aria-selected="true"],
[data-page-help-panel] [class*="tab"].active,
.dhq-help-panel [role="tab"][aria-selected="true"],
.dhq-help-panel [class*="tab"].active,
.page-help-panel [role="tab"][aria-selected="true"],
.page-help-panel [class*="tab"].active {
  color: var(--dronehq-help-accent-v145) !important;
  border-color: var(--dronehq-help-accent-v145) !important;
  background: rgba(19, 66, 106, 0.42) !important;
}

/* Cards, notes, and related-page blocks. */
#page-help-panel [class*="card"],
#page-help-panel [class*="note"],
#page-help-panel [class*="related"],
[data-help-panel] [class*="card"],
[data-help-panel] [class*="note"],
[data-help-panel] [class*="related"],
[data-page-help-panel] [class*="card"],
[data-page-help-panel] [class*="note"],
[data-page-help-panel] [class*="related"],
.dhq-help-panel [class*="card"],
.dhq-help-panel [class*="note"],
.dhq-help-panel [class*="related"],
.page-help-panel [class*="card"],
.page-help-panel [class*="note"],
.page-help-panel [class*="related"] {
  border-color: var(--dronehq-help-border-v145) !important;
  background: rgba(13, 43, 72, 0.72) !important;
  color: var(--dronehq-help-text-v145) !important;
  border-radius: 10px !important;
}

/* Links and utility buttons. */
#page-help-panel a,
[data-help-panel] a,
[data-page-help-panel] a,
.dhq-help-panel a,
.page-help-panel a {
  color: var(--dronehq-help-accent-v145) !important;
}

#page-help-panel button,
[data-help-panel] button,
[data-page-help-panel] button,
.dhq-help-panel button,
.page-help-panel button {
  border-color: rgba(77, 161, 226, 0.44) !important;
}

#page-help-panel button:hover,
#page-help-panel button:focus-visible,
[data-help-panel] button:hover,
[data-help-panel] button:focus-visible,
[data-page-help-panel] button:hover,
[data-page-help-panel] button:focus-visible,
.dhq-help-panel button:hover,
.dhq-help-panel button:focus-visible,
.page-help-panel button:hover,
.page-help-panel button:focus-visible {
  border-color: rgba(94, 190, 255, 0.75) !important;
}

/* Match the compact close button used by the other utility drawers. */
#page-help-panel [aria-label*="Close"],
#page-help-panel [data-help-close],
[data-help-panel] [aria-label*="Close"],
[data-help-panel] [data-help-close],
[data-page-help-panel] [aria-label*="Close"],
[data-page-help-panel] [data-help-close],
.dhq-help-panel [aria-label*="Close"],
.dhq-help-panel [data-help-close],
.page-help-panel [aria-label*="Close"],
.page-help-panel [data-help-close] {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  border-radius: 9px !important;
  background: rgba(13, 52, 86, 0.74) !important;
  color: var(--dronehq-help-accent-v145) !important;
  box-shadow: none !important;
}

/* Muted body copy. */
#page-help-panel p,
#page-help-panel li,
#page-help-panel small,
[data-help-panel] p,
[data-help-panel] li,
[data-help-panel] small,
[data-page-help-panel] p,
[data-page-help-panel] li,
[data-page-help-panel] small,
.dhq-help-panel p,
.dhq-help-panel li,
.dhq-help-panel small,
.page-help-panel p,
.page-help-panel li,
.page-help-panel small {
  color: var(--dronehq-help-muted-v145) !important;
}

/* Critical protection: Help remains an overlay and never reserves page width. */
body.help-open main,
body.help-open .app-main,
body.help-open .shell-main,
body.help-open .page-main,
body.help-open .workspace-main,
body.page-help-open main,
body.page-help-open .app-main,
body.page-help-open .shell-main,
body.page-help-open .page-main,
body.page-help-open .workspace-main {
  margin-right: 0 !important;
  padding-right: initial !important;
  width: auto !important;
  max-width: none !important;
  transform: none !important;
}

@media (max-width: 760px) {
  #page-help-panel,
  [data-help-panel],
  [data-page-help-panel],
  .dhq-help-panel,
  .page-help-panel {
    width: 100vw !important;
    max-width: 100vw !important;
  }
}