/* An agent's work in a conversation, folded: one quiet line for each stretch of work ("Thinking"
   while it goes on, then "Thought for 14s · 6 steps") that opens into a plain log of what it did.
   stream.js draws it from the rows timeline.js makes (foldWork). Classes here start with think-. */

.think { align-self: flex-start; max-width: 100%; min-width: 0; padding: 0 12px; }

/* The line: a button. Its words are clipped to one line, what the agent is doing now included. */
.think-line { display: block; max-width: 100%; padding: 1px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; line-height: 20px; color: var(--text-3); border-radius: 6px; }
.think-line::before { content: "›"; display: inline-block; width: 8px; margin-right: 6px; text-align: center; color: var(--text-4); transition: transform .12s var(--ease); }
.think-line[aria-expanded="true"]::before { transform: rotate(90deg); }
.think-line:hover { color: var(--text-2); }
.think-word { display: inline-block; }
.think-now, .think-steps, .think-failed { color: var(--text-4); }
.think[data-state="live"] .think-word { animation: think-pulse 1.8s ease-in-out infinite; }
@keyframes think-pulse { 50% { opacity: .45; } }

/* The log: text, not cards. Monospace, quiet, selectable; long lines wrap. */
.think-log { margin: 4px 0 6px 3px; padding: 1px 0 1px 12px; border-left: 1px solid var(--border-2); font: 12px/19px var(--mono); color: var(--text-3); -webkit-user-select: text; user-select: text; }
.think-entry, .think-io { white-space: pre-wrap; overflow-wrap: anywhere; }
.think-entry { padding: 1px 0; }
.think-entry[data-kind="remark"] { padding: 4px 0 4px 2ch; color: var(--text-2); }
.think-step { cursor: pointer; border-radius: 4px; }
.think-step:hover, .think-step[aria-expanded="true"] { color: var(--text-2); }
.think-mark { display: inline-block; width: 11px; height: 11px; margin-left: 2px; vertical-align: -1px; color: var(--success); }
.think-mark[data-state="failed"] { color: var(--danger); }
.think-mark[data-state="running"] { width: 6px; height: 6px; vertical-align: 1px; border-radius: 50%; background: var(--text-3); animation: think-pulse 1.2s ease-in-out infinite; }
.think-why { padding-left: 2ch; color: var(--danger); opacity: .85; }

/* What a step was given and what came back, under its line. */
.think-detail { margin: 2px 0 6px 2ch; padding-left: 10px; border-left: 1px solid var(--border-3); }
.think-detail > * + * { margin-top: 4px; }
.think-io[data-part="output"], .think-io[data-part="none"] { color: var(--text-4); }
.think-more, .think-earlier, .think-hide { font: 12px/18px var(--font); color: var(--text-3); border-radius: 4px; -webkit-user-select: none; user-select: none; }
.think-more:hover, .think-earlier:hover, .think-hide:hover { color: var(--text); }
.think-more { display: block; margin-top: 2px; }
.think-earlier { display: block; margin-bottom: 4px; }
.think-hide { display: block; margin-top: 4px; }

/* "Every step" (the device's Tool stream view): each tool call as a card with the first line of its output. */
body[data-toolview="steps"] .msg.tool[data-kind="call"] { width: min(100%, 560px); margin: 1px 0; padding: 6px 10px; border: 1px solid var(--border-3); border-radius: 12px; background: var(--surface); }
body[data-toolview="steps"] .tool-sum { display: block; }
body[data-toolview="steps"] .tool-title { flex: none; max-width: 60%; color: var(--text-2); }
body[data-toolview="steps"] .tool-body { margin: 6px 0 2px; }

@media (max-width: 767px) {
  /* A finger gets 44px to press; the line still takes the room of a line (it reaches into the gaps around it). */
  .think-line { padding: 12px 0; margin: -8px 0; }
  .think-log { margin-top: 6px; }
  .think-step { padding: 4px 0; }
  .think-more, .think-earlier, .think-hide { min-height: 36px; padding: 0 12px 0 0; }
}