/* Two schematic product scenes; all selectors stay inside the new components.
   Brand avatars: public Telegram og:image, fetched 2026-09-25.
   No automatic motion; root owns optional dialog demo actions. */
.reference-projects > .ref-card.systems-card { min-height: 320px; gap: 16px; justify-content: flex-start; }
.reference-projects .systems-card .hd { align-items: flex-start; }
.reference-projects .systems-card .id > div { min-width: 0; }
.reference-projects .systems-card .t { overflow-wrap: anywhere; }
.reference-projects .systems-title-second { font-size: .9em; }
.reference-projects .bot-handles > span { display: block; white-space: nowrap; }
.reference-projects .systems-bot-mark img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.reference-projects .systems-body { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: 16px; align-items: center; flex: 1; }
.reference-projects .systems-copy { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.reference-projects .systems-copy .s { margin: 0; line-height: 1.45; text-wrap: pretty; }
.reference-projects .systems-copy { align-self: end; }
.reference-projects .systems-hint { font-size: 11px; line-height: 1.5; color: var(--ink2); text-wrap: pretty; }
.systems-scene { --scene-paper: var(--card, #fff); --scene-ink: var(--text, #1d1d1f); --scene-muted: var(--muted, #636366); --scene-line: var(--line, #dedee2); --scene-wash: var(--card2, #f3f3f5); position: relative; width: min(100%,300px); min-width: 0; color: var(--scene-ink); font: 12px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; pointer-events: none; user-select: none; }
.systems-scene svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.network-scene { display: grid; grid-template-columns: minmax(0,1fr) 24px; grid-template-rows: auto 34px auto; padding: 4px 0; }
.network-agent { position: relative; padding: 13px 14px; border: 1px solid var(--scene-line); border-radius: 12px; background: var(--scene-paper); }
.network-agent-a { grid-column: 1; grid-row: 1; }
.network-agent-b { grid-column: 1 / -1; grid-row: 3; margin-left: 24px; }
.network-agent-head { display: flex; align-items: center; gap: 8px; font: 11px/1.4 "IBM Plex Mono",monospace; }
.network-agent-head svg { width: 18px; height: 18px; }
.network-line { display: block; margin-top: 7px; font-size: 11px; color: var(--scene-muted); text-wrap: pretty; }
.network-transit { grid-column: 1 / -1; grid-row: 2; position: relative; display: flex; align-items: center; justify-content: center; }
.network-route { position: absolute; height: 34px; border-left: 1px dashed var(--scene-line); transform: rotate(-35deg); }
.network-packet { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--scene-line); border-radius: 8px; background: var(--accent); color: var(--inverse-text, #fff); transition: transform 160ms ease-out; }
.network-packet svg { width: 17px; height: 17px; }
.bots-scene { display: flex; flex-direction: column; gap: 10px; padding: 4px 0; }
.bot-message { display: flex; gap: 9px; align-items: flex-start; padding: 12px; border: 1px solid var(--scene-line); border-radius: 14px 14px 14px 4px; background: var(--scene-paper); min-width: 0; transition: transform 160ms ease-out; }
.bot-message-voice { margin-right: 12px; }
.bot-message-image { margin-left: 12px; }
.bot-avatar { width: 32px; height: 32px; border-radius: 9px; flex: none; object-fit: cover; }
.bot-message-content { min-width: 0; flex: 1; }
.bot-name { display: block; font-size: 11px; font-weight: 600; white-space: nowrap; }
.bot-voice { display: flex; align-items: center; gap: 5px; margin-block: 6px; height: 19px; }
.bot-voice > svg { width: 17px; height: 17px; fill: currentColor; stroke: none; }
.bot-wave { display: flex; gap: 3px; align-items: center; height: 19px; overflow: hidden; }
.bot-wave i { display: block; height: 6px; width: 2px; flex: none; border-radius: 2px; background: currentColor; opacity: .6; }
.bot-wave i:nth-child(3n) { height: 16px; }
.bot-wave i:nth-child(3n + 1) { height: 11px; }
.bot-caption,.bot-prompt { display: block; color: var(--scene-muted); font-size: 11px; line-height: 1.4; text-wrap: pretty; }
.bot-prompt { margin-top: 4px; }
.bot-image-mark { display: flex; align-items: center; gap: 6px; margin-top: 7px; color: var(--scene-muted); font-size: 11px; }
.bot-image-mark svg { width: 42px; height: 26px; }
@media (hover:hover) and (pointer:fine) {
  .reference-projects .network-card:hover .network-packet { transform: translate(4px,3px); }
  .reference-projects .ai-bots-card:hover .bot-message-image { transform: translate(-4px,-2px); }
}
/* Give keyboard focus an immediate boundary, without decorative movement. */
.reference-projects .systems-card:has(.project-link:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (max-width:640px) {
  .reference-projects > .ref-card.systems-card { min-height: 0; gap: 20px; }
  .reference-projects .systems-body { grid-template-columns: minmax(0,1fr); gap: 20px; }
  .reference-projects .systems-copy { gap: 10px; }
  .reference-projects .systems-scene { width: min(100%,300px); align-self: center; justify-self: center; }
  .network-scene { grid-template-columns: minmax(0,1fr) 40px; }
  .network-agent-b { margin-left: 40px; }
  .bots-scene { gap: 10px; }
  .bot-message { padding: 12px 14px; }
  .bot-message-voice { margin-right: 24px; }
  .bot-message-image { margin-left: 24px; }
}
html[data-motion="off"] .systems-card,
html[data-motion="off"] .systems-card .more,
html[data-motion="off"] .systems-scene .network-packet,
html[data-motion="off"] .systems-scene .bot-message { transition: none !important; transform: none !important; }
@media (prefers-reduced-motion:reduce) {
  html:not([data-motion="full"]) .reference-projects .systems-card,
  html:not([data-motion="full"]) .reference-projects .systems-card .more,
  html:not([data-motion="full"]) .systems-scene .network-packet,
  html:not([data-motion="full"]) .systems-scene .bot-message { transition: none !important; transform: none !important; }
}

/* A small brand-colour accent, confined to Nano Banana’s image result. */
.bots-scene .bot-image-mark svg { color: #615012; background: #fff2a8; border-radius: 5px; }
:root[data-theme="dark"] .bots-scene .bot-image-mark svg { color: #ffdf73; background: #403816; }

/* Two illustrative Telegram conversations, with outgoing and incoming bubbles. */
.bots-scene { gap: 16px; }
.bots-scene .bot-thread { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.bots-scene .bot-thread-head { display: flex; align-items: center; gap: 7px; padding-inline: 2px; }
.bots-scene .bot-avatar { width: 26px; height: 26px; border-radius: 50%; }
.bots-scene .bot-name { color: var(--scene-ink); font-size: 11px; }
.bots-scene .bot-label { margin-left: auto; font-size: 10px; color: var(--scene-muted); }
.bots-scene .bot-outgoing { display: flex; align-items: end; gap: 6px; align-self: end; max-width: 92%; padding: 8px 10px; border-radius: 12px 12px 4px 12px; background: var(--scene-wash); color: var(--scene-ink); font-size: 11px; line-height: 1.4; }
.bots-scene .bot-check { flex: none; color: var(--telegram-blue); font-size: 10px; }
.bots-scene .bot-message { display: block; align-self: start; width: 92%; margin: 0; padding: 9px 11px; border-radius: 12px 12px 12px 4px; }
.bots-scene .bot-message p { margin: 0; color: var(--scene-ink); font-size: 12px; line-height: 1.45; }
.bots-scene .bot-message-image { padding: 5px; }
.bots-scene .bot-postcard { display: block; width: 100%; height: auto; aspect-ratio: 5 / 2; border-radius: 8px; stroke: none; }
.bot-postcard .postcard-sky { fill: #e5edf3; }
.bot-postcard .postcard-sun { fill: #efc65f; }
.bot-postcard .postcard-back { fill: #89a3ae; }
.bot-postcard .postcard-snow { fill: #fff; }
.bot-postcard .postcard-front { fill: #446c70; }
.bots-scene .bot-image-caption { display: block; padding: 5px 5px 3px; font-size: 11px; color: var(--scene-ink); }
@media (max-width: 1100px) {
  .reference-projects .ai-bots-card .systems-bot-mark { display: none; }
}
@media (max-width: 380px) {
  .reference-projects .systems-card.ai-bots-card .bot-handles { font-size: 16px; }
}
/* Keep the combined brand readable at320px without four title lines. */
@media (max-width:380px) {
  .reference-projects .systems-card .hd .id { gap: 10px; }
  .reference-projects .systems-card .ico { width: 32px; height: 32px; border-radius: 10px; }
  .reference-projects .systems-card .t { font-size: 18px; }
}

/* SelfMD: the portable profile is the starting point, not the network protocol. */
.network-scene .network-agent-a { border-radius: 4px 16px 16px 16px; background: var(--scene-wash); }
.network-scene .network-agent-a .network-agent-head { font-size: 13px; font-weight: 600; }
.network-scene .network-agent-b .network-line { min-height: 31px; }

/* Telegram-style chat fragments: shared by the project card and native dialog.
   Visual references: core.telegram.org/widgets/post and Telegram's reply-revolution demo.
   Original local markup/styles; no external widget or client code is bundled. */
.reference-projects > .ref-card.ai-bots-card { min-height: 0; gap: 14px; }
.reference-projects .ai-bots-card > .hd { min-height: 30px; align-items: center; }
.reference-projects .ai-bots-card .systems-body { display: flex; flex-direction: column; align-items: stretch; gap: 14px; flex: none; }
.reference-projects .ai-bots-card .systems-copy { margin-top: 0; align-self: stretch; }
.reference-projects .ai-bots-card .bots-scene,
.case-dialog .project-demo .bots-scene {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%; max-width: none; gap: 10px; padding: 0;
}
.bots-scene {
  --chat-ground: #dce7d7; --chat-incoming: #fff; --chat-outgoing: #e3ffc8;
  --chat-ink: #18212b; --chat-meta: #74816b; --chat-header: #fff;
  --chat-muted: #7b8894; --chat-line: rgb(24 33 43 / .08);
  --chat-accent: var(--telegram-blue, #2481cc);
}
:root[data-theme="dark"] .bots-scene {
  --chat-ground: #0f1923; --chat-incoming: #233449; --chat-outgoing: #315475;
  --chat-ink: #f5f5f7; --chat-meta: #a6bbca; --chat-header: #1c2938;
  --chat-muted: #91a6b7; --chat-line: rgb(255 255 255 / .06);
  --chat-accent: #92cfff;
}
.bots-scene .bot-thread {
  display: flex; flex-direction: column; gap: 0; padding: 0; overflow: hidden;
  border: 1px solid var(--chat-line); border-radius: 13px;
  background: var(--chat-ground); color: var(--chat-ink);
  box-shadow: 0 2px 5px rgb(0 0 0 / .04);
  container-type: inline-size;
}
.bots-scene .bot-thread-head {
  display: grid; grid-template-columns: 26px minmax(0, 1fr) 10px;
  column-gap: 6px; row-gap: 0; align-items: center;
  min-height: 48px; padding: 8px; background: var(--chat-header);
  border-bottom: 1px solid var(--chat-line);
}
.bots-scene .bot-avatar { grid-column: 1; grid-row: 1 / 3; width: 26px; height: 26px; }
.bots-scene .bot-name { grid-column: 2; grid-row: 1; font-size: 10px; line-height: 1.3; color: var(--chat-ink); }
.bots-scene .bot-label { grid-column: 2; grid-row: 2; margin: 1px 0 0; font-size: 9px; line-height: 1.2; color: var(--chat-muted); }
.bots-scene .bot-chat-menu { grid-column: 3; grid-row: 1 / 3; width: 10px; height: 14px; fill: var(--chat-muted); stroke: none; }
.bots-scene .bot-chat-body {
  position: relative; isolation: isolate; display: flex; flex-direction: column;
  align-items: flex-start; gap: 8px; flex: 1; min-height: 154px; padding: 12px 9px;
}
.bots-scene .bot-chat-body::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: url('assets/telegram-chat-pattern.svg') center / 160px 160px;
  opacity: .16; pointer-events: none;
}
.bots-scene .bot-outgoing,
.bots-scene .bot-message {
  position: relative; display: block; width: auto; max-width: 94%; min-width: 0;
  padding: 7px 8px 4px; border: 0; margin: 0;
  border-radius: 10px 10px 10px 3px; background: var(--chat-incoming);
  color: var(--chat-ink); font-size: 11px; line-height: 1.35;
  box-shadow: 0 1px 1px rgb(0 0 0 / .07); transform: none; transition: none;
}
.bots-scene .bot-outgoing { align-self: flex-end; border-radius: 10px 10px 3px 10px; background: var(--chat-outgoing); }
.bots-scene .bot-message::before,
.bots-scene .bot-outgoing::before {
  content: ''; position: absolute; bottom: 0; left: -4px; width: 7px; height: 9px;
  background: var(--chat-incoming); clip-path: polygon(100% 0, 100% 100%, 0 100%, 55% 65%);
}
.bots-scene .bot-outgoing::before { left: auto; right: -4px; background: var(--chat-outgoing); transform: scaleX(-1); }
.bots-scene .bot-message p { font-size: 11px; line-height: 1.35; color: var(--chat-ink); text-wrap: pretty; }
.bots-scene .bot-message-meta {
  display: flex; justify-content: flex-end; align-items: center; gap: 3px;
  margin: 2px 0 0 8px; color: var(--chat-meta); font-size: 8px; line-height: 1.2;
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.bots-scene .bot-check { width: 13px; height: 9px; color: var(--chat-accent); stroke-width: 1.6; }
.bots-scene .bot-message-image { width: 94%; padding: 2px; }
.bots-scene .bot-postcard { width: 100%; height: clamp(58px, 32cqw, 78px); aspect-ratio: auto; border-radius: 8px 8px 2px 2px; }
.bots-scene .postcard-river { fill: #e5edf3; }
.bots-scene .bot-image-caption { display: flex; align-items: end; justify-content: space-between; gap: 3px; padding: 5px 5px 3px; font-size: 10px; color: var(--chat-ink); }
.bots-scene .bot-image-caption .bot-message-meta { margin: 0; }
.bots-scene .bot-compose {
  display: flex; align-items: center; gap: 6px; height: 28px; padding: 5px 8px;
  border-top: 1px solid var(--chat-line); background: var(--chat-header);
  color: var(--chat-muted); font-size: 9px;
}
.bots-scene .bot-compose span { flex: 1; }
.bots-scene .bot-compose svg { width: 12px; height: 12px; stroke-width: 1.5; }
/* Compact headers retain each full handle even in the narrowest two-column card. */
@container (max-width: 190px) {
  .bots-scene .bot-thread-head { grid-template-columns: 20px minmax(0, 1fr) 10px; gap: 5px; padding: 7px; }
  .bots-scene .bot-avatar { width: 20px; height: 20px; grid-row: 1; }
  .bots-scene .bot-label { grid-column: 2; grid-row: 1; margin: 0; }
  .bots-scene .bot-chat-menu { grid-row: 1; }
  .bots-scene .bot-name { grid-column: 1 / -1; grid-row: 2; font-size: 10px; }
  .bots-scene .bot-chat-body { padding: 10px 7px; gap: 7px; }
}
@container (max-width: 125px) {
  .bots-scene .bot-name { font-size: 9px; }
  .bots-scene .bot-outgoing, .bots-scene .bot-message p { font-size: 10px; }
  .bots-scene .bot-compose { gap: 4px; padding-inline: 6px; }
}
.reference-projects .ai-bots-card .project-tags { min-width: 0; flex: 0 1 auto; }
.reference-projects .ai-bots-card .project-tags > span { display: none; }
@media (max-width: 380px) {
  .reference-projects > .ref-card.ai-bots-card { padding-inline: 16px; }
  .reference-projects .ai-bots-card .bots-scene { gap: 6px; }
}
@media (hover: hover) and (pointer: fine) {
  .reference-projects .ai-bots-card:hover .bot-message-image { transform: none; }
}

/* Fixed chat viewport: questions, typing and answers never resize the card. */
.bots-scene .bot-chat-body { height: 196px; min-height: 196px; flex: none; overflow: hidden; }
.bots-scene .bot-chat-body > * { flex-shrink: 0; }
.bots-scene [hidden] { display: none !important; }
.bots-scene .bot-typing {
  display: flex; align-items: center; gap: 3px; height: 26px; padding: 8px 10px;
  border-radius: 10px 10px 10px 3px; background: var(--chat-incoming);
}
.bot-typing i { width: 4px; height: 4px; border-radius: 50%; background: var(--chat-muted); animation: bot-typing 900ms ease-in-out infinite; animation-play-state: paused; }
.bot-typing i:nth-child(2) { animation-delay: 120ms; }
.bot-typing i:nth-child(3) { animation-delay: 240ms; }
[data-running="true"] .bot-typing i { animation-play-state: running; }
@keyframes bot-typing { 0%, 60%, 100% { opacity: .45; transform: none; } 30% { opacity: 1; transform: translateY(-2px); } }
.bot-card-footer { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-top: auto; }
.bot-card-footer .bot-pause { width: 26px; height: 26px; padding: 5px; border: 0; background: var(--card2); }
.bot-pause {
  position: relative; z-index: 5; display: grid; place-items: center; flex: none;
  width: 30px; height: 30px; padding: 6px; border: 1px solid var(--line);
  border-radius: 50%; color: var(--muted); background: var(--card); cursor: pointer;
}
.bot-pause::after { content: ""; position: absolute; inset: -7px; }
.bot-card-footer .bot-pause::after { inset: -9px; }
.bot-pause[hidden] { display: none; }
.bot-pause svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.bot-pause:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.bot-pause:hover { color: var(--text); }
.bot-pause:disabled { opacity: .45; cursor: default; }
.bot-play-icon, .bot-pause[aria-pressed="true"] .bot-pause-icon { display: none; }
.bot-pause[aria-pressed="true"] .bot-play-icon { display: block; }
.bots-scene .bot-postcard { --sky: #e5edf3; --sun: #efc65f; --mountain: #89a3ae; --front: #446c70; --lake: #81aebb; }
.bots-scene [data-landscape="sunset"] .bot-postcard { --sky: #efd0b7; --sun: #e39155; --mountain: #ab7775; --front: #735760; --lake: #b88f93; }
.bots-scene [data-landscape="night"] .bot-postcard { --sky: #172b46; --sun: #e8edf2; --mountain: #385476; --front: #263d56; --lake: #587c9e; }
.bots-scene [data-landscape="snow"] .bot-postcard { --sky: #e6dfe9; --sun: #f5e7c6; --mountain: #b2c3d0; --front: #edf2f5; --lake: #aecedb; }
.bots-scene .postcard-sky, .bots-scene .postcard-moon-cut { fill: var(--sky); }
.bots-scene .postcard-sun { fill: var(--sun); }
.bots-scene .postcard-back { fill: var(--mountain); }
.bots-scene .postcard-front { fill: var(--front); }
.bots-scene .postcard-lake { fill: var(--lake); }
.bots-scene .postcard-reflection { stroke: var(--sun); stroke-width: 2px; opacity: .5; }
.bots-scene .postcard-stars { fill: #fff; }
.bots-scene .postcard-stars, .bots-scene .postcard-moon-cut { opacity: 0; }
.bots-scene [data-landscape="night"] .postcard-stars, .bots-scene [data-landscape="night"] .postcard-moon-cut { opacity: 1; }
.bots-scene [data-landscape="sunset"] .postcard-sun { transform: translateY(28px); }
body .case-dialog .case-sheet-art.project-demo:has(.bots-scene) { height: auto; min-height: 0; max-height: none; flex-shrink: 0; }
body .case-dialog .case-sheet-art.project-demo .bots-scene { transform: none; }

@container (max-width: 125px) {
  .bots-scene .bot-thread-head { padding-inline: 4px; }
}