/* Global sidebar Bot Sessions list — UI Phase A
   (UNIFIED_BOT_ARCHITECTURE.md §0.3). Minimal styling; intentionally
   light so the look can be tightened in Phase B alongside sort/search. */

/* Tight pass (owner ask 2026-05-20): the Bots section is the spine of
   the rail; trim every gap that doesn't help. */
.bot-sessions-section { margin: 2px -6px 0; }  /* raise + bleed out of sidebar-nav's 6px horizontal padding → rows (incl. the .is-current fill) hit the sidebar edges */

.bot-sessions-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 10px 8px 16px;  /* compensate the -6px bleed (left 16=10+6) + lift the header off the first row (bottom 8) */
  color: var(--text-dim);
  font-size: 0.66rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Plain section label — the header no longer doubles as a link. The
   boxed title-pill + tiny external-link icon was retired 2026-06-09
   (owner: "kind of ass"); /my-bots is a first-class nav item now. */
.bot-sessions-label {
  opacity: 0.55;
}

/* Header right-side cluster: filter icon + "+" New bot. They share
   space so the header never grows past one row. */
.bot-sessions-header-actions {
  display: flex; align-items: center; gap: 2px;
  opacity: 0.55;  /* the icon-only filter button keeps the dim look */
}

.bot-sessions-iconbtn {
  background: transparent;
  border: 0;
  color: var(--text-dim);
  padding: 4px 6px;
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
  opacity: 0.7;
  display: inline-flex; align-items: center; justify-content: center;
}
.bot-sessions-iconbtn:hover,
.bot-sessions-iconbtn[aria-expanded="true"] {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--text);
  opacity: 1;
}
.bot-sessions-iconbtn svg { width: 15px; height: 15px; display: block; }

/* .bot-sessions-new (the header "+") removed 2026-05-21 — "New bot" is now
   its own nav-item tab above the bots list; the header keeps only the filter. */

/* ── Inline filter panel (lives in the sidebar flow, below the header) ──
   Replaces the old body-level fixed popup. Two rows: Status + Sort by.
   Toggled open/closed by the sliders icon button. */
.bot-sessions-filter-inline {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 2px 10px 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
  background: color-mix(in srgb, var(--accent) 3%, transparent);
}
/* Guarantee [hidden] hides even when display:flex would win the cascade */
.bot-sessions-filter-inline[hidden] { display: none !important; }
.bot-sessions-filter-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px 6px 6px;
}
.bot-sessions-filter-label {
  color: var(--text-dim);
  font-size: 0.72rem;
  font-weight: 600;
}
.bot-sessions-filter-opts {
  display: flex; flex-wrap: wrap; gap: 4px;
}
.bot-sessions-filter-opt {
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
  color: var(--text);
  font: inherit;
  font-size: 0.74rem;
  padding: 3px 8px;
  border-radius: 999px;
  cursor: pointer;
}
.bot-sessions-filter-opt:hover {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}
.bot-sessions-filter-opt.is-on {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  border-color: var(--accent);
  color: var(--text);
  font-weight: 600;
}

/* Search + sort controls REMOVED (owner ask 2026-05-20). Old
   .bot-sessions-controls / .bot-sessions-search / .bot-sessions-sort
   rules deleted — recency-only scroll-to-find is the entire UX. */

.bot-sessions-list {
  display: flex;
  flex-direction: column;
  gap: 0;                          /* rows are flush; bot-view parity */
  padding: 0 0 8px;                /* no horizontal pad → row edge-to-edge */
  /* No max-height / overflow-y here — the outer .sidebar-nav already
     scrolls; a nested scroller in the same column gave the user two
     scrollbars side-by-side (owner flagged 2026-05-20). The list grows
     inline and the global rail handles overflow. */
}

/* Single-line row mirroring .session-item in bot_builder.html: leading
   green-or-hollow dot, name, hover-revealed ⋯. The previous two-line
   layout with a "2d • live" subtitle was dropped at owner request — too
   noisy in the global rail.

   Selected-row highlight now lives on the WRAPPER (.bot-session-row-wrap)
   so the orange accent reaches the panel's right edge and includes the
   ⋯ menu button (owner ask 2026-05-20). The <a> row itself only carries
   text/padding; bg + left border come from .is-current on the wrap. */
.bot-session-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 6px 12px;        /* tight pass */
  border-radius: 0;
  color: var(--text);
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 500;
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}

/* Leading status dot — filled green when the bot is live, hollow when off.
   Replaces the prior "is-active sets a green LEFT border" treatment; the
   dot is enough signal and frees the left border for the selected-row
   accent above. */
/* 5-state lifecycle dot (sessions_sidebar.js → dotState):
     .is-off     — bot isn't deployed; rendered as an invisible
                   placeholder so row text stays aligned
     .is-armed   — green; active, idle, watching for entry
     .is-engaged — amber pulse; placed an order / holding contracts
     .is-won     — purple; last cycle resolved profitably
     .is-lost    — red; last cycle lost (while in cooldown, or one-shot)
   The base rule sets size/shape only — every state explicitly paints
   its own border/background so no class can leak between states. */
.bot-session-dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1.5px solid transparent;
  background: transparent;
  box-sizing: border-box;
}
.bot-session-dot.is-off {
  /* No dot — invisible placeholder preserves the leading 8px so names
     stay vertically aligned with the live rows above/below. */
  border-color: transparent;
  background: transparent;
}
.bot-session-dot.is-armed {
  border-color: #0E6B52;
  background: #0E6B52;
  box-shadow: 0 0 0 3px rgba(14, 107, 82, .15);
}
/* Amber, slow-pulse — the bot has placed an order or is holding
   contracts the user may need to sell or settle on. Pulse rate matches
   the win/lost states so the family reads as "active state changes". */
.bot-session-dot.is-engaged {
  border-color: #92600A;
  background: #92600A;
  box-shadow: 0 0 0 3px rgba(146, 96, 10, .18);
  animation: bot-session-dot-pulse-amber 2.4s ease-in-out infinite;
}
/* Purple — last cycle won. Static (no pulse): it's a "good news, sit
   tight" state and shouldn't compete for attention. */
.bot-session-dot.is-won {
  border-color: #53489B;
  background: #53489B;
  box-shadow: 0 0 0 3px rgba(83, 72, 155, .18);
}
/* Amber, steady — the account's daily-loss guard paused new entries
   until midnight UTC (Safety plan S0-5). Informational, not an alarm:
   no pulse, so it reads calmer than engaged/lost. */
.bot-session-dot.is-capped {
  border-color: #7A5A10;
  background: #7A5A10;
  box-shadow: 0 0 0 3px rgba(122, 90, 16, .18);
}
/* Red — last cycle lost OR last evaluator errored. Pulses to draw the
   eye; this is the only state that genuinely needs user attention. */
.bot-session-dot.is-lost {
  border-color: #B3261E;
  background: #B3261E;
  box-shadow: 0 0 0 3px rgba(179, 38, 30, .18);
  animation: bot-session-dot-pulse-red 2.4s ease-in-out infinite;
}
@keyframes bot-session-dot-pulse-amber {
  0%, 100% { box-shadow: 0 0 0 3px rgba(146, 96, 10, .18); }
  50%      { box-shadow: 0 0 0 5px rgba(146, 96, 10, .35); }
}
@keyframes bot-session-dot-pulse-red {
  0%, 100% { box-shadow: 0 0 0 3px rgba(179, 38, 30, .18); }
  50%      { box-shadow: 0 0 0 5px rgba(179, 38, 30, .35); }
}
@media (prefers-reduced-motion: reduce) {
  .bot-session-dot.is-engaged,
  .bot-session-dot.is-lost { animation: none; }
}

.bot-session-name {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bot-sessions-loading {
  padding: 4px 12px 6px;             /* tight pass */
  color: var(--text-dim);
  font-size: 0.74rem;
}
/* Empty state: icon + message. No "New bot" button — the dedicated
   "New bot" tab at the top of the sidebar already covers that. */
.bot-sessions-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 20px 12px 22px;
  text-align: center;
}
.bot-sessions-empty-icon {
  opacity: .25;
  line-height: 0;
}
.bot-sessions-empty-text {
  color: var(--text-dim);
  font-size: 0.78rem;
  line-height: 1.4;
}

/* Defensive: some browsers' UA stylesheets apply [hidden]{display:none}
   WITHOUT !important, letting our display:flex override it and keeping the
   empty div visible even when element.hidden = true. Plug the gap here so
   the sidebar empty state stays hidden when bots are present. */
.bot-sessions-empty[hidden] { display: none !important; }

/* ── Phase C: folders ──────────────────────────────────────────────
   Folders are collapsible sections inside the list. Each row gets a
   hover-revealed "⋯" button that opens a floating move menu. */

.bot-session-row-wrap {
  position: relative;
  display: flex;
  align-items: stretch;
  border-left: 2px solid transparent;
  transition: background .1s, border-left-color .15s;
}
.bot-session-row-wrap:hover {
  background: color-mix(in srgb, var(--accent) 5%, transparent);
}
.bot-session-row-wrap.is-current {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border-left-color: var(--accent);
}
.bot-session-row-wrap .bot-session-row { flex: 1 1 auto; min-width: 0; }

.bot-session-menu-btn {
  flex: 0 0 auto;
  align-self: center;
  background: transparent;
  border: 0;
  color: var(--text-dim);
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  margin-right: 4px;
  border-radius: 4px;
  /* Visible on touch by DEFAULT — first-tap-reveals-then-second-tap was
     the bug owner hit on mobile. Desktop keeps the hover-reveal via the
     @media (hover:hover) block below. */
  opacity: .55;
  transition: opacity .12s ease, background .12s, color .12s;
}
.bot-session-menu-btn:hover {
  background: color-mix(in srgb, var(--text) 10%, transparent);
  color: var(--text);
  opacity: 1;
}
.bot-session-row-wrap.is-current .bot-session-menu-btn { opacity: .8; }
/* Desktop hover-reveal — fingers don't have :hover, so this rule never
   applies on touch (where the button stays visible above). */
@media (hover: hover) {
  .bot-session-menu-btn { opacity: 0; }
  .bot-session-row-wrap:hover .bot-session-menu-btn,
  .bot-session-menu-btn:focus,
  .bot-session-row-wrap.is-current .bot-session-menu-btn { opacity: .65; }
  .bot-session-menu-btn:hover { opacity: 1; }
}

.bot-sessions-folder { margin: 2px 0; }
.bot-sessions-folder-header {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 2px 4px;
}
.bot-sessions-folder-toggle {
  flex: 1 1 auto;
  min-width: 0;
  background: transparent;
  border: 0;
  color: var(--text);
  text-align: left;
  font: inherit;
  font-size: 0.78rem;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.bot-sessions-folder-toggle:hover {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.bot-sessions-folder-chev {
  width: 12px;
  flex: 0 0 12px;
  text-align: center;
  color: var(--text-dim);
  font-size: 0.7rem;
}
.bot-sessions-folder-name {
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 600;
}
.bot-sessions-folder-count {
  color: var(--text-dim);
  font-size: 0.7rem;
  font-weight: 500;
  padding: 0 4px;
}
.bot-sessions-folder-rename,
.bot-sessions-folder-delete {
  background: transparent;
  border: 0;
  color: var(--text-dim);
  font: inherit;
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  opacity: 0;
  transition: opacity .12s ease;
}
.bot-sessions-folder-header:hover .bot-sessions-folder-rename,
.bot-sessions-folder-header:hover .bot-sessions-folder-delete,
.bot-sessions-folder-rename:focus,
.bot-sessions-folder-delete:focus { opacity: 1; }
.bot-sessions-folder-rename:hover,
.bot-sessions-folder-delete:hover {
  background: color-mix(in srgb, var(--text) 10%, transparent);
  color: var(--text);
}
.bot-sessions-folder-list {
  padding-left: 12px;            /* visual nesting */
  display: flex;
  flex-direction: column;
  gap: 1px;
}

/* .bot-sessions-new-folder rules removed 2026-05-21 — the bottom
   "+ New folder" button was dropped at owner request. Folder creation
   stays available via the per-row ⋯ menu's "+ New folder…" option. */

/* Floating move-to-folder menu (positioned in JS, body-level). */
.bot-sessions-move-menu {
  position: fixed;
  z-index: 9999;
  min-width: 200px;
  max-width: 260px;
  max-height: 60vh;
  overflow-y: auto;
  background: var(--surface, #FFFDF8);
  border: 1px solid color-mix(in srgb, var(--text) 18%, transparent);
  border-radius: 8px;
  box-shadow: 0 6px 24px rgba(26,24,19,.14);
  padding: 4px;
}
.bot-sessions-move-menu-label {
  color: var(--text-dim);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 6px 10px 4px;
}
.bot-sessions-move-menu button {
  display: block;
  width: 100%;
  background: transparent;
  border: 0;
  color: var(--text);
  font: inherit;
  font-size: 0.85rem;
  text-align: left;
  padding: 6px 10px;
  border-radius: 4px;
  cursor: pointer;
}
.bot-sessions-move-menu button:hover {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}
.bot-sessions-move-menu-sep {
  height: 1px;
  background: color-mix(in srgb, var(--text) 12%, transparent);
  margin: 4px 6px;
}

/* Destructive action (Delete) — red. Mirrors the bot builder's old
   .session-menu .danger button (Phase E2 deleted the in-page menu;
   the action now lives here). */
.bot-sessions-move-menu .bot-sessions-menu-danger {
  color: #8C1D17;
}
.bot-sessions-move-menu .bot-sessions-menu-danger:hover {
  background: color-mix(in srgb, #B3261E 14%, transparent);
  color: #8C1D17;
}

/* Filter icon badge — small accent dot when filter ≠ default (active + recency).
   Positioned in the top-right corner of the icon button so it's visible but subtle. */
.bot-sessions-iconbtn.is-filtered { position: relative; }
.bot-sessions-iconbtn.is-filtered::after {
  content: '';
  position: absolute;
  top: 1px; right: 1px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
}

/* "Show active bots" reset link — appears inside the archived-filter empty state.
   Keeps the robot illustration reserved for the genuine first-use empty state. */
.bot-sessions-filter-reset {
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  color: var(--accent);
  font: inherit;
  font-size: 0.74rem;
  padding: 4px 12px;
  border-radius: 999px;
  cursor: pointer;
  margin-top: 4px;
}
.bot-sessions-filter-reset:hover {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

/* Kind marker on classic rows in the merged bots list — chat bots are
   the unmarked default; classic rows carry a small dim pill. */
.bot-session-kind {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 0.58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-dim, #8b8fa3);
  border: 1px solid var(--border, rgba(26, 24, 19, .10));
  background: rgba(26, 24, 19, .03);
  padding: 1px 6px;
  border-radius: 9px;
}