/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Layout constants for staffing timeline */
:root {
  --layout-inset-width: 20px;
  --layout-nav-height: 64px;
  --layout-first-column-width: 175px;
  --layout-total-column-width: 204px;
  --layout-week-width-collapsed: 120px;
  --layout-week-width-stretched: 200px;
  --layout-page-bg: rgb(249, 250, 251);
  --layout-border-color: rgb(229, 231, 235);
  --layout-box-shadow-offset: -26px;

  /* Z-index layers - modals must be above nav (10002) and escape transform stacking contexts */
  --z-modal: 10010;
  --z-modal-backdrop: 10010;
}

/* Reset default browser styles on <dialog> elements.
   Must be in @layer base so Tailwind utilities (max-w-sm, etc.) can override. */
@layer base {
  dialog {
    padding: 0;
    border: none;
    max-width: none;
    max-height: none;
  }
}

/* Disable vertical bounce on staffing timeline pages (expanded mode) */
body[data-expanded-mode] {
  overscroll-behavior-y: none;
}

/* On smaller screens in horizontal mode, kanban takes full height (chat/files hidden) */
/* Hide chat/files when viewport is below 1024px wide (matches Tailwind lg: breakpoint) */
/* This ensures the bottom panel only shows when there's enough width for chat (420px) + files (420px) + gaps */
@media (max-width: 1023px) {
  body[data-expanded-mode] [data-resizable-horizontal-split-target="top"] {
    height: 100% !important;
    flex: 1 !important;
    max-height: none !important;
  }
  body[data-expanded-mode]
    [data-resizable-horizontal-split-target="kanbanInner"] {
    padding-bottom: 1rem;
  }
  body[data-expanded-mode] [data-resizable-horizontal-split-target="handle"] {
    display: none !important;
  }
  body[data-expanded-mode] [data-resizable-horizontal-split-target="bottom"] {
    display: none !important;
  }
  /* Reset all kanban columns to equal flex widths on tablet/mobile */
  /* Desktop saved widths don't make sense at narrow viewport sizes */
  body[data-expanded-mode] [data-resizable-columns-target="column"] {
    flex: 1 1 0% !important;
  }
}

/* On large screens, apply max-height constraint to kanban so bottom panel has room */
@media (min-width: 1024px) {
  body[data-expanded-mode]
    [data-resizable-horizontal-split-target="top"]:not(
      [data-horizontal-split-both-hidden="true"]
    ) {
    max-height: calc(100% - 282px);
    min-height: 175px;
  }
}

/* Hide header buttons and column resize handles on narrow screens */
@media (max-width: 439px) {
  body[data-expanded-mode] [data-horizontal-header-hide] {
    display: none !important;
  }
  body[data-expanded-mode] [data-resizable-columns-target="handle"] {
    display: none !important;
  }
  /* Also hide responsive spacer handles added dynamically */
  body[data-expanded-mode] [data-responsive-spacer="true"] {
    display: none !important;
  }

  /* Make kanban columns full width for horizontal scrolling */
  body[data-expanded-mode] #kanban-board > .flex {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  body[data-expanded-mode] [data-resizable-columns-target="column"] {
    flex: 0 0 calc(100vw - 2rem) !important;
    min-width: calc(100vw - 2rem) !important;
    max-width: calc(100vw - 2rem) !important;
    scroll-snap-align: start;
  }

  /* Chat slot in kanban: show on portrait, hide on landscape (below lg breakpoint) */
  body[data-expanded-mode] #kanban-chat-slot {
    flex: 0 0 calc(100vw - 2rem) !important;
    min-width: calc(100vw - 2rem) !important;
    max-width: calc(100vw - 2rem) !important;
    scroll-snap-align: start;
  }
}

/* Hide chat on mobile landscape orientation (horizontal phone layout is too cramped) */
/* Also hide Chat/Files badges in hidden indicator (can't show those panels on mobile landscape) */
/* Hide the entire hidden indicator if it only contains Chat/Files badges (no column badges) */
@media (max-width: 1023px) and (orientation: landscape) {
  #kanban-chat-slot {
    display: none !important;
  }
  /* Also hide the chat slot handle when chat slot is hidden */
  #kanban-chat-slot-handle {
    display: none !important;
  }
  [data-hidden-badge-chat],
  [data-hidden-badge-files] {
    display: none !important;
  }
  /* Hide indicator if it has no column priority badges (only Chat/Files which are hidden) */
  [data-resizable-horizontal-split-target="hiddenIndicator"]:not(
    :has([data-column-priority])
  ) {
    display: none !important;
  }
}

/* Hide chat hide button on mobile portrait (chat is forced visible there) */
@media (max-width: 1023px) and (orientation: portrait) {
  [data-chat-hide-button] {
    display: none !important;
  }
}

/* Nav collapse button - visible on mobile (both orientations) */
[data-nav-collapse-button] {
  display: none;
}
@media (max-width: 1023px) {
  [data-nav-collapse-button] {
    display: block;
  }
}

/* Make feature modal full viewport on mobile, overlaying nav */
@media (max-width: 439px) {
  body[data-expanded-mode] [data-feature-modal-target="modal"] {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 10010 !important;
  }
  body[data-expanded-mode] [data-feature-modal-target="container"] {
    inset: 0.5rem !important;
  }
  body[data-expanded-mode] [data-feature-modal-target="title"] {
    font-size: 1rem !important;
  }
}

/* Hide files panel in horizontal mode based on visible panel count */
/* Users can still access files via the +file icon in chat header */
/* 3 panels visible (chat + files + popped): hide files below 1280px */
@media (max-width: 1279px) {
  body[data-expanded-mode]
    [data-bottom-panel-count="3"]
    [data-files-panel-split-target="chat"] {
    min-width: 0 !important;
    flex: 1 !important;
  }
  body[data-expanded-mode]
    [data-bottom-panel-count="3"]
    [data-files-panel-split-target="files"] {
    display: none !important;
  }
  body[data-expanded-mode]
    [data-bottom-panel-count="3"]
    [data-files-panel-split-target="handle"] {
    display: none !important;
  }
}

/* 2 panels visible (chat + files): hide files below 1024px (min widths: 420+420=840px + padding) */
@media (max-width: 1023px) {
  body[data-expanded-mode]
    [data-bottom-panel-count="2"]
    [data-files-panel-split-target="chat"] {
    min-width: 0 !important;
    flex: 1 !important;
  }
  body[data-expanded-mode]
    [data-bottom-panel-count="2"]
    [data-files-panel-split-target="files"] {
    display: none !important;
  }
  body[data-expanded-mode]
    [data-bottom-panel-count="2"]
    [data-files-panel-split-target="handle"] {
    display: none !important;
  }
}

/* 1 panel visible (files only): never hide via media query, only via explicit user action */
/* No CSS rule needed - files stays visible at all viewport widths */

/* Vertical layout: hide kanban and show chat full width below 768px */
@media (max-width: 767px) {
  /* Left panel (chat+files) takes full width on small screens */
  [data-vertical-left-panel] {
    flex: 1 !important;
    min-width: 0 !important;
  }
  /* Add right padding to match left padding on small screens */
  [data-vertical-left-panel] [data-left-panel-inner] {
    padding-right: 1rem;
  }
  /* Hide kanban (right panel) and resize handle on small screens */
  [data-vertical-right-panel] {
    display: none !important;
  }
  [data-vertical-handle] {
    display: none !important;
  }
}

/* Nav content wrapper for expanded/fullscreen pages: when --nav-content-width
   is set (by staffing timeline), uses that width so the nav items align with
   the page content below. Otherwise no max-width constraint (full width). */
.nav-content-wrapper {
  max-width: var(--nav-content-width, none);
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

/* Fullscreen mode for wide tables - scrolls horizontally when wider than viewport.
   Horizontal padding is on the content div (px-5), not main, so the padding is part
   of the element's box and included in the scroll area for breathing room. */
main.fullscreen-mode {
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 0;
}

/* Center content when viewport is wider than tables */
main.fullscreen-mode > div {
  margin-left: auto;
  margin-right: auto;
}

/* Pre-position freeze-container elements to prevent FOUC when JS upgrades them
   to position: fixed. Sticky + left keeps them at 20px inset during horizontal scroll.
   max-width constrains to viewport so elements don't push page wider before JS runs. */
main.fullscreen-mode [data-controller~="freeze-container"] {
  position: sticky;
  left: 20px;
  max-width: calc(100vw - 40px);
  overflow-x: clip;
  z-index: 100;
}

/* Sortable drag-and-drop placeholder (shows where item will drop) */
.sortable-ghost {
  opacity: 0.8;
  background: #dbeafe !important;
  border: 2px dashed #3b82f6 !important;
  border-radius: 0.5rem;
}

.sortable-ghost * {
  opacity: 0.7;
}

/* Source card that stays in place while dragging (faded) */
.sortable-source {
  opacity: 0.3 !important;
}

/* ── Drag collapse: questions ── */
/* Hide everything inside question cards except the question text */
[data-dragging="questions"] [data-question-id] [data-question-edit],
[data-dragging="questions"] [data-question-id] [data-options-display],
[data-dragging="questions"] [data-question-id] [data-question-badges],
[data-dragging="questions"] [data-question-id] details,
[data-dragging="questions"] [data-question-id] hr {
  display: none !important;
}

/* Compact card padding and spacing */
[data-dragging="questions"] [data-sortable-group] [data-question-id] {
  padding: 0.25rem 0 !important;
  margin-bottom: 0 !important;
  border: none !important;
  border-radius: 0 !important;
}

/* Borders: every parent container gets a bottom border except the last */
[data-dragging="questions"] [data-sortable-group] > [data-parent-container] {
  border-bottom: 1px solid #e5e7eb !important;
}

[data-dragging="questions"]
  [data-sortable-group]
  > [data-parent-container]:last-child {
  border-bottom: none !important;
}

/* Follow-ups: full-width rows, indented via handle padding, separated by top borders */
[data-dragging="questions"] [data-follow-ups-container] {
  margin-left: 0 !important;
}

/* First follow-up: top border separates from parent question */
[data-dragging="questions"]
  [data-follow-ups-container]
  > [data-question-id]:first-child {
  border-top: 1px solid #e5e7eb !important;
}

/* Between sibling follow-ups: single separator */
[data-dragging="questions"]
  [data-follow-ups-container]
  > [data-question-id]
  + [data-question-id] {
  border-top: 1px solid #e5e7eb !important;
}

[data-dragging="questions"] [data-follow-ups-container] [data-drag-handle] {
  padding-left: 1.25rem !important;
}

/* Compact the group content container */
[data-dragging="questions"] [data-sortable-group] {
  padding: 0 !important;
  overflow: hidden !important;
  gap: 0 !important;
  --tw-space-y-reverse: 0 !important;
}

[data-dragging="questions"] [data-sortable-group] > * {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Center-align drag handle + text when collapsed to single line */
[data-dragging="questions"] [data-question-id] [data-question-row] {
  align-items: center !important;
  padding-left: 0.75rem !important;
  padding-right: 0.75rem !important;
}

[data-dragging="questions"] [data-question-id] [data-drag-handle] {
  padding-top: 0 !important;
}

/* Truncate long question text to one line */
[data-dragging="questions"] [data-question-id] [data-question-display] {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* In reorder mode, use background highlight instead of blue ring for kbd focus */
[data-dragging] .kbd-focus {
  box-shadow: none !important;
  background-color: #eff6ff !important; /* blue-50 */
}
[data-dragging] .kbd-focus[data-reorder-expanded] {
  background-color: transparent !important;
}
[data-dragging] .kbd-focus-hidden {
  box-shadow: none !important;
}

/* ── Reorder mode: expanded card overrides ── */
/* Undo collapse for the one card the user clicked to inspect */
[data-dragging="questions"]
  [data-question-id][data-reorder-expanded]
  [data-options-display],
[data-dragging="questions"]
  [data-question-id][data-reorder-expanded]
  [data-question-badges],
[data-dragging="questions"]
  [data-question-id][data-reorder-expanded]
  [data-question-actions],
[data-dragging="questions"] [data-question-id][data-reorder-expanded] details,
[data-dragging="questions"] [data-question-id][data-reorder-expanded] hr {
  display: revert !important;
}

[data-dragging="questions"] [data-question-id][data-reorder-expanded] {
  padding: 1rem !important;
  border: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
}

[data-dragging="questions"]
  [data-question-id][data-reorder-expanded]
  [data-question-row] {
  align-items: start !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

[data-dragging="questions"]
  [data-question-id][data-reorder-expanded]
  [data-drag-handle] {
  padding-top: 0.125rem !important;
}

[data-dragging="questions"]
  [data-question-id][data-reorder-expanded]
  [data-question-display] {
  overflow: visible !important;
  white-space: normal !important;
  text-overflow: unset !important;
}

/* Allow question editor to show when JS removes .hidden on expanded card */
[data-dragging="questions"]
  [data-question-id][data-reorder-expanded]
  [data-question-edit]:not(.hidden) {
  display: block !important;
}

/* Remove inherited border-bottom from nested elements that have data-question-id */
[data-dragging="questions"]
  [data-question-id][data-reorder-expanded]
  [data-question-id] {
  border: none !important;
}
/* Restore add-option input styling in expanded card */
[data-dragging="questions"]
  [data-question-id][data-reorder-expanded]
  [data-add-option-input] {
  border: 1px solid #d1d5db !important;
  border-radius: 0.375rem !important;
  padding: 0.5rem !important;
}
[data-dragging="questions"]
  [data-question-id][data-reorder-expanded]
  [data-add-option-input]:hover {
  border-color: #d1d5db !important;
}
[data-dragging="questions"]
  [data-question-id][data-reorder-expanded]
  [data-add-option-input]:focus {
  border-color: #60a5fa !important;
}

/* Option editor border in expanded reorder card — match Lexxy editor border */
[data-dragging="questions"]
  [data-question-id][data-reorder-expanded]
  .option-editor-wrapper:not(.hidden) {
  border: 1px solid var(--lexxy-color-ink-lighter, oklch(85% 0 0)) !important;
  border-radius: 0.5rem !important;
  overflow: hidden !important;
  padding: 0 !important;
}
[data-dragging="questions"]
  [data-question-id][data-reorder-expanded]
  .option-lexxy-editor {
  padding: 0 !important;
}

/* Override SortableJS inline height on the fallback clone */
[data-dragging="questions"] .sortable-fallback[data-question-id] {
  height: auto !important;
  padding: 0.25rem 0 !important;
}

/* ── Drag collapse: groups ── */
/* Hide group content areas (questions inside) */
[data-dragging="groups"] [data-question-group-item] [data-sortable-group] {
  display: none !important;
}

/* Round header fully when content is hidden */
[data-dragging="groups"] [data-question-group-item] [data-group-header] {
  border-radius: 0.5rem !important;
  margin-top: 0 !important;
}

/* Override SortableJS inline height on the fallback clone */
[data-dragging="groups"] .sortable-fallback[data-question-group-item] {
  height: auto !important;
}

/* Reduce spacing between collapsed groups (override space-y-6 margins) */
[data-dragging="groups"] [data-groups-container] {
  --tw-space-y-reverse: 0 !important;
}

[data-dragging="groups"] [data-groups-container] > * {
  margin-top: 0 !important;
  margin-bottom: 0.25rem !important;
}

/* The fallback clone that follows the cursor (created by forceFallback) */
.sortable-fallback {
  cursor: grabbing !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25) !important;
  z-index: 10000 !important;
  background: white !important;
  opacity: 0.95 !important;
  pointer-events: none !important;
  /* CRITICAL: Disable transitions so the fallback snaps to cursor position instantly.
     Without this, cards with transition-all will animate their transform property,
     causing the dragged card to lag behind the cursor instead of following it. */
  transition: none !important;
}

/* Add a slight tilt for kanban cards when dragging */
.sortable-fallback.kanban-card {
  rotate: 2deg;
}

/* The item being dragged */
.sortable-drag {
  cursor: grabbing !important;
}

/* Selected item before drag starts — keep pointer until actual drag */
.sortable-chosen {
  cursor: pointer !important;
}

/* Grab cursor for draggable items */
.sortable-item,
[data-sortable-item] {
  cursor: grab;
}

.sortable-item:active,
[data-sortable-item]:active {
  cursor: grabbing;
}

/* Bulk drag: Clear fallback styling so our custom stack shows */
.bulk-drag-fallback {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  outline: none !important;
}

/* Bulk drag: Clear ghost styling for custom drop placeholder */
.bulk-drag-ghost {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  outline: none !important;
  /* Reset height to fit content (ghost inherits original card dimensions) */
  height: auto !important;
  min-height: 0 !important;
  /* Width is set dynamically by JS to match cards in target column */
  /* Fallback min-width if JS can't measure (empty column) */
  min-width: 200px;
  display: block !important;
  opacity: 1 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  /* Prevent ghost from growing beyond its set width in flex containers */
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
}

/* Bulk drag: Drop placeholder content styling */
.bulk-drop-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  min-height: 80px;
  border: 2px dashed #60a5fa;
  border-radius: 0.5rem;
  background-color: #eff6ff;
  color: #2563eb;
  font-size: 0.875rem;
  font-weight: 500;
  padding: 1rem;
  gap: 0.25rem;
  box-sizing: border-box;
}

/* Bulk drag: Stacked cards container */
.bulk-drag-stack {
  position: relative;
  background: transparent;
}

/* Bulk drag: Count badge */
.bulk-drag-badge {
  position: absolute;
  top: -10px;
  right: -12px;
  width: 24px;
  height: 24px;
  background: #3b82f6;
  color: white;
  font-size: 12px;
  font-weight: bold;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  z-index: 10;
}

/* Bulk drag: Hide OTHER selected cards during drag (not the dragged card).
   display:none removes them from layout flow entirely so remaining cards
   reflow naturally and calculateLayout() measures accurate heights.
   The dragged card (SortableJS ghost) is never hidden — only other
   selected cards get this class, so SortableJS always has a valid ghost. */
.bulk-drag-hidden {
  display: none !important;
}

/* Bulk drag: Cloned card in stack */
.bulk-drag-clone {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  opacity: 1;
  pointer-events: none;
  background-color: white !important;
  overflow: hidden;
}

/* Bulk drag: Hide individual card hours in stack (total is shown below) */
.bulk-drag-clone [data-card-hours] {
  display: none;
}

/* Bulk drag: Hours indicator below the dragging stack */
.bulk-drag-hours {
  position: absolute;
  bottom: -28px;
  left: 50%;
  transform: translateX(-50%);
  background: #3b82f6;
  color: white;
  font-size: 12px;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 9999px;
  white-space: nowrap;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Bulk drag: All columns and dropzones get 2px dashed borders during drag */
.bulk-drag-column > div:first-child {
  /* Column header */
  border-width: 2px !important;
  border-style: dashed !important;
}

.bulk-drag-dropzone {
  border-width: 0 2px 2px 2px !important;
  border-style: dashed !important;
  overflow-x: hidden !important;
}

/* Bulk drag: Active column header gets thicker (3px) dashed border */
.bulk-drag-active-column > div:first-child {
  border-width: 3px !important;
  border-style: dashed !important;
}

/* Bulk drag: Active dropzone gets thicker (3px) dashed border, no top border (header has bottom) */
.bulk-drag-active-dropzone {
  border-width: 0 3px 3px 3px !important;
  border-style: dashed !important;
}

/* Bulk drag: Instant height changes during drag (no animation jitter).
   overflow:visible prevents clipping of dashed bottom borders when
   subpixel rounding makes the dropzone slightly taller than the column. */
[data-bulk-dragging] [data-kanban-rows-layout-target="column"] {
  transition: none !important;
  overflow: visible !important;
}

/* Bulk select: Use outline to avoid layout shift */
.kanban-card.bulk-selected {
  outline: 2px solid rgb(59 130 246); /* blue-500 */
  outline-offset: -2px; /* inset to cover the existing border */
  background-color: rgb(239 246 255); /* bg-blue-50 */
}

/* Kanban cards: Pointer cursor on hover (clickable to open details) */
.kanban-card:hover {
  cursor: pointer;
}

/* Bulk select: Selected cards show grab cursor (drag to move) */
.kanban-card.bulk-selected:hover {
  cursor: grab;
}

/* Grabbing cursor while actually dragging (sortable-fallback is the dragged ghost element) */
.sortable-fallback {
  cursor: grabbing !important;
}

/* During any kanban drag, force grabbing cursor on entire page */
[data-bulk-dragging="true"],
[data-bulk-dragging="true"] *,
body:has(.sortable-fallback),
body:has(.sortable-fallback) * {
  cursor: grabbing !important;
}

/* ===================== */
/* Story Map: Select & Reorder */
/* ===================== */

/* Story map card selection (reuses kanban bulk-selected visual) */
[data-story-map-card].bulk-selected {
  outline: 2px solid rgb(59 130 246);
  outline-offset: -2px;
  background-color: rgb(239 246 255) !important;
}

/* Story map feature cards: sizing and cursor */
[data-story-map-card] {
  cursor: pointer;
  min-height: 80px;
  max-height: 200px;
  overflow: hidden;
}

/* Grabbing cursor while dragging any story map element */
[data-dragging-features] *,
[data-dragging-columns] * {
  cursor: grabbing !important;
}

/* Hide empty feature placeholders while dragging */
[data-dragging-features] [data-empty-feature],
[data-dragging-columns] [data-empty-feature] {
  display: none !important;
}

/* Hide add-feature buttons while dragging */
[data-dragging-features] [data-add-feature],
[data-dragging-columns] [data-add-feature] {
  visibility: hidden !important;
}

/* Story map filter section: suppress input's own ring, show ring on parent filter section */
.story-map-search-input:focus {
  box-shadow: none !important;
  outline: none !important;
}

[data-story-map-target="filterSection"]:focus-within,
[data-story-map-target="filterSection"].story-map-filter-focused {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
  border-radius: 0.375rem;
}

/* Keyboard help bar kbd styling */
.story-map-kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  padding: 0.125rem 0.375rem;
  font-size: 0.75rem;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 0.25rem;
  line-height: 1.25rem;
}

/* Step containers maintain minimum height */
[data-story-map-target="skeletonContainer"] {
  min-height: 36px;
}

/* In reorder mode, full card is draggable (except add-activity button) */
[data-reorder-mode] [data-story-map-target="backboneCard"],
[data-reorder-mode] [data-story-map-target="backboneCard"] * {
  cursor: grab !important;
}

[data-reorder-mode] [data-story-map-target="backboneCard"] .group\/addAct,
[data-reorder-mode] [data-story-map-target="backboneCard"] .group\/addAct * {
  cursor: pointer !important;
}

[data-reorder-mode] [data-story-map-target="backboneCard"]:active,
[data-reorder-mode] [data-story-map-target="backboneCard"]:active * {
  cursor: grabbing !important;
}

/* Activity reorder: Ghost placeholder (drop target) — inset blue dashed card with text */
.activity-reorder-ghost {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.activity-reorder-ghost > [data-story-map-target="backboneLabel"] {
  background: #eff6ff !important; /* blue-50 */
  border: 2px dashed #93c5fd !important; /* blue-300 */
  box-sizing: border-box !important;
  box-shadow: none !important;
  color: #93c5fd !important; /* blue-300 */
  padding-left: 10px !important; /* px-3 minus 2px border */
  padding-right: 10px !important;
}

.activity-reorder-ghost > .group\/addAct {
  display: none !important;
}

/* Step reorder: Ghost placeholder (drop target) — inset yellow dashed card with text */
.step-reorder-ghost {
  position: relative;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.step-reorder-ghost > * {
  background: #fefce8 !important; /* yellow-50 */
  border: none !important;
  outline: 2px dashed #fcd34d !important; /* amber-300 */
  outline-offset: -2px !important;
  box-shadow: none !important;
  color: #fcd34d !important; /* amber-300 */
}

.step-reorder-ghost button {
  display: none !important;
}

/* Unassigned column: sticky to right edge of scroll container */
[data-unassigned-cell] {
  position: sticky;
  right: 0;
  padding-left: 8px;
}

/* Keep add-feature buttons at the bottom of their flex container always */
[data-add-feature] {
  order: 9999;
}

/* Feature card: Ghost placeholder (drop target) — dashed outline in priority color */
[data-story-map-card].feature-reorder-ghost {
  background-color: var(--ghost-bg, #f3f4f6) !important;
  border: 2px dashed var(--ghost-color, #9ca3af) !important;
  border-left-width: 2px !important;
  box-shadow: none !important;
  outline: none !important;
  border-radius: 0.25rem;
  color: var(--ghost-color, #9ca3af) !important;
  opacity: 0.5 !important;
}

/* Activity reorder: Fallback (dragged clone) — show only the blue card */
.activity-reorder-fallback {
  width: 168px !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  opacity: 1 !important;
  transition: none !important;
}

.activity-reorder-fallback > [data-story-map-target="backboneLabel"] {
  width: 100% !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

/* Hide add-activity button and drag handle in fallback */
.activity-reorder-fallback > .group\/addAct {
  display: none !important;
}

/* Step reorder: Fallback (dragged clone) — show only the yellow card */
.step-reorder-fallback {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  opacity: 1 !important;
  transition: none !important;
}

.step-reorder-fallback [data-story-map-target="skeletonCard"] {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

/* In reorder mode, steps and features are NOT draggable */
[data-reorder-mode] [data-story-map-target="skeletonContainer"] {
  cursor: default;
}

[data-reorder-mode] [data-story-map-card] {
  cursor: default;
}

/* Reorder mode: collapse backbone cards to single-step width + add-activity button */
[data-reorder-mode] [data-story-map-target="backboneCard"] {
  width: 196px !important;
}

/* Hide extra skeleton containers (keep first per step group) */
[data-reorder-mode]
  [data-story-map-target="skeletonContainer"]
  ~ [data-story-map-target="skeletonContainer"] {
  display: none !important;
}

/* Hide add-step buttons in reorder mode */
[data-reorder-mode] .group\/addStep {
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Hide step spacers in reorder mode */
[data-reorder-mode] [data-story-map-target="releaseRow"] > .w-\[20px\],
[data-reorder-mode] [data-story-map-target="moscowRow"] > .w-\[20px\] {
  visibility: hidden !important;
}

/* Hide extra drop cells per column (keep first per column-id) — handled by JS for now */

/* Hide unassigned column in reorder mode */
[data-reorder-mode] [data-unassigned-cell] {
  display: none !important;
}

/* Collapsed activity columns: hide card content in the first (kept) cell */
[data-collapse-hidden] > * {
  visibility: hidden !important;
}

/* 4px edge buffer so cards have 8px space at row edges */
[data-story-map-target="backboneRow"]
  > :nth-child(2):not([data-unassigned-cell]),
[data-story-map-target="skeletonRow"]
  > :nth-child(2):not([data-unassigned-cell]),
[data-story-map-target="releaseRow"]
  > :nth-child(2):not([data-unassigned-cell]),
[data-story-map-target="moscowRow"]
  > :nth-child(2):not([data-unassigned-cell]) {
  margin-left: 4px;
}

/* 4px right margin on the last element before each unassigned cell,
   so combined with existing padding it creates an 8px visual gap */
:has(+ [data-unassigned-cell]) {
  margin-right: 4px;
}

[data-unassigned-cell] {
  margin-left: auto;
  padding-right: 8px;
}

/* Prevent turbo-frame from expanding parent in flexbox layouts */
/* This allows wide gantt charts to scroll without forcing parent containers to expand */

/* Force overflow visible on all gantt cell right elements to allow text labels to overflow */
[data-gantt-cell-right] {
  overflow: visible !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
}
turbo-frame {
  min-width: 0;
}

/* Global button cursor - excludes buttons with explicit cursor classes */
button:not([class*="cursor-"]) {
  cursor: pointer;
}

/* Force cursor during drag/resize operations - body class takes precedence */
body.cursor-ew-resize * {
  cursor: ew-resize !important;
}
body.cursor-grabbing * {
  cursor: grabbing !important;
}
body.cursor-crosshair * {
  cursor: crosshair !important;
}

/* Make drag handle lighter and non-interactive when feature is expanded (either disclosure or estimates panel) */
[data-controller*="feature-toggle"]:has(
    [data-feature-estimates-inline-target="expanded"]:not([hidden])
  )
  .drag-handle,
[data-controller*="feature-toggle"]:has(
    [data-feature-toggle-target="disclosure"]:not([hidden])
  )
  .drag-handle {
  color: #d1d5db !important; /* gray-300 - two shades lighter than gray-500 */
  pointer-events: none;
  cursor: default !important;
}

[data-controller*="feature-toggle"]:has(
    [data-feature-estimates-inline-target="expanded"]:not([hidden])
  )
  .drag-handle:hover,
[data-controller*="feature-toggle"]:has(
    [data-feature-toggle-target="disclosure"]:not([hidden])
  )
  .drag-handle:hover {
  color: #d1d5db !important; /* Keep same color on hover */
}

/* Show drag handle in collapsed mode (minimal mode) */
.feature-collapsed .drag-handle {
  /* Visible in minimal mode */
}

/* Remove negative margin from drag handle SVG in minimal mode */
.feature-collapsed .drag-handle svg {
  margin-left: 0 !important;
}

/* ===========================================
   Generic keyboard navigation focus indicators
   Used by all navigable nodes and containers
   =========================================== */

/* Primary focus state - bright blue ring */
.kbd-focus {
  outline: none !important;
  --tw-ring-color: #3b82f6; /* blue-500 */
  box-shadow: 0 0 0 2px var(--tw-ring-color) !important;
  border-color: transparent !important;
}

/* Hidden focus state - subtle blue ring indicating position is preserved */
.kbd-focus-hidden {
  outline: none !important;
  --tw-ring-color: rgb(191 219 254); /* blue-200 */
  box-shadow: 0 0 0 2px var(--tw-ring-color) !important;
  border-color: transparent !important;
}

/* Search-hidden features */
.search-hidden {
  display: none !important;
}

/* Feature-specific scroll margins (features need extra space for expanded panels) */
.feature-focused {
  scroll-margin-top: 80px;
  scroll-margin-bottom: 175px;
}

.feature-focus-hidden {
  scroll-margin-top: 80px;
  scroll-margin-bottom: 175px;
}

/* Base padding for all role rows to prevent shifting */
[data-role-buttons] {
  padding: 0.25rem;
  margin-left: -0.25rem;
  margin-right: -0.25rem;
  margin-top: -0.25rem;
  margin-bottom: -0.25rem;
}

.role-focused {
  background-color: rgba(0, 0, 0, 0.06);
  border-radius: 0.375rem;
}

.role-focused .button-focused {
  outline: 2px solid #2563eb !important;
  outline-offset: 2px;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2) !important;
  scroll-margin-top: 80px;
  scroll-margin-bottom: 175px;
}

/* Shortcut key indicators - only show when scope is active */
.shortcut-key {
  text-decoration: none;
  font-weight: inherit;
}

/* Show underlines when the shortcut is active */
.shortcut-key[data-shortcut-active="true"],
[data-shortcut][data-shortcut-active="true"] .shortcut-key {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* Consistent underline styling on shortcut indicators */
.shortcut-key,
u {
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

/* Sidebar toggle: underline the right half of the chevron icon (the shortcut key half) */
.sidebar-shortcut-icon {
  position: relative;
  display: inline-flex;
}

[data-shortcut][data-shortcut-active="true"] .sidebar-shortcut-icon::after {
  content: "";
  position: absolute;
  bottom: -2px;
  right: 0;
  width: 50%;
  border-bottom: 1px solid currentColor;
}

/* Hide estimate button popovers when feature is expanded */
[data-feature-estimates-inline-target="collapsed"]:has(
    + [data-feature-estimates-inline-target="expanded"]:not([hidden])
  )
  [popover] {
  display: none !important;
}

/* Collapsed feature view - show only essentials */
.feature-collapsed {
  /* Fixed height to match role focus bar for popout alignment */
  height: 42px !important;
  /* Horizontal padding only - vertical centering via flexbox */
  padding: 0 0.5rem !important;
  /* Reduce bottom margin from 0.75rem/12px to 0.375rem/6px */
  margin-bottom: 0.375rem !important;
}

/* Ensure collapsed feature content is vertically centered */
.feature-collapsed > [data-feature-content-wrapper] {
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
  width: 100% !important;
}

/* Make the first row (containing name and action links) fill the width */
.feature-collapsed > [data-feature-content-wrapper] > div:first-child {
  width: 100% !important;
}

/* Remove bottom margin from last feature */
.feature-collapsed:last-child {
  margin-bottom: 0 !important;
}

[id^="feature_"]:not(.feature-collapsed):last-child {
  margin-bottom: 0 !important;
}

.feature-collapsed [data-collapsible-content] {
  display: none !important;
}

/* Show only action links when feature is focused (keyboard navigation) */
.feature-collapsed.feature-focused [data-feature-action-links],
.feature-collapsed.kbd-focus [data-feature-action-links] {
  display: flex !important;
}

.feature-collapsed [data-feature-toggle-target="disclosure"] {
  display: none !important;
}

.feature-collapsed [data-collapsed-only] {
  display: flex !important;
}

/* Global form element styling */
select,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="url"],
textarea {
  border: 1px solid rgb(156, 163, 175); /* gray-400 */
  border-radius: 0.375rem; /* rounded-md */
  padding: 0.5rem 0.75rem; /* py-2 px-3 */
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); /* shadow-sm */
}

select:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
input[type="url"]:focus,
textarea:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgb(37, 99, 235); /* blue-600 ring that follows border-radius */
}

/* Remove focus outline from popovers */
el-popover:focus,
[popovertarget]:focus {
  outline: none;
}

/* Override browser UA styles on popovers — default background:canvas leaks
   behind the inner rounded-lg div, and default overflow:auto clips shadows */
el-popover[popover] {
  background: transparent;
  overflow: visible;
  border: none;
}

/* Restore explicit bg-white on popovers that set it directly (not via inner div).
   The transparent reset above is for HoverPopover which uses an inner content div. */
el-popover[popover].bg-white {
  background: white;
}

/* ===========================================
   Team Assignment keyboard navigation
   =========================================== */

/* Container hidden focus - shown when navigating inside team assignments */
[data-has-subnav].subnav-active [data-card-root] {
  --tw-ring-color: rgb(191 219 254); /* blue-200 */
  box-shadow: 0 0 0 2px var(--tw-ring-color) !important;
}

/* Allocation matrix cell - remove native focus styling */
[data-half-day-cell] {
  outline: none !important;
}

[data-half-day-cell]:focus {
  outline: none !important;
}

[data-half-day-cell]:focus-visible {
  outline: none !important;
}

/* Allocation matrix cell focus - keyboard navigation */
[data-half-day-cell].allocation-cell-focused {
  outline: 2px solid #2563eb !important; /* blue-600 */
  outline-offset: 1px;
  z-index: 10;
  position: relative;
}

/* ===========================================
   Responsive Team Member Column
   Narrow column with vertical text on mobile
   =========================================== */

/* Team member column - narrow with vertical text on mobile, wide on sm+ */
/* Width is dynamically calculated by mobile_column_sync_controller.js below sm breakpoint */
.team-member-column {
  width: auto;
  min-width: 40px;
}

@media (min-width: 640px) {
  .team-member-column {
    width: 200px;
    min-width: 200px;
    max-width: 200px;
  }
}

/* Vertical text container - shown only on mobile */
.team-member-vertical {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  /* vertical-rl + rotate(180deg) = text reads bottom-to-top, lines wrap left-to-right (correct order) */
  white-space: normal; /* Allow wrapping */
  padding: 4px;
  font-size: 0.5rem; /* Smaller font (8px) on mobile for better fit */
  line-height: 0.625rem; /* Tight line height */
  /* Center horizontally within the column */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  /* Constrain height to fit within row - max 60px to fit in 68px row with padding */
  max-height: 60px;
  overflow: hidden;
}

/* Hide vertical content on sm+ screens */
@media (min-width: 640px) {
  .team-member-vertical {
    display: none;
  }
}

/* Full content container - hidden on mobile, shown on sm+ */
.team-member-full {
  display: none;
}

@media (min-width: 640px) {
  .team-member-full {
    display: block;
  }
}

/* ===========================================
   Container Queries for Timeline Controls
   Responsive layout based on container width
   =========================================== */

/* Define timeline controls as a container for container queries */
.timeline-controls-container {
  container-type: inline-size;
  container-name: timeline-controls;
}

/* Force stacked/wrapped layout when container is narrow */
/* This overrides the xl: breakpoint behavior based on container width */

/* At narrow widths, force the main flex container to column layout */
@container timeline-controls (max-width: 1000px) {
  .timeline-controls-row {
    flex-direction: column !important;
  }
}

/* At narrow widths, force buttons grid to single column */
@container timeline-controls (max-width: 700px) {
  .timeline-controls-buttons {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .timeline-controls-buttons > * {
    width: 100% !important;
  }

  /* Make direct child buttons fill their container, but not nested links in the view toggle */
  .timeline-controls-buttons > div > button,
  .timeline-controls-buttons > div > form > button {
    width: 100% !important;
  }
}

/* At medium widths, allow 2 columns for buttons */
@container timeline-controls (min-width: 701px) and (max-width: 1000px) {
  .timeline-controls-buttons {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .timeline-controls-buttons > * {
    width: 100% !important;
  }

  /* Make direct child buttons fill their container, but not nested links in the view toggle */
  .timeline-controls-buttons > div > button,
  .timeline-controls-buttons > div > form > button {
    width: 100% !important;
  }
}

/* Make view toggle links fill 50% each when in grid mode */
@container timeline-controls (max-width: 1000px) {
  .timeline-view-toggle {
    width: 100% !important;
  }

  .timeline-view-toggle a {
    flex: 1 !important;
  }
}

/* Force heading section to wrap when narrow */
@container timeline-controls (max-width: 500px) {
  .timeline-controls-heading {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
}

/* ===========================================
   Container Queries for Staffing Table Footer
   Responsive layout based on container width
   =========================================== */

/* Define staffing table card as a container for container queries */
.staffing-table-container {
  container-type: inline-size;
  container-name: staffing-table;
}

/* At narrow widths, stack footer vertically with controls on top, instructions below */
@container staffing-table (max-width: 700px) {
  /* Stack footer vertically */
  .staffing-table-footer {
    flex-direction: column-reverse !important;
    align-items: stretch !important;
  }

  /* Instructions take full width */
  .staffing-table-footer > .text-sm.text-gray-600 {
    width: 100% !important;
  }

  /* Stack controls vertically */
  .staffing-table-controls {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
  }

  .staffing-table-controls > * {
    width: 100% !important;
  }

  /* Make the save button full width */
  .staffing-table-controls input[type="submit"],
  .staffing-table-controls button[type="submit"] {
    width: 100% !important;
  }
}

/* At medium widths, show controls on top, instructions below */
@container staffing-table (min-width: 701px) and (max-width: 1000px) {
  .staffing-table-footer {
    flex-direction: column-reverse !important;
    align-items: stretch !important;
  }

  /* Instructions take full width */
  .staffing-table-footer > .text-sm.text-gray-600 {
    width: 100% !important;
  }

  .staffing-table-controls {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
  }
}

/* At wide widths, show row layout with instructions left, controls right */
@container staffing-table (min-width: 1001px) {
  .staffing-table-footer {
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
  }

  .staffing-table-controls {
    flex-direction: row !important;
    align-items: center !important;
  }
}

/* Staffing table header - force column layout at narrow widths */
@container staffing-table (max-width: 500px) {
  .staffing-table-header {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .staffing-table-header-buttons {
    width: 100% !important;
    flex-direction: column !important;
  }

  .staffing-table-header-buttons > form,
  .staffing-table-header-buttons > button {
    width: 100% !important;
  }

  .staffing-table-header-buttons > form > button,
  .staffing-table-header-buttons > form > input[type="submit"] {
    width: 100% !important;
  }
}

/* Staffing table header - row layout at medium widths */
@container staffing-table (min-width: 501px) {
  .staffing-table-header {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  .staffing-table-header-buttons {
    flex-direction: row !important;
  }
}

/* ── Comment thread cards (Linear-style) ── */

/* Thread card — wraps an entire comment thread (top-level + replies + reply input) */
.comment-thread-card {
  border: 1px solid rgb(229 231 235); /* gray-200 */
  border-radius: 0.5rem;
  background: white;
}

/* Bump toolbar dropdown chevrons to 5px — upstream's 0.3ch (≈3px) is too small
   at our UI density */
.lexxy-editor__toolbar-dropdown--chevron summary::after {
  block-size: 5px !important;
  inline-size: 5px !important;
  margin-block-start: -1px;
}

/* Rendered lexxy content outside the editor — slightly smaller than default 16px */
.lexxy-content:not(.lexxy-editor__content) {
  font-size: 14px;
}

/* Shared rich-text styles for Lexxy editor, rendered content, and preview.
   Tables: borders, padding, alternating rows.
   Strikethrough: <s>, <del>, <strike> elements. */
lexxy-editor table,
.lexxy-content table,
.rich-text-preview table {
  border-collapse: collapse;
  width: 100%;
  margin: 1rem 0;
  font-size: 0.875rem;
}

lexxy-editor th,
.lexxy-content th,
.rich-text-preview th {
  border: 1px solid #d1d5db;
  padding: 0.5rem 0.75rem;
  text-align: left;
  font-weight: 600;
  background-color: #f9fafb;
}

lexxy-editor td,
.lexxy-content td,
.rich-text-preview td {
  border: 1px solid #d1d5db;
  padding: 0.5rem 0.75rem;
}

lexxy-editor s,
lexxy-editor del,
lexxy-editor strike,
lexxy-editor .lexxy-content__strikethrough,
.lexxy-content s,
.lexxy-content del,
.lexxy-content strike,
.lexxy-content .lexxy-content__strikethrough,
.rich-text-preview s,
.rich-text-preview del,
.rich-text-preview strike,
.rich-text-preview .lexxy-content__strikethrough {
  text-decoration: line-through;
}

lexxy-editor u,
lexxy-editor .lexxy-content__underline,
.lexxy-content u,
.lexxy-content .lexxy-content__underline,
.rich-text-preview u,
.rich-text-preview .lexxy-content__underline {
  text-decoration: underline;
}

/* Increase line-height only in paragraphs containing mention pills */
.comment-thread-card .prose p:has([class^="mention-tag"], mark),
.lexxy-content p:has([class^="mention-tag"], mark),
.markdown-content p:has([class^="mention-tag"], mark) {
  line-height: 1.75;
}

/* Code blocks in rendered markdown (chat messages, streaming content) */
.markdown-content pre {
  background: rgb(30 41 59);
  color: rgb(226 232 240);
  padding: 0.75rem 1rem;
  border-radius: 0.375rem;
  overflow-x: auto;
  margin: 0.5rem 0;
  font-size: 0.8125rem;
  line-height: 1.5;
}
.markdown-content pre code {
  background: none;
  padding: 0;
  color: inherit;
}
.markdown-content code {
  background: rgb(243 244 246);
  padding: 0.125rem 0.25rem;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
}
.markdown-content pre code {
  background: none;
  padding: 0;
}

/* ── Compact comment inputs (Linear-style) ── */

/* Shared wrapper — single border around everything */
.comment-input-wrapper {
  position: relative;
  border: 1px solid rgb(229 231 235); /* gray-200 */
  border-radius: 0.5rem;
  background: white;
  transition: border-color 0.15s;
}

.comment-input-wrapper:focus-within {
  border-color: rgb(156 163 175); /* gray-400 */
}

/* Borderless variant — used inside thread cards where the card provides the border */
.comment-input-wrapper--borderless {
  border: none;
  border-radius: 0;
  background: transparent;
}

.comment-input-wrapper--borderless:focus-within {
  border-color: transparent;
}

/* Borderless inline — container handles all alignment */
.comment-input-wrapper--borderless.comment-input-wrapper--inline {
  padding-left: 0;
  padding-bottom: 0;
}

/* Make the content div the containing block for the placeholder ::before.
   Without this, the placeholder is positioned relative to lexxy-editor while
   the cursor is inside .lexxy-editor__content (which has padding), causing
   a vertical misalignment. */
.lexxy-editor__content {
  position: relative;
  min-height: 100%;
}

/* Lexxy's .lexxy-content class applies margin-block: 0 1rem on p. The first
   paragraph's bottom margin misaligns the placeholder ::before. */
lexxy-editor .lexxy-editor__content p:first-child {
  margin-top: 0;
  margin-block-start: 0;
}

/* Zero bottom margin on the only/last paragraph inside comment wrappers
   so the placeholder text aligns with the cursor vertically. */
.comment-input-wrapper lexxy-editor .lexxy-editor__content p:last-child {
  margin-bottom: 0;
  margin-block-end: 0;
}

/* Editor inside wrapper — no extra borders/background, wrapper provides those */
.comment-input-wrapper lexxy-editor {
  border: none;
  border-radius: 0;
  background: transparent;
  --lexxy-editor-rows: auto;
}

.comment-input-wrapper lexxy-editor .lexxy-editor__content {
  padding: 0.75rem 0.875rem; /* 12px vertical, 14px horizontal */
  min-height: 1.25rem;
  min-block-size: auto;
}

/* Mention pill line-height — applies to all lexxy editors */
lexxy-editor .lexxy-editor__content p:has(mark) {
  line-height: 1.75;
}

/* Completed tasks: inherit line-through and dim mention pills.
   Exclude del elements — their red bg already signals deletion, and
   opacity traps tooltip pseudo-elements in a dim stacking context. */
.line-through:not(del) [class^="mention-tag-"] {
  text-decoration: line-through;
  opacity: 0.5;
}
del [class^="mention-tag-"] {
  text-decoration: line-through;
}

/* Task display + edit: vertically center pills within the text line so
   the checkbox aligns consistently whether mentions are present or not.
   (Tasks don't have the line-height: 1.75 that lexxy content paragraphs get.) */
[data-task-edit-target="display"] [class^="mention-tag-"],
.task-mention-editor [class^="mention-tag-"] {
  vertical-align: middle;
}

/* ── Task mention editor (contenteditable, wraps) ── */
.task-mention-editor {
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: rgb(55 65 81); /* gray-700 */
  padding: 0;
  border-bottom: 1px solid transparent;
  outline: none;
  overflow-wrap: break-word;
  word-break: break-word;
  min-width: 0;
}

.task-mention-editor:focus {
  border-bottom-color: rgb(209 213 219); /* gray-300 */
}

.task-mention-placeholder {
  position: absolute;
  left: 1.5rem; /* after the + icon + gap */
  top: 0.375rem;
  font-size: 0.875rem;
  color: rgb(156 163 175); /* gray-400 */
  pointer-events: none;
}

/* Actions bar — sits inside the wrapper border, pulled up with negative margin */
.comment-input-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.25rem;
  padding: 0 1rem 1rem 0;
}

/* Icon button (paperclip, etc.) */
.comment-input-action {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 0.375rem;
  color: rgb(156 163 175); /* gray-400 */
  transition:
    color 0.15s,
    background-color 0.15s;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

.comment-input-action:hover {
  color: rgb(75 85 99); /* gray-600 */
  background-color: rgb(243 244 246); /* gray-100 */
}

/* Submit arrow button — matches avatar size (24px / 1.5rem) */
.comment-input-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 0.375rem;
  color: white;
  background-color: rgb(37 99 235); /* blue-600 */
  transition: background-color 0.15s;
  cursor: pointer;
  border: none;
  padding: 0;
}

.comment-input-submit:hover {
  background-color: rgb(29 78 216); /* blue-700 */
}

/* ── Inline reply variant ── */
/* Avatar + editor + buttons all inside one bordered pill on one row */
.comment-input-wrapper--inline {
  display: flex;
  align-items: stretch;
  padding-left: 0.5rem;
}

.comment-input-wrapper--inline lexxy-editor {
  flex: 1;
  min-width: 0;
}

.comment-input-wrapper--inline lexxy-editor .lexxy-editor__content,
.reply-editor .lexxy-editor__content {
  padding-top: 1px;
  padding-bottom: 0;
}

.comment-input-wrapper--inline .comment-input-actions {
  flex-shrink: 0;
  padding: 0;
  display: flex;
  align-items: flex-end;
}

/* Avatar inside the inline wrapper — anchored to top */
.comment-input-avatar {
  flex-shrink: 0;
  align-self: flex-start;
  position: relative;
  top: -3px;
}

/* ── Comment delete icon ── */
.comment-delete-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0.25rem;
  color: rgb(156 163 175); /* gray-400 */
  border-radius: 0.25rem;
  cursor: pointer;
  transition:
    color 0.15s,
    background-color 0.15s;
}

.comment-delete-btn:hover {
  color: rgb(239 68 68); /* red-500 */
  background-color: rgb(254 242 242); /* red-50 */
}

/* Gray out the edit pencil button when another user is editing (presence span has content).
   Pure CSS — reacts instantly to Turbo Stream updates, no JS needed. */
:has(> [id^="editing-presence-"]:not(:empty)) > button[data-action*="edit"] {
  opacity: 0.3;
  pointer-events: none;
}

/* Lexxy editor body text uses 14px (0.875rem). Scoped to the content area
   so the toolbar inherits the page's base font-size (chevrons use ch units).
   Mention pills inside editors use 13px via the [class^="mention-tag-"] rule. */
lexxy-editor .lexxy-editor__content {
  font-size: 0.875rem;
}

/* Fallback mention pill style for bold text in comment editors.
   Inline styles from the JS controller provide per-type colors,
   but this catches any bold text as a baseline. */
.comment-editor b,
.comment-editor strong,
.reply-editor b,
.reply-editor strong {
  background-color: rgb(219 234 254); /* blue-100 */
  color: rgb(30 64 175); /* blue-800 */
  padding: 2px 4px;
  border-radius: 6px;
  font-weight: 500;
}

/* Mention pills rendered as <mark> by Lexical — universal styling
   so they look the same in comments, descriptions, PRDs, etc. */
lexxy-editor mark,
.lexxy-content mark,
.comment-thread-card mark,
.prose mark,
.rich-text-preview mark {
  background-color: transparent;
  border-radius: 6px;
  font-weight: 500;
}

/* Vertical padding + horizontal padding at word boundaries only for background-color marks */
lexxy-editor mark[style*="background-color"],
.lexxy-content mark[style*="background-color"],
.rich-text-preview mark[style*="background-color"] {
  padding: 2px 0;
}

lexxy-editor mark[style*="background-color"][data-pad-start],
.lexxy-content mark[style*="background-color"][data-pad-start],
.rich-text-preview mark[style*="background-color"][data-pad-start] {
  padding-left: 4px;
}

lexxy-editor mark[style*="background-color"][data-pad-end],
.lexxy-content mark[style*="background-color"][data-pad-end],
.rich-text-preview mark[style*="background-color"][data-pad-end] {
  padding-right: 4px;
}

/* Mention marks — 13px in both rendered content and inside editors.
   Exclude highlight marks (.lexxy-content__highlight) which should
   inherit font-size from their parent (e.g., headings). */
.lexxy-content mark:not(:has(.lexxy-content__highlight)),
.comment-thread-card mark:not(:has(.lexxy-content__highlight)),
.prose mark:not(:has(.lexxy-content__highlight)),
lexxy-editor mark:not(:has(.lexxy-content__highlight)),
.rich-text-preview mark:not(:has(.lexxy-content__highlight)) {
  font-size: 13px;
}

/*
 * Mention tag styles — keep colors in sync with:
 *   JS: MENTION_INLINE_STYLES in app/javascript/utils/lexxy_helpers.js
 *   JS: _inlineStyleForType in app/javascript/controllers/lexxy_mention_controller.js
 *   Ruby: MentionHtmlEnricher::MENTION_CSS in app/services/mention_html_enricher.rb
 */
/* Shared base — inline-block so the pill is treated as a single unit for
   line breaking: short mentions move to the next line as a whole if they
   don't fit. max-width + overflow-wrap let long mentions wrap internally
   when wider than the container. No white-space:nowrap — inline-block
   already handles the "stay together" behavior. */
[class^="mention-tag-"] {
  display: inline-block;
  max-width: 100%;
  overflow-wrap: break-word;
  vertical-align: baseline;
  padding: 0.075em 0.35em;
  border-radius: 0.25rem;
  font-weight: 500;
  font-size: 13px;
  line-height: 1.3;
  margin: 1px 0;
}

.mention-tag-user {
  background-color: rgb(219 234 254);
  color: rgb(30 64 175);
} /* blue */

/* Bump line-height in ins blocks so unmarked lines match the height of prd-word-added marks */
.prd-annotated-content ins {
  line-height: 1.55;
}

/*
 * === PRD Diff @-mention styling ===
 *
 * Three contexts for @-mentions in the annotated PRD diff view (.prd-annotated-content):
 *
 * 1. UNCHANGED TEXT (outside <ins>/<del>):
 *    Mentions keep their normal clickable pill styling — no overrides needed.
 *    Controlled by the base [class^="mention-tag-"] rules above.
 *
 * 2. DELETED TEXT (<del> blocks):
 *    Currently: all: unset (plain text, no styling).
 *    To show dimmed pills instead: replace `all: unset` with `opacity: 0.5`.
 *    To show strikethrough pills: add `text-decoration: line-through`.
 *
 * 3. INSERTED TEXT (<ins> blocks):
 *    Currently: all: unset first (reset), then restore full pill styling.
 *    To show as plain text: remove the restore rules below.
 *    To only style genuinely NEW mentions (not carried-over): add `:has(> .prd-word-added)`
 *    to each restore selector (the <mark class="prd-word-added"> wrapper distinguishes new text).
 *    To add a green outline on new mentions: add `outline: 2px solid rgb(134 239 172)`.
 *
 * The <mark class="prd-word-added"> inside mention spans is preserved by MentionResolver
 * and can be used as a CSS hook to distinguish genuinely new mentions from carried-over ones.
 */

/* Step 1: Reset mentions inside diff blocks to plain text */
.prd-annotated-content ins [class*="mention-tag"],
.prd-annotated-content del [class*="mention-tag"] {
  all: unset !important;
}

/* Step 2: Restore pill styling for mentions inside <ins> blocks */
.prd-annotated-content ins [class*="mention-tag"] {
  display: inline-block !important;
  padding: 0.075em 0.35em !important;
  border-radius: 0.25rem !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  line-height: 1.3 !important;
  margin: 1px 0 !important;
  cursor: pointer !important;
}
/* Step 2b: Style the <mark> inside genuinely new mention spans to blend with prd-word-added.
   Targets the mark directly since :has() may not work reliably across all nesting depths. */
.prd-annotated-content [class*="mention-tag"] > mark.prd-word-added {
  background: transparent !important;
  font-size: 12px !important;
}
/* The mention span containing a new-content mark: green border, no rounding, flush height */
/* Outer span: solid green background matching prd-word-added, no rounding.
   Negative vertical margin pulls the box flush with surrounding text height. */
/* Outer: green background flush with adjacent prd-word-added marks */
.prd-annotated-content [class*="mention-tag"]:has(> mark.prd-word-added) {
  background: rgb(134 239 172) !important;
  border-radius: 0 !important;
  border: none !important;
  display: inline !important;
  padding: 2px 0.5px 2.5px !important;
  margin: 0 -4px 0 0 !important;
  font-size: inherit !important;
}
/* The mark wrapper inside: shift up slightly to vertically center */
.prd-annotated-content [class*="mention-tag"] > mark.prd-word-added {
  background: transparent !important;
  position: relative;
  top: -0.5px;
}
/* Inner span: inset rounded pill */
.prd-annotated-content .mention-pill-inner {
  display: inline;
  padding: 0 3px;
  border-radius: 3px;
  font-weight: 500;
  font-size: 11px;
  box-decoration-break: clone;
}
.prd-annotated-content .mention-tag-user .mention-pill-inner {
  background-color: rgb(219 234 254);
  color: rgb(30 64 175);
}
.prd-annotated-content .mention-tag-feature .mention-pill-inner {
  background-color: rgb(204 251 241);
  color: rgb(17 94 89);
}
.prd-annotated-content .mention-tag-release .mention-pill-inner {
  background-color: rgb(254 243 199);
  color: rgb(146 64 14);
}
.prd-annotated-content .mention-tag-document .mention-pill-inner {
  background-color: rgb(241 245 249);
  color: rgb(51 65 85);
}
.prd-annotated-content .mention-tag-role .mention-pill-inner {
  background-color: rgb(255 228 230);
  color: rgb(159 18 57);
}
/* Remove rounding on adjacent prd-word-added marks (mention-tag or strong wrappers) */
.prd-annotated-content
  [class*="mention-tag"]:has(> mark.prd-word-added)
  + mark.prd-word-added,
.prd-annotated-content strong:has(> mark.prd-word-added) + mark.prd-word-added {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.prd-annotated-content
  mark.prd-word-added:has(+ [class*="mention-tag"] > mark.prd-word-added),
.prd-annotated-content strong:has(+ mark.prd-word-added) > mark.prd-word-added {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.prd-annotated-content ins .mention-tag-user {
  background-color: rgb(219 234 254) !important;
  color: rgb(30 64 175) !important;
}
.prd-annotated-content ins .mention-tag-feature {
  background-color: rgb(204 251 241) !important;
  color: rgb(17 94 89) !important;
}
.prd-annotated-content ins .mention-tag-release {
  background-color: rgb(254 243 199) !important;
  color: rgb(146 64 14) !important;
}
.prd-annotated-content ins .mention-tag-document {
  background-color: rgb(241 245 249) !important;
  color: rgb(51 65 85) !important;
}
.prd-annotated-content ins .mention-tag-role {
  background-color: rgb(255 228 230) !important;
  color: rgb(159 18 57) !important;
}

/* Clear the <mark> background inside mention pills so it doesn't layer with the pill bg */
.prd-annotated-content [class*="mention-tag"] > .prd-word-added {
  background: transparent !important;
}
.mention-tag-bot {
  background-color: rgb(237 233 254);
  color: rgb(109 40 217);
} /* violet */
.mention-tag-feature {
  background-color: rgb(204 251 241);
  color: rgb(17 94 89);
} /* teal */
.mention-tag-release {
  background-color: rgb(254 243 199);
  color: rgb(146 64 14);
} /* amber */
.mention-tag-document {
  background-color: rgb(241 245 249);
  color: rgb(51 65 85);
} /* slate */
.mention-tag-role {
  background-color: rgb(255 228 230);
  color: rgb(159 18 57);
} /* rose */

/* Clickable mentions - subtle hover, no vertical shift */
.mention-clickable {
  cursor: pointer;
}

.mention-clickable:hover {
  filter: brightness(0.95) saturate(1.5);
}

/* Lexxy slash-command prompt menu — override inline position:absolute set by
   Lexxy's JS so the viewport coordinates it calculates actually work correctly.
   position:fixed also prevents the menu from extending the editor's height and
   causing page scroll. */
.lexxy-prompt-menu {
  position: fixed !important;
}

/* Mention autocomplete dropdown */
.mention-autocomplete {
  position: fixed;
  z-index: 19999;
  max-height: 16rem;
  overflow-y: auto;
  background-color: white;
  border: 1px solid rgb(229 231 235);
  border-radius: 0.5rem;
  box-shadow:
    0 10px 15px -3px rgb(0 0 0 / 0.1),
    0 4px 6px -4px rgb(0 0 0 / 0.1);
  width: 18rem;
}

.mention-autocomplete__category {
  padding: 0.375rem 0.75rem;
  font-size: 0.6875rem;
  color: rgb(156 163 175);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.mention-autocomplete__item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  width: 100%;
  text-align: left;
  cursor: pointer;
  border: none;
  background: none;
}

.mention-autocomplete__item:hover {
  background-color: rgb(243 244 246);
}

.mention-autocomplete__item--selected {
  background-color: rgb(219 234 254);
  color: rgb(30 58 138);
}

.mention-clickable:active {
  transform: translateY(0);
}

/* Highlight animation for kanban cards when mention is clicked */
.mention-highlight {
  animation: mention-pulse 2s ease-out;
}

@keyframes mention-pulse {
  0% {
    box-shadow: 0 0 0 0 rgb(59 130 246 / 0.7); /* blue-500 */
    background-color: rgb(219 234 254); /* bg-blue-100 */
  }
  25% {
    box-shadow: 0 0 0 8px rgb(59 130 246 / 0.4);
    background-color: rgb(191 219 254); /* bg-blue-200 */
  }
  50% {
    box-shadow: 0 0 0 12px rgb(59 130 246 / 0.2);
    background-color: rgb(219 234 254); /* bg-blue-100 */
  }
  100% {
    box-shadow: 0 0 0 0 rgb(59 130 246 / 0);
    background-color: white;
  }
}

/* Mention popover (interactive tooltip in Lexxy editors) */
.mention-popover {
  position: fixed;
  z-index: 20000;
  background: white;
  border: 1px solid rgb(229 231 235);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgb(0 0 0 / 0.12);
  padding: 8px 12px;
  min-width: 120px;
  pointer-events: auto;
}

.mention-popover__label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgb(156 163 175);
  margin-bottom: 2px;
}

.mention-popover__name {
  font-size: 13px;
  font-weight: 500;
  color: rgb(17 24 39);
}

.mention-popover__link {
  display: inline-block;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 500;
  color: rgb(37 99 235);
  text-decoration: none;
  cursor: pointer;
}

.mention-popover__link:hover {
  text-decoration: underline;
}

.mention-popover__actions {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 4px;
}

.mention-popover__actions .mention-popover__link {
  margin-top: 0;
}

/* File type icon colors for attachment cards in previews */
.lexxy-content .attachment--pdf {
  --lexxy-attachment-icon-bg: white;
  --lexxy-attachment-icon-border: oklch(55% 0.2 27);
  --lexxy-attachment-icon-text: oklch(30% 0.05 27);
}
.lexxy-content .attachment--md {
  --lexxy-attachment-icon-bg: white;
  --lexxy-attachment-icon-border: oklch(40% 0 0);
  --lexxy-attachment-icon-text: oklch(30% 0 0);
}
.lexxy-content .attachment--csv,
.lexxy-content .attachment--numbers {
  --lexxy-attachment-icon-bg: white;
  --lexxy-attachment-icon-border: oklch(55% 0.15 160);
  --lexxy-attachment-icon-text: oklch(45% 0.15 160);
}
.lexxy-content .attachment--xls,
.lexxy-content .attachment--xlsx {
  --lexxy-attachment-icon-bg: oklch(55% 0.15 160);
  --lexxy-attachment-icon-border: oklch(55% 0.15 160);
  --lexxy-attachment-icon-text: white;
}
.lexxy-content .attachment--txt,
.lexxy-content .attachment--rtf {
  --lexxy-attachment-icon-bg: oklch(55% 0 0);
  --lexxy-attachment-icon-border: oklch(55% 0 0);
  --lexxy-attachment-icon-text: white;
}
.lexxy-content .attachment--doc,
.lexxy-content .attachment--docx,
.lexxy-content .attachment--pages {
  --lexxy-attachment-icon-bg: white;
  --lexxy-attachment-icon-border: oklch(55% 0.196 258);
  --lexxy-attachment-icon-text: oklch(45% 0.196 258);
}
.lexxy-content .attachment--png,
.lexxy-content .attachment--jpg,
.lexxy-content .attachment--jpeg,
.lexxy-content .attachment--gif,
.lexxy-content .attachment--webp {
  --lexxy-attachment-icon-bg: oklch(55% 0.196 258);
  --lexxy-attachment-icon-border: oklch(55% 0.196 258);
  --lexxy-attachment-icon-text: white;
}
.lexxy-content .attachment--psd,
.lexxy-content .attachment--key,
.lexxy-content .attachment--sketch,
.lexxy-content .attachment--ai,
.lexxy-content .attachment--eps,
.lexxy-content .attachment--indd,
.lexxy-content .attachment--svg,
.lexxy-content .attachment--ppt,
.lexxy-content .attachment--pptx {
  --lexxy-attachment-icon-bg: white;
  --lexxy-attachment-icon-border: oklch(55% 0.2 27);
  --lexxy-attachment-icon-text: oklch(40% 0.15 27);
}
.lexxy-content .attachment--css,
.lexxy-content .attachment--php,
.lexxy-content .attachment--json,
.lexxy-content .attachment--htm,
.lexxy-content .attachment--html,
.lexxy-content .attachment--rb,
.lexxy-content .attachment--erb,
.lexxy-content .attachment--ts,
.lexxy-content .attachment--js {
  --lexxy-attachment-icon-bg: white;
  --lexxy-attachment-icon-border: oklch(55% 0.15 305);
  --lexxy-attachment-icon-text: oklch(40% 0.15 305);
}

/* Floating controls for attachment cards in document previews */
.rich-text-preview .lexxy-floating-controls {
  background: transparent;
  display: none;
  position: absolute;
  z-index: 1;
}

.rich-text-preview .attachment:hover .lexxy-floating-controls {
  display: block;
}

.rich-text-preview .lexxy-floating-controls__group {
  background: #171717;
  border-radius: 6px;
  display: flex;
  gap: 0;
  padding: 2px;
}

.rich-text-preview .lexxy-node-action {
  align-items: center;
  aspect-ratio: 1;
  background: transparent;
  block-size: 28px;
  border: none;
  border-radius: 6px;
  color: #d3d3d3 !important;
  cursor: pointer;
  display: flex;
  justify-content: center;
  min-block-size: 28px;
  min-inline-size: 28px;
  text-decoration: none;
}

.rich-text-preview .lexxy-node-action svg {
  block-size: 16px;
  inline-size: 16px;
  fill: currentColor;
  opacity: 0.8;
}

.rich-text-preview .lexxy-node-action:hover {
  background: #474747;
  color: white !important;
}

.rich-text-preview .lexxy-node-action:hover svg {
  opacity: 1;
}

/* Match editor card sizing and spacing */
.rich-text-preview .attachment--file .attachment__caption {
  padding: 0;
}

.rich-text-preview .attachment {
  margin-block-end: 8px;
}

lexxy-editor .attachment.attachment--file,
lexxy-editor .attachment.attachment--preview {
  margin-block: 0 4px;
}

.rich-text-preview .attachment--file .lexxy-floating-controls {
  inset-block-start: 50%;
  inset-inline-end: 1ch;
  inset-inline-start: unset;
  transform: translate(0, -50%);
}

.rich-text-preview .attachment--preview .lexxy-floating-controls {
  inset-block-start: 1.5ch;
  inset-inline-end: 1.5ch;
  inset-inline-start: unset;
}

/* ===========================================
   MoSCoW filter button hover effect
   Increases background opacity from 25% to 50% on hover
   =========================================== */

.moscow-filter-btn:hover {
  background-color: var(--hover-bg) !important;
}

/* ===========================================
   MoSCoW priority pill hover effect
   Increases background opacity from 25% to 50% on hover
   =========================================== */

.moscow-pill-btn:hover {
  background-color: var(--hover-bg) !important;
}

/* ===========================================
   Gantt estimate highlight animation
   Used when scrolling to newly scheduled estimate
   Applied to estimate container for visible bounding box effect
   =========================================== */

.estimate-highlight {
  z-index: 20 !important; /* Bring to front during highlight */
  animation: estimate-highlight-box 2s ease-out;
  pointer-events: none;
}

@keyframes estimate-highlight-box {
  0% {
    box-shadow:
      0 0 0 2px rgb(34 197 94 / 0.9),
      0 0 12px 4px rgb(34 197 94 / 0.4); /* green-500 */
    background-color: rgb(34 197 94 / 0.08);
  }
  50% {
    box-shadow:
      0 0 0 3px rgb(34 197 94 / 0.7),
      0 0 20px 8px rgb(34 197 94 / 0.3);
    background-color: rgb(34 197 94 / 0.12);
  }
  100% {
    box-shadow:
      0 0 0 0 rgb(34 197 94 / 0),
      0 0 0 0 rgb(34 197 94 / 0);
    background-color: rgb(34 197 94 / 0);
  }
}

/* ===========================================
   Rich text preview — shared styles for markdown-preview
   and rich-text-preview (Lexxy HTML document preview).
   Matches Lexxy editor appearance for consistency.
   =========================================== */

.markdown-preview h1,
.rich-text-preview h1 {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 1.25rem 0 0.75rem;
  line-height: 1.3;
}
.markdown-preview h2,
.rich-text-preview h2 {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 1rem 0 0.5rem;
  line-height: 1.35;
}
.markdown-preview h3,
.rich-text-preview h3 {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0.75rem 0 0.5rem;
  line-height: 1.4;
}
.markdown-preview h4,
.markdown-preview h5,
.markdown-preview h6,
.rich-text-preview h4,
.rich-text-preview h5,
.rich-text-preview h6 {
  font-size: 1rem;
  font-weight: 600;
  margin: 0.75rem 0 0.5rem;
}
.markdown-preview p {
  margin: 0.5rem 0;
  line-height: 1.6;
}
.rich-text-preview p {
  margin: 0 0 14px;
  line-height: 1.6;
}
.markdown-preview ul,
.rich-text-preview ul {
  list-style: disc;
  padding-left: 30px;
  margin: 0.5rem 0;
}
.markdown-preview ol,
.rich-text-preview ol {
  list-style: decimal;
  padding-left: 30px;
  margin: 0.5rem 0;
}
.markdown-preview li,
.rich-text-preview li {
  margin: 0.25rem 0;
  line-height: 1.6;
}
.markdown-preview code,
.rich-text-preview code {
  background: rgb(243 244 246);
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  font-size: 0.875em;
}
.markdown-preview pre,
.rich-text-preview pre {
  background: var(--syntax-bg, rgb(30 41 59));
  color: var(--syntax-text, rgb(226 232 240));
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  overflow-x: auto;
  margin: 0.75rem 0;
  font-size: 0.875rem;
  line-height: 1.6;
}
.markdown-preview pre code,
.rich-text-preview pre code {
  background: none;
  padding: 0;
  color: inherit;
}
.markdown-preview blockquote,
.rich-text-preview blockquote {
  border-left: 3px solid rgb(209 213 219);
  padding-left: 1rem;
  margin-left: 18px;
  color: rgb(107 114 128);
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
}
.markdown-preview a,
.rich-text-preview a {
  color: rgb(37 99 235);
  text-decoration: underline;
}
.markdown-preview a:hover,
.rich-text-preview a:hover {
  color: rgb(29 78 216);
}
.markdown-preview hr,
.rich-text-preview hr {
  border: none;
  border-top: 1px solid rgb(229 231 235);
  margin: 1rem 0;
}
.markdown-preview table,
.rich-text-preview table {
  border-collapse: collapse;
  width: 100%;
  margin: 0.75rem 0;
}
.markdown-preview th,
.markdown-preview td,
.rich-text-preview th,
.rich-text-preview td {
  border: 1px solid rgb(229 231 235);
  padding: 0.5rem 0.75rem;
  text-align: left;
}
.markdown-preview th,
.rich-text-preview th {
  background: rgb(249 250 251);
  font-weight: 600;
}

/* Lexxy wraps table cell content in <p> tags — tighten the margin */
lexxy-editor th p,
lexxy-editor td p,
.lexxy-content th p,
.lexxy-content td p,
.rich-text-preview th p,
.rich-text-preview td p {
  margin: 0;
}

.markdown-preview img,
.rich-text-preview img {
  max-width: 100%;
  border-radius: 0.375rem;
}
/* GFM strikethrough */
.markdown-preview del,
.markdown-preview s {
  text-decoration: line-through;
  color: rgb(107 114 128);
}
/* GFM task list checkboxes */
.markdown-preview ul:has(> li > input[type="checkbox"]) {
  list-style: none;
  padding-left: 0.25rem;
}
.markdown-preview li > input[type="checkbox"] {
  margin-right: 0.5rem;
  accent-color: rgb(37 99 235);
  vertical-align: middle;
  pointer-events: none;
}
/* GFM alternating table rows */
.markdown-preview tbody tr:nth-child(even) {
  background: rgb(249 250 251);
}

/* =======================================
   PRD inline suggestion styles (Google Docs-inspired)
   Block-level: entire paragraphs/headings are wrapped
   =======================================
*/

/* Block-level suggestion container — shows old crossed out, new highlighted */
.prd-suggestion-block {
  border-left: 3px solid rgb(59 130 246); /* blue-500 */
  padding-left: 12px;
  margin: 8px 0;
  cursor: pointer;
}

/* Deleted block content — struck through, dimmed */
del[data-suggestion-id] {
  display: block;
  background-color: rgb(254 226 226); /* red-100 */
  text-decoration: line-through;
  color: rgb(107 114 128); /* gray-500 */
  padding: 4px 8px;
  border-radius: 4px;
  margin-bottom: 4px;
  cursor: pointer;
}

/* Inserted block content — green highlight */
ins[data-suggestion-id] {
  display: block;
  background-color: rgb(220 252 231); /* green-100 */
  text-decoration: none;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
}

/* Word-level diff highlights within del/ins blocks.
   Consecutive changed words are merged into a single <mark> server-side. */
mark.prd-word-removed {
  background-color: rgb(
    252 165 165
  ); /* red-300 — stands out against red-100 parent */
  border-radius: 3px;
  padding: 1px 2px;
  color: inherit;
}

mark.prd-word-added {
  background-color: rgb(
    134 239 172
  ); /* green-300 — stands out against green-100 parent */
  border-radius: 3px;
  padding: 3px 2px;
  color: inherit;
}

/* Mentions inside ins blocks: keep their pill colors, add green outline */
ins[data-suggestion-id] [class^="mention-tag-"] {
  outline: 1.5px solid rgb(134 239 172); /* green-300 — matches word-added bg */
  outline-offset: -1px;
}

ins[data-suggestion-id] [class^="mention-tag-"] mark.prd-word-added {
  background-color: transparent;
}

/* Added-only blocks (no old content) */
.prd-suggestion-block-add {
  border-left: 3px solid rgb(34 197 94); /* green-500 */
  padding-left: 12px;
  margin: 8px 0;
}

/* Preserve inner HTML structure within del/ins blocks */
del[data-suggestion-id] h2,
del[data-suggestion-id] h3,
del[data-suggestion-id] p,
del[data-suggestion-id] ul,
del[data-suggestion-id] ol,
del[data-suggestion-id] li,
ins[data-suggestion-id] h2,
ins[data-suggestion-id] h3,
ins[data-suggestion-id] p,
ins[data-suggestion-id] ul,
ins[data-suggestion-id] ol,
ins[data-suggestion-id] li {
  text-decoration: inherit;
  color: inherit;
}

/* Inline accept/reject buttons on diff blocks */
.prd-inline-suggestion-actions {
  float: right;
  position: relative;
  z-index: 1;
  display: flex;
  gap: 2px;
  margin: 0 0 4px 8px;
}

.prd-inline-suggestion-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  border: 1px solid rgb(229 231 235);
  background: white;
  cursor: pointer;
  opacity: 0.6;
  transition:
    opacity 0.15s,
    background-color 0.15s;
}

.prd-suggestion-block:hover .prd-inline-suggestion-btn,
.prd-suggestion-block-add:hover .prd-inline-suggestion-btn,
del.prd-suggestion-block:hover .prd-inline-suggestion-btn {
  opacity: 1;
}

.prd-inline-accept {
  color: rgb(22 163 74);
}
.prd-inline-accept:hover {
  background: rgb(220 252 231);
  border-color: rgb(22 163 74);
}
.prd-inline-reject {
  color: rgb(220 38 38);
}
.prd-inline-reject:hover {
  background: rgb(254 226 226);
  border-color: rgb(220 38 38);
}

/* Highlight pulse when clicking a suggestion card */
.prd-suggestion-highlight {
  outline: 2px solid rgb(59 130 246); /* blue-500 */
  outline-offset: 2px;
  border-radius: 4px;
  animation: suggestion-pulse 1.5s ease-out;
}

@keyframes suggestion-pulse {
  0% {
    outline-color: rgb(59 130 246);
  }
  100% {
    outline-color: transparent;
  }
}

/* Suggestion card active state — fades out to match inline highlight */
.prd-suggestion-card-active {
  animation: card-highlight-fade 1.5s ease-out forwards;
}

@keyframes card-highlight-fade {
  0%,
  60% {
    border-color: rgb(59 130 246);
    box-shadow: 0 0 0 1px rgb(59 130 246);
  }
  100% {
    border-color: rgb(229 231 235);
    box-shadow: none;
  }
}

/* Suggestion reply editor (contenteditable with @-mentions) */
.suggestion-reply-editor {
  outline: none;
  min-height: 1.5em;
  word-break: break-word;
}

.suggestion-reply-editor:empty + .suggestion-reply-placeholder {
  display: block;
}

.suggestion-reply-placeholder {
  display: none;
  position: absolute;
  left: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.75rem;
  color: rgb(156 163 175);
  pointer-events: none;
}

/* Streaming overlay while AI is computing changes */
.prd-computing-overlay {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  border-radius: 4px;
}

@keyframes prd-spinner {
  to {
    transform: rotate(360deg);
  }
}
.prd-computing-spinner {
  width: 24px;
  height: 24px;
  border: 3px solid rgb(229 231 235);
  border-top-color: rgb(99 102 241);
  border-radius: 50%;
  animation: prd-spinner 0.8s linear infinite;
}

/* =======================================
   CSS-only tooltips via data-tooltip attr
   =======================================
   Usage: set data-tooltip="text" on any element (the local-time Stimulus
   controller does this automatically for <time> elements).
*/
[data-tooltip] {
  position: relative;
  cursor: pointer;
}
/* Tooltip body — always present, fades in/out */
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  white-space: normal;
  text-align: left;
  max-width: 20rem;
  width: max-content;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1rem;
  color: rgb(17 24 39);
  background: white;
  border: 1px solid rgb(229 231 235);
  border-radius: 0.5rem;
  box-shadow:
    0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -4px rgba(0, 0, 0, 0.1);
  padding: 0.375rem 0.75rem;
  pointer-events: none;
  z-index: 19999;
  opacity: 0;
  transition: opacity 0.15s ease-in;
}
/* Arrow — always present, fades in/out */
[data-tooltip]::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: rgb(229 231 235);
  pointer-events: none;
  z-index: 19999;
  opacity: 0;
  transition: opacity 0.15s ease-in;
}
/* Show on hover with slight delay for JS auto-alignment */
[data-tooltip]:hover::after,
[data-tooltip]:hover::before {
  opacity: 1;
  transition-delay: 0.1s;
}
/* Below variant: data-tooltip-position="below" */
[data-tooltip][data-tooltip-position="below"]::after {
  bottom: auto;
  top: calc(100% + 6px);
}
[data-tooltip][data-tooltip-position="below"]::before {
  bottom: auto;
  top: calc(100% + 2px);
  border-top-color: transparent;
  border-bottom-color: rgb(229 231 235);
}

/* Right variant: data-tooltip-position="right" */
[data-tooltip][data-tooltip-position="right"]::after {
  bottom: auto;
  left: calc(100% + 6px);
  right: auto;
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
}
[data-tooltip][data-tooltip-position="right"]::before {
  bottom: auto;
  left: calc(100% + 2px);
  right: auto;
  top: 50%;
  transform: translateY(-50%);
  border-top-color: transparent;
  border-right-color: rgb(229 231 235);
  border-bottom-color: transparent;
  border-left-color: transparent;
}

/* Start-aligned variant: tooltip left edge aligns with trigger left edge.
   No :hover qualifier so position holds during fade-out. */
[data-tooltip][data-tooltip-align="start"]::after {
  left: 0;
  right: auto;
  transform: none;
}
[data-tooltip][data-tooltip-align="start"]::before {
  left: 6px;
  right: auto;
  transform: none;
}

/* End-aligned variant: tooltip right edge aligns with trigger right edge */
[data-tooltip][data-tooltip-align="end"]::after {
  left: auto;
  right: 0;
  transform: none;
}
[data-tooltip][data-tooltip-align="end"]::before {
  left: auto;
  right: 6px;
  transform: none;
}

/* Fulcrum PRD CTAs — toggle based on whether PRD has content */
/* .lexxy-content is added/removed by InlineEditorBaseController._updateDisplay() */
[data-prd-tab-content]:has([data-description-text].lexxy-content)
  [data-prd-empty-cta] {
  display: none;
}
[data-prd-tab-content]:not(:has([data-description-text].lexxy-content))
  [data-prd-filled-cta] {
  display: none;
}

/* PRD authoring page — chat empty-state CTA toggles with PRD content */
/* .lexxy-content is added/removed by InlineEditorBaseController._updateDisplay() */
[data-prd-authoring]:has([data-description-text].lexxy-content)
  [data-prd-chat-empty-cta] {
  display: none;
}
[data-prd-authoring]:not(:has([data-description-text].lexxy-content))
  [data-prd-chat-filled-cta] {
  display: none;
}

/* Hide chat empty-state CTA once any message has been appended to the list */
#prd-messages-list:has([id^="prd-message-"]) [data-prd-chat-no-messages] {
  display: none;
}

/* Estimate modal — prevent complexity button rows from wrapping so the modal sizes to content */
.estimates-matrix-nowrap [data-role-buttons] {
  flex-wrap: nowrap;
}

/* Estimate modal dialog positioning — width: fit-content prevents the dialog
   from stretching to fill the block container; centering is via auto margins */
dialog[id^="estimates-modal-"] {
  width: fit-content;
  margin-top: 10rem;
  margin-bottom: auto;
  margin-left: auto;
  margin-right: auto;
}

/* Prevent page scroll flash when file modal will auto-open on page load.
   The JS connect() handler opens the modal and adds overflow-hidden to body
   a frame later — this CSS rule prevents the visible scroll during that frame. */
body:has([data-files-dropzone-auto-open-file-value]) {
  overflow: hidden;
}