@charset "UTF-8";
/*
 * MONA MCP — the assistant chat component.
 *
 * SELF-CONTAINED ON PURPOSE. This box is mounted in three places already: its own admin
 * screen, a floating panel over wp-admin, and the same panel over the customer's own theme
 * on the front end. The third is why nothing here may inherit from admin.css or from
 * wp-admin at all — on the front end neither exists, and a component that borrows a button
 * style from its surroundings looks different in every surrounding.
 *
 * So every element the component draws is styled here, from its own tokens, and every rule
 * is scoped under .mona-chat. The one thing it deliberately does NOT set is the page: a
 * host places .mona-chat, this file fills it.
 *
 * Tokens are redeclared rather than referenced (rules/brand-ui.md palette) so the file can
 * be enqueued alone. CTA orange always takes WHITE text — measured 2,35:1 and kept anyway,
 * because it is the brand pair; darken the orange if a placement needs AA, never blacken
 * the text.
 */

.mona-chat {
  --mc-bg: #fff;
  --mc-paper: #f5f6fa;
  --mc-ink: #1b1f2a;
  --mc-mute: #5b6172;
  --mc-faint: #8a90a2;
  --mc-line: #e6e8ef;
  --mc-cta: #f79009;
  --mc-cta-ink: #fff;
  --mc-ok: #1a7f43;
  --mc-warn: #b56a00;
  --mc-bad: #b42318;
  --mc-r: 12px;
  --mc-r-sm: 8px;
  --mc-gap: 12px;

  display: flex;
  flex-direction: column;
  min-width: 0;
  color: var(--mc-ink);
  font-size: 14px;
  line-height: 1.55;
  font-family: inherit;
  -webkit-font-smoothing: antialiased;
}
.mona-chat *, .mona-chat *::before, .mona-chat *::after { box-sizing: border-box; }

/* ── header bar ─────────────────────────────────────────────────────────── */
/* Identity on the left, actions on the right, and the note on its own line under the identity
   — never wedged between the two, which is what made this bar wrap into a ragged block with a
   button stranded mid-sentence. */
.mona-chat__bar {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  flex-wrap: wrap;
  padding: 10px 14px; margin-bottom: var(--mc-gap);
  background: var(--mc-paper); border: 1px solid var(--mc-line); border-radius: var(--mc-r);
}
.mona-chat__who {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px;
  flex: 1 1 320px; min-width: 0;
}
.mona-chat__acts-bar {
  display: flex; align-items: center; gap: 8px; flex: 0 0 auto; flex-wrap: wrap;
}
.mona-chat__bar-t { font-weight: 600; }
/* The picker sits with the buttons and matches their height, so the row reads as one group.
   It draws its OWN chevron: the `background` shorthand replaces whatever wp-admin put there,
   and this component is also mounted on the customer's front end where wp-admin's stylesheet
   does not exist — so borrowing core's arrow would give an arrow on one surface and none on
   the other. Inline SVG, no file, no request. */
select.mona-chat__sel {
  max-width: 220px; height: auto; min-height: 32px; line-height: 1.45;
  padding: 4px 30px 4px 10px; border: 1px solid var(--mc-line); border-radius: var(--mc-r-sm);
  color: var(--mc-ink); font: inherit; font-size: 13px;
  box-sizing: border-box; appearance: none; -webkit-appearance: none;
  background-color: var(--mc-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%236b7280' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}
select.mona-chat__sel[hidden] { display: none; }   /* [hidden] is a UA rule and loses to ours */
.mona-chat__lv {
  padding: 2px 11px; border-radius: 999px;
  background: var(--mc-cta); color: var(--mc-cta-ink); font-weight: 700; font-size: 12.5px;
}
.mona-chat__note { color: var(--mc-mute); font-size: 12.5px; flex: 1 1 100%; margin: 0; }

/* ── layout ─────────────────────────────────────────────────────────────── */
/* `flex: 1` so the grid takes the height the bar leaves behind, and `min-height: 0` so it may
   be SHORTER than its content — without that a flex item refuses to shrink below its content
   and the thread's overflow never engages.
   `grid-template-rows` has to be declared too, and for the same reason one level down: an
   implicit row is auto-sized to its tallest item, so the grid was 327px tall while the thread
   inside it measured 584px and the composer sat 340px below the box. Both are needed; either
   alone leaves an overflow. */
.mona-chat__grid {
  display: grid; grid-template-columns: 240px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr);
  gap: var(--mc-gap); flex: 1; min-height: 0;
}
.mona-chat__side { display: flex; flex-direction: column; gap: 7px; min-width: 0; min-height: 0; }

/* The suggestions scroll; the audit tail below them does not move.
   The column sits in a box whose height is pinned to the window, and a chip cannot shrink — so
   without a scroller here the chips overflow the card, visibly, taking the audit tail's heading
   out with them. `min-height: 0` is what lets a flex child actually be smaller than its content;
   without it the browser keeps the item at min-content and the overflow simply moves outward. */
.mona-chat__asks {
  display: flex; flex-direction: column; gap: 7px;
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
}
.mona-chat__side-t {
  font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--mc-mute); font-weight: 700;
}
/* A suggestion has to look like something you press.
   It was a grey rectangle of text: the same weight as the label above it, nothing marking it
   as an offer rather than a caption. Three cheap signals instead — a chevron that leads the
   eye to the right, a warm hover that lifts, and a left edge that colours in on hover so the
   whole row reads as one target. No icon font: the chevron is a pseudo-element. */
.mona-chat__chip {
  position: relative; text-align: left;
  padding: 9px 26px 9px 12px;
  border: 1px solid var(--mc-line); border-radius: var(--mc-r-sm);
  background: var(--mc-bg); color: var(--mc-ink); cursor: pointer;
  font: inherit; font-size: 13px; line-height: 1.4;
  transition: border-color .15s, background .15s, transform .15s, box-shadow .15s;
}
.mona-chat__chip::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  border-radius: var(--mc-r-sm) 0 0 var(--mc-r-sm);
  background: var(--mc-cta); opacity: 0; transition: opacity .15s;
}
.mona-chat__chip::after {
  content: "›"; position: absolute; right: 10px; top: 50%; transform: translateY(-52%);
  color: var(--mc-faint); font-size: 17px; line-height: 1; transition: color .15s, transform .15s;
}
.mona-chat__chip:hover {
  border-color: var(--mc-cta); background: #fff9f0;
  transform: translateY(-1px); box-shadow: 0 3px 10px rgba(247, 144, 9, .14);
}
.mona-chat__chip:hover::before { opacity: 1; }
.mona-chat__chip:hover::after  { color: var(--mc-cta); transform: translateY(-52%) translateX(2px); }
.mona-chat__chip:active { transform: translateY(0); box-shadow: none; }
.mona-chat__chip:focus-visible { outline: 2px solid var(--mc-cta); outline-offset: 1px; }
/* Somebody who has asked not to see motion still gets the colour, just not the movement. */
@media (prefers-reduced-motion: reduce) {
  .mona-chat__chip, .mona-chat__chip:hover { transition: none; transform: none; }
}

.mona-chat__main { display: flex; flex-direction: column; min-width: 0; min-height: 0; position: relative; }

/* ── thread ─────────────────────────────────────────────────────────────── */
.mona-chat__thread {
  /* The thread scrolls, and the composer stays put. Not negotiable for a chat box: a thread
     that grows pushes the input off the bottom of the window, so answering the tenth message
     means scrolling down to find the box you typed the first one in.
     The obvious alternative — let it grow and give the PAGE the only scrollbar — was tried and
     is worse, because Chrome LATCHES a wheel gesture to whatever is under the pointer. Parked
     at the end of an inner scroller, five real wheel ticks move the page 0px, whatever
     `overscroll-behavior` says. So a bounded thread inside a page that also scrolls really is
     a box the mouse gets stuck in.
     The answer to that is not to remove the scroller; it is to remove the page scroll. Where
     this component owns the screen it carries `data-mona-fit`, and chat.js sizes it to the
     viewport (see --mc-fit below), so there is nothing underneath to reach past it. */
  flex: 1; min-height: 0;
  overflow-y: auto;
  padding: 14px; background: var(--mc-bg);
  border: 1px solid var(--mc-line); border-radius: var(--mc-r);
  display: flex; flex-direction: column; gap: 12px; scroll-behavior: smooth;
}

/* Sized by chat.js from the element's own position, because only the runtime knows how much
   wp-admin chrome sits above it. Until that runs — and if JS never runs at all — the fallback
   is a sensible fixed height rather than an unbounded one, so the composer is reachable either
   way.
   NO min-height here. It was tried, at 460px, and on a 666px-tall window it beat the measured
   377px, hung the box 59px below the fold and handed the page 394px of scroll — which is the
   exact trap this whole arrangement exists to remove. The floor belongs inside the measurement,
   where it can lose to the viewport; chat.js owns it. */
.mona-chat[data-mona-fit] { height: var(--mc-fit, 70vh); }

/* No floor on a fitted thread: its job there is to absorb whatever the window leaves over, and
   the floor that protects it on a cramped window is applied to the BOX by chat.js, which can
   measure how much of the box the other parts need. A CSS floor here instead made the composer
   overflow the fixed box and draw on top of the audit tail. */
.mona-chat:not([data-mona-fit]) .mona-chat__thread { min-height: 260px; }
@media (prefers-reduced-motion: reduce) { .mona-chat__thread { scroll-behavior: auto; } }

.mona-chat__empty {
  margin: auto; padding: 24px 12px; text-align: center; color: var(--mc-faint); max-width: 34em;
}
.mona-chat__empty b { display: block; color: var(--mc-mute); margin-bottom: 4px; }

/* jump back down — only shown once the reader has scrolled away from the newest message */
.mona-chat__jump {
  position: absolute; right: 14px; bottom: 76px; z-index: 2;
  width: 34px; height: 34px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--mc-line); background: var(--mc-bg); color: var(--mc-mute);
  box-shadow: 0 2px 8px rgba(20, 24, 40, .12);
  display: grid; place-items: center; font-size: 16px; line-height: 1;
}
.mona-chat__jump[hidden] { display: none; }

/* ── bubbles ────────────────────────────────────────────────────────────── */
/* The cap is a READING measure, not a limit on the box.
   62ch was chosen for prose and it was too tight for what this assistant actually answers with:
   measured on the wide screen, a 970px thread whose widest bubble was 488px — half the room
   empty, which reads as "the chat box is narrow" even though the box is not. 78ch keeps a line
   comfortable while closing most of that gutter; the proposal card, which is a table rather
   than prose, is allowed much more. */
.mona-chat__bub {
  max-width: min(92%, 78ch); padding: 11px 15px; border-radius: var(--mc-r);
  word-wrap: break-word; overflow-wrap: anywhere;
  animation: mona-chat-in .18s ease-out;
}
@keyframes mona-chat-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .mona-chat__bub { animation: none; } }

.mona-chat__bub--me {
  align-self: flex-end; background: var(--mc-ink); color: #fff; border-bottom-right-radius: 4px;
  white-space: pre-wrap;
}
.mona-chat__bub--bot {
  align-self: flex-start; background: var(--mc-paper);
  border: 1px solid var(--mc-line); border-bottom-left-radius: 4px;
}
.mona-chat__bub--gate { align-self: flex-start; max-width: 96%; background: var(--mc-bg); border: 1px solid var(--mc-line); }
.mona-chat__bub--err  { align-self: flex-start; background: #fdecec; border: 1px solid #f5c2c0; color: var(--mc-bad); }

/* Vertical rhythm inside a bubble.
   One rule sets the spacing for every block the markdown renderer can emit, instead of a
   margin per element type — that is how a table ended up flush against the heading above it
   and the sentence below it, with nothing visually separating three different things. */
.mona-chat__bub > * { margin: 0 0 .8em; }
.mona-chat__bub > :last-child { margin-bottom: 0; }
/* The markers have to be DECLARED, not left to the browser.
   wp-admin ships `ul { list-style: none }` and it applies to anything inside the admin page,
   so a list rendered here came out as indented lines with no bullet at all — measured,
   listStyleType was "none" while the ol next to it survived as "decimal" because core only
   resets ul. This is the specificity trap in rules/brand-ui.md wearing a different hat: the
   component claims to inherit nothing, so it must SET what it needs rather than assume a
   default survives. Doubled class prefix to win outright instead of relying on load order. */
.mona-chat .mona-chat__bub ul { list-style: disc outside; }
.mona-chat .mona-chat__bub ol { list-style: decimal outside; }
.mona-chat .mona-chat__bub ul ul { list-style: circle outside; }
.mona-chat .mona-chat__bub ol ol { list-style: lower-alpha outside; }
.mona-chat__bub ul, .mona-chat__bub ol { padding-left: 1.5em; }
.mona-chat__bub li { margin: .3em 0; display: list-item; }
.mona-chat__bub li::marker { color: var(--mc-cta); }
.mona-chat__bub ol li::marker { color: var(--mc-faint); font-weight: 600; }
/* A bold lead-in inside a list item is a label for the rest of the line, not a heading —
   the heading rule must not reach in here and add a paragraph's worth of space. */
.mona-chat__bub li > strong:first-child { color: var(--mc-ink); }

/* A line that is entirely bold is a heading for what follows it — the agent writes them that
   way constantly. It needs room ABOVE it, which a uniform bottom margin cannot give. */
.mona-chat__bub h3, .mona-chat__bub .mona-chat__h {
  margin: 1.25em 0 .5em; font-size: 1em; font-weight: 700; line-height: 1.4;
}
.mona-chat__bub > h3:first-child, .mona-chat__bub > .mona-chat__h:first-child { margin-top: 0; }
/* …unless it opens the bubble right after the status tag. */
.mona-chat__tag + h3, .mona-chat__tag + .mona-chat__h { margin-top: 0; }
.mona-chat__bub code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em;
  background: rgba(27, 31, 42, .07); padding: .1em .35em; border-radius: 4px;
}
.mona-chat__bub pre {
  padding: 11px 13px; border-radius: var(--mc-r-sm);
  background: var(--mc-ink); color: #f2f4f8; overflow-x: auto;
}
.mona-chat__bub pre code { background: none; padding: 0; color: inherit; }

/* thinking / tool activity */
/* One row, always. It now carries the agent's own narration between tool calls, which can be
   a whole sentence — and a line that grows to two rows moves everything above it on every
   poll, which reads as the thread twitching. `max-width` keeps the truncation visible rather
   than letting a long line push the dots off the edge. */
.mona-chat__think {
  align-self: flex-start; display: flex; align-items: center; gap: 8px;
  color: var(--mc-faint); font-size: 13px; font-style: italic;
  max-width: 100%;
}
.mona-chat__think > span:first-child {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mona-chat__dots { display: inline-flex; gap: 3px; }
.mona-chat__dots i {
  width: 5px; height: 5px; border-radius: 999px; background: currentColor;
  animation: mona-chat-blink 1.2s infinite ease-in-out;
}
.mona-chat__dots i:nth-child(2) { animation-delay: .18s; }
.mona-chat__dots i:nth-child(3) { animation-delay: .36s; }
@keyframes mona-chat-blink { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .mona-chat__dots i { animation: none; opacity: .6; } }

/* ── proposal card ──────────────────────────────────────────────────────── */
.mona-chat__tag {
  display: inline-block; margin-bottom: 7px; padding: 2px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .01em;
}
.mona-chat__tag--dry { background: #fff3e0; color: var(--mc-warn); }
.mona-chat__tag--ok  { background: #e6f6ec; color: var(--mc-ok); }
.mona-chat__tag--no  { background: #fdecec; color: var(--mc-bad); }

.mona-chat__diffwrap {
  overflow-x: auto; margin: .9em 0;
  border: 1px solid var(--mc-line); border-radius: var(--mc-r-sm);
}
.mona-chat__bub > .mona-chat__diffwrap:first-child { margin-top: 0; }
.mona-chat__diff { width: 100%; border-collapse: collapse; font-size: 13px; }
.mona-chat__diff th, .mona-chat__diff td {
  padding: 9px 12px; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--mc-line);
}
/* The wrapper draws the outer border, so cells only draw the lines BETWEEN them — otherwise
   every edge is doubled and the table reads heavier than the text it explains. */
.mona-chat__diff th + th, .mona-chat__diff td + td { border-left: 1px solid var(--mc-line); }
.mona-chat__diff tr:last-child td { border-bottom: 0; }
.mona-chat__diff th { background: var(--mc-paper); font-weight: 700; color: var(--mc-mute); white-space: nowrap; }
.mona-chat__diff tbody tr:nth-child(even) { background: rgba(245, 246, 250, .55); }
.mona-chat__old { color: var(--mc-bad); text-decoration: line-through; }
.mona-chat__new { color: var(--mc-ok); font-weight: 600; }
.mona-chat__more { margin: 6px 0 0; font-size: 12.5px; color: var(--mc-faint); }

.mona-chat__acts { display: flex; gap: 8px; margin-top: 11px; flex-wrap: wrap; align-items: center; }
.mona-chat__done { margin: 10px 0 0; font-size: 13px; color: var(--mc-mute); }
.mona-chat__done code { font-size: .95em; }

/* ── buttons ────────────────────────────────────────────────────────────── */
.mona-chat__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 8px 15px; border-radius: var(--mc-r-sm); cursor: pointer;
  border: 1px solid var(--mc-line); background: var(--mc-bg); color: var(--mc-ink);
  font: inherit; font-size: 13.5px; font-weight: 600; line-height: 1.2; text-decoration: none;
  transition: background .15s, border-color .15s, opacity .15s;
}
.mona-chat__btn:hover { border-color: var(--mc-faint); }
.mona-chat__btn:focus-visible { outline: 2px solid var(--mc-cta); outline-offset: 1px; }
.mona-chat__btn--primary { background: var(--mc-cta); border-color: var(--mc-cta); color: var(--mc-cta-ink); }
.mona-chat__btn--primary:hover { background: #e07f06; border-color: #e07f06; }
.mona-chat__btn[disabled] { opacity: .55; cursor: default; pointer-events: none; }
.mona-chat__btn.is-loading { pointer-events: none; opacity: .75; }
.mona-chat__btn.is-loading::before {
  content: ""; width: 13px; height: 13px; border-radius: 999px; flex: 0 0 auto;
  border: 2px solid currentColor; border-top-color: transparent;
  animation: mona-chat-spin .7s linear infinite;
}
@keyframes mona-chat-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .mona-chat__btn.is-loading::before { animation-duration: 2.4s; } }

/* ── composer ───────────────────────────────────────────────────────────── */
/* Named areas, so the send button aligns with the TEXTAREA's bottom edge and the hint sits
   on its own row underneath both. With a plain flex row the hint pushed the button down; with
   display:contents the button escaped the column and became a full-width row of its own. */
.mona-chat__form {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "input send" "hint hint";
  gap: 4px 8px; margin-top: 10px;
}
.mona-chat__field { grid-area: input; min-width: 0; }
.mona-chat__hint  { grid-area: hint; }
.mona-chat__form [data-mona-send] { grid-area: send; align-self: end; height: 44px; }
textarea.mona-chat__input {
  /* `display: block` is load-bearing, not tidiness. A textarea is inline-level, so its parent
     reserves room under the baseline for descenders — measured 6px — which makes the grid row
     50px tall while the field itself is 44. The send button is aligned to the END of that row,
     so it sat 6px below the input it belongs next to. Both are 44 and level now. */
  display: block;
  width: 100%; resize: none; overflow-y: auto;
  min-height: 44px; max-height: 180px; padding: 11px 13px;
  border: 1px solid var(--mc-line); border-radius: var(--mc-r-sm);
  background: var(--mc-bg); color: var(--mc-ink);
  font: inherit; font-size: 14px; line-height: 1.45;
  box-shadow: none;
}
textarea.mona-chat__input:focus {
  border-color: var(--mc-cta); outline: none; box-shadow: 0 0 0 3px rgba(247, 144, 9, .18);
}
textarea.mona-chat__input[disabled] { background: var(--mc-paper); color: var(--mc-faint); }
.mona-chat__hint { font-size: 11.5px; color: var(--mc-faint); min-height: 1em; }
.mona-chat__form .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mona-chat__hint.is-bad { color: var(--mc-bad); }

/* ── audit tail ─────────────────────────────────────────────────────────── */
.mona-chat__logbox {
  margin-top: var(--mc-gap); padding: 11px 14px;
  background: var(--mc-paper); border: 1px solid var(--mc-line); border-radius: var(--mc-r);
}
.mona-chat__logbox-t {
  display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--mc-faint); font-weight: 700; margin-bottom: 7px;
}
/* Capped, because the server sends ten rows and the empty state is one: inside a box whose
   height is fixed to the window, that difference is ~90px taken straight off the thread on the
   first turn. Five rows are what the tail is for — a glance at what just happened — and the
   rest scroll. chat.js re-fits after painting, so the box still adjusts to the one step this
   leaves. */
.mona-chat__log { margin: 0; padding: 0; list-style: none; font-size: 12.5px; max-height: 108px; overflow-y: auto; }
.mona-chat__log li { display: flex; gap: 10px; padding: 3px 0; border-bottom: 1px dashed var(--mc-line); }
.mona-chat__log li:last-child { border-bottom: 0; }
.mona-chat__log-empty { color: var(--mc-faint); }
.mona-chat__log-time { color: var(--mc-faint); font-variant-numeric: tabular-nums; }
/* No monospace: this column held a machine name once and now holds the tool's Vietnamese
   title, which a monospace face sets badly — the diacritics sit in cells built for ASCII. */
.mona-chat__log-tool { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.mona-chat__log-res { font-weight: 600; }
.is-ok    > .mona-chat__log-res { color: var(--mc-ok); }
.is-dry   > .mona-chat__log-res { color: var(--mc-warn); }
.is-err   > .mona-chat__log-res,
.is-denied > .mona-chat__log-res { color: var(--mc-bad); }

/* ── narrow: the sidebar becomes a scrolling row above the thread ───────── */
@media (max-width: 860px) {
  .mona-chat__grid { grid-template-columns: 1fr; }
  .mona-chat__side { flex-direction: column; gap: 6px; }
  /* Stacked, the chips become a horizontal rail instead of a column, and the vertical
     scroller above would fight it — the box is no longer height-pinned here. */
  .mona-chat__asks { flex-direction: row; overflow-x: auto; overflow-y: visible;
                     flex: 0 0 auto; padding-bottom: 4px; gap: 6px; }
  .mona-chat__side-t { display: none; }
  .mona-chat__chip { flex: 0 0 auto; max-width: 70vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mona-chat__bub { max-width: 96%; }
}

/* ══ the floating panel ═════════════════════════════════════════════════════
   The same component, mounted over whatever page the admin happens to be on —
   wp-admin or the customer's own theme. Everything below only positions it. */
.mona-chat-pop {
  position: fixed; z-index: 100050; right: 18px; bottom: 18px;
  width: min(460px, calc(100vw - 36px)); max-height: min(680px, calc(100vh - 96px));
  display: flex; flex-direction: column;
  background: var(--mc-bg, #fff); border: 1px solid #e6e8ef; border-radius: 16px;
  box-shadow: 0 18px 48px rgba(20, 24, 40, .22);
  overflow: hidden;
}
.mona-chat-pop[hidden] { display: none; }
.mona-chat-pop__head {
  display: flex; align-items: center; gap: 9px; padding: 11px 13px;
  border-bottom: 1px solid #e6e8ef; background: #f5f6fa; flex: 0 0 auto;
}
.mona-chat-pop__head img { width: 26px; height: 26px; border-radius: 999px; }
.mona-chat-pop__t { font-weight: 700; font-size: 14px; color: #1b1f2a; flex: 1; }
.mona-chat-pop__x {
  border: 0; background: none; cursor: pointer; font-size: 20px; line-height: 1;
  color: #5b6172; padding: 2px 6px; border-radius: 6px;
}
.mona-chat-pop__x:hover { background: #e6e8ef; }
.mona-chat-pop__body { padding: 12px; overflow-y: auto; min-height: 0; }
/* In the panel the box is only the thread and composer — the sidebar and the log
   would not fit, and the screen is one click away for both. */
.mona-chat-pop .mona-chat__grid { grid-template-columns: 1fr; }
/* ── the box on a scrolling page (the landing demo) ──
   Without a bound the thread grows with its content, so one long answer stretches the page and
   the reader has to scroll past a wall of text to reach anything else. The admin screen solves
   this with data-mona-fit, which sizes the box to the WINDOW — wrong here, where the box is one
   block among many. A max-height on the thread is the right shape for that case: the box keeps
   its place in the page and the conversation scrolls inside it, exactly as it does in wp-admin.
   svh, not vh: on mobile the address bar shrinks the viewport and vh does not notice. */
.mona-chat--demo .mona-chat__thread { max-height: min(56svh, 460px); }

.mona-chat-pop .mona-chat__side,
.mona-chat-pop .mona-chat__logbox,
.mona-chat-pop .mona-chat__bar { display: none; }
.mona-chat-pop .mona-chat__thread {
  min-height: 260px; max-height: 46vh;
  overflow-y: auto; overscroll-behavior: contain;   /* an overlay must not scroll the page behind it */
}

.mona-chat-fab {
  position: fixed; z-index: 100049; right: 18px; bottom: 18px;
  width: 52px; height: 52px; border-radius: 999px; cursor: pointer; border: 0;
  background: #f79009; color: #fff; box-shadow: 0 8px 22px rgba(247, 144, 9, .38);
  display: grid; place-items: center; padding: 0;
}
.mona-chat-fab[hidden] { display: none; }
.mona-chat-fab img { width: 30px; height: 30px; border-radius: 999px; }
.mona-chat-fab:focus-visible { outline: 3px solid rgba(247, 144, 9, .45); outline-offset: 2px; }

@media (max-width: 600px) {
  .mona-chat-pop { right: 8px; left: 8px; bottom: 8px; width: auto; max-height: calc(100vh - 80px); }
  .mona-chat-fab { right: 12px; bottom: 12px; }
}

/* Confirmation popover — anchored to the button that raised it, in the plugin's own styling.
   The browser's dialog is banned here (rules/admin-ux.md): it speaks the browser's language on
   an all-Vietnamese product, cannot name what it is about, and blocks the tab. */
.mona-chat-confirm {
  position: absolute; z-index: 100060; max-width: 320px; padding: 12px 14px;
  background: #fff; border: 1px solid #e6e8ef; border-radius: 12px;
  box-shadow: 0 10px 30px rgba(20, 24, 40, .18);
  font-size: 13.5px; line-height: 1.5; color: #1b1f2a;
}
.mona-chat-confirm p { margin: 0 0 10px; }
.mona-chat-confirm__acts { display: flex; gap: 8px; }

/* ── the audit tail inside the sidebar ──
   It sits at the bottom of that column, and it takes only what it needs.

   It used to take everything the chips left (`flex: 1`), so on a tall screen an empty log —
   one line of text — was drawn as a panel several hundred pixels high, and the chips above it
   read as a small thing floating in a large empty box. Content-sized with a cap instead: five
   rows are what a tail is for, and `margin-top: auto` still pins it to the bottom. The rows
   are the same 12.5px/1 line each as in the band, so the cap is the same ~5 rows. */
.mona-chat__side .mona-chat__logbox {
  margin-top: auto; min-height: 0; display: flex; flex-direction: column;
  padding: 9px 12px;
}
.mona-chat__side .mona-chat__log { max-height: 132px; flex: 0 1 auto; min-height: 0; }
.mona-chat__side .mona-chat__log li { flex-wrap: wrap; gap: 2px 8px; }
/* The middle column is the tool name and it is the one that may be cut; in a 240px column the
   time and the result must stay whole or the row says nothing. */
.mona-chat__side .mona-chat__log-tool { flex: 1 1 100%; order: 3; }

/* Slimmer where the box is fitted to the window: the bar is one line of standing text, and in
   a fixed-height box its padding comes straight out of the thread. It keeps its full size in
   the popup, where the box grows and nothing is competing for the room. */
.mona-chat[data-mona-fit] .mona-chat__bar { padding: 7px 12px; margin-bottom: 9px; }
.mona-chat[data-mona-fit] .mona-chat__note { font-size: 12px; }

/* ── the command menu, and the scheduling sheet ──────────────────────────────
 *
 * This file inherits nothing — not from admin.css, not from wp-admin — because the component
 * is drawn on the front end too, where neither exists. Everything below is expressed in the
 * --mc-* tokens declared at the top of this file.
 */
.mona-chat-cmd{position:absolute;z-index:100000;background:var(--mc-bg,#fff);border:1px solid var(--mc-line,#e6e8f0);
  border-radius:12px;box-shadow:0 12px 32px rgba(20,22,40,.16);overflow:hidden;max-height:280px;overflow-y:auto}
/* [hidden] is a user-agent rule and loses to any display of ours — brand-ui records this
 * failing twice. The pair ships together or the menu never disappears. */
.mona-chat-cmd[hidden]{display:none}
.mona-chat-cmd__list{margin:0;padding:6px;list-style:none}
/* A FIXED first column, not `auto`.
   Each row is its own grid, so `auto` sizes column one to the width of THAT row's command —
   /schedule and /remind differ by a few pixels and drag the description out of line with it.
   A shared width is the only thing that makes a list of rows read as a column. Anything longer
   than the column is truncated rather than allowed to break the alignment. */
.mona-chat-cmd__i{display:grid;grid-template-columns:104px 1fr;gap:2px 10px;align-items:baseline;
  padding:9px 12px;border-radius:8px;cursor:pointer}
.mona-chat-cmd__i.is-on{background:var(--mc-soft,#f4f5fb)}
.mona-chat-cmd__k{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;
  color:var(--mc-brand,#963fda);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mona-chat-cmd__t{font-weight:600;font-size:13.5px;color:var(--mc-ink,#1b1f2a)}
.mona-chat-cmd__d{grid-column:2;font-size:12.5px;color:var(--mc-mute,#6b7280)}
.mona-chat-cmd__none{margin:0;padding:12px;font-size:13px;color:var(--mc-mute,#6b7280)}

.mona-chat__sched{margin-top:10px;padding:12px;border-radius:10px;background:var(--mc-soft,#f4f5fb)}
.mona-chat__sched-t{margin:0 0 10px;font-weight:700;font-size:13.5px;color:var(--mc-ink,#1b1f2a)}
.mona-chat__sched-row{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.mona-chat__sched-l{flex:0 0 82px;font-size:13px;color:var(--mc-mute,#6b7280)}
@media (max-width:520px){.mona-chat__sched-row{flex-wrap:wrap}.mona-chat__sched-l{flex-basis:100%}}
/* EVERY TAG NAMED, and this is the second time the same trap has been paid for in this suite.
   wp-admin styles controls as `input[type="datetime-local"], select, …` — 0,1,1 for the typed
   inputs and its own rules for select — so a bare `.mona-chat__sched-in` at 0,1,0 wins for some
   tags and loses for others. The result is a stack of fields where one is a different width, a
   different height and a different corner radius from the two above it, which reads as sloppy
   rather than as a specificity contest. Qualify with every tag the class is used on.
   Geometry belongs in this rule too: core gives select its own height and line-height, so a
   select beside a text box stands taller unless both are declared here. */
input.mona-chat__sched-in,select.mona-chat__sched-in,textarea.mona-chat__sched-in,
.mona-chat__sched-in{flex:1 1 auto;width:100%;min-width:0;padding:7px 10px;
  border:1px solid var(--mc-line,#e6e8f0);border-radius:8px;font-size:13.5px;line-height:1.45;
  height:36px;box-sizing:border-box;background-color:var(--mc-bg,#fff);
  color:var(--mc-ink,#1b1f2a);margin:0;max-width:none}
/* A fixed height, not a minimum: `datetime-local` carries a picker button and takes an
   intrinsic height of its own — measured 43px against 36 for the text box and the select
   beside it, which is exactly the "one field is taller than the others" the stack showed.
   A textarea is the one control that must still grow, so it opts back out. */
textarea.mona-chat__sched-in{height:auto;min-height:72px}
input.mona-chat__sched-in:focus,select.mona-chat__sched-in:focus,textarea.mona-chat__sched-in:focus,
.mona-chat__sched-in:focus{outline:0;border-color:var(--mc-brand,#963fda);
  box-shadow:0 0 0 3px rgba(150,63,218,.14)}

/* And the select draws its own arrow, for the reason admin.css records: `background` is a
   shorthand, so setting a colour wipes the arrow IMAGE core supplies while leaving its
   appearance:none in place. `background-color` above avoids that; this puts ours back. */
select.mona-chat__sched-in{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding-right:32px;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%235b6172' d='M1.4 1.6 6 6.2l4.6-4.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center;background-size:12px 8px}
.mona-chat__sched-in.is-invalid{border-color:#b3154d}
.mona-chat__sched-note{margin:8px 0 0;font-size:12.5px;line-height:1.5;color:var(--mc-mute,#6b7280)}
.mona-chat__sched-err{margin:8px 0 0;font-size:12.5px;font-weight:600;color:#b3154d}
.mona-chat__sched-err[hidden]{display:none}

/* The chosen command, shown beside the box rather than inside it — a <textarea> cannot style
   its own contents, and the person needs to see WHICH action they picked. */
.mona-chat__cmdchip{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;
  margin:0 0 6px;padding:3px 6px 3px 9px;border-radius:999px;background:var(--mc-soft,#f4f5fb);
  border:1px solid var(--mc-line,#e6e8f0);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12px;color:var(--mc-brand,#963fda);line-height:1.6}
.mona-chat__cmdchip-x{border:0;background:transparent;cursor:pointer;font-size:15px;line-height:1;
  padding:0 2px;color:var(--mc-mute,#6b7280);border-radius:999px}
.mona-chat__cmdchip-x:hover{background:var(--mc-line,#e6e8f0);color:var(--mc-ink,#1b1f2a)}

/* The command token, drawn behind a transparent field.
   A <textarea> cannot style its own contents, so the mirror renders the same string with the
   same metrics and paints a tint behind the leading command. EVERY property that affects where
   a glyph lands has to match the textarea exactly, or the tint drifts off the word as soon as
   the text wraps — font, size, line-height, padding, border width and the wrapping mode. */
.mona-chat__field{position:relative}
.mona-chat__mirror{position:absolute;top:0;left:0;right:0;bottom:0;z-index:0;pointer-events:none;
  overflow:hidden;white-space:pre-wrap;overflow-wrap:break-word;color:var(--mc-ink);
  /* Copied from textarea.mona-chat__input, and they have to stay copied. */
  padding:11px 13px;border:1px solid transparent;border-radius:var(--mc-r-sm);
  font:inherit;font-size:14px;line-height:1.45;box-sizing:border-box}
/* The command reads as a link, because that is what it is: a name for an action. No fill —
   a tinted block behind one word in a text field looks like a rendering fault, not a token. */
.mona-chat__mirror-k{color:#3b82d6;text-decoration:underline;text-underline-offset:2px;
  text-decoration-thickness:1px}

/* To COLOUR one word the mirror has to be the layer that shows text, so the field's own glyphs
   go transparent and it keeps only the caret. Two things must then be given back by hand or
   they disappear with the text:
     - the caret, via caret-color
     - the selection, whose rectangle the field paints ON TOP of the mirror. Left opaque it
       would hide the very words being selected, so it is translucent and the text reads
       through it. */
textarea.mona-chat__input.is-mirrored{position:relative;z-index:1;background:transparent;
  color:transparent;caret-color:var(--mc-ink);-webkit-text-fill-color:transparent}
textarea.mona-chat__input.is-mirrored::selection{background:rgba(59,130,214,.28)}
textarea.mona-chat__input.is-mirrored::-moz-selection{background:rgba(59,130,214,.28)}
textarea.mona-chat__input.is-mirrored::placeholder{-webkit-text-fill-color:var(--mc-faint);color:var(--mc-faint)}