/* LegalContext assistant-answer typography; assistant turns only. */
.message-render .agent-turn .message-content {
  font-family: "Pretendard Variable", Pretendard, "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.75;
  color: #15171a;
  letter-spacing: -0.008em;
}
.message-render .agent-turn .message-content :where(p, li, dd, dt) { font-size: 15px; color: #15171a; }
.message-render .agent-turn .message-content h1 { font-size: 20px; }
.message-render .agent-turn .message-content h2 { font-size: 18px; }
.message-render .agent-turn .message-content h3 { font-size: 16.5px; }
.message-render .agent-turn .message-content :where(h4, h5, h6) { font-size: 15.5px; }
.message-render .agent-turn .message-content table { font-size: 14px; }
.message-render .agent-turn .message-content :not(pre) > code { font-size: 13.5px; }
#root .message-render .agent-turn .message-content a {
  color: #6597bc !important;
  font-size: 0.9em !important;
  font-weight: 500 !important;
  text-decoration-color: rgba(101, 151, 188, 0.42) !important;
  text-underline-offset: 0.16em;
}
#root .message-render .agent-turn .message-content a:hover {
  color: #477fa8 !important;
  text-decoration-color: rgba(71, 127, 168, 0.72) !important;
}
.dark .message-render .agent-turn .message-content,
.dark .message-render .agent-turn .message-content :where(p, li, dd, dt) { color: #edf1f5; }
.dark #root .message-render .agent-turn .message-content a {
  color: #8db8d7 !important;
  text-decoration-color: rgba(141, 184, 215, 0.46) !important;
}
.dark #root .message-render .agent-turn .message-content a:hover {
  color: #abd0e9 !important;
  text-decoration-color: rgba(171, 208, 233, 0.72) !important;
}

/* Mobile conversation typography: questions and answers share one readable
   body scale, while headings retain a clear descending hierarchy. */
@media (max-width: 720px) {
  #root .message-render :where(.agent-turn, .user-turn) .message-content.markdown {
    --markdown-font-size: clamp(18px, calc(17.7px + 0.22vw), 19px);
    font-size: var(--markdown-font-size) !important;
    line-height: 1.72 !important;
  }
  #root .message-render :where(.agent-turn, .user-turn) .message-content.markdown :where(p, li, dd, dt) {
    font-size: inherit !important;
    line-height: inherit !important;
  }
  #root .message-render :where(.agent-turn, .user-turn) .message-content.markdown h1 {
    font-size: 1.36em !important;
    line-height: 1.34 !important;
  }
  #root .message-render :where(.agent-turn, .user-turn) .message-content.markdown h2 {
    font-size: 1.24em !important;
    line-height: 1.4 !important;
  }
  #root .message-render :where(.agent-turn, .user-turn) .message-content.markdown h3 {
    font-size: 1.14em !important;
    line-height: 1.46 !important;
  }
  #root .message-render :where(.agent-turn, .user-turn) .message-content.markdown :where(h4, h5, h6) {
    font-size: 1.06em !important;
    line-height: 1.5 !important;
  }
  #root .message-render :where(.agent-turn, .user-turn) .message-content.markdown :where(blockquote, table) {
    font-size: 0.94em !important;
  }

  /* LibreChat mobile left sidebar.  Keep conversation titles prominent while
     section labels and supporting controls remain one tier smaller. */
  #root nav:has([aria-label="Conversations"]) [data-testid="convo-item"],
  #root nav:has([aria-label="Conversations"]) [data-testid="favorite-item"] {
    font-size: clamp(16.5px, calc(16.3px + 0.12vw), 17px) !important;
    line-height: 1.45 !important;
  }
  #root nav:has([aria-label="Conversations"]) :where(button, input) {
    font-size: clamp(15.5px, calc(15.3px + 0.12vw), 16px) !important;
  }
  #root nav:has([aria-label="Conversations"]) :where(h2, .text-xs),
  #root .account-settings-popover :where(.text-xs, .text-sm) {
    font-size: clamp(15px, calc(14.8px + 0.12vw), 15.5px) !important;
  }
  #root [data-testid="nav-user"] {
    font-size: 16px !important;
  }

  /* Compact ChatGPT-style mobile composer.  The composer stays in normal
     document flow, but its empty state is one row and sits directly above the
     keyboard/home-indicator safe area. */
  #root form:has(#prompt-textarea) {
    margin-bottom: max(4px, env(safe-area-inset-bottom)) !important;
    padding-inline: 8px !important;
    gap: 0 !important;
  }
  #root form:has(#prompt-textarea) > div > div > div:has(#prompt-textarea) {
    min-height: 52px !important;
    padding-bottom: 0 !important;
    border-radius: 26px !important;
  }
  #root form:has(#prompt-textarea) #prompt-textarea {
    box-sizing: border-box !important;
    min-height: 52px !important;
    padding: 14px 52px !important;
    font-size: 16px !important;
    line-height: 24px !important;
  }
  #root form:has(#prompt-textarea) > div > div > div:has(#prompt-textarea) > [class*="@container"] {
    position: absolute !important;
    inset: 0 !important;
    align-items: center !important;
    padding-bottom: 0 !important;
    pointer-events: none !important;
  }
  #root form:has(#prompt-textarea) > div > div > div:has(#prompt-textarea) > [class*="@container"] > * {
    pointer-events: auto !important;
  }

  /* Logged-in chat footer stays hidden on mobile.  On the authentication
     screen omit only the wordmark/version and keep the descriptor, dividers,
     and policy/support links in one compact row. */
  #root [role="contentinfo"].absolute {
    display: none !important;
  }
  #root [role="contentinfo"]:not(.absolute) > .legalcontext-footer-wordmark {
    display: none !important;
  }
  #root [role="contentinfo"]:not(.absolute) > .legalcontext-footer-descriptor {
    display: inline-flex !important;
    align-items: center !important;
    align-self: center !important;
    font-size: 0 !important;
    line-height: 16px !important;
    white-space: nowrap !important;
  }
  #root [role="contentinfo"]:not(.absolute) > .legalcontext-footer-descriptor::after {
    content: "AI 법리 추론엔진";
    display: inline-block;
    font-size: 11.5px;
    line-height: 16px;
  }
  #root [role="contentinfo"]:not(.absolute) {
    flex-wrap: nowrap !important;
    justify-content: center !important;
    gap: 5px !important;
    max-width: 100vw !important;
    margin-inline: 0 !important;
    padding-inline: 8px !important;
  }
  #root [role="contentinfo"]:not(.absolute) > a {
    flex: 0 0 auto !important;
    font-size: 11.5px !important;
    line-height: 16px !important;
    white-space: nowrap !important;
  }
}