/* ============================================================
   Supreme AI — Browser tool activity (inline in chat) + confirm
   Loaded after the main stylesheets.
   ============================================================ */

.tool-steps {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 2px 0 10px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface-1) 70%, transparent);
  font-size: 12.5px;
}
.tool-step {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--text-2);
  line-height: 1.35;
}
.tool-step .ts-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  color: var(--text-3);
}
.tool-step .ts-ic .ic { width: 14px; height: 14px; }
.tool-step .ts-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tool-step .ts-note {
  color: var(--text-3);
  font-size: 11.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tool-step.running .ts-ic { color: var(--accent-2, var(--accent)); animation: tsPulse 1.1s ease-in-out infinite; }
.tool-step.running .ts-label { color: var(--text-1); }
.tool-step.ok .ts-ic { color: var(--ok); }
.tool-step.err .ts-ic { color: var(--err); }
.tool-step.err .ts-label { color: var(--err); }
.tool-step.risk-confirm .ts-ic { color: var(--warn); }
.tool-step.risk-denied .ts-ic { color: var(--err); }
.tool-step .ts-time {
  flex: 0 0 auto;
  margin-left: auto;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--text-3);
  opacity: .75;
}
.tool-step .ts-note { max-width: 46%; }

@keyframes tsPulse { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } }

/* ---------- real tool output ----------
   A tool that ran must be visibly different from one that never did, so the
   actual results are rendered: links, page text and program stdout. */
.tool-out-wrap { margin: 2px 0 4px 24px; min-width: 0; }
.tool-out {
  border: 1px solid var(--border-soft);
  border-radius: 11px;
  background: color-mix(in srgb, var(--surface-2) 55%, transparent);
  overflow: hidden;
}
.tool-out-wrap.is-err .tool-out { border-color: rgba(248,113,113,.3); }
.to-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 11px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  border-bottom: 1px solid var(--border-soft);
  background: color-mix(in srgb, var(--surface-1) 70%, transparent);
}
.to-head.to-err { color: var(--err); }
.to-head.to-warn { color: var(--warn); }
.to-head::before {
  content: '';
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border-radius: 50%;
  background: var(--accent);
}
.to-head.to-err::before { background: var(--err); }
.to-head.to-warn::before { background: var(--warn); }
.to-note { padding: 9px 12px; font-size: 12.5px; color: var(--text-3); }
.to-link { display: block; padding: 7px 12px 0; font-size: 12px; color: var(--accent); word-break: break-all; }
.to-text {
  margin: 0;
  padding: 10px 12px;
  max-height: 260px;
  overflow: auto;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  font-size: 11.8px;
  line-height: 1.6;
  color: var(--text-2);
  white-space: pre-wrap;
  word-break: break-word;
}
.to-text.to-page { font-family: inherit; font-size: 12.6px; line-height: 1.62; color: var(--text-2); }
.to-text.to-err { color: var(--err); }
.to-text.to-json { max-height: 300px; }
.to-text.to-out { color: var(--text-1); background: color-mix(in srgb, var(--ok) 5%, transparent); }
.to-text.to-out.to-err { background: color-mix(in srgb, var(--err) 6%, transparent); }
.to-sources { border-color: var(--border-hi); }
.to-empty { color: var(--text-3); font-style: italic; }
.to-links { margin: 0; padding: 6px 12px 10px 30px; display: flex; flex-direction: column; gap: 9px; }
.to-links li { font-size: 12.8px; line-height: 1.5; }
.to-links a { color: var(--accent); text-decoration: none; word-break: break-word; }
.to-links a:hover { text-decoration: underline; }
.to-links .to-url { display: block; font-size: 11px; color: var(--text-3); word-break: break-all; }
.to-links .to-cid { color: var(--text-3); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.to-links .to-snip { margin: 3px 0 0; color: var(--text-2); font-size: 12.3px; }
.to-code { border-bottom: 1px solid var(--border-soft); }
.to-code-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 11px;
  font-size: 11px;
  color: var(--text-3);
  background: color-mix(in srgb, var(--surface-1) 60%, transparent);
}
.to-code pre { margin: 0; padding: 0 12px 10px; overflow-x: auto; }
.to-code code {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  font-size: 11.8px;
  line-height: 1.55;
  color: var(--text-2);
  white-space: pre;
}
.to-copy, .to-more {
  border: 1px solid var(--border-soft);
  background: var(--surface-2);
  color: var(--text-2);
  border-radius: 7px;
  padding: 2px 9px;
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}
.to-copy:hover, .to-more:hover { color: var(--text-1); border-color: var(--border-hi); }
.to-more { display: block; margin: 0 12px 10px; }
.to-rest { border-top: 1px solid var(--border-soft); }

/* ---------- Chrome connection state ---------- */
.browser-status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 2px 2px 8px;
  padding: 8px 11px;
  border-radius: 11px;
  border: 1px solid var(--border-soft);
  background: color-mix(in srgb, var(--surface-1) 60%, transparent);
  font-size: 12.5px;
  color: var(--text-2);
}
.bs-dot { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: var(--text-3); }
.bs-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.browser-status[data-state='connected'] { border-color: rgba(103,232,180,.3); color: var(--text-1); }
.browser-status[data-state='connected'] .bs-dot { background: var(--ok); box-shadow: 0 0 0 3px rgba(103,232,180,.16); }
.browser-status[data-state='paused'] .bs-dot { background: var(--warn); }
.browser-status[data-state='not-enabled'] .bs-dot { background: var(--warn); }
.browser-status[data-state='missing'] .bs-dot,
.browser-status[data-state='no-bridge'] .bs-dot { background: var(--err); }
.browser-status[data-state='login-required'] { border-color: rgba(255,196,86,.28); }
.browser-status[data-state='login-required'] .bs-dot { background: var(--warn); box-shadow: 0 0 0 3px rgba(255,196,86,.14); }
/* Signed in, handshake in flight. Deliberately NOT styled like
   login-required: that one means "you are signed out", this one does not. */
.browser-status[data-state='connecting'] { border-color: rgba(74,168,255,.28); }
.browser-status[data-state='connecting'] .bs-dot {
  background: var(--brand, #4aa8ff);
  animation: bs-pulse 1.1s ease-in-out infinite;
}
@keyframes bs-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .browser-status[data-state='connecting'] .bs-dot { animation: none; } }
.bs-tab {
  margin-left: auto;
  max-width: 42%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11.5px;
  color: var(--text-3);
  cursor: pointer;
}
.bs-tab:hover { color: var(--text-1); }
.bs-btn {
  flex: 0 0 auto;
  padding: 3px 9px;
  border-radius: 8px;
  border: 1px solid var(--border-soft);
  background: color-mix(in srgb, var(--surface-1) 55%, transparent);
  color: var(--text-2);
  font: inherit;
  font-size: 11.5px;
  cursor: pointer;
}
.bs-btn:hover { color: var(--text-1); border-color: var(--text-3); }
.browser-status-detail {
  margin: -4px 2px 8px;
  font-size: 11.6px;
  line-height: 1.55;
  color: var(--text-3);
}
.send-tools-hint { margin: 6px 2px 0; font-size: 11.5px; line-height: 1.5; color: var(--text-3); }

/* ---------- confirm dialog ---------- */
.confirm-card { max-width: 460px; }
.confirm-body { padding: 16px 20px 18px; }
.confirm-action {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px;
  border: 1px solid var(--border-hi);
  border-radius: 12px;
  background: var(--surface-1);
}
.confirm-action > .ic {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  margin-top: 1px;
  color: var(--warn);
}
.confirm-action .ca-op {
  font-family: var(--font-mono, monospace);
  font-size: 12.5px;
  color: var(--text-1);
  word-break: break-word;
}
.confirm-action .ca-target {
  margin-top: 3px;
  font-size: 12px;
  color: var(--text-3);
  word-break: break-word;
}
.confirm-reasons {
  margin: 12px 0 0;
  padding-left: 18px;
  list-style: disc;
  color: var(--text-2);
  font-size: 12.5px;
}
.confirm-reasons li { margin: 3px 0; }
.confirm-btns {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
}

@media (prefers-reduced-motion: reduce) {
  .tool-step.running .ts-ic { animation: none; }
}