/*
 * The conversation in Ring: your messages in a bubble and the answer as the page itself, the names a message gives with
 * @, how a new turn comes in, the line with model and cost under an answer, the model picker's search field and the
 * "Nadenken" button in the message bar. Loaded after fc-theme.css, whose colours it uses (client/index.html).
 */

/* Ring's answers are not editable: an edited answer (or its thoughts, which hold Ring's own status lines) would rewrite what
 * the model reads back as its own words. Your own messages keep their edit button. */
[aria-label^="Message"]:has(.agent-turn) button[id^="edit-"] {
  display: none;
}

/* The price line under an answer (Relay's footer, an italic last paragraph): small and muted. */
.markdown > p:last-child > em:only-child,
.prose > p:last-child > em:only-child {
  display: inline-block;
  margin-top: 0.25rem;
  font-size: 0.8rem;
  font-style: normal;
  color: var(--text-secondary-alt);
}
/* Hidden unless "Toon model en kosten onder antwoorden" is on in the chat settings (fc-details.js marks the line). */
html:not(.fc-show-details) .fc-price {
  display: none;
}
/* The paragraph above the hidden line then ends the answer: drop its bottom margin too, or the answer keeps the space. */
html:not(.fc-show-details) .markdown > :has(+ .fc-price:last-child),
html:not(.fc-show-details) .prose > :has(+ .fc-price:last-child) {
  margin-bottom: 0;
}

/* Only the user's messages sit in a bubble, on the right in ink. The model's answer is the page itself: no box, the full
 * column, so headings, tables and code blocks read as a document and nothing grows around the text while it streams.
 * A turn is .message-render > [avatar column] + .user-turn | .agent-turn > h2 + (content column > .text-message parts + actions row). */
.message-render:has(> .user-turn) {
  flex-direction: row-reverse;
}
.message-render > .user-turn > h2 {
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
}
/* The time keeps LibreChat's own show-on-hover, but sits left of the name and always takes its space: nothing shifts. */
.message-render > .user-turn > h2 > time {
  order: -1;
  margin-left: 0;
  margin-right: 0.5rem;
}
.message-render > .user-turn div.mt-1.justify-start {
  justify-content: flex-end;
}
.message-render > .user-turn .text-message {
  width: fit-content;
  align-self: flex-end;
  max-width: 85%;
  padding: 0.75rem 1rem;
  border-radius: 20px;
  border-top-right-radius: 6px;
  background: #0b0b0b;
  color: #efebe1;
}
.dark .message-render > .user-turn .text-message {
  background: #efebe1;
  color: #0b0b0b;
}
/* While editing a message the bubble holds a textarea: full width again, and the composer's look instead of the bubble's
 * (LibreChat's edit box sets the page's text colour, which on the ink bubble left the text invisible). Only "Save & Submit":
 * an edited message is meant to be sent again, a plain "Save" would rewrite the history without an answer to it. */
.message-render > .user-turn .text-message:has(textarea),
.dark .message-render > .user-turn .text-message:has(textarea) {
  width: 100%;
  max-width: 100%;
  background: var(--surface-chat);
  color: var(--text-primary);
}
.message-render > .user-turn .text-message:has(textarea) .btn-secondary {
  display: none;
}
/* The prose inside the user bubble follows the bubble's colour, not the page's. */
.message-render > .user-turn .text-message .markdown,
.message-render > .user-turn .text-message .markdown :is(p, li, strong, em, a, code, h1, h2, h3, h4, h5, h6, blockquote) {
  color: inherit;
}
.message-render > .user-turn .text-message .markdown > :first-child {
  margin-top: 0;
}
.message-render .text-message .markdown > :last-child {
  margin-bottom: 0;
}
/* An app or vaardigheid the message names with @ (RingMentionText, remarkRingMention): the same text, a shade lighter
 * behind it, no colour. The dark-mode bubble is cream, so there the shade is darker. */
.fc-mention {
  font-weight: 600;
  background: rgba(255, 255, 255, 0.14);
  border-radius: 6px;
  padding: 1px 5px;
  margin-right: 2px;
}
.dark .fc-mention {
  background: rgba(0, 0, 0, 0.08);
}

/* Motion: a new turn eases in (opacity plus a 6px rise, 220ms ease-out) via @starting-style; the scroll glide lives in
 * fc-scroll.js. LibreChat's own transition-all on the turn is narrowed to these two properties. Reduced motion keeps the fade. */
:root {
  --fc-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}
div.message-render {
  opacity: 1;
  translate: none;
  transition: opacity 220ms var(--fc-ease-out), translate 220ms var(--fc-ease-out);
}
@starting-style {
  div.message-render {
    opacity: 0;
    translate: 0 6px;
  }
}
@media (prefers-reduced-motion: reduce) {
  div.message-render {
    transition: opacity 220ms var(--fc-ease-out);
  }
  @starting-style {
    div.message-render {
      translate: none;
    }
  }
}

/* Help hover cards (the fork menu) are a fixed 20rem wide. The client's source lets them flip to the side with room; on a narrow
 * screen neither side has 20rem, so they never grow past the room Ariakit measured beside the anchor. */
.z-\[999\].w-80 {
  max-width: var(--popover-available-width, 20rem);
}

/* The model picker's search field sits flush in its menu, so the menu's edge clipped the focus ring around it. Round
 * the field like the menu and draw the focus line inside it. */
#model-search {
  border-radius: 12px !important;
}
#model-search:focus,
#model-search:focus-visible {
  box-shadow: inset 0 0 0 1px var(--border-heavy) !important;
  outline: none !important;
}

/* "Nadenken" (fc-reasoning.js): a pill next to the tools button, with its menu opening upwards like LibreChat's own. */
.fc-reasoning {
  position: relative;
  display: flex;
  align-items: center;
}
.fc-reasoning-button {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 14px;
  border-radius: 9999px;
  border: 1px solid var(--border-light);
  color: var(--text-secondary);
  font-size: 0.8125rem;
  white-space: nowrap;
  transition: background-color 150ms, color 150ms;
}
.fc-reasoning-button:hover,
.fc-reasoning-button[aria-expanded="true"] {
  background: var(--surface-hover);
  color: var(--text-primary);
}
.fc-reasoning-button:not([data-level="auto"]) {
  color: var(--text-primary);
}
.fc-reasoning-button:focus-visible {
  outline: 2px solid var(--border-heavy);
  outline-offset: 2px;
}
.fc-reasoning-menu {
  position: fixed;
  z-index: 1000;
  min-width: 260px;
  padding: 6px;
  border-radius: 16px;
  border: 1px solid var(--border-light);
  background: var(--surface-primary);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}
.fc-reasoning-option {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  padding: 8px 12px;
  border-radius: 10px;
  text-align: left;
}
.fc-reasoning-option:hover,
.fc-reasoning-option:focus-visible {
  background: var(--surface-hover);
  outline: none;
}
.fc-reasoning-option[aria-checked="true"] .fc-reasoning-name::after {
  content: " ✓";
}
.fc-reasoning-name {
  font-size: 0.875rem;
  color: var(--text-primary);
}
.fc-reasoning-hint {
  font-size: 0.75rem;
  color: var(--text-secondary);
}