/* ═══ B51-15 · REASON / COMMENT MODAL ═══════════════════════════════════════
   "Rejecting something should prompt a comment for the user to specify why it's
    being rejected. Comments should always allow attachments and markdown as
    everything else."
   The shell is the app's own modal grammar (`.modal-overlay` + `.panel-card`) so
   this reads as part of the system, and the BODY is the shared rich composer —
   nothing here restyles it. */
/* B54-17 (Pablo: "the background of this modal should have opacity (including
   the alerts modal) because this looks like a hat on a hat") — the base
   `.modal-overlay` is transparent, so a reason modal opened FROM the alerts
   modal painted card-on-card with nothing between them. It now carries its own
   scrim and sits above every other layer (filter panel 260, sub-modal 270). */
.rsn-ov{ align-items:center;justify-content:center;z-index:280;
  background:color-mix(in srgb, var(--scrim) 60%, transparent);
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px); }
body.rsn-open{ overflow:hidden; }
.rsn-card{ width:min(560px, calc(100vw - 32px));max-height:min(86vh, 680px);
  display:flex;flex-direction:column; }
.rsn-ic{ font-size:20px;color:var(--fg-3);flex:0 0 auto; }
.rsn-card .panel-hd-l{ display:flex;align-items:center;gap:10px;min-width:0; }
.rsn-ttl{ display:flex;flex-direction:column;gap:1px;min-width:0; }
.rsn-sub{ font:500 11.5px/1.45 var(--mk-font-ui);color:var(--fg-3);text-wrap:pretty; }
.rsn-body{ display:flex;flex-direction:column;gap:8px;overflow:auto;flex:1 1 auto;min-height:0; }
.rsn-lbl{ display:flex;align-items:baseline;gap:8px;
  font:700 10.5px var(--mk-font-ui);letter-spacing:.05em;text-transform:uppercase;color:var(--fg-3); }
.rsn-req{ font:600 10px var(--mk-font-ui);letter-spacing:0;text-transform:none;font-style:normal;
  color:var(--mk-danger,#c0392b);background:color-mix(in srgb,var(--mk-danger,#c0392b) 10%,transparent);
  padding:1px 7px;border-radius:999px; }
/* The composer keeps its own look; it only needs room to breathe in a modal. */
.rsn-body .composer{ width:100%; }
/* B54-16 — "This comment box has too much height to begin with": it opens at
   two lines and grows with the text (max-height unchanged). */
.rsn-body .ast-input{ min-height:46px;max-height:38vh;overflow:auto; }
/* B54-15 — "This send button is redundant, we have the Reject button below".
   The composer is asked not to render it (send:false); this is the belt-and-
   braces for any composer mounted here by another path. */
.rsn-body .ast-send{ display:none; }
.rsn-ft{ display:flex;align-items:center;justify-content:flex-end;gap:8px;flex:0 0 auto; }
.rsn-btn{ display:inline-flex;align-items:center;gap:6px;padding:8px 15px;border-radius:999px;
  border:1px solid var(--border);background:var(--bg-1);color:var(--fg-2);cursor:pointer;
  font:700 12px var(--mk-font-ui);transition:background var(--mk-t-fast),border-color var(--mk-t-fast),color var(--mk-t-fast); }
.rsn-cancel:hover{ background:var(--bg-2);color:var(--fg-1); }
.rsn-go{ border-color:transparent;background:var(--accent);color:#fff; }
.rsn-go:hover{ filter:brightness(1.06); }
.rsn-go.is-danger{ background:var(--mk-danger,#c0392b); }
.rsn-go.is-off,.rsn-go:disabled{ opacity:.45;cursor:not-allowed;filter:none; }
@media (pointer:coarse){ .rsn-btn{ min-height:44px; } }
@media (max-width:600px) and (orientation:portrait){
  /* the app's mobile modal pattern: a bottom sheet */
  .rsn-ov{ align-items:flex-end; }
  .rsn-card{ width:100%;max-width:none;max-height:92vh;border-radius:16px 16px 0 0; }
}
/* B63-011 — the portrait half of this pattern existed; the landscape half
   (a right-edge side panel, matching #alertsModal/.el-mk-ov) was missing. */
@media (max-height:599px) and (orientation:landscape){
  .rsn-ov{ align-items:stretch;justify-content:flex-end;padding:0; }
  .rsn-card{
    width:min(420px, 92vw);max-width:none;height:100%;max-height:100%;
    border-radius:0;border-inline-end:0;
  }
  html[dir="rtl"] .rsn-ov{ justify-content:flex-start; }
  html[dir="rtl"] .rsn-card{ border-inline-end:1px solid var(--border);border-inline-start:0; }
}
/* B51-15 — a rejection's reason, shown on the resolved alert row. */
.alert-reason{ display:flex;align-items:flex-start;gap:6px;margin-top:5px;
  font:500 11.5px/1.5 var(--mk-font-ui);color:var(--fg-2);text-wrap:pretty; }
.alert-reason > .mi{ font-size:14px;color:var(--fg-3);flex:0 0 auto;margin-top:1px; }
.alert-reason .ar-txt{ min-width:0; }
.alert-reason .ar-txt p{ margin:0; }
.alert-reason .ar-att{ display:inline-flex;align-items:center;gap:4px;margin-inline-start:6px;
  padding:1px 7px;border-radius:999px;background:var(--bg-2);border:1px solid var(--border);
  font:600 10px var(--mk-font-ui);color:var(--fg-3);white-space:nowrap; }
.alert-reason .ar-att .mi{ font-size:12px; }

/* ══ B61 (Pablo: "I like the fact that we're re-using the message input component
   but it doesn't need to look like an iframe inside of a box. Very hard corners,
   let's do something that feels a bit more integrated") ═══════════════════════
   The composer keeps its BEHAVIOUR and loses its chrome. It used to be a bordered,
   tinted strip (the panel-docked assistant look) wrapping a second bordered input —
   a box in a box in a card. Here it is ONE soft well: the text sits flush at the
   top, the markup bar becomes a quiet footer under a hairline, and focus is stated
   once on the well instead of twice. Nothing is restyled outside .rsn-body, so the
   assistant and chat composers are untouched. */
.rsn-body .composer.ast-composer{ padding:0;gap:0;border-top:0;
  border:1px solid var(--border);border-radius:18px;overflow:hidden;background:var(--bg-input);
  transition:border-color var(--mk-t-fast),box-shadow var(--mk-t-fast); }
.rsn-body .composer.ast-composer:focus-within{ border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent); }
/* order: attachments · the text · the markup bar (the bar reads as a footer, the
   way every modern comment box does, instead of a header on top of a header) */
.rsn-body .ast-pending{ order:1;padding:8px 12px 0; }
.rsn-body .ast-composer-row{ order:2;align-items:flex-start;gap:0;padding:0; }
.rsn-body .ast-fmt{ order:3;padding:5px 8px;border-top:1px solid var(--border);
  background:color-mix(in srgb, var(--bg-2) 55%, transparent); }
.rsn-body .ast-input{ border:0;background:none;border-radius:0;padding:12px 14px;
  box-shadow:none;min-height:64px; }
.rsn-body .ast-input:focus{ border:0;box-shadow:none;outline:none; }
.rsn-body .ast-attach-btn{ order:3;border:0;background:none;width:30px;height:30px;
  border-radius:9px;margin:8px 8px 0 0; }
.rsn-body .ast-attach-btn:hover{ background:var(--bg-2);color:var(--accent-text); }