/* 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)}

/* ── the microphone ───────────────────────────────────────────────────────
   The button itself is app.css's .mic (same markup, same is-live/is-rec/
   is-busy states, same pulse) so the one in a chat and the one on a question
   card are the same object. Only its place in these two rows is new. */
.bots-mic{flex:0 0 auto;align-self:flex-end;margin:0 2px 4px;color:var(--stone)}
.bots-mic:hover{color:var(--obsidian)}
.bots-mic.is-live,.bots-mic.is-rec{color:var(--rc)}

/* ── answering a question, in the card that asked it ──────────────────────
   Replaces the browser prompt() box: no mic in it, one line, and the question
   itself hidden behind the dialog while you answered it. */
.bots-answer{display:flex;gap:8px;align-items:flex-end;margin:10px 0 2px}
.bots-answer-box{flex:1;resize:none;border:1px solid var(--hairline);border-radius:12px;padding:8px 12px;
  font:inherit;font-size:14px;max-height:120px;background:var(--white);color:var(--obsidian);
  box-sizing:border-box}
.bots-answer-box:focus{outline:2px solid var(--rc);outline-offset:1px}

/* ── "Tell Amelia what you need" ──────────────────────────────────────────
   A conversation, then a named list with real prices, then one press that
   creates. Deliberately the same card vocabulary as the rest of the room. */
.bots-advise-talk{max-height:38vh;overflow-y:auto;margin:8px 0 4px;display:flex;flex-direction:column;gap:8px}
.bots-advise-turn{margin:0;padding:10px 12px;border-radius:12px;font-size:14px;line-height:1.45;max-width:88%}
.bots-advise-turn.is-amelia{background:var(--sunk);color:var(--obsidian);align-self:flex-start}
.bots-advise-turn.is-you{background:var(--rc);color:#fff;align-self:flex-end}
.bots-advise-starters{display:flex;flex-direction:column;gap:6px;margin-top:2px}
.bots-advise-starter{appearance:none;text-align:left;font:inherit;font-size:13.5px;cursor:pointer;
  border:1px solid var(--hairline);border-radius:12px;padding:9px 12px;background:var(--white);color:var(--obsidian)}
.bots-advise-starter:hover{border-color:var(--rc);color:var(--ri)}
.bots-advise-thinking{margin:2px 0 0}
.bots-advise-ask{display:flex;gap:8px;align-items:flex-end;margin-top:10px}
.bots-advise-ask 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);box-sizing:border-box}
.bots-advise-team{border:1px solid var(--rc);border-radius:14px;padding:12px 14px;margin-top:12px;background:var(--white)}
.bots-advise-k{margin:0;font-size:10.5px;font-weight:700;letter-spacing:.4px;color:var(--stone)}
.bots-advise-team-name{margin:2px 0 4px;font-size:16px;font-weight:600;color:var(--obsidian)}
.bots-advise-card{border:1px solid var(--hairline);border-radius:14px;padding:12px 14px;margin-top:10px;background:var(--white)}
.bots-advise-card-head{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.bots-advise-name{font-size:15px;font-weight:600;color:var(--obsidian)}
.bots-advise-lead{font-size:10px;font-weight:700;letter-spacing:.4px;color:var(--ri);background:var(--rt);
  border-radius:999px;padding:2px 7px;margin-left:6px}
.bots-advise-why{font-style:italic}
.bots-advise-brief{white-space:pre-wrap}
.bots-advise-problem{margin:10px 0 0;font-size:13px;color:var(--alarm)}
.bots-advise-total{margin:0;align-self:center}

/* ── starting from a template ─────────────────────────────────────────────
   The three <fieldset>/<legend> blocks this screen used to draw had no rule
   in any loaded stylesheet, so each one rendered with the browser's native
   grooved border and a legend sitting astride it, beneath a flat borderless
   text field. That was most of "the UI is horrible". */
.bots-field-block{display:block}
.bots-field-k{display:block;font-weight:600;color:var(--obsidian);font-size:13px;margin:0 0 4px}
.bots-mc-opt.is-off{opacity:.55;cursor:not-allowed}
.bots-tpl-team{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.bots-tpl-member{display:flex;align-items:center;gap:10px}
.bots-tpl-member-t{display:flex;flex-direction:column;min-width:0}
.bots-tpl-member-n{font-size:14px;font-weight:600;color:var(--obsidian);display:flex;align-items:center}
.bots-tpl-one{display:flex;align-items:center;gap:12px;margin:10px 0 0}
.bots-tpl-when{margin:12px 0 0}
.bots-empty-or{margin-top:14px}

/* ── the forms read left ──────────────────────────────────────────────────
   The whole Agents view sits inside a text-align:center container (app.css's
   own rule for the section wrapper), which is right for a card and wrong for
   a form: the radio rows drew their label hard against the far edge, two
   words deep, with the dot alone on the left. Set where it matters rather
   than fought globally — the cards in this room are centred on purpose. */
.bots-field-block,.bots-mc,.bots-mc-opt,.bots-tpl-team,.bots-tpl-member,.bots-tpl-one,
.bots-advise-card,.bots-advise-team,.bots-advise-turn,.bots-advise-starter,.bots-answer{text-align:left}
.bots-mc-opt>span{flex:1}

/* A price inside a proposal card is a footnote, not a banner: the room's
   .bots-cost-line is a filled green block, which reads as the loudest thing
   on a card whose point is what the agent DOES. */
.bots-advise-card .bots-cost-line{background:none;padding:0;margin:6px 0 0;color:var(--stone);font-size:12px}

/* The modal scrolls, so its own head has to stay reachable — the Close button
   scrolling off the top of a long conversation is how a modal traps somebody. */
.bots-modal-head{position:sticky;top:-20px;z-index:2;background:var(--paper);padding:12px 0 6px;margin-top:-12px}

/* A radio is not a text field. `.bots-field input{width:100%}` (written for the
   Name box) also matched the radio buttons inside these groups, so each radio
   stretched the full row and shoved its own label against the far edge, three
   words deep. That is most of what "the UI is horrible" looked like. */
.bots-field input[type="radio"],.bots-field input[type="checkbox"]{width:auto;flex:0 0 auto}
.bots-tpl-lede,.bots-tpl-when{text-align:left}

/* ── folding the details column ───────────────────────────────────────────
   Three columns leaves the conversation — the only one you actually read in —
   about half a laptop window. The fold is a preference about the screen, so it
   is remembered per browser and applied before the first paint. */
/* Inside the wide-window query, and only there. Below 1100px the columns are
   panes you navigate between, and `.bots-shell[data-pane="info"] .bots-info`
   turns the pane on — an unscoped fold rule sits later in this file, wins on
   source order, and would hide the pane somebody had just tapped "Info ›" to
   reach. */
@media(min-width:1100px){
  .bots-shell[data-info="off"]{grid-template-columns:280px minmax(0,1fr)}
  .bots-shell[data-info="off"] .bots-info{display:none}
}
.bots-info-toggle{display:none;appearance:none;border:1px solid var(--hairline);background:none;
  border-radius:999px;padding:4px 10px;font:inherit;font-size:12.5px;color:var(--stone);cursor:pointer;
  flex:0 0 auto;white-space:nowrap}
.bots-info-toggle:hover{color:var(--obsidian);border-color:var(--rc)}
/* Only above the pane-switching breakpoint: below it the column is a pane you
   navigate to ("Info ›"), and folding a pane you cannot see is meaningless. */
@media(min-width:1100px){ .bots-info-toggle{display:inline-flex;align-items:center} }