/* ── tool rows ──────────────────────────────────────────────────────────── */

.pi-tool {
  margin: var(--sp-space-2) 0;
  font-family: var(--sp-font-mono);
}

.pi-tool > summary {
  display: flex;
  align-items: baseline;
  gap: var(--sp-space-2);
  cursor: pointer;
  list-style: none;
  color: var(--sp-color-accent-cyan, var(--sp-color-info));
}

.pi-tool > summary::-webkit-details-marker {
  display: none;
}

.pi-tool-icon {
  flex: none;
  width: 1ch;
}

.pi-tool-name {
  color: var(--sp-color-terminal-text);
}

.pi-tool-arg {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--sp-color-terminal-text-dim);
}

.pi-tool-state {
  margin-left: auto;
  flex: none;
  font-size: 0.68rem;
  color: var(--sp-color-terminal-text-dim);
  opacity: 0.8;
}

.pi-tool[data-state="ok"] > summary { color: var(--sp-color-success); }
.pi-tool[data-state="failed"] > summary,
.pi-tool[data-state="blocked"] > summary { color: var(--sp-color-error); }

.pi-tool-body {
  margin: var(--sp-space-1) 0 var(--sp-space-2) var(--sp-space-4);
  padding: var(--sp-space-2) var(--sp-space-3);
  overflow-x: auto;
  background: var(--sp-color-terminal-header);
  border-left: 1px solid var(--sp-color-terminal-border);
  border-radius: var(--sp-radius-sm);
  color: var(--sp-color-terminal-text-dim);
  font-size: 0.72rem;
  white-space: pre-wrap;
  scrollbar-width: thin;
}

/* Kept: the flat single-line tool row, still used when the gate view has not
   loaded. */
.pi-tool-row {
  color: var(--sp-color-accent-cyan, var(--sp-color-info));
}

.pi-tool-row--blocked {
  color: var(--sp-color-error);
}

/* ── degraded footer ────────────────────────────────────────────────────── */

.pi-gate {
  padding: var(--sp-space-4);
  border-top: 1px solid var(--sp-color-terminal-border);
  background: var(--sp-color-terminal-header);
  color: var(--sp-color-terminal-text-dim);
  font-size: 0.85rem;
}

.pi-gate p {
  margin: 0 0 var(--sp-space-2);
}

.pi-gate-actions {
  display: flex;
  gap: var(--sp-space-2);
  margin: var(--sp-space-3) 0 0;
}

.pi-auth {
  margin-top: var(--sp-space-4);
  max-width: 380px;
}

.pi-auth-tabs {
  display: flex;
  gap: var(--sp-space-1);
  border-bottom: 1px solid var(--sp-color-terminal-border);
}

.pi-tab {
  padding: var(--sp-space-2) var(--sp-space-3);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--sp-color-terminal-text-dim);
  font-family: var(--sp-font-body);
  font-size: 0.85rem;
  cursor: pointer;
}

.pi-tab.is-active {
  color: var(--sp-color-terminal-text);
  border-bottom-color: var(--sp-color-primary);
}

.pi-auth-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-space-2);
  padding-top: var(--sp-space-3);
}

.pi-label {
  font-size: 0.78rem;
  color: var(--sp-color-terminal-text-dim);
}

.pi-field {
  padding: var(--sp-space-2) var(--sp-space-3);
  background: var(--sp-color-terminal-bg);
  border: 1px solid var(--sp-color-terminal-border);
  border-radius: var(--sp-corners-inner-sm);
  color: var(--sp-color-terminal-text);
  font-family: var(--sp-font-body);
  font-size: 0.9rem;
}

.pi-field:focus {
  outline: none;
  border-color: var(--sp-color-primary);
}

.pi-auth-note {
  margin: 0;
  font-size: 0.75rem;
  color: var(--sp-color-terminal-text-dim);
}