:root {
  --agent-rail-frame-size:316px;
  --agent-rail-button-size:52px;
  --agent-rail-visual-size:38px;
  --agent-rail-gap:8px;
}

.panel-head {
  flex-wrap:wrap;
}

.agent-provider-toolbar {
  box-sizing:border-box;
  order:20;
  flex:1 0 100%;
  min-inline-size:0;
  display:flex;
  justify-content:center;
  align-items:center;
  padding-block-start:6px;
  border-block-start:1px solid var(--bb-theme-line, rgba(0,0,0,.07));
}

.agent-provider-toolbar[hidden] {
  display:none!important;
}

.agent-provider-frame {
  box-sizing:border-box;
  inline-size:var(--agent-rail-frame-size);
  max-inline-size:calc(100vw - 28px);
  block-size:68px;
  min-block-size:68px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  padding:7px;
  border:1px solid var(--bb-theme-line, rgba(0,0,0,.10));
  border-radius:8px;
  background:rgba(var(--bb-theme-surface-rgb, 255,255,255), 0.52);
}

.agent-provider-rail {
  box-sizing:border-box;
  inline-size:100%;
  min-inline-size:0;
  block-size:52px;
  min-block-size:52px;
  max-block-size:52px;
  display:flex;
  justify-content:center;
  justify-content:safe center;
  align-items:center;
  gap:var(--agent-rail-gap);
  overflow-x:auto;
  overflow-y:hidden;
  overscroll-behavior-inline:contain;
  scrollbar-width:none;
  touch-action:pan-x;
  scroll-snap-type:x proximity;
}

.agent-provider-rail::-webkit-scrollbar {
  display:none;
}

.agent-provider-tab {
  position:relative;
  box-sizing:border-box;
  flex:0 0 var(--agent-rail-button-size);
  inline-size:var(--agent-rail-button-size);
  block-size:var(--agent-rail-button-size);
  min-inline-size:var(--agent-rail-button-size);
  min-block-size:var(--agent-rail-button-size);
  display:grid;
  place-items:center;
  padding:4px;
  border:1px solid var(--bb-theme-line, rgba(0,0,0,.12));
  border-radius:8px;
  background:var(--bb-theme-surface, #fff);
  color:var(--bb-theme-ink, #1f211e);
  box-shadow:none;
  cursor:pointer;
  scroll-snap-align:start;
}

.agent-provider-tab:hover,
.agent-provider-tab:focus-visible {
  border-color:var(--bb-theme-line, rgba(0,0,0,.28));
  outline:2px solid var(--bb-theme-up, rgba(37,95,72,.18));
  outline-offset:1px;
}

.agent-provider-tab[aria-selected="true"] {
  border-color:var(--bb-theme-line, #252724);
  box-shadow:inset 0 0 0 1px rgba(var(--bb-theme-shadow-rgb, 37,39,36), 1.0);
}

.agent-provider-visual {
  box-sizing:border-box;
  inline-size:var(--agent-rail-visual-size);
  block-size:var(--agent-rail-visual-size);
  display:grid;
  place-items:center;
  overflow:hidden;
  border-radius:6px;
  background:var(--bb-theme-surface, #f1f2ee);
}

.agent-provider-visual img {
  inline-size:100%;
  block-size:100%;
  display:block;
  object-fit:contain;
  object-position:center center;
}

.agent-provider-visual img[hidden],
.agent-provider-fallback[hidden] {
  display:none!important;
}

.agent-provider-fallback {
  color:var(--bb-theme-ink, #343732);
  font-size:13px;
  font-weight:900;
  line-height:1;
}

.agent-provider-status-dot {
  position:absolute;
  inset-inline-end:2px;
  inset-block-end:2px;
  inline-size:9px;
  block-size:9px;
  border:2px solid var(--bb-theme-line, #fff);
  border-radius:50%;
  background:var(--bb-theme-surface, #8b918a);
}

[data-status-tone="green"],
.agent-provider-status-dot[data-status-tone="green"] {
  --agent-status-color:var(--bb-theme-up, #2d7a50);
}

[data-status-tone="yellow"],
.agent-provider-status-dot[data-status-tone="yellow"] {
  --agent-status-color:var(--bb-theme-secondary, #b58400);
}

[data-status-tone="gray"],
.agent-provider-status-dot[data-status-tone="gray"] {
  --agent-status-color:var(--bb-theme-muted, #8b918a);
}

[data-status-tone="red"],
.agent-provider-status-dot[data-status-tone="red"] {
  --agent-status-color:var(--bb-theme-down, #b33a3a);
}

.agent-provider-status-dot[data-status-tone] {
  background:var(--agent-status-color,var(--bb-theme-surface, #8b918a));
}

.agent-provider-summary {
  min-inline-size:0;
  display:grid;
  gap:2px;
  align-content:center;
}

.agent-provider-summary strong,
.agent-provider-summary span {
  min-inline-size:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  letter-spacing:0;
}

.agent-provider-summary strong {
  color:var(--bb-theme-ink, #222420);
  font-size:11px;
  line-height:1.25;
}

.agent-provider-summary span {
  color:var(--agent-status-color,var(--bb-theme-secondary, #757a73));
  font-size:9px;
  font-weight:800;
  line-height:1.25;
  text-transform:capitalize;
}

.agent-provider-manage,
.agent-provider-dialog-close {
  inline-size:32px;
  block-size:32px;
  min-inline-size:32px;
  min-block-size:32px;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid var(--bb-theme-line, rgba(0,0,0,.12));
  border-radius:8px;
  background:var(--bb-theme-surface, #fff);
  color:var(--bb-theme-ink, #252724);
  cursor:pointer;
  font:inherit;
  font-size:17px;
  line-height:1;
}

.agent-provider-manage:hover,
.agent-provider-manage:focus-visible,
.agent-provider-dialog-close:hover,
.agent-provider-dialog-close:focus-visible {
  border-color:var(--bb-theme-line, rgba(0,0,0,.28));
  outline:2px solid var(--bb-theme-up, rgba(37,95,72,.18));
  outline-offset:1px;
}

.agent-provider-modal {
  position:fixed;
  z-index:180;
  inset:0;
  display:grid;
  place-items:center;
  padding:18px;
  background:rgba(var(--bb-theme-surface-rgb, 17,20,18), 0.46);
  overscroll-behavior:contain;
}

.agent-provider-modal[hidden] {
  display:none!important;
}

.agent-provider-dialog {
  inline-size:min(500px,100%);
  max-block-size:min(82svh,680px);
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
  overflow:hidden;
  border:1px solid var(--bb-theme-line, rgba(0,0,0,.14));
  border-radius:8px;
  background:var(--bb-theme-surface, #f7f7f3);
  color:var(--bb-theme-ink, #20221f);
  box-shadow:0 24px 70px rgba(var(--bb-theme-shadow-rgb, 0,0,0), 0.28);
}

.agent-provider-dialog-head {
  min-inline-size:0;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  border-block-end:1px solid var(--bb-theme-line, rgba(0,0,0,.09));
}

.agent-provider-dialog-title {
  min-inline-size:0;
  display:grid;
  gap:4px;
}

.agent-provider-dialog-title strong,
.agent-provider-dialog-title span {
  min-inline-size:0;
  overflow-wrap:anywhere;
  letter-spacing:0;
}

.agent-provider-dialog-title strong {
  font-size:14px;
  line-height:1.3;
}

.agent-provider-dialog-title span {
  color:var(--agent-status-color,var(--bb-theme-secondary, #6f746d));
  font-size:11px;
  font-weight:800;
  text-transform:capitalize;
}

.agent-provider-dialog-body {
  min-block-size:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  touch-action:pan-y;
  padding:15px 16px calc(16px + env(safe-area-inset-bottom));
}

.agent-provider-guidance,
.agent-provider-allowlist,
.agent-provider-secret-preserve,
.agent-provider-dialog-error {
  margin:0 0 12px;
  color:var(--bb-theme-secondary, #656a63);
  font-size:11px;
  line-height:1.45;
  overflow-wrap:anywhere;
}

.agent-provider-allowlist {
  padding:9px 10px;
  border-inline-start:3px solid var(--bb-theme-line, #b58400);
  background:rgba(var(--bb-theme-surface-rgb, 181,132,0), 0.07);
  color:var(--bb-theme-ink, #5f4c10);
}

.agent-provider-dialog-error {
  padding:9px 10px;
  border-inline-start:3px solid var(--bb-theme-down, #b33a3a);
  background:rgba(var(--bb-theme-down-rgb, 179,58,58), 0.07);
  color:var(--bb-theme-down, #873333);
}

.agent-provider-connection-form {
  display:grid;
  gap:10px;
}

.agent-provider-field {
  min-inline-size:0;
  display:grid;
  gap:5px;
}

.agent-provider-field[hidden],
.agent-provider-oauth[hidden],
.agent-provider-allowlist[hidden],
.agent-provider-secret-preserve[hidden] {
  display:none!important;
}

.agent-provider-field span {
  color:var(--bb-theme-ink, #42453f);
  font-size:10px;
  font-weight:850;
}

.agent-provider-field input,
.agent-provider-field select {
  inline-size:100%;
  min-inline-size:0;
  min-block-size:40px;
  padding:8px 10px;
  border:1px solid var(--bb-theme-line, rgba(0,0,0,.14));
  border-radius:7px;
  background:var(--bb-theme-inset, #fff);
  color:var(--bb-theme-ink, #20221f);
  font:inherit;
  font-size:12px;
  letter-spacing:0;
}

.agent-provider-dialog-actions {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding-block-start:2px;
}

.agent-provider-dialog-actions button,
.agent-provider-oauth a {
  min-block-size:36px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:7px 11px;
  border:1px solid var(--bb-theme-line, #252724);
  border-radius:7px;
  background:var(--bb-theme-surface, #252724);
  color:var(--bb-theme-ink, #fff);
  cursor:pointer;
  font:inherit;
  font-size:11px;
  font-weight:850;
  letter-spacing:0;
  text-decoration:none;
}

.agent-provider-dialog-actions button.secondary {
  border-color:var(--bb-theme-line, rgba(0,0,0,.14));
  background:var(--bb-theme-surface, #fff);
  color:var(--bb-theme-ink, #252724);
}

.agent-provider-dialog-actions button:disabled {
  opacity:.48;
  cursor:wait;
}

.agent-provider-oauth {
  display:grid;
  gap:12px;
}

.agent-provider-oauth img {
  inline-size:min(220px,70vw);
  block-size:auto;
  justify-self:center;
  border:1px solid var(--bb-theme-line, rgba(0,0,0,.10));
  background:var(--bb-theme-surface, #fff);
}

.agent-provider-oauth img[hidden],
.agent-provider-oauth a[hidden] {
  display:none!important;
}

body.agent-provider-modal-open {
  overflow:hidden!important;
}

.agent-provider-empty {
  min-block-size:100%;
  display:grid;
  place-content:center;
  justify-items:center;
  gap:8px;
  padding:24px;
  text-align:center;
}

.agent-provider-empty strong {
  color:var(--bb-theme-ink, #252724);
  font-size:14px;
}

.agent-provider-empty span {
  max-inline-size:420px;
  color:var(--bb-theme-secondary, #6e736c);
  font-size:11px;
  line-height:1.45;
}

.agent-provider-empty button {
  min-block-size:36px;
  margin-block-start:4px;
  padding:7px 11px;
  border:1px solid var(--bb-theme-line, #252724);
  border-radius:7px;
  background:var(--bb-theme-surface, #252724);
  color:var(--bb-theme-ink, #fff);
  cursor:pointer;
  font:inherit;
  font-size:11px;
  font-weight:850;
}

@media (max-width:820px) {
  .agent-provider-toolbar {
    justify-content:center;
    padding-block-start:7px;
  }

  .agent-provider-frame {
    inline-size:min(var(--agent-rail-frame-size),calc(100vw - 28px));
  }

  .agent-provider-rail {
    justify-content:safe center;
  }

  .agent-provider-summary strong {
    font-size:10px;
  }

  .agent-provider-modal {
    place-items:end center;
    padding:0;
  }

  .agent-provider-dialog {
    inline-size:100%;
    max-block-size:min(84svh,680px);
    border-inline:0;
    border-block-end:0;
    border-radius:8px 8px 0 0;
  }
}

@media (prefers-reduced-motion:reduce) {
  .agent-provider-rail {
    scroll-behavior:auto;
  }
}

/* Platform captions occupy their own row, never the broker image. */
.agent-provider-frame:has(.agent-provider-mt5-add) {
  block-size:76px;
  min-block-size:76px;
}

.agent-provider-rail:has(.agent-provider-mt5-add) {
  block-size:60px;
  min-block-size:60px;
  max-block-size:60px;
}

.agent-provider-tab-mt5,
.agent-provider-mt5-add {
  grid-template-rows:32px 12px;
  gap:3px;
  block-size:58px;
  min-block-size:58px;
  flex-basis:58px;
  inline-size:58px;
  min-inline-size:58px;
}

.agent-provider-tab-mt5 .agent-provider-visual,
.agent-provider-mt5-add .agent-provider-visual {
  position:relative;
  inline-size:32px;
  block-size:32px;
  overflow:hidden;
}

.agent-provider-tab-mt5 .agent-provider-visual {
  background:var(--bb-theme-surface, #e8eef7);
}

.agent-provider-tab-mt5 .agent-provider-fallback {
  color:var(--bb-theme-ink, #1d3f6e);
  font-size:12px;
}

.agent-provider-mt5-badge {
  position:static;
  color:var(--bb-theme-ink, #1d3f6e);
  font-size:10px;
  font-weight:800;
  line-height:12px;
  letter-spacing:0;
  white-space:nowrap;
  pointer-events:none;
}

.agent-provider-mt5-add {
  border-style:dashed;
  border-color:var(--bb-theme-line, rgba(29,63,110,.45));
  background:rgba(var(--bb-theme-surface-rgb, 0,0,0), 0.0);
}

.agent-provider-mt5-add .agent-provider-visual {
  background:rgba(var(--bb-theme-surface-rgb, 0,0,0), 0.0);
}

.agent-provider-mt5-add .mt5-entry-mark {
  width:32px;
  height:32px;
  background:rgba(var(--bb-theme-surface-rgb, 0,0,0), 0.0);
  letter-spacing:0;
}

.agent-provider-tab-mt5 .agent-provider-status-dot {
  inset-block-start:26px;
  inset-block-end:auto;
}

.ai-workbench-entry .agent-provider-rail [data-agent-mt5-add][hidden] {
  display:grid!important;
}

.ai-workbench-entry .agent-provider-frame:has(.agent-provider-mt5-add) {
  height:76px;
  min-height:76px;
}

.ai-workbench-entry .agent-provider-rail:has(.agent-provider-mt5-add) {
  height:60px;
  min-height:60px;
  max-height:60px;
}