/* ═══════════════════════════════════════════════════════════════════════
   LeeHumanities CHAT — Dify branding layer (design-dd7)
   방식: SAFE CSS OVERRIDE (Dify 1.14의 semantic token을 값만 교체, 구조 변경 없음)
   근거: LEEHUMANITIES_DESIGN_SYSTEM_V1_1.md (THIRD_PARTY + APPLICATION hybrid)
   업그레이드 시: 이 파일은 Dify 자산이 아니므로 그대로 유지된다. 토큰명이 바뀌면
   각 항목의 대체 토큰을 다시 확인한다(REAPPLY_STEPS 참조).
   ═══════════════════════════════════════════════════════════════════════ */
:root,
html,
body,
[data-lh-chat-brand] {
  /* ── LeeHumanities palette (CHAT application variant) ── */
  --lh-chat-paper: oklch(97% 0.012 84);          /* canvas */
  --lh-chat-paper-deep: oklch(93.5% 0.018 82);   /* sidebar surface */
  --lh-chat-sheet: #fffdf9;                      /* card / input surface */
  --lh-chat-ink: oklch(22% 0.018 55);
  --lh-chat-ink-soft: oklch(35% 0.018 58);
  --lh-chat-ink-muted: oklch(48% 0.018 60);      /* paper 대비 5.5:1 */
  --lh-chat-ink-faint: oklch(60% 0.014 58);      /* 장식 전용 */
  --lh-chat-rule: oklch(85% 0.018 76);
  --lh-chat-rule-strong: oklch(76% 0.025 72);
  --lh-chat-accent: oklch(47% 0.105 36);         /* rust — paper 대비 5.6:1 */
  --lh-chat-accent-deep: oklch(38% 0.12 31);
  --lh-chat-accent-soft: oklch(95% 0.02 60);

  /* ── Dify semantic tokens → LeeHumanities values ── */
  --color-background-body: var(--lh-chat-paper);
  --color-background-default: var(--lh-chat-sheet);
  --color-background-default-subtle: oklch(98% 0.01 84);
  --color-background-default-lighter: #fffdf980;
  --color-background-surface-white: #fffdf9f2;
  --color-background-sidenav-bg: var(--lh-chat-paper-deep);
  --color-background-overlay-backdrop: oklch(97% 0.012 84 / 0.95);
  --color-chat-bubble-bg: linear-gradient(180deg, var(--lh-chat-sheet) 0%, #fffdf9f2 100%);

  --color-text-primary: var(--lh-chat-ink);
  --color-text-secondary: var(--lh-chat-ink-soft);
  --color-text-tertiary: var(--lh-chat-ink-muted);
  --color-text-quaternary: var(--lh-chat-ink-faint);

  --color-border-default: var(--lh-chat-rule);
  --color-border-muted: oklch(89% 0.015 76);

  --color-state-accent-solid: var(--lh-chat-accent);
  --color-state-accent-hover: var(--lh-chat-accent-soft);
  --color-state-accent-active: color-mix(in oklch, var(--lh-chat-accent) 12%, transparent);
  --color-state-accent-active-alt: color-mix(in oklch, var(--lh-chat-accent) 18%, transparent);
  --color-components-button-primary-bg: var(--lh-chat-accent);
  --color-components-button-primary-bg-hover: var(--lh-chat-accent-deep);
  --color-components-button-primary-bg-disabled: color-mix(in oklch, var(--lh-chat-accent) 14%, transparent);
  --color-components-button-primary-fg: #fffdf9;
  --color-components-button-secondary-bg: var(--lh-chat-sheet);
  --color-components-button-secondary-bg-hover: var(--lh-chat-accent-soft);
  --color-components-button-secondary-border: oklch(82% 0.04 45);
  --color-components-button-secondary-border-hover: var(--lh-chat-accent);
  --color-components-button-secondary-text: var(--lh-chat-accent-deep);
  --color-components-button-secondary-accent-text: var(--lh-chat-accent-deep);
  --color-components-button-secondary-accent-text-disabled: var(--lh-chat-ink-faint);
  --color-primary-500: var(--lh-chat-accent);

  /* Dify의 남은 blue 계열 토큰(파란 상호작용/차트/슬라이더/워크플로)을 rust family로 수렴.
     의미색(success/warning/error/danger)은 건드리지 않는다. */
  --color-accent-emphasis: var(--lh-chat-accent);
  --color-accent-fg: var(--lh-chat-accent);
  --color-text-accent: var(--lh-chat-accent-deep);
  --color-text-accent-light-mode-only: var(--lh-chat-accent-deep);
  --color-text-accent-secondary: var(--lh-chat-accent);
  --color-text-text-selected: color-mix(in oklch, var(--lh-chat-accent) 18%, transparent);
  --color-util-colors-blue-brand-blue-brand-500: var(--lh-chat-accent);
  --color-util-colors-blue-brand-blue-brand-600: var(--lh-chat-accent-deep);
  --color-components-tab-active: var(--lh-chat-accent);
  --color-components-toggle-bg: var(--lh-chat-accent);
  --color-components-checkbox-bg: var(--lh-chat-accent);
  --color-components-radio-border-checked: var(--lh-chat-accent);
  --color-components-slider-range: var(--lh-chat-accent);
  --color-components-icon-bg-blue-solid: var(--lh-chat-accent);
  --color-components-main-nav-nav-button-text-active: var(--lh-chat-accent-deep);
  --color-components-menu-item-bg-active: color-mix(in oklch, var(--lh-chat-accent) 10%, transparent);
  --color-components-option-card-option-selected-border: var(--lh-chat-accent);
  --color-components-input-border-active-prompt-2: var(--lh-chat-accent);
  --color-components-dropzone-bg-accent: color-mix(in oklch, var(--lh-chat-accent) 12%, transparent);
  --color-components-progress-bar-progress-solid: var(--lh-chat-accent);
  --color-components-progress-brand-progress: var(--lh-chat-accent);
  --color-components-progress-brand-border: var(--lh-chat-accent);
  --color-components-progress-bar-bg: color-mix(in oklch, var(--lh-chat-accent) 6%, transparent);
  --color-components-progress-bar-progress: color-mix(in oklch, var(--lh-chat-accent) 14%, transparent);
  --color-components-progress-bar-progress-highlight: color-mix(in oklch, var(--lh-chat-accent) 20%, transparent);
  --color-components-progress-brand-bg: color-mix(in oklch, var(--lh-chat-accent) 6%, transparent);
  --color-components-chart-line: var(--lh-chat-accent);
  --color-components-chart-current-1: var(--lh-chat-accent);
  --color-components-chart-area-1: color-mix(in oklch, var(--lh-chat-accent) 14%, transparent);
  --color-components-chart-area-2: color-mix(in oklch, var(--lh-chat-accent) 6%, transparent);
  --color-components-chat-input-audio-wave-active: var(--lh-chat-accent);
  --color-components-chat-input-audio-wave-default: color-mix(in oklch, var(--lh-chat-accent) 20%, transparent);
  --color-workflow-link-line-active: var(--lh-chat-accent);
  --color-workflow-link-line-handle: var(--lh-chat-accent);

  /* surface: 사이드바·섹션 배경을 paper family로 */
  --color-background-default-burn: var(--lh-chat-paper-deep);
  --color-background-default-dimmed: var(--lh-chat-paper-deep);
  --color-background-default-hover: oklch(98% 0.01 84);
  --color-background-section: oklch(98% 0.01 84);
  --color-background-section-burn: var(--lh-chat-paper);
  --color-background-section-burn-inverted: var(--lh-chat-paper);
  --color-background-soft: oklch(98% 0.01 84);
  --color-background-neutral-subtle: oklch(98% 0.01 84);
  --color-background-overlay-backdrop: oklch(97% 0.012 84 / 0.95);

  /* ── rounded SaaS 완화: Dify radius 8/12/16px → near-square family ── */
  --radius-xs: 2px;
  --radius-sm: 2px;
  --radius-md: 3px;
  --radius-lg: 4px;
  --radius-xl: 6px;
  --radius-2xl: 6px;
  --radius-3xl: 8px;
}


/* ── Dify는 일부 버튼 배경을 inline style로 지정한다(전송 버튼 = rgb(28,100,242)).
   inline style은 specificity로 이길 수 없으므로 이 두 규칙만 !important를 쓴다. ── */
button[class*="components-button-primary-bg"] {
  background-color: var(--lh-chat-accent) !important;
  color: #fffdf9 !important;
}
button[class*="components-button-primary-bg"]:hover {
  background-color: var(--lh-chat-accent-deep) !important;
}
button[class*="components-button-primary-bg"]:disabled {
  background-color: color-mix(in oklch, var(--lh-chat-accent) 45%, var(--lh-chat-sheet)) !important;
}
button[class*="components-button-primary-bg"] svg,
button[class*="components-button-primary-bg"] svg path {
  fill: currentColor !important;
}

/* ── 사이드바: rule 기반 구분, 그림자 최소화 ── */
div.flex.w-full.grow.flex-col {
  border-right: 1px solid var(--lh-chat-rule);
}
/* ── welcome card: 과한 그림자 제거, rule로 대체 ── */
.bg-chat-bubble-bg {
  box-shadow: none !important;
  border: 1px solid var(--lh-chat-rule);
}
/* ── suggestion chip: 그림자 제거 + rule 강화 (기능 유지) ── */
button[class*="border-components-button-secondary"],
a[class*="border-components-button-secondary"] {
  box-shadow: none !important;
  border-color: var(--lh-chat-rule-strong) !important;
}
button[class*="border-components-button-secondary"]:hover,
a[class*="border-components-button-secondary"]:hover {
  background-color: var(--lh-chat-accent-soft) !important;
  border-color: var(--lh-chat-accent) !important;
}

/* ── 앱 이름이 잘리거나(desktop) 모바일에서 화면을 밀어내는 문제 ──
   (Dify 기본 앱명이 KO·EN·ZH를 한 줄에 담아 390px에서 138px 가로 오버플로를 만들었다) */
[class*="system-md-semibold"].truncate {
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 사이드바 brand 행: 앱명이 "Lee Humanitie…"로 잘리지 않도록 2줄까지 허용 */
div[class*="gap-3"] > [class*="system-md-semibold"].truncate,
div[class*="gap-3"] > [class*="system-md-semibold"] {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
  overflow: hidden;
  text-overflow: clip;
  font-size: 12px;
  line-height: 1.3;
}
@media (max-width: 760px) {
  [class*="system-md-semibold"].truncate {
    max-width: 54vw;
  }
}

/* ── ecosystem navigation (Dify product nav와 시각적으로 구분) ── */
.lh-eco-nav {
  flex: 0 0 auto;
  margin: 0 12px 8px;
  padding: 10px 0 12px;
  border-top: 1px solid var(--lh-chat-rule);
  font-family: var(--lh-chat-font-sans, ui-sans-serif, system-ui, sans-serif);
}
.lh-eco-nav__title {
  display: block;
  margin: 0 0 6px;
  color: var(--lh-chat-ink-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.lh-eco-nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 30px;
  padding: 4px 6px;
  border-radius: 2px;
  color: var(--lh-chat-ink-soft);
  font-size: 13px;
  line-height: 1.3;
  text-decoration: none;
}
.lh-eco-nav a small {
  color: var(--lh-chat-ink-muted);
  font-size: 11px;
  letter-spacing: 0.02em;
}
.lh-eco-nav a:hover,
.lh-eco-nav a:focus-visible {
  background: var(--lh-chat-accent-soft);
  color: var(--lh-chat-accent-deep);
}
.lh-eco-nav a[aria-current="page"] {
  background: var(--lh-chat-sheet);
  color: var(--lh-chat-accent-deep);
  font-weight: 700;
  box-shadow: inset 2px 0 0 var(--lh-chat-accent);
}
.lh-eco-nav a:focus-visible {
  outline: 2px solid var(--lh-chat-accent);
  outline-offset: 1px;
}
@media (max-width: 760px) {
  .lh-eco-nav a {
    min-height: 44px;
  }
}