.bot-market { padding: var(--page-padding-top) 0 var(--space-5); }
.bot-market-heading { margin-bottom: var(--page-heading-gap); }
.bot-market-surface { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow); overflow: hidden; }
.bot-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); padding: var(--space-4) var(--space-5); }
.bot-types, .bot-categories, .bot-detail-tabs { display: flex; gap: var(--space-2); }
.bot-types button, .bot-categories button, .bot-detail-tabs button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--control-height); padding: var(--space-2) var(--space-4); border: 0; border-radius: var(--control-radius); background: transparent; color: var(--muted); font: inherit; font-size: var(--text-control); font-weight: 500; white-space: nowrap; cursor: pointer; }
.bot-types button[aria-pressed="true"], .bot-detail-tabs button[aria-pressed="true"] { background: var(--brand-soft); color: var(--brand-dark); font-weight: 600; }
.bot-icon { display: block; width: 16px; height: 16px; flex: none; }
[data-bot-icon] { display: inline-flex; align-items: center; flex: none; }
.bot-search { display: flex; align-items: center; gap: var(--space-2); width: min(320px, 35%); border: 1px solid var(--control-border); border-radius: var(--control-radius); padding: 0 11px; background: var(--control-surface); }
.bot-search svg { width: 16px; height: 16px; color: var(--muted); flex: none; }
.bot-search input { width: 100%; min-width: 0; height: var(--control-height); border: none; background: transparent; font: inherit; font-size: var(--text-control); outline: none; }
.bot-search:focus-within, .bot-market button:focus-visible { outline: 2px solid var(--control-focus); outline-offset: 2px; }
.bot-categories { border-block: 1px solid var(--line); padding: var(--space-2) var(--space-5); overflow-x: auto; scrollbar-width: thin; }
.bot-categories button { padding-inline: var(--space-3); }
.bot-categories button[aria-pressed="true"] { background: var(--bg); color: var(--ink); font-weight: 600; }
.bot-discovery { padding: var(--space-5); }
.bot-section-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-4); }
.bot-section-heading h2 { font-size: 18px; }
.bot-text-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 32px; padding: var(--space-1) var(--space-2); border: 0; border-radius: var(--control-radius); background: transparent; color: var(--muted); font: inherit; font-size: var(--text-small); cursor: pointer; white-space: nowrap; }
.bot-text-button:hover { color: var(--brand); background: var(--brand-soft); }
.bot-text-button:disabled { opacity: .55; cursor: default; }
.bot-featured-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
.bot-card { position: relative; display: flex; flex-direction: column; gap: 0; text-align: left; border: 1px solid var(--line); border-radius: 12px; padding: var(--space-4); background: var(--surface); color: var(--ink); font: inherit; cursor: pointer; transition: border-color .18s, box-shadow .18s; }
.bot-card:hover { border-color: var(--control-focus); box-shadow: var(--shadow); }
.bot-character-stage { display: flex; align-items: center; justify-content: center; flex: none; }
.bot-card .bot-character-stage { height: 152px; margin-bottom: var(--space-4); border-radius: var(--control-radius); background: var(--bg); }
.bot-mascot { display: block; position: relative; }
.bot-mascot > img { display: block; width: 100%; height: 100%; object-fit: contain; }
.bot-mascot-frames { position: absolute; inset: 0; visibility: hidden; width: 100%; height: 100%; }
.bot-card .bot-mascot { width: 148px; height: 148px; }
.bot-card-copy { display: flex; flex-direction: column; min-width: 0; }
.bot-card-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-2); color: var(--ink); font-size: 18px; font-weight: 600; line-height: 1.4; }
.bot-card-name > span { font-size: var(--text-small); font-weight: 400; color: var(--muted); }
.bot-card-description { margin-top: var(--space-2); font-size: var(--text-small); color: var(--ink-soft); }
.bot-card-author { margin-top: var(--space-2); font-size: var(--text-small); color: var(--muted); }
.bot-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--space-3); }
.bot-tags > span { padding: 2px 7px; border-radius: 5px; background: var(--bg); color: var(--ink-soft); font-size: var(--text-small); font-weight: 400; }
.bot-card-state { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-4); color: var(--brand-dark); font-size: var(--text-small); }
.bot-next-companion { grid-column: span 3; display: flex; align-items: center; justify-content: center; flex-direction: column; border: 1px dashed var(--line-strong); border-radius: 12px; background: var(--bg); text-align: center; padding: var(--space-5); }
.bot-next-stars { display: flex; align-items: center; justify-content: center; gap: var(--space-4); margin-bottom: var(--space-4); }
.bot-next-stars img { object-fit: contain; }
.bot-next-stars img:first-child { transform: rotate(-10deg); }
.bot-next-stars img:last-child { transform: rotate(10deg); }
.bot-next-companion strong { font-weight: 500; font-size: 15px; color: var(--ink-soft); }
.bot-next-companion p { font-size: var(--text-small); color: var(--muted); margin-top: var(--space-1); }
.bot-list-heading { margin-top: var(--space-5); }
.bot-count { color: var(--muted); font-size: var(--text-small); }
.bot-results { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.bot-list-item { display: flex; align-items: center; gap: var(--space-4); width: 100%; border: 1px solid var(--line); border-radius: var(--control-radius); padding: var(--space-4); background: var(--surface); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.bot-list-item:hover { background: var(--bg); }
.bot-list-item .bot-mascot { width: 56px; height: 56px; }
.bot-list-item .bot-card-copy { flex: 1; }
.bot-list-item .bot-card-name { font-size: 15px; }
.bot-list-item .bot-card-author, .bot-list-item .bot-tags { display: none; }
.bot-list-item .bot-card-state { margin: 0; white-space: nowrap; }
.bot-list-item .bot-card-description { margin-top: var(--space-1); }
.bot-empty { text-align: center; padding: 48px var(--space-5); }
.bot-empty > img { margin-inline: auto; }
.bot-empty h2 { font-size: 18px; margin-top: var(--space-4); }
.bot-empty p { margin: var(--space-2) auto var(--space-5); color: var(--muted); font-size: var(--text-control); max-width: 430px; }
/* The site uses flex dialogs with overflow:hidden. Only this inner region scrolls. */
#bot-detail { width: min(720px, calc(100% - 32px)); max-height: min(880px, calc(100dvh - 48px)); padding: 0; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); background: var(--surface); }
.bot-detail-head { display: flex; flex: none; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 56px; padding: var(--space-2) var(--space-5); border-bottom: 1px solid var(--line); color: var(--ink-soft); font-size: var(--text-control); font-weight: 500; }
.bot-detail-head .close { margin-right: -8px; }
.bot-detail-scroll { min-height: 0; flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; overscroll-behavior-y: contain; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; scrollbar-gutter: stable; touch-action: pan-y; }
.bot-detail-scroll:focus-visible { outline: 2px solid var(--control-focus); outline-offset: -2px; }
.bot-detail-hero { display: grid; grid-template-columns: 160px 1fr; align-items: center; gap: var(--space-5); padding: var(--space-5); background: var(--bg); }
.bot-detail-character .bot-mascot { width: 160px; height: 160px; }
.bot-detail-hero h2 { font-size: 21px; margin-bottom: var(--space-2); }
.bot-detail-hero p { color: var(--muted); font-size: var(--text-control); }
.bot-detail-hero .bot-tags > span { background: var(--surface); }
.bot-detail-body { padding: var(--space-5); }
.bot-detail-tabs { border-bottom: 1px solid var(--line); padding-bottom: var(--space-4); margin-bottom: var(--space-5); }
#bot-capability-info h3 { font-size: 16px; margin-bottom: var(--space-2); }
#bot-capability-info > p { color: var(--muted); font-size: var(--text-small); }
.bot-specs { margin: var(--space-4) 0 var(--space-3); padding: 0; font-size: var(--text-control); }
.bot-specs > div { display: grid; grid-template-columns: 88px 1fr; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--line); }
.bot-specs dt { color: var(--muted); }
.bot-specs dd { margin: 0; min-width: 0; }
.bot-example { background: var(--bg); border: 1px solid var(--line); border-radius: var(--control-radius); padding: var(--space-3) var(--space-4) var(--space-4); margin-top: var(--space-5); font-size: var(--text-small); }
.bot-example-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); font-weight: 500; }
.bot-example-head .bot-text-button { margin-right: -8px; }
.bot-example p { color: var(--ink-soft); margin-top: var(--space-1); }
#bot-copy-status { display: block; color: var(--muted); }
#bot-copy-status:not(:empty) { margin-top: var(--space-2); }
.bot-detail-footer { display: flex; flex: none; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) var(--space-5); border-top: 1px solid var(--line); background: var(--surface); }
.bot-availability { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--muted); font-size: var(--text-small); }
.bot-availability i { width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--muted); }
.bot-detail-footer .btn { display: inline-flex; align-items: center; gap: var(--space-2); flex: none; }
.bot-market[data-motion="on"][data-sprites-ready="true"][data-page-active="true"] .bot-mascot[data-visible="true"] > img { opacity: 0; }
.bot-market[data-motion="on"][data-sprites-ready="true"][data-page-active="true"] .bot-mascot[data-visible="true"] .bot-mascot-frames { visibility: visible; }
@media (prefers-reduced-motion: reduce) { .bot-market *, .bot-market *::before, .bot-market *::after { animation: none !important; transition: none !important; } }
@media (max-width: 1100px) { .bot-featured-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } .bot-next-companion { grid-column: span 2; } }
@media (max-width: 760px) {
  .bot-toolbar { align-items: stretch; flex-direction: column; gap: var(--space-3); padding: var(--space-4); }
  .bot-search { width: 100%; } .bot-search input { font-size: 16px; }
  .bot-types { gap: var(--space-1); justify-content: space-between; } .bot-types button { padding-inline: var(--space-2); gap: 6px; }
  .bot-categories { padding: var(--space-2) var(--space-4); }
  .bot-discovery { padding: var(--space-4); } .bot-section-heading h2 { font-size: 16px; }
  .bot-featured-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--space-3); }
  .bot-card { padding: var(--space-3); } .bot-card .bot-character-stage { height: 118px; margin-bottom: var(--space-3); } .bot-card .bot-mascot { width: 116px; height: 116px; }
  .bot-card-name { font-size: 17px; } .bot-card-name > span { width: 100%; }
  .bot-next-companion { grid-column: span 1; padding: var(--space-4) var(--space-2); }
  .bot-next-stars { gap: 0; flex-wrap: wrap; width: 116px; margin-bottom: var(--space-3); }
  .bot-next-stars img { width: 52px; height: 52px; } .bot-next-stars img:nth-child(2) { width: 70px; height: 70px; order: -1; margin-inline: 20px; }
  .bot-next-companion strong { font-size: var(--text-control); }
  .bot-results { grid-template-columns: 1fr; } .bot-list-item { padding: var(--space-3); gap: var(--space-3); }
  .bot-list-item .bot-mascot { width: 48px; height: 48px; } .bot-list-item .bot-card-name > span { width: auto; }
  .bot-list-item .bot-card-state > span { display: none; }
  #bot-detail { width: calc(100% - 24px); max-height: calc(100dvh - 24px); }
  .bot-detail-head, .bot-detail-footer { padding: var(--space-3) var(--space-4); }
  .bot-detail-hero { grid-template-columns: 96px 1fr; gap: var(--space-4); padding: var(--space-5) var(--space-4); }
  .bot-detail-character .bot-mascot { width: 96px; height: 96px; } .bot-detail-hero h2 { font-size: 18px; }
  .bot-detail-body { padding: var(--space-4); } .bot-specs > div { grid-template-columns: 64px 1fr; gap: var(--space-2); }
}
@media (max-width: 719px), (pointer: coarse) { .bot-text-button { min-height: 44px; } }
@media (max-width: 370px) { .bot-types button { font-size: var(--text-small); padding-inline: 6px; gap: var(--space-1); } .bot-types .bot-icon { width: 14px; height: 14px; } }