/* ==========================================================================
   components.css
   Combined global styles for all LightElement components.
   Auto-assembled from shared-styles.js, base components, and page components.
   ========================================================================== */


/* ==========================================================================
   @keyframes (deduplicated - each animation defined exactly once)
   ========================================================================== */

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes tag-appear {
  30% {
    transform: scale(1.05);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes slide-up {
  from {
    opacity: 0;
    transform: translateX(20px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes progress-shrink {
  from {
    width: 100%;
  }

  to {
    width: 0%;
  }
}

@keyframes toast-edge-trace-up {
  from {
    transform: scaleY(1);
  }

  to {
    transform: scaleY(0);
  }
}

@keyframes border-trace {
  from {
    stroke-dashoffset: 0;
  }

  to {
    stroke-dashoffset: 100;
  }
}

@keyframes slide-out {
  from {
    opacity: 1;
    transform: translateX(0);
  }

  to {
    opacity: 0;
    transform: translateX(20px);
  }
}

@keyframes pulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.4;
  }
}

@keyframes banner-enter {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse-live {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.4;
  }
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }

  100% {
    background-position: 200% 0;
  }
}

.skeleton {
  background: linear-gradient(90deg,
      rgba(255, 255, 255, 0.03) 25%,
      rgba(255, 255, 255, 0.08) 50%,
      rgba(255, 255, 255, 0.03) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: 4px;
}

[data-theme="light"] .skeleton {
  background: linear-gradient(90deg,
      rgba(0, 0, 0, 0.04) 25%,
      rgba(0, 0, 0, 0.08) 50%,
      rgba(0, 0, 0, 0.04) 75%);
  background-size: 200% 100%;
}


/* ==========================================================================
   GLOBAL SHARED STYLES (from shared-styles.js - unscoped)
   ========================================================================== */

/* --- resetStyles --- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* --- formStyles --- */

label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
}

label small {
  font-weight: normal;
  color: var(--color-text-muted, #64748b);
}

input,
select,
textarea {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: 0.375rem;
  background: var(--color-surface, #fff);
  color: var(--color-text, #1e293b);
  font-size: 0.875rem;
  font-family: var(--font-family);
  box-sizing: border-box;
}

input[type="checkbox"],
input[type="radio"] {
  width: auto;
}

/* Space between label text and input when input is inside the label */
label>input,
label>select,
label>textarea,
label>pai-combobox,
label>volume-tag-combobox {
  margin-top: 0.5rem;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--color-accent-primary, #6366f1);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

input:disabled,
select:disabled,
textarea:disabled {
  background: var(--color-surface-elevated, #f1f5f9);
  color: var(--color-text-muted, #64748b);
  cursor: not-allowed;
}

input::placeholder,
textarea::placeholder {
  font-family: var(--font-family);
  color: var(--color-text-muted, #94a3b8);
}

input[type="checkbox"],
input[type="radio"] {
  width: auto;
  margin-top: 0;
}

/* --- pageHeaderStyles --- */

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.page-header h1 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* --- pillAddStyles --- */

/* Pill-shaped "+" button that expands sideways on hover to reveal a label.
   Used in section headers (Add Stack / Add Model) and stack header (Add
   Model to stack). The label doesn't participate in layout until hover so
   the base footprint is compact and sits naturally next to the title. */
.pill-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2rem;
  min-width: 2rem;
  padding: 0 0.5rem;
  border: 1px solid color-mix(in srgb, var(--color-border, #e2e8f0) 80%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-surface-muted, #f1f5f9) 90%, transparent);
  color: var(--color-text-muted, #64748b);
  cursor: pointer;
  overflow: hidden;
  vertical-align: middle;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, gap 0.25s ease;
}

.pill-add:hover {
  background: var(--color-accent-primary, #6366f1);
  color: #fff;
  border-color: var(--color-accent-primary, #6366f1);
}

/* Section-header pill-adds ("Add Stack" / "Add Model") use a transparent fill
   and dashed border so they read as a creation affordance distinct from the
   solid stack/model cards below. The hover state uses theme dependent text color. */
.section-header .pill-add {
  background: transparent;
  border-style: dashed;
  border-width: 1px;
}

.section-header .pill-add:hover {
  color: var(--color-text, #e2e8f0);
}

.pill-add app-icon {
  flex-shrink: 0;
}

.pill-add-label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  max-width: 0;
  margin-left: 0;
  opacity: 0;
  transition: max-width 0.25s ease, margin-left 0.25s ease, opacity 0.15s ease 0.05s;
}

.pill-add:hover .pill-add-label,
.icon-toggle-btn:hover .pill-add-label,
.icon-toggle-btn:focus-visible .pill-add-label {
  max-width: 10rem;
  margin-left: 0.375rem;
  opacity: 1;
}

/* <list-toolbar> wraps the .page-toolbar markup that list pages used to
   inline directly inside .page-header. display:contents removes the host
   element's box so .page-toolbar stays a DIRECT flex child of .page-header —
   without it the per-page `.page-toolbar { flex: 1 }` /
   `.page-search { flex: 1; max-width: 22rem }` rules can't grow the search
   box and it collapses to its min-width (cramped vs. the inline pages). */
list-toolbar {
  display: contents;
}

/* Right-aligned action row inside a .page-header. Same reasoning as
   .icon-toggle-btn below: <list-toolbar> emits it for every module, so the
   base lives here and the older page-scoped copies just restate it. */
.page-toolbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  justify-content: flex-end;
  min-width: 0;
}

/* Compact icon-only toolbar button (Refresh, layout toggle, expand/collapse).
   Global because <list-toolbar> emits this markup for pages in any module;
   the list pages that predate it still carry an identical page-scoped copy,
   which wins on specificity and renders the same. */
.icon-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background: var(--color-surface, #0f172a);
  border: 1px solid var(--color-border, #334155);
  border-radius: 0.5rem;
  color: var(--color-text-muted, #64748b);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.icon-toggle-btn:hover:not(:disabled) {
  color: var(--color-accent-primary, #6366f1);
  border-color: var(--color-accent-primary, #6366f1);
}

.icon-toggle-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Expanding variant: stays a square in the toolbar row, then widens on
   hover/focus to reveal a .pill-add-label. For actions whose glyph can't
   carry the meaning on its own — two circular-arrow icons side by side read
   as one duplicated button until one of them names itself. */
.icon-toggle-btn.has-hover-label {
  width: auto;
  min-width: 2.25rem;
  padding-inline: 0;
  overflow: hidden;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease,
    padding-inline 0.25s ease;
}

.icon-toggle-btn.has-hover-label:hover:not(:disabled),
.icon-toggle-btn.has-hover-label:focus-visible {
  padding-inline: 0.625rem;
}

.icon-toggle-btn app-icon {
  flex-shrink: 0;
}

/* Icon-only buttons have no label to swap to "Reloading…", so the glyph
   itself carries the in-flight state. */
.icon-toggle-btn.is-loading app-icon {
  display: inline-flex;
  animation: spin 1s linear infinite;
}

/* --- formSectionStyles --- */

.form-section {
  background: var(--color-surface-elevated, #f8fafc);
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: 0.5rem;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.form-section h4 {
  margin: 0 0 1rem 0;
  font-size: 1rem;
}

.form-section p {
  color: var(--color-text-muted, #64748b);
  margin: 0 0 1rem 0;
  font-size: 0.875rem;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  align-items: start;
}

/* Footer row of the list editors */
.kv-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.kv-footer--atomic {
  justify-content: flex-start;
  margin-top: 0.5rem;
}

.atomic-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8rem;
  color: var(--color-text-muted, #64748b);
  cursor: pointer;
  user-select: none;
}

.atomic-toggle input[type="checkbox"] {
  width: 0.95rem;
  height: 0.95rem;
  margin: 0;
  accent-color: var(--color-accent-primary, #6366f1);
}

/* Toggle switch */
.toggle-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  user-select: none;
}

.toggle-switch input[type="checkbox"] {
  display: none;
}

.toggle-switch .toggle-track {
  position: relative;
  width: 2.25rem;
  height: 1.25rem;
  background: var(--color-border, #cbd5e1);
  border-radius: 9999px;
  transition: background 0.15s ease;
}

.toggle-switch input:checked+.toggle-track {
  background: var(--color-primary, #3b82f6);
}

.toggle-switch .toggle-track::after {
  content: '';
  position: absolute;
  top: 0.125rem;
  left: 0.125rem;
  width: 1rem;
  height: 1rem;
  background: white;
  border-radius: 50%;
  transition: transform 0.15s ease;
}

.toggle-switch input:checked+.toggle-track::after {
  transform: translateX(1rem);
}

/* Shared row-delete icon button: muted glyph, danger tint on hover.
   Used by secrets-panel rows and the agents settings integrations tab. */
.icon-row-delete-btn {
  background: transparent;
  border: 0;
  color: var(--color-text-muted, #94a3b8);
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 0.25rem;
}

.icon-row-delete-btn:hover {
  color: var(--color-danger, #ef4444);
  background: color-mix(in srgb, var(--color-danger, #ef4444) 10%, transparent);
}

/* ==========================================================================
   app-managed-path
   ========================================================================== */

app-managed-path {
  display: block;
}

app-managed-path .managed-path-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

app-managed-path .managed-path-row app-filesystem-select {
  flex: 1;
}

app-managed-path .managed-path-locked-input {
  flex: 1;
  background: var(--color-surface-elevated, #f8fafc);
  cursor: not-allowed;
}

app-managed-path .managed-path-btn {
  flex-shrink: 0;
  padding: 0.5rem 0.625rem;
  font-size: 0.875rem;
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: 0.375rem;
  background: var(--color-surface-muted, #f1f5f9);
  color: var(--color-text, #1e293b);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-family);
  box-sizing: border-box;
}

app-managed-path .managed-path-btn:hover {
  background: var(--color-border, #e2e8f0);
}

app-managed-path .managed-path-error {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  color: var(--color-danger, #ef4444);
  margin-top: 0.25rem;
}

app-managed-path .managed-path-resolving {
  font-size: 0.75rem;
  color: var(--color-text-muted, #64748b);
  margin-top: 0.25rem;
  font-style: italic;
}

/* ==========================================================================
   app-volume-mounts — typed mount list ("+ Add mount") and per-mount rows.
   Self-contained styling: this is a shared component dropped into pages
   (dev pods, workspaces, agents) that each scope their own `.pill-add`, so it
   can't borrow theirs — it ships its own add button + menu.
   ========================================================================== */

:is(app-volume-mounts, app-extra-volumes) .volume-mounts__recommended {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 0.5rem;
  margin-bottom: 0.75rem;
  cursor: pointer;
}

:is(app-volume-mounts, app-extra-volumes) .volume-mounts__recommended input[type="checkbox"] {
  grid-row: 1 / span 2;
  width: 1rem;
  height: 1rem;
  margin: 0;
  cursor: pointer;
}

:is(app-volume-mounts, app-extra-volumes) .volume-mounts__recommended .volume-mounts__recommended-text {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text, #1e293b);
}

:is(app-volume-mounts, app-extra-volumes) .volume-mounts__recommended small {
  grid-column: 2;
  font-size: 0.75rem;
  color: var(--color-text-muted, #64748b);
}

:is(app-volume-mounts, app-extra-volumes) .volume-mounts__slot {
  display: block;
  margin-top: 0.75rem;
}

:is(app-volume-mounts, app-extra-volumes) .volume-mounts__slot-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}

:is(app-volume-mounts, app-extra-volumes) .volume-mounts__slot-head .field-title-text {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text, #1e293b);
}

:is(app-volume-mounts, app-extra-volumes) .volume-mounts__slot-remove {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: none;
  border-radius: 0.25rem;
  background: transparent;
  color: var(--color-text-muted, #64748b);
  cursor: pointer;
}

:is(app-volume-mounts, app-extra-volumes) .volume-mounts__slot-remove:hover {
  background: color-mix(in srgb, var(--color-danger, #ef4444) 12%, transparent);
  color: var(--color-danger, #ef4444);
}

:is(app-volume-mounts, app-extra-volumes) .volume-mounts__add {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

:is(app-volume-mounts, app-extra-volumes) .volume-mounts__add-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.4rem 0.75rem;
  font-size: 0.8125rem;
  font-weight: 500;
  font-family: var(--font-family);
  border: 1px dashed var(--color-border, #cbd5e1);
  border-radius: 0.375rem;
  background: transparent;
  color: var(--color-text, #1e293b);
  cursor: pointer;
}

:is(app-volume-mounts, app-extra-volumes) .volume-mounts__add-btn:hover,
:is(app-volume-mounts, app-extra-volumes) .volume-mounts__add-btn[aria-expanded="true"] {
  border-color: var(--color-primary, #6366f1);
  color: var(--color-primary, #6366f1);
  background: color-mix(in srgb, var(--color-primary, #6366f1) 8%, transparent);
}

/* Eyeball that opens the mount-preview modal, next to the volume-tag field. */
:is(app-volume-mounts, app-extra-volumes) .volume-mounts__preview-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.4rem;
  border: 1px solid var(--color-border, #cbd5e1);
  border-radius: 0.375rem;
  background: transparent;
  color: var(--color-text-muted, #64748b);
  cursor: pointer;
  flex: 0 0 auto;
}

:is(app-volume-mounts, app-extra-volumes) .volume-mounts__preview-btn:hover {
  border-color: var(--color-primary, #6366f1);
  color: var(--color-primary, #6366f1);
  background: color-mix(in srgb, var(--color-primary, #6366f1) 8%, transparent);
}

:is(app-volume-mounts, app-extra-volumes) .volume-mounts__add-menu {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.375rem;
}

:is(app-volume-mounts, app-extra-volumes) .volume-mounts__add-choice {
  padding: 0.4rem 0.75rem;
  font-size: 0.8125rem;
  font-family: var(--font-family);
  border: 1px solid var(--color-border, #cbd5e1);
  border-radius: 0.375rem;
  background: var(--color-surface-muted, #f1f5f9);
  color: var(--color-text, #1e293b);
  cursor: pointer;
}

:is(app-volume-mounts, app-extra-volumes) .volume-mounts__add-choice:hover {
  border-color: var(--color-primary, #6366f1);
  background: color-mix(in srgb, var(--color-primary, #6366f1) 10%, transparent);
}

:is(app-volume-mounts, app-extra-volumes) .volume-mounts__warning {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0.25rem 0 0.5rem;
  padding: 0.55rem 0.7rem;
  font-size: 0.76rem;
  line-height: 1.45;
  color: var(--color-warning, #b45309);
  background: color-mix(in srgb, var(--color-warning, #f59e0b) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-warning, #f59e0b) 35%, transparent);
  border-radius: 0.375rem;
}

:is(app-volume-mounts, app-extra-volumes) .volume-mounts__warning app-icon {
  flex-shrink: 0;
  margin-top: 0.05rem;
}

/* Help text and form groups inside mount manager modal */
app-mount-manager .help-text {
  font-size: 0.75rem;
  color: var(--color-text-muted, #64748b);
  margin-top: 0.375rem;
}

app-mount-manager .form-group {
  margin-bottom: 1rem;
}

app-mount-manager .form-group:last-child {
  margin-bottom: 0;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
  margin-top: 1.5rem;
}

/* --- tableStyles --- */

.table-container {
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: 0.5rem;
  overflow: hidden;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

th,
td {
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--color-border, #e2e8f0);
}

th {
  font-weight: 600;
  color: var(--color-text-muted, #64748b);
  background: var(--color-surface-elevated, #f8fafc);
}

tbody tr:last-child td {
  border-bottom: none;
}

tbody tr:hover {
  background: var(--color-surface-elevated, #f8fafc);
}

/* --- stateStyles --- */

.loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem;
  color: var(--color-text-muted, #64748b);
}

.empty-state {
  text-align: center;
  padding: 3rem;
  color: var(--color-text-muted, #64748b);
}

.empty-state code {
  display: inline-block;
  background: var(--color-surface-elevated, #f1f5f9);
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.875rem;
}

/* --- dialogStyles --- */

dialog {
  padding: 0;
  border: 1px solid var(--color-border, #475569);
  border-radius: 0.5rem;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  max-width: 600px;
  width: 90%;
  background: var(--color-surface, #fff);
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
}

dialog::backdrop {
  background: rgba(0, 0, 0, 0.5);
}

.dialog-header {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--color-border, #e2e8f0);
}

.dialog-header h3 {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
}

.dialog-header p {
  margin: 0.25rem 0 0 0;
  font-size: 0.875rem;
  color: var(--color-text-muted, #64748b);
}

.dialog-body {
  padding: 1.5rem;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--color-border, #e2e8f0);
}


/* ==========================================================================
   app-detail-modal
   ========================================================================== */

app-detail-modal {
  display: contents;
}

.detail-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(0, 0, 0, 0.5);
  transition: opacity 0.2s;
}

.detail-modal-backdrop--light {
  background: rgba(0, 0, 0, 0.2);
}

.detail-modal {
  position: fixed;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transition: all 0.2s;
}

.detail-modal--half {
  top: 0;
  bottom: 0;
  left: 25%;
  right: 25%;
  align-items: center;
}

.detail-modal--full {
  top: 1rem;
  bottom: 1rem;
  left: 1rem;
  right: 1rem;
}

.detail-modal--side {
  top: 0;
  right: 0;
  bottom: 0;
  width: 46rem;
  max-width: 90vw;
}

.detail-modal__inner {
  pointer-events: auto;
  width: 100%;
  height: calc(100vh - 4rem);
  max-height: calc(100vh - 4rem);
  background: var(--color-surface, #0f172a);
  border: 1px solid var(--color-border, #475569);
  border-radius: 0.75rem;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: detail-fade-in 0.15s ease-out;
}

/* Full and side modes: fill available space */
.detail-modal--full .detail-modal__inner,
.detail-modal--side .detail-modal__inner {
  height: 100%;
  max-height: 100%;
}

.detail-modal--compact.detail-modal--half .detail-modal__inner {
  height: auto;
  max-height: calc(100vh - 4rem);
}

.detail-modal--compact.detail-modal--half .detail-modal__content {
  flex: 0 0 auto;
  overflow: visible;
}

.detail-modal--compact.detail-modal--side .detail-modal__content {
  flex: 1;
  overflow: hidden;
  min-height: 0;
}

.detail-modal__inner--side {
  border-radius: 0;
  border-right: none;
}

@keyframes detail-fade-in {
  from {
    opacity: 0;
    transform: translateY(0.25rem);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.detail-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid var(--color-border, #475569);
  background: var(--color-surface-elevated, #1e293b);
  flex-shrink: 0;
}

.detail-modal__header-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.detail-modal__icon {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: rgba(99, 102, 241, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-accent-primary, #6366f1);
}

.detail-modal__titles {
  min-width: 0;
}

.detail-modal__breadcrumb {
  font-size: 0.625rem;
  color: var(--color-text-muted, #94a3b8);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.125rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.detail-modal__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text, #f1f5f9);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.detail-modal__actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.detail-modal__action-btn {
  padding: 0.25rem;
  border-radius: 0.25rem;
  background: none;
  border: none;
  color: var(--color-text-muted, #94a3b8);
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.detail-modal__action-btn:hover {
  background: var(--color-surface-muted, #334155);
  color: var(--color-text, #f1f5f9);
}

.detail-modal__content {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* ==========================================================================
   app-sidebar
   ========================================================================== */

app-sidebar {
  display: flex;
  flex-direction: column;
}

.sidebar-container {
  width: 14rem;
  min-width: 14rem;
  height: 100%;
  background: var(--color-surface-elevated);
  border-right: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  transition: width 0.2s ease, min-width 0.2s ease;
  position: relative;
  flex-shrink: 0;
}

.sidebar-container.collapsed {
  width: 3.75rem;
  min-width: 3.75rem;
}

.sidebar-logo {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 1rem;
  overflow: hidden;
  white-space: nowrap;
  text-decoration: none;
  color: inherit;
}

.sidebar-container.collapsed .sidebar-logo {
  justify-content: center;
  padding: 1rem 0.5rem;
}

.sidebar-logo-img {
  height: 2rem;
  width: auto;
  flex-shrink: 0;
}

.sidebar-logo-text {
  min-width: 0;
  overflow: hidden;
}

.sidebar-logo-title {
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--color-text);
  line-height: 1.2;
  white-space: nowrap;
}

.sidebar-logo-subtitle {
  font-weight: 500;
  font-size: 0.7rem;
  letter-spacing: 0.025em;
  color: var(--color-text-muted);
  margin-top: 0.125rem;
  display: block;
  white-space: nowrap;
}

.sidebar-nav {
  flex: 1;
  min-height: 0;
  /* allow shrinking within sidebar flex */
  min-width: 0;
  padding: 0 0.5rem 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  overflow: hidden;
}

.sidebar-nav-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.375rem;
  white-space: nowrap;
  overflow: hidden;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-muted);
  text-decoration: none;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.15s ease;
}

.sidebar-nav-item:hover {
  color: var(--color-text);
  background: var(--color-surface-muted);
}

.sidebar-nav-item.active {
  color: var(--color-accent-primary);
  background: rgba(99, 102, 241, 0.1);
}

.sidebar-nav-item.collapsed {
  justify-content: center;
  padding: 0.5rem;
}

.sidebar-nav-label {
  flex: 1;
}

/* ── Per-agent FAB rail ───────────────────────────────────────────
 * Sits above the AI Agent dock. When the sidebar is expanded it's
 * a single-row horizontal scroll strip; when collapsed it stacks
 * vertically to match the rest of the nav. The host element
 * (`agents-fab-host[rail-orientation=…]`) handles its own internal
 * layout — this rule only controls the container that wraps it. */
.sidebar-agents-rail {
  flex-shrink: 0;
  margin: 0.5rem 0;
  padding: 0.35rem 0.4rem;
  border: 1px solid color-mix(in srgb, var(--color-border, #475569) 35%, transparent);
  border-radius: 0.45rem;
  background: color-mix(in srgb, var(--color-surface, #0f172a) 30%, transparent);
  /* Min-height covers two cases: idle with chips (small chips
   * shouldn't squish the container below their natural height) AND
   * an active drag-in where the rail is briefly visible but empty
   * waiting for a drop. */
  min-height: 2.2rem;
  transition: border-color 0.18s ease, background 0.18s ease, opacity 0.18s ease;
}

.sidebar-agents-rail:empty {
  display: none;
}

/* Collapse the rail's chrome when no agents are docked AND no drag
 * is in progress — keeps the sidebar clean until there's something
 * to dock. The host reflects `has-chips` when its render output
 * contains at least one rail-mode fab, and `drag-active` while a
 * drag gesture is in flight.
 *
 * Uses display: contents (NOT display: none) so floating fabs
 * remain visible after a tear-out drop away from the rail. The
 * agent-chat-fab elements are descendants of this wrapper; even
 * though they use position: fixed, an ancestor display: none would
 * still hide them entirely — that bug let torn-out fabs vanish
 * with no way to recover (Open chat would re-render the element
 * but the display: none ancestor still suppressed paint). With
 * display: contents the wrapper takes no layout space but its
 * children paint normally. */
.sidebar-agents-rail:not(:has(agents-fab-host[has-chips])):not(:has(agents-fab-host[drag-active])):not(:has(platform-agent-panel[rail-mode])):not(:has(agent-chat-fab[rail-mode])) {
  display: contents;
}

.sidebar-agents-rail.expanded {
  /* Lay out the platform-agent chip + the deployed-agent host
   * side-by-side. Without flex here the host's `width: 100%`
   * would push the platform-agent chip to a row of its own. */
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
}

.sidebar-agents-rail.collapsed {
  padding: 0.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
}

/* The deployed-agent host normally claims 100% of the rail width;
 * when it shares the rail with the platform-agent chip we let it
 * shrink to its content so the chip can sit beside it. */
.sidebar-agents-rail>agents-fab-host[rail-mode] {
  width: auto;
  flex: 0 1 auto;
}

/* Pop the rail's border + background when a floating fab is being
 * dragged over it — uses the host's reflected `drop-target`
 * attribute (set by agents-fab-host on every drag-move). Falls
 * back gracefully on older browsers without :has(). */
.sidebar-agents-rail:has(agents-fab-host[drop-target]) {
  border-color: color-mix(in srgb, var(--color-accent-primary, #6366f1) 70%, transparent);
  background: color-mix(in srgb, var(--color-accent-primary, #6366f1) 12%, transparent);
}

.sidebar-footer {
  padding: 0.75rem;
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.sidebar-footer-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  color: var(--color-text-muted);
  background: none;
  border: none;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: var(--font-family);
}

.sidebar-footer-btn:hover {
  color: var(--color-text);
  background: var(--color-surface-muted);
}

.sidebar-footer-btn.collapsed {
  justify-content: center;
}

/* Identity chip — sits above theme + sign out buttons. Read-only;
 * the click target is the Sign out button below, not the chip itself.
 * Layout mirrors .sidebar-footer-btn so the visual rhythm matches. */
.sidebar-footer-account {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  color: var(--color-text);
  background: color-mix(in srgb, var(--color-surface-muted) 60%, transparent);
  border: 1px solid var(--color-border);
}

.sidebar-footer-account.collapsed {
  justify-content: center;
}

.sidebar-footer-account-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sidebar-footer-account-badge {
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  padding: 0.0625rem 0.375rem;
  border-radius: 0.625rem;
  background: color-mix(in srgb, var(--color-accent-primary, #6366f1) 18%, transparent);
  color: var(--color-accent-primary, #6366f1);
}

/* Account popover menu — the footer chip is a trigger that opens a card
   above it (Signed in / name+admin / email / Settings / Log out). */
.sidebar-account {
  position: relative;
  width: 100%;
}

.sidebar-account-trigger {
  cursor: pointer;
  font-family: var(--font-family);
  text-align: left;
}

.sidebar-account-trigger:hover,
.sidebar-account-trigger.open {
  color: var(--color-accent-primary, #6366f1);
  background: color-mix(in srgb, var(--color-accent-primary, #6366f1) 14%, transparent);
  border-color: color-mix(in srgb, var(--color-accent-primary, #6366f1) 35%, transparent);
}

.sidebar-account-menu {
  position: absolute;
  /* Float clear of (above) the footer's top divider rather than overlapping it. */
  bottom: calc(100% + 1rem);
  /* Span the footer content width so the card stays within the nav bounds at
     any expanded width, with the footer's padding as equal side margins. No
     min-width here — it would push the card past the nav's right edge when
     the sidebar is narrow. */
  left: 0;
  right: 0;
  z-index: 50;
  background: var(--color-surface, #1a1a1a);
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}

/* Collapsed sidebar: the trigger is icon-only and the rail is too narrow to
   hold the card, so give it a usable fixed width that pops out to the right. */
.sidebar-account-menu.collapsed {
  right: auto;
  min-width: 13rem;
}

.sidebar-account-menu-header {
  padding: 0.625rem 0.75rem;
}

.sidebar-account-menu-signedin {
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  margin-bottom: 0.25rem;
}

.sidebar-account-menu-name {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text);
}

.sidebar-account-menu-name-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-account-menu-email {
  margin-top: 0.125rem;
  font-size: 0.6875rem;
  color: var(--color-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-account-menu-divider {
  height: 1px;
  background: var(--color-border);
}

.sidebar-account-menu-item {
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.8125rem;
  color: var(--color-text);
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-family);
  transition: background 0.15s ease;
}

.sidebar-account-menu-item span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-account-menu-item:hover {
  background: var(--color-surface-muted);
}

/* ==========================================================================
   owner-scope-toggle — shared "Mine / All" segmented switch on list pages
   ========================================================================== */

/* The custom element defaults to inline, which baselines it toward the top
   of a flex search bar — make the host a centered flex item. */
owner-scope-toggle {
  display: inline-flex;
  align-items: center;
  align-self: center;
}

.owner-scope-toggle {
  display: inline-flex;
  flex: 0 0 auto;
  border: 1px solid var(--color-border);
  border-radius: 0.375rem;
}

.owner-scope-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.1875rem 0.4375rem;
  color: var(--color-text-muted);
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}

.owner-scope-btn:first-child {
  border-radius: 0.3125rem 0 0 0.3125rem;
}

.owner-scope-btn:last-child {
  border-radius: 0 0.3125rem 0.3125rem 0;
}

.owner-scope-btn:not(:last-child) {
  border-right: 1px solid var(--color-border);
}

.owner-scope-btn:hover {
  color: var(--color-text);
}

.owner-scope-btn.active {
  color: var(--color-accent-primary, #6366f1);
  background: color-mix(in srgb, var(--color-accent-primary, #6366f1) 16%, transparent);
}

/* Fast hover tooltip (native title is too slow). */
.owner-scope-btn[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 0.375rem);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  background: var(--color-surface-elevated, #1e293b);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  padding: 0.125rem 0.4rem;
  border-radius: 0.25rem;
  font-size: 0.6875rem;
  line-height: 1.2;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.1s ease;
  z-index: 60;
}

.owner-scope-btn[data-tip]:hover::after {
  opacity: 1;
}

/* ==========================================================================
   sso-modal — interstitial reauth dialog
   ========================================================================== */

sso-modal {
  display: block;
}

.sso-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: color-mix(in srgb, #000 60%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.sso-modal-dialog {
  width: 100%;
  max-width: 22rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  padding: 1.5rem;
  box-shadow: 0 20px 25px -5px color-mix(in srgb, #000 30%, transparent);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.sso-modal-icon {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-accent-primary, #6366f1) 12%, transparent);
  color: var(--color-accent-primary, #6366f1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}

.sso-modal-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 0.5rem;
}

.sso-modal-body {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  margin: 0 0 1.25rem;
  line-height: 1.4;
}

.sso-modal-error {
  font-size: 0.75rem;
  color: var(--color-danger, #ef4444);
  margin: 0 0 1rem;
}

.sso-modal-actions {
  display: flex;
  gap: 0.5rem;
  width: 100%;
}

.sso-modal-btn {
  flex: 1;
  padding: 0.5rem 0.75rem;
  border-radius: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 500;
  border: 1px solid transparent;
  cursor: pointer;
  font-family: var(--font-family);
  transition: all 0.15s ease;
}

.sso-modal-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.sso-modal-btn-secondary {
  background: transparent;
  border-color: var(--color-border);
  color: var(--color-text);
}

.sso-modal-btn-secondary:hover:not(:disabled) {
  background: var(--color-surface-muted);
}

.sso-modal-btn-primary {
  background: var(--color-accent-primary, #6366f1);
  color: white;
}

.sso-modal-btn-primary:hover:not(:disabled) {
  background: color-mix(in srgb, var(--color-accent-primary, #6366f1) 88%, black);
}

/* ==========================================================================
   access-denied — account-level (fullscreen) + route-level (inline)
   ========================================================================== */

.access-denied {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 1rem;
  width: 100%;
}

.access-denied-fullscreen {
  min-height: 100vh;
  background: var(--color-surface, #0f172a);
}

.access-denied-card {
  max-width: 26rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.access-denied-icon {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-danger, #ef4444) 12%, transparent);
  color: var(--color-danger, #ef4444);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
}

.access-denied-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 0.5rem;
}

.access-denied-message {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  line-height: 1.5;
  margin: 0 0 1rem;
}

.access-denied-identity {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  margin: 0 0 1.25rem;
}

.access-denied-identity code {
  color: var(--color-text);
  background: var(--color-surface-muted);
  padding: 0.0625rem 0.375rem;
  border-radius: 0.25rem;
}

.access-denied-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  font-size: 0.8125rem;
  font-weight: 500;
  font-family: var(--font-family);
  color: var(--color-text);
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

.access-denied-btn:hover {
  background: var(--color-surface-muted);
}

.sidebar-collapse-icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.sidebar-collapse-icon.rotated {
  transform: rotate(180deg);
}

/* ==========================================================================
   app-shell layout
   ========================================================================== */

app-shell {
  display: block;
}

.app-layout {
  display: flex;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

.app-main {
  flex: 1;
  overflow-y: auto;
  background: var(--color-surface);
  display: flex;
  flex-direction: column;
  min-width: 0;
  /* prevent flex blowout */
}

/* Right-side agent dock */
.app-agent-right-dock {
  display: flex;
  flex-direction: column;
  height: 100vh;
  border-left: 1px solid var(--color-border, #475569);
  background: var(--color-surface-elevated, #1e293b);
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
  min-width: 280px;
}

.app-agent-right-dock>platform-agent-panel {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.app-agent-right-dock-resize {
  position: absolute;
  top: 0;
  left: 0;
  width: 6px;
  height: 100%;
  cursor: ew-resize;
  z-index: 1000;
}

.app-agent-right-dock-resize:hover {
  background: var(--color-accent-primary, #6366f1);
  opacity: 0.3;
}

/* Sidebar resize handle */
.sidebar-resize-handle {
  position: absolute;
  top: 0;
  right: 0;
  width: 6px;
  height: 100%;
  cursor: ew-resize;
  z-index: 10;
}

.sidebar-resize-handle:hover {
  background: var(--color-accent-primary, #6366f1);
  opacity: 0.3;
}

.app-content {
  flex: 1;
  width: 100%;
  padding: 1.5rem 2rem;
}

@keyframes fadeSlideIn {
  from {
    opacity: 0;
    transform: translateY(0.5rem);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in {
  animation: fadeSlideIn 0.2s ease-out;
}

/* Page transition: applied via .page-container in app-shell */

/* ==========================================================================
   BASE / LAYOUT / CAMBERFS COMPONENT STYLES (tag-name scoped)
   ========================================================================== */

/* ==========================================================================
   1. app-icon
   ========================================================================== */

app-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

app-icon svg {
  display: block;
}

app-icon .small {
  width: var(--icon-size, 1rem);
  height: var(--icon-size, 1rem);
}

app-icon .medium {
  width: var(--icon-size, 1.25rem);
  height: var(--icon-size, 1.25rem);
}

app-icon .large {
  width: var(--icon-size, 1.5rem);
  height: var(--icon-size, 1.5rem);
}

/* ==========================================================================
   2. app-spinner
   ========================================================================== */

app-spinner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

app-spinner .spinner {
  border-radius: 50%;
  border-style: solid;
  border-color: currentColor;
  border-top-color: transparent;
  animation: spin 0.75s linear infinite;
}

app-spinner .small {
  width: 1rem;
  height: 1rem;
  border-width: 2px;
}

app-spinner .medium {
  width: 1.5rem;
  height: 1.5rem;
  border-width: 2px;
}

app-spinner .large {
  width: 2.5rem;
  height: 2.5rem;
  border-width: 3px;
}

/* ==========================================================================
   3. app-pagination
   ========================================================================== */

app-pagination {
  display: block;
  font-family: var(--font-family);
}

app-pagination .pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  gap: 0.5rem 1rem;
  border-top: 1px solid var(--color-border, #e2e8f0);
}

app-pagination .page-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

app-pagination .page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2rem;
  padding: 0 0.75rem;
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: 0.375rem;
  background: var(--color-surface, #fff);
  color: var(--color-text, #1e293b);
  font-size: 0.8rem;
  font-family: var(--font-family);
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}

app-pagination .page-btn:hover:not(:disabled) {
  background: var(--color-surface-elevated, #f8fafc);
  border-color: var(--color-accent-primary, #6366f1);
}

app-pagination .page-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

app-pagination .page-indicator {
  font-size: 0.8rem;
  color: var(--color-text-muted, #64748b);
  user-select: none;
}

app-pagination .page-size {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-text-muted, #64748b);
  white-space: nowrap;
}

app-pagination .page-size select {
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: 0.375rem;
  background: var(--color-surface, #fff);
  color: var(--color-text, #1e293b);
  font-size: 0.8rem;
  font-family: var(--font-family);
  cursor: pointer;
}

app-pagination .page-size select:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

@media (max-width: 480px) {
  app-pagination .nav-label {
    display: none;
  }
}

/* ==========================================================================
   4. app-tooltip
   ========================================================================== */

app-tooltip {
  display: inline-flex;
}

app-tooltip .trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-accent-primary, #6366f1);
  color: white;
  font-size: 0.7rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  padding: 0;
  transition: background 0.15s ease;
}

app-tooltip .trigger:hover {
  background: var(--color-accent-secondary, #8b5cf6);
}

app-tooltip .tooltip-path {
  font-family: var(--font-family-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);
  font-size: 0.8rem;
  color: var(--color-text-muted, #94a3b8);
  margin-bottom: 0.5rem;
  /* Dotted CRD paths have no break opportunities of their own (#386). */
  overflow-wrap: anywhere;
}

app-tooltip .tooltip-type {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  background: var(--color-accent-primary, #6366f1);
  color: white;
  border-radius: 0.25rem;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

app-tooltip .tooltip-description {
  color: var(--color-text, #f1f5f9);
  line-height: 1.4;
}

/* ==========================================================================
   5. app-filesystem-select
   ========================================================================== */

app-filesystem-select {
  display: block;
}

app-filesystem-select *,
app-filesystem-select *::before,
app-filesystem-select *::after {
  box-sizing: border-box;
}

app-filesystem-select .autocomplete-wrapper {
  position: relative;
}

app-filesystem-select .autocomplete-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

app-filesystem-select input {
  width: 100%;
  padding: 0.5rem 2.25rem 0.5rem 0.75rem;
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: 0.375rem;
  background: var(--color-surface, #fff);
  color: var(--color-text, #1e293b);
  font-size: 0.875rem;
  font-family: var(--font-family);
}

app-filesystem-select input:focus {
  outline: none;
  border-color: var(--color-accent-primary, #6366f1);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

app-filesystem-select[invalid] input,
app-filesystem-select input.input-error {
  border-color: var(--color-danger, #ef4444);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}

input.input-error,
textarea.input-error,
select.input-error {
  border-color: var(--color-danger, #ef4444) !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12) !important;
}

/* Canonical inline validation message rendered beneath an offending field. */
/* `!important` so the danger color wins over the muted `label small` rule
   above (higher specificity) when an error <small> is rendered inside a
   <label> — which is the common case for inline field validation. */
.field-error {
  display: block;
  margin-top: 0.25rem;
  color: var(--color-danger, #ef4444) !important;
  font-size: 0.75rem;
}

/* Warning twins of the error styles above advisory validation (e.g. the
   requested nodes x replicas exceeding cluster capacity). Never combined with
   .input-error on the same element: errors take precedence at the call site. */
input.input-warning,
textarea.input-warning,
select.input-warning {
  border-color: var(--color-warning, #eab308) !important;
  box-shadow: 0 0 0 3px rgba(234, 179, 8, 0.12) !important;
}

.field-warning {
  display: block;
  margin-top: 0.25rem;
  color: var(--color-warning, #eab308) !important;
  font-size: 0.75rem;
}

/* Self-contained styling for the shared <kv-list-editor> (light DOM). Pages
   that host it may not define the generic .kv-row/.add-btn classes, so the
   component must carry its own layout to render consistently everywhere. */
kv-list-editor,
env-var-editor,
resource-requirements-editor {
  display: block;
}

kv-list-editor .kv-row,
env-var-editor .kv-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.5rem;
}

kv-list-editor .kv-row input,
env-var-editor .kv-row input {
  flex: 1;
  min-width: 0;
}

kv-list-editor .kv-row input.kv-key,
env-var-editor .kv-row input.kv-key {
  flex: 0 1 40%;
  max-width: 40%;
}

kv-list-editor .add-btn,
env-var-editor .add-btn {
  background: none;
  border: 1px dashed var(--color-border, #e2e8f0);
  border-radius: 0.375rem;
  padding: 0.375rem 0.75rem;
  font-size: 0.8rem;
  color: var(--color-text-muted, #64748b);
  cursor: pointer;
  margin-top: 0.25rem;
}

kv-list-editor .add-btn:hover,
env-var-editor .add-btn:hover {
  border-color: var(--color-accent-primary, #6366f1);
  color: var(--color-accent-primary, #6366f1);
}

kv-list-editor .remove-btn,
env-var-editor .remove-btn {
  background: none;
  border: none;
  color: var(--color-danger, #ef4444);
  cursor: pointer;
  padding: 0.25rem;
  font-size: 1rem;
  line-height: 1;
}

/* Shared <rdma-config-editor> (light DOM) — self-contained layout so it renders
   consistently on every host page. */
rdma-config-editor {
  display: block;
}

rdma-config-editor .rdma-subsection {
  margin-top: 0.75rem;
}

rdma-config-editor .rdma-subsection>strong {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.85rem;
}

rdma-config-editor .add-btn {
  display: inline-flex;
  align-items: center;
}

rdma-config-editor .rdma-hint {
  margin: 0.25rem 0 0.5rem;
  font-size: 0.78rem;
  color: var(--color-text-muted, #64748b);
}

rdma-config-editor .rdma-warn {
  margin: 0.5rem 0 0;
  font-size: 0.8rem;
  color: var(--color-warning, #ca8a04);
}

rdma-config-editor .kv-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin: 0.375rem 0;
}

rdma-config-editor .kv-row input {
  flex: 1;
  min-width: 0;
}

rdma-config-editor .kv-row pai-combobox {
  flex: 1;
  min-width: 0;
}

rdma-config-editor .add-btn {
  background: none;
  border: 1px dashed var(--color-border, #e2e8f0);
  border-radius: 0.375rem;
  padding: 0.375rem 0.75rem;
  font-size: 0.8rem;
  color: var(--color-text-muted, #64748b);
  cursor: pointer;
  margin-top: 0.25rem;
}

rdma-config-editor .add-btn:hover {
  border-color: var(--color-accent-primary, #6366f1);
  color: var(--color-accent-primary, #6366f1);
}

rdma-config-editor .remove-btn {
  background: none;
  border: none;
  color: var(--color-danger, #ef4444);
  cursor: pointer;
  padding: 0.25rem;
  font-size: 1rem;
  line-height: 1;
}

app-filesystem-select input::placeholder {
  color: var(--color-text-muted, #94a3b8);
}

app-filesystem-select input:disabled {
  background: var(--color-surface-elevated, #f8fafc);
  cursor: not-allowed;
}

app-filesystem-select .autocomplete-toggle {
  position: absolute;
  right: 0.5rem;
  background: none;
  border: none;
  padding: 0.25rem;
  cursor: pointer;
  color: var(--color-text-muted, #64748b);
  transition: transform 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

app-filesystem-select .autocomplete-toggle:hover {
  color: var(--color-text, #1e293b);
}

app-filesystem-select .autocomplete-toggle.open {
  transform: rotate(180deg);
}

app-filesystem-select app-sectioned-select,
app-mount-manager app-sectioned-select {
  display: block;
}

app-sectioned-select .autocomplete-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 40;
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: 0.625rem;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.16);
  max-height: min(22rem, 45vh);
  overflow-y: auto;
}

app-sectioned-select .autocomplete-hint {
  padding: 0.75rem 1rem;
  font-size: 0.8rem;
  color: var(--color-text-muted, #64748b);
  background: var(--color-surface-elevated, #f8fafc);
  border-bottom: 1px solid var(--color-border, #e2e8f0);
}

app-sectioned-select .autocomplete-loading,
app-sectioned-select .autocomplete-empty {
  padding: 1rem;
  text-align: center;
  color: var(--color-text-muted, #64748b);
  font-size: 0.875rem;
}

app-sectioned-select .autocomplete-group-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted, #94a3b8);
  background: var(--color-surface-elevated, #f8fafc);
  border-bottom: 1px solid var(--color-border, #e2e8f0);
}

app-sectioned-select .autocomplete-option {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  cursor: pointer;
  border-bottom: 1px solid var(--color-border, #e2e8f0);
  transition: background 0.15s ease;
}

app-sectioned-select .autocomplete-option:last-child {
  border-bottom: none;
}

app-sectioned-select .autocomplete-option:hover {
  background: var(--color-surface-elevated, #f8fafc);
}

app-filesystem-select .autocomplete-wrapper {
  min-width: 0;
}

app-sectioned-select .autocomplete-option-icon {
  flex-shrink: 0;
  margin-top: 0.125rem;
}

app-sectioned-select .autocomplete-option-icon.filesystem {
  color: var(--color-success, #22c55e);
}

app-sectioned-select .autocomplete-option-icon.metadata {
  color: var(--color-accent-primary, #6366f1);
}

app-sectioned-select .autocomplete-option-content {
  flex: 1;
  min-width: 0;
}

app-sectioned-select .autocomplete-option-name {
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--color-text, #1e293b);
}

app-sectioned-select .autocomplete-option-meta {
  font-size: 0.8rem;
  color: var(--color-text-muted, #64748b);
  margin-top: 0.125rem;
}

app-mount-manager .mount-manager-modal {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

app-mount-manager .mount-manager-modal--compact {
  height: auto;
}

app-mount-manager .detail-modal--side .mount-manager-modal--compact {
  height: 100%;
}

app-mount-manager .mount-manager-modal__body {
  padding: 1.25rem 1.5rem;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

app-mount-manager .mount-manager-modal--compact .mount-manager-modal__body {
  flex: 0 0 auto;
  overflow: visible;
}

app-mount-manager .detail-modal--side .mount-manager-modal--compact .mount-manager-modal__body {
  flex: 1;
  overflow-y: auto;
}

app-mount-manager .mount-manager-modal__footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--color-border, #475569);
  background: var(--color-surface-elevated, #1e293b);
}

app-mount-manager .mount-manager-modal__summary {
  margin: 0 0 1rem;
  color: var(--color-text-muted, #94a3b8);
  font-size: 0.875rem;
}

app-mount-manager .mount-path-group {
  position: relative;
}

app-mount-manager .mount-path-combobox {
  position: relative;
}

app-mount-manager .mount-path-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

app-mount-manager .mount-path-input-wrapper input {
  width: 100%;
  padding: 0.5rem 2.25rem 0.5rem 0.75rem;
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: 0.375rem;
  background: var(--color-surface, #fff);
  color: var(--color-text, #1e293b);
  font-size: 0.875rem;
  font-family: var(--font-family);
}

app-mount-manager .mount-path-input-wrapper input:focus {
  outline: none;
  border-color: var(--color-accent-primary, #6366f1);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

app-mount-manager .mount-path-input-wrapper input:disabled {
  background: var(--color-surface-elevated, #f8fafc);
  cursor: not-allowed;
}

app-mount-manager .mount-path-toggle {
  position: absolute;
  right: 0.5rem;
  background: none;
  border: none;
  padding: 0.25rem;
  cursor: pointer;
  color: var(--color-text-muted, #64748b);
  transition: transform 0.2s ease, color 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

app-mount-manager .mount-path-toggle:hover {
  color: var(--color-text, #1e293b);
}

app-mount-manager .mount-path-toggle.open {
  transform: rotate(180deg);
}

app-mount-manager .mount-path-toggle:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

app-mount-manager .mount-uri-selector-row {
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
}

app-mount-manager .mount-uri-selector-row app-filesystem-select {
  flex: 1;
  min-width: 0;
}


/* ==========================================================================
   6. tag-input
   ========================================================================== */

tag-input {
  display: block;
}

tag-input *,
tag-input *::before,
tag-input *::after {
  box-sizing: border-box;
}

tag-input .tag-input-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  min-height: 2.25rem;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: 0.375rem;
  background: var(--color-surface, #fff);
  cursor: text;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

tag-input .tag-input-container:hover:not(.disabled):not(.focused) {
  border-color: var(--color-border-hover, #cbd5e1);
}

tag-input .tag-input-container.focused {
  border-color: var(--color-accent-primary, #6366f1);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent-primary, #6366f1) 15%, transparent);
}

tag-input .tag-input-container.disabled {
  background: var(--color-surface-elevated, #f1f5f9);
  cursor: not-allowed;
  opacity: 0.6;
  pointer-events: none;
}

tag-input .tag {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  height: 1.5rem;
  padding: 0 0.25rem 0 0.625rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-accent-primary, #6366f1) 12%, transparent);
  color: var(--color-accent-primary, #6366f1);
  font-size: 0.8125rem;
  line-height: 1;
  white-space: nowrap;
  animation: tag-appear 0.15s ease-out;
}

tag-input .tag-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

tag-input .tag-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: currentColor;
  font: 0.875rem/1 var(--font-family);
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.15s ease, background 0.15s ease;
}

tag-input .tag-remove:hover {
  opacity: 1;
  background: color-mix(in srgb, currentColor 25%, transparent);
}

tag-input .tag-remove:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 1px;
}

tag-input .disabled .tag-remove {
  display: none;
}

tag-input .tag-input-container>input,
tag-input .tag-input-container>input:hover,
tag-input .tag-input-container>input:focus,
tag-input .tag-input-container>input:disabled {
  flex: 1 1 auto;
  min-width: 8rem;
  width: auto;
  height: 1.5rem !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  color: var(--color-text, inherit);
  font-size: 0.8125rem !important;
  font-family: var(--font-family);
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1.5rem !important;
  appearance: none;
  -webkit-appearance: none;
  vertical-align: middle;
}

tag-input .tag-input-container>input::placeholder {
  color: var(--color-text-muted, rgba(0, 0, 0, 0.4));
  font-family: var(--font-family);
}

tag-input .tag-input-container>input:disabled {
  cursor: not-allowed;
}

/* ==========================================================================
   7. volume-tag-combobox
   ========================================================================== */

volume-tag-combobox {
  display: block;
  position: relative;
}

volume-tag-combobox .combobox-wrapper {
  display: flex;
  position: relative;
}

volume-tag-combobox input {
  width: 100%;
  padding: 0.5rem 2.25rem 0.5rem 0.75rem;
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: 0.375rem;
  background: var(--color-surface, #fff);
  color: var(--color-text, #1e293b);
  font-size: 0.875rem;
  font-family: var(--font-family);
  box-sizing: border-box;
}

volume-tag-combobox input:focus {
  outline: none;
  border-color: var(--color-accent-primary, #6366f1);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

volume-tag-combobox input:disabled {
  background: var(--color-surface-elevated, #f8fafc);
  cursor: not-allowed;
}

volume-tag-combobox .dropdown-arrow {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--color-text-muted, #64748b);
  border: none;
  background: none;
  padding: 0;
  border-radius: 0 0.375rem 0.375rem 0;
}

volume-tag-combobox .dropdown-arrow:hover {
  color: var(--color-text, #1e293b);
}

volume-tag-combobox .dropdown-arrow svg {
  width: 12px;
  height: 12px;
  transition: transform 0.15s ease;
}

volume-tag-combobox .dropdown-arrow.open svg {
  transform: rotate(180deg);
}

volume-tag-combobox .dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 2px;
  max-height: 200px;
  overflow-y: auto;
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: 0.375rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  z-index: 50;
  list-style: none;
  padding: 0.25rem 0;
  margin: 2px 0 0 0;
}

volume-tag-combobox .dropdown li {
  padding: 0.375rem 0.75rem;
  font-size: 0.875rem;
  cursor: pointer;
  color: var(--color-text, #1e293b);
}

volume-tag-combobox .dropdown li:hover,
volume-tag-combobox .dropdown li.highlighted {
  background: var(--color-accent-primary, #6366f1);
  color: #fff;
}

volume-tag-combobox .dropdown li .match {
  font-weight: 600;
}

volume-tag-combobox .no-results {
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  color: var(--color-text-muted, #64748b);
  font-style: italic;
}

volume-tag-combobox .loading-item {
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  color: var(--color-text-muted, #64748b);
}

/* ==========================================================================
   8. app-footer
   ========================================================================== */

app-footer {
  display: block;
}

app-footer footer {
  padding: 1.5rem;
  text-align: center;
  color: var(--color-text-muted, #64748b);
  font-size: 0.875rem;
}

/* ==========================================================================
   9. app-toast
   ========================================================================== */

app-toast {
  display: block;
  position: fixed;
  top: auto;
  left: auto;
  bottom: 1.5rem;
  /* The lower-right agent dock (docked-agents-bar) lives in the
     bottom-right corner and is ~2.5rem wide. Without a margin here
     toasts paint over the dock chips. Pull the toast stack in by
     enough to clear the dock chip rail plus its outer padding. */
  right: 4.75rem;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  pointer-events: none;
  /* app-toast is shown as a manual popover so it joins the top layer
     above showModal() dialogs. Undo the popover UA stylesheet, which
     centers with inset 0 plus margin auto and adds border, padding,
     canvas background, and overflow auto. */
  width: auto;
  height: auto;
  margin: 0;
  border: 0;
  padding: 0;
  overflow: visible;
  background: transparent;
  color: inherit;
}

app-toast .toast {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem;
  border-radius: 0.5rem;
  box-shadow:
    0 10px 15px -3px rgba(0, 0, 0, 0.2),
    0 4px 6px -4px rgba(0, 0, 0, 0.1);
  animation: slide-up 0.3s ease-out;
  pointer-events: auto;
  min-width: 320px;
  max-width: 420px;
  font-size: 0.875rem;
  position: relative;
  overflow: hidden;
  background: var(--color-surface-elevated, #1e293b);
  border: 1px solid var(--color-border, #334155);
}

app-toast .toast::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  transform-origin: top center;
  animation: toast-edge-trace-up calc(var(--toast-duration, 4000ms) * 0.25) linear forwards;
  animation-delay: var(--toast-duration, 4000ms);
}

app-toast .toast.success::before {
  background: var(--color-success, #22c55e);
}

app-toast .toast.error::before {
  background: var(--color-danger, #ef4444);
}

app-toast .toast.warning::before {
  background: var(--color-warning, #eab308);
}

app-toast .toast.info::before {
  background: var(--color-info, #3b82f6);
}

app-toast .toast-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}

app-toast .toast-icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
}

app-toast .toast.success .toast-icon {
  color: var(--color-success, #22c55e);
}

app-toast .toast.error .toast-icon {
  color: var(--color-danger, #ef4444);
}

app-toast .toast.warning .toast-icon {
  color: var(--color-warning, #eab308);
}

app-toast .toast.info .toast-icon {
  color: var(--color-info, #3b82f6);
}

app-toast .toast-content {
  flex: 1;
  min-width: 0;
}

app-toast .toast-title {
  font-weight: 600;
  margin-bottom: 0.25rem;
  color: var(--color-text, #f1f5f9);
}

app-toast .toast.success .toast-title {
  color: var(--color-success, #22c55e);
}

app-toast .toast.error .toast-title {
  color: var(--color-danger, #ef4444);
}

app-toast .toast.warning .toast-title {
  color: var(--color-warning, #eab308);
}

app-toast .toast.info .toast-title {
  color: var(--color-info, #3b82f6);
}

app-toast .toast-message {
  color: var(--color-text, #f1f5f9);
  line-height: 1.4;
  word-break: break-word;
}

/* Optional QR block inside a toast. Rendered as a sibling of
 * `.toast-content` (not a child) so it sits beside the title+message
 * column instead of below it. White background keeps the modules
 * readable on a dark-mode toast. The QR is sized for tap-from-a-foot:
 * still scannable by a phone held ~20-30 cm away, without dominating
 * the toast. */
app-toast .toast.has-qr {
  /* The toast is still mostly text, so don't let the QR force it
     wider than necessary. The fixed text column width below keeps
     the layout stable across messages. */
  align-items: flex-start;
}

app-toast .toast.has-qr .toast-content {
  /* Constrain text so it wraps to the left of the QR rather than
     pushing the QR around. 18rem ≈ enough for a one-line URL while
     keeping the toast a sensible width. */
  max-width: 18rem;
}

app-toast .toast-qr {
  flex-shrink: 0;
  padding: 0.35rem;
  background: #fff;
  border-radius: 0.3rem;
  line-height: 0;
  align-self: center;
}

app-toast .toast-qr svg {
  width: 68px;
  height: 68px;
  display: block;
}

app-toast .toast-close {
  flex-shrink: 0;
  background: none;
  border: none;
  padding: 0.25rem;
  cursor: pointer;
  color: var(--color-text-muted, #64748b);
  border-radius: 0.25rem;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

app-toast .toast-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-text, #f1f5f9);
}

app-toast .toast-close svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

app-toast .toast-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

app-toast .toast-progress-bar {
  height: 100%;
  animation: progress-shrink var(--toast-duration, 4000ms) linear forwards;
}

app-toast .toast.success .toast-progress-bar {
  background: var(--color-success, #22c55e);
}

app-toast .toast.error .toast-progress-bar {
  background: var(--color-danger, #ef4444);
}

app-toast .toast.warning .toast-progress-bar {
  background: var(--color-warning, #eab308);
}

app-toast .toast.info .toast-progress-bar {
  background: var(--color-info, #3b82f6);
}

app-toast .toast.dismissing {
  animation: slide-out 0.2s ease-in forwards;
}

/* ==========================================================================
   10. pai-combobox
   ========================================================================== */

pai-combobox {
  display: block;
  position: relative;
}

pai-combobox .combobox-wrapper {
  display: flex;
  position: relative;
}

pai-combobox input {
  width: 100%;
  padding: 0.5rem 2.25rem 0.5rem 0.75rem;
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: 0.375rem;
  background: var(--color-surface, #fff);
  color: var(--color-text, #1e293b);
  font-size: 0.875rem;
  font-family: var(--font-family);
  box-sizing: border-box;
}

pai-combobox input:focus {
  outline: none;
  border-color: var(--color-accent-primary, #6366f1);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

pai-combobox .dropdown-arrow {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--color-text-muted, #64748b);
  border: none;
  background: none;
  padding: 0;
  border-radius: 0 0.375rem 0.375rem 0;
}

pai-combobox .dropdown-arrow:hover {
  color: var(--color-text, #1e293b);
}

pai-combobox .dropdown-arrow svg {
  width: 12px;
  height: 12px;
  transition: transform 0.15s ease;
}

pai-combobox .dropdown-arrow.open svg {
  transform: rotate(180deg);
}

pai-combobox .dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 2px;
  max-height: 200px;
  overflow-y: auto;
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: 0.375rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  z-index: 50;
  list-style: none;
  padding: 0.25rem 0;
  margin: 2px 0 0 0;
}

pai-combobox .dropdown li {
  padding: 0.375rem 0.75rem;
  font-size: 0.875rem;
  cursor: pointer;
  color: var(--color-text, #1e293b);
}

pai-combobox .dropdown li:hover,
pai-combobox .dropdown li.highlighted {
  background: var(--color-surface-elevated, #f1f5f9);
}

pai-combobox .dropdown li.highlighted {
  background: var(--color-accent-primary, #6366f1);
  color: #fff;
}

pai-combobox .dropdown li .match {
  font-weight: 600;
}

pai-combobox .dropdown li .combobox-item-label {
  color: var(--color-text-muted, #64748b);
}

pai-combobox .dropdown li.highlighted .combobox-item-label {
  color: rgba(255, 255, 255, 0.85);
}

/* The clearable "Default"/none row — italic + muted to read as distinct from real options. */
pai-combobox .dropdown li.empty-option {
  font-style: italic;
  color: var(--color-text-muted, #64748b);
}

pai-combobox .dropdown li.highlighted.empty-option {
  color: rgba(255, 255, 255, 0.85);
}

pai-combobox .no-results {
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  color: var(--color-text-muted, #64748b);
  font-style: italic;
}

/* ==========================================================================
   11. camberfs-config
   ========================================================================== */

camberfs-config {
  display: block;
  margin-bottom: 2rem;
  font-family: var(--font-family);
}

camberfs-config *,
camberfs-config *::before,
camberfs-config *::after {
  box-sizing: border-box;
  font-family: var(--font-family);
}

camberfs-config input,
camberfs-config select,
camberfs-config textarea,
camberfs-config button {
  max-width: 100%;
}

camberfs-config .section-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1rem;
}

camberfs-config .section-header h2 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

camberfs-config .section-header p {
  margin: 0.25rem 0 0 0;
  color: var(--color-text-muted, #64748b);
  font-size: 0.875rem;
}

camberfs-config .header-actions {
  display: flex;
  gap: 0.5rem;
}

camberfs-config .error-alert {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid var(--color-error, #ef4444);
  border-radius: 0.5rem;
  margin-bottom: 1rem;
}

camberfs-config .error-content {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

camberfs-config .error-text strong {
  display: block;
  color: var(--color-error, #ef4444);
}

camberfs-config .error-text small {
  color: var(--color-text-muted, #64748b);
}

camberfs-config .loading {
  text-align: center;
  padding: 2rem;
  color: var(--color-text-muted, #64748b);
}

camberfs-config .accordion {
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: 0.5rem;
  overflow: hidden;
}

camberfs-config .accordion-item {
  border-bottom: 1px solid var(--color-border, #e2e8f0);
}

camberfs-config .accordion-item:last-child {
  border-bottom: none;
}

camberfs-config .accordion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  background: var(--color-surface, #fff);
  cursor: pointer;
  user-select: none;
  transition: background 0.15s ease;
}

camberfs-config .accordion-header:hover {
  background: var(--color-surface-elevated, #f8fafc);
}

camberfs-config .accordion-header.expanded {
  background: rgba(99, 102, 241, 0.05);
  border-left: 3px solid var(--color-accent-primary, #6366f1);
}

camberfs-config .accordion-title {
  font-weight: 600;
}

camberfs-config .accordion-body {
  padding: 1.5rem;
  background: var(--color-surface, #fff);
}

camberfs-config .config-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

@media (max-width: 768px) {
  camberfs-config .config-grid {
    grid-template-columns: 1fr;
  }
}

camberfs-config .config-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Deep-link attention flash: pulses the input of the field a Configure
   link navigated to (class added transiently by _applyFocusKey). */
camberfs-config .config-field.field-attn .field-input {
  animation: camberfs-field-attn 1.2s ease-in-out 2;
}

@keyframes camberfs-field-attn {
  0%, 100% { box-shadow: 0 0 0 0 transparent; }
  50% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent-primary, #6366f1) 45%, transparent); }
}

camberfs-config .field-label {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--color-text, #1e293b);
}

camberfs-config .field-input-wrapper {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

camberfs-config .field-input {
  flex: 1;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: 0.375rem;
  font-size: 0.875rem;
  background: var(--color-surface, #fff);
  color: var(--color-text, #1e293b);
}

camberfs-config .field-input:focus {
  outline: none;
  border-color: var(--color-accent-primary, #6366f1);
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1);
}

camberfs-config .field-input:read-only {
  background: var(--color-surface-elevated, #f8fafc);
  color: var(--color-text-muted, #64748b);
}

camberfs-config .field-input.number-input {
  text-align: right;
}

/* Secret field: input + reveal toggle, styled like platform-config's
   `.token-toggle` (attached, full-height button). `flex: 1` keeps the
   pair filling the column like a bare `.field-input`. The wrap owns the
   input's top margin (see below) so it sits level with plain fields. */
camberfs-config .field-secret-wrap {
  display: flex;
  align-items: stretch;
  flex: 1;
  min-width: 0;
  margin-top: 0.5rem;
}

/* Inputs inherit margin-top: 0.5rem; left on, its margin-box makes the
   marginless toggle stretch 8px taller than the input. Zero it here and
   hand the spacing to the wrap so input and toggle match height/baseline. */
camberfs-config .field-secret-wrap .field-input {
  margin-top: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

/* Text input masked as a secret. Avoids type="password" so the browser's
   password manager never offers to save or autofill (same approach as
   platform-config's token-masked). */
camberfs-config .field-input.field-secret-masked {
  -webkit-text-security: disc;
}

camberfs-config .field-secret-peek {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.75rem;
  border: 1px solid var(--color-border, #e2e8f0);
  border-left: none;
  border-radius: 0 0.375rem 0.375rem 0;
  background: var(--color-surface-muted, #f1f5f9);
  cursor: pointer;
  color: var(--color-text-muted, #64748b);
  transition: color 0.15s ease;
}

camberfs-config .field-secret-peek:hover {
  color: var(--color-text, #1e293b);
}

camberfs-config .field-checkbox-wrapper {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0;
}

camberfs-config .field-checkbox {
  width: 1rem;
  height: 1rem;
  cursor: pointer;
  accent-color: var(--color-accent-primary, #6366f1);
}

camberfs-config .field-checkbox-label {
  font-size: 0.875rem;
  color: var(--color-text-muted, #64748b);
}

camberfs-config .field-key {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  color: var(--color-text-muted, #64748b);
}

camberfs-config .field-key-badge {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  background: rgba(99, 102, 241, 0.1);
  color: var(--color-accent-primary, #6366f1);
  border-radius: 9999px;
  font-size: 0.75rem;
  font-family: var(--font-family-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);
}

camberfs-config .empty-state {
  text-align: center;
  padding: 2rem;
  color: var(--color-text-muted, #64748b);
}

/* ==========================================================================
   12. camberfs-data
   ========================================================================== */

camberfs-data {
  display: block;
  margin-bottom: 2rem;
  font-family: var(--font-family);
}

camberfs-data *,
camberfs-data *::before,
camberfs-data *::after {
  box-sizing: border-box;
  font-family: var(--font-family);
}

camberfs-data .section-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1rem;
}

camberfs-data .section-header h2 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
}

camberfs-data .section-header p {
  margin: 0.25rem 0 0 0;
  color: var(--color-text-muted, #64748b);
  font-size: 0.875rem;
}

camberfs-data .error-alert {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  background: rgba(234, 179, 8, 0.1);
  border: 1px solid var(--color-warning, #eab308);
  border-radius: 0.5rem;
  margin-bottom: 1rem;
}

camberfs-data .error-content {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

camberfs-data .error-text strong {
  display: block;
  color: var(--color-warning, #eab308);
}

camberfs-data .error-text small {
  color: var(--color-text-muted, #64748b);
}

camberfs-data .loading {
  text-align: center;
  padding: 2rem;
  color: var(--color-text-muted, #64748b);
}

camberfs-data .accordion {
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: 0.5rem;
  overflow: hidden;
}

camberfs-data .accordion-item {
  border-bottom: 1px solid var(--color-border, #e2e8f0);
}

camberfs-data .accordion-item:last-child {
  border-bottom: none;
}

camberfs-data .accordion-header {
  display: flex;
  align-items: center;
  padding: 1rem;
  background: var(--color-surface-elevated, #f8fafc);
  cursor: pointer;
  user-select: none;
  transition: background 0.15s ease;
}

camberfs-data .accordion-header:hover {
  background: var(--color-surface-muted, #f1f5f9);
}

camberfs-data .accordion-header.expanded {
  background: rgba(99, 102, 241, 0.05);
}

camberfs-data .accordion-icon {
  margin-right: 0.75rem;
  transition: transform 0.2s ease;
}

camberfs-data .accordion-header.expanded .accordion-icon {
  transform: rotate(90deg);
}

camberfs-data .accordion-title {
  flex: 1;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

camberfs-data .accordion-body {
  background: var(--color-surface, #fff);
}

camberfs-data .table-wrapper {
  overflow-x: auto;
}

camberfs-data table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

camberfs-data th,
camberfs-data td {
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--color-border, #e2e8f0);
}

camberfs-data th {
  font-weight: 600;
  color: var(--color-text-muted, #64748b);
  background: var(--color-surface-elevated, #f8fafc);
  white-space: nowrap;
}

camberfs-data tbody tr:hover {
  background: var(--color-surface-elevated, #f8fafc);
}

camberfs-data tbody.partial-page tr:last-child td {
  border-bottom: none;
}

camberfs-data .name-cell {
  font-weight: 500;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

camberfs-data .uri-cell {
  max-width: 300px;
}

camberfs-data .uri-cell code {
  display: inline-block;
  font-family: var(--font-family-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);
  font-size: 0.8rem;
  background: var(--color-surface-elevated, #f1f5f9);
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

camberfs-data .source-cell {
  white-space: nowrap;
}

camberfs-data .source-badge {
  display: inline-block;
  padding: 0.25rem 0.625rem;
  background: var(--color-badge-source-bg, #374151);
  color: var(--color-badge-source-text, #ffffff);
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
}

camberfs-data .tags-cell {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.25rem;
  overflow: hidden;
  max-width: 200px;
}

camberfs-data .tag {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  background: rgba(99, 102, 241, 0.1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px;
  color: var(--color-accent-primary, #6366f1);
  border-radius: 9999px;
  font-size: 0.75rem;
}

camberfs-data .cached-cell {
  text-align: right;
  white-space: nowrap;
}

camberfs-data .cached-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.75rem;
}

camberfs-data .cached-badge.full {
  background: rgba(34, 197, 94, 0.1);
  color: var(--color-success, #22c55e);
}

camberfs-data .cached-badge.partial {
  background: rgba(234, 179, 8, 0.1);
  color: var(--color-warning, #eab308);
}

camberfs-data .cached-badge.none {
  background: rgba(107, 114, 128, 0.1);
  color: var(--color-text-muted, #64748b);
}

camberfs-data .cached-badge.caching {
  background: rgba(99, 102, 241, 0.1);
  color: var(--color-accent-primary, #6366f1);
}

camberfs-data .cached-badge.error {
  background: rgba(239, 68, 68, 0.1);
  color: var(--color-error, #ef4444);
}

camberfs-data .actions-cell {
  text-align: right;
  white-space: nowrap;
}

camberfs-data .actions-cell .actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.25rem;
}

camberfs-data .empty-state {
  text-align: center;
  padding: 2rem;
  color: var(--color-text-muted, #64748b);
}

camberfs-data .table-overlay-wrapper {
  position: relative;
}

camberfs-data .table-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  border-radius: 0.5rem;
}

@media (max-width: 768px) {
  camberfs-data .hide-mobile {
    display: none;
  }
}

/* ==========================================================================
   13a. camberfs-add-modal
   ========================================================================== */

camberfs-add-modal {
  display: contents;
}

camberfs-add-modal *,
camberfs-add-modal *::before,
camberfs-add-modal *::after {
  box-sizing: border-box;
  font-family: var(--font-family);
}

camberfs-add-modal input,
camberfs-add-modal select,
camberfs-add-modal textarea,
camberfs-add-modal button {
  max-width: 100%;
}

camberfs-add-modal dialog {
  padding: 0;
  border: 1px solid var(--color-border, #475569);
  border-radius: 0.5rem;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  max-width: 600px;
  width: 90%;
  background: var(--color-surface, #fff);
}

camberfs-add-modal dialog::backdrop {
  background: rgba(0, 0, 0, 0.5);
}

camberfs-add-modal .dialog-header {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--color-border, #e2e8f0);
}

camberfs-add-modal .dialog-header h3 {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
}

camberfs-add-modal .dialog-header p {
  margin: 0.25rem 0 0 0;
  font-size: 0.875rem;
  color: var(--color-text-muted, #64748b);
}

camberfs-add-modal .dialog-body {
  padding: 1.5rem;
}

camberfs-add-modal .form-group {
  margin-bottom: 1rem;
}

camberfs-add-modal .form-group:last-child {
  margin-bottom: 0;
}

camberfs-add-modal .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

@media (max-width: 500px) {
  camberfs-add-modal .form-row {
    grid-template-columns: 1fr;
  }
}

camberfs-add-modal label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
}

camberfs-add-modal input,
camberfs-add-modal select {
  width: 100%;
  margin-top: 0.5rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: 0.375rem;
  background: var(--color-surface, #fff);
  color: var(--color-text, #1e293b);
  font-size: 0.875rem;
}

camberfs-add-modal input:focus,
camberfs-add-modal select:focus {
  outline: none;
  border-color: var(--color-accent-primary, #6366f1);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

camberfs-add-modal input:disabled,
camberfs-add-modal select:disabled {
  background: var(--color-surface-elevated, #f1f5f9);
  color: var(--color-text-muted, #64748b);
}

camberfs-add-modal tag-input {
  display: block;
  margin-top: 0.5rem;
}

camberfs-add-modal .help-text {
  font-size: 0.75rem;
  color: var(--color-text-muted, #64748b);
  margin-top: 0.375rem;
}

camberfs-add-modal .dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--color-border, #e2e8f0);
  background: var(--color-surface-elevated, #f8fafc);
}

/* FS modal styles now live in camberfs-modals.js (co-located with component) */

/* ==========================================================================
   13c. camberfs-metadata-modal (content styles — chrome handled by app-detail-modal)
   ========================================================================== */

camberfs-metadata-modal .dialog-body {
  padding: 1.5rem;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

camberfs-metadata-modal .meta-table {
  width: 100%;
  font-size: 0.875rem;
}

camberfs-metadata-modal .meta-table tr {
  border-bottom: 1px solid var(--color-border, #e2e8f0);
}

camberfs-metadata-modal .meta-table tr:last-child {
  border-bottom: none;
}

camberfs-metadata-modal .meta-table th {
  text-align: left;
  padding: 0.5rem 1rem 0.5rem 0;
  font-weight: 500;
  color: var(--color-text-muted, #64748b);
  vertical-align: top;
  width: 30%;
  background: none;
}

camberfs-metadata-modal .meta-table td {
  padding: 0.5rem 0;
  word-break: break-word;
}

camberfs-metadata-modal .meta-table code {
  font-family: var(--font-family-mono,
      ui-monospace,
      SFMono-Regular,
      Menlo,
      Monaco,
      Consolas,
      monospace);
  font-size: 0.8rem;
  background: var(--color-surface-elevated, #f1f5f9);
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
}

camberfs-metadata-modal .tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

camberfs-metadata-modal .tag {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  background: rgba(99, 102, 241, 0.1);
  color: var(--color-accent-primary, #6366f1);
  border-radius: 9999px;
  font-size: 0.75rem;
}

/* dialog-footer removed — metadata modal uses app-detail-modal chrome */

/* ==========================================================================
   14. camberfs-overview
   ========================================================================== */

camberfs-overview {
  display: block;
  margin-bottom: 2rem;
  font-family: var(--font-family);
}

camberfs-overview *,
camberfs-overview *::before,
camberfs-overview *::after {
  box-sizing: border-box;
  font-family: var(--font-family);
}

camberfs-overview .section-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1rem;
}

camberfs-overview .section-header h2 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
}

camberfs-overview .section-header p {
  margin: 0.25rem 0 0 0;
  color: var(--color-text-muted, #64748b);
  font-size: 0.875rem;
}

camberfs-overview .error-alert {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid var(--color-error, #ef4444);
  border-radius: 0.5rem;
  margin-bottom: 1rem;
}

camberfs-overview .error-content {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

camberfs-overview .error-text strong {
  display: block;
  color: var(--color-error, #ef4444);
}

camberfs-overview .error-text small {
  color: var(--color-text-muted, #64748b);
}

.url-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0;
  border: 1px solid color-mix(in srgb, var(--color-accent-primary, #6366f1) 35%, transparent);
  border-radius: 9999px;
  background: color-mix(in srgb, var(--color-accent-primary, #6366f1) 14%, transparent);
  font-size: 0.8rem;
  color: var(--color-text, #1e293b);
  cursor: default;
  transition: border-color 0.2s ease, background 0.2s ease;
  z-index: 0;
}

.url-pill:hover {
  border-color: var(--color-accent-primary, #6366f1);
  z-index: 100;
}

.url-pill-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-right: 1px solid var(--color-border, #e2e8f0);
  border-radius: 9999px 0 0 9999px;
  background: var(--color-surface-elevated, #f8fafc);
  cursor: pointer;
  color: var(--color-text-muted, #64748b);
  transition: color 0.15s ease, background 0.15s ease;
  flex-shrink: 0;
}

.url-pill:hover .url-pill-copy {
  border-right-color: var(--color-accent-primary, #6366f1);
}

.url-pill-copy:hover {
  color: var(--color-accent-primary, #6366f1);
  background: rgba(99, 102, 241, 0.15);
}

.url-pill-copy .icon-default {
  display: inline-flex;
}

.url-pill-copy .icon-copy {
  display: none;
}

.url-pill-copy:hover .icon-default {
  display: none;
}

.url-pill-copy:hover .icon-copy {
  display: inline-flex;
}

.url-pill-label {
  font-weight: 500;
  padding: 0.25rem 0.5rem;
}

.url-pill-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0;
  height: 1.75rem;
  border-radius: 0 9999px 9999px 0;
  color: var(--color-text-muted, #64748b);
  text-decoration: none;
  overflow: hidden;
  opacity: 0;
  transition: width 0.2s ease, opacity 0.2s ease, color 0.15s ease, background 0.15s ease;
  flex-shrink: 0;
}

.url-pill:hover .url-pill-link {
  width: 1.75rem;
  opacity: 1;
}

.url-pill-link:hover {
  color: var(--color-accent-primary, #6366f1);
  background: rgba(99, 102, 241, 0.15);
}

.url-pill-tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--color-surface-inverse, #1e293b);
  color: var(--color-text-inverse, #f8fafc);
  border: 1px solid var(--color-border, #e2e8f0);
  font-family: var(--font-family-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);
  font-size: 0.75rem;
  padding: 0.375rem 0.625rem;
  border-radius: 0.375rem;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 1000;
}

.url-pill-tooltip::before {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--color-border, #e2e8f0);
}

.url-pill-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--color-surface-inverse, #1e293b);
}

.url-pill:hover .url-pill-tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

camberfs-overview .loading {
  text-align: center;
  padding: 2rem;
  color: var(--color-text-muted, #64748b);
}

camberfs-overview .overview-grid {
  display: grid;
  gap: 1rem;
}

camberfs-overview .card {
  background: var(--color-surface-elevated, #f8fafc);
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: 0.5rem;
  padding: 1.25rem;
}

camberfs-overview .meta-strip {
  display: flex;
  flex-wrap: wrap;
  /* Scales with the viewport so a wide monitor gets more air without the
     narrow case wrapping to a second row. */
  gap: 0.875rem clamp(0.75rem, 1.1vw, 1.75rem);
  align-items: flex-start;
}

camberfs-overview .meta-strip .stat-value {
  font-size: 1rem;
}

camberfs-overview .meta-strip .stat-item.wide {
  flex: 0 1 auto;
  min-width: 11rem;
}

@media (min-width: 1024px) {
  camberfs-overview .meta-strip .stat-item.trailing {
    margin-left: auto;
  }
}

camberfs-overview .strip-sep {
  align-self: center;
  width: 1px;
  height: 2rem;
  background: var(--color-border, #e2e8f0);
}

camberfs-overview .version-value {
  font-size: 1.25rem;
  font-weight: 600;
  margin-top: 0.25rem;
}

camberfs-overview .stat-item {
  min-width: 0;
}

camberfs-overview .stat-label {
  font-size: 0.75rem;
  color: var(--color-text-muted, #64748b);
}

camberfs-overview .stat-value {
  font-size: 1.125rem;
  font-weight: 600;
  margin-top: 0.25rem;
}

camberfs-overview .storage-card h3 {
  margin: 0 0 0.5rem 0;
  font-size: 1rem;
  font-weight: 600;
}

camberfs-overview .storage-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

camberfs-overview .charts-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

@media (max-width: 768px) {
  camberfs-overview .charts-grid {
    grid-template-columns: 1fr;
  }
}

camberfs-overview .storage-header h3.with-tip {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

camberfs-overview .chart-section h4 {
  margin: 0 0 0.5rem 0;
  font-size: 0.875rem;
  font-weight: 500;
}

camberfs-overview .chart-row {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

camberfs-overview .chart-container {
  position: relative;
  width: 120px;
  height: 120px;
  flex: none;
}

camberfs-overview .chart-container canvas {
  width: 120px !important;
  height: 120px !important;
}

camberfs-overview .chart-stats {
  flex: 1;
  min-width: 0;
}

camberfs-overview .chart-tip {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 5;
  transform: translate(-50%, -50%);
  padding: 0.125rem 0.25rem;
  border-radius: 0.25rem;
  background: var(--color-surface-elevated, #1e293b);
  color: var(--color-text, #f1f5f9);
  font-size: 0.75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
}

camberfs-overview .chart-tip.visible {
  opacity: 1;
}

camberfs-overview .seg-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 0.375rem;
  border-radius: 50%;
  vertical-align: middle;
  transition: transform 0.18s ease;
}

camberfs-overview .seg-dot.used {
  background: var(--color-accent-primary, #6366f1);
}

camberfs-overview .seg-dot.free {
  background: var(--color-border, #cbd5e1);
}

camberfs-overview .chart-stats .seg-row td {
  transition: color 0.18s ease, opacity 0.18s ease;
}

camberfs-overview .chart-stats .seg-row.is-active td,
camberfs-overview .chart-stats .seg-row.is-active td:first-child {
  color: var(--color-text, #f1f5f9);
}

camberfs-overview .chart-stats .seg-row.is-dimmed td {
  opacity: 0.45;
}

camberfs-overview .chart-stats .seg-row.is-active .seg-dot {
  transform: scale(1.4);
}

camberfs-overview .chart-stats table {
  font-size: 0.8rem;
}

camberfs-overview .chart-stats td {
  padding: 0.25rem 0;
}

camberfs-overview .chart-stats td:first-child {
  color: var(--color-text-muted, #64748b);
  padding-right: 0.75rem;
}

camberfs-overview .chart-stats td:last-child {
  text-align: right;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ==========================================================================
   15. camberfs-volumes
   ========================================================================== */

camberfs-volumes {
  display: block;
}

camberfs-volumes *,
camberfs-volumes *::before,
camberfs-volumes *::after {
  box-sizing: border-box;
}

camberfs-volumes .section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

camberfs-volumes .section-header h2 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

camberfs-volumes .header-actions {
  display: flex;
  gap: 0.5rem;
}

camberfs-volumes .loading {
  display: flex;
  justify-content: center;
  padding: 2rem;
}

camberfs-volumes .empty-state {
  text-align: center;
  padding: 2rem;
  color: var(--color-text-muted, #64748b);
  background: var(--color-surface-elevated, #f8fafc);
  border-radius: 0.5rem;
}

camberfs-volumes .table-overlay-wrapper {
  position: relative;
}

camberfs-volumes .table-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  border-radius: 0.5rem;
}

camberfs-volumes .error-alert {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid var(--color-error, #ef4444);
  border-radius: 0.5rem;
  margin-bottom: 1rem;
}

camberfs-volumes .error-alert .error-content {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

camberfs-volumes .error-alert .error-text strong {
  display: block;
  color: var(--color-error, #ef4444);
}

camberfs-volumes .error-alert .error-text small {
  color: var(--color-text-muted, #64748b);
}

camberfs-volumes .volume-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}

camberfs-volumes .status-dot {
  display: inline-block;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  vertical-align: middle;
}

camberfs-volumes .status-dot.mounted {
  background: #22c55e;
  box-shadow: 0 0 4px rgba(34, 197, 94, 0.4);
}

camberfs-volumes .status-dot.unmounted {
  background: #eab308;
  box-shadow: 0 0 4px rgba(234, 179, 8, 0.4);
}

camberfs-volumes .status-label {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.875rem;
}

camberfs-volumes tbody.partial-page tr:last-child td {
  border-bottom: 1px solid var(--color-border, #e2e8f0);
}


/* ==========================================================================
   PAGE COMPONENT STYLES (tag-name scoped)
   ========================================================================== */
/* Section 7 (resource-dashboard-page) moved to resource-exporter module */

/* ============================================================
 * 8. platform-config-page
 * ============================================================ */

platform-config-page {
  display: block;
}

platform-config-page *,
platform-config-page *::before,
platform-config-page *::after {
  box-sizing: border-box;
}

platform-config-page .page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

platform-config-page .page-header h1 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

platform-config-page .section-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

platform-config-page .tab {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

platform-config-page .loading-card {
  text-align: center;
  padding: 3rem;
  background: var(--color-surface-elevated, #f8fafc);
  border-radius: 0.5rem;
}

/* divider is an inset shadow, not border-bottom: the scroll clip would cut
   off the active tab's underline where it overlaps a real border */
platform-config-page .tabs,
account-settings-page .tabs {
  display: flex;
  gap: 0.25rem;
  box-shadow: inset 0 -2px 0 var(--color-border, #e2e8f0);
  margin-bottom: 1.5rem;
  overflow-x: auto;
  --tabs-scroll-thumb: transparent;
}

/* thumb hover-reveal goes through the custom property: chrome does not
   reliably repaint scrollbar parts styled via ancestor :hover selectors */
platform-config-page .tabs:hover,
account-settings-page .tabs:hover {
  --tabs-scroll-thumb: var(--color-text-muted, #64748b);
}

/* firefox only: on chrome these standard props would disable the slim
   webkit-scrollbar styling below */
@supports not selector(::-webkit-scrollbar) {
  platform-config-page .tabs,
  account-settings-page .tabs {
    scrollbar-width: thin;
    scrollbar-color: var(--tabs-scroll-thumb) transparent;
  }
}

/* while overflowing, the track replaces the divider under the tabs.
   the bar draws 4px tall; the bottom 6px is invisible grab area, painted
   surface-color on the track to mask the divider shadow behind it */
platform-config-page .tabs::-webkit-scrollbar,
account-settings-page .tabs::-webkit-scrollbar {
  height: 10px;
}

platform-config-page .tabs::-webkit-scrollbar-track,
account-settings-page .tabs::-webkit-scrollbar-track {
  background: var(--color-border, #e2e8f0);
  border-bottom: 6px solid var(--color-surface, #fff);
  background-clip: padding-box;
}

platform-config-page .tabs::-webkit-scrollbar-thumb,
account-settings-page .tabs::-webkit-scrollbar-thumb {
  background: var(--tabs-scroll-thumb);
  border-bottom: 6px solid transparent;
  background-clip: padding-box;
  border-radius: 2px;
}

platform-config-page .tab,
account-settings-page .tab {
  padding: 0.75rem 1rem;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  font-size: 0.875rem;
  color: var(--color-text-muted, #64748b);
  transition: all 0.15s ease;
  flex-shrink: 0;
  white-space: nowrap;
}

platform-config-page .tab:hover,
account-settings-page .tab:hover {
  color: var(--color-text, #1e293b);
}

platform-config-page .tab.active,
account-settings-page .tab.active {
  color: var(--color-accent-primary, #6366f1);
  border-bottom-color: var(--color-accent-primary, #6366f1);
}

platform-config-page .form-section {
  background: var(--color-surface-elevated, #f8fafc);
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: 0.5rem;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

platform-config-page .form-section h4 {
  margin: 0 0 0.5rem 0;
  font-size: 1rem;
}

platform-config-page .form-section p {
  color: var(--color-text-muted, #64748b);
  margin: 0 0 1rem 0;
  font-size: 0.875rem;
}

platform-config-page .form-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  align-items: start;
}

platform-config-page label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
}

platform-config-page label small {
  font-weight: normal;
  color: var(--color-text-muted, #64748b);
}

platform-config-page input,
platform-config-page select,
platform-config-page textarea {
  width: 100%;
  margin-top: 0.5rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: 0.375rem;
  background: var(--color-surface, #fff);
  color: var(--color-text, #1e293b);
  font-size: 0.875rem;
  font-family: var(--font-family);
}

platform-config-page input:focus,
platform-config-page select:focus,
platform-config-page textarea:focus {
  outline: none;
  border-color: var(--color-accent-primary, #6366f1);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

platform-config-page input::placeholder,
platform-config-page textarea::placeholder {
  font-family: var(--font-family);
  color: var(--color-text-muted, #94a3b8);
}

platform-config-page input[type="checkbox"] {
  width: auto;
  margin: 0;
}

platform-config-page .checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}

platform-config-page .warning-card {
  background: rgba(234, 179, 8, 0.1);
  border: 1px solid var(--color-warning, #eab308);
  border-radius: 0.5rem;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

platform-config-page .warning-card h3 {
  margin: 0 0 0.5rem 0;
  color: var(--color-warning, #eab308);
}

platform-config-page .warning-card code {
  display: block;
  background: var(--color-surface-elevated, #f1f5f9);
  padding: 0.75rem;
  border-radius: 0.5rem;
  margin-top: 0.5rem;
}

platform-config-page .queue-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: 0.375rem;
  margin-bottom: 0.5rem;
}

platform-config-page .queue-card strong {
  font-size: 0.9rem;
}

platform-config-page .queue-meta {
  display: flex;
  gap: 1rem;
  font-size: 0.8rem;
  color: var(--color-text-muted, #64748b);
}

platform-config-page .key-card {
  background: var(--color-surface-elevated, #1e293b);
  border: 2px solid var(--color-success, #22c55e);
  border-radius: 0.5rem;
  padding: 1.5rem;
  margin-bottom: 1rem;
}

platform-config-page .key-card h5 {
  margin: 0 0 0.5rem 0;
  color: var(--color-success, #22c55e);
}

platform-config-page .key-yaml {
  background: var(--color-surface-elevated, #f1f5f9);
  padding: 1rem;
  border-radius: 0.375rem;
  font-family: var(--font-family-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);
  font-size: 0.8rem;
  white-space: pre-wrap;
  overflow-x: auto;
  margin: 1rem 0;
}

platform-config-page table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

platform-config-page th,
platform-config-page td {
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--color-border, #e2e8f0);
}

platform-config-page th {
  font-weight: 600;
  color: var(--color-text-muted, #64748b);
  background: var(--color-surface-elevated, #f8fafc);
}

platform-config-page code {
  font-family: var(--font-family-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);
  font-size: 0.8rem;
  background: var(--color-surface-elevated, #f1f5f9);
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
}

platform-config-page .empty-state {
  text-align: center;
  padding: 2rem;
  color: var(--color-text-muted, #64748b);
}

platform-config-page .save-actions {
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
  margin-top: 1.5rem;
}

platform-config-page .adv-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

platform-config-page .adv-search {
  flex: 1;
  max-width: 300px;
  /* Anchors the inline clear button, matching the page-search boxes
     elsewhere; a separate button under the results was easy to miss and only
     appeared when the search matched nothing. */
  position: relative;
  display: flex;
  align-items: center;
}

platform-config-page .adv-search input {
  width: 100%;
  margin: 0;
  padding: 0.5rem 2rem 0.5rem 2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2394a3b8'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 0.5rem center;
  background-size: 1rem;
}

/* "Not set" toggle above an optional enum picker. Clearing a value is
   otherwise impossible once a closed value set removes free-text entry. */
platform-config-page .adv-enum-unset {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.25rem;
  font-size: 0.75rem;
  color: var(--color-text-muted, #94a3b8);
  cursor: pointer;
}

platform-config-page .adv-enum-unset input {
  margin: 0;
}

platform-config-page select.adv-field-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

platform-config-page .adv-search-clear {
  position: absolute;
  right: 0.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.15rem;
  color: var(--color-text-muted, #94a3b8);
  background: none;
  border: none;
  border-radius: 0.25rem;
  cursor: pointer;
}

platform-config-page .adv-search-clear:hover {
  color: var(--color-text, #e2e8f0);
  background: color-mix(in srgb, var(--color-text, #e2e8f0) 10%, transparent);
}

platform-config-page .adv-actions {
  display: flex;
  gap: 0.5rem;
}

platform-config-page .adv-card {
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: 0.5rem;
  margin-bottom: 1rem;
  overflow: hidden;
  background: var(--color-surface, #fff);
}

platform-config-page .adv-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.875rem 1rem;
  background: var(--color-surface-elevated, #f8fafc);
  border: none;
  width: 100%;
  cursor: pointer;
  font-size: 0.95rem;
  color: var(--color-text, #1e293b);
  transition: background 0.15s ease;
}

platform-config-page .adv-card-header:hover {
  background: var(--color-surface-muted, #f1f5f9);
}

platform-config-page .adv-card-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
}

platform-config-page .adv-card-title app-badge {
  margin-left: 0.25rem;
}

platform-config-page .adv-card-icon {
  transition: transform 0.2s ease;
  color: var(--color-text-muted, #64748b);
}

platform-config-page .adv-card-header.expanded .adv-card-icon {
  transform: rotate(180deg);
}

platform-config-page .adv-card-body {
  padding: 1rem;
}

platform-config-page .adv-field {
  margin-bottom: 1rem;
}

platform-config-page .adv-field:last-child {
  margin-bottom: 0;
}

platform-config-page .adv-field-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: var(--color-text-muted, #64748b);
  margin-bottom: 0.375rem;
}

platform-config-page .adv-field-input {
  width: 100%;
  margin: 0;
  padding: 0.625rem 0.875rem;
  background: var(--color-surface-elevated, #f8fafc);
  border: 1px solid transparent;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  transition: border-color 0.15s ease, background 0.15s ease;
}

platform-config-page .adv-field-input:hover {
  background: var(--color-surface-muted, #f1f5f9);
}

platform-config-page .adv-field-input:focus {
  outline: none;
  background: var(--color-surface, #fff);
  border-color: var(--color-accent-primary, #6366f1);
}

platform-config-page .adv-toggle {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0;
}

platform-config-page .adv-toggle input[type="checkbox"] {
  width: 1.125rem;
  height: 1.125rem;
  accent-color: var(--color-accent-primary, #6366f1);
}

platform-config-page .adv-toggle-label {
  font-size: 0.875rem;
  color: var(--color-text, #1e293b);
}

platform-config-page .adv-subsection {
  margin-top: 0.75rem;
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: 0.5rem;
  overflow: hidden;
}

platform-config-page .adv-subsection:first-child {
  margin-top: 0;
}

platform-config-page .adv-subsection-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  cursor: pointer;
  background: transparent;
  transition: background 0.15s ease;
}

platform-config-page .adv-subsection-header:hover {
  background: var(--color-surface-elevated, #f8fafc);
}

platform-config-page .adv-subsection-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text, #1e293b);
}

platform-config-page .adv-subsection-title app-badge {
  margin-left: 0.25rem;
}

platform-config-page .adv-click-hint {
  font-style: italic;
  color: var(--color-text-muted, #64748b);
  font-weight: normal;
  font-size: 0.85rem;
  margin-left: 0.5rem;
}

platform-config-page .adv-subsection-content {
  padding: 1rem;
  border-top: 1px solid var(--color-border, #e2e8f0);
}

platform-config-page .kv-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

platform-config-page .kv-table th {
  text-align: left;
  padding: 0.5rem 0.75rem;
  font-weight: 500;
  font-size: 0.75rem;
  color: var(--color-text-muted, #64748b);
  text-transform: uppercase;
  letter-spacing: 0.025em;
  background: transparent;
  border-bottom: 1px solid var(--color-border, #e2e8f0);
}

platform-config-page .kv-table td {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--color-border, #e2e8f0);
  vertical-align: middle;
}

platform-config-page .kv-table tr:last-child td {
  border-bottom: none;
}

platform-config-page .kv-table input {
  width: 100%;
  margin: 0;
  padding: 0.5rem 0.625rem;
  background: var(--color-surface-elevated, #f8fafc);
  border: 1px solid transparent;
  border-radius: 0.25rem;
  font-size: 0.85rem;
}

platform-config-page .kv-table input:focus {
  outline: none;
  border-color: var(--color-accent-primary, #6366f1);
  background: var(--color-surface, #fff);
}

platform-config-page .kv-delete {
  background: none;
  border: none;
  color: var(--color-danger, #ef4444);
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 0.25rem;
  opacity: 0.6;
  transition: opacity 0.15s ease;
}

platform-config-page .kv-delete:hover {
  opacity: 1;
}

platform-config-page .kv-add {
  margin-top: 0.5rem;
}

platform-config-page .code-block {
  display: block;
  width: 100%;
  min-height: 100px;
  background: var(--color-surface-elevated, #f8fafc);
  border: 1px solid transparent;
  border-radius: 0.375rem;
  padding: 1rem;
  font-family: var(--font-family-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);
  font-size: 0.8rem;
  line-height: 1.5;
  resize: vertical;
  white-space: pre-wrap;
  word-break: break-word;
  transition: border-color 0.15s ease, background 0.15s ease;
}

platform-config-page .code-block:hover {
  background: var(--color-surface-muted, #f1f5f9);
}

platform-config-page .code-block:focus {
  outline: none;
  background: var(--color-surface, #fff);
  border-color: var(--color-accent-primary, #6366f1);
}

platform-config-page .code-block-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

platform-config-page .adv-empty {
  text-align: center;
  padding: 2rem;
  color: var(--color-text-muted, #64748b);
}

platform-config-page .adv-no-results {
  text-align: center;
  padding: 2rem;
  color: var(--color-text-muted, #64748b);
  background: var(--color-surface-elevated, #f8fafc);
  border-radius: 0.5rem;
}

platform-config-page .value-tag {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  background: rgba(99, 102, 241, 0.1);
  color: var(--color-accent-primary, #6366f1);
  border-radius: 9999px;
  font-size: 0.75rem;
  font-family: var(--font-family-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);
}

platform-config-page dialog {
  padding: 0;
  border: 1px solid var(--color-border, #475569);
  border-radius: 0.5rem;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  max-width: 700px;
  width: 90%;
  background: var(--color-surface, #fff);
}

platform-config-page dialog::backdrop {
  background: rgba(0, 0, 0, 0.5);
}

platform-config-page .dialog-header {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--color-border, #e2e8f0);
}

platform-config-page .dialog-header h3 {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
}

platform-config-page .dialog-body {
  padding: 1.5rem;
}

platform-config-page .dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--color-border, #e2e8f0);
  background: var(--color-surface-elevated, #f8fafc);
}

platform-config-page .queue-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1rem;
}

platform-config-page .label-with-help {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Text input masked as a secret — avoids type="password" so the browser's
 * password manager never offers to save admin credentials. */
platform-config-page .token-masked {
  -webkit-text-security: disc;
}

platform-config-page .token-input-wrapper {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin-top: 0.5rem;
}

platform-config-page .token-input-wrapper input {
  margin-top: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  flex: 1;
}

platform-config-page .token-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.75rem;
  border: 1px solid var(--color-border, #e2e8f0);
  border-left: none;
  border-radius: 0 0.375rem 0.375rem 0;
  background: var(--color-surface-muted, #f1f5f9);
  cursor: pointer;
  color: var(--color-text-muted, #64748b);
  transition: color 0.15s ease;
}

platform-config-page .token-toggle:hover {
  color: var(--color-text, #1e293b);
}

platform-config-page .test-results {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 0.75rem;
  font-size: 0.85rem;
}

platform-config-page .test-result-item {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

platform-config-page .test-result-item.pass {
  color: var(--color-success, #22c55e);
}

platform-config-page .test-result-item.fail {
  color: var(--color-danger, #ef4444);
}

platform-config-page .cf-status-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0;
  font-size: 0.875rem;
}

platform-config-page .cf-status-row .status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

platform-config-page .cf-status-row .status-dot.ready {
  background: var(--color-success, #22c55e);
}

platform-config-page .cf-status-row .status-dot.pending {
  background: var(--color-warning, #eab308);
}

platform-config-page .cf-status-row .status-dot.off {
  background: var(--color-text-muted, #94a3b8);
}

platform-config-page .cf-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1rem;
}

platform-config-page .tab.tab-live {
  margin-left: auto;
}

.live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-success, #22c55e);
  display: inline-block;
  flex-shrink: 0;
  animation: pulse-live 2s ease-in-out infinite;
}



/* ==========================================================================
   Preset Manager
   ========================================================================== */

.preset-manager {
  border: 1px solid var(--color-border, #334155);
  border-radius: 0.5rem;
  background: var(--color-surface, #1e293b);
  margin-top: 1rem;
}

.preset-manager__toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.625rem 0.75rem;
  background: none;
  border: none;
  color: var(--color-text, #e2e8f0);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
  border-radius: 0.5rem;
}

.preset-manager__toggle:hover {
  background: var(--color-surface-elevated, #273548);
}

.preset-manager__badge {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.375rem;
  border-radius: 9999px;
  background: var(--color-accent-primary, #6366f1);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
}

.preset-manager__body {
  border-top: 1px solid var(--color-border, #334155);
  padding: 0.5rem 0;
}

/* ── Apply mode ── */

.preset-manager__mode-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.75rem;
}

.preset-manager__mode-label {
  font-size: 0.75rem;
  color: var(--color-text-muted, #64748b);
  white-space: nowrap;
}

.preset-manager__mode-toggle {
  display: flex;
  border: 1px solid var(--color-border, #334155);
  border-radius: 0.375rem;
  overflow: hidden;
}

.preset-manager__mode-btn {
  padding: 0.25rem 0.625rem;
  font-size: 0.6875rem;
  font-weight: 500;
  background: transparent;
  color: var(--color-text-muted, #64748b);
  border: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.preset-manager__mode-btn:not(:last-child) {
  border-right: 1px solid var(--color-border, #334155);
}

.preset-manager__mode-btn:hover {
  color: var(--color-text, #e2e8f0);
  background: var(--color-surface-elevated, #273548);
}

.preset-manager__mode-btn--active {
  background: var(--color-accent-primary, #6366f1);
  color: #fff;
}

.preset-manager__mode-btn--active:hover {
  background: var(--color-accent-primary, #6366f1);
  color: #fff;
  filter: brightness(1.1);
}

/* ── Preset list ── */

.preset-manager__list {
  max-height: 12rem;
  overflow-y: auto;
}

.preset-manager__empty {
  padding: 0.75rem;
  font-size: 0.75rem;
  color: var(--color-text-muted, #64748b);
  font-style: italic;
  text-align: center;
}

.preset-manager__row {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  transition: background 0.1s;
}

.preset-manager__row:hover {
  background: var(--color-surface-elevated, #273548);
}

.preset-manager__row-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  min-width: 0;
}

.preset-manager__row-name {
  background: none;
  border: none;
  color: var(--color-text, #e2e8f0);
  font-size: 0.8125rem;
  cursor: pointer;
  padding: 0;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.preset-manager__row-name:hover {
  color: var(--color-accent-primary, #6366f1);
}

.preset-manager__row-badge {
  flex-shrink: 0;
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
}

.preset-manager__row-badge--builtin {
  background: rgba(99, 102, 241, 0.15);
  color: var(--color-accent-primary, #6366f1);
}

.preset-manager__row-actions {
  display: flex;
  gap: 0.25rem;
  opacity: 0;
  transition: opacity 0.15s;
}

.preset-manager__row:hover .preset-manager__row-actions {
  opacity: 1;
}

.preset-manager__row-apply,
.preset-manager__row-overwrite,
.preset-manager__row-delete {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 0.25rem;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--color-text-muted, #64748b);
  transition: color 0.15s, background 0.15s;
}

.preset-manager__row-apply:hover {
  color: var(--color-success, #22c55e);
  background: rgba(34, 197, 94, 0.1);
}

.preset-manager__row-overwrite:hover {
  color: var(--color-accent-primary, #6366f1);
  background: rgba(99, 102, 241, 0.1);
}

.preset-manager__row-delete:hover {
  color: var(--color-danger, #ef4444);
  background: rgba(239, 68, 68, 0.1);
}

/* ── Save form ── */

.preset-manager__save-form {
  border-top: 1px solid var(--color-border, #334155);
  padding: 0.625rem 0.75rem 0.5rem;
}

.preset-manager__save-row {
  display: flex;
  gap: 0.5rem;
}

.preset-manager__save-input {
  flex: 1;
  min-width: 0;
  padding: 0.375rem 0.625rem;
  font-size: 0.8125rem;
  background: var(--color-surface-elevated, #273548);
  border: 1px solid var(--color-border, #334155);
  border-radius: 0.375rem;
  color: var(--color-text, #e2e8f0);
  outline: none;
  transition: border-color 0.15s;
}

.preset-manager__save-input:focus {
  border-color: var(--color-accent-primary, #6366f1);
}

.preset-manager__save-input::placeholder {
  color: var(--color-text-muted, #64748b);
}

.preset-manager__save-btn {
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  background: var(--color-accent-primary, #6366f1);
  color: #fff;
  border: none;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: filter 0.15s;
}

.preset-manager__save-btn:hover {
  filter: brightness(1.15);
}

.preset-manager__save-error {
  margin-top: 0.375rem;
  font-size: 0.75rem;
  color: var(--color-danger, #ef4444);
}

/* ── Delete confirmation overlay ── */

.preset-manager__confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
}

.preset-manager__confirm-dialog {
  background: var(--color-surface, #1e293b);
  border: 1px solid var(--color-border, #334155);
  border-radius: 0.5rem;
  padding: 1.25rem;
  max-width: 24rem;
  width: 90vw;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

.preset-manager__confirm-dialog p {
  font-size: 0.875rem;
  color: var(--color-text, #e2e8f0);
  margin: 0 0 0.75rem;
}

.preset-manager__confirm-note {
  font-size: 0.75rem;
  color: var(--color-text-muted, #64748b);
  font-style: italic;
}

.preset-manager__confirm-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
}

.preset-manager__confirm-delete {
  padding: 0.375rem 1rem;
  font-size: 0.8125rem;
  font-weight: 600;
  background: var(--color-danger, #ef4444);
  color: #fff;
  border: none;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: filter 0.15s;
}

.preset-manager__confirm-delete:hover {
  filter: brightness(1.15);
}

.preset-manager__confirm-overwrite {
  padding: 0.375rem 1rem;
  font-size: 0.8125rem;
  font-weight: 600;
  background: var(--color-accent-primary, #6366f1);
  color: #fff;
  border: none;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: filter 0.15s;
}

.preset-manager__confirm-overwrite:hover {
  filter: brightness(1.15);
}

.preset-manager__confirm-cancel {
  padding: 0.375rem 1rem;
  font-size: 0.8125rem;
  font-weight: 500;
  background: transparent;
  color: var(--color-text-muted, #64748b);
  border: 1px solid var(--color-border, #334155);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

.preset-manager__confirm-cancel:hover {
  color: var(--color-text, #e2e8f0);
  border-color: var(--color-text-muted, #64748b);
}

/* ==========================================================================
   Login / Auth Gate
   ========================================================================== */

/* Full-screen centered container for loading/gate states (auth, errors) */
.fullscreen-center {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: var(--color-surface, #0f172a);
}

.fullscreen-card {
  width: 100%;
  max-width: 380px;
  padding: 2.5rem;
  background: var(--color-surface-elevated, #1e293b);
  border: 1px solid var(--color-border, #475569);
  border-radius: 0.75rem;
}

/* ==========================================================================
   Mount Manager — All Mounts / New Only dual-button filter

   Used by the shared `app-mount-manager` component's preview dialog.
   Lives in shared components.css (not training-manager/inference-manager
   page CSS) so it applies wherever the component is rendered.
   ========================================================================== */
.preview-toggle {
  display: inline-flex;
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: 0.375rem;
  overflow: hidden;
  margin-bottom: 1rem;
}

.preview-toggle button {
  padding: 0.375rem 0.75rem;
  font-size: 0.8rem;
  font-family: var(--font-family);
  border: none;
  background: var(--color-surface, #fff);
  color: var(--color-text-muted, #64748b);
  cursor: pointer;
  font-weight: 500;
}

.preview-toggle button+button {
  border-left: 1px solid var(--color-border, #e2e8f0);
}

.preview-toggle button.active {
  background: var(--color-accent-primary, #6366f1);
  color: #fff;
}

/* ==========================================================================
   <platform-terminal> — xterm.js host. Fills its container; header carries
   the status + label. Variables come from main.css tokens so light/dim
   themes both look right out of the box.
   ========================================================================== */
platform-terminal {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 0;
}

.platform-terminal-pane {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 0;
  background: var(--color-terminal-bg, #1e293b);
  border: 1px solid var(--color-border, #334155);
  border-radius: 0.5rem;
  overflow: hidden;
}

.platform-terminal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.4rem 0.75rem;
  font-size: 0.8rem;
  color: var(--color-text-muted, #94a3b8);
  /* background: color-mix(in srgb, var(--color-surface-muted, #1e293b) 80%, transparent); */
  background: var(--color-surface-muted, #1e293b);
  border-bottom: 1px solid var(--color-border, #334155);
}

.platform-terminal-label {
  font-weight: 600;
  color: var(--color-text, #e5e7eb);
}

.platform-terminal-status {
  font-variant-numeric: tabular-nums;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.platform-terminal-status--connecting {
  color: var(--color-warning, #f59e0b);
}

.platform-terminal-status--open {
  color: var(--color-success, #22c55e);
}

.platform-terminal-status--detached {
  color: var(--color-warning, #f59e0b);
}

.platform-terminal-status--closed {
  color: var(--color-text-muted, #94a3b8);
}

.platform-terminal-status--error {
  color: var(--color-danger, #ef4444);
}

/* Copy/Paste controls plus the binding hint. Ctrl+V is a literal ^V to the
   shell, so the shortcut is spelled out rather than left for users to
   discover by failing at it (#348). The hint doubles as the transient
   "Copied" / "Pasted" line, so it keeps a min-width to stop the buttons
   shifting as the text swaps. */
.platform-terminal-clip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.platform-terminal-clipbtn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.15rem 0.45rem;
  font-family: inherit;
  font-size: 0.72rem;
  line-height: 1;
  color: var(--color-text-muted, #94a3b8);
  background: color-mix(in srgb, var(--color-surface-muted, #1e293b) 60%, transparent);
  border: 1px solid var(--color-border, #334155);
  border-radius: 0.3rem;
  cursor: pointer;
}

.platform-terminal-clipbtn:hover {
  color: var(--color-text, #e5e7eb);
  border-color: color-mix(in srgb, var(--color-text, #e5e7eb) 30%, transparent);
}

.platform-terminal-clipbtn app-icon {
  width: 0.85rem;
  height: 0.85rem;
}

.platform-terminal-hint {
  min-width: 11ch;
  font-size: 0.68rem;
  line-height: 1;
  color: var(--color-text-muted, #94a3b8);
  white-space: nowrap;
}

/* Replay-window selector. margin-left:auto pushes it (and the trailing
   Reconnect button) to the right, leaving label + status on the left. */
.platform-terminal-replay {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-left: auto;
  font-size: 0.72rem;
  line-height: 1;
  /* match the text item's box height to the select so align-items centers them */
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted, #94a3b8);
}

.platform-terminal-replay select {
  font-size: 0.72rem;
  line-height: 1;
  margin: 0;
  padding: 0.1rem 0.3rem;
  color: var(--color-text, #e5e7eb);
  background: color-mix(in srgb, var(--color-surface-muted, #1e293b) 60%, transparent);
  border: 1px solid var(--color-border, #334155);
  border-radius: 0.3rem;
  cursor: pointer;
}

.platform-terminal-host {
  flex: 1 1 auto;
  min-height: 0;
  padding: 0.5rem;
}

/* xterm renders an inner .xterm-viewport / .xterm-screen; let them
   fill the host. */
.platform-terminal-host .xterm,
.platform-terminal-host .xterm-viewport,
.platform-terminal-host .xterm-screen {
  width: 100% !important;
  height: 100% !important;
}

/* ==========================================================================
   Agents — interactive terminal overlay. Fullscreen panel that hosts the
   <platform-terminal>; toggled from the deployed-agent card's "Terminal"
   button. The component itself is theme-aware so the surrounding chrome
   just needs to fill the viewport and provide a header bar.
   ========================================================================== */
.agents-terminal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  background: color-mix(in srgb, var(--color-surface, #0b1220) 92%, transparent);
  backdrop-filter: blur(2px);
  padding: 1rem;
  gap: 0.75rem;
  animation: fade-in 120ms ease-out;
}

.agents-terminal-overlay-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0.75rem;
  background: var(--color-surface-elevated, #0f172a);
  border: 1px solid var(--color-border, #334155);
  border-radius: 0.5rem;
  color: var(--color-text, #e5e7eb);
  font-size: 0.9rem;
}

.agents-terminal-overlay-bar>span {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.agents-terminal-overlay-bar small {
  color: var(--color-text-muted, #94a3b8);
  font-size: 0.78rem;
}

.agents-terminal-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.375rem;
  border: 1px solid var(--color-border, #334155);
  background: transparent;
  color: var(--color-text-muted, #94a3b8);
  cursor: pointer;
}

.agents-terminal-close:hover {
  background: color-mix(in srgb, var(--color-surface-muted, #1e293b) 80%, transparent);
  color: var(--color-text, #e5e7eb);
}

.agents-terminal-overlay .agents-terminal-pane {
  flex: 1 1 auto;
  min-height: 0;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Reconnect affordance in the <platform-terminal> header. Visible only
   when the socket is closed/detached/errored — the click hands off to
   the component's reconnect() which re-mints an OTP and re-opens the
   WS. Same dim chrome as the rest of the header. */
.platform-terminal-reconnect {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.55rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text, #e5e7eb);
  background: color-mix(in srgb, var(--color-accent-primary, #60a5fa) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-accent-primary, #60a5fa) 40%, transparent);
  border-radius: 0.3rem;
  cursor: pointer;
  margin-left: 0.5rem;
}

.platform-terminal-reconnect:hover {
  background: color-mix(in srgb, var(--color-accent-primary, #60a5fa) 30%, transparent);
}

/* Standalone autonomy toggle on the agent deploy form. Wider hit
   target than the generic agents-form-toggle so the "I really meant
   to flip this" affordance is unmistakable. */
.agents-form-yolo {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--color-border, #334155);
  border-radius: 0.5rem;
  background: color-mix(in srgb, var(--color-surface-elevated, #0f172a) 80%, transparent);
  cursor: pointer;
}

.agents-form-yolo input[type="checkbox"] {
  margin-top: 0.2rem;
  flex-shrink: 0;
}

.agents-form-yolo strong {
  display: block;
  color: var(--color-text, #e5e7eb);
}

.agents-form-yolo small {
  display: block;
  margin-top: 0.25rem;
  color: var(--color-text-muted, #94a3b8);
  font-size: 0.78rem;
  line-height: 1.4;
}

/* ==========================================================================
   N. app-code-editor — contenteditable YAML/JSON editor with hljs colouring
   ========================================================================== */

app-code-editor {
  display: block;
}

app-code-editor .code-editor {
  position: relative;
  border: 1px solid var(--color-border, #334155);
  border-radius: 0.4rem;
  background: var(--color-surface, #0f172a);
  overflow: auto;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

app-code-editor .code-editor:focus-within {
  border-color: var(--color-accent-primary, #6366f1);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent-primary, #6366f1) 18%, transparent);
}

app-code-editor .code-editor.has-error {
  border-color: var(--color-danger, #ef4444);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-danger, #ef4444) 18%, transparent);
}

app-code-editor .code-editor.is-readonly {
  opacity: 0.7;
}

app-code-editor .code-editor-pre {
  margin: 0;
  padding: 0;
  outline: none;
  caret-color: var(--color-text, #e2e8f0);
  min-height: 100%;
}

app-code-editor .code-editor-pre[contenteditable="false"] {
  pointer-events: none;
  cursor: default;
}

app-code-editor .code-editor-pre>code {
  display: block;
  font-family: ui-monospace, "JetBrains Mono", "Fira Code", "Cascadia Code", monospace;
  font-size: 0.78rem;
  line-height: 1.5;
  padding: 0.5rem 0.6rem;
  tab-size: 2;
  white-space: pre;
  color: var(--color-text, #e2e8f0);
}

app-code-editor .code-editor-placeholder {
  position: absolute;
  top: 0.5rem;
  left: 0.6rem;
  font-family: ui-monospace, "JetBrains Mono", "Fira Code", "Cascadia Code", monospace;
  font-size: 0.78rem;
  color: var(--color-text-muted, #64748b);
  pointer-events: none;
}

app-code-editor .code-editor-error {
  margin-top: 0.3rem;
  font-size: 0.72rem;
  color: var(--color-danger, #f87171);
}

app-code-editor .code-editor-label {
  margin-top: 0.3rem;
  font-size: 0.72rem;
  color: var(--color-text-muted, #64748b);
}

/* secrets-panel — used in session-details, agent-detail, platform-config.
   The class-prefix prop defaults to `secrets-panel`; rules below match
   that, with everything scoped under `.secrets-panel` so other surfaces
   that pass a different prefix get to opt in to a different look. */
.secrets-panel {
  display: block;
}

.secrets-panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

/* Keep the "+ Add secret" trigger on one line even when the title's hint
   text is long enough to squeeze the flex layout. */
.secrets-panel-header>app-button {
  flex-shrink: 0;
  white-space: nowrap;
}

.secrets-panel-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-text, #e5e7eb);
}

.secrets-panel-hint {
  display: block;
  color: var(--color-text-muted, #94a3b8);
  font-size: 0.78rem;
  margin-top: 0.15rem;
}

.secrets-panel-error {
  margin: 0.5rem 0;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--color-danger, #ef4444);
  border-radius: 0.375rem;
  background: color-mix(in srgb, var(--color-danger, #ef4444) 8%, transparent);
  color: var(--color-danger, #ef4444);
  font-size: 0.82rem;
}

.secrets-panel-loading,
.secrets-panel-empty {
  padding: 0.9rem 1rem;
  border: 1px dashed var(--color-border, #334155);
  border-radius: 0.5rem;
  background: color-mix(in srgb, var(--color-surface-elevated, #0f172a) 60%, transparent);
  color: var(--color-text-muted, #94a3b8);
  font-size: 0.85rem;
}

.secrets-panel-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.secrets-panel-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--color-border, #334155);
  border-radius: 0.4rem;
  background: var(--color-surface-elevated, #0f172a);
}

.secrets-panel-row-main {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.secrets-panel-row-id {
  font-family: var(--font-mono, ui-monospace, monospace);
  color: var(--color-text, #e5e7eb);
}

.secrets-panel-row-desc {
  color: var(--color-text-muted, #94a3b8);
  font-size: 0.82rem;
}

.secrets-panel-row-meta {
  color: var(--color-text-muted, #64748b);
  font-size: 0.75rem;
}

/* The row's delete button deliberately uses the global .icon-row-delete-btn
   rather than the class-prefix seam, so it looks the same on every surface. */

.secrets-panel-create {
  margin: 0.5rem 0 1rem;
  padding: 0.75rem;
  border: 1px solid var(--color-border, #334155);
  border-radius: 0.5rem;
  background: var(--color-surface-elevated, #0f172a);
}

.secrets-panel-create-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem 0.75rem;
}

.secrets-panel-create-grid label {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.82rem;
  color: var(--color-text-muted, #94a3b8);
}

.secrets-panel-create-grid input {
  padding: 0.4rem 0.5rem;
  font-size: 0.85rem;
}

.secrets-panel-input-wrap {
  display: flex;
  align-items: stretch;
  gap: 0;
}

.secrets-panel-input-wrap input {
  flex: 1;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.secrets-panel-peek {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.6rem;
  border: 1px solid var(--color-border, #334155);
  border-left: none;
  border-radius: 0 0.375rem 0.375rem 0;
  background: var(--color-surface-elevated, #0f172a);
  color: var(--color-text-muted, #94a3b8);
  cursor: pointer;
  transition: color 0.15s ease;
}

.secrets-panel-peek:hover {
  color: var(--color-text, #e5e7eb);
}

.secrets-panel-required {
  color: var(--color-danger, #ef4444);
}

.secrets-panel-create-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.6rem;
}

.secrets-panel-footer {
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--color-border, #334155);
}

.secrets-panel-footer summary {
  cursor: pointer;
  color: var(--color-text-muted, #94a3b8);
  font-size: 0.82rem;
}

.secrets-panel-syntax {
  margin: 0.5rem 0 0.4rem 1rem;
  padding: 0;
  list-style: disc;
  color: var(--color-text-muted, #94a3b8);
  font-size: 0.82rem;
}

.secrets-panel-syntax code {
  font-size: 0.78rem;
}

/* ─────────────────────────────────────────────────────────────────
 * egress-policy-editor — inherited-default diffing allow-list editor.
 * Self-contained styles (global, token-driven) so it looks identical
 * wherever the shared policy tabs render it.
 * ──────────────────────────────────────────────────────────────── */
egress-policy-editor {
  display: block;
}

.egress-editor__hint {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.78rem;
  color: var(--color-text-muted, #94a3b8);
}

.egress-editor__hint code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.74rem;
}

.egress-editor__allow-all {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.5rem;
  font-size: 0.8rem;
  cursor: pointer;
}

.egress-editor__allow-all input {
  margin: 0;
}

.egress-editor__allow-all code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.74rem;
  color: var(--color-text-muted, #94a3b8);
}

.egress-editor__inherited-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted, #94a3b8);
}

.egress-editor__override {
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.78rem;
  padding: 0.25rem 0.7rem;
  color: var(--color-accent-primary, #6366f1);
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--color-accent-primary, #6366f1) 55%, transparent);
  border-radius: 0.4rem;
  cursor: pointer;
}

.egress-editor__override:hover {
  background: color-mix(in srgb, var(--color-accent-primary, #6366f1) 12%, transparent);
}

/* Scroll the list inside the form, never the whole page. */
.egress-editor__list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  max-height: 16rem;
  overflow-y: auto;
  padding: 0.15rem;
}

.egress-editor__summary {
  margin-bottom: 0.45rem;
  font-size: 0.74rem;
  color: var(--color-text-muted, #94a3b8);
}

.egress-editor__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: stretch;
  border-left: 3px solid transparent;
  padding-left: 0.5rem;
}

.egress-editor__err {
  flex-basis: 100%;
}

.egress-editor__row input {
  flex: 1;
  min-width: 0;
  background: var(--color-surface-elevated, #0b1220);
  color: var(--color-text, #e2e8f0);
  border: 1px solid color-mix(in srgb, var(--color-border, #475569) 60%, transparent);
  border-radius: 0.4rem;
  padding: 0.4rem 0.6rem;
  font-size: 0.85rem;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

.egress-editor__row input:focus {
  outline: 2px solid var(--color-accent-primary, #6366f1);
  outline-offset: 1px;
}

.egress-editor__row--locked input,
.egress-editor__row input:disabled {
  opacity: 0.55;
  cursor: default;
}

.egress-editor__row--removed input {
  text-decoration: line-through;
}

.egress-editor__row--added {
  border-left-color: var(--color-success, #22c55e);
}

.egress-editor__row--edited {
  border-left-color: var(--color-warning, #f59e0b);
}

.egress-editor__row--removed {
  border-left-color: var(--color-danger, #ef4444);
}

/* Status pill */
.egress-editor__status {
  flex: 0 0 auto;
  align-self: center;
  width: 4.25rem;
  text-align: center;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  padding: 0.15rem 0;
  border-radius: 0.3rem;
}

.egress-editor__status--inherited {
  color: var(--color-text-muted, #94a3b8);
}

.egress-editor__status--added {
  color: var(--color-success, #22c55e);
  background: color-mix(in srgb, var(--color-success, #22c55e) 15%, transparent);
}

.egress-editor__status--edited {
  color: var(--color-warning, #f59e0b);
  background: color-mix(in srgb, var(--color-warning, #f59e0b) 15%, transparent);
}

.egress-editor__status--removed {
  color: var(--color-danger, #ef4444);
  background: color-mix(in srgb, var(--color-danger, #ef4444) 15%, transparent);
}

.egress-editor__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  padding: 0 0.5rem;
  border: 1px solid color-mix(in srgb, var(--color-border, #475569) 60%, transparent);
  border-radius: 0.4rem;
  background: transparent;
  color: var(--color-text-muted, #94a3b8);
  cursor: pointer;
  font-size: 0.78rem;
}

.egress-editor__btn:hover {
  color: var(--color-danger, #ef4444);
  border-color: color-mix(in srgb, var(--color-danger, #ef4444) 60%, transparent);
}

.egress-editor__btn--undo:hover {
  color: var(--color-accent-primary, #6366f1);
  border-color: color-mix(in srgb, var(--color-accent-primary, #6366f1) 60%, transparent);
}

.egress-editor__actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}

.egress-editor__add {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.4rem 0.85rem;
  font-size: 0.8rem;
  color: var(--color-accent-primary, #6366f1);
  background: transparent;
  border: 1px dashed color-mix(in srgb, var(--color-accent-primary, #6366f1) 55%, transparent);
  border-radius: 0.4rem;
  cursor: pointer;
  align-self: flex-start;
}

.egress-editor__add:hover {
  background: color-mix(in srgb, var(--color-accent-primary, #6366f1) 12%, transparent);
}

.egress-editor__discard {
  padding: 0.4rem 0.85rem;
  font-size: 0.8rem;
  color: var(--color-text-muted, #94a3b8);
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--color-border, #475569) 55%, transparent);
  border-radius: 0.4rem;
  cursor: pointer;
}

.egress-editor__discard:hover {
  color: var(--color-text, #e2e8f0);
}