/* Login-page side panel. The image itself comes from `login_page_image` in
 * .chainlit/config.toml — do NOT also set a background-image on .lg\:block, or
 * the two stack on top of each other.
 *
 * Chainlit hardcodes `object-cover` on that <img>. The AI4OPS mark is a wide
 * wordmark (87x32), so `cover` on a tall panel crops it to a few illegible
 * letters; `contain` fits it whole. */
img[alt="Image"].object-cover {
    object-fit: contain !important;
    padding: 2rem;
}

/* Chainlit gives that panel a `bg-muted` fill (a light blue-grey). Drop it so
 * the wordmark sits on the page background. */
.lg\:block.bg-muted {
    background-color: transparent !important;
}

/* logo_ai4ops.svg is dark ink (#16204D) for the light theme. An SVG loaded via
 * <img> can't see Chainlit's `.dark` class, so it can't recolor itself; invert
 * it here instead, keyed off the app theme rather than the OS preference. */
.dark img[alt="Image"].object-cover {
    filter: invert(1) !important;
}

/* `.w-\[150px\]` is the <img class="logo"> above the login form. The side panel
 * already carries the AI4OPS mark, so this one is redundant — keep it hidden. */
.dark\:grayscale:is(.light *),
.dark\:grayscale:is(.dark *),
.w-\[150px\] {
    display: none !important;
}

.watermark {
    display: none !important;
}

/* Chainlit's pulsating dot shown while a message streams */
.loading-cursor {
    display: none !important;
}

/* ── Assistant avatar ────────────────────────────────────────────────────────
 * Chainlit renders an assistant avatar from GET /avatars/{ui.name}. When no
 * public/avatars/<slug>.* file matches, that route silently falls back to
 * GET /favicon, which is why renaming the assistant to "AI4OPS Assistant"
 * made the DAA favicon mark show up in the message list. We want that slot
 * empty, so hide the avatar (and its wrapper, which would otherwise keep
 * reserving layout width).
 *
 * Chainlit builds the alt as `Avatar for ${name || "default"}`, so matching the
 * configured name alone misses the "default" fallback — that stray avatar was
 * rendering a second copy of the mark next to the "Thinking..." step. Match the
 * prefix instead. Chainlit does not render an avatar on user messages, so this
 * is assistant-only in practice. */
img[alt^="Avatar for"],
:has(> img[alt^="Avatar for"]) {
    display: none !important;
}

/* ── DAA mark beside the "Thinking..." / "Thought for ..." step header ───────
 * Chainlit renders each cl.step as a Radix accordion whose trigger button
 * carries id="step-{step name}". The two names come from
 * src/airops/chainlit.py (the @cl.step decorator and the later rename). */
button[id^="step-Thinking"]::before,
button[id^="step-Thought"]::before {
    content: "";
    display: inline-block;
    flex: none;
    width: 1em;
    height: 1em;
    margin-right: 0.4em;
    vertical-align: -0.15em;
    background: url('/public/images/logo_mark.svg') no-repeat center / contain;
}

/* Gently spin the mark while the step is still "Thinking...". */
button[id^="step-Thinking"]::before {
    animation: airops-mark-pulse 1.4s ease-in-out infinite;
}

@keyframes airops-mark-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.35; }
}

/* ══════════════════════════════════════════════════════════════════════════════
 * PORTED FROM WIZZ — see SYNC.md §3.2.
 *
 * public/stylesheet.css is rsync-excluded to protect the DAA branding above, but
 * WIZZ ships the component CSS for public/elements/*.jsx and public/custom.js in
 * this same file. Those components DO sync, so their rules have to be merged in
 * by hand every time. Everything below is copied from WIZZ's stylesheet.css and
 * sits *after* the DAA block so DAA branding wins on any collision.
 *
 * Deliberately NOT ported: WIZZ's `.lg\:block` rule (sets a wizzair.png login
 * background — DAA uses `login_page_image` in .chainlit/config.toml instead) and
 * `img.logo.w-\[100px\]` (copilot logo hide; DAA handles its own logo slots).
 * ══════════════════════════════════════════════════════════════════════════════ */

/* ─── ClickableEntity links ──────────────────────────────────────────────────
 * Shared by all custom elements via window.__ClickableEntity.
 * Canonical definition: public/elements/ClickableEntity.jsx
 * Used by NotificationQueryElement, DataTableElement, FlightDataElement,
 * FlightAlertCard, WeatherElement, BriefingElement, CrewTransferElement. */
.__ce {
  display: inline;
  appearance: none;
  padding: 0;
  border: none;
  border-radius: 0;
  background: none;
  font-size: 1.05em;
  font-weight: inherit;
  font-family: inherit;
  line-height: inherit;
  color: #2563eb;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  vertical-align: baseline;
  margin: 0 1px;
  white-space: nowrap;
  transition: color 0.15s;
  user-select: text !important;
  -webkit-user-select: text !important;
}
.__ce:hover { color: #1d4ed8; }
.__ce-airport, .__ce-flight_number, .__ce-tail_number, .__ce-city_pair { color: #2563eb; }
/* Action cells (e.g. the free-up table's "view") read as a row action, not an entity. */
.__ce-action { color: #2563eb; font-size: 1em; }

/* ─── DataTable sizing ─────────────────────────────────────────────────────── */
/* DataTables ships `table.dataTable { width: 100% }` and re-applies a width on init, which
   stretches a handful of short columns across the whole message. Size to content instead and
   let the wrapper scroll if the content really is wider than the message column.            */
.dt-container table.dataTable,
table.dataTable.display { width: auto !important; max-width: 100%; }
.dt-container { width: auto; max-width: 100%; }
[style*="--ce-color-override"] .__ce,
[style*="--ce-color-override"] .__ce-airport,
[style*="--ce-color-override"] .__ce-flight_number,
[style*="--ce-color-override"] .__ce-tail_number,
[style*="--ce-color-override"] .__ce-city_pair { color: var(--ce-color-override); text-decoration-color: var(--ce-color-override); }
[style*="--ce-color-override"] .__ce:hover { filter: brightness(0.85); }
.__ce-dark-header .__ce { color: #fff; text-decoration-color: rgba(255,255,255,0.6); }
.__ce-dark-header .__ce:hover { color: #e2e8f0; }
.__ce.__ce-cancelled { color: #9ca3af; text-decoration-color: #9ca3af; }
.__ce.__ce-cancelled:hover { color: #6b7280; text-decoration-color: #6b7280; }

/* ─── Processing loading spinner ─────────────────────────────────────────────
 * Rendered inline inside a transient cl.Message by LoadingSpinner.jsx and
 * LoadingIndicator.jsx (both instantiated from src/airops/chainlit.py).
 * Removed automatically when _process_user_query calls _spinner_msg.remove().
 * The hardcoded hsl(227 70% 57%) matches --primary in DAA's public/theme.json. */

@keyframes airops-spin {
  to { transform: rotate(360deg); }
}

.airops-thinking-spinner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 20px 0 12px;
}

.airops-thinking-ring {
  width: 56px;
  height: 56px;
  border: 6px solid hsl(227 70% 57% / 0.18);
  border-top-color: hsl(227, 70%, 57%);
  border-radius: 50%;
  animation: airops-spin 0.75s linear infinite;
}

.airops-thinking-text {
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: hsl(215, 16%, 47%);  /* --muted-foreground */
}

/* ─── Unread thread indicator in history sidebar ─────────────────────────────
 * Applied to a thread item element by custom.js when the backend replies while
 * the user is viewing a different conversation. */

/* Highlight the thread row wrapper div (#thread-<id>).
   border-left draws the indicator line; the wrapper is a block-level div
   so it will never clip the left border or the absolutely-placed dot. */
.airops-unread-thread {
  position: relative !important;
  border-left: 3px solid hsl(227, 70%, 57%) !important;
  background: hsl(227 70% 57% / 0.07) !important;
  border-radius: 6px;
}

/* Blue dot anchored to the right edge of the wrapper row */
.airops-unread-dot {
  position: absolute !important;
  top: 50% !important;
  right: 8px !important;
  transform: translateY(-50%) !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: hsl(227, 70%, 57%) !important;
  pointer-events: none;
  box-shadow: 0 0 0 2px hsl(227 70% 57% / 0.25);
  z-index: 10;
}

/* ─── Element Sidebar (Notification Feed) close button icon ──────────────────
 * Chainlit renders the close button inside #side-view-title using a ChevronLeft
 * icon. Since the panel slides in from the right, we mirror it to point right. */
#side-view-title button:first-child svg {
  transform: scaleX(-1);
}

/* ─── Header link icons in dark mode ─────────────────────────────────────────
 * "Check Notifications" (bell.png) and "Notification Feed" (list.png) are
 * declared as UI.header_links icon_url in .chainlit/config.toml (DAA sets the
 * same two paths), so Chainlit renders them as <img>, not inline SVG — color and
 * fill can't reach them. Both are solid-black glyphs on a transparent
 * background, so they vanish against the dark header. invert() maps black to
 * white and leaves the alpha channel alone. */
.dark img[src*="bell.png"],
.dark img[src*="list.png"] {
  filter: invert(1);
}