/* TowerRunTray — floating draggable tray + minimized chip.
 *
 * Design goals:
 *   • Recognizable as "background work" — purple accent (matches Tower's
 *     ✨ BD Assistant palette).
 *   • Draggable header with grip handle; cursor changes to indicate grab.
 *   • Constrained max-height + internal scroll so multi-job stacks don't
 *     overflow the viewport.
 *   • Chip is single-row, ~180px wide, can sit anywhere without blocking
 *     much screen real estate.
 *   • Above modals (z-index 200002) so it stays visible during preview
 *     drafts; below very-top toasts (300000).
 */

.trt-root,
.trt-chip {
  position: fixed;
  z-index: 200002;
  font-family: "DM Sans", system-ui, sans-serif;
  color: #0d1c24;
  box-sizing: border-box;
  -webkit-user-select: none;
  user-select: none;
}

/* The HTML [hidden] attribute defaults to display:none, but our explicit
   display:flex / inline-flex below would override it. Force it back. */
.trt-root[hidden],
.trt-chip[hidden] {
  display: none !important;
}

.trt-root {
  width: 380px;
  max-width: calc(100vw - 16px);
  max-height: 80vh;
  background: #fff;
  border: 1px solid #e2e8ec;
  border-radius: 12px;
  box-shadow: 0 18px 48px rgba(13, 28, 36, 0.18), 0 4px 12px rgba(13, 28, 36, 0.06);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: opacity 0.15s ease;
}

.trt-root.trt-dragging,
.trt-chip.trt-dragging {
  box-shadow: 0 24px 64px rgba(13, 28, 36, 0.25);
  opacity: 0.96;
  transition: none;
}

/* ── Header (drag handle) ─────────────────────────────────────────────── */
.trt-hdr {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: linear-gradient(180deg, #f6f3fc 0%, #ede6f8 100%);
  border-bottom: 1px solid #e2dceb;
  cursor: grab;
  touch-action: none;
}
.trt-hdr.trt-dragging,
.trt-root.trt-dragging .trt-hdr {
  cursor: grabbing;
}
.trt-hdr-grip {
  font-size: 14px;
  color: #8a7aa8;
  letter-spacing: -1px;
  flex-shrink: 0;
  cursor: grab;
}
.trt-hdr-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #4a3a72;
  flex: 1;
  min-width: 0;
}
.trt-hdr-icon {
  font-size: 13px;
}
.trt-hdr-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.trt-hdr-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(74, 58, 114, 0.14);
  color: #4a3a72;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}
.trt-hdr-actions {
  display: inline-flex;
  gap: 4px;
}
.trt-hdr-btn {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
  color: #6a5a8a;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  padding: 0;
}
.trt-hdr-btn:hover {
  background: rgba(74, 58, 114, 0.10);
  color: #4a3a72;
}

/* ── Body (job stack) ─────────────────────────────────────────────────── */
.trt-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #fafbfc;
}
.trt-empty {
  padding: 24px 16px;
  text-align: center;
  font-size: 12px;
  color: #798b95;
  font-style: italic;
}

/* ── Job card ─────────────────────────────────────────────────────────── */
.trt-job {
  background: #fff;
  border: 1px solid #e2e8ec;
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 0.15s ease;
}
.trt-job[data-state="done"]   { border-color: #b8e0c4; background: #f6fbf7; }
.trt-job[data-state="failed"] { border-color: #f0c2bc; background: #fdf5f4; }

.trt-job-hdr {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  background: rgba(13, 28, 36, 0.02);
  border-bottom: 1px solid #ecf0f3;
}
.trt-job[data-state="done"]   .trt-job-hdr { background: rgba(56, 142, 60, 0.05); }
.trt-job[data-state="failed"] .trt-job-hdr { background: rgba(220, 80, 60, 0.05); }

.trt-job-collapse-btn {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: #798b95;
  background: transparent;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}
.trt-job-collapse-btn:hover { background: rgba(13, 28, 36, 0.06); color: #0d1c24; }

.trt-job-title {
  flex: 1;
  font-size: 12px;
  font-weight: 600;
  color: #0d1c24;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.trt-job-state-pill {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  background: rgba(74, 58, 114, 0.14);
  color: #4a3a72;
  flex-shrink: 0;
}
.trt-job-state-pill.is-done   { background: rgba(56, 142, 60, 0.14);  color: #2e7d32; }
.trt-job-state-pill.is-failed { background: rgba(220, 80, 60, 0.14);  color: #c62828; }

/* ── Canonical phase pill styles ─────────────────────────────────────────
   See PHASE_LABELS in run-tray.js — every active job's pill class includes
   `is-phase-<phase>` and we apply a distinct hue per phase so users can
   tell at a glance what kind of work is happening:
     - grey   = queued
     - blue   = network-bound (connecting/requesting/loading_context)
     - cyan   = remote read   (fetching — Hunter/Apify/Attio/dealContext)
     - purple = LLM reasoning (thinking)
     - orange = LLM output    (working — drafting/patching/writing)
     - pink   = remote write  (sending — Gmail/HeyReach/deploy/KV)
     - green  = wrapping up   (finalizing/done) */
.trt-job-state-pill.is-phase-queued          { background: rgba(120, 120, 120, 0.12); color: #555; }
.trt-job-state-pill.is-phase-loading_context { background: rgba(72, 116, 188, 0.14);  color: #2c4f8a; }
.trt-job-state-pill.is-phase-connecting      { background: rgba(72, 116, 188, 0.14);  color: #2c4f8a; }
.trt-job-state-pill.is-phase-requesting      { background: rgba(72, 116, 188, 0.14);  color: #2c4f8a; }
.trt-job-state-pill.is-phase-fetching        { background: rgba(40, 160, 180, 0.16);  color: #1d6f7d; }
.trt-job-state-pill.is-phase-thinking        { background: rgba(149, 100, 199, 0.18); color: #6f3fc7; }
.trt-job-state-pill.is-phase-working         { background: rgba(232, 159, 50, 0.18);  color: #a3680a; }
.trt-job-state-pill.is-phase-sending         { background: rgba(220, 90, 150, 0.16);  color: #a73572; }
.trt-job-state-pill.is-phase-finalizing      { background: rgba(56, 142, 60, 0.12);   color: #2e7d32; }
.trt-job-state-pill.is-phase-aborted         { background: rgba(160, 160, 160, 0.18); color: #555; }

/* Pulse animation on actively-progressing states so the user gets a
   subtle "still alive" signal. Keep it gentle (no scaling/movement that
   would draw the eye away from primary content). */
@keyframes trt-pill-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.6; }
}
.trt-job-state-pill.is-phase-loading_context,
.trt-job-state-pill.is-phase-connecting,
.trt-job-state-pill.is-phase-requesting,
.trt-job-state-pill.is-phase-fetching,
.trt-job-state-pill.is-phase-thinking,
.trt-job-state-pill.is-phase-working,
.trt-job-state-pill.is-phase-sending,
.trt-job-state-pill.is-phase-finalizing {
  animation: trt-pill-pulse 1.6s ease-in-out infinite;
}

.trt-job-actions {
  display: inline-flex;
  gap: 4px;
  flex-shrink: 0;
}
.trt-job-btn {
  height: 22px;
  padding: 0 8px;
  font-size: 11px;
  font-weight: 600;
  color: #4a4a4a;
  background: #fff;
  border: 1px solid #d3dae0;
  border-radius: 6px;
  cursor: pointer;
}
.trt-job-btn:hover:not(:disabled) {
  background: #f3f6f8;
  color: #0d1c24;
}
.trt-job-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.trt-job-summary {
  padding: 6px 10px 8px;
  font-size: 11px;
  color: #4a5a64;
  border-bottom: 1px solid #ecf0f3;
}
.trt-job[data-state="done"]   .trt-job-summary { color: #2e7d32; }
.trt-job[data-state="failed"] .trt-job-summary { color: #c62828; }

/* Agent label: shows which agent is doing the work
   (BD Assistant, Web Designer, Hunter, Apify, HeyReach, Gmail, …). */
.trt-job-agent {
  padding: 4px 10px 6px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #6a5a8a;
  background: rgba(74, 58, 114, 0.05);
  border-bottom: 1px solid #ecf0f3;
  display: flex;
  align-items: center;
  gap: 6px;
}
.trt-job-agent::before {
  content: "🤖";
  font-size: 11px;
  text-transform: none;
  letter-spacing: 0;
}

/* Mirror cards (jobs from other tabs) — read-only, marked visually. */
.trt-job-mirror {
  background: linear-gradient(180deg, #f8f9fb 0%, #f1f3f7 100%);
  border-style: dashed;
}
.trt-job-mirror .trt-job-hdr {
  background: rgba(120, 140, 165, 0.06);
}
.trt-mirror-icon {
  font-size: 12px;
  opacity: 0.75;
  flex-shrink: 0;
}
.trt-mirror-hint {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #798b95;
  flex-shrink: 0;
}
.trt-job-mirror[data-orphaned="true"] {
  background: linear-gradient(180deg, #fdf5f4 0%, #fae8e6 100%);
  border-color: #f0c2bc;
  border-style: solid;
}

.trt-job-body {
  max-height: 320px;
  overflow-y: auto;
}
.trt-job[data-collapsed="true"] .trt-job-body { display: none; }
.trt-job[data-collapsed="true"] .trt-job-summary { border-bottom: none; }

/* Inner TowerRunStream styling overrides — slim it down for tray context. */
.trt-job-body .trs-mount {
  padding: 0 !important;
  font-size: 11px;
}
.trt-job-body .trs-row {
  padding: 6px 10px;
  border-top: 1px solid #ecf0f3;
}
.trt-job-body .trs-row:first-child { border-top: none; }

/* ── Chip (minimized state) ───────────────────────────────────────────── */
.trt-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 10px;
  background: linear-gradient(180deg, #4a3a72 0%, #382c5c 100%);
  color: #fff;
  border: none;
  border-radius: 999px;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  box-shadow: 0 12px 32px rgba(74, 58, 114, 0.35), 0 2px 6px rgba(13, 28, 36, 0.10);
  cursor: grab;
  touch-action: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.trt-chip:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 36px rgba(74, 58, 114, 0.42), 0 3px 8px rgba(13, 28, 36, 0.12);
}
.trt-chip.trt-dragging {
  cursor: grabbing;
  transform: scale(1.04);
}
.trt-chip-icon { font-size: 14px; }
.trt-chip-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}
.trt-chip-spinner {
  width: 12px;
  height: 12px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: trt-spin 0.8s linear infinite;
  flex-shrink: 0;
}
@keyframes trt-spin { to { transform: rotate(360deg); } }

/* ── Responsive (mobile) ──────────────────────────────────────────────── */
@media (max-width: 540px) {
  .trt-root {
    width: calc(100vw - 16px) !important;
    left: 8px !important;
    right: 8px !important;
    max-height: 70vh;
  }
  /* Keep chip draggable + free-floating on mobile too. */
}