/* The Ready setup's bot bar and switcher (Round 7 batch, item "bots"; assets/pages/bots.js), in the dark UI
   (15 October 2026): the bar is a compact panel row, as the reference's dashboard draws one (the bot's
   circle, a small caps label, its name in the window-title role, the switcher's quiet pill); the switcher
   is the kit's Popover with one row per unfinished bot. Logical properties only, so the Arabic page
   mirrors; every value is a token from assets/tokens.css. */

.bots-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--stack) var(--split);
  padding: var(--stack) var(--in-s); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel);
}
.bots-bar[hidden] { display: none; }
.bots-bar-logo { display: inline-flex; flex: none; }
.bots-bar .bots-avatar { width: var(--h-md); height: var(--h-md); font-size: 13px; }
.bots-bar-text { display: grid; flex: 1 1 220px; gap: var(--pair); min-width: 0; }
.bots-bar-label { color: var(--text-2); font: var(--type-micro); font-weight: 600; letter-spacing: var(--track-caps); text-transform: uppercase; }
.bots-bar-name { overflow: hidden; color: var(--text); font: var(--type-subtitle); letter-spacing: var(--track-subtitle); text-overflow: ellipsis; white-space: nowrap; }
.bots-bar-note { color: var(--text-2); font: var(--type-caption); }
.bots-bar-note.is-warn { color: var(--warn); }
/* The plan's assistants all live: Change plan beside the sentence (pages/bots.js). */
.bots-change-plan { color: var(--cobalt-2); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.bots-switch { flex: none; gap: var(--row); }
.bots-switch .bots-count { min-width: 20px; }
/* Arabic: no capitals and no tracking (they break the letters' joins). */
:lang(ar) .bots-bar-label { letter-spacing: 0; text-transform: none; }
:lang(ar) :is(.bots-bar-label, .bots-bar-name, .bots-bar-note) { font-family: var(--font-arabic); letter-spacing: 0; }

.bots-popover { width: min(420px, calc(100vw - 24px)); max-width: min(420px, calc(100vw - 24px)); max-height: calc(100vh - 24px); overflow-y: auto; }
.bots-popover-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--stack); }
.bots-popover-count { color: var(--text-2); font: var(--type-micro); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bots-popover-lede, .bots-popover-empty { margin-block: var(--pair) var(--stack); }
.bots-list { display: grid; gap: var(--row); max-height: min(360px, 50vh); margin: 0 0 var(--stack); padding: 0; overflow-y: auto; list-style: none; }
.bots-item {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--row) var(--stack);
  padding: var(--stack); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--panel);
}
/* The bot this page edits: the cobalt ring, and "Editing now" said in words. */
.bots-item[aria-current="true"] { border-color: var(--cobalt-2); box-shadow: inset 0 0 0 1px var(--cobalt-2); }
.bots-item .bots-avatar { width: 32px; height: 32px; font-size: 11px; }
/* The logo on its circle (assets/logo-circle.js, painted by pages/bots.js). The picture has a fixed
   box inside the disc, so a tall or wide original never grows past it. A photo is its square,
   covering the disc like a profile picture (the upper part, where a portrait's face is); a logo
   is its clear copy, whole and centred on the fill taken from its colour. The circle is the
   customer's own look: its fill comes from their logo, never from the dark theme. */
.bots-avatar[data-logo-circle] { overflow: hidden; background: var(--logo-circle, #fff); box-shadow: 0 0 0 1px var(--line-2); }
.bots-avatar[data-logo-circle] img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: 50% 20%; }
.bots-avatar[data-logo-circle]:not([data-logo-circle="photo"]) img { inset: 15%; width: 70%; height: 70%; border-radius: 0; object-fit: contain; object-position: 50% 50%; }
.bots-avatar[data-logo-circle="pending"] img { visibility: hidden; }
.bots-item-text { display: grid; gap: var(--pair); min-width: 0; }
.bots-item-name { overflow: hidden; color: var(--text); font: var(--type-small); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.bots-item-meta { color: var(--text-2); font: var(--type-micro); }
.bots-item-actions { display: flex; flex-wrap: wrap; grid-column: 1 / -1; justify-content: flex-end; gap: var(--row); }
.bots-current { align-self: center; border-color: color-mix(in srgb, var(--cobalt-2) 45%, transparent); background: var(--cobalt-soft); color: var(--cobalt-2); }
.bots-new { width: 100%; text-decoration: none; }
.bots-full {
  margin: 0; padding: var(--row) var(--stack); border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent);
  border-radius: var(--r-md); background: var(--warn-soft); color: var(--warn); font: var(--type-caption); font-weight: 600;
}

@media (max-width: 560px) {
  .bots-bar { padding: var(--stack); }
  .bots-switch { flex: 1 1 100%; }
}

@media (forced-colors: active) {
  .bots-item[aria-current="true"] { outline: 2px solid CanvasText; }
}