/* Bot Teams — the Bots room.
 *
 * Kept out of app.css on purpose (see bots.js's header): one small pair of
 * files for one feature that a different team is building the backend for at
 * the same time. Every variable referenced here (--paper, --white, --sunk,
 * --hairline, --obsidian, --stone, --smoke, --brand, --brand-on, --alarm) is
 * already defined by paper.css and flips with the theme on its own — nothing
 * in this file hardcodes a colour that isn't a room hue.
 *
 * Colour means place (app.css's own rule, "ROOMS" block): Bots gets a clean
 * green, distinct from Projects' teal-green, Chats' magenta and Library's
 * amber. Both a light and a true-black dark value, the same way every other
 * room carries two — [data-theme] is the explicit switch, the media query is
 * the OS default, exactly mirroring paper.css's own duplication.
 */
[data-room="bots"]{--rc:#1E8F4E;--rt:#DFF3E6;--ri:#146B39}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) [data-room="bots"]{--rc:#3ECB78;--rt:#123423;--ri:#8FE8B4}
}
:root[data-theme="dark"] [data-room="bots"]{--rc:#3ECB78;--rt:#123423;--ri:#8FE8B4}

/* ── room shell: roster | conversation | info ─────────────────────────── */
/* overflow:hidden, not the .view rule's inherited overflow-y:auto — the same
   override .view.chat makes, for the same reason (app.css's own comment on
   .view.chat: "The one view that must NOT scroll as a whole"). Without it,
   THIS box — not the document — was the thing that scrolled: every column
   below carries its own scroller (.bots-roster-list, .bots-events, .bots-info
   itself), so a scrollbar here as well just meant the whole grid, roster
   included, rode up together with whichever column had the most content.
   min-height:0 for the same reason .log's container needs it (app.css line
   ~20): a flex item won't shrink below its content's height otherwise, so
   this box would grow past .app's fixed viewport height instead of clipping
   to it, and overflow:hidden would have nothing to do. */
.view.bots-room{padding:0;margin:0;max-width:none;width:100%;height:100%;min-height:0;
  display:block;align-items:stretch;overflow:hidden}
/* #botsRoot (bots.js) is a plain wrapper with no class of its own — the
   height:100% chain from .view.bots-room down to .bots-shell breaks here
   without this rule, because a block element's height is auto (sized to
   content) unless told otherwise. An auto-height #botsRoot let .bots-shell's
   own height:100% resolve against nothing, so the grid grew to fit its
   tallest column's content instead of being clipped to the viewport — the
   same failure mode, one level higher. */
#botsRoot{height:100%;min-height:0}
.bots-shell{display:grid;grid-template-columns:280px minmax(0,1fr) 320px;height:100%;min-height:0}
.bots-col{min-width:0;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.bots-roster{border-right:1px solid var(--hairline);padding:14px 10px}
.bots-conversation{padding:0}
.bots-info{border-left:1px solid var(--hairline);padding:16px;overflow-y:auto}
.bots-back{display:none;appearance:none;border:0;background:none;font:inherit;font-size:14px;
  color:var(--stone);cursor:pointer;padding:4px 0}

/* Narrower than three columns fit: collapse to one at a time, like the phone.
   1100px rather than the app's usual 820px because a third live column of
   real content needs more room than a settings page does. */
@media(max-width:1099px){
  .bots-shell{grid-template-columns:1fr}
  .bots-col{display:none}
  .bots-shell[data-pane="roster"] .bots-roster{display:flex}
  .bots-shell[data-pane="conversation"] .bots-conversation{display:flex}
  .bots-shell[data-pane="info"] .bots-info{display:flex}
  .bots-back{display:inline-flex;align-items:center;gap:2px}
  .bots-roster,.bots-info{border:0}
}
@media(min-width:1100px){
  .bots-back-info{display:none}
  .bots-back[data-back="roster"]{display:none}
}

/* ── roster ─────────────────────────────────────────────────────────────── */
.bots-roster-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:2px 6px 10px}
.bots-title{margin:0;font-family:var(--display);font-size:19px;font-weight:700;letter-spacing:-.01em;color:var(--obsidian)}
.bots-roster-head-r{display:flex;align-items:center;gap:12px}
.bots-new-wrap{position:relative}
.bots-new-btn{appearance:none;border:1px solid var(--hairline);background:var(--rt);color:var(--ri);
  border-radius:999px;padding:6px 13px;font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.bots-new-btn:hover{filter:brightness(0.97)}
.bots-new-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:20;background:var(--white);
  border:1px solid var(--hairline);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.18);min-width:170px;
  display:flex;flex-direction:column;padding:6px}
.bots-new-menu button{appearance:none;border:0;background:none;text-align:left;padding:8px 10px;border-radius:7px;
  font:inherit;font-size:13.5px;color:var(--obsidian);cursor:pointer}
.bots-new-menu button:hover{background:var(--sunk)}

.bots-suggest{margin:0 6px 10px;padding:10px 12px;border-radius:10px;background:var(--rt);border:1px solid var(--hairline)}
.bots-suggest-t{margin:0 0 2px;font-size:13.5px;font-weight:700;color:var(--ri)}
.bots-suggest-actions{display:flex;gap:8px;margin-top:8px}

.bots-roster-list{display:flex;flex-direction:column;gap:2px;overflow-y:auto;flex:1;min-height:0}
.bots-row{appearance:none;border:0;background:none;display:flex;align-items:center;gap:10px;
  padding:8px 8px;border-radius:10px;cursor:pointer;text-align:left;width:100%;font:inherit;color:var(--obsidian)}
.bots-row:hover{background:var(--sunk)}
.bots-row.is-on{background:var(--rt)}
.bots-row-needsyou{background:none}
.bots-row-needsyou.is-on{background:var(--rt)}
.bots-needsyou-dot{width:34px;height:34px;border-radius:10px;display:inline-grid;place-items:center;
  background:var(--alarm,#b91c1c);color:#fff;flex:0 0 auto;font-size:16px}
.bots-row-main{min-width:0;flex:1;display:flex;flex-direction:column;gap:1px}
.bots-row-name{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bots-row-tag{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--stone);
  background:var(--sunk);border-radius:999px;padding:1px 6px;margin-left:4px}
.bots-row-preview{font-size:12.5px;color:var(--stone);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bots-row-meta{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.bots-working{color:var(--rc);animation:bots-spin 1.4s linear infinite;display:inline-block}
@keyframes bots-spin{to{transform:rotate(360deg)}}
.bots-unread{background:var(--rc);color:#fff;font-size:11px;font-weight:700;border-radius:999px;
  min-width:18px;height:18px;display:inline-grid;place-items:center;padding:0 5px}

.bots-roster-empty{padding:14px 6px}
.bots-empty-templates{display:flex;flex-direction:column;gap:6px;margin-top:10px}

/* Avatars — colour + shape identify a bot the way a person's photo would;
   the shape carries meaning for anybody who can't rely on the colour alone. */
.bots-av{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  background:var(--bot-color,#5B6B7C);color:#fff;font-size:13px;font-weight:700;border-radius:9px}
.bots-av-circle{border-radius:999px}
.bots-av-square{border-radius:7px}
.bots-av-pill{border-radius:16px}
.bots-av-diamond{border-radius:6px;transform:rotate(45deg)}
.bots-av-diamond span,.bots-av-diamond{display:inline-flex}
.bots-av-triangle{clip-path:polygon(50% 6%, 95% 94%, 5% 94%);border-radius:0}
/* SPEC.md's canonical name is "hexagon" — .bots-av-hex is kept as an alias
   for anything still asking for the old class. */
.bots-av-hexagon,.bots-av-hex{clip-path:polygon(25% 3%,75% 3%,100% 50%,75% 97%,25% 97%,0% 50%)}
.bots-av-leaf{border-radius:2px 16px 2px 16px}
.bots-av-drop{border-radius:2px 16px 16px 16px}
/* SPEC.md: "a client that meets a shape it doesn't know draws a circle
   rather than refusing" — 'star' is a legal shape this picker doesn't offer,
   so it falls back the same way an UNKNOWN one would. */
.bots-av-star{border-radius:999px}
.bots-av-group{background:var(--sunk);color:var(--stone);border-radius:9px}

/* ── conversation ───────────────────────────────────────────────────────── */
.bots-conv-head{display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid var(--hairline);flex:0 0 auto}
.bots-conv-t{display:flex;flex-direction:column;gap:0;min-width:0;flex:1}
.bots-conv-t b{font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bots-conv-t small{font-size:12px;color:var(--stone)}

.bots-events{flex:1;overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.bots-conv-empty{text-align:center;margin-top:40px}
.bots-msg{max-width:min(88%,40rem);display:flex;flex-direction:column;gap:3px}
.bots-msg-me{align-self:flex-end}
.bots-msg-bot,.bots-msg-system{align-self:flex-start}
.bots-msg-who{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--stone)}
.bots-msg-who b{color:var(--obsidian);font-weight:600}
.bots-msg-body{padding:10px 13px;border-radius:15px;font-size:14.5px;line-height:1.5}
.bots-msg-me .bots-msg-body{background:var(--sunk);color:var(--obsidian);border-bottom-right-radius:5px}
.bots-msg-bot .bots-msg-body{background:var(--white);color:var(--obsidian);box-shadow:0 1px 2px var(--edge,rgba(0,0,0,.06));border-bottom-left-radius:5px}
.bots-sys{align-self:center;font-size:12px;color:var(--stone);padding:4px 10px;border-radius:999px;background:var(--sunk)}

.bots-card{align-self:stretch;max-width:min(92%,44rem);border:1px solid var(--hairline);border-radius:13px;
  padding:12px 14px;background:var(--white)}
.bots-card-k{margin:0 0 3px;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ri)}
.bots-card-who{margin:0;font-size:12px;color:var(--stone)}
.bots-card-t{margin:0 0 4px;font-size:14.5px;font-weight:700}
.bots-card-b{margin:0;font-size:13.5px;color:var(--obsidian);line-height:1.5}
.bots-card-pre{white-space:pre-wrap;font-family:var(--mono,monospace);font-size:12.5px;background:var(--sunk);
  border-radius:8px;padding:8px 10px;margin:8px 0 0;max-height:160px;overflow:auto}
.bots-approval-card{border-color:var(--rc)}
.bots-approval-card.is-decided{border-color:var(--hairline)}
.bots-approval-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.bots-always-scope{margin-top:10px;padding-top:10px;border-top:1px dashed var(--hairline);display:flex;
  flex-direction:column;gap:6px;font-size:13px}
.bots-always-scope label{display:flex;align-items:center;gap:6px}
.bots-scope-cap{width:90px;border:1px solid var(--hairline);border-radius:7px;padding:4px 7px;font:inherit}
.bots-undo{margin:8px 0 0;font-size:13px;color:var(--stone)}
.bots-undo-n{font-variant-numeric:tabular-nums;font-weight:700;color:var(--obsidian)}
.bots-link{appearance:none;border:0;background:none;color:var(--rc);font:inherit;font-size:inherit;
  text-decoration:underline;cursor:pointer;padding:0}
.bots-result-card{border-color:var(--rc);background:var(--rt)}
/* Files an agent handed over. One row each: name on the left, size on the
   right, the whole row a download. */
.bots-files{display:flex;flex-direction:column;gap:6px;margin:8px 0 4px}
.bots-file{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:9px;
  border:1px solid var(--hairline);background:var(--paper);text-decoration:none;color:inherit}
.bots-file:hover{border-color:var(--rc)}
.bots-file-n{flex:1;font-size:13.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bots-file-s{font-size:12px;color:var(--stone);flex:none}

.bots-task-strip{display:flex;gap:6px;flex-wrap:wrap;padding:8px 16px;border-top:1px solid var(--hairline);flex:0 0 auto}
.bots-task{font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:999px;background:var(--sunk);color:var(--stone)}
.bots-task-doing{background:var(--rt);color:var(--ri)}
.bots-task-waiting_you{background:#fde3d0;color:#8a4a12}
.bots-task-blocked{background:#fde0e0;color:#a02a2a}
.bots-task-done{text-decoration:line-through;opacity:.7}

.bots-composer{display:flex;gap:8px;align-items:flex-end;padding:10px 16px 14px;border-top:1px solid var(--hairline);
  position:relative;flex:0 0 auto}
.bots-composer textarea{flex:1;resize:none;border:1px solid var(--hairline);border-radius:14px;padding:10px 14px;
  font:inherit;font-size:14.5px;max-height:120px;background:var(--white);color:var(--obsidian)}
.bots-send{appearance:none;border:0;background:var(--rc);color:#fff;border-radius:999px;padding:9px 16px;
  font:inherit;font-weight:600;font-size:13.5px;cursor:pointer;flex:0 0 auto}
.bots-mentions{position:absolute;left:16px;bottom:100%;margin-bottom:6px;background:var(--white);
  border:1px solid var(--hairline);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.18);
  display:flex;flex-direction:column;padding:4px;min-width:180px;max-height:220px;overflow-y:auto;z-index:15}
.bots-mention{appearance:none;border:0;background:none;display:flex;align-items:center;gap:8px;padding:6px 8px;
  border-radius:7px;font:inherit;font-size:13.5px;text-align:left;cursor:pointer;color:var(--obsidian)}
.bots-mention:hover{background:var(--sunk)}
.bots-empty-conv{padding:30px 20px;text-align:center}

/* ── info pane ──────────────────────────────────────────────────────────── */
.bots-info-head{display:flex;align-items:center;gap:12px;margin:0 0 16px}
.bots-info-head h2{margin:0;font-size:17px}
.bots-info-sec{padding:12px 0;border-top:1px solid var(--hairline)}
.bots-info-sec:first-of-type{border-top:0}
.bots-info-sec h3{margin:0 0 7px;font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--stone)}
.bots-field{display:flex;flex-direction:column;gap:4px;font-size:13px;margin:0 0 8px}
.bots-field>span{font-weight:600;color:var(--obsidian)}
.bots-field input,.bots-field select,.bots-ta{border:1px solid var(--hairline);border-radius:9px;padding:7px 10px;
  font:inherit;font-size:13.5px;background:var(--white);color:var(--obsidian);width:100%;box-sizing:border-box}
.bots-ta{resize:vertical;min-height:70px}
.bots-field-free{margin-top:6px}
.bots-mc{display:flex;flex-direction:column;gap:4px}
.bots-mc-opt{display:flex;align-items:center;gap:8px;font-size:13.5px;padding:6px 8px;border-radius:8px;cursor:pointer}
.bots-mc-opt.is-on{background:var(--rt);color:var(--ri);font-weight:600}
.bots-check{display:flex;align-items:center;gap:7px;font-size:13.5px;padding:3px 0}
.bots-sched-edit{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:6px}
.bots-sched-edit select,.bots-sched-edit input[type="number"],.bots-sched-edit input[type="time"]{
  border:1px solid var(--hairline);border-radius:8px;padding:6px 9px;font:inherit;font-size:13px}
.bots-rules-list{display:flex;flex-direction:column;gap:4px;margin-bottom:8px}
.bots-rule-row{display:flex;justify-content:space-between;align-items:center;font-size:13px;
  padding:6px 8px;border-radius:8px;background:var(--sunk)}
.bots-member-row{display:flex;align-items:center;gap:8px;padding:4px 0;font-size:13.5px}
.bots-taskboard{display:flex;flex-direction:column;gap:5px;align-items:flex-start}
.bots-runs{display:flex;flex-direction:column;gap:3px}
.bots-run-row{display:flex;justify-content:space-between;font-size:12.5px;padding:4px 0;
  border-bottom:1px solid var(--hairline)}
.bots-info-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px;padding-top:14px;border-top:1px solid var(--hairline)}
.bots-danger{color:#b91c1c;border-color:#f0c2c2}
.bots-cost-line{font-size:13px;color:var(--ri);background:var(--rt);border-radius:9px;padding:8px 11px;margin:6px 0 0}

/* ── templates ──────────────────────────────────────────────────────────── */
.bots-tpl-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:12px}
@media(max-width:520px){.bots-tpl-grid{grid-template-columns:1fr}}
.bots-tpl{appearance:none;border:1px solid var(--hairline);background:var(--white);border-radius:12px;
  padding:12px 14px;text-align:left;cursor:pointer;display:flex;flex-direction:column;gap:3px;font:inherit;color:var(--obsidian)}
.bots-tpl:hover{border-color:var(--rc);background:var(--rt)}
.bots-tpl-n{font-size:13.5px;font-weight:700}
.bots-tpl-j{font-size:12.5px;color:var(--stone)}
.bots-tpl.is-compact{padding:9px 11px}

/* ── create modal ───────────────────────────────────────────────────────── */
.bots-modal-wrap{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.5);display:flex;
  align-items:center;justify-content:center;padding:20px}
.bots-modal{background:var(--paper);border-radius:16px;max-width:560px;width:100%;max-height:88vh;
  overflow-y:auto;padding:20px 22px 24px;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.bots-modal-head{display:flex;align-items:center;justify-content:space-between;margin:0 0 4px}
.bots-modal-head h2{margin:0;font-size:18px;flex:1}
/* Always visible, unlike .bots-back (display:none above 1099px on purpose —
   see that rule's own comment): a modal isn't a stacking column pane, so its
   own back control needs no width-dependent hiding. */
.bots-modal-back{appearance:none;border:0;background:none;font:inherit;font-size:18px;
  color:var(--stone);cursor:pointer;padding:4px 8px 4px 0;line-height:1}
.bots-modal-actions{display:flex;justify-content:space-between;gap:10px;margin-top:18px}
.bots-modal-actions-single{justify-content:stretch}
.bots-modal-actions-single .btn{flex:1}

/* ── create sheet: mark preview, name, shape+colour swatches ─────────────── */
.bots-mark-preview{display:flex;justify-content:center;margin:6px 0 18px}
.bots-name-input{display:block;width:100%;box-sizing:border-box;text-align:center;border:1px solid var(--hairline);
  border-radius:14px;padding:13px 16px;font:inherit;font-size:17px;font-weight:600;background:var(--white);
  color:var(--obsidian);margin:0 0 16px}
.bots-swatches{display:flex;flex-direction:column;gap:10px;align-items:center;margin:0 0 18px}
.bots-swatch-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.bots-swatch{appearance:none;border:2px solid transparent;background:none;border-radius:999px;padding:3px;
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.bots-swatch-color{width:26px;height:26px;border-radius:50%;background:var(--bot-color)}
.bots-swatch-color::before{content:"";display:block;width:26px;height:26px;border-radius:50%;background:var(--bot-color)}
.bots-swatch.is-on{border-color:var(--stone)}
.bots-tpl-link{display:block;text-align:center;margin:4px auto 0;font-size:13px}

/* ── first-run setup chips (SPEC.md's greeting: data.setup.choices) ──────── */
.bots-setup-chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:4px 16px 10px;flex:0 0 auto}
.bots-setup-chip{appearance:none;border:1px solid var(--hairline);background:var(--white);color:var(--obsidian);
  border-radius:999px;padding:8px 14px;font:inherit;font-size:13.5px;cursor:pointer}
.bots-setup-chip:hover{border-color:var(--rc);background:var(--rt)}
.bots-setup-hint{flex-basis:100%;margin-top:2px}

/* ── settings pane redesign: name card, summary line, toggle switch ──────── */
.bots-info-namecard{border:1px solid var(--hairline);border-radius:12px;overflow:hidden;margin:0 0 10px;background:var(--white)}
.bots-info-name,.bots-info-title{display:block;width:100%;box-sizing:border-box;border:0;background:none;
  font:inherit;color:var(--obsidian);padding:10px 12px}
.bots-info-name{font-weight:700;font-size:15px;border-bottom:1px solid var(--hairline)}
.bots-info-title{font-size:13.5px;color:var(--stone)}
.bots-summary-line{appearance:none;border:0;background:none;display:block;width:100%;text-align:left;
  font:inherit;font-size:12.5px;color:var(--stone);cursor:pointer;padding:0 0 14px}
.bots-summary-line:hover{color:var(--ri)}
.bots-instructions-row{appearance:none;border:1px solid var(--hairline);background:var(--white);border-radius:12px;
  width:100%;box-sizing:border-box;display:flex;align-items:center;gap:10px;padding:10px 12px;cursor:pointer;
  text-align:left;font:inherit;color:var(--obsidian)}
.bots-instructions-icon{font-size:16px;flex:0 0 auto}
.bots-instructions-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.bots-instructions-txt b{font-size:13.5px}
.bots-instructions-txt small{font-size:12px;color:var(--stone);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bots-instructions-chevron{color:var(--stone);flex:0 0 auto}
.bots-instr-ta{min-height:220px}
.bots-notify-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0 2px}
.bots-switch{position:relative;display:inline-flex;width:38px;height:22px;flex:0 0 auto;cursor:pointer}
.bots-switch input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.bots-switch-track{position:absolute;inset:0;border-radius:999px;background:var(--sunk);transition:background .15s}
.bots-switch-track::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;
  background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .15s}
.bots-switch input:checked+.bots-switch-track{background:var(--rc)}
.bots-switch input:checked+.bots-switch-track::after{transform:translateX(16px)}
.bots-advanced-toggle{appearance:none;border:1px solid var(--hairline);background:var(--white);border-radius:12px;
  width:100%;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;
  padding:11px 14px;margin:14px 0 0;font:inherit;font-size:13.5px;font-weight:700;color:var(--obsidian);cursor:pointer}
.bots-advanced-chevron{display:inline-block;transition:transform .15s;color:var(--stone)}
.bots-advanced-toggle.is-open .bots-advanced-chevron{transform:rotate(90deg)}
.bots-advanced{margin-top:4px}

/* ── tools (per-bot switches + Always on + door to the catalogue) ────────── */
.bots-tool-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 0;
  border-bottom:1px solid var(--hairline)}
.bots-tool-row:last-of-type{border-bottom:0}
.bots-tool-row.is-blocked{opacity:.75}
.bots-tool-fixed{opacity:.6}
.bots-tool-txt{display:flex;flex-direction:column;gap:1px;font-size:13.5px}
.bots-tool-txt small{font-size:12px;color:var(--stone)}
.bots-switch-input{width:38px;height:22px;flex:0 0 auto;accent-color:var(--rc)}
.bots-tool-group-label{margin:8px 0 2px;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.bots-tool-store{display:block;margin-top:10px}

/* ── account-level Bots settings (Usage / Safety / Notifications) ────────── */
.bots-settings-h{margin:0 0 10px;font-size:14px}
.bots-usage-row{appearance:none;border:0;background:none;display:flex;justify-content:space-between;
  width:100%;padding:0;font:inherit;font-size:13.5px;font-weight:700;color:var(--obsidian);cursor:pointer}
.bots-usage-bar{height:6px;border-radius:999px;background:var(--sunk);margin:8px 0;overflow:hidden}
.bots-usage-bar span{display:block;height:100%;background:var(--rc)}

/* ── media downloads: acceptance view + per-use card ──────────────────────
   The prose is amelia-mobile's own MEDIA_TERMS, byte for byte — see
   web/bots.js's own header comment and ~/Desktop/Amelia-Agents-Media-Terms-
   DRAFT.md. Only the container and headings are web-idiom (bots-card, the
   room's existing scroll/border language). */
.bots-media-terms-text{max-height:320px;overflow-y:auto;border:1px solid var(--hairline);border-radius:10px;
  padding:12px 14px;margin:10px 0;background:var(--sunk);font-size:13.5px;line-height:1.55;color:var(--obsidian)}
.bots-media-terms-text p{margin:0 0 10px}
.bots-media-terms-text p:last-child{margin-bottom:0}
.bots-media-terms-text ul{margin:0 0 10px;padding-left:20px}
.bots-media-terms-text li{margin:0 0 4px}
.bots-mt-h{margin:14px 0 4px;font-size:13.5px;font-weight:700;color:var(--obsidian)}
.bots-media-terms-text .bots-mt-h:first-child{margin-top:0}
/* The live numbers the prose deliberately does not carry — read off the
   server's state every time, never typed into a string. */
.bots-mt-facts{border:1px solid var(--hairline);border-radius:10px;padding:10px 14px;margin:0 0 10px;background:var(--surface,transparent)}
.bots-mt-facts-k{margin:0 0 4px;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--stone)}
.bots-mt-facts p{margin:0 0 4px;font-size:12.5px;line-height:1.5;color:var(--stone)}
.bots-mt-facts p:last-child{margin-bottom:0}
.bots-media-check{display:flex;align-items:flex-start;gap:9px;margin:14px 0;font-size:13.5px;line-height:1.4;cursor:pointer}
.bots-media-check input{margin-top:2px;width:16px;height:16px;flex:0 0 auto;accent-color:var(--rc)}
.bots-media-accepted-card{border:1px solid var(--hairline);border-radius:10px;padding:12px 14px;margin:0 0 4px}
.bots-media-accepted{display:flex;align-items:center;gap:6px;color:var(--rc);font-weight:700;font-size:13px;margin:0 0 4px}
.bots-media-note{margin:10px 0 0}
.bots-card-t-quote{margin:0 0 6px;font-size:13.5px;font-style:italic;color:var(--obsidian)}
.bots-media-cta{margin-top:8px}

/* ── locked state ───────────────────────────────────────────────────────── */
.bots-locked{display:flex;align-items:center;justify-content:center;min-height:60vh;padding:24px}
.bots-locked-card{max-width:520px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px}
.bots-locked-tile{width:52px;height:52px;border-radius:16px;background:var(--rt);color:var(--rc);
  display:inline-grid;place-items:center;margin-bottom:6px}
.bots-locked-facts{list-style:none;margin:8px 0;padding:0;display:flex;flex-direction:column;gap:6px;
  font-size:13.5px;color:var(--stone);text-align:left}
.bots-locked-facts li::before{content:"\2713  ";color:var(--rc);font-weight:700}

/* ── misc ───────────────────────────────────────────────────────────────── */
.bots-fine{font-size:12.5px;color:var(--stone);line-height:1.5;margin:0}
.bots-error{color:#b91c1c}
.bots-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--obsidian);
  color:var(--paper);padding:10px 16px;border-radius:10px;font-size:13.5px;z-index:80;box-shadow:0 8px 24px rgba(0,0,0,.3)}