/* 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: #ffffff;      /* cards, dialogs, composer — raised white surfaces */
  --gray-20: #f3efe8;
  --gray-50: #efeae0;    /* sidebar / subtle surface (warm gray) */
  --gray-100: #e8e2d6;
  --gray-200: #ddd6c8;   /* border-light */
  --gray-300: #cdc4b2;   /* border-medium */
  --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;
}

/* Hybrid surfaces: a warm off-white background/thread (subtle hanji warmth) with
   white cards/dialogs and a warm-gray sidebar, so the UI has real depth instead of
   one flat beige. Sidebar = --surface-secondary = --gray-50 (#efeae0) via the ramp. */
html {
  --surface-chat: #fbf9f4;
  --surface-primary: #fbf9f4;
  --header-primary: #fbf9f4;
  --presentation: #fbf9f4;
  --surface-dialog: #ffffff;
}

/* 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"],
[aria-label="파일 첨부"] {   /* ko-KR localizes this aria-label; the English match above misses it */
  display: none !important;
}

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

/* --- Fhellow: remove whole Settings tabs (per S5 wireframe, red-dashed) ---
   Chat, Speech, and Data controls are cut entirely. Account is KEPT but trimmed
   to just "Delete account" (see trimAccount in fhellow-sources.js). The settings
   dialog is a Radix Tabs group; each trigger's id ends with `-trigger-<value>`
   and each panel's with `-content-<value>`, where value is the SettingsTabValues
   enum (chat, speech, data) — never localized. Matching the id suffix + role
   keeps this locale-independent (ko-KR translates the LABEL text only). */
[role="tab"][id$="-trigger-chat"],
[role="tab"][id$="-trigger-speech"],
[role="tab"][id$="-trigger-data"],
[role="tabpanel"][id$="-content-chat"],
[role="tabpanel"][id$="-content-speech"],
[role="tabpanel"][id$="-content-data"] {
  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 Temporary Chat toggle. Fhellow conversations are always saved
   (encrypted), so an unsaved/ephemeral chat mode doesn't apply. Keyed off the
   stable Lucide icon class, not translated text (ko-KR safe). The matching
   "Temporary Chat by default" setting lives in the already-hidden Chat tab. */
button:has(svg.lucide-message-circle-dashed) {
  display: none !important;
}

/* Hide LibreChat's Bookmark(s) control. The Radix BookmarkIcon carries no stable
   class, so match the path's `d`; hide the interactive element wrapping it. */
button:has(svg path[d^="M3 2.5C3 2.22386"]),
a:has(svg path[d^="M3 2.5C3 2.22386"]),
[role="menuitem"]:has(svg path[d^="M3 2.5C3 2.22386"]),
[role="button"]:has(svg path[d^="M3 2.5C3 2.22386"]) {
  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;
  /* Match the greeting's font size so the seal reads as the same size as the
     text. The greeting <p> carries text-2xl (sm:text-4xl); the seal is a flex
     sibling, not a child, so it can't inherit that via em — we mirror the same
     sizes here. The parent flex is items-center + gap-2, so it self-centers and
     self-spaces (no margin / vertical-align needed). */
  width: 1.5rem;   /* = text-2xl (24px) */
  height: 1.5rem;
  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;
}
@media (min-width: 640px) {
  .fh-landing-logo { width: 2.25rem; height: 2.25rem; }   /* = sm:text-4xl (36px) */
}

/* --- 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);
}
.dark .user-turn .markdown.message-content {
  background: var(--gray-800);
}

/* --- Fhellow: the 출처 block, moved below the answer ---
   fhellow-sources.js finds the citations whose link goes to MOLEG / law.go.kr,
   copies each one whole into a `.fh-sources` block after the message body, and
   hides the paragraph it came from. The verifiable source is the product's
   trust story, so it gets real UI weight - and a citation is only verifiable
   while its text and its link stay on the same line. */

/* A citation that moved into the box, and the "---" + "출처" heading once
   nothing is left under it (JS adds this class; React re-renders drop it and
   the next scan puts it back). */
.fh-src-line-hidden,
.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;
}

/* The groups, one per search the citations came from: statutes, web pages, the
 * firm's own documents. "SOURCES · 출처" is said once, above all of them; each
 * group says only which search it is. */
.fh-sources-groups {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.fh-source-group {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

/* The chip sizes to its text. Without this a flex column stretches it across
 * the whole width and it stops reading as a label. */
.fh-source-group > .fh-service-chip {
  align-self: flex-start;
}

/* One citation per row, in the order the answer met them. A column, not a
 * wrapping row of chips: the line has to be readable as a sentence, and a
 * reader matching [L12] in the body against the footer scans down a column. */
.fh-sources-list {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.fh-source-line {
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--gray-500);
  word-break: keep-all;
  overflow-wrap: anywhere;   /* the URL is long and must not push the column */
}

/* A link the box does not turn into a button (a non-law source) keeps the clay
 * accent and stays a link. */
.fh-source-line a[href]:not(.fh-source-btn) {
  color: var(--fh-clay);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.fh-source-line a[href]:not(.fh-source-btn):hover {
  filter: brightness(0.9);
}

/* [L2] and [W2] inside the answer. Same colour as the links in the 출처 rows,
 * but dotted rather than solid: several solid underlines standing mid-sentence
 * stop the prose from being readable. The marker only has to say it can be
 * pressed - where it goes is already said below it. */
a.fh-marker-link {
  color: var(--fh-clay);
  text-decoration: underline dotted;
  text-underline-offset: 2px;
  white-space: nowrap;   /* `[L2]` 가 줄바꿈으로 쪼개지면 번호가 아니라 글자가 된다 */
}

a.fh-marker-link:hover {
  text-decoration: underline;
  filter: brightness(0.9);
}

.dark .fh-source-line {
  color: var(--gray-400);
}

/* The law.go.kr link, as a button at the end of its own line. Sized to sit in
 * the line rather than to be a row of its own: a row of these was the shape
 * this replaced, and there every button said "원문 보기" and none of them said
 * which citation it opened. */
.fh-source-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-left: 0.35rem;
  padding: 0.12rem 0.5rem;
  border-radius: 0.45rem;
  background: var(--fh-celadon);
  color: #ffffff !important;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.5;
  text-decoration: none !important;
  border: 1px solid transparent;
  white-space: nowrap;
  vertical-align: baseline;
  transition: filter 0.15s ease;
}

.fh-source-btn:hover {
  filter: brightness(0.94);
  text-decoration: none !important;
}

.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);
}

/* White ink in both themes: the dark-brown ink read muddy on celadon. */
.dark .fh-source-btn {
  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; }