/* Balius Partners — BRAGAI
   All colors/theming live in public/theme.json (Chainlit 2.x, HSL format).
   This file only holds the few things theme.json can't express. */

/* ── Gold accent for inline code ─────────────────────────────────────────── */
code:not(pre code) {
  color: #c9a96e !important;
}

/* ── Subtle message fade-in ──────────────────────────────────────────────── */
@keyframes bragai-fadein {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.message-content {
  animation: bragai-fadein 0.18s ease-out both;
}

/* ── Footer spacer line ──────────────────────────────────────────────────────
   The "---" divider above the Sources / diagnostics footer renders as a shadcn
   Separator (role="none" div), NOT an <hr>. Give it equal top/bottom margin so the
   response-to-divider gap matches the divider-to-footer-text gap, with a bit more
   room. Scoped to message content (a container that also holds the markdown
   "article" blocks) so separators elsewhere in the UI aren't affected. ── */
:has(> [role="article"]) > [data-orientation="horizontal"][role="none"] {
  margin-top: 1.75rem !important;
  margin-bottom: 1.75rem !important;
}

/* ── Login page ──────────────────────────────────────────────────────────── */
/* Chainlit's login is a shadcn two-column block: left = logo-on-top + centered
   form, right = a decorative cover image (reusing the favicon, with classes
   object-cover + grayscale + brightness).

   CRITICAL: every rule is anchored on body:has(img[src*="/favicon"]) — the
   cover image's /favicon src appears ONLY on the login page (Microsoft-only login
   removed the old input[name="password"] anchor, so the cover image reappeared
   until this was re-anchored). The earlier version anchored on
   img[alt="Image"], but UPLOADED images in the chat also carry alt="Image", so
   those rules leaked onto the chat page and hid file-upload previews. Never use
   alt="Image" as a login anchor.                                              */

/* 1. Remove the decorative cover image + its panel. The image's src points at
      /favicon — a unique, stable signature (no other <img> on the page uses it),
      so we match on that AND its grayscale class, hiding both the image and its
      containing panel via several fallbacks so it can't slip through. */
/* Hide the cover image (matched by its unique /favicon src + grayscale class) and
   its DIRECT-parent panel only. Do NOT use a grandparent (> div > img) selector —
   that matches the grid container that also holds the form, blanking the page. */
body:has(img[src*="/favicon"]) img[src*="/favicon"],
body:has(img[src*="/favicon"]) img[class*="grayscale"],
body:has(img[src*="/favicon"]) div:has(> img[src*="/favicon"]),
body:has(img[src*="/favicon"]) div:has(> img[class*="grayscale"]) {
  display: none !important;
}

/* 2. Collapse the 2-column split so the form centers across the full page. */
body:has(img[src*="/favicon"]) [class*="grid-cols-2"] {
  grid-template-columns: 1fr !important;
}

/* 3. Center the logo + form vertically as one group (logo just above form). */
body:has(img[src*="/favicon"]) .flex.flex-col:has(> .flex.flex-1.items-center) {
  justify-content: center !important;
}
body:has(img[src*="/favicon"]) .flex.flex-1.items-center.justify-center {
  flex-grow: 0 !important;
}

/* 4. Center the logo horizontally (overrides Tailwind's md:justify-start).
      Scoped to login, so the chat-page header logo keeps its default position. */
body:has(img[src*="/favicon"]) img.logo {
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Settings gear left at its default position (next to the attachments icon) —
   absolute-positioning attempts kept breaking the composer/home-page layout. */

/* ── "/" command popup ───────────────────────────────────────────────────────
   DESKTOP: left at Chainlit's default. Earlier attempts to resize/reposition it
   (cap the list height, measure the space above the composer) caused the popup to
   clip at the TOP of the screen on the home page, which is worse than the
   default's bottom-clipping. Reverted to default — the home-page composer
   position is the crux. So the rule below is MOBILE-ONLY to avoid that. ── */

/* MOBILE: enable proper touch-scrolling inside the "/" command list. On iOS the
   nested list didn't momentum-scroll, so commands below the fold were unreachable.
   Scoped to small / touch screens so desktop positioning is untouched. */
@media (max-width: 768px) {
  [cmdk-list] {
    max-height: 45vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;  /* iOS momentum scroll */
    overscroll-behavior: contain !important;        /* don't scroll the page behind */
    touch-action: pan-y !important;                 /* allow vertical drag */
  }
}

/* ── Top-of-thread Share button (injected by custom.js) ────────────────────────
   Preferred state: DOCKED into the header control row (.docked) so it reads as a
   native top-bar control. Fallback (no header found): a fixed button below the bar.
   custom.js toggles .is-visible to show/hide it. */
#balius-share-btn {
  display: none;                       /* shown by JS via .is-visible */
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  flex: 0 0 auto;                      /* never grow/shrink in the header flex row */
  white-space: nowrap;
  box-sizing: border-box;              /* JS-matched height includes padding */
  border: none;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s;
}
#balius-share-btn .bs-ico { font-size: 0.95rem; }

/* Docked: an ICON-ONLY ghost control that mirrors the square header icon buttons.
   JS copies their exact width/height/radius/color; we just hide the label and style
   the hover. (Label hidden on desktop AND mobile so it matches the icon siblings.) */
#balius-share-btn.docked {
  position: static;
  background: transparent;
  opacity: 0.85;
  box-shadow: none;
}
#balius-share-btn.docked .bs-lbl { display: none; }
#balius-share-btn.docked:hover { background: rgba(125, 135, 150, 0.15); opacity: 1; }
#balius-share-btn.docked.is-visible { display: inline-flex; }

/* Fixed fallback: a solid pill just below the top bar, clear of the header controls. */
#balius-share-btn:not(.docked) {
  position: fixed;
  top: 58px;
  right: 16px;
  z-index: 1000;
  background: #2d4a6b;
  color: #fff;
  padding: 7px 14px;
  box-shadow: 0 1px 4px rgba(15, 25, 35, 0.18);
}
#balius-share-btn:not(.docked):hover { background: #3e6d97; }
#balius-share-btn:not(.docked).is-visible { display: inline-flex; }

@media (max-width: 768px) {
  /* Fixed fallback only: sit BELOW the top bar (accounting for the iOS notch in
     standalone/PWA mode) so it never covers the header controls. */
  #balius-share-btn:not(.docked) {
    top: calc(env(safe-area-inset-top, 0px) + 60px);
    right: 12px;
    padding: 6px 11px;
    font-size: 0.8rem;
  }
}

/* ── Mobile readability: stop wide content from forcing horizontal page scroll ───── */
@media (max-width: 768px) {
  /* Long inline-code spans (e.g. the diagnostics footer "⏱ … 💰 …") wrap instead of
     overflowing. They're "·"-separated with spaces, so they break cleanly. */
  :has(> [role="article"]) code:not(pre code) {
    white-space: normal;
    overflow-wrap: break-word;
  }
  /* Wide tables / code blocks scroll inside the bubble rather than stretching the page. */
  [role="article"] table,
  [role="article"] pre {
    display: block;
    max-width: 100%;
    overflow-x: auto;
  }
}

/* ── Suppress mobile button "metadata" popups ────────────────────────────────
   On iOS, tapping/long-pressing a button surfaces the native tap-highlight box
   and long-press callout. Kill those on buttons so taps feel clean. */
button, [role="button"], #balius-share-btn {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

/* ── Reasoning trace (💭 at the top of the answer) ────────────────────────────
   The model's reasoning streams as a blockquote led by 💭, ABOVE the answer in the
   same bubble. custom.js tags it: .balius-active (spinner) while thinking,
   .balius-collapsed (clamped to its header) once the answer streams in below.
   Minimal, native-step look: no heavy box, just a faint panel and a rotating chevron
   you click to expand/collapse — point-down when open, point-right when collapsed. */
blockquote.balius-think {
  cursor: pointer;
  border-left: none;                         /* drop the default quote bar */
  border: none;
  background: rgba(45, 74, 107, 0.045);
  border-radius: 8px;
  padding: 0.4rem 1.7rem 0.4rem 0.7rem;      /* right room for the chevron */
  margin: 0.2rem 0 0.75rem;
  font-size: 0.86rem;
  line-height: 1.5;
  color: #6b7886;
  position: relative;
  transition: background 0.15s ease;
}
blockquote.balius-think:hover { background: rgba(45, 74, 107, 0.075); }
blockquote.balius-think p { margin: 0.16rem 0; }
blockquote.balius-think p:first-child { font-weight: 600; color: #3e5a7d; } /* header */

/* Disclosure chevron (top-right): points right when collapsed, rotates down when open. */
blockquote.balius-think::after {
  content: "▸";
  position: absolute;
  top: 0.45rem;
  right: 0.7rem;
  font-size: 0.8rem;
  opacity: 0.55;
  transition: transform 0.15s ease;
}
blockquote.balius-think:not(.balius-collapsed):not(.balius-active)::after {
  transform: rotate(90deg);                  /* open → point down */
}

/* Actively thinking → swap the chevron for a spinner, stay expanded. */
blockquote.balius-think.balius-active::after {
  content: "";
  top: 0.6rem;
  width: 0.72rem;
  height: 0.72rem;
  border-radius: 50%;
  border: 2px solid rgba(45, 74, 107, 0.22);
  border-top-color: rgba(45, 74, 107, 0.85);
  opacity: 1;
  animation: balius-think-spin 0.7s linear infinite;
}
@keyframes balius-think-spin { to { transform: rotate(360deg); } }

/* Done thinking → show ONLY the "💭 Thinking" header (hide the reasoning), so it's a
   tidy single line, vertically centered by the panel's equal top/bottom padding. */
blockquote.balius-think.balius-collapsed { opacity: 0.72; }
blockquote.balius-think.balius-collapsed > *:not(:first-child) { display: none; }
blockquote.balius-think.balius-collapsed > p:first-child { margin: 0; }

/* ── Hide Chainlit watermark ─────────────────────────────────────────────── */
a[href*="chainlit.io"],
a[href*="github.com/Chainlit"] {
  display: none !important;
}