/* ==========================================================================
   screens.css — per-screen layout: login, list, create, editor, chat.
   ========================================================================== */

/* ================================ login ================================= */
/* Split panel: navy brand side + white form side. The shell strips its own
   padding for this screen (see layout.css body[data-screen=...]). */

#screen-login { min-height: calc(100vh - var(--rs-topnav-h)); }
body[data-screen="screen-login"] #screen-login { min-height: 100vh; }

.login-split {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  min-height: 100vh;
}
.login-brand {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--rs-5);
  padding: var(--rs-10) var(--rs-9);
  background: var(--rs-gradient-brand);
  color: #fff;
}
.login-brand h1 { color: #fff; font-size: 34px; max-width: 14ch; }
.login-brand p { color: var(--rs-on-navy-2); max-width: 46ch; font-size: var(--rs-fs-lg); }
.login-brand .logo { align-self: flex-start; }
.login-points { list-style: none; margin: var(--rs-4) 0 0; padding: 0; display: grid; gap: var(--rs-3); }
.login-points li { display: flex; align-items: center; gap: 10px; color: #fff; font-size: var(--rs-fs-base); }
.login-points .icon { color: var(--rs-cyan); }

.login-form-side {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--rs-9) var(--rs-6);
  background: var(--rs-surface);
}
.login-card { width: min(400px, 100%); }
.login-card h2 { margin-bottom: 6px; }
.login-card .lead { margin: 0 0 var(--rs-6); font-size: var(--rs-fs-base); }
.login-card .btn { width: 100%; margin-top: var(--rs-2); }
#login-error { margin: 0 0 var(--rs-3); font-size: var(--rs-fs-sm); font-weight: 500; }

@media (max-width: 900px) {
  .login-split { grid-template-columns: minmax(0, 1fr); }
  .login-brand { padding: var(--rs-8) var(--rs-6); min-height: auto; }
  .login-brand h1 { font-size: 26px; }
  .login-points { display: none; }
  .login-form-side { padding: var(--rs-7) var(--rs-5) var(--rs-9); align-items: flex-start; }
}

/* =============================== list ================================== */

#list-stats { margin-bottom: var(--rs-5); }

.cell-knowledge { min-width: 170px; }
.cell-updated { white-space: nowrap; color: var(--rs-ink-3); font-size: var(--rs-fs-sm); }

/* Row kebab menu (rendered on demand by views.js). */
.row-menu {
  position: absolute;
  z-index: var(--rs-z-dropdown);
  min-width: 190px;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--rs-line);
  border-radius: var(--rs-r-lg);
  box-shadow: var(--rs-sh-overlay);
}
.row-menu button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-radius: var(--rs-r-md);
  background: transparent;
  font: inherit;
  font-size: var(--rs-fs-base);
  color: var(--rs-ink-2);
  text-align: left;
  cursor: pointer;
}
.row-menu button:hover { background: var(--rs-p100); color: var(--rs-navy); }
.row-menu button.danger { color: var(--rs-bad); }
.row-menu button.danger:hover { background: var(--rs-bad-bg); }
.row-menu .icon { width: 16px; height: 16px; }

/* =============================== create ================================= */

.picker {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--rs-4);
  margin-bottom: var(--rs-6);
}
.pick-card {
  position: relative;
  display: block;
  padding: var(--rs-5);
  background: #fff;
  border: 1px solid var(--rs-line);
  border-radius: var(--rs-r-xl);
  box-shadow: var(--rs-sh-card);
  cursor: pointer;
  transition: border-color var(--rs-dur-2) var(--rs-ease), box-shadow var(--rs-dur-2) var(--rs-ease);
}
.pick-card:hover { border-color: var(--rs-p400); }
.pick-card input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.pick-card .pick-radio {
  position: absolute;
  top: var(--rs-5);
  right: var(--rs-5);
  width: 20px; height: 20px;
  border: 2px solid var(--rs-p300);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  transition: background var(--rs-dur-2) var(--rs-ease), border-color var(--rs-dur-2) var(--rs-ease);
}
.pick-card .pick-radio .icon { width: 12px; height: 12px; stroke-width: 3; }
.pick-card .pick-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  margin-bottom: var(--rs-3);
  border-radius: var(--rs-r-lg);
  background: var(--rs-p100);
  color: var(--rs-p500);
}
.pick-card h3 { margin-bottom: 4px; }
.pick-card p { font-size: var(--rs-fs-13); color: var(--rs-ink-3); margin-bottom: var(--rs-3); }
.pick-features { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pick-features li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: var(--rs-fs-13);
  color: var(--rs-ink-2);
}
.pick-features .icon { width: 14px; height: 14px; color: var(--rs-cyan-deep); margin-top: 3px; }

.pick-card:has(input:checked) {
  border-color: var(--rs-cyan);
  box-shadow: 0 0 0 3px rgba(64, 187, 231, .18), var(--rs-sh-card);
}
.pick-card:has(input:checked) .pick-radio { background: var(--rs-cyan); border-color: var(--rs-cyan); color: #fff; }
.pick-card:has(input:checked) .pick-tile { background: var(--rs-gradient-avatar); color: #fff; }
.pick-card:has(input:focus-visible) { box-shadow: var(--rs-focus-ring), var(--rs-sh-card); }

.create-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rs-3);
  padding-top: var(--rs-5);
  margin-top: var(--rs-5);
  border-top: 1px solid var(--rs-line);
}

@media (max-width: 1023px) { .picker { grid-template-columns: minmax(0, 1fr); } }

/* =============================== editor ================================= */

.editor-grid {
  display: grid;
  grid-template-columns: var(--rs-editor-rail-w) minmax(0, 1fr) var(--rs-editor-preview-w);
  gap: var(--rs-5);
  align-items: start;
}

.rail { display: grid; gap: 4px; position: sticky; top: calc(var(--rs-topnav-h) + var(--rs-6)); }
.rail-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: var(--rs-r-lg);
  background: transparent;
  font-family: var(--rs-font-sans);
  font-size: var(--rs-fs-base);
  font-weight: 500;
  color: var(--rs-ink-2);
  text-align: left;
  cursor: pointer;
  transition: background var(--rs-dur-2) var(--rs-ease),
              border-color var(--rs-dur-2) var(--rs-ease),
              box-shadow var(--rs-dur-2) var(--rs-ease);
}
.rail-item:hover { background: var(--rs-p100); color: var(--rs-navy); }
.rail-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  flex: 0 0 24px;
  border-radius: var(--rs-r-md);
  background: var(--rs-p100);
  color: var(--rs-ink-3);
  font-family: var(--rs-font-brand);
  font-weight: 700;
  font-size: var(--rs-fs-sm);
  transition: background var(--rs-dur-2) var(--rs-ease), color var(--rs-dur-2) var(--rs-ease);
}
.rail-text { flex: 1; min-width: 0; }
.rail-count {
  padding: 1px 7px;
  border-radius: var(--rs-r-pill);
  background: var(--rs-p100);
  color: var(--rs-ink-3);
  font-size: var(--rs-fs-xs);
  font-weight: 700;
}
.rail-item.is-active {
  background: #fff;
  border-color: var(--rs-line);
  box-shadow: var(--rs-sh-panel);
  color: var(--rs-navy);
  font-weight: 600;
}
.rail-item.is-active .rail-num { background: var(--rs-navy); color: #fff; }
.rail-item.is-active .rail-count { background: var(--rs-info-bg); color: var(--rs-cyan-deep); }

.editor-main { min-width: 0; }
.section-panel { margin-bottom: 0; }

/* Live chat column. #preview-chat is a real, second instance of the chat panel
   (see chat.js), so it reuses .chat-wrapper and every message/markdown rule
   below — .preview-chat only tightens the sizing for the narrower column. */
.editor-preview { position: sticky; top: calc(var(--rs-topnav-h) + var(--rs-6)); }
.preview-label {
  margin: 0 0 8px;
  font-size: var(--rs-fs-xs);
  font-weight: 700;
  letter-spacing: var(--rs-track-caps);
  text-transform: uppercase;
  color: var(--rs-p500);
}
.preview-chat {
  height: min(620px, calc(100dvh - var(--rs-topnav-h) - 150px));
  min-height: 380px;
  border-radius: var(--rs-r-xl);
}
.preview-chat .chat-header { height: 60px; padding: 0 14px; gap: 10px; }
.preview-chat .chat-avatar { width: 34px; height: 34px; flex-basis: 34px; }
.preview-chat .chat-title strong { font-size: var(--rs-fs-base); }
.preview-chat .chat-body { gap: 12px; padding: 14px; }
.preview-chat .message-bubble { max-width: 84%; font-size: var(--rs-fs-base); padding: 9px 13px; }
.preview-chat .message-avatar { width: 26px; height: 26px; font-size: var(--rs-fs-2xs); }
.preview-chat .chat-footer { padding: 10px; }
/* Icon-only Send: the label would not survive the narrower composer. */
.preview-chat .chat-footer .btn { padding: 0 12px; }
.preview-caption { margin: var(--rs-2) 0 0; font-size: var(--rs-fs-sm); color: var(--rs-ink-4); }

@media (max-width: 1279px) { .editor-grid { grid-template-columns: var(--rs-editor-rail-w) minmax(0, 1fr) 340px; } }

@media (max-width: 1023px) {
  .editor-grid { grid-template-columns: minmax(0, 1fr); }
  .rail {
    position: static;
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 6px;
  }
  .rail-item { flex: 0 0 auto; }
  /* Stacked below the sections: no longer sticky, and free to use full width. */
  .editor-preview { position: static; }
  .preview-chat { height: clamp(380px, 60dvh, 560px); }
}

@media (max-width: 767px) {
  .rail-text { display: none; }             /* numbered chips only */
  .rail-item { padding: 8px 10px; }
}

/* ================================ chat ================================== */

/* An agent holds several conversation threads. The list of them is a real
   column beside the full-screen panel and a drawer over the message area in the
   narrower ones — same markup and same JS either way (chat.js resolves both by
   class), so only these rules decide which shape it takes. */
.chat-layout {
  position: relative;                 /* the drawer anchors to this */
  display: grid;
  grid-template-columns: var(--rs-chat-sessions-w, 260px) minmax(0, 1fr);
  gap: var(--rs-4);
  align-items: start;
}

.chat-sessions {
  display: flex;
  flex-direction: column;
  gap: var(--rs-2);
  max-height: clamp(420px, calc(100dvh - 280px), 780px);
  padding: var(--rs-3);
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--rs-line);
  border-radius: var(--rs-r-2xl);
  box-shadow: var(--rs-sh-raised);
}
.chat-sessions-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rs-2);
  padding-bottom: var(--rs-2);
  border-bottom: 1px solid var(--rs-line);
}
.chat-sessions-label {
  font-size: var(--rs-fs-xs);
  font-weight: 700;
  letter-spacing: var(--rs-track-caps);
  text-transform: uppercase;
  color: var(--rs-p500);
}
.chat-session-list { flex: 1; min-height: 0; }

/* Rows reuse the shared .item primitive. They are deliberately NOT
   `.message-row` and never live inside #chat-body — the e2e suite counts
   `#chat-body .message-row.received .message-text` to detect a new reply. */
.item.chat-session { padding: 9px 10px; cursor: pointer; }
.item.chat-session .grow {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 0;
  text-align: left;
  background: none;
  border: 0;
  font: inherit;
  cursor: pointer;
}
.item.chat-session .title {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  word-break: normal;                 /* one line, clipped — not wrapped */
}
.item.chat-session .sub { word-break: normal; }
.item.chat-session.is-active {
  border-color: var(--rs-cyan);
  background: var(--rs-cyan-bg, var(--rs-p50));
}
.item.chat-session.is-active .title { font-weight: 600; }

/* The drawer toggle only earns its place when the column is not on screen. */
.chat-sessions-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  flex: 0 0 auto;
  color: #fff;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: var(--rs-r-md);
  cursor: pointer;
}
.chat-sessions-toggle:hover { background: rgba(255, 255, 255, .2); }

/* Drawer variant: overlays the messages instead of taking a column. The editor
   preview uses it at every width (its column is far too narrow for a permanent
   list); the full-screen panel switches to it below 1024px.

   Openness is `.is-open`, NOT the global `.hidden`: the same element is a
   permanently visible column on a wide screen, and hiding it there would be
   wrong. CSS decides which shape applies; JS only ever says open or closed. */
.chat-sessions.is-drawer {
  position: absolute;
  z-index: 5;
  width: min(280px, 86%);
  max-height: none;
  border-radius: 0;
  border-width: 0 1px 0 0;
  box-shadow: var(--rs-sh-pop, 0 12px 32px rgba(13, 42, 78, .18));
}
.chat-sessions.is-drawer:not(.is-open) { display: none; }

/* Inside a .chat-wrapper the drawer must clear the header, or it would cover
   the very button that opened it. */
.chat-wrapper > .chat-sessions.is-drawer { inset: 72px auto 0 0; }
.preview-chat > .chat-sessions.is-drawer { inset: 60px auto 0 0; }

/* The preview column never has room for a sidebar, so its toggle is always on. */
.preview-chat .chat-sessions-toggle { display: flex; }

@media (max-width: 1023px) {
  /* The full-screen panel loses its column and behaves like the preview. */
  .chat-layout { grid-template-columns: minmax(0, 1fr); }
  .chat-layout > .chat-sessions {
    position: absolute;
    z-index: 5;
    inset: 0 auto 0 0;
    width: min(280px, 86%);
    max-height: none;
    border-radius: var(--rs-r-2xl) 0 0 var(--rs-r-2xl);
    box-shadow: var(--rs-sh-pop, 0 12px 32px rgba(13, 42, 78, .18));
  }
  .chat-layout > .chat-sessions:not(.is-open) { display: none; }
  .chat-layout .chat-sessions-toggle { display: flex; }
}

.chat-wrapper {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: clamp(420px, calc(100dvh - 280px), 780px);
  background: #fff;
  border: 1px solid var(--rs-line);
  border-radius: var(--rs-r-2xl);
  box-shadow: var(--rs-sh-raised);
}

.chat-header {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  height: 72px;
  padding: 0 20px;
  background: var(--rs-gradient-brand);
  color: #fff;
}
.chat-header::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 2px;
  background: linear-gradient(90deg, var(--rs-cyan), transparent);
}
.chat-header .btn-mini {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .22);
  color: #fff;
}
.chat-header .btn-mini:hover:not(:disabled) { background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .35); }

.chat-avatar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  flex: 0 0 42px;
  border-radius: var(--rs-r-lg);
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .24);
  color: #fff;
  font-family: var(--rs-font-brand);
  font-weight: 700;
}
.chat-avatar span { position: relative; z-index: 2; }

/* "Thinking" indicator. chat.js toggles `.processing` on #chat-avatar — the
   sweep, the glow and the typing dots all key off that single class, so no JS
   change is needed here. Do NOT rename it: `.chat-avatar.processing +
   .chat-title .typing-dots` below is what reveals the dots.
   The tile is a rounded SQUARE (--rs-r-lg), so a rotating border-arc wobbles at
   the corners; the cue is a gradient band sweeping left -> right instead — the
   same translating-band idea as `rs-indet`, though not its timing (see below).
   The wrapper owns the fade and the band owns the motion, one animated
   property each, so nothing fights over `transform`. */
.avatar-sweep {
  position: absolute;
  inset: 0;
  border-radius: inherit;      /* clip the band to the tile's own corners */
  overflow: hidden;
  opacity: 0;
  transition: opacity var(--rs-dur-3) var(--rs-ease);
  pointer-events: none;
}
/* The band. `left` + `width` (not `inset: 0`) so the width is not
   over-constrained by a competing `right`. */
.avatar-sweep::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 55%;
  background: linear-gradient(90deg, transparent,
              rgba(255, 255, 255, .38) 35%, var(--rs-cyan) 50%,
              rgba(255, 255, 255, .38) 65%, transparent);
  transform: translateX(-100%);
}
.chat-avatar.processing .avatar-sweep { opacity: 1; }
/* `linear`, NOT var(--rs-ease): that curve is a hard ease-out, which on a tile
   this small parks the band off-screen for ~45% of every cycle and reads as a
   stutter. (rs-indet gets away with it only because its bar is much wider.) */
.chat-avatar.processing .avatar-sweep::before {
  animation: rs-avatar-sweep 1.15s linear infinite;
}
.chat-avatar.processing {
  box-shadow: 0 0 0 4px rgba(64, 187, 231, .16), 0 0 18px rgba(64, 187, 231, .4);
}
/* translateX is a % of the BAND's own width (55% of the tile), so the band has
   fully cleared the right edge by 182%; running on to 220% leaves a short dark
   beat (~12% of the cycle) before the next pass instead of a hard wrap. */
@keyframes rs-avatar-sweep {
  from { transform: translateX(-100%); }
  to   { transform: translateX(220%); }
}
/* base.css's blanket rule only forces duration/iteration-count, which would
   park the band off-screen right — i.e. no cue at all. Leave a static wash,
   the same way .pbar.is-indeterminate and .skel do. */
@media (prefers-reduced-motion: reduce) {
  .chat-avatar.processing .avatar-sweep::before {
    animation: none; transform: none; width: 100%; opacity: .45;
  }
}

.chat-title { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.chat-title strong { font-family: var(--rs-font-brand); font-size: var(--rs-fs-lg); }
.chat-substatus { display: flex; align-items: center; }

/* #chat-status text is asserted verbatim by the e2e suite ("Online" /
   "Thinking…") — style it, never rewrite it. */
.chat-status { font-size: var(--rs-fs-xs); font-weight: 600; color: #8FE7B4; }

/* Typing dots live in the HEADER, never as a .message-row — the e2e suite
   counts `.message-row.received .message-text` to detect a new reply. */
.typing-dots { display: none; align-items: center; gap: 3px; margin-left: 6px; }
.chat-avatar.processing + .chat-title .typing-dots { display: inline-flex; }
.typing-dots i {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--rs-cyan);
  animation: rs-typing 1.05s var(--rs-ease) infinite;
}
.typing-dots i:nth-child(2) { animation-delay: .16s; }
.typing-dots i:nth-child(3) { animation-delay: .32s; }
@keyframes rs-typing {
  0%, 60%, 100% { opacity: .28; transform: translateY(0); }
  30%           { opacity: 1; transform: translateY(-3px); }
}

.chat-body {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px;
  background: var(--rs-page);
}
.chat-empty { margin: auto; text-align: center; color: var(--rs-ink-4); }

.message-row { display: flex; gap: 10px; align-items: flex-end; }
.message-row.sent { flex-direction: row-reverse; }
.message-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  flex: 0 0 auto;
  border-radius: var(--rs-r-md);
  background: var(--rs-gradient-avatar);
  color: #fff;
  font-family: var(--rs-font-brand);
  font-size: var(--rs-fs-xs);
  font-weight: 700;
}
.message-row.sent .message-avatar { background: var(--rs-p600); }
/* min-width: 0 lets a flex item shrink below its content's width. Without it
   a wide table or chart sets the bubble's minimum, which beats max-width,
   and the whole chat panel scrolls sideways instead of the table. */
.message-bubble {
  max-width: 72%;
  min-width: 0;
  padding: 11px 15px;
  border-radius: var(--rs-r-2xl);
  box-shadow: var(--rs-sh-border);
  font-size: var(--rs-fs-md);
  line-height: 1.55;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.message-row.received .message-bubble {
  background: var(--rs-info-bg);
  border: 1px solid var(--rs-info-line);
  color: var(--rs-ink);
  border-bottom-left-radius: var(--rs-r-md);
}
.message-row.sent .message-bubble {
  background: var(--rs-navy);
  color: #fff;
  border-bottom-right-radius: var(--rs-r-md);
}

/* What the pending reply is doing ("Searching agencies…"), shown until the
   first token. Beside .message-text, never inside it, for the same reason
   as the actions below. */
.message-step {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--rs-ink-3);
  font-size: var(--rs-fs-sm);
  white-space: normal;
}
.message-step-dots { display: inline-flex; align-items: center; gap: 3px; }
.message-step-dots i {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--rs-cyan);
  animation: rs-typing 1.05s var(--rs-ease) infinite;
}
.message-step-dots i:nth-child(2) { animation-delay: .16s; }
.message-step-dots i:nth-child(3) { animation-delay: .32s; }

/* The per-reply actions (Download PDF) sit under .message-text inside the
   bubble, never inside it: the Selenium suite reads that element's text. */
.message-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--rs-1);
  margin-top: var(--rs-2);
  white-space: normal;
}
.message-action {
  display: inline-flex;
  align-items: center;
  gap: var(--rs-1);
  padding: 2px var(--rs-2);
  border: 1px solid var(--rs-info-line);
  border-radius: var(--rs-r-md);
  background: var(--rs-surface);
  color: var(--rs-ink-3);
  font: inherit;
  font-size: var(--rs-fs-2xs);
  font-weight: 600;
  cursor: pointer;
}
.message-action .icon { width: 13px; height: 13px; }
.message-action:hover { color: var(--rs-navy); border-color: var(--rs-line-strong); }
.message-action:focus-visible { outline: 2px solid var(--rs-cyan); outline-offset: 1px; }
.message-action:disabled { cursor: progress; opacity: .6; }

/* Assistant replies are Markdown (chat.js renderContent), so the bubble holds
   real block elements — override pre-wrap and let them own their spacing. */
.message-row.received .message-text { white-space: normal; }
.message-row.received .message-text > *:first-child { margin-top: 0; }
.message-row.received .message-text > *:last-child { margin-bottom: 0; }
.message-row.received .message-text p { margin: 0 0 .5em; }
.message-row.received .message-text ul,
.message-row.received .message-text ol { margin: 0 0 .5em; padding-left: 1.4em; }
.message-row.received .message-text li { margin: .15em 0; }
.message-row.received .message-text h1,
.message-row.received .message-text h2,
.message-row.received .message-text h3 {
  margin: .5em 0 .3em;
  font-family: var(--rs-font-brand);
  font-size: 1.04em;
  color: var(--rs-navy);
}
.message-row.received .message-text a { color: var(--rs-cyan-deep); text-decoration: underline; }
.message-row.received .message-text code {
  font-family: var(--rs-font-mono);
  font-size: .88em;
  background: rgba(13, 42, 78, .055);
  padding: .1em .35em;
  border-radius: var(--rs-r-sm);
}
.message-row.received .message-text pre {
  margin: 0 0 .5em;
  padding: 10px 12px;
  background: rgba(13, 42, 78, .055);
  border: 1px solid var(--rs-info-line);
  border-radius: var(--rs-r-lg);
  overflow-x: auto;
}
.message-row.received .message-text pre code { background: none; padding: 0; }
.message-row.received .message-text blockquote {
  margin: 0 0 .5em;
  padding-left: .8em;
  border-left: 3px solid var(--rs-cyan);
  color: var(--rs-ink-3);
}
/* A table scrolls sideways inside its own reply, never the chat panel: it is
   a block of at most the bubble's width, and its cells keep whole words. */
.message-row.received .message-text table {
  display: block;
  width: max-content;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  margin: 0 0 .5em;
  font-size: .92em;
  background: var(--rs-surface);
  border: 1px solid var(--rs-line);
  border-radius: var(--rs-r-md);
}
.message-row.received .message-text th,
.message-row.received .message-text td {
  padding: 6px 10px;
  text-align: left;
  border-bottom: 1px solid var(--rs-line);
  overflow-wrap: normal;
}
.message-row.received .message-text th {
  background: var(--rs-surface-2);
  font-family: var(--rs-font-brand);
  font-weight: 600;
  color: var(--rs-navy);
  white-space: nowrap;
}

/* A chart block drawn by widget/charts.js: a fixed drawing width so the
   bubble can size to it, shrinking with the bubble down to a readable size
   and scrolling sideways inside the reply below that, as a table does. */
.message-row.received .message-text .rs-chart {
  width: 560px;
  max-width: 100%;
  overflow-x: auto;
  margin: 0 0 .5em;
  padding: 10px 12px 8px;
  background: var(--rs-surface);
  border: 1px solid var(--rs-line);
  border-radius: var(--rs-r-md);
}
.rs-chart svg { display: block; width: 100%; min-width: 360px; height: auto; }
.rs-chart-title { font-family: var(--rs-font-brand); font-weight: 600; color: var(--rs-navy); }
.rs-chart-unit { font-size: var(--rs-fs-2xs); color: var(--rs-ink-3); margin-bottom: 4px; }
.rs-chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-top: 6px;
  font-size: var(--rs-fs-2xs);
  color: var(--rs-ink-3);
}
.rs-chart-key { display: inline-flex; align-items: center; gap: 5px; }
.rs-chart-key i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }

.chat-footer {
  display: flex;
  gap: 10px;
  padding: 14px;
  background: #fff;
  border-top: 1px solid var(--rs-line);
}
.chat-footer input { flex: 1; }

@media (max-width: 1023px) { .chat-wrapper { height: calc(100dvh - 230px); min-height: 380px; } }
@media (max-width: 767px) {
  .chat-wrapper { height: calc(100dvh - 190px); border-radius: var(--rs-r-xl); }
  .chat-header { height: 64px; padding: 0 14px; gap: 10px; }
  .message-bubble { max-width: 88%; }
  .chat-body { padding: 14px; }
}

/* ========================= USER SESSIONS SCREEN =========================
   The cross-owner session browser. Rows are tr.sess-row (its own selector
   family — never .chat-session or [data-session-id], which belong to the
   chat panels); transcript bubbles are .sess-msg, never .message-row. */

.sess-row .cell-session .title { font-weight: 600; color: var(--rs-navy); }
.sess-row .cell-session .pill { margin-left: 8px; }
.sess-row.is-deleted .cell-session .title { color: var(--rs-p500); }
.sess-row .owner-key {
  font-size: var(--rs-fs-xs);
  color: var(--rs-p500);
  word-break: break-all;
}
.sess-row .cell-actions { white-space: nowrap; }
.sess-row .sess-view,
.sess-row .sess-export { margin-right: 6px; }

/* The message a content search matched, under the conversation title. */
.sess-snippet {
  margin: 4px 0 0;
  max-width: 46ch;
  font-size: var(--rs-fs-xs);
  color: var(--rs-p500);
  line-height: 1.45;
}
.sess-snippet-role {
  margin-right: 6px;
  font-weight: 600;
  text-transform: capitalize;
  color: var(--rs-navy);
}
.sess-snippet mark {
  padding: 0 2px;
  border-radius: 3px;
  background: var(--rs-info-line);
  color: var(--rs-info-fg);
}

.pager-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-right: 14px;
}
.pager { display: flex; gap: 6px; padding-bottom: 10px; }

.transcript-panel { margin-top: 16px; }
.transcript-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--rs-line);
}
.transcript-head .icon { width: 16px; height: 16px; color: var(--rs-cyan-deep); }
.transcript-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  max-height: 420px;
  overflow-y: auto;
}
.transcript-empty { color: var(--rs-p400); font-size: var(--rs-fs-sm); }

.sess-msg {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-width: 76%;
  padding: 8px 12px;
  border-radius: var(--rs-r-lg);
  background: var(--rs-surface-2);
}
.sess-msg.sent {
  align-self: flex-end;
  background: var(--rs-navy);
  color: #fff;
}
.sess-msg.received { align-self: flex-start; }
.sess-msg-role {
  font-size: var(--rs-fs-xs);
  font-weight: 600;
  opacity: 0.7;
}
.sess-msg-text { white-space: pre-wrap; word-break: break-word; }