/* ========================================================================
   PURSUIT — AGENT PANEL (Drop 3, §5)
   Floating, movable, resizable overlay. Furniture, not a route: mounted
   in its own React root outside the app's render tree; app re-renders
   and navigation can never unmount it. Only explicit close/collapse
   dismisses. Position/size/collapse persisted; draft + history + scroll
   survive navigation because the component never unmounts.
   ======================================================================== */

/* Panel container (sibling of #root, never touched by the app). */
.agent-panel-layer { position: fixed; inset: 0; pointer-events: none; z-index: 900; }
.agent-panel-layer > * { pointer-events: auto; }

/* ---- window ---------------------------------------------------------- */
.agent-panel {
  position: fixed;
  display: flex; flex-direction: column;
  background: var(--card, #f9f9fa);
  border: 1px solid #ffffff;
  border-top: 1.5px solid #ffffff;
  border-radius: 16px;
  box-shadow: var(--shadow-xl, 0 24px 48px rgba(20,20,23,0.18));
  min-width: 320px; min-height: 280px;
  overflow: hidden;
}

.agent-panel-header {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px 10px 14px;
  cursor: grab; user-select: none;
  flex: 0 0 auto;
}
.agent-panel-header:active { cursor: grabbing; }
.agent-panel-title {
  font: 600 14px/1.2 var(--font-body, 'IBM Plex Sans', sans-serif);
  color: var(--foreground, #141417);
  display: flex; align-items: center; gap: 8px;
}
.agent-panel-title .icon-frame {
  width: 24px; height: 24px; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ps-primary-60, #eef0ff); color: var(--ps-primary-500, #4d5fff);
}
.agent-status-dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
.agent-status-dot.open       { background: var(--ps-secondary-500, #22a06b); }
.agent-status-dot.connecting { background: var(--ps-tertiary-500, #e5a300); }
.agent-status-dot.closed,
.agent-status-dot.stub       { background: var(--ps-neutral-400, #a4a4a8); }
.agent-status-label {
  font: 400 11px/1 var(--font-mono, 'IBM Plex Mono', monospace);
  color: var(--muted-foreground, #6f6f76);
}
.agent-panel-header-btns { margin-left: auto; display: flex; gap: 4px; }
.agent-hbtn {
  width: 26px; height: 26px; border: none; border-radius: 6px;
  background: transparent; color: var(--muted-foreground, #6f6f76);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.agent-hbtn:hover { background: var(--ps-neutral-150, #e5e5e6); color: var(--foreground, #141417); }
.agent-hbtn.active { background: var(--ps-primary-60, #eef0ff); color: var(--ps-primary-500, #4d5fff); }

/* ---- messages -------------------------------------------------------- */
.agent-panel-messages {
  flex: 1 1 auto; overflow-y: auto;
  padding: 4px 14px 12px;
  display: flex; flex-direction: column; gap: 10px;
  background: var(--background, #f2f2f3);
  border-top: 1px solid var(--ps-neutral-150, #e5e5e6);
}
.agent-msg-user {
  align-self: flex-end; max-width: 85%;
  background: var(--ps-primary-60, #eef0ff);
  color: var(--foreground, #141417);
  border: 1px solid #ffffff; border-top: 1.5px solid #ffffff;
  border-radius: 10px; padding: 8px 12px;
  font: 400 13px/1.5 var(--font-body, 'IBM Plex Sans', sans-serif);
  white-space: pre-wrap; overflow-wrap: break-word;
  margin-top: 6px;
}
.agent-msg-assistant {
  align-self: stretch; max-width: 100%;
  font: 400 13px/1.55 var(--font-body, 'IBM Plex Sans', sans-serif);
  color: var(--foreground, #141417);
  white-space: pre-wrap; overflow-wrap: break-word;
}
.agent-msg-assistant p { margin: 0 0 8px; }
.agent-msg-assistant p:last-child { margin-bottom: 0; }

.agent-seg-thinking {
  font: 400 12px/1.5 var(--font-body, 'IBM Plex Sans', sans-serif);
  color: var(--muted-foreground, #6f6f76); font-style: italic;
  border-left: 2px solid var(--ps-neutral-200, #d6d6d8);
  padding: 2px 0 2px 10px; margin: 2px 0;
}
.agent-seg-step {
  display: flex; align-items: center; gap: 8px;
  background: var(--card, #f9f9fa);
  border: 1px solid #ffffff; border-top: 1.5px solid #ffffff;
  border-radius: 8px; padding: 6px 10px;
  font: 400 12px/1.3 var(--font-body, 'IBM Plex Sans', sans-serif);
  color: var(--muted-foreground, #6f6f76);
}
.agent-seg-step .step-cmd {
  font: 500 12px/1.3 var(--font-mono, 'IBM Plex Mono', monospace);
  color: var(--foreground, #141417);
}
.agent-seg-step.error { color: var(--destructive, #e7000b); }
.agent-seg-step svg { flex: 0 0 auto; }

.agent-chip-record {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--card, #f9f9fa);
  border: 1px solid #ffffff; border-top: 1.5px solid #ffffff;
  border-radius: 999px; padding: 1px 9px 1px 7px; margin: 0 1px;
  font: 500 12px/1.5 var(--font-body, 'IBM Plex Sans', sans-serif);
  color: var(--ps-primary-500, #4d5fff);
  cursor: pointer; vertical-align: baseline;
  box-shadow: var(--shadow-xs, 0 1px 2px rgba(20,20,23,0.04));
}
.agent-chip-record:hover { background: var(--ps-primary-60, #eef0ff); }

.agent-msg-error {
  font: 400 12px/1.5 var(--font-body, 'IBM Plex Sans', sans-serif);
  color: var(--destructive, #e7000b);
  background: var(--destructive-tint, #fef2f3);
  border-radius: 8px; padding: 8px 12px;
}
.agent-empty {
  margin: auto; text-align: center; max-width: 240px;
  color: var(--muted-foreground, #6f6f76);
  font: 400 13px/1.5 var(--font-body, 'IBM Plex Sans', sans-serif);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}

/* typing indicator */
.agent-typing { display: inline-flex; gap: 3px; padding: 4px 0; }
.agent-typing span {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--ps-neutral-400, #a4a4a8);
  animation: agent-typing-bounce 1.2s infinite;
}
.agent-typing span:nth-child(2) { animation-delay: 0.15s; }
.agent-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes agent-typing-bounce { 0%, 60%, 100% { opacity: 0.35; } 30% { opacity: 1; } }

/* ---- composer -------------------------------------------------------- */
.agent-panel-composer {
  flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--ps-neutral-150, #e5e5e6);
  background: var(--card, #f9f9fa);
}
.agent-attach {
  flex: 1 1 100%; display: flex; align-items: center; gap: 6px;
  background: var(--ps-primary-60, #eef0ff);
  border: 1px solid #ffffff; border-top: 1.5px solid #ffffff;
  border-radius: 8px; padding: 4px 6px 4px 10px;
  font: 400 12px/1.4 var(--font-body, 'IBM Plex Sans', sans-serif);
  color: var(--foreground, #141417);
}
.agent-attach svg { color: var(--ps-primary-500, #4d5fff); flex: 0 0 auto; }
.agent-attach-label { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agent-attach .agent-hbtn { width: 22px; height: 22px; }
.agent-attach-note {
  display: flex; align-items: center; gap: 5px;
  font: 500 11px/1.2 var(--font-body, 'IBM Plex Sans', sans-serif);
  color: var(--ps-primary-500, #4d5fff);
  margin-bottom: 4px;
}
.agent-panel-input {
  flex: 1 1 auto; resize: none; max-height: 120px;
  border: 1px solid #ffffff; border-top: 1.5px solid #ffffff;
  border-radius: 8px; padding: 8px 10px;
  background: var(--background, #f2f2f3);
  font: 400 13px/1.45 var(--font-body, 'IBM Plex Sans', sans-serif);
  color: var(--foreground, #141417);
  outline: none;
}
.agent-panel-input:focus {
  border-color: var(--ps-primary-500, #4d5fff);
  box-shadow: 0 0 0 3px var(--ps-primary-75, #dfe3ff);
}
.agent-panel-send {
  flex: 0 0 auto; width: 34px; height: 34px;
  border: 1px solid #ffffff; border-top: 1.5px solid #ffffff;
  border-radius: 8px; cursor: pointer;
  background: var(--ps-primary-500, #4d5fff); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
}
.agent-panel-send:hover { background: var(--ps-primary-600, #3a4be0); }
.agent-panel-send:active { transform: translateY(1px); }
.agent-panel-send:disabled { opacity: 0.45; cursor: default; transform: none; }

/* ---- resize handle ---------------------------------------------------- */
.agent-panel-resize {
  position: absolute; right: 0; bottom: 0; width: 18px; height: 18px;
  cursor: nwse-resize; color: var(--ps-neutral-300, #c2c2c5);
  display: flex; align-items: flex-end; justify-content: flex-end;
  padding: 0 3px 3px 0;
}

/* ---- collapsed pill ---------------------------------------------------- */
.agent-pill {
  position: fixed;
  width: 44px; height: 44px; border-radius: 999px;
  background: var(--ps-primary-500, #4d5fff); color: #fff;
  border: 1px solid #ffffff; border-top: 1.5px solid #ffffff;
  box-shadow: var(--shadow-lg, 0 12px 24px rgba(20,20,23,0.14));
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.agent-pill:hover { background: var(--ps-primary-600, #3a4be0); }
.agent-pill:active { transform: translateY(1px); }

/* ---- confirm chips (export tier, §7) ------------------------------------ */
.agent-confirm-chip {
  flex: 1 1 100%; display: flex; align-items: center; gap: 8px;
  background: var(--card, #f9f9fa);
  border: 1px solid #ffffff; border-top: 1.5px solid #ffffff;
  border-radius: 8px; padding: 8px 10px;
  font: 400 12px/1.4 var(--font-body, 'IBM Plex Sans', sans-serif);
  color: var(--foreground, #141417);
  box-shadow: var(--shadow-sm, 0 2px 4px rgba(20,20,23,0.06));
}
.agent-confirm-chip > svg { color: var(--ps-tertiary-500, #e5a300); flex: 0 0 auto; }
.agent-confirm-summary { flex: 1 1 auto; }
.agent-confirm-run, .agent-confirm-cancel {
  flex: 0 0 auto; border-radius: 6px; padding: 4px 12px; cursor: pointer;
  font: 500 12px/1.2 var(--font-body, 'IBM Plex Sans', sans-serif);
}
.agent-confirm-run {
  background: var(--ps-primary-500, #4d5fff); color: #fff;
  border: 1px solid #ffffff; border-top: 1.5px solid #ffffff;
}
.agent-confirm-run:hover { background: var(--ps-primary-600, #3a4be0); }
.agent-confirm-run:active { transform: translateY(1px); }
.agent-confirm-cancel {
  background: transparent; color: var(--muted-foreground, #6f6f76);
  border: 1px solid var(--ps-neutral-200, #d6d6d8);
}
.agent-confirm-cancel:hover { background: var(--ps-neutral-150, #e5e5e6); }

/* ---- activity log --------------------------------------------------------- */
.agent-log-entry {
  display: flex; gap: 8px; align-items: flex-start;
  background: var(--card, #f9f9fa);
  border: 1px solid #ffffff; border-top: 1.5px solid #ffffff;
  border-radius: 8px; padding: 8px 10px;
}
.agent-log-entry.undone .agent-log-summary { text-decoration: line-through; color: var(--muted-foreground, #6f6f76); }
.agent-log-src {
  width: 22px; height: 22px; border-radius: 6px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
}
.agent-log-src.agent { background: var(--ps-primary-60, #eef0ff); color: var(--ps-primary-500, #4d5fff); }
.agent-log-src.user  { background: var(--ps-secondary-50, #e8f5ee); color: var(--ps-secondary-600, #1b7d52); }
.agent-log-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.agent-log-summary { font: 400 12.5px/1.4 var(--font-body, 'IBM Plex Sans', sans-serif); color: var(--foreground, #141417); }
.agent-log-meta { font: 400 11px/1.3 var(--font-body, 'IBM Plex Sans', sans-serif); color: var(--muted-foreground, #6f6f76); }
.agent-log-cmd { font-family: var(--font-mono, 'IBM Plex Mono', monospace); }

/* ---- "Ask about this" selection chip (agent/selection.js) --------------- */
.agent-ask-chip {
  position: fixed; z-index: 950; display: none;
  align-items: center; gap: 5px;
  background: var(--ps-primary-500, #4d5fff); color: #fff;
  border: 1px solid #ffffff; border-top: 1.5px solid #ffffff;
  border-radius: 999px; padding: 5px 12px 5px 10px;
  font: 500 12px/1 var(--font-body, 'IBM Plex Sans', sans-serif);
  box-shadow: var(--shadow-lg, 0 12px 24px rgba(20,20,23,0.14));
  cursor: pointer;
}
.agent-ask-chip:hover { background: var(--ps-primary-600, #3a4be0); }
.agent-ask-chip:active { transform: translateY(1px); }

/* ---- test mode: kill motion (handoff §8) ------------------------------- */
[data-test-mode] .agent-panel, [data-test-mode] .agent-panel * ,
[data-test-mode] .agent-pill {
  transition: none !important; animation: none !important;
}