/* @amos-ui/agent-timeline — tokens first, both themes, zero framework assumptions.
   Override any --amos-* variable to theme; components never hardcode a color. */

.amos-tl {
  --amos-ink: #1c1f1e;
  --amos-ink-2: #55605b;
  --amos-muted: #8a948e;
  --amos-panel: #ffffff;
  --amos-panel-2: #f2f4f2;
  --amos-line: #dfe4e0;
  --amos-accent: #1f6f54;
  --amos-ok: #1f6f54;
  --amos-warn: #9a6b15;
  --amos-danger: #b3382c;
  --amos-radius: 10px;
  --amos-font: ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif;
  --amos-mono: ui-monospace, "SF Mono", Menlo, monospace;

  font-family: var(--amos-font);
  color: var(--amos-ink);
  font-size: 14px;
  line-height: 1.5;
}
@media (prefers-color-scheme: dark) {
  .amos-tl {
    --amos-ink: #e6e9e6;
    --amos-ink-2: #a8b2ab;
    --amos-muted: #79837c;
    --amos-panel: #1d211f;
    --amos-panel-2: #262b28;
    --amos-line: #343a36;
    --amos-accent: #55b08a;
    --amos-ok: #55b08a;
    --amos-warn: #d2a24c;
    --amos-danger: #e06456;
  }
}
[data-theme="dark"] .amos-tl {
  --amos-ink: #e6e9e6; --amos-ink-2: #a8b2ab; --amos-muted: #79837c;
  --amos-panel: #1d211f; --amos-panel-2: #262b28; --amos-line: #343a36;
  --amos-accent: #55b08a; --amos-ok: #55b08a; --amos-warn: #d2a24c; --amos-danger: #e06456;
}
[data-theme="light"] .amos-tl {
  --amos-ink: #1c1f1e; --amos-ink-2: #55605b; --amos-muted: #8a948e;
  --amos-panel: #ffffff; --amos-panel-2: #f2f4f2; --amos-line: #dfe4e0;
  --amos-accent: #1f6f54; --amos-ok: #1f6f54; --amos-warn: #9a6b15; --amos-danger: #b3382c;
}

.amos-tl-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.amos-tl-item { position: relative; padding-left: 18px; }
.amos-tl-item::before {
  content: ""; position: absolute; left: 5px; top: 0; bottom: -8px; width: 2px;
  background: var(--amos-line);
}
.amos-tl-item:last-child::before { bottom: auto; height: 100%; }

.amos-tl-meter { position: sticky; top: 0; z-index: 2; padding-bottom: 10px; }
.amos-cost {
  display: flex; align-items: baseline; gap: 10px;
  background: var(--amos-panel); border: 1px solid var(--amos-line);
  border-radius: 999px; padding: 6px 14px; width: fit-content;
}
.amos-cost-total { font-family: var(--amos-mono); font-weight: 600; font-variant-numeric: tabular-nums; }
.amos-cost-detail { font-size: 12px; color: var(--amos-muted); }
.amos-cost-detail code { font-family: var(--amos-mono); }

.amos-tl-status { margin: 0; color: var(--amos-muted); font-size: 13px; }

/* Tool call */
.amos-tool { background: var(--amos-panel); border: 1px solid var(--amos-line); border-radius: var(--amos-radius); overflow: hidden; }
.amos-tool-head {
  display: flex; align-items: center; gap: 8px; width: 100%;
  background: none; border: 0; padding: 8px 12px; cursor: pointer;
  font: inherit; color: inherit; text-align: left;
}
.amos-tool-head:focus-visible { outline: 2px solid var(--amos-accent); outline-offset: -2px; }
.amos-tool-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--amos-muted); }
.amos-tool-running .amos-tool-dot { background: var(--amos-accent); animation: amos-pulse 1.2s ease-in-out infinite; }
.amos-tool-succeeded .amos-tool-dot { background: var(--amos-ok); }
.amos-tool-failed .amos-tool-dot { background: var(--amos-danger); }
.amos-tool-name { font-family: var(--amos-mono); font-size: 13px; font-weight: 600; }
.amos-tool-preview {
  color: var(--amos-muted); font-family: var(--amos-mono); font-size: 12px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0;
}
.amos-tool-state { font-size: 12px; color: var(--amos-ink-2); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.amos-tool-failed .amos-tool-state { color: var(--amos-danger); font-weight: 600; }
.amos-tool-body { border-top: 1px solid var(--amos-line); padding: 10px 12px; display: grid; gap: 10px; }
.amos-tool-section { display: grid; gap: 4px; }
.amos-tool-label { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--amos-muted); }
.amos-tool-body pre {
  margin: 0; padding: 8px 10px; background: var(--amos-panel-2); border-radius: 6px;
  font-family: var(--amos-mono); font-size: 12px; overflow-x: auto; max-height: 280px;
}

/* Reasoning */
.amos-reason { color: var(--amos-ink-2); }
.amos-reason-head {
  display: flex; gap: 8px; align-items: baseline; background: none; border: 0; padding: 0;
  cursor: pointer; font: inherit; color: inherit; text-align: left; max-width: 100%;
}
.amos-reason-head:focus-visible { outline: 2px solid var(--amos-accent); outline-offset: 2px; border-radius: 4px; }
.amos-reason-label { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--amos-muted); flex-shrink: 0; }
.amos-reason-live .amos-reason-label { color: var(--amos-accent); }
.amos-reason-first { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-style: italic; }
.amos-reason-text { margin: 4px 0 0; font-size: 13px; white-space: pre-wrap; font-style: italic; }
.amos-caret { display: inline-block; width: 7px; height: 13px; background: var(--amos-accent); margin-left: 2px; vertical-align: text-bottom; animation: amos-blink 1s steps(1) infinite; }

/* Approval gate */
.amos-gate { border-radius: var(--amos-radius); border: 1px solid; padding: 12px 14px; background: var(--amos-panel); }
.amos-gate-info { border-color: var(--amos-line); }
.amos-gate-caution { border-color: var(--amos-warn); }
.amos-gate-danger { border-color: var(--amos-danger); }
.amos-gate-head { display: flex; justify-content: space-between; align-items: center; }
.amos-gate-badge { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; }
.amos-gate-info .amos-gate-badge { color: var(--amos-ink-2); }
.amos-gate-caution .amos-gate-badge { color: var(--amos-warn); }
.amos-gate-danger .amos-gate-badge { color: var(--amos-danger); }
.amos-gate-countdown { font-family: var(--amos-mono); font-size: 12px; color: var(--amos-muted); font-variant-numeric: tabular-nums; }
.amos-gate-action { margin: 6px 0 0; font-weight: 600; }
.amos-gate-detail {
  margin: 8px 0 0; padding: 8px 10px; background: var(--amos-panel-2); border-radius: 6px;
  font-family: var(--amos-mono); font-size: 12px; overflow-x: auto; max-height: 200px;
}
.amos-gate-actions { display: flex; gap: 8px; margin-top: 10px; }
.amos-btn {
  font: inherit; font-size: 13px; font-weight: 600; padding: 6px 16px; border-radius: 7px;
  cursor: pointer; border: 1px solid transparent;
}
.amos-btn:focus-visible { outline: 2px solid var(--amos-accent); outline-offset: 2px; }
.amos-btn-approve { background: var(--amos-ok); color: #fff; }
.amos-btn-deny { background: transparent; color: var(--amos-ink); border-color: var(--amos-line); }
.amos-gate-receipt { margin: 0; font-size: 13px; color: var(--amos-ink-2); display: flex; align-items: center; gap: 7px; }
.amos-gate-receipt-mark { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.amos-gate-receipt-approved .amos-gate-receipt-mark { background: var(--amos-ok); }
.amos-gate-receipt-denied .amos-gate-receipt-mark { background: var(--amos-danger); }
.amos-gate-receipt-expired .amos-gate-receipt-mark { background: var(--amos-muted); }

/* Spinner */
.amos-spinner {
  display: inline-block; width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid var(--amos-line); border-top-color: var(--amos-accent);
  animation: amos-spin 0.8s linear infinite;
}

@keyframes amos-spin { to { transform: rotate(360deg); } }
@keyframes amos-pulse { 50% { opacity: 0.35; } }
@keyframes amos-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .amos-spinner, .amos-tool-running .amos-tool-dot, .amos-caret { animation: none; }
}