/* In-app help drawer: floating robot button + slide-over panel. */
/* Default: a normal bottom-right corner button (fine on pages with no bottom input). */
.help-fab {
    position: fixed; right: 20px; bottom: 20px; z-index: 1200;
    width: 60px; height: 60px; border-radius: 50%; border: none; cursor: pointer;
    background: var(--surface, #fff); padding: 4px; overflow: hidden;
    box-shadow: 0 6px 20px rgba(0,0,0,.28); display: flex; align-items: center; justify-content: center;
    transition: transform .15s ease, box-shadow .15s ease;
}
/* Chat page ONLY: lift above the composer so it never covers the send button.
   (Mirrors how the old team-chat bubble was raised - see chat.css.) Two-class
   selector so it always wins over the corner default regardless of source order. */
.help-fab.help-fab--chat { bottom: 96px; }
/* When the team/support chat panel is open it owns the bottom-right corner,
   so hide the floating help robot to free the chat's send button. */
body.team-chat-open .help-fab { display: none !important; }
/* Hide the help robot whenever the sidebar / mobile menu is open, so it never
   floats on top of the navigation. Body-class variants first (broad support). */
body.mobile-menu-open .help-fab,
body.sidebar-open .help-fab { display: none !important; }
/* The mobile menu actually opens by adding .active to .dashboard-sidebar
   (z-index 1100) which the FAB (z-index 1200) sits over. Match it directly.
   Kept in its OWN rule so browsers without :has() drop only this line. */
body:has(.dashboard-sidebar.active) .help-fab { display: none !important; }
.help-fab img { width: 100%; height: 100%; object-fit: contain; border-radius: 50%; }
.help-fab:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0,0,0,.32); }
[data-theme="dark"] .help-fab { background: #232733; }

/* On phones the chat composer is a 2-row block; lift the chat FAB well clear of
   it (matches the team-chat bubble's 180px). Non-chat pages stay in the corner. */
@media (max-width: 768px) {
    .help-fab.help-fab--chat { bottom: 184px; right: 16px; }
}

.help-overlay {
    position: fixed; inset: 0; z-index: 1300; background: rgba(0,0,0,.4);
    display: none; justify-content: flex-end;
}
.help-overlay.show { display: flex; }

.help-panel {
    width: 420px; max-width: 100%; height: 100%; background: var(--surface, #fff); color: var(--text-primary, #1a1d24);
    display: flex; flex-direction: column; box-shadow: -8px 0 40px rgba(0,0,0,.2);
    animation: helpSlideIn .2s ease;
}
@keyframes helpSlideIn { from { transform: translateX(40px); opacity: .6; } to { transform: translateX(0); opacity: 1; } }

.help-panel-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 18px; border-bottom: 1px solid var(--border, #e2e5ea); font-weight: 700;
}
.help-panel-head i { color: var(--primary, #00b3c9); margin-right: 6px; }
.help-close { background: none; border: none; font-size: 26px; line-height: 1; cursor: pointer; color: var(--text-secondary, #889); }

.help-search { padding: 12px 16px; border-bottom: 1px solid var(--border, #eef1f5); }
.help-search input {
    width: 100%; padding: 10px 12px; border: 1px solid var(--border, #d4d7dd); border-radius: 8px;
    font: inherit; box-sizing: border-box; background: var(--surface, #fff); color: inherit;
}

.help-body { flex: 1; overflow-y: auto; padding: 8px 8px 16px; }
.help-loading, .help-empty { padding: 40px 18px; text-align: center; color: var(--text-secondary, #889); }

/* Footer: escalate to support (the team-chat widget) from inside the drawer. */
.help-foot {
    border-top: 1px solid var(--border, #e2e5ea); padding: 12px 16px;
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.help-foot span { font-size: .85rem; color: var(--text-secondary, #889); }
.help-support-btn {
    border: none; cursor: pointer; background: var(--primary, #00b3c9); color: #fff;
    padding: 9px 14px; border-radius: 8px; font-weight: 600; font-size: .88rem; white-space: nowrap;
}
.help-support-btn i { margin-right: 6px; }

/* Robot is the single floating entry point - hide the standalone team-chat bubble. */
#chatToggleButton { display: none !important; }

/* Screenshots inside help articles */
.help-article-body img { max-width: 100%; height: auto; border-radius: 8px; margin: 8px 0; border: 1px solid var(--border, #eef1f5); }

/* Tables inside help articles */
.help-article-body table { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: .86rem; }
.help-article-body th, .help-article-body td { border: 1px solid var(--border, #e2e5ea); padding: 7px 9px; text-align: left; vertical-align: top; }
.help-article-body th { background: var(--surface-soft, #f5f7fa); font-weight: 700; }
[data-theme="dark"] .help-article-body th { background: #232733; }
.help-article-body table + p { margin-top: 10px; }

.help-article { border-bottom: 1px solid var(--border, #eef1f5); }
.help-article > summary {
    cursor: pointer; padding: 14px 14px; font-weight: 600; list-style: none; user-select: none;
}
.help-article > summary::-webkit-details-marker { display: none; }
.help-article > summary::before { content: "▸"; margin-right: 8px; color: var(--primary, #00b3c9); }
.help-article[open] > summary::before { content: "▾"; }
.help-article-body { padding: 0 16px 16px; font-size: .92rem; line-height: 1.6; color: var(--text-secondary, #445); }
.help-article-body h3, .help-article-body h4, .help-article-body h5, .help-article-body h6 { margin: 12px 0 6px; color: var(--text-primary, #1a1d24); }
.help-article-body p { margin: 0 0 10px; }
.help-article-body ul, .help-article-body ol { margin: 0 0 10px 20px; }
.help-article-body li { margin-bottom: 5px; }
.help-article-body code { background: var(--surface-soft, #f0f2f5); padding: 1px 5px; border-radius: 4px; font-size: .86em; }
.help-article-body a { color: var(--primary, #00b3c9); }

[data-theme="dark"] .help-panel { background: #1a1d24; color: #e8eaed; }
[data-theme="dark"] .help-search input { background: #12151b; color: #e8eaed; border-color: #333; }
[data-theme="dark"] .help-article-body code { background: #12151b; }

@media (max-width: 640px) {
    .help-panel { width: 100%; }
    /* Corner button on phones (non-chat pages). The chat-page override above
       (.help-fab--chat) lifts it above the composer; keep it smaller here. */
    .help-fab { right: 14px; bottom: 18px; width: 52px; height: 52px; }
}

/* Full-manual browse row + chapter grouping */
.help-browse { display: flex; gap: 8px; padding: 0 14px 8px; }
.help-browse-btn {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 10px; border: 1px solid var(--primary, #00b3c9); border-radius: 8px;
  background: transparent; color: var(--primary, #00b3c9); font-size: 13px; font-weight: 600; cursor: pointer;
}
.help-browse-btn:hover { background: rgba(0,179,201,.08); }
.help-chapter { margin-bottom: 14px; }
.help-chapter-title {
  margin: 10px 0 6px; font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--primary-dark, #0090a3); border-bottom: 1px solid #e2e8f0; padding-bottom: 4px;
}
[data-theme="dark"] .help-chapter-title { color: var(--primary-light, #00d4e6); border-bottom-color: #334155; }