/* Fhellow tone overlay for LibreChat: claude.ai-like warmth, no fork.
 *
 * LibreChat themes in two layers: semantic tokens (--surface-*, --text-*,
 * --border-*) that all resolve to a primitive ramp (--white, --gray-20 …
 * --gray-900) defined on :root. Overriding the ~14 primitives therefore
 * restyles every surface, including ones this file never names. That is why
 * it is a handful of lines instead of the 35-token semantic list, and why a new
 * upstream surface inherits the tone instead of appearing stark white.
 *
 * The lightness steps of the upstream ramp are preserved, so every existing
 * text-on-surface contrast pair keeps its ratio; only the hue moves, from a
 * cool grey to a warm neutral.
 *
 * Loaded by a <link> that build_tone_overlay.py injects into a copy of the
 * image's own index.html. Nothing in LibreChat's source is modified.
 */

/* ============================================================================
   Fhellow brand: NAKWAN (낙관 · the seal) — Korean legal-heritage identity.
   Hanji-paper warmth, 먹 (ink) black, and 인주 (seal) red as the one assertive
   accent. Celadon + ochre are available as secondary accents. See branding board.
   ============================================================================ */
:root {
  /* Anchors: hanji paper + 먹 ink. */
  --fh-paper: #f1e9d9;   /* hanji */
  --fh-ink: #14110d;     /* 먹 ink */

  /* Warm hanji -> ink ramp (same lightness steps as upstream's cool ramp, so
     every text-on-surface contrast pair keeps its ratio; only the hue moves). */
  --white: var(--fh-paper);
  --gray-20: #ece3d0;
  --gray-50: #efe7d6;
  --gray-100: #e6dcc6;
  --gray-200: #dbcfb6;
  --gray-300: #c4b596;
  --gray-400: #9a8d70;
  --gray-500: #5f5748;
  --gray-600: #454034;
  --gray-700: #302c24;
  --gray-800: #211e18;
  --gray-850: #1a1712;
  --gray-900: var(--fh-ink);

  /* Second neutral set, warmed to match. */
  --gizmo-gray-500: #6b6250;
  --gizmo-gray-600: #514a3c;
  --gizmo-gray-950: #1a1712;

  /* Accent = 인주 seal red. Replaces LibreChat's violet everywhere. */
  --fh-clay: #b23127;
  --brand-purple: var(--fh-clay);

  /* Secondary brand accents (used by a few Fhellow components). */
  --fh-celadon: #5e7e6e;
  --fh-ochre: #a8823c;

  --fh-radius: 0.75rem;
}

/* Chat surface: claude.ai puts the thread on the paper tone rather than pure
   white, which is most of the warmth you actually perceive. */
html {
  --surface-chat: var(--fh-paper);
  --surface-primary: var(--fh-paper);
  --header-primary: var(--fh-paper);
  --presentation: var(--fh-paper);
}

/* Dark side: warm brown-black rather than blue-black, keeping the hanji/ink feel. */
.dark {
  --surface-chat: #241f18;
  --surface-primary: #1c1813;
  --presentation: #1c1813;
  --header-primary: #1c1813;
}

/* Composer and message cards: a touch more radius, a lighter border. Scoped to
   the token so it cannot fight upstream's utility classes on specificity. */
form textarea,
form [class*="rounded"] {
  border-radius: var(--fh-radius);
}

/* Send is an ACTION, so it uses celadon ("go"), not the seal red — red is reserved
   for identity (avatar, favicon, citation marks) so it never reads as "danger". */
button[data-testid="send-button"]:not(:disabled) {
  background-color: var(--fh-celadon);
  border-color: var(--fh-celadon);
  color: #ffffff;
}

button[data-testid="send-button"]:not(:disabled):hover {
  filter: brightness(0.94);
}

/* Reduce the cool blue in focus rings so they sit in the same family. */
:root {
  --ring: var(--gray-400);
  --ring-primary: var(--gray-500);
}

/* Fhellow does not ship claude.ai's typefaces (Styrene and Copernicus are
   licensed, and the artifact CSP blocks font CDNs anyway), so the stack stays
   system-native with Korean coverage. Tone is matched; the faces are not
   imitated, and no Claude or Anthropic mark appears anywhere. */
:root {
  --fh-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Apple SD Gothic Neo",
    "Pretendard", "Noto Sans KR", "Malgun Gothic", sans-serif;
}

body {
  font-family: var(--fh-sans);
}

/* --- Fhellow: hide scoped-out composer buttons (MCP only) ---
   Attach files is KEPT — document upload is core to the legal workflow (per the
   Aug 26 meeting: keep account, chat history, document attachment). MCP is out of scope.
   The *=MCP catch-all hides any MCP control (MCP Servers, MCP Settings, …) in any
   state, since MCP is entirely out of scope for Fhellow. */
[aria-label="MCP Servers"],
[aria-label*="MCP" i],
[aria-label*="mcp" i] {
  display: none !important;
}

/* --- Fhellow: hide the footer (LibreChat version + "Every AI for Everyone" + links) ---
   The footer div carries role="contentinfo" (stable ARIA landmark). CUSTOM_FOOTER
   can't blank it (LibreChat strips empty values), so we hide the element. */
div[role="contentinfo"] {
  display: none !important;
}

/* --- Fhellow: hide the Tools dropdown button in the composer --- */
#tools-dropdown-button,
[aria-label="Tools Options"] {
  display: none !important;
}

/* --- Fhellow: hide left-sidebar controls (per request) ---
   Bookmarks (sidebar nav) and the sidebar "Attach Files" entry. Scoped by their
   exact aria-labels so the COMPOSER paperclip — "Attach File Options" /
   #attach-file-menu-button — is unaffected and document attachment still works. */
[aria-label="Bookmarks"],
#bookmark-nav-menu-button,
[aria-label="Attach Files"] {
  display: none !important;
}

/* --- Fhellow: hide the "Temporary Chat" toggle (top-right of the header) --- */
[aria-label="Temporary Chat"] {
  display: none !important;
}

/* Generic hide utility used by the enhancer (e.g. the default greeting bot icon). */
.fh-hide {
  display: none !important;
}

/* Hide LibreChat's default bot icon that sits right after our seal in the greeting.
   Done in CSS (relative to our injected seal) so the greeting's letter-animation
   re-renders can't undo it, unlike a JS-applied class. */
.fh-landing-logo + *:has(svg.lucide-bot) {
  display: none !important;
}

/* --- Fhellow: seal logo next to the "Good afternoon, …" greeting (new-chat landing).
   Injected by fhellow-sources.js as .fh-landing-logo before the greeting text. --- */
.fh-landing-logo {
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  margin-right: 0.5rem;
  vertical-align: -0.28em;
  flex: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Crect x='4' y='4' width='40' height='40' rx='9' fill='%23b23127'/%3E%3Ctext x='24' y='34.5' text-anchor='middle' font-family='Georgia,serif' font-size='29' font-weight='700' fill='%23f1e9d9'%3EF%3C/text%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* --- Fhellow: replace the default "bot" avatar with the Nakwan seal (F) ---
   The assistant avatar is svg.lucide-bot inside a rounded-full circle. We paint
   the seal on the circle and hide the robot glyph. */
div.overflow-hidden.rounded-full:has(> svg.lucide-bot) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect width='24' height='24' fill='%23b23127'/%3E%3Ctext x='12' y='17' text-anchor='middle' font-family='Georgia,serif' font-size='15' font-weight='700' fill='%23f1e9d9'%3EF%3C/text%3E%3C/svg%3E");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
div.overflow-hidden.rounded-full:has(> svg.lucide-bot) > svg.lucide-bot {
  visibility: hidden;
}

/* --- Fhellow: hide the Export (options) button, top-right of a conversation --- */
#export-menu-button,
[aria-label="Export options"] {
  display: none !important;
}

/* --- Fhellow: chat-bubble layout — user's messages RIGHT, Fhellow's LEFT ---
   Each message turn carries `.user-turn` or `.agent-turn`. We right-align the
   user turn and wrap its text in a clay-tinted bubble; Fhellow's stays left. */
/* The user message is a right-packed block: [avatar][name] then the bubble.
   We shrink the user's content column and right-justify the row, so the avatar
   stays LEFT of the name and the whole group hugs the right edge. */
/* Match the message row by the *presence* of an aria-label, not its text — the
   ko-KR locale localizes "Message from …" so an English-text selector misses. */
[aria-label]:has(> .user-turn) {
  justify-content: flex-end;
}
[aria-label]:has(> .user-turn) > .user-turn {
  width: auto !important;
  max-width: 82%;
}
.user-turn .markdown.message-content {
  width: fit-content;
  max-width: 100%;
  padding: 0.5rem 0.95rem;
  border-radius: 1.15rem 1.15rem 0.35rem 1.15rem;
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
}
.dark .user-turn .markdown.message-content {
  background: var(--gray-800);
  border-color: var(--gray-700);
}

/* --- Fhellow: source citations as buttons below the answer ---
   fhellow-sources.js finds MOLEG / law.go.kr links in an assistant message,
   hides the raw inline link, and appends a `.fh-sources` block (a "Sources"
   label + one `.fh-source-btn` per unique source) right after the message body.
   The verifiable source is the product's trust story, so it gets real UI weight. */

/* The raw inline link is replaced by the buttons below (JS adds this class). */
.fh-src-inline-hidden {
  display: none !important;
}

.fh-sources {
  margin: 0.65rem 0 0.15rem;
  padding-top: 0.6rem;
  border-top: 1px dashed var(--gray-300);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.fh-sources-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.fh-sources-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray-400);
}

/* Composer capability chip: sits next to the paperclip in the input bar to show
   the Korean Law (MOLEG) service is available. Injected by fhellow-sources.js. */
.fh-composer-chip {
  /* Inline inside the input, just before the textarea (where "Message Fhellow" is). */
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1;
  padding: 0.25rem 0.55rem;
  margin: 0 0.4rem 0 0.15rem;
  border-radius: 999px;
  background: var(--gray-20);
  border: 1px solid var(--gray-300);
  color: var(--gray-600);
  white-space: nowrap;
  cursor: default;
  user-select: none;
  flex: none;
}

.fh-composer-chip .fh-composer-ico {
  color: var(--fh-clay);
  font-size: 0.95em;
}

/* On narrow composers, keep just the icon to save room. */
@media (max-width: 520px) {
  .fh-composer-chip .fh-composer-txt { display: none; }
}

/* Provenance chip: "which service answered" (e.g. MOLEG · 판례).
   Neutral pill with a clay status dot, so it reads as a trust signal, not an action. */
.fh-service-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 0.28rem 0.62rem;
  border-radius: 999px;
  background: var(--gray-20);
  border: 1px solid var(--gray-300);
  color: var(--gray-600);
  white-space: nowrap;
}

.fh-service-chip .fh-chip-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--fh-clay);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--fh-clay) 22%, transparent);
  flex: none;
}

.fh-sources-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* The button itself. Scoped by class so it can't fight upstream utilities. */
.fh-source-btn,
.markdown a[href*="law.go.kr"]:not(.fh-src-inline-hidden) {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.8rem;
  border-radius: 0.6rem;
  background: var(--fh-celadon);
  color: #ffffff !important;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none !important;
  border: 1px solid transparent;
  transition: filter 0.15s ease, transform 0.15s ease;
  max-width: 100%;
}

.fh-source-btn:hover,
.markdown a[href*="law.go.kr"]:not(.fh-src-inline-hidden):hover {
  filter: brightness(0.94);
  text-decoration: none !important;
}

.fh-source-btn .fh-src-txt {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 32ch;
}

.fh-source-btn .fh-src-ico {
  font-size: 0.95em;
  line-height: 1;
}

.fh-source-btn .fh-src-arrow {
  opacity: 0.85;
  transition: transform 0.15s ease;
}

.fh-source-btn:hover .fh-src-arrow {
  transform: translate(1px, -1px);
}

/* Green source buttons keep white ink in both themes (dark-brown ink from the
 * old red-button styling read muddy on celadon). */
.dark .fh-source-btn,
.dark .markdown a[href*="law.go.kr"]:not(.fh-src-inline-hidden) {
  color: #ffffff !important;
}

/* ── Answer typography: one consistent font + clean paragraph rhythm ──────────
 * The message body renders model markdown. These rules give every answer a
 * single Korean-first font stack, roomy line-height, real spacing between
 * paragraphs, and keep-all word breaking so Korean never snaps mid-word.
 * Heading / list / blockquote rules only take effect when the model emits
 * Markdown (##, -, >); on plain-text answers the font + paragraph spacing
 * still apply, which is the bulk of the readability win.
 */
.markdown.message-content {
  font-family: "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic",
               -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15.5px;
  line-height: 1.78;              /* Korean legal prose needs the air */
  letter-spacing: -0.003em;
  word-break: keep-all;           /* don't break Korean words at line ends */
  overflow-wrap: anywhere;        /* long URLs / case numbers still wrap */
}

/* paragraph rhythm — the main fix for the wall-of-text look */
.markdown.message-content p { margin: 0 0 0.95em; }
.markdown.message-content p:last-child { margin-bottom: 0; }

/* Section headings when the model emits Markdown (#, ##, ### or a setext
 * underline). Pin the family to the body stack and cap every level — otherwise
 * a stray heading falls through to LibreChat's prose default (~2.25em in a
 * different heading font), which reads as one paragraph "jumping" bigger. */
.markdown.message-content h1,
.markdown.message-content h2,
.markdown.message-content h3,
.markdown.message-content h4,
.markdown.message-content h5,
.markdown.message-content h6 {
  font-family: inherit !important;   /* never fall back to a serif heading font */
  font-weight: 700;
  line-height: 1.4;
  margin: 1.4em 0 0.5em;
}
.markdown.message-content h1 { font-size: 1.25em !important; }
.markdown.message-content h2 { font-size: 1.16em !important; }
.markdown.message-content h3 { font-size: 1.06em !important; }
.markdown.message-content h4,
.markdown.message-content h5,
.markdown.message-content h6 { font-size: 1em !important; }

/* lists */
.markdown.message-content ol,
.markdown.message-content ul { margin: 0.6em 0 0.95em; padding-left: 1.3em; }
.markdown.message-content li { margin: 0.3em 0; }
/* Bullet + number markers follow the body text color (black in light, white in
 * dark) — kept neutral; green is reserved for the source/hyperlink buttons. */
.markdown.message-content li::marker { color: currentColor; }

/* statute quotations, when the model uses a blockquote */
.markdown.message-content blockquote {
  margin: 0.9em 0;
  padding: 0.45em 1em;
  border-left: 3px solid var(--fh-clay);
  background: color-mix(in srgb, var(--fh-clay) 8%, transparent);
  border-radius: 0 8px 8px 0;
}

/* ── Login / auth screen ─────────────────────────────────────────────────────
 * The auth layout root is `.min-h-screen.flex-col.bg-white` (dark: bg-gray-900).
 * Put it on the Fhellow font stack, and recolor the primary "Continue" submit
 * from LibreChat's emerald to celadon so "proceed" is one color across the
 * product (matches Send). Scoped to the auth root so the rest of the app is
 * untouched. */
.min-h-screen.flex-col.bg-white {
  font-family: "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic",
               -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.min-h-screen.flex-col.bg-white button[type="submit"] {
  background-color: var(--fh-celadon) !important;
  color: #ffffff !important;
}
.min-h-screen.flex-col.bg-white button[type="submit"]:hover {
  background-color: color-mix(in srgb, var(--fh-celadon) 88%, #000) !important;
}

/* ── Sidebar chat list: title-only rows ──────────────────────────────────────
 * Every conversation uses the one Fhellow endpoint, so the per-row endpoint
 * icon is an identical robot on every line — pure noise. Drop it and let the
 * titles run full width. Scoped to the conversation-row icon only, so the
 * assistant avatar and landing seal are untouched. */
[data-testid="convo-icon"] { display: none !important; }