/* Dialogue dashboard, scoped to this page; shared tablet geometry is preserved. */
body[data-section=dialogue] .tablet #main{overflow:hidden}
body[data-section=dialogue] .dialogue-page{height:100%;padding:22px 3.4% 18px;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr);gap:28px;min-width:0;min-height:0;position:relative;isolation:isolate}
.dialogue-page:before{content:"";position:absolute;bottom:0;left:0;right:0;height:130px;z-index:-1;pointer-events:none;background:repeating-radial-gradient(ellipse at 75% 160%,transparent 0 13px,var(--halo) 14px 15px,transparent 16px 22px);mask-image:linear-gradient(transparent,#0006)}
.dialogue-chat-column{display:grid;grid-template-rows:auto auto auto minmax(0,1fr);gap:18px;min-width:0;min-height:0}
.dialogue-heading h1{font-size:clamp(30px,3vw,48px);letter-spacing:-.04em;line-height:1.2;margin:0 0 10px;color:var(--text)}
.dialogue-heading p{font-size:12px;line-height:1.7;margin:0;color:var(--muted);max-width:470px}
.dialogue-toolbar{display:flex;gap:9px;align-items:center;min-width:0}
.dialogue-ai-badge{display:grid;place-items:center;width:34px;height:34px;flex-shrink:0;border:1px solid var(--accent);border-radius:50%;font-size:11px;color:var(--light);background:var(--halo);box-shadow:0 0 14px var(--halo)}
.dialogue-intro{flex:1;min-width:0;font-size:12px;color:var(--muted);padding:13px 12px;border:1px solid var(--edge);border-radius:12px;background:linear-gradient(120deg,var(--halo),#ffffff02)}
.dialogue-toolbar button,.dialogue-analysis-link{min-height:36px;border:1px solid var(--edge);border-radius:9px;background:#0003;color:var(--light);font-size:10px;padding:9px;cursor:pointer;text-decoration:none;white-space:nowrap}
.dialogue-page .chat-starters{display:flex;align-items:center;gap:6px;flex-wrap:wrap;color:var(--muted);font-size:10px;padding-bottom:15px;border-bottom:1px solid var(--line)}
.dialogue-page .chat-starters button{border:1px solid var(--edge);border-radius:20px;background:#0003;color:var(--light);font-size:10px;min-height:32px;padding:6px 10px;cursor:pointer}
.dialogue-page button:hover,.dialogue-analysis-link:hover{border-color:var(--accent);box-shadow:0 0 12px var(--halo)}
.dialogue-page .chat-panel{border:0;border-radius:0;background:none;box-shadow:none;padding:0;display:grid;grid-template-rows:minmax(0,1fr) auto auto;gap:8px;min-height:0;min-width:0}
.dialogue-page #chat-messages{height:auto;min-height:0;max-height:none;width:100%;padding:0 6px 12px 0;overflow:auto;scrollbar-width:thin;scrollbar-color:var(--edge) transparent;overscroll-behavior:contain}
.dialogue-page .message{position:relative;margin:0 0 16px 45px;max-width:calc(100% - 48px);padding:15px;border:1px solid var(--edge);border-radius:12px;font-size:12px;line-height:1.8;white-space:normal;background:linear-gradient(135deg,#ffffff05,transparent)}
.dialogue-page .message.assistant:before{content:"AI";position:absolute;left:-44px;top:2px;width:32px;height:32px;display:grid;place-items:center;border:1px solid var(--edge);border-radius:50%;background:var(--halo);color:var(--light);font-size:10px}
.dialogue-page .message.user{margin-left:auto;background:var(--halo);max-width:85%;border-color:var(--accent)}
.dialogue-page .message-role{display:none}.dialogue-page .message-text{white-space:pre-wrap;overflow-wrap:anywhere}.dialogue-page .message-text ul{padding-left:20px;white-space:normal;margin:10px 0}
.dialogue-page .welcome{text-align:left;color:var(--text)}
.dialogue-page #chat-form{display:flex;align-items:center;gap:10px;margin:0;padding:5px 7px 5px 16px;border:1px solid var(--edge);border-radius:30px;background:linear-gradient(120deg,var(--halo),#ffffff03);box-shadow:inset 0 0 20px var(--halo);min-width:0}
.dialogue-page #chat-form textarea{flex:1;width:100%;min-width:0;height:42px;min-height:42px;max-height:100px;border:0;background:none;box-shadow:none;padding:10px 0;font:inherit;font-size:13px;line-height:1.6;color:var(--text);resize:vertical}
/* The message field sits inside the rounded composer: the whole composer shows focus, not a rectangle (and a resize
   grip) inside it. The selectors outrank the shared field frame and focus ring in site-consistency.css. */
body[data-section=dialogue] #main .dialogue-page #chat-form textarea{border:0!important;box-shadow:none!important;outline:none!important;resize:none;scrollbar-width:none}
body[data-section=dialogue] #main .dialogue-page #chat-form textarea::-webkit-scrollbar{display:none}
body[data-section=dialogue] #main .dialogue-page #chat-form:focus-within{border-color:var(--accent)!important;box-shadow:inset 0 0 20px var(--halo),0 0 0 1px var(--accent),0 0 16px var(--halo)!important}
.dialogue-page .send-button{position:static;display:grid;place-items:center;flex-shrink:0;width:38px;height:38px;min-height:38px;padding:0;border:1px solid var(--accent);border-radius:50%;background:linear-gradient(135deg,var(--light),var(--accent));color:var(--bg);box-shadow:0 0 14px var(--halo)}
.dialogue-page .send-button .ui-icon{width:22px;height:22px}
.dialogue-feedback p{font-size:10px;line-height:1.5;margin:0;color:var(--muted)}.dialogue-feedback #chat-error:not(:empty){color:#ffbaa0}
.dialogue-dashboard{min-width:0;min-height:0;padding:14px;border:1px solid var(--edge);border-radius:17px;box-shadow:-8px 0 24px var(--halo),inset 1px 0 0 var(--accent);background:linear-gradient(155deg,#0003,transparent 70%,var(--halo));overflow:auto;scrollbar-width:thin;scrollbar-color:var(--edge) transparent}
.dialogue-tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);padding-bottom:10px;overflow-x:auto;scrollbar-width:thin}
.dialogue-tabs button{flex:1;min-width:max-content;font-size:10px;padding:10px 8px;border:1px solid transparent;background:none;color:var(--muted);border-radius:10px;cursor:pointer}
.dialogue-tabs button[aria-selected=true]{border-color:var(--accent);color:var(--light);background:var(--halo);box-shadow:0 0 15px var(--halo)}
.dialogue-model{display:flex;align-items:center;gap:10px;font-size:10px;color:var(--muted);margin:10px 0}
.dialogue-model select{min-width:0;width:100%;max-width:250px;min-height:30px;font-size:10px;padding:5px 25px 5px 10px;margin:0;border:1px solid var(--edge);border-radius:8px;background:var(--bg);color:var(--text)}
.dialogue-page #analysis-output{padding:0;display:grid;gap:12px;min-width:0}
.da-result-heading{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:12px;border:1px solid var(--line);border-radius:12px;background:#ffffff02}
.da-result-heading h2{font-size:18px;line-height:1.3;margin:0 0 4px;letter-spacing:-.025em}.da-result-heading p{font-size:10px;color:var(--muted);margin:0}
.da-character-count{display:grid;grid-template-columns:auto auto;column-gap:9px;align-items:center;font-size:12px;padding:10px;background:#ffffff04;border-radius:10px}.da-character-count svg{grid-row:span 2;width:22px;height:22px;color:var(--light)}.da-character-count small{font-size:9px;color:var(--muted)}
.da-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}
.da-kpi,.da-section{border:1px solid var(--edge);border-radius:12px;background:linear-gradient(135deg,#ffffff02,#0002);min-width:0}
.da-kpi{padding:12px 10px;display:flex;flex-direction:column;gap:8px}.da-kpi-label{display:flex;align-items:center;gap:7px;min-height:28px;font-size:10px;line-height:1.4}.da-kpi-label svg{width:19px;height:19px;flex-shrink:0;color:var(--accent)}.da-kpi strong{font-size:24px;line-height:1.1;letter-spacing:-.03em}.da-kpi small{font-size:9px;color:var(--muted);line-height:1.4}.da-kpi .da-progress{margin-top:auto}
.da-progress{height:5px;overflow:hidden;border-radius:6px;background:var(--halo)}.da-progress i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,var(--accent),var(--light));box-shadow:0 0 10px var(--halo)}
.da-charts{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:12px}.da-section{padding:14px}.da-section h3{font-size:12px;margin:0 0 14px;line-height:1.5}.da-empty{font-size:11px;line-height:1.7;color:var(--muted);margin:0;padding:15px 0}
.da-tone-body{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.da-donut{position:relative;flex-shrink:0;width:120px;height:120px;border-radius:50%;background:conic-gradient(var(--accent) 0deg var(--tone-positive,0deg),color-mix(in srgb,var(--accent) 40%,#41464a) var(--tone-positive,0deg) var(--tone-neutral,0deg),#be652e var(--tone-neutral,0deg) 360deg);box-shadow:0 0 20px var(--halo);display:grid;place-items:center}.da-donut:before{content:"";position:absolute;inset:15px;border-radius:50%;background:var(--bg)}.da-donut.is-empty{background:var(--halo);box-shadow:none}.da-donut-label{position:relative;display:grid;text-align:center;gap:3px;font-size:9px;color:var(--muted);max-width:85px}.da-donut-label strong{font-size:23px;color:var(--text)}
.da-tone-legend{display:grid;gap:10px;flex:1;min-width:90px}.da-tone-legend>div{display:flex;align-items:center;gap:6px;font-size:9px}.da-tone-legend b{margin-left:auto}.da-tone-legend i{width:7px;height:7px;border-radius:50%;background:var(--accent)}.da-tone-legend>div:nth-child(2) i{opacity:.4}.da-tone-legend>div:nth-child(3) i{background:#be652e}
.da-keyword{display:grid;grid-template-columns:minmax(0,1fr) 42% 28px;align-items:center;gap:7px;margin:12px 0;font-size:10px}.da-keyword span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.da-keyword b{text-align:right;font-size:9px}.da-explanation{font-size:9px;color:var(--muted);line-height:1.6;margin:12px 0 0}
.da-filters{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}.da-filters button{border:1px solid var(--edge);border-radius:18px;padding:6px 9px;font-size:9px;background:#0002;color:var(--muted);cursor:pointer}.da-filters button[aria-pressed=true]{background:var(--halo);color:var(--light);border-color:var(--accent)}
.da-entity-list{display:flex;flex-wrap:wrap;gap:7px}.da-entity{display:inline-flex;gap:8px;align-items:center;padding:7px 10px;border:1px solid var(--line);border-radius:9px;background:#ffffff03;font-size:10px;overflow-wrap:anywhere}.da-entity b{font-size:8px;font-weight:400;color:var(--light)}
.da-stat-row{display:flex;gap:12px;justify-content:space-between;align-items:flex-start;border-bottom:1px solid var(--line);padding:10px 0;font-size:11px}.da-stat-row>span{color:var(--muted)}.da-stat-row strong{font-weight:500;text-align:right;max-width:65%;overflow-wrap:anywhere}.da-state{font-size:10px;color:var(--muted);margin-top:14px}.da-state pre{white-space:pre-wrap;overflow-wrap:anywhere}
.dialogue-page [hidden]{display:none!important}.dialogue-page button:focus-visible,.dialogue-page a:focus-visible{outline:2px solid var(--light);outline-offset:3px}
@media(min-width:1800px){body[data-section=dialogue] .dialogue-page{gap:36px;padding-top:30px}.dialogue-dashboard{padding:18px}.da-kpi{padding:16px 13px}.da-section{padding:18px}.da-donut{width:145px;height:145px}.dialogue-page .message{font-size:14px}.dialogue-heading p{font-size:14px}.dialogue-chat-column{gap:24px}.da-kpi-label,.da-keyword{font-size:12px}}
@media(max-width:1200px){body[data-section=dialogue] .tablet #main{overflow-y:auto;overflow-x:hidden}body[data-section=dialogue] .dialogue-page{height:auto;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px}.dialogue-chat-column{min-height:660px;gap:14px}.da-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.da-charts{grid-template-columns:1fr}.dialogue-dashboard{max-height:900px}.dialogue-toolbar{flex-wrap:wrap}.dialogue-intro{flex-basis:70%}.dialogue-heading h1{font-size:34px}.dialogue-page #chat-messages{max-height:540px}}
@media(max-width:900px){body[data-section=dialogue] .dialogue-page{grid-template-columns:1fr;padding:24px 4.2%}.dialogue-chat-column{min-height:580px}.dialogue-dashboard{max-height:none}.da-charts{grid-template-columns:1fr 1fr}.da-kpis{grid-template-columns:repeat(4,minmax(0,1fr))}.dialogue-page #chat-messages{max-height:400px}.dialogue-intro{flex-basis:auto}}
@media(max-width:600px){body[data-section=dialogue] .dialogue-page{padding:22px 16px;gap:24px}.dialogue-chat-column{min-height:520px}.dialogue-heading h1{font-size:31px}.dialogue-toolbar{gap:7px}.dialogue-intro{flex-basis:75%}.dialogue-page #chat-form textarea{font-size:16px;resize:none}.da-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.da-charts{grid-template-columns:1fr}.dialogue-dashboard{padding:12px}.dialogue-tabs button{min-height:44px}.da-tone-body{flex-wrap:nowrap}.da-character-count{padding:7px}.da-result-heading h2{font-size:16px}.dialogue-page .chat-starters button{min-height:40px}.dialogue-page .message{padding:12px;font-size:12px}}
.dialogue-page .send-button{color:#071018}.dialogue-page .send-button svg{color:inherit;stroke:currentColor}
.da-charts:has(>[hidden]){grid-template-columns:1fr}
.dialogue-tabs{position:sticky;top:0;z-index:2;background:var(--bg);padding-top:6px}
.da-kpi strong{overflow-wrap:anywhere}
@media(max-width:420px){.da-tone-body{flex-wrap:wrap}.da-donut{margin-inline:auto}.da-tone-legend{min-width:130px}.da-kpi strong{font-size:19px}.dialogue-intro{flex-basis:70%}.dialogue-toolbar button,.dialogue-analysis-link{min-height:40px}.da-result-heading{gap:7px;padding:9px}.da-character-count{font-size:10px}.da-character-count svg{width:16px}.da-result-heading h2{font-size:14px}}
@media(min-width:1201px){.dialogue-dashboard{padding:12px}.dialogue-tabs{padding-bottom:7px}.dialogue-model{margin:7px 0}.da-result-heading{padding:10px}.da-kpi{padding:10px;gap:6px}.da-kpi-label{min-height:26px}.da-section{padding:12px}.da-section h3{margin-bottom:10px}.da-donut{width:112px;height:112px}.da-tone-body{gap:10px}.da-explanation{margin-top:9px}.da-empty{padding:8px 0}.da-keyword{margin:9px 0}.da-charts>.da-section{min-height:176px}.dialogue-page #analysis-output{gap:10px}}
@media(min-width:1800px){.da-donut{width:120px;height:120px}.da-charts>.da-section{min-height:190px}}
/* The analysis drawer shares the portrait's footprint and keeps its results. */
.dialogue-analysis-stage{position:relative;min-width:0;min-height:0;contain:layout size;overflow:hidden;border-radius:17px;isolation:isolate}
.dialogue-restored-portrait{position:absolute;inset:0;pointer-events:none;opacity:.85;transition:opacity .4s ease;mix-blend-mode:screen}
.dialogue-restored-portrait img{display:block;width:100%;height:100%;object-fit:cover;object-position:left center;mask-image:linear-gradient(90deg,transparent,#000 20%,#000 86%,transparent),linear-gradient(0deg,transparent,#000 12%,#000 92%,transparent);mask-composite:intersect}

html[data-theme=human] .dialogue-restored-portrait img{filter:grayscale(1) sepia(1) saturate(2.5) hue-rotate(4deg) brightness(.75)}
.dialogue-analysis-stage .dialogue-dashboard{position:absolute;inset:0 28px 0 0;max-height:none;transform:translateX(calc(100% + 28px));visibility:hidden;transition:transform .45s cubic-bezier(.22,.7,.2,1),visibility 0s .45s;background:var(--bg)}
.dialogue-analysis-stage.is-open .dialogue-dashboard{transform:translateX(0);visibility:visible;transition-delay:0s}
.dialogue-analysis-stage.is-open .dialogue-restored-portrait{opacity:0}
.dialogue-drawer-handle{position:absolute;z-index:5;right:0;top:50%;transform:translateY(-50%);width:28px;min-height:112px;padding:10px 5px;display:flex;flex-direction:column;align-items:center;gap:10px;border:1px solid var(--accent);border-radius:12px 0 0 12px;background:var(--bg);color:var(--light);box-shadow:0 0 22px var(--halo);cursor:pointer}
.dialogue-drawer-handle>span:last-child{writing-mode:vertical-rl;letter-spacing:.09em;font-size:11px}
.dialogue-drawer-handle .drawer-arrow{font-size:25px;line-height:1}
@media(max-width:1200px){.dialogue-analysis-stage{height:660px;min-height:660px}body[data-section=dialogue] .dialogue-page{grid-template-rows:auto}}
@media(max-width:900px){.dialogue-analysis-stage{height:620px;min-height:0}.dialogue-restored-portrait img{object-fit:contain;object-position:center}}
@media(max-width:600px){.dialogue-analysis-stage{height:590px}.dialogue-analysis-stage .dialogue-dashboard{padding:10px}.dialogue-drawer-handle{min-height:110px}.da-tone-body{flex-wrap:wrap}.da-tone-legend{min-width:120px}}
@media(prefers-reduced-motion:reduce){.dialogue-analysis-stage .dialogue-dashboard,.dialogue-restored-portrait{transition:none}}
.dialogue-chat-column{grid-template-rows:auto auto minmax(0,1fr)}
.dialogue-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:14px}
.dialogue-heading-copy{min-width:0}
.dialogue-heading #reset-chat{flex-shrink:0;min-height:38px;padding:9px 12px;margin-bottom:2px;border:1px solid var(--edge);border-radius:10px;background:#0003;color:var(--light);font-size:11px;cursor:pointer}
.dialogue-drawer-handle{right:5px;width:44px;height:44px;min-height:44px;display:grid;place-items:center;padding:0;border:1px solid var(--edge);border-radius:50%;background:color-mix(in srgb,var(--bg) 88%,transparent);box-shadow:0 0 14px var(--halo);backdrop-filter:blur(10px)}
.dialogue-drawer-handle svg{width:22px;height:22px}
.dialogue-analysis-stage.is-open .dialogue-drawer-handle{border-color:var(--accent);background:var(--halo)}
.dialogue-analysis-stage .dialogue-dashboard{right:56px}
@media(max-width:600px){.dialogue-heading{flex-wrap:wrap;align-items:flex-start}.dialogue-heading #reset-chat{margin-left:auto}.dialogue-analysis-stage .dialogue-dashboard{right:48px}.dialogue-drawer-handle{right:1px;width:42px;height:42px;min-height:42px}}

/* A slim edge grip follows the frame; the panel keeps its independent scroll. */
.dialogue-analysis-stage:after{content:"";position:absolute;z-index:4;right:10px;top:8px;bottom:8px;width:1px;background:linear-gradient(transparent,var(--accent) 15%,var(--light) 50%,var(--accent) 85%,transparent);box-shadow:0 0 5px var(--accent),0 0 14px var(--halo);pointer-events:none}
.dialogue-drawer-handle{right:0;width:21px;height:142px;min-height:142px;padding:0;border:1px solid var(--accent);border-radius:16px;background:linear-gradient(90deg,var(--bg),var(--halo),var(--bg));box-shadow:inset 0 0 7px var(--halo),0 0 6px var(--accent),0 0 20px var(--halo);backdrop-filter:none}
.dialogue-drawer-handle:before{content:"";position:absolute;inset:-5px -8px;border-radius:20px}
.dialogue-drawer-handle svg{width:18px;height:18px;color:var(--light);filter:drop-shadow(0 0 4px var(--accent))}
.dialogue-analysis-stage .dialogue-dashboard{right:30px}
@media(max-width:600px){.dialogue-drawer-handle{right:0;width:21px;height:126px;min-height:126px}.dialogue-analysis-stage .dialogue-dashboard{right:30px}}
body[data-section=dialogue] .dialogue-page{padding-right:8px}

/* Readable controls and analysis labels at every viewport size. */
.dialogue-page .chat-starters{font-size:13px;gap:8px}
.dialogue-page .chat-starters button{font-size:13px;min-height:38px;padding:8px 12px}
.dialogue-tabs button{font-size:13px;min-height:42px;padding:10px}
.dialogue-model,.dialogue-model select{font-size:13px}
.da-result-heading h2{font-size:22px}
.da-result-heading p,.da-character-count small{font-size:12px}
.da-character-count{font-size:15px}
.da-kpi-label{font-size:13px;min-height:34px}
.da-kpi strong{font-size:28px}
.da-kpi small{font-size:12px;line-height:1.5}
.da-section h3{font-size:15px}
.da-empty{font-size:14px}
.da-tone-legend>div,.da-donut-label{font-size:12px}
.da-donut-label strong{font-size:26px}
.da-keyword{font-size:13px}
.da-keyword b,.da-explanation{font-size:12px}
.da-filters button{font-size:12px;min-height:36px;padding:7px 11px}
.da-entity{font-size:13px}.da-entity b{font-size:11px}
.da-stat-row{font-size:14px}.da-state{font-size:12px}
@media(max-width:600px){.dialogue-tabs button{min-height:44px}.da-kpi-label{font-size:13px}.da-result-heading h2{font-size:20px}.da-donut-label{font-size:11px}.da-tone-legend>div{font-size:12px}}

/* Tab changes only scroll their content, never resize the drawer header. */
.dialogue-analysis-stage .dialogue-dashboard{display:flex;flex-direction:column;overflow:hidden}
.dialogue-dashboard .dialogue-tabs,.dialogue-dashboard .dialogue-model{flex-shrink:0}
.dialogue-dashboard .dialogue-tabs{position:relative;top:auto}
.dialogue-page .dialogue-dashboard #analysis-output{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-gutter:stable;overflow-anchor:none;align-content:start;padding-right:6px;overscroll-behavior:contain}
.dialogue-dashboard .dialogue-tabs button{font-weight:500}
.dialogue-dashboard .da-kpis{align-items:stretch}

/* Desktop artwork uses the home scene's frame coordinates, outside the drawer's
   clipping boundary. The stage artwork remains in the stacked mobile layout. */
.dialogue-frame-portrait{display:none}
@media(min-width:1201px){
 .dialogue-analysis-stage .dialogue-restored-portrait{display:none}
 .dialogue-frame-portrait{display:block;inset:auto 0 auto auto;top:var(--tablet-header-height);width:53%;height:var(--tablet-scene-height)}
 .dialogue-frame-portrait img{position:absolute;height:112%;width:auto;max-width:none;aspect-ratio:1086/1448;left:50%;bottom:-3%;transform:translateX(-50%);object-fit:fill;object-position:center bottom;mask-image:linear-gradient(to right,transparent 0%,#000 13%,#000 83%,transparent 100%),linear-gradient(to bottom,transparent 0%,#000 18%);mask-composite:intersect;mask-size:100% 100%;mask-repeat:no-repeat}
 .tablet:has(.dialogue-analysis-stage.is-open) .dialogue-frame-portrait{opacity:0}
}

/* Match the shared NLP logo/content left edge. */
body[data-section=dialogue] .dialogue-page{padding-left:4.2%}
@media(max-width:767px){body[data-section=dialogue] .dialogue-page{padding-left:16px}}
/* Keep the subtitle white in both themes. */
body[data-section=dialogue] .dialogue-heading p{color:#f4f6f8}

/* Compact preview layout: caption above the complete row of examples. */
.dialogue-page .chat-starters{display:block;container-type:inline-size;padding-bottom:20px}
.dialogue-page .chat-starters>span{display:block;margin-bottom:12px}
.dialogue-page .chat-starter-buttons{display:flex;flex-wrap:wrap;gap:8px}
.dialogue-page .chat-starter-buttons button{font-size:12px;padding:8px 10px;min-height:40px;white-space:nowrap}
@container(max-width:520px){.dialogue-page .chat-starter-buttons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}.dialogue-page .chat-starter-buttons button{padding:8px 6px}}
@container(max-width:350px){.dialogue-page .chat-starter-buttons{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(pointer:coarse){.dialogue-page .chat-starter-buttons button{min-height:44px}}
/* Align chat controls with the heading instead of inherited panel insets. */
body[data-section=dialogue] .chat-starters{margin-left:0;margin-right:0}
body[data-section=dialogue] :is(.keyboard-hint,.chat-note){padding-left:0;padding-right:0}