/* Live search activity under a running answer, and the Inspect panel. */
/* Each search is a row in the design's checklist: a spinner while it runs, a tick when it is done. */
.live {
  max-width:470px; margin-top:2px; padding:12px 16px; display:flex; flex-direction:column; gap:10px;
  background:var(--md-surface-container-low); border:1px solid var(--ua-line); border-radius:var(--md-shape-lg);
  font:var(--md-body-medium); color:var(--md-on-surface-variant);
}
.live:empty { display:none; }
.live .step { display:flex; gap:8px; align-items:flex-start; min-width:0; }
.live .step .mark {
  flex:0 0 auto; display:grid; place-items:center; width:20px; height:20px; border-radius:50%; font-size:12px;
}
.live .step .mark.done { background:var(--md-secondary-container); color:var(--md-on-secondary-container); }
.live .step .mark.active { color:var(--md-primary); animation:ig-spin 1.1s linear infinite; }
.live .step .mark.failed { background:var(--md-error-container); color:var(--md-on-error-container); }
.live .step b { flex:0 0 auto; font-weight:600; color:var(--md-on-surface); }
.live .step span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.live .think {
  margin-top:2px; padding-inline-start:10px; border-inline-start:2px solid var(--md-outline-variant);
  color:var(--md-on-surface-variant); font:var(--md-body-small); white-space:pre-wrap; max-height:120px; overflow-y:auto;
}
.acts button[aria-expanded="true"] { background-color:var(--md-secondary-container); color:var(--md-on-secondary-container); }
.insp { margin-top:12px; border:1px solid var(--border); border-radius:14px; overflow:hidden; }
.insp-tabs { display:flex; flex-wrap:wrap; gap:2px; padding:6px; border-bottom:1px solid var(--border); background:var(--side); }
.insp-tabs button {
  cursor:pointer; padding:5px 10px; border:0; border-radius:8px;
  background:transparent; color:var(--text-2); font-size:12.5px;
}
.insp-tabs button:hover { color:var(--text); }
.insp-tabs button.on { background:var(--bg); color:var(--text); box-shadow:0 0 0 1px var(--border); }
/* No height cap: the panel scrolls with the chat, so the wheel never gets trapped in a box inside a box. */
.insp-body { padding:12px 14px; font-size:13px; line-height:1.5; overflow-x:auto; }
.insp-body h5 { margin:14px 0 6px; font-size:12px; font-weight:600; color:var(--text-3); }
.insp-body h5:first-child { margin-top:0; }
.insp-body pre { margin:0; font:12px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; white-space:pre-wrap; overflow-wrap:anywhere; }
.insp-body pre.raw { max-height:70vh; overflow:auto; }   /* the one inner scroll: a full response runs to thousands of lines */
.insp-empty { color:var(--text-3); }
.kv { display:grid; grid-template-columns:max-content 1fr; gap:4px 16px; margin:0; }
.kv dt { color:var(--text-3); }
.kv dd { margin:0; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.tl { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.tl li { padding-left:12px; border-left:2px solid var(--border); }
.tl .kind { font-weight:600; font-size:12.5px; }
.tl .sub { color:var(--text-2); overflow-wrap:anywhere; }
.tl .count { margin-top:6px; font-size:11.5px; color:var(--text-3); }
.urls { margin:4px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:3px; }
.urls li { font-size:12.5px; overflow-wrap:anywhere; }
.urls a { color:var(--text-2); text-decoration:none; }
.urls a:hover { color:var(--text); text-decoration:underline; }
.urls .tag {
  display:inline-block; margin-right:6px; padding:0 5px; border-radius:4px;
  background:var(--chip); color:var(--text-2); font-size:10.5px;
}
.urls .snip { display:block; color:var(--text-3); font-size:11.5px; }
.insp-imgs { display:flex; flex-wrap:wrap; gap:8px; }
.insp-imgs img { width:120px; height:90px; object-fit:cover; border-radius:8px; border:1px solid var(--border); }