/* ================================================================
   Shared sidebar pane — used by session (chat) and script pages.
   Both pages use the same .sidebar-pane structure, .sp-item cards,
   action buttons, and name-edit input.
   ================================================================ */

/* ── Sidebar pane (slide-out, fixed left) ── */
.sidebar-pane-backdrop { display: none; }

.sidebar-pane {
  position: fixed;
  top: var(--header-h, 45px);
  left: 0;
  width: var(--sidebar-w, 200px);
  height: calc(100vh - var(--header-h, 45px) - var(--footer-h, 30px));
  background: var(--surface-transparent);
  border-right: 1px solid var(--border);
  z-index: 201;
  transform: translateX(-100%);
  transition: transform 0.25s ease;
  display: flex;
  flex-direction: column;
}
.sidebar-pane.open { transform: translateX(0); }

/* ── Header ── */
.sidebar-pane-header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.5rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.sidebar-pane-header h2 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--accent);
  flex: 1;
  margin: 0;
}
.sidebar-pane-header .sp-close {
  background: none !important;
  border: none !important;
  color: var(--muted);
  font-size: 1.2rem;
  cursor: pointer;
  padding: 0 0.3rem !important;
}
.sidebar-pane-header .sp-close:hover { color: var(--text); }
.sidebar-pane-header .sp-count {
  font-size: 0.72rem;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.05rem 0.45rem;
}

/* ── Action buttons (+ New … / Delete All) ── */
.sidebar-pane-actions {
  display: flex;
  gap: 0.3rem;
  padding: 0.4rem 0.5rem;
  border-bottom: 1px solid var(--divider);
  flex-shrink: 0;
}
.sidebar-pane-actions a,
.sidebar-pane-actions button {
  flex: 1;
  font-size: 0.65rem !important;
  padding: 0.3rem 0.3rem !important;
  border-radius: 5px !important;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  word-break: break-word;
}
.sp-new-btn {
  background: var(--accent) !important;
  color: var(--bg) !important;
  border: none !important;
  font-weight: 700;
}
.sp-new-btn:hover { opacity: 0.85; }
.sp-delete-all-btn {
  background: none !important;
  border: 1px solid var(--border) !important;
  color: var(--error) !important;
}
.sp-delete-all-btn:hover { background: var(--surface-hover) !important; }
.sp-delete-all-btn.verifying {
  background: var(--error) !important;
  color: var(--bg) !important;
  font-weight: 700;
}
.sp-delete-all-btn.deleting {
  animation: pulse-delete 1.2s ease-in-out infinite;
}
@keyframes pulse-delete {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 1; }
}

/* ── Search row ── one substring input above the session list */
.sp-search-row {
  position: relative;
  padding: 0.35rem 0.6rem 0.45rem;
  border-bottom: 1px solid var(--divider);
}
.sp-search-input {
  width: 100%;
  padding: 0.35rem 1.8rem 0.35rem 0.55rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 0.8rem;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s;
}
.sp-search-input::placeholder { color: var(--muted); }
.sp-search-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-dim);
}
.sp-search-clear {
  position: absolute;
  right: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: 0;
  color: var(--muted);
  font-size: 1rem;
  cursor: pointer;
  padding: 0 0.25rem;
  line-height: 1;
}
.sp-search-clear:hover { color: var(--error); }

/* ── Scrollable list ── */
.sidebar-pane-list {
  flex: 1;
  overflow-y: auto;
  padding: 0.3rem 0;
}

/* ── Item card ── */
.sp-item {
  display: flex;
  flex-direction: column;
  padding: 0.4rem 0.5rem;
  cursor: pointer;
  border-bottom: 1px solid var(--divider);
  transition: background 0.1s;
}
.sp-item:hover { background: var(--surface-hover); }
.sp-item.active { background: var(--accent-dim); }

.sp-item .sp-name {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sp-item .sp-meta {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.15rem;
  margin-bottom: 0.15rem;
  font-size: 0.68rem;
  color: var(--muted);
  flex-wrap: nowrap;
  white-space: nowrap;
  overflow: hidden;
}

/* ── Action buttons (rename, share, download, delete) ── */
.sp-item .sp-actions {
  display: flex;
  gap: 0.2rem;
  margin-left: auto;
  opacity: 0.5;
  transition: opacity 0.15s;
  flex-shrink: 0;
}
.sp-item:hover .sp-actions { opacity: 1; }
.sp-item .sp-action-btn {
  background: none !important;
  border: none !important;
  color: var(--muted);
  font-size: 0.75rem;
  cursor: pointer;
  padding: 0.1rem 0.3rem !important;
  border-radius: 3px !important;
}
.sp-item .sp-action-btn:hover { color: var(--accent); background: var(--accent-dim) !important; }
.sp-item .sp-action-btn.sp-delete:hover { color: var(--error); background: var(--error-dim) !important; }

/* ── Inline name edit ── */
.sp-name-input {
  background: var(--bg);
  border: 1px solid var(--accent);
  border-radius: 4px;
  color: var(--text);
  font-family: inherit;
  font-size: 0.78rem;
  padding: 0.15rem 0.4rem;
  width: 100%;
  outline: none;
}

/* ── Token bar (sessions only, but defined here to share) ── */
/* Per-session CDU, read from cdu_ledger. Sits directly under the token
   bar and reads as its subtotal: same left edge, smaller, dimmer.
   The bar above plots the same CDU this line names, so the two agree
   by construction: the bar gives the proportion and the total, the
   line gives the split. Both read cdu_ledger. */
.sp-cdu-line {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  margin-top: 0.15rem;
  font-size: 0.68rem;
  line-height: 1.3;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
/* Earth Engine picks up the same green the usage chart gives EE, so the
   two surfaces agree about which colour means which system. */
.sp-cdu-ee { color: var(--syntax-green); }
.sp-cdu-sep { opacity: 0.35; }
.sp-cdu-unit { opacity: 0.55; margin-left: 0.1rem; }

/* Session spend, as a proportional bar. Two segments, because the
   question this answers is "what did this session cost, and how much
   of that was Earth Engine" -- a split that the previous token bar
   could not show at all, since tokens only exist on the LLM side.
   The colours are the ones EE and the LLM already carry on the usage
   chart and the breakdown line below, so one colour means one system
   across every surface. */
.sp-cdu-bar {
  display: flex;
  align-items: center;
  height: 0.5rem;
  border-radius: 2px;
  background: var(--divider);
  overflow: hidden;
  width: 100%;
  margin-top: 0.2rem;
  position: relative;
}
.sp-cdu-bar .cdu-seg { height: 100%; min-width: 1px; }
.sp-cdu-bar .cdu-seg.cdu-llm { background: var(--syntax-blue); }
.sp-cdu-bar .cdu-seg.cdu-ee  { background: var(--syntax-green); }
/* Zero spend: hollow. The outline keeps the bar's shape, so a free
   session reads as "0", not as a bar that failed to load. */
.sp-cdu-bar.sp-cdu-bar-empty {
  background: transparent;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--muted) 70%, transparent);
}
.sp-cdu-bar-label {
  font-size: 0.5rem;
  color: var(--muted);
  margin-left: 0.3rem;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ── New-item prompt (inline form) ── */
.sp-name-prompt {
  padding: 0.4rem 0.5rem;
  border-bottom: 1px solid var(--divider);
  display: none;
  background: var(--accent-dim);
}
.sp-name-prompt.visible { display: block; }
.sp-name-prompt label {
  font-size: 0.6rem;
  color: var(--muted);
  display: block;
  margin-bottom: 0.2rem;
}
.sp-prompt-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}
.sp-prompt-row input {
  flex: 1;
  min-width: 0;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  font-family: inherit;
  font-size: 0.7rem;
  padding: 0.2rem 0.3rem;
  outline: none;
}
.sp-prompt-row input:focus { border-color: var(--accent); }
.sp-prompt-row button {
  font-size: 0.6rem !important;
  padding: 0.2rem 0.4rem !important;
  border-radius: 4px !important;
  cursor: pointer;
}
.sp-prompt-create {
  background: var(--accent) !important;
  color: var(--bg) !important;
  border: none !important;
  font-weight: 700;
}
.sp-prompt-cancel {
  background: none !important;
  border: 1px solid var(--border) !important;
  color: var(--muted) !important;
}

/* ── Mobile: overlay mode ── */
@media (max-width: 768px) {
  .sidebar-pane { width: 200px; }
  .sidebar-pane-backdrop {
    display: block;
    position: fixed;
    top: var(--header-h, 45px);
    left: 0; right: 0; bottom: 0;
    background: var(--backdrop-overlay);
    z-index: 200;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
  }
  .sidebar-pane-backdrop.open { opacity: 1; pointer-events: auto; }
}
@media (max-width: 480px) {
  .sidebar-pane { width: 85vw; max-width: 280px; }
}