/* The agent: the slide-out panel, the tokens page and the agent log. Loaded by
   the layout as one stylesheet beside application.css; same variables. */

/* Settings → API tokens */
.token-reveal { border-color: var(--accent); background: #f3f6ff; }
.token-plain { display: inline-block; font-size: 15px; padding: 8px 12px; user-select: all; background: #fff; border: 1px solid #c9d6ee; }
.token-curl { background: #eef1f5; padding: 10px 12px; border-radius: 6px; font-size: 12px; overflow-x: auto; white-space: pre-wrap; word-break: break-all; }

/* Settings → Agent log: the event timeline */
.event { padding: 8px 0; border-bottom: 1px solid var(--line); }
.event:last-child { border-bottom: 0; }
.event-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 12px; }
.event-seq { color: var(--muted); font-variant-numeric: tabular-nums; min-width: 32px; }
.event-time { margin-left: auto; }
.event-text { margin-top: 4px; font-size: 13px; }
.event-text p { margin: 0 0 6px; }
.event-json { background: #f3f6fb; border-radius: 6px; padding: 8px 10px; font-size: 11px; overflow-x: auto; max-height: 320px; white-space: pre-wrap; word-break: break-word; margin: 6px 0 0; }
.event-user_message { background: #fafbfc; }
.event-refusal .event-text { color: var(--red); }
.event-error .event-text { color: var(--red); }
.chip-event-user_message { background: #e4eafc; color: var(--nomad); }
.chip-event-assistant_message { background: #e3f5ea; color: var(--green); }
.chip-event-thinking { background: #f6f7f9; color: var(--muted); }
.chip-event-tool_call { background: #ede9fe; color: var(--ops); }
.chip-event-tool_result { background: #f1f5f9; color: #334155; }
.chip-event-refusal { background: #fbe3e1; color: var(--red); }
.chip-event-mutation { background: #fdf0d5; color: var(--amber); }
.chip-event-error { background: #fbe3e1; color: var(--red); }
.chip-event-usage, .chip-event-context { background: #f6f7f9; color: var(--muted); }

/* The slide-out panel */
.agent-toggle { position: fixed; right: 18px; bottom: 18px; z-index: 40; width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--ink); color: #fff; font-size: 20px; cursor: pointer; box-shadow: 0 6px 18px rgba(28, 36, 48, .25); }
.agent-toggle:hover { background: var(--accent); }
.agent-toggle[hidden] { display: none; }
.agent-panel { position: fixed; top: 0; right: 0; bottom: 0; width: 440px; max-width: 100vw; z-index: 50; background: var(--panel); border-left: 1px solid var(--line); box-shadow: -8px 0 24px rgba(28, 36, 48, .12); display: flex; flex-direction: column; transform: translateX(100%); transition: transform .18s ease; }
.agent-panel.open { transform: none; }
.agent-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); background: var(--ink); color: #fff; }
.agent-head strong { font-size: 14px; }
.agent-head .btn { background: transparent; color: #d6dce6; border-color: #3a4556; }
.agent-head .btn:hover { color: #fff; }
.agent-context { font-size: 11px; color: var(--muted); padding: 6px 12px; border-bottom: 1px solid var(--line); background: #fafbfc; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agent-context b { color: var(--ink); font-weight: 600; }
.agent-log { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 10px; font-size: 13px; }
.agent-msg { max-width: 94%; padding: 8px 11px; border-radius: 10px; line-height: 1.45; }
.agent-msg-user { align-self: flex-end; background: var(--accent); color: #fff; border-bottom-right-radius: 3px; white-space: pre-wrap; }
.agent-msg-assistant { align-self: flex-start; background: #f3f6fb; border-bottom-left-radius: 3px; }
.agent-msg-assistant p { margin: 0 0 8px; } .agent-msg-assistant p:last-child { margin-bottom: 0; }
.agent-msg-assistant ul, .agent-msg-assistant ol { margin: 4px 0 8px; padding-left: 20px; }
.agent-msg-assistant table { font-size: 12px; margin: 6px 0; } .agent-msg-assistant th, .agent-msg-assistant td { padding: 3px 6px; }
.agent-msg-assistant code { font-size: 12px; }
.agent-msg-assistant pre { background: #eef1f5; padding: 8px; border-radius: 6px; overflow-x: auto; font-size: 12px; }
.agent-msg-thinking { align-self: flex-start; color: var(--muted); font-size: 12px; font-style: italic; padding: 0 4px; }
.agent-card { align-self: stretch; border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; font-size: 12px; background: #fff; }
.agent-card .agent-card-head { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.agent-card code { font-size: 11px; }
.agent-card details { margin-top: 4px; } .agent-card summary { cursor: pointer; color: var(--muted); font-size: 11px; }
.agent-card pre { background: #f3f6fb; padding: 6px 8px; border-radius: 6px; font-size: 11px; overflow-x: auto; max-height: 220px; white-space: pre-wrap; word-break: break-word; margin: 4px 0 0; }
.agent-card-tool { border-left: 3px solid var(--ops); }
.agent-card-tool.pending .agent-card-head::after { content: "…"; color: var(--muted); }
.agent-card-refusal { border-left: 3px solid var(--red); background: #fff7f6; }
.agent-card-refusal .agent-refusal-title { color: var(--red); font-weight: 600; }
.agent-card-mutation { border-left: 3px solid var(--amber); background: #fffbf2; }
.agent-card-error { border-left: 3px solid var(--red); color: var(--red); }
.agent-card-invalid { border-left: 3px solid var(--amber); }
.agent-form { border-top: 1px solid var(--line); padding: 10px 12px; display: flex; gap: 8px; align-items: flex-end; background: #fafbfc; }
.agent-form textarea { flex: 1; min-width: 0; min-height: 44px; max-height: 160px; resize: vertical; font-size: 13px; }
.agent-form .btn { white-space: nowrap; }
.agent-foot { font-size: 11px; color: var(--muted); padding: 0 12px 8px; background: #fafbfc; display: flex; justify-content: space-between; gap: 8px; }
.agent-foot a { color: var(--muted); }
.agent-cursor::after { content: "▍"; color: var(--muted); animation: agent-blink 1s steps(2) infinite; }
@keyframes agent-blink { to { visibility: hidden; } }
body.clean .agent-toggle, body.clean .agent-panel { display: none; }
@media print { .agent-toggle, .agent-panel { display: none !important; } }

/* History: earlier conversations, in place of the log until one is chosen. */
.agent-history { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.agent-history-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.agent-history-row { display: flex; flex-direction: column; gap: 2px; text-align: left; font: inherit; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); cursor: pointer; }
.agent-history-row:hover { border-color: var(--accent); background: #f3f6ff; }
.agent-history-row.current { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(36, 86, 214, .15); }
.agent-history-row .t { font-weight: 500; line-height: 1.35; }
.agent-history-row .m { color: var(--muted); font-size: 11px; }
.agent-history-foot { margin-top: auto; padding-top: 8px; }
.agent-log[hidden], .agent-history[hidden] { display: none; }

/* A proposed change: the assistant asks, the user decides. */
.agent-card-confirmation { border-left: 3px solid var(--amber); background: #fffaf0; }
.agent-confirm-summary { margin-top: 4px; font-size: 13px; color: var(--ink); }
.agent-confirm-actions { display: flex; gap: 6px; margin-top: 8px; }

/* Resize: a grab strip on the panel's left edge; drag to resize, double-click to reset. */
.agent-resizer { position: absolute; top: 0; bottom: 0; left: -4px; width: 9px; cursor: col-resize; z-index: 2; }
.agent-resizer::after { content: ""; position: absolute; top: 0; bottom: 0; left: 4px; width: 1px; background: transparent; transition: background .12s; }
.agent-resizer:hover::after, .agent-panel.resizing .agent-resizer::after { background: var(--accent); }
.agent-panel.resizing { transition: none; user-select: none; }
body.agent-resizing { cursor: col-resize; user-select: none; }
body.agent-resizing iframe { pointer-events: none; }

/* Side by side: the page gives up the panel's width instead of being covered. */
html.agent-split body { margin-right: var(--agent-w, 440px); }
html.agent-split .item-dialog { margin-right: calc(var(--agent-w, 440px) + 16px); }
.agent-toggle { white-space: nowrap; }
.agent-toggle:not(:empty):not([title^="Assistant"]) { width: auto; border-radius: 23px; padding: 0 14px; font-size: 13px; }

/* The pop-out window: the panel is the whole page. */
body.agent-standalone { margin: 0; background: var(--panel); }
body.agent-standalone .agent-panel { position: static; width: auto !important; max-width: none; height: 100vh; transform: none; box-shadow: none; border-left: 0; }