/* ─────────────────────────────────────────────────────────────────
   css/ai-helper-tabs.css
   --------------------------------------------------------------------
   2026-05-25 (Luke) — three-tab header for the AI Board Assistant
   left rail.

   The rail's top now carries three tabs:
     [🌍 Community]  [🔨 Build]  [✨ Assistant]

   - Community = nav action (opens /community in the in-place panel).
                  panel-router.js binds the data-panel-route attribute;
                  doesn't change rail-mode.
   - Build (default) = templates + AAC/Routine/Lesson mode tabs are
                       visible in the rail. Chat is compressed under
                       them. Today's default view.
   - Assistant = chat fills the entire rail. Templates + mode tabs
                 hidden. "Do it all by talking."

   Mode is driven by the data-rail-mode attribute on #aiHelper,
   set + persisted by ai-helper-template.js (localStorage key
   tinky.builder.railMode.v1).

   The previous Board-Assistant title + single Community pill
   (lines deleted from ai-helper-template.js) are REPLACED by this
   tab row — visual real estate stays roughly the same.

   LABEL: PILOT-READY.
───────────────────────────────────────────────────────────────── */

.ai-helper-tabs {
  display: flex;
  gap: 0.3rem;
  padding: 0.4rem;
  background: rgba(0, 0, 0, 0.04);
  border-bottom: 1px solid var(--border, #e0e0e0);
  align-items: stretch;
}

.ai-rail-tab {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  padding: 0.55rem 0.5rem;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  color: rgba(0, 0, 0, 0.7);
  font-weight: 600;
  font-size: 0.82rem;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
  min-height: 44px; /* WCAG tap floor */
  text-align: center;
  line-height: 1.1;
}

.ai-rail-tab:hover {
  background: rgba(0, 0, 0, 0.06);
}

.ai-rail-tab:focus-visible {
  outline: 2px solid var(--accent, #FF9800);
  outline-offset: 2px;
}

/* Active mode tab — Build or Assistant. Community is never marked
   .active in the rail because its action is navigational, not modal. */
.ai-rail-tab.active {
  background: #fff;
  color: var(--ink, #222);
  border-color: var(--border, #d0d0d0);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

/* Community tab gets a brand-blue tint to differentiate it from
   the mode tabs (it's a nav action, conceptually different). */
.ai-rail-tab.community {
  color: #1976D2;
}
.ai-rail-tab.community:hover {
  background: rgba(25, 118, 210, 0.08);
}

/* ─── ASSISTANT MODE — full-rail chat ────────────────────────
   When the rail is in Assistant mode, hide everything except
   the chat history + input row. The chat expands to fill the
   rail because the panels above/below are removed from flow.

   Targets:
   1. .ai-helper-smart-templates — Smart Templates panel (Daily
      Schedule / Simple Grid / Social Story / Build a Game / Build
      a Lesson) injected by smart-templates.js as a sibling .details
      element with that class.
   2. #aiModeToggle — AAC/Routine/Lesson mode pill row at the
      bottom of the chat area, injected by ai-mode-toggle.js.
   Both are dynamically inserted; CSS reaches them by class/id
   regardless of DOM position. */
.ai-helper[data-rail-mode="assistant"] .ai-helper-smart-templates,
.ai-helper[data-rail-mode="assistant"] #aiModeToggle {
  display: none !important;
}

/* In Assistant mode, make the chat history visually bigger so
   it actually takes the freed real estate. */
.ai-helper[data-rail-mode="assistant"] .ai-chat {
  flex: 1 1 auto;
  min-height: 60vh;
}

/* In Build mode (default), keep today's behavior — Smart Templates
   + mode tabs visible. Chat sits at the bottom in its compressed
   form. Explicit selector kept for forward-compat with future
   per-mode tweaks. */
.ai-helper[data-rail-mode="build"] .ai-helper-smart-templates,
.ai-helper[data-rail-mode="build"] #aiModeToggle {
  /* default visibility — explicit no-op so the cascade is obvious */
  display: revert;
}

/* ─── COMMUNITY MODE — hide AI surface + Smart Templates ───────
   2026-05-25 (Luke): "the top board builder / my dashboard / school
   boards / community / curriculum at the top nav, all that should
   be inside our left-hand side sidebar community." Community is now
   a real rail mode (3rd tab). When active, the rail body shows
   ONLY the in-rail Community Nav (Board Builder / My Dashboard /
   My Devices / School Boards / Community / Curriculum /
   Notifications), injected by community-nav-rail.js into
   #accCommunityNav.

   Hide:
     .ai-chat / .ai-suggestions / .ai-input-row / .ai-reset-hint
       — AI surface (irrelevant when browsing dashboards)
     .ai-helper-smart-templates — handled by community-nav-rail.js
       CSS via #accSmartTemplates; that rule sits in the dynamically
       injected <style id="community-nav-rail-style">, NOT here, so
       we don't double-define it.
     #aiModeToggle — AAC/Routine/Lesson mode toggle is a Build-time
       affordance, not relevant to nav. */
.ai-helper[data-rail-mode="community"] .ai-chat,
.ai-helper[data-rail-mode="community"] .ai-suggestions,
.ai-helper[data-rail-mode="community"] .ai-input-row,
.ai-helper[data-rail-mode="community"] .ai-reset-hint,
.ai-helper[data-rail-mode="community"] #aiModeToggle {
  display: none !important;
}

/* ─── HIDE LEGACY TOPBAR NAV ROW (ALL SCREENS) ──────────────────
   2026-05-25 (Luke spec): the topbar row containing Board Builder /
   My Dashboard / My Devices / School Boards / Community / Curriculum
   moves wholesale into the in-rail Community Nav (see
   community-nav-rail.js).

   V2 NOTE — earlier scoped this to @media (min-width: 921px) after
   Codex flagged "unreachable on mobile." That fix was wrong. Restoring
   #topbarNav on mobile created severe topbar overlap (action buttons +
   nav links + board name input all squishing into <500px). The real
   mobile nav path is hamburger ≡ → sidebar opens → Community rail tab
   → in-rail Community Nav. That chain DOES work on mobile (verified
   2026-05-25), so #topbarNav is correctly redundant on every viewport.

   The element + child IDs (#navDashboard / #navDevices / #navBoards /
   #navCommunity / #navCurriculum) STAY in the DOM — login.js still
   sets href values, role-based-nav.js filters by role, panel-router
   still binds clicks. Only the visual surface moves. !important
   required because login.js does `_tn.style.display = ''` for authed
   users (inline style would beat a non-important rule). */
#topbarNav { display: none !important; }

/* 2026-05-26 (Luke): also hide SLP / Games / Practice pills from the
   topbar across ALL widths. Those tools live in their dedicated
   surfaces (clinician dashboards / game launcher / practice tracker)
   and don't belong as top-level builder topbar entries inside the
   community shell. The mobile-only hide on the practice pill at
   line ~190 above stays as belt-and-suspenders. */
#lessonModeSlpPill,
#gamesLauncherPill,
.practice-tracker-pill { display: none !important; }

/* ─── MOBILE TOPBAR CLEANUP (≤640px phone widths) ───────────────
   2026-05-25 (Luke + Codex stop-gate v2): #topbarNav hidden left
   the action row still overlapping on phones because too many
   sub-modules self-mount their own pill. >8 pills + board-name +
   auth controls in ~360px = squish chaos in Luke's screenshot.

   V1 over-corrected: I hid #topbarDeviceDD + #topbarStudentsDD.
   Codex caught — those dropdowns CONTAIN required builder actions:
     #topbarDeviceDD   → Download / Print / Push to Device / Settings
     #topbarStudentsDD → Sessions / Roster / Schedule / Push to Class
   Hiding the wrappers strands users from saving + sharing their
   work, which is the whole point of the builder.

   V2 rule: keep the dropdowns (their trigger button is one pill;
   their panel is overlay so it doesn't compete for row real estate).
   Hide only the truly-extra standalone pills + redundant board-name.

   Kept on phone:
     ≡ hamburger / brand / 👥 Students dropdown (Push to Class) /
     📱 Device dropdown (Download / Print / Push to Device / Settings) /
     📝 Worksheet / 👁️ Preview / 🛡️ Accessibility /
     lang picker / user avatar / Sign Up / Sign In

   Hidden on phone (non-essential — rarely invoked, no save/share risk):
     #deviceSwitcherPill   — multi-device preview (irrelevant on phone)
     #obzImportPill        — OBZ board import (clinician import flow)
     #gamesLauncherPill    — Games (tablet-canvas overlay)
     #lessonModeSlpPill    — SLP lesson editor (clinician)
     .practice-tracker-pill — Practice/homework tracker (clinician)
     #boardNameInput       — clipped behind Local-only pill anyway;
                              workspace header already shows board name

   If row still overflows after this, the next move is collapsing
   the remaining pills (Worksheet/Preview/Accessibility) into a
   single ⋮ menu — but that's a bigger refactor and we test mobile
   density first. */
@media (max-width: 640px) {
  #deviceSwitcherPill,
  #obzImportPill,
  #gamesLauncherPill,
  #lessonModeSlpPill,
  .practice-tracker-pill,
  #boardNameInput {
    display: none !important;
  }

  /* 2026-05-25 v3 — free up ~125px so .topbar-actions stops being
     flex-squeezed to width:0 by the auth row. Sign Up hidden (Sign
     In page has signup flow inline). User name text hidden (avatar
     circle stays at 32px and conveys auth state). */
  #topbarSignUp {
    display: none !important;
  }
  #topbarUser #userName {
    display: none !important;
  }

  /* 2026-05-25 v6 — Codex caught: v5 added overflow-x:auto +
     overflow-y:hidden on .topbar to enable horizontal scroll, but
     that broke dropdown panels (Device / Students). CSS spec
     coerces overflow-y to auto when overflow-x is non-visible,
     making the topbar a scroll container that CLIPS absolute-
     positioned descendants vertically. Verified at 360w: the Device
     dropdown panel's getBoundingClientRect said it extended to
     y=246, but the visual rendering was clipped at y=60 (topbar
     bottom) — Push to Device menu unreachable.

     v6 fix (different strategy): keep .topbar at default overflow
     so dropdown panels render below their trigger unclipped. Hide
     ALL action pills on phone EXCEPT the Device dropdown. Other
     actions (Worksheet, Preview, Symbols, Undo, Redo) are ALREADY
     reachable via the editor toolbar that sits directly below the
     topbar in mobile layout. The clinician/IEP pills (Students,
     SLP, Practice, Games, Import) aren't field-use surfaces.
     Device dropdown is the only TOPBAR-EXCLUSIVE essential action
     (it contains Download / Print / Push to Device / Settings —
     primary save + share + config), so it's the only one that
     must stay in the topbar.

     Math at 360w guest:
       Hamburger 44 + Brand 79 + Device DD ~90 + cloud 30 +
       avatar 32 + Sign In 62 + gaps = ~340px < 360px viewport. */
  /* 2026-05-26 — extended :not() chain so Worksheet, Students DD,
     and Accessibility pill stay visible at phone widths (Codex HIGH +
     MEDIUM findings). Spec 100×4 = beats single-id overrides. Only
     truly-non-essential pills (Practice/Games/SLP/Import) get hidden. */
  .topbar-actions > *:not(#topbarDeviceDD):not(#worksheetBtn):not(#topbarStudentsDD):not(#a11yTopbarPill) {
    display: none !important;
  }
  /* Override pre-existing builder-mobile.css:400 rule that sets
     overflow-x:auto on .topbar at ≤768px. That rule was a "final
     safety net so nothing ever clips silently" — but in practice
     it makes browsers auto-promote overflow-y to auto too (CSS
     spec coercion), which CLIPS absolute-positioned dropdown
     panels (Device / Students) at the topbar's 60px bottom edge.
     Since my v6 hides every action pill except Device DD, the
     topbar contents fit inside the viewport with zero overflow
     risk — the safety net is no longer needed, and removing it
     lets the Device dropdown's panel render unclipped below its
     trigger. overflow:visible is the default but !important is
     required to beat builder-mobile.css's media-query rule. */
  .topbar {
    overflow: visible !important;
  }
}

/* ─── ENSURE DEVICE DROPDOWN STAYS AT 360w (iPhone SE) ──────────
   2026-05-26 (Codex stop-gate v6): builder-mobile.css:528 has
   a pre-existing rule that hides #topbarDeviceDD at @media
   max-width:360px on the rationale that the hamburger menu also
   carries a "Push to Device" item. That assumed-alternative path
   isn't visible everywhere (especially for users who haven't yet
   discovered the hamburger), so removing the topbar Device pill
   at the most common iPhone width strands them from save/share.

   Override: force Device DD visible at ≤360px. My ≤640px rule
   above already hides every OTHER action pill, so Device DD has
   the action-area to itself. The math (verified at 360w):
     Hamburger 44 + Brand 79 + Device DD 90 + cloud 30 +
     avatar 32 + Sign In 62 + gaps ≈ 340px — fits in 360px.
   Specificity beats the pre-existing rule because of !important. */
@media (max-width: 360px) {
  #topbarDeviceDD {
    display: flex !important;
  }
}

/* ─── CODEX MOBILE AUDIT FIXES (2026-05-26) ─────────────────────
   Block addresses 5 findings from the cross-cutting mobile audit:

   BLOCKER 2 (z-index collision builder.css:1068):
     Right drawer z-index:50 / 80vw, left rail z-index:49 / 86vw.
     Even with the events.js decoupling that closes one when the
     other opens, racy taps or future state bugs could cause both
     open simultaneously. Bumping the left rail to z-index:51 above
     the right sidebar guarantees rail wins if both ever show.

   HIGH 1 (.topbar-user hidden ≤480px, auth orphan):
     builder-mobile.css:482 collapses topbar-user entirely below 480
     so a signed-in user has NO visible account/logout affordance on
     phone. Override: keep avatar circle visible (no name text);
     tapping it opens the signout flow.

   HIGH 2 (#worksheetBtn hidden ≤768px, unreachable):
     builder-mobile.css:418 hides Worksheet on phone+tablet citing a
     hamburger menu fallback that isn't actually exposed in the
     current builder. Restore Worksheet at ≤640 (phone+small tablet)
     — it lives in the editor toolbar context (below topbar) so it
     doesn't compete with topbar pills. NOTE: editor toolbar already
     surfaces Preview, Worksheet sits naturally next to it.

   MEDIUM (Students / Accessibility unreachable on phone):
     My v6 .topbar-actions > *:not(#topbarDeviceDD) hides them. They
     can fit alongside Device on landscape phones (≥480px) — narrow
     to phone-only-narrowest (≤480) for the strict hide. */

/* Layer 1 — left-rail z-index safety net (BLOCKER 2). */
@media (max-width: 768px) {
  .ai-helper.ai-rail { z-index: 51 !important; }
}

/* Layer 2 — mobile toggle button visibility (mirrors hamburger). */
.topbar-leftrail-toggle { display: none; }
@media (max-width: 1024px) {
  .topbar-leftrail-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* Layer 3 — restore topbar-user avatar at ≤480px (HIGH 1). */
@media (max-width: 480px) {
  .topbar-user {
    display: flex !important;
    /* Override the existing hide; keep just the circle without name. */
  }
  .topbar-user #userName { display: none !important; }
}

/* Layer 4 — restore Worksheet at ≤640px (HIGH 2) + relax the
   strict v6 hide so Students + Accessibility also survive at
   ≤640px-but-≥481px (MEDIUM). Narrow my strict hide to <481px. */
/* Worksheet restored at wide-phone widths (Codex HIGH 2). Bumped
   specificity to beat builder-mobile.css's same-spec rule:
   .topbar-actions (10) + #id (100) = 110 > 100.
   At ≤480 (iPhone SE), Worksheet stays accessible via the existing
   topbar-overflow.js ⋮ menu (which auto-includes hidden topbar pills)
   — the original builder-mobile.css:418 design assumption. */
@media (max-width: 640px) and (min-width: 481px) {
  .topbar-actions #worksheetBtn { display: inline-flex !important; }
}
/* Students / Accessibility restored ONLY at tablet+ (641-1024px)
   where the topbar has room (puppeteer trace at 500w showed
   overlap with G avatar + Sign In when all 3 were on). On phones
   ≤640px these surface via the in-rail Community Nav drawer
   (Settings / Class roster will be wired there next session). */
@media (min-width: 641px) and (max-width: 1024px) {
  .topbar-actions #topbarStudentsDD { display: flex !important; }
  .topbar-actions #a11yTopbarPill { display: inline-flex !important; }
}

/* ─── BUILD MODE — hide ALL AI surface ────────────────────────
   2026-05-25 (Luke): "Build we don't need show the ai on the panel
   just the build features." Build is for hand-building boards from
   templates / mode-tabs. The AI greeting card + chat history +
   prompt input + Start-over hint + suggestion chips collectively
   ARE the AI surface — they all belong to Assistant mode only.

   Hide them in Build so the rail body is purely:
     [Smart Templates panel]
     [AAC / Routine / Lesson mode toggle pill]
   ...and nothing else.

   Targets (all live INSIDE .ai-helper-body — verified 2026-05-25):
     .ai-chat        — greeting bubble + later chat history
     .ai-suggestions — hidden by default but defensive
     .ai-input-row   — "Describe a board…" input + Build → button
     .ai-reset-hint  — "↺ Start over" pill (only visible after a build)
   The .ai-helper-body wrapper itself stays visible so Smart Templates
   + mode toggle (also inside it) render normally. */
.ai-helper[data-rail-mode="build"] .ai-chat,
.ai-helper[data-rail-mode="build"] .ai-suggestions,
.ai-helper[data-rail-mode="build"] .ai-input-row,
.ai-helper[data-rail-mode="build"] .ai-reset-hint {
  display: none !important;
}