/* Shared by the four guides whose demos talk to a11.demos.web_demos_server:
   chat-sessions, deep-research, browser-tools and generative-media. One file
   because the demos share a class vocabulary (see js/demo/demo_support.ts) and
   differ only in their panes. */

.a11-demo { border: 1px solid var(--md-default-fg-color--lightest); border-radius: .5rem; overflow: hidden; margin: 1.5rem 0; }
.a11-toolbar, .a11-compose { display: flex; flex-wrap: wrap; gap: .5rem; padding: .75rem; background: var(--md-code-bg-color); }
.a11-field { display: flex; flex-direction: column; flex: 1; gap: .15rem; min-width: 0; }
.a11-field label { font-size: .72em; color: var(--md-default-fg-color--light); text-transform: uppercase; letter-spacing: .04em; padding-left: .1rem; }
.a11-toolbar input, .a11-toolbar select, .a11-compose input { min-width: 0; flex: 1; padding: .5rem .65rem; border: 1px solid var(--md-default-fg-color--lightest); border-radius: .25rem; background: var(--md-default-bg-color); color: var(--md-default-fg-color); font-size: .85em; }
.a11-toolbar input.wide { flex-basis: 100%; font-family: var(--md-code-font-family); }
.a11-toolbar button, .a11-compose button { padding: .45rem .75rem; border: 1px solid var(--md-primary-fg-color); border-radius: .25rem; color: var(--md-primary-fg-color); cursor: pointer; background: transparent; }
.a11-toolbar button:disabled, .a11-compose button:disabled, .a11-compose input:disabled { opacity: .55; cursor: default; }

.a11-errors { padding: .35rem .75rem; color: var(--md-typeset-color); background: color-mix(in srgb, #d32f2f 12%, transparent); overflow-wrap: anywhere; }
.a11-errors:empty { display: none; }
.a11-connection-banner { padding: .65rem .85rem; color: var(--md-default-fg-color); background: color-mix(in srgb, var(--md-accent-fg-color) 8%, transparent); border-left: 3px solid var(--md-accent-fg-color); border-radius: .25rem; font-size: .88em; line-height: 1.5; }
.a11-connection-banner strong { font-weight: 600; }

.a11-panes { display: grid; grid-template-columns: minmax(0, 3fr) minmax(14rem, 2fr); height: min(32rem, 70vh); min-height: 22rem; overflow: hidden; }
.a11-panes.even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.a11-pane { display: flex; min-width: 0; min-height: 0; flex-direction: column; border-right: 1px solid var(--md-default-fg-color--lightest); }
.a11-pane:last-child { border-right: 0; }
.a11-pane > header { padding: .4rem .75rem; border-bottom: 1px solid var(--md-default-fg-color--lightest); color: var(--md-default-fg-color--light); background: var(--md-code-bg-color); font-size: .78em; text-transform: uppercase; letter-spacing: .04em; }

.a11-messages, .a11-log, .a11-prose { flex: 1; padding: .75rem 1rem; overflow: auto; min-height: 0; }
.a11-bubble { max-width: 85%; width: fit-content; margin: .5rem 0; padding: .55rem .75rem; border-radius: .8rem; background: var(--md-code-bg-color); white-space: pre-wrap; overflow-wrap: anywhere; }
.a11-bubble.question { margin-left: auto; color: white; background: var(--md-primary-fg-color); }
.a11-bubble.note { max-width: 100%; color: var(--md-default-fg-color--light); background: transparent; border-left: 2px solid var(--md-default-fg-color--lighter); border-radius: 0; font-size: .85em; }
.a11-log-line { padding: .15rem 0; font-family: var(--md-code-font-family); font-size: .76em; line-height: 1.45; overflow-wrap: anywhere; color: var(--md-default-fg-color--light); }
.a11-log-line.done { color: var(--md-primary-fg-color); }
.a11-prose { white-space: pre-wrap; overflow-wrap: anywhere; }
.a11-plan { margin: .5rem 0 .5rem 1.2rem; padding: 0; font-size: .85em; }
.a11-plan li { margin: .2rem 0; }

/* The browser-tools guide: the scene and the conversation about it, side by side,
   so one screen holds both. The canvas is sized by its pane rather than the other
   way round -- `min-height: 0` on the flex child is what lets it shrink. Its box
   comes from `aspect-ratio` rather than from the width/height attributes,
   because the WebGL renderer owns those now: it sets the backing store to the
   size the canvas is laid out at, and a height derived from them would chase
   itself. Blob coordinates are world units, so they do not move with the
   layout either way. */
.a11-panes.tools { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); height: min(28rem, 60vh); min-height: 20rem; }
.a11-canvas-wrap { display: flex; flex: 1; min-height: 0; align-items: center; justify-content: center; padding: .75rem; background: var(--md-default-bg-color); }
#tools-canvas { display: block; width: 100%; max-width: 620px; max-height: 100%; aspect-ratio: 620 / 300; touch-action: none; border: 1px solid var(--md-default-fg-color--lightest); border-radius: .35rem; background: var(--md-code-bg-color); }
/* Two stacked regions in the right-hand pane: what the model said, and what this
   page was asked to run. The log is the smaller of the two. */
.a11-panes.tools .a11-messages { flex: 3; }
.a11-panes.tools .a11-log { flex: 2; border-top: 1px solid var(--md-default-fg-color--lightest); }

/* The image and progress bar in the generative-media guide. */
.a11-media { display: flex; flex-direction: column; gap: .5rem; padding: .75rem; }
#media-progress { width: 100%; height: .6rem; }
#media-image { max-width: 512px; width: 100%; height: auto; border-radius: .35rem; border: 1px solid var(--md-default-fg-color--lightest); }
#media-status { color: var(--md-default-fg-color--light); font-family: var(--md-code-font-family); font-size: .78em; }

@media (max-width: 700px) {
  .a11-panes, .a11-panes.even, .a11-panes.tools { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); height: min(42rem, 80vh); }
  .a11-pane { border-right: 0; border-bottom: 1px solid var(--md-default-fg-color--lightest); }
  .a11-toolbar input, .a11-toolbar select { flex-basis: 100%; }
  .a11-field { flex-basis: 100%; }
}