/* Self-hosted fonts (vendored from Google Fonts) */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/jetbrains-mono-latin-68dbce1c.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/jetbrains-mono-latin-ext-b0c48b7a.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/outfit-latin-9bbb8353.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/outfit-latin-ext-6bff6d2d.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Terminal theme fonts */
@layer base {
  body {
    font-family: 'JetBrains Mono', 'Courier New', monospace;
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: 'Outfit', system-ui, -apple-system, sans-serif;
  }

  /* Ensure form inputs with w-full class respect full width by overriding size attribute */
  input.w-full[type="email"],
  input.w-full[type="text"],
  textarea.w-full {
    min-width: 0;
    width: 100% !important;
  }
}

/* Terminal animations */
@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

@keyframes scan {
  0% {
    background-position: 0 -100vh;
  }
  35%, 100% {
    background-position: 0 100vh;
  }
}

@keyframes flicker {
  0% { opacity: 0.27861; }
  5% { opacity: 0.34769; }
  10% { opacity: 0.23604; }
  15% { opacity: 0.90626; }
  20% { opacity: 0.18128; }
  25% { opacity: 0.83891; }
  30% { opacity: 0.65583; }
  35% { opacity: 0.67807; }
  40% { opacity: 0.26559; }
  45% { opacity: 0.84693; }
  50% { opacity: 0.96019; }
  55% { opacity: 0.08594; }
  60% { opacity: 0.20313; }
  65% { opacity: 0.71988; }
  70% { opacity: 0.53455; }
  75% { opacity: 0.37288; }
  80% { opacity: 0.71428; }
  85% { opacity: 0.70419; }
  90% { opacity: 0.7003; }
  95% { opacity: 0.36108; }
  100% { opacity: 0.24387; }
}

/* Smooth scroll behavior */
html {
  scroll-behavior: smooth;
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* Sign out link hover effect */
.sign-out-link:hover {
  color: rgb(252 165 165); /* red-300 */
  transition: color 0.2s;
}

/* Custom select styling with properly positioned chevron */
select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.75rem center;
  background-repeat: no-repeat;
  background-size: 1.25em 1.25em;
  padding-right: 2.5rem;
}

/* Custom checkbox styling for consistent emerald accent */
input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 1rem;
  height: 1rem;
  border-radius: 0.25rem;
  border: 2px solid rgb(156 163 175); /* gray-400 */
  background-color: transparent;
  cursor: pointer;
  position: relative;
}

@media (prefers-color-scheme: dark) {
  input[type="checkbox"] {
    border-color: rgb(107 114 128); /* gray-500 */
  }
}

input[type="checkbox"]:checked {
  background-color: rgb(16 185 129); /* emerald-500 */
  border-color: rgb(16 185 129); /* emerald-500 */
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

input[type="checkbox"]:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgb(52 211 153 / 0.4); /* emerald-400/40 */
}

input[type="checkbox"].accent-red-500:focus {
  box-shadow: 0 0 0 2px rgb(248 113 113 / 0.4); /* red-400/40 */
}

input[type="checkbox"].accent-orange-500:focus {
  box-shadow: 0 0 0 2px rgb(251 146 60 / 0.4); /* orange-400/40 */
}

input[type="checkbox"].accent-amber-500:focus {
  box-shadow: 0 0 0 2px rgb(251 191 36 / 0.4); /* amber-400/40 */
}

input[type="checkbox"].accent-blue-500:focus {
  box-shadow: 0 0 0 2px rgb(96 165 250 / 0.4); /* blue-400/40 */
}

/* Custom radio button styling for consistent accent colors */
input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  border: 2px solid rgb(156 163 175); /* gray-400 */
  background-color: transparent;
  cursor: pointer;
  position: relative;
}

@media (prefers-color-scheme: dark) {
  input[type="radio"] {
    border-color: rgb(107 114 128); /* gray-500 */
  }
}

input[type="radio"]:checked {
  border-width: 4px;
  border-color: rgb(16 185 129); /* emerald-500 default */
}

/* Severity accent colors */
input[type="radio"].accent-red-500:checked {
  border-color: rgb(239 68 68); /* red-500 */
}

input[type="radio"].accent-orange-500:checked {
  border-color: rgb(249 115 22); /* orange-500 */
}

input[type="radio"].accent-amber-500:checked {
  border-color: rgb(245 158 11); /* amber-500 */
}

input[type="radio"].accent-blue-500:checked {
  border-color: rgb(59 130 246); /* blue-500 */
}

/* Status accent colors */
input[type="radio"].accent-purple-500:checked {
  border-color: rgb(168 85 247); /* purple-500 */
}

input[type="radio"].accent-pink-500:checked {
  border-color: rgb(236 72 153); /* pink-500 */
}

input[type="radio"].accent-emerald-500:checked {
  border-color: rgb(16 185 129); /* emerald-500 */
}

/* Checkbox accent color overrides */
input[type="checkbox"].accent-red-500:checked {
  background-color: rgb(239 68 68); /* red-500 */
  border-color: rgb(239 68 68);
}

input[type="checkbox"].accent-orange-500:checked {
  background-color: rgb(249 115 22); /* orange-500 */
  border-color: rgb(249 115 22);
}

input[type="checkbox"].accent-amber-500:checked {
  background-color: rgb(245 158 11); /* amber-500 */
  border-color: rgb(245 158 11);
}

input[type="checkbox"].accent-blue-500:checked {
  background-color: rgb(59 130 246); /* blue-500 */
  border-color: rgb(59 130 246);
}

/* Turbo Frame loading state — avoid opacity transitions which cause
   macOS compositing bugs (content in DOM but not visually rendered) */
turbo-frame[aria-busy="true"] {
  cursor: wait;
}

/* Lexxy rich text editor — dark mode overrides */
.dark {
  --lexxy-color-ink: oklch(95% 0 0);
  --lexxy-color-ink-medium: oklch(70% 0 0);
  --lexxy-color-ink-light: oklch(50% 0 0);
  --lexxy-color-ink-lighter: var(--color-gray-700);
  --lexxy-color-ink-lightest: oklch(20% 0 0);
  --lexxy-color-ink-inverted: oklch(15% 0 0);

  --lexxy-color-accent-dark: oklch(75% 0.15 260);
  --lexxy-color-accent-medium: oklch(60% 0.15 258);
  --lexxy-color-accent-light: oklch(30% 0.05 254);
  --lexxy-color-accent-lightest: oklch(25% 0.03 254);

  --lexxy-color-code-token-att: #f97583;
  --lexxy-color-code-token-comment: #6a737d;
  --lexxy-color-code-token-function: #b392f0;
  --lexxy-color-code-token-operator: #f97583;
  --lexxy-color-code-token-property: #79b8ff;
  --lexxy-color-code-token-punctuation: #e1e4e8;
  --lexxy-color-code-token-selector: #85e89d;
  --lexxy-color-code-token-variable: #ffab70;

}

/* Constrained Lexxy comment editor (collaborative-draft modal + team panel).
   The inner `.lexxy-editor__content` has `contain: layout style` from Lexxy,
   which makes max-height set on the parent <lexxy-editor> ineffective for
   clipping. We cap the inner contenteditable directly so the toolbar stays
   in place at the top and only the content area scrolls.
   Extra bottom padding leaves room for the absolutely-positioned Post
   button so trailing text doesn't render underneath it. */
.draft-comment-editor lexxy-editor .lexxy-editor__content {
  max-height: 160px;
  overflow-y: auto;
  padding-bottom: 2.75rem;
}

/* iOS Safari auto-zooms inputs/contenteditables whose font-size is below
   16px on focus. The user then has to pinch-zoom back out manually, which
   is bad UX. Bump the comment composer's contenteditable to 16px on small
   screens to suppress the zoom. Larger viewports keep the design size
   inherited from `text-xs`. */
@media (max-width: 639px) {
  .draft-comment-editor lexxy-editor .lexxy-editor__content {
    font-size: 16px;
  }
}

/* Reply / huddle composer — Discard / Save draft / Send buttons + Saved
   indicator overlay the bottom of the editor. Extra bottom padding on the
   contenteditable keeps trailing text from rendering underneath. */
.inline-reply-editor.lexxy-content .lexxy-editor__content,
lexxy-editor.inline-reply-editor .lexxy-editor__content {
  padding-bottom: 3.5rem;
}

/* Rich text highlight colors — matched to app palette.
   Overrides Lexxy defaults. Uses html selector to beat :root specificity. */

/* Light mode */
html {
  /* Text colors: muted, professional tones */
  --highlight-1: #92400e; /* amber-800 */
  --highlight-2: #c2410c; /* orange-700 */
  --highlight-3: #be123c; /* rose-700 */
  --highlight-4: #a21caf; /* fuchsia-700 */
  --highlight-5: #6d28d9; /* violet-700 */
  --highlight-6: #1d4ed8; /* blue-700 */
  --highlight-7: #047857; /* emerald-700 */
  --highlight-8: #0e7490; /* cyan-700 */
  --highlight-9: #4b5563; /* gray-600 */

  /* Background highlights: soft washes */
  --highlight-bg-1: rgba(245, 208, 97, 0.25);
  --highlight-bg-2: rgba(251, 146, 60, 0.2);
  --highlight-bg-3: rgba(251, 113, 133, 0.2);
  --highlight-bg-4: rgba(232, 121, 249, 0.18);
  --highlight-bg-5: rgba(167, 139, 250, 0.2);
  --highlight-bg-6: rgba(96, 165, 250, 0.2);
  --highlight-bg-7: rgba(52, 211, 153, 0.2);
  --highlight-bg-8: rgba(34, 211, 238, 0.18);
  --highlight-bg-9: rgba(156, 163, 175, 0.2);
}

/* Dark mode */
html.dark {
  /* Text colors: lighter pastels for readability */
  --highlight-1: #fbbf24; /* amber-400 */
  --highlight-2: #fb923c; /* orange-400 */
  --highlight-3: #fb7185; /* rose-400 */
  --highlight-4: #e879f9; /* fuchsia-400 */
  --highlight-5: #a78bfa; /* violet-400 */
  --highlight-6: #60a5fa; /* blue-400 */
  --highlight-7: #34d399; /* emerald-400 */
  --highlight-8: #22d3ee; /* cyan-400 */
  --highlight-9: #9ca3af; /* gray-400 */

  /* Background highlights: subtle tints */
  --highlight-bg-1: rgba(251, 191, 36, 0.12);
  --highlight-bg-2: rgba(251, 146, 60, 0.12);
  --highlight-bg-3: rgba(251, 113, 133, 0.12);
  --highlight-bg-4: rgba(232, 121, 249, 0.1);
  --highlight-bg-5: rgba(167, 139, 250, 0.12);
  --highlight-bg-6: rgba(96, 165, 250, 0.12);
  --highlight-bg-7: rgba(52, 211, 153, 0.12);
  --highlight-bg-8: rgba(34, 211, 238, 0.1);
  --highlight-bg-9: rgba(156, 163, 175, 0.1);
}

/* Lexxy rendered content — dark mode fixes */
.dark .lexxy-content {
  color: var(--color-gray-200);
}

.dark .lexxy-content a {
  color: var(--color-blue-400);
}

/* Non-image attachment card — opt out of Lexxy's default link styling so the
   custom layout (filename + size + download button) isn't painted blue/underlined. */
.lexxy-content .attachment--file a,
.dark .lexxy-content .attachment--file a {
  color: inherit;
  text-decoration: none;
}

.dark .lexxy-content blockquote {
  border-color: var(--color-gray-600);
  color: var(--color-gray-400);
}

.dark .lexxy-content pre,
.dark .lexxy-content code {
  background: var(--color-gray-900);
  color: var(--color-gray-200);
}

.dark .lexxy-content table {
  border-color: var(--color-gray-700);
}

.dark .lexxy-content th {
  background: var(--color-gray-800);
  border-color: var(--color-gray-700);
  color: var(--color-gray-300);
}

.dark .lexxy-content td {
  border-color: var(--color-gray-700);
  color: var(--color-gray-300);
  background: transparent;
}

.dark .lexxy-content hr {
  border-color: var(--color-gray-700);
}

/* Lexxy editor — match app input styling */
lexxy-editor {
  --lexxy-color-canvas: var(--color-gray-100);
  background: var(--lexxy-color-canvas);
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  display: block;
  width: 100%;
  min-width: 0;
  /* Matches Lexxy's natural rendered height (toolbar + 8lh content + padding)
     so reserving space here avoids the layout jump when JS hydrates. */
  min-block-size: calc(8lh + 3.5rem);
  --lexxy-toolbar-button-size: 1.75lh;
}

/* Skeleton — before Lexxy hydrates, draw a faux toolbar bar matching the real
   toolbar's height + bottom border so the box doesn't read as empty/broken
   during the brief hydration window. The real toolbar renders within the same
   envelope, so there's no shift when it appears. */
lexxy-editor:not([connected])::before {
  content: "";
  display: block;
  block-size: calc(1.75lh + 4px);
  border-block-end: 1px solid var(--color-gray-300);
}

.dark lexxy-editor:not([connected])::before {
  border-block-end-color: var(--color-gray-700);
}

/* Note composer — unified editor + submit button */
.note-composer {
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  background: var(--color-gray-100);
}

.note-composer lexxy-editor {
  border: none;
  border-radius: 0;
  border-start-start-radius: calc(0.375rem - 1px);
  border-start-end-radius: calc(0.375rem - 1px);
  --lexxy-color-canvas: white;
  --lexxy-color-ink-lighter: var(--color-gray-300); /* matches note-composer border */
}

.dark .note-composer lexxy-editor {
  --lexxy-color-canvas: var(--color-gray-900);
  --lexxy-color-ink-lighter: var(--color-gray-700); /* matches note-composer border */
}

.note-composer lexxy-editor:focus-within {
  border-color: transparent;
  box-shadow: none;
}

/* Compact variant — shorter editor for inline compose */
.note-composer--compact lexxy-editor {
  min-block-size: 0;
}

.note-composer--compact lexxy-editor:not([connected])::before {
  display: none;
}

.note-composer--compact lexxy-editor [contenteditable] {
  min-height: 2.5rem;
  padding-block-end: 0;
}

.note-composer-footer {
  background: white;
  display: flex;
  justify-content: flex-end;
  padding: 0.5rem 0.75rem;
  border-end-start-radius: calc(0.375rem - 1px);
  border-end-end-radius: calc(0.375rem - 1px);
  position: relative;
  margin-top: -1px;
}

:where(.dark, .dark *) .note-composer-footer {
  background: var(--color-gray-900);
}

.note-composer:focus-within {
  border-color: var(--color-emerald-400);
  box-shadow: 0 0 0 1px var(--color-emerald-400);
}

.dark .note-composer {
  border-color: var(--color-gray-700);
  background: var(--color-gray-800);
}

.dark .note-composer:focus-within {
  border-color: var(--color-emerald-400);
  box-shadow: 0 0 0 1px var(--color-emerald-400);
}

/* Search-result highlight. Defined unlayered so it wins over Lexxy's
   `mark { background-color: transparent }` reset, which is also unlayered
   and would otherwise beat Tailwind's @layer utilities. The translucent
   emerald reads naturally on both light and dark backgrounds. */
mark.search-highlight {
  background-color: color-mix(in srgb, var(--color-emerald-500) 30%, transparent);
  color: inherit;
  border-radius: 0.125rem;
  padding-inline: 0.125rem;
}

/* Ticket-list loading state — driven by search-loading-controller.
   Quick fade so the list visibly recedes the moment a filter changes,
   while the inline spinner in the search box confirms work is happening. */
[data-controller~="search-loading"] .search-loading-area {
  transition: opacity 120ms ease-out;
}

[data-search-loading-active="true"] .search-loading-area {
  opacity: 0.45;
  pointer-events: none;
}

.search-loading-spinner {
  display: none;
}

[data-search-loading-active="true"] .search-loading-spinner {
  display: inline-flex;
}

[data-search-loading-active="true"] .search-loading-hide {
  display: none;
}

/* Suppress the browser's native search-field clear control — we render our
   own to keep light/dark and spinner-swap behaviour consistent. */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

/* iOS Safari auto-zooms on focus into any form control whose effective
   font-size is below 16px and never zooms back out. The `-webkit-touch-callout`
   feature query targets iOS specifically (it's a no-op on Android/Chrome on
   desktop). max() keeps any input larger than 16px at its designed size. */
@supports (-webkit-touch-callout: none) {
  input[type="text"],
  input[type="search"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  input[type="url"],
  input[type="number"],
  input[type="date"],
  input[type="datetime-local"],
  input[type="month"],
  input[type="time"],
  input[type="week"],
  textarea,
  select {
    font-size: max(16px, 1em);
  }
}

/* Note bubble — visually frames user-authored rich text */
.hide-field-changes .activity-field-change {
  display: none;
}

.note-bubble {
  background: var(--color-gray-100);
  border-radius: 1rem;
  padding: 0.625rem 0.75rem;
}

/* Chat-context corner variants: shrink to content width so short messages
   don't take the full thread width. The base .note-bubble keeps block width
   for non-chat uses (.note-bubble--on-page descriptions, etc). */
.note-bubble--agent,
.note-bubble--external {
  width: fit-content;
  max-width: 80%;
}

.note-bubble--agent {
  border-bottom-right-radius: 0;
  margin-left: auto;
}

.note-bubble--external {
  border-bottom-left-radius: 0;
}

.note-bubble .lexxy-content > :first-child {
  margin-top: 0;
}

.note-bubble .lexxy-content > :last-child {
  margin-bottom: 0;
}

/* Code blocks and inline code inside chat bubbles — let a hint of the
   bubble tint show through so they don't read as a disconnected panel. */
.note-bubble--agent .lexxy-content pre,
.note-bubble--agent .lexxy-content code,
.note-bubble--external .lexxy-content pre,
.note-bubble--external .lexxy-content code {
  background: color-mix(in srgb, var(--color-gray-200) 75%, transparent);
}

.dark .note-bubble--agent .lexxy-content pre,
.dark .note-bubble--agent .lexxy-content code,
.dark .note-bubble--external .lexxy-content pre,
.dark .note-bubble--external .lexxy-content code {
  background: color-mix(in srgb, var(--color-gray-900) 65%, transparent);
}

.dark .note-bubble {
  background: var(--color-gray-800);
}

/* Variant for bubbles on the page background (not inside a card) */
.note-bubble--on-page {
  background: white;
  border: 1px solid var(--color-gray-200);
}

.dark .note-bubble--on-page {
  background: var(--color-gray-900);
  border-color: var(--color-gray-700);
}

/* Variant for customer messages (blue tint) */
.note-bubble--customer {
  background: var(--color-blue-100);
}

.dark .note-bubble--customer {
  background: color-mix(in srgb, var(--color-blue-900) 40%, transparent);
}

/* Variant for internal notes (amber tint) */
.note-bubble--internal {
  background: var(--color-amber-100);
}

.dark .note-bubble--internal {
  background: color-mix(in srgb, var(--color-amber-900) 40%, transparent);
}

lexxy-editor:focus-within {
  border-color: var(--color-emerald-400);
  outline: none;
  box-shadow: 0 0 0 1px var(--color-emerald-400);
}

.dark lexxy-editor {
  --lexxy-color-canvas: var(--color-gray-800);
  --lexxy-color-ink-lighter: var(--color-gray-700);
  border-color: var(--color-gray-700);
}

.dark lexxy-editor:focus-within {
  border-color: var(--color-emerald-400);
  box-shadow: 0 0 0 1px var(--color-emerald-400);
}

/* Field-level error highlighting for lexxy editor */
.field-error lexxy-editor {
  border-color: var(--color-red-500);
}

.field-error lexxy-editor:focus-within {
  border-color: var(--color-red-500);
  box-shadow: 0 0 0 1px var(--color-red-500);
}

.dark .field-error lexxy-editor {
  border-color: var(--color-red-500);
}

.dark .field-error lexxy-editor:focus-within {
  border-color: var(--color-red-500);
  box-shadow: 0 0 0 1px var(--color-red-500);
}

/* Override Lexxy's image constraints on attachments so they span full width */
.attachment--preview {
  inline-size: 100%;
  padding: 0;
}

.attachment--preview img {
  inline-size: 100%;
  max-block-size: none;
}

/* ── Collapsible sidebar ─────────────────────────────────────────────── */

/* Prevent text wrapping during width animation */
aside[data-sidebar-state] {
  white-space: nowrap;
}

/* Smooth width + margin transition for toggle click */
aside[data-sidebar-state].sidebar-animating {
  transition: width 200ms ease-in-out;
}

aside[data-sidebar-state] ~ main.sidebar-animating {
  transition: margin-left 200ms ease-in-out;
}

/* Collapsed: narrow icon-only sidebar */
aside[data-sidebar-state="collapsed"] {
  width: 4rem;
}

/* Hide text/badges/chevrons when collapsed */
aside[data-sidebar-state="collapsed"] .sidebar-label,
aside[data-sidebar-state="collapsed"] .sidebar-section-header,
aside[data-sidebar-state="collapsed"] .sidebar-badge,
aside[data-sidebar-state="collapsed"] .sidebar-chevron {
  display: none;
}

/* Collapsed nav: center icons in the narrow strip */
aside[data-sidebar-state="collapsed"] nav {
  padding-left: 0;
  padding-right: 0;
}

aside[data-sidebar-state="collapsed"] nav a,
aside[data-sidebar-state="collapsed"] nav button {
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
  margin-left: auto;
  margin-right: auto;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.5rem;
}

/* Collapsed org selector: show only logo centered */
aside[data-sidebar-state="collapsed"] .sidebar-org-selector {
  padding: 0.75rem 0;
  display: flex;
  justify-content: center;
}

aside[data-sidebar-state="collapsed"] .sidebar-org-selector > div {
  margin: 0;
}

aside[data-sidebar-state="collapsed"] .sidebar-org-selector button {
  justify-content: center;
  padding: 0.25rem;
  width: auto;
}

/* In collapsed mode the landscape logo doesn't fit the narrow rail —
   hide the wide-brand slot and reveal the square-avatar fallback. */
aside[data-sidebar-state="collapsed"] .sidebar-brand-wide {
  display: none;
}

aside[data-sidebar-state="collapsed"] .sidebar-brand-square {
  display: inline-flex;
}

/* Collapsed user menu: show only avatar centered */
aside[data-sidebar-state="collapsed"] .sidebar-user-section,
aside[data-sidebar-state="collapsed"] .sidebar-notifications-section {
  padding: 0.75rem 0;
  display: flex;
  justify-content: center;
}

aside[data-sidebar-state="collapsed"] .sidebar-user-section > div,
aside[data-sidebar-state="collapsed"] .sidebar-notifications-section > div {
  margin: 0;
}

aside[data-sidebar-state="collapsed"] .sidebar-user-section button,
aside[data-sidebar-state="collapsed"] .sidebar-notifications-section button {
  justify-content: center;
  padding: 0.25rem;
  width: auto;
}

/* Collapsed section dividers: thin line, no extra spacing */
aside[data-sidebar-state="collapsed"] .sidebar-section-divider {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
  padding-top: 0.25rem;
  padding-bottom: 0;
}

/* The first divider sits flush against the nav's own padding — no need for
   the small top margin/padding the rule above adds for inter-section breaks,
   which otherwise reads as a phantom slot for the (hidden) section header. */
aside[data-sidebar-state="collapsed"] nav > .sidebar-section-divider:first-child {
  margin-top: 0;
  padding-top: 0;
}

/* Ensure dropdown menus are wide enough when sidebar is collapsed */
aside[data-sidebar-state="collapsed"] [data-dropdown-target="menu"] {
  min-width: 16rem;
}

/* Collapse toggle icon swap */
aside[data-sidebar-state="collapsed"] .sidebar-collapse-icon-close {
  display: none;
}

aside[data-sidebar-state="collapsed"] .sidebar-collapse-icon-open {
  display: inline;
}

/* Collapse toggle: center when collapsed */
aside[data-sidebar-state="collapsed"] .sidebar-collapse-toggle {
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
}

/* On-call rotation drag-and-drop affordances */
.slot-ghost {
  opacity: 0.35;
  background-color: rgb(243 244 246);
}
.dark .slot-ghost {
  background-color: rgb(31 41 55);
}
.slot-chosen {
  background-color: rgb(255 255 255);
  box-shadow: 0 10px 25px -5px rgb(0 0 0 / 0.15), 0 8px 10px -6px rgb(0 0 0 / 0.08);
}
.dark .slot-chosen {
  background-color: rgb(17 24 39);
}
.slot-drag {
  cursor: grabbing;
}

.pill-ghost {
  opacity: 0.35;
  border: 1px dashed rgb(52 211 153);
  background-color: rgb(236 253 245);
}
.dark .pill-ghost {
  background-color: rgb(6 78 59 / 0.3);
  border-color: rgb(16 185 129);
}
.pill-chosen {
  box-shadow: 0 6px 16px -4px rgb(16 185 129 / 0.45);
  transform: scale(1.04);
  z-index: 20;
}
.pill-drag {
  transform: rotate(-2deg);
}

/* While a member pill is being dragged, hint that other slot rows are
   valid drop targets. */
.dragging-member [data-slot-rotation-target="memberRow"] {
  outline: 2px dashed transparent;
  outline-offset: 4px;
  border-radius: 10px;
  transition: outline-color 0.15s ease, background-color 0.15s ease;
}
.dragging-member [data-slot-row]:hover [data-slot-rotation-target="memberRow"] {
  outline-color: rgb(52 211 153 / 0.6);
  background-color: rgb(236 253 245 / 0.4);
}
.dark .dragging-member [data-slot-row]:hover [data-slot-rotation-target="memberRow"] {
  background-color: rgb(6 78 59 / 0.2);
}

/* Mention prompt popover overrides. Lexxy's defaults cap width at 20ch
   (~16rem) and force flex on each <li>, which clips names + emails in our
   custom menu rows. The :where() defaults have zero specificity, so plain
   selectors win. */
lexxy-editor .lexxy-prompt-menu {
  min-inline-size: 18rem;
  max-inline-size: min(22rem, calc(100vw - 2rem));
}
lexxy-editor .lexxy-prompt-menu__item {
  display: block;
  padding: 0;
}
/* Make our menu-item content fill the row so flex-shrink + truncate work. */
lexxy-editor .lexxy-prompt-menu__item > * {
  inline-size: 100%;
}
lexxy-editor .lexxy-prompt-menu__item img {
  inline-size: 2rem;
  block-size: 2rem;
}