/**
 * ADHC Phase 2 — Sprint 4B — Patient Enablement Styles
 * ======================================================
 * Onboarding · Help Center · Feature Discovery · Tutorial · Journey
 * Warm, friendly, non-technical. Senior + village friendly.
 * All selectors prefixed .pe-* .ob-* .hc-* .fd-* .tut-*
 */

/* ── Variables ─────────────────────────────────────────────────────────── */
:root {
  --pe-teal:       #0d9488;
  --pe-teal-dark:  #0f766e;
  --pe-teal-light: #e6fffa;
  --pe-warm:       #fffbf0;
  --pe-radius:     20px;
  --pe-radius-sm:  12px;
  --pe-shadow:     0 8px 40px rgba(0,0,0,0.16);
  --pe-font:       'Inter', system-ui, sans-serif;
  --pe-panel-w:    400px;
}

/* ════════════════════════════════════════════════════════════════════════
   ONBOARDING WIZARD OVERLAY
   ════════════════════════════════════════════════════════════════════════ */

#adhc-onboarding-overlay {
  position:   fixed;
  inset:      0;
  background: rgba(10,20,35,0.82);
  z-index:    19000;
  display:    flex;
  align-items: center;
  justify-content: center;
  padding:    1rem;
  backdrop-filter: blur(4px);
  animation:  pe-fade-in 0.4s ease;
}

@keyframes pe-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.ob-card {
  background:    #ffffff;
  border-radius: var(--pe-radius);
  width:         100%;
  max-width:     440px;
  box-shadow:    var(--pe-shadow);
  overflow:      hidden;
  animation:     pe-slide-up 0.35s cubic-bezier(0.25,1,0.5,1);
}

@keyframes pe-slide-up {
  from { opacity:0; transform:translateY(24px) scale(0.97); }
  to   { opacity:1; transform:translateY(0) scale(1); }
}

.ob-header {
  background:  linear-gradient(135deg, #0d9488 0%, #0f766e 100%);
  padding:     1.5rem 1.25rem 1rem;
  text-align:  center;
  position:    relative;
}

.ob-step-emoji { font-size: 3rem; line-height: 1; margin-bottom: 0.4rem; display: block; }
.ob-step-title {
  font-size:   1.25rem;
  font-weight: 900;
  color:       #ffffff;
  line-height: 1.2;
  margin-bottom: 0.2rem;
}
.ob-step-subtitle {
  font-size:  0.82rem;
  color:      rgba(255,255,255,0.82);
  font-weight: 500;
}

.ob-skip-btn {
  position: absolute;
  top: 0.75rem; right: 0.85rem;
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.3);
  color: rgba(255,255,255,0.85);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--pe-font);
}
.ob-skip-btn:hover { background: rgba(255,255,255,0.28); }

/* Progress dots */
.ob-dots {
  display:         flex;
  justify-content: center;
  gap:             6px;
  padding:         0.6rem 0 0;
}
.ob-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(255,255,255,0.3); transition: all 0.25s;
}
.ob-dot.active { background: #fff; width: 20px; border-radius: 4px; }

/* Body */
.ob-body {
  padding: 1.25rem 1.5rem 0.75rem;
}
.ob-desc {
  font-size:  0.92rem;
  color:      #374151;
  font-weight: 500;
  line-height: 1.55;
  text-align: center;
  margin-bottom: 1rem;
}

/* Feature list inside step */
.ob-feature-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.ob-feature-item {
  display:     flex;
  align-items: center;
  gap:         0.65rem;
  padding:     0.6rem 0.75rem;
  background:  var(--pe-teal-light);
  border-radius: var(--pe-radius-sm);
  font-size:   0.85rem;
  font-weight: 600;
  color:       #0f172a;
}
.ob-feature-icon { font-size: 1.2rem; flex-shrink: 0; }

/* Navigation */
.ob-nav {
  display:  flex;
  gap:      0.5rem;
  padding:  0.5rem 1.5rem 1.25rem;
}
.ob-btn {
  flex:          1;
  min-height:    48px;
  border-radius: var(--pe-radius-sm);
  border:        none;
  font-size:     0.92rem;
  font-weight:   800;
  cursor:        pointer;
  font-family:   var(--pe-font);
  transition:    all 0.18s;
}
.ob-btn-primary { background: var(--pe-teal); color: #fff; }
.ob-btn-primary:hover { background: var(--pe-teal-dark); }
.ob-btn-secondary {
  background: #f1f5f9; color: #374151;
  border: 1.5px solid #e2e8f0;
  flex: 0 0 auto; width: 80px;
}
.ob-btn-secondary:hover { background: #e2e8f0; }
.ob-btn-finish {
  background: linear-gradient(135deg, #059669 0%, #0d9488 100%);
  color: #fff;
}
.ob-btn-finish:hover { filter: brightness(1.08); }

/* ════════════════════════════════════════════════════════════════════════
   SHARED PANEL BASE (Help Center, Feature Discovery, Feature Settings)
   ════════════════════════════════════════════════════════════════════════ */

.pe-overlay {
  display:    none;
  position:   fixed;
  inset:      0;
  background: rgba(15,23,42,0.42);
  z-index:    12000;
  backdrop-filter: blur(2px);
  opacity:    0;
  transition: opacity 0.3s ease;
}
.pe-overlay.pe-overlay-visible { display: block; opacity: 1; }

.pe-panel {
  position:        fixed;
  top:             0;
  right:           0;
  bottom:          0;
  width:           var(--pe-panel-w);
  max-width:       100vw;
  z-index:         12001;
  display:         flex;
  flex-direction:  column;
  background:      #ffffff;
  border-left:     1.5px solid rgba(13,148,136,0.12);
  box-shadow:      var(--pe-shadow);
  font-family:     var(--pe-font);
  overflow:        hidden;
  transform:       translateX(100%);
  transition:      transform 0.35s cubic-bezier(0.25,1,0.5,1);
  will-change:     transform;
}
.pe-panel.pe-panel-open { transform: translateX(0); }

.pe-panel-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         1rem 1.1rem 0.85rem;
  color:           #fff;
  flex-shrink:     0;
}
.pe-panel-title-wrap { display:flex; align-items:center; gap:0.65rem; }
.pe-panel-icon       { font-size:1.6rem; background:rgba(255,255,255,0.18); border-radius:50%; width:42px; height:42px; display:flex; align-items:center; justify-content:center; border:1.5px solid rgba(255,255,255,0.28); flex-shrink:0; }
.pe-panel-title      { font-size:1rem; font-weight:800; line-height:1.2; }
.pe-panel-subtitle   { font-size:0.68rem; opacity:0.82; font-weight:500; }
.pe-panel-close      { width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,0.18); border:1.5px solid rgba(255,255,255,0.28); color:#fff; font-size:1rem; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all 0.2s; flex-shrink:0; }
.pe-panel-close:hover { background:rgba(255,255,255,0.3); transform:scale(1.1); }

.pe-content {
  flex:          1;
  overflow-y:    auto;
  padding:       0.85rem;
  -webkit-overflow-scrolling: touch;
}
.pe-content::-webkit-scrollbar { width:4px; }
.pe-content::-webkit-scrollbar-thumb { background:rgba(13,148,136,0.2); border-radius:2px; }

/* Header gradient variants */
.pe-header-teal  { background: linear-gradient(135deg,#0d9488 0%,#0f766e 100%); }
.pe-header-blue  { background: linear-gradient(135deg,#1e3a8a 0%,#1d4ed8 100%); }
.pe-header-green { background: linear-gradient(135deg,#047857 0%,#059669 100%); }
.pe-header-warm  { background: linear-gradient(135deg,#d97706 0%,#f59e0b 100%); }

/* ════════════════════════════════════════════════════════════════════════
   FEATURE DISCOVERY CARDS
   ════════════════════════════════════════════════════════════════════════ */

.fd-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   0.6rem;
}

.fd-card {
  background:    #fff;
  border:        1.5px solid #e2e8f0;
  border-radius: var(--pe-radius-sm);
  padding:       0.85rem 0.75rem;
  display:       flex;
  flex-direction: column;
  gap:            4px;
  box-shadow:    0 2px 8px rgba(0,0,0,0.05);
  transition:    all 0.2s ease;
}
.fd-card:hover { border-color: var(--pe-teal); box-shadow: 0 4px 16px rgba(13,148,136,0.12); transform: translateY(-2px); }
.fd-card.fd-enabled { border-color: rgba(13,148,136,0.35); background: var(--pe-teal-light); }

.fd-card-icon  { font-size: 1.6rem; line-height: 1; }
.fd-card-title { font-size: 0.82rem; font-weight: 800; color: #0f172a; line-height: 1.2; }
.fd-card-desc  { font-size: 0.65rem; color: #64748b; font-weight: 500; line-height: 1.3; }

.fd-card-actions {
  display: flex; gap: 0.3rem; margin-top: 0.35rem; flex-wrap: wrap;
}
.fd-btn {
  flex:          1;
  min-height:    30px;
  border-radius: 999px;
  border:        none;
  font-size:     0.68rem;
  font-weight:   700;
  cursor:        pointer;
  font-family:   var(--pe-font);
  transition:    all 0.18s;
  padding:       0 0.5rem;
}
.fd-btn-enable  { background: var(--pe-teal); color: #fff; }
.fd-btn-enable:hover { background: var(--pe-teal-dark); }
.fd-btn-disable { background: #fee2e2; color: #dc2626; border:1px solid #fecaca; }
.fd-btn-learn   { background: #f1f5f9; color: #64748b; border:1px solid #e2e8f0; }
.fd-btn-learn:hover { background: #e2e8f0; }

.fd-status-chip {
  display:     inline-flex;
  align-items: center;
  gap:         3px;
  font-size:   0.6rem;
  font-weight: 800;
  padding:     2px 7px;
  border-radius: 999px;
  margin-bottom: 2px;
}
.fd-chip-on  { background: #dcfce7; color: #15803d; }
.fd-chip-off { background: #f1f5f9; color: #64748b; }

/* ════════════════════════════════════════════════════════════════════════
   HELP CENTER
   ════════════════════════════════════════════════════════════════════════ */

.hc-section-title {
  font-size:0.72rem; font-weight:800; color:#64748b; text-transform:uppercase;
  letter-spacing:0.5px; margin:0.85rem 0 0.5rem;
}

.hc-topic-card {
  display:       flex;
  align-items:   center;
  gap:           0.75rem;
  padding:       0.85rem 0.9rem;
  background:    #fff;
  border:        1.5px solid #e2e8f0;
  border-radius: var(--pe-radius-sm);
  cursor:        pointer;
  margin-bottom: 0.4rem;
  transition:    all 0.18s;
  box-shadow:    0 1px 4px rgba(0,0,0,0.04);
}
.hc-topic-card:hover { border-color:var(--pe-teal); background:var(--pe-teal-light); transform:translateX(3px); }
.hc-topic-icon  { font-size:1.4rem; flex-shrink:0; }
.hc-topic-title { font-size:0.88rem; font-weight:800; color:#0f172a; line-height:1.2; }
.hc-topic-sub   { font-size:0.65rem; color:#64748b; font-weight:500; }
.hc-topic-arrow { margin-left:auto; color:#94a3b8; font-size:0.8rem; }

/* Help article */
.hc-article { display:flex; flex-direction:column; gap:0.65rem; }
.hc-article-title { font-size:1rem; font-weight:900; color:#0f172a; }
.hc-step {
  display:flex; gap:0.75rem; align-items:flex-start;
  padding:0.75rem; background:#fafbfc; border-radius:var(--pe-radius-sm);
  border:1px solid #f1f5f9;
}
.hc-step-num {
  width:28px; height:28px; border-radius:50%; background:var(--pe-teal);
  color:#fff; font-size:0.78rem; font-weight:900; display:flex; align-items:center;
  justify-content:center; flex-shrink:0;
}
.hc-step-text { font-size:0.85rem; color:#374151; font-weight:500; line-height:1.45; }
.hc-back-btn {
  display:flex; align-items:center; gap:0.4rem; padding:0.45rem 0;
  background:none; border:none; font-size:0.82rem; font-weight:700;
  color:var(--pe-teal); cursor:pointer; font-family:var(--pe-font);
}

/* FAQ */
.hc-faq { border:1.5px solid #e2e8f0; border-radius:var(--pe-radius-sm); overflow:hidden; margin-bottom:0.4rem; }
.hc-faq-q {
  display:flex; align-items:center; justify-content:space-between;
  padding:0.75rem 0.9rem; cursor:pointer; font-size:0.85rem; font-weight:700; color:#0f172a;
  background:#fff;
}
.hc-faq-q:hover { background:#f8fafc; }
.hc-faq-icon { font-size:0.8rem; color:#64748b; transition:transform 0.2s; }
.hc-faq.open .hc-faq-icon { transform:rotate(180deg); }
.hc-faq-a { padding:0.65rem 0.9rem; background:#fafbfc; font-size:0.82rem; color:#475569; font-weight:500; line-height:1.5; display:none; }
.hc-faq.open .hc-faq-a { display:block; }

/* ════════════════════════════════════════════════════════════════════════
   FEATURE SETTINGS
   ════════════════════════════════════════════════════════════════════════ */

.fs-feature-row {
  display:        flex;
  align-items:    center;
  gap:            0.75rem;
  padding:        0.95rem;
  background:     #fff;
  border:         1.5px solid #e2e8f0;
  border-radius:  var(--pe-radius-sm);
  margin-bottom:  0.5rem;
  transition:     border-color 0.2s;
}
.fs-feature-row.fs-on { border-color:rgba(13,148,136,0.3); background:var(--pe-teal-light); }
.fs-feature-icon { font-size:1.5rem; flex-shrink:0; }
.fs-feature-info { flex:1; }
.fs-feature-title { font-size:0.88rem; font-weight:800; color:#0f172a; line-height:1.2; }
.fs-feature-desc  { font-size:0.7rem; color:#64748b; font-weight:500; margin-top:2px; line-height:1.3; }

/* Reuse fam-perm-toggle styles for toggle */
.fs-toggle { position:relative; display:inline-block; width:44px; height:24px; flex-shrink:0; cursor:pointer; }
.fs-toggle input { opacity:0; width:0; height:0; }
.fs-toggle-slider { position:absolute; inset:0; background:#cbd5e1; border-radius:999px; transition:all 0.25s; }
.fs-toggle-slider::before { content:''; position:absolute; width:18px; height:18px; border-radius:50%; background:#fff; left:3px; bottom:3px; transition:transform 0.25s; box-shadow:0 1px 3px rgba(0,0,0,0.15); }
.fs-toggle input:checked + .fs-toggle-slider { background:var(--pe-teal); }
.fs-toggle input:checked + .fs-toggle-slider::before { transform:translateX(20px); }

/* ════════════════════════════════════════════════════════════════════════
   TUTORIAL ENGINE — Spotlight + Bubble
   ════════════════════════════════════════════════════════════════════════ */

#adhc-tutorial-backdrop {
  position:   fixed;
  inset:      0;
  background: rgba(10,20,35,0.7);
  z-index:    18000;
  pointer-events: none;
  display:    none;
}
#adhc-tutorial-backdrop.active { display:block; }

.tut-spotlight {
  position:        absolute;
  border-radius:   var(--pe-radius-sm);
  box-shadow:      0 0 0 9999px rgba(10,20,35,0.7);
  border:          2.5px solid #0d9488;
  pointer-events:  none;
  transition:      all 0.3s cubic-bezier(0.25,1,0.5,1);
}

.tut-bubble {
  position:      fixed;
  z-index:       18001;
  background:    #fff;
  border-radius: var(--pe-radius);
  padding:       0.9rem 1rem;
  max-width:     280px;
  box-shadow:    0 8px 32px rgba(0,0,0,0.2);
  border:        2px solid var(--pe-teal);
  font-family:   var(--pe-font);
  animation:     pe-slide-up 0.25s ease;
}
.tut-bubble-title { font-size:0.88rem; font-weight:800; color:#0f172a; margin-bottom:0.35rem; }
.tut-bubble-text  { font-size:0.8rem; color:#374151; font-weight:500; line-height:1.45; margin-bottom:0.65rem; }
.tut-bubble-nav   { display:flex; gap:0.4rem; }
.tut-btn-next  { flex:1; min-height:36px; border-radius:999px; border:none; background:var(--pe-teal); color:#fff; font-size:0.78rem; font-weight:800; cursor:pointer; font-family:var(--pe-font); transition:all 0.18s; }
.tut-btn-next:hover { background:var(--pe-teal-dark); }
.tut-btn-exit  { min-height:36px; padding:0 0.75rem; border-radius:999px; border:1.5px solid #e2e8f0; background:#f8fafc; color:#64748b; font-size:0.72rem; font-weight:700; cursor:pointer; font-family:var(--pe-font); }

/* Bubble arrow */
.tut-bubble::before {
  content:''; position:absolute; width:12px; height:12px;
  background:#fff; border:2px solid var(--pe-teal);
  border-right:none; border-bottom:none;
  transform:rotate(45deg);
}
.tut-bubble.arrow-top::before    { top:-7px; left:50%; margin-left:-6px; }
.tut-bubble.arrow-bottom::before { bottom:-7px; left:50%; margin-left:-6px; transform:rotate(225deg); }

/* ════════════════════════════════════════════════════════════════════════
   PATIENT JOURNEY / CHECKLIST
   ════════════════════════════════════════════════════════════════════════ */

.pj-progress-bar {
  height:         8px;
  background:     #e2e8f0;
  border-radius:  999px;
  overflow:       hidden;
  margin-bottom:  0.85rem;
}
.pj-progress-fill {
  height:         100%;
  background:     linear-gradient(90deg, var(--pe-teal), #34d399);
  border-radius:  999px;
  transition:     width 0.6s ease;
}

.pj-stat-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   0.5rem;
  margin-bottom:         0.85rem;
}
.pj-stat {
  background:    #fff;
  border:        1.5px solid #e2e8f0;
  border-radius: var(--pe-radius-sm);
  padding:       0.65rem 0.5rem;
  text-align:    center;
}
.pj-stat-val { font-size:1.35rem; font-weight:900; color:var(--pe-teal); line-height:1; }
.pj-stat-lbl { font-size:0.58rem; color:#64748b; font-weight:700; margin-top:2px; }

.pj-checklist { display:flex; flex-direction:column; gap:0.4rem; }
.pj-check-row {
  display:       flex;
  align-items:   center;
  gap:           0.65rem;
  padding:       0.7rem 0.85rem;
  background:    #fff;
  border:        1.5px solid #e2e8f0;
  border-radius: var(--pe-radius-sm);
  font-size:     0.85rem;
  font-weight:   600;
  color:         #374151;
}
.pj-check-row.done  { border-color:rgba(13,148,136,0.3); background:var(--pe-teal-light); color:#0f172a; }
.pj-check-icon { font-size:1.1rem; flex-shrink:0; }
.pj-check-action { margin-left:auto; }
.pj-action-link {
  font-size:0.7rem; font-weight:700; color:var(--pe-teal);
  background:none; border:none; cursor:pointer; font-family:var(--pe-font); text-decoration:underline;
}

/* Education card */
.pe-edu-card {
  background:    linear-gradient(135deg, var(--pe-warm) 0%, #fff 100%);
  border:        1.5px solid #fde68a;
  border-radius: var(--pe-radius);
  padding:       1rem;
  margin-bottom: 0.65rem;
}
.pe-edu-badge  { font-size:0.62rem; font-weight:800; background:#fef3c7; color:#92400e; padding:2px 8px; border-radius:999px; display:inline-block; margin-bottom:0.4rem; }
.pe-edu-title  { font-size:0.92rem; font-weight:800; color:#0f172a; margin-bottom:0.3rem; }
.pe-edu-text   { font-size:0.82rem; color:#475569; font-weight:500; line-height:1.5; margin-bottom:0.5rem; }
.pe-edu-voice  { display:flex; align-items:center; gap:0.4rem; font-size:0.72rem; font-weight:700; color:var(--pe-teal); cursor:pointer; background:none; border:none; font-family:var(--pe-font); }

/* ════════════════════════════════════════════════════════════════════════
   ❓ HELP BUTTON (always visible)
   ════════════════════════════════════════════════════════════════════════ */

#adhc-help-fab {
  position:    fixed;
  bottom:      5.5rem;
  left:        1rem;
  width:       46px;
  height:      46px;
  border-radius: 50%;
  background:  var(--pe-teal);
  color:       #fff;
  font-size:   1.1rem;
  font-weight: 800;
  border:      none;
  cursor:      pointer;
  z-index:     8500;
  box-shadow:  0 4px 16px rgba(13,148,136,0.4);
  display:     flex;
  align-items: center;
  justify-content: center;
  transition:  all 0.2s ease;
  font-family: var(--pe-font);
}
#adhc-help-fab:hover { transform:scale(1.1); box-shadow:0 6px 24px rgba(13,148,136,0.5); }
#adhc-help-fab:active { transform:scale(0.95); }

/* ════════════════════════════════════════════════════════════════════════
   MOBILE
   ════════════════════════════════════════════════════════════════════════ */

@media (max-width: 414px) {
  .pe-panel { width:100vw; border-left:none; }
  .ob-card  { max-width:100%; border-radius:var(--pe-radius) var(--pe-radius) 0 0; align-self:flex-end; }
  #adhc-onboarding-overlay { align-items:flex-end; padding:0; }
  .fd-grid  { grid-template-columns:1fr 1fr; gap:0.45rem; }
  .pj-stat-grid { grid-template-columns:repeat(3,1fr); }
}

@media (max-width: 375px) {
  .ob-step-title { font-size:1.1rem; }
  .fd-card-title { font-size:0.75rem; }
  .hc-topic-title { font-size:0.82rem; }
}

/* ── Reduce motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .ob-card, .pe-panel, .tut-bubble, .tut-spotlight {
    animation: none !important; transition: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   UI HOTFIX — Help Button & Tooltip Visibility
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Help FAB: pill shape with label, always visible ─────────────────── */
#adhc-help-fab {
  position:       fixed !important;
  bottom:         5.5rem !important;
  left:           20px !important;          /* 20px from edge, never clipped */
  right:          auto !important;
  width:          auto !important;
  min-width:      120px !important;
  height:         52px !important;
  border-radius:  999px !important;         /* pill shape */
  background:     #0d9488 !important;
  color:          #ffffff !important;
  font-size:      0.88rem !important;
  font-weight:    800 !important;
  border:         none !important;
  cursor:         pointer !important;
  z-index:        8500 !important;
  box-shadow:     0 4px 16px rgba(13,148,136,0.4) !important;
  display:        flex !important;
  align-items:    center !important;
  justify-content: center !important;
  gap:            0.4rem !important;
  padding:        0 1.1rem !important;
  font-family:    'Inter', system-ui, sans-serif !important;
  letter-spacing: 0.1px !important;
  /* Subtle pulse — calm, healthcare feel */
  animation:      help-fab-pulse 3s ease-in-out infinite !important;
  transition:     transform 0.2s ease, box-shadow 0.2s ease !important;
}

@keyframes help-fab-pulse {
  0%,100% { box-shadow: 0 4px 16px rgba(13,148,136,0.35); }
  50%      { box-shadow: 0 4px 24px rgba(13,148,136,0.55); }
}

#adhc-help-fab:hover {
  transform:  scale(1.04) !important;
  box-shadow: 0 6px 24px rgba(13,148,136,0.5) !important;
  animation:  none !important;
}

#adhc-help-fab:active {
  transform:  scale(0.96) !important;
}

/* Tooltip for Help FAB — appears above the button */
#adhc-help-fab::after {
  content:        'Need help using Aastha? Tap here!';
  position:       absolute;
  bottom:         calc(100% + 8px);
  left:           0;
  transform:      none;
  background:     #0f172a;
  color:          #fff;
  font-size:      0.65rem;
  font-weight:    700;
  white-space:    nowrap;
  padding:        5px 10px;
  border-radius:  7px;
  pointer-events: none;
  opacity:        0;
  transition:     opacity 0.2s ease;
  z-index:        9999;
  box-shadow:     0 4px 12px rgba(0,0,0,0.25);
}

#adhc-help-fab:hover::after { opacity: 1; }

/* ── Header Tooltips — open downward to avoid clipping ────────────────── */
/* Override the upward ::after direction set in Sprint 4B.1
   to open DOWNWARD on screens where header is at the top */
.companion-header-actions .companion-header-btn::after {
  /* Reposition: below button instead of above */
  bottom:    auto !important;
  top:       calc(100% + 8px) !important;
  transform: translateX(-50%) scale(0.92) !important;
}

.companion-header-actions .companion-header-btn::before {
  /* Arrow points upward toward button */
  bottom:           auto !important;
  top:              calc(100% + 3px) !important;
  border-top-color: transparent !important;
  border-bottom-color: #0f172a !important;
  transform:        translateX(-50%) !important;
}

.companion-header-actions .companion-header-btn:hover::after,
.companion-header-actions .companion-header-btn.tooltip-visible::after {
  opacity:   1 !important;
  transform: translateX(-50%) scale(1) !important;
}

/* Ensure tooltip doesn't go off right edge for last button */
.companion-header-actions .companion-header-btn:last-child::after {
  left:      auto !important;
  right:     0 !important;
  transform: scale(0.92) !important;
}
.companion-header-actions .companion-header-btn:last-child:hover::after {
  transform: scale(1) !important;
}

/* ── Mobile: Help FAB label adjustments ───────────────────────────────── */
@media (max-width: 414px) {
  #adhc-help-fab {
    min-width: 100px !important;
    height:    48px !important;
    font-size: 0.82rem !important;
    padding:   0 0.85rem !important;
  }
}

/* ── Reduce motion ────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  #adhc-help-fab { animation: none !important; }
}