/* A model's thinking, in a small window of its own (js/reasoning.js).
 *
 * Thinking is working notes, not the answer, so it is set small and tight:
 * one size throughout, headings as bold lines rather than steps up in size,
 * paragraphs and lists close together. The window is a few lines tall and
 * scrolls on its own, so pages of thinking never push the answer down. */

/* No ground of its own and no strip along its top: a thin line round the
   conversation's own ground, so working notes read as part of the answer's
   margin rather than a card laid over it. The line is the room's own, held
   far enough off the page to be seen over any scene (--room-line, in the
   Mosaik theme), the stronger border elsewhere: the faint one vanished. */
.reasoning-window{
  --rw-line: var(--room-line, var(--border-strong));
  position: relative;
  border: 1px solid var(--rw-line);
  border-radius: 12px;
  overflow: hidden;
  font-size: 0.85em;
}
.reasoning-window .rw-head{
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 3px 3px 10px;
  color: var(--text3);
}
.reasoning-window .rw-head > .icon{ width: 13px; height: 13px; flex: none; }
.reasoning-window .rw-head > .icon svg{ width: 100%; height: 100%; display: block; }
.reasoning-window .rw-label{ font-weight: 600; color: var(--text2); }
.reasoning-window .rw-count{ flex: 1; min-width: 0; color: var(--text3); font-variant-numeric: tabular-nums; }
.reasoning-window .rw-label + .rw-count:not(:empty)::before{ content: "· "; }
.reasoning-window .rw-open{ width: 24px; height: 24px; color: var(--text3); }
.reasoning-window .rw-open .icon{ width: 13px; height: 13px; }
/* Nothing to say in the head (js/reasoning.js marks it bare): no empty row
   over the first line, just Open large in the corner, with that line kept
   clear of it. */
.reasoning-window.bare .rw-head{ position: absolute; top: 3px; right: 4px; z-index: 1; padding: 0; }
.reasoning-window.bare .rw-count{ display: none; }
.reasoning-window.bare .rw-body{ padding-top: 7px; padding-right: 34px; }

.reasoning-window .rw-body{
  max-height: min(16em, 38vh);
  overflow-y: auto;
  /* Not contained: a wheel turned over the window scrolls it to its end, then
     carries on down the conversation (js/scroll.js handOn). */
  padding: 1px 12px 7px 10px;
  color: var(--text2);
  line-height: 1.45;
  overflow-wrap: break-word;
}
.reasoning-window .rw-body:focus-visible{ outline: none; box-shadow: inset 0 0 0 2px var(--accent); }
.reasoning-window .rw-body::-webkit-scrollbar{ width: 8px; }

/* -- compact prose ------------------------------------------------------------ */
:is(.reasoning-window .rw-body, .rw-prose) > :first-child{ margin-top: 0; }
:is(.reasoning-window .rw-body, .rw-prose) > :last-child{ margin-bottom: 0; }
:is(.reasoning-window .rw-body, .rw-prose) p{ margin: 0 0 0.3em; }
:is(.reasoning-window .rw-body, .rw-prose) :is(h1, h2, h3, h4, h5, h6){
  margin: 0.55em 0 0.05em;
  font-size: 1em;
  font-weight: 620;
  line-height: 1.4;
  color: var(--text);
  border: 0;
  padding: 0;
}
/* Most models head each stretch of thinking with a bold line of its own
   ("**Checking the dates**"); it reads as a heading, so it is set as one
   (js/reasoning.js marks those lines). */
:is(.reasoning-window .rw-body, .rw-prose) p.rw-heading{ margin: 0.55em 0 0.05em; color: var(--text); }
:is(.reasoning-window .rw-body, .rw-prose) p.rw-heading strong{ font-weight: 620; }
:is(.reasoning-window .rw-body, .rw-prose) > p.rw-heading:first-child{ margin-top: 0.15em; }
:is(.reasoning-window .rw-body, .rw-prose) :is(ul, ol){ margin: 0 0 0.3em; padding-left: 1.2em; }
:is(.reasoning-window .rw-body, .rw-prose) li{ margin: 0; }
:is(.reasoning-window .rw-body, .rw-prose) li > :is(ul, ol, p){ margin: 0; }
:is(.reasoning-window .rw-body, .rw-prose) blockquote{ margin: 0 0 0.45em; padding-left: 0.7em; border-left: 2px solid var(--border); }
:is(.reasoning-window .rw-body, .rw-prose) hr{ margin: 0.6em 0; border: 0; border-top: 1px solid var(--border); }
:is(.reasoning-window .rw-body, .rw-prose) code{ font-family: var(--font-mono); font-size: 0.95em; }
:is(.reasoning-window .rw-body, .rw-prose) pre{
  margin: 0 0 0.45em;
  padding: 5px 8px;
  border-radius: 6px;
  background: var(--code-bg);
  color: var(--code-fg);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
:is(.reasoning-window .rw-body, .rw-prose) pre code{ font-size: 0.95em; }
:is(.reasoning-window .rw-body, .rw-prose) table{ border-collapse: collapse; margin: 0 0 0.45em; font-size: 0.95em; }
:is(.reasoning-window .rw-body, .rw-prose) :is(th, td){ padding: 1px 6px; border: 1px solid var(--border); text-align: left; }
:is(.reasoning-window .rw-body, .rw-prose) img{ max-width: 100%; }

/* -- open large --------------------------------------------------------------- */
.dialog.reasoning-dialog .reasoning-large-body{ overflow-y: auto; }
.reasoning-large{
  max-width: 68ch;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
  overflow-wrap: break-word;
}
.reasoning-large > :first-child{ margin-top: 0; }
.reasoning-large > :last-child{ margin-bottom: 0; }
.reasoning-large p{ margin: 0 0 0.75em; }
.reasoning-large :is(h1, h2, h3, h4, h5, h6){ margin: 1.2em 0 0.35em; font-size: 1.05em; font-weight: 620; line-height: 1.35; }
.reasoning-large p.rw-heading{ margin: 1.1em 0 0.3em; font-size: 1.02em; }
.reasoning-large > p.rw-heading:first-child{ margin-top: 0; }
.reasoning-large :is(ul, ol){ margin: 0 0 0.75em; padding-left: 1.4em; }
.reasoning-large li{ margin: 0 0 0.2em; }
.reasoning-large hr{ margin: 1.4em 0; border: 0; border-top: 1px solid var(--border); }
.reasoning-large blockquote{ margin: 0 0 0.75em; padding-left: 0.8em; border-left: 2px solid var(--border); color: var(--text2); }
.reasoning-large code{ font-family: var(--font-mono); font-size: 0.92em; }
.reasoning-large pre{
  margin: 0 0 0.75em;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: var(--code-bg);
  color: var(--code-fg);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.reasoning-large pre code{ font-size: 0.92em; }

/* -- everything behind the scenes (Chat's work line), in its window and large --- */
/* A row a step, in the order it happened, each with its own fold (js/chat.js
   renderWorkDetail): each a short sentence, what was done in the quiet colour
   and what it was done to in the text's ("Created build.js"), a run of
   thinking in the quiet colour alone. Under the work line they hang from a
   thin rail at its left, with no box round them; the large view
   (.activity-large) sets the same steps in a dialog, every one open, with a
   line between them. */
:is(#view-chat .work .detail .rw-body, .activity-large){ display: flex; flex-direction: column; gap: 0; }
#view-chat .work .detail.reasoning-window{ margin-top: 2px; border: 0; border-radius: 0; }
#view-chat .work .detail.reasoning-window::before{
  content: "";
  position: absolute;
  left: 5px;
  top: 6px;
  bottom: 8px;
  width: 1.5px;
  border-radius: 1px;
  background: color-mix(in srgb, var(--rw-line) 80%, transparent);
  pointer-events: none;
}
#view-chat .work .detail .rw-head{ padding-left: 18px; }
#view-chat .work .detail.bare .rw-head{ padding: 0; }
#view-chat .work .detail .rw-body{ padding: 0 0 2px 10px; }
#view-chat .work .detail.bare .rw-body > :first-child > .step-head{ padding-right: 36px; }
:is(#view-chat .work, .activity-large) .step{ position: relative; font-size: 0.97em; color: var(--text2); }
.activity-large .step + .step{ border-top: 1px solid color-mix(in srgb, var(--rw-line, var(--border-strong)) 72%, transparent); }
:is(#view-chat .work, .activity-large) .step-head{
  display: flex; align-items: center; gap: 5px; width: 100%; min-width: 0;
  margin: 0; padding: 6px 12px; border: 0; border-radius: 0; background: none;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
}
#view-chat .work .step-head{ padding: 4px 8px; border-radius: 8px; }
:is(#view-chat .work, .activity-large) .step-head:disabled{ cursor: default; opacity: 1; }
#view-chat .work .step[data-fold] > .step-head:hover{ background: var(--soft); }
#view-chat .work .step-head:focus-visible{ outline: none; box-shadow: inset 0 0 0 2px var(--accent); }
:is(#view-chat .work, .activity-large) .step .k{ flex: 0 1 auto; min-width: 0; color: var(--text3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:is(#view-chat .work, .activity-large) .step :is(.k, .q):empty{ display: none; }
:is(#view-chat .work, .activity-large) .step .q{ flex: 0 3 auto; min-width: 0; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:is(#view-chat .work, .activity-large) .step.think .q{ color: var(--text3); }
:is(#view-chat .work, .activity-large) .step .n{ flex: none; margin-left: auto; padding-left: 10px; color: var(--text3); font-variant-numeric: tabular-nums; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:is(#view-chat .work, .activity-large) .step.bad .n{ color: var(--danger); }
:is(#view-chat .work, .activity-large) .s-caret{ width: 11px; height: 11px; flex: none; color: var(--text3); transition: transform var(--dur-fast) var(--ease); }
:is(#view-chat .work, .activity-large) .step:not([data-fold]) .s-caret{ display: none; }
:is(#view-chat .work, .activity-large) .step[data-open] .s-caret{ transform: rotate(90deg); }
.activity-large .s-caret{ display: none; }
/* The fold, set under its row's words. */
:is(#view-chat .work, .activity-large) .step-body{ padding: 0 12px 9px; }
#view-chat .work .step-body{ padding: 0 8px 7px; }
#view-chat .work .step-body .trace{ font-size: 0.935em; }
:is(#view-chat .work, .activity-large) .step-body .code{ margin: 2px 0 0; padding: 7px 9px; border-radius: var(--radius-sm); background: var(--code-bg); color: var(--code-fg); font-family: var(--font-mono); font-size: 0.95em; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 240px; overflow-y: auto; }
:is(#view-chat .work, .activity-large) .step-body .code.out{ background: none; color: var(--text); border: 1px solid var(--border); }
:is(#view-chat .work, .activity-large) .step-body .code.out.bad{ color: var(--danger); }
/* A file's change: added lines and removed ones in the diff colours. */
:is(#view-chat .work, .activity-large) .step-body .code.diff .add{ color: var(--added); }
:is(#view-chat .work, .activity-large) .step-body .code.diff .del{ color: var(--removed); }
:is(#view-chat .work, .activity-large) .step-body .code.diff .hunk{ opacity: 0.6; }
:is(#view-chat .work, .activity-large) .step-body .s-url{ color: var(--accent); overflow-wrap: anywhere; font-size: 0.95em; }
/* A second opinion's fold: what was questioned, what the other AI said and
   how it was settled, a line each, its label quieter than its words. */
:is(#view-chat .work, .activity-large) .step-body .said{ margin: 3px 0 0; color: var(--text); font-size: 0.95em; line-height: 1.45; overflow-wrap: anywhere; }
:is(#view-chat .work, .activity-large) .step-body .said-k{ color: var(--text3); }
:is(#view-chat .work, .activity-large) .step-body .sources{ margin: 0 0 0 -6px; }
:is(#view-chat .work, .activity-large) .sources{ list-style: none; margin: -3px 0 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
:is(#view-chat .work, .activity-large) .sources li{ border-radius: 8px; padding: 3px 6px; transition: background var(--dur-fast) var(--ease); }
.activity-large .sources li:hover{ background: var(--surface-hover); }
:is(#view-chat .work, .activity-large) .sources .row{ display: flex; align-items: center; gap: 7px; text-decoration: none; color: var(--text); font-size: 0.88em; }
:is(#view-chat .work, .activity-large) .sources .num{ min-width: 14px; color: var(--text3); font-variant-numeric: tabular-nums; font-size: 0.9em; text-align: right; }
:is(#view-chat .work, .activity-large) .sources .s-title{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:is(#view-chat .work, .activity-large) .sources .s-host{ color: var(--text3); flex: none; }
:is(#view-chat .work, .activity-large) .sources .s-read{ flex: none; font-size: 0.82em; color: var(--text3); border: 1px solid var(--border); border-radius: 4px; padding: 0 4px; }
:is(#view-chat .work, .activity-large) .sources .s-snip{ margin: 2px 0 0 21px; color: var(--text3); font-size: 0.84em; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
:is(#view-chat .work, .activity-large) .s-error{ margin: 0; padding: 6px 12px; color: var(--text3); font-size: 0.86em; }
.activity-large{ font-size: 15px; color: var(--text); }
.activity-large .sources .s-snip{ -webkit-line-clamp: 3; }
.activity-large .step-body .trace{ font-size: 1.05em; }
.activity-large .step-head{ cursor: default; }