/* Shared trusted text effects for live replies and studio examples. */
.message-decoration{--decoration-ink:var(--skin-ink,var(--ink,#172f27));--decoration-panel:var(--skin-panel,var(--surface,#ffffff));--text-blue:#9dd4ff;--text-purple:#d8b4ff;--text-green:#aff59b;--text-red:#ffa7b4;--text-contrast:#ffffff;color:var(--decoration-ink);font:400 18px/1.7 'Bricolage Grotesque',system-ui,sans-serif;container-type:inline-size;display:flow-root;overflow-wrap:anywhere}
html[data-theme="light"] .message-decoration{--text-blue:#215685;--text-purple:#683791;--text-green:#285d1b;--text-red:#9b2941;--text-contrast:#111111}
.message.assistant article.message-decoration p{font:inherit;color:inherit;margin:0 0 1.1em;background:none;-webkit-text-fill-color:currentColor}
.message-decoration p:last-child{margin-bottom:0}
.text-run{color:var(--decoration-ink);background:transparent;white-space:pre-wrap}
.text-run[data-tone="blue"]{color:var(--text-blue)}.text-run[data-tone="purple"]{color:var(--text-purple)}.text-run[data-tone="green"]{color:var(--text-green)}.text-run[data-tone="red"]{color:var(--text-red)}
.text-run[data-style="hero"]{display:block;max-width:100%;font:800 clamp(38px,13cqw,96px)/1.03 'Bricolage Grotesque',system-ui,sans-serif;letter-spacing:-.05em;margin:.12em 0 .18em}
.text-run[data-style="echo"]{display:inline-block;font-weight:800;font-size:1.65em;line-height:1.3;letter-spacing:-.035em;text-shadow:2px 2px var(--decoration-panel),4px 4px currentColor;padding:0 5px 5px 0}
.text-run[data-style="label"]{font:600 11px/1.5 ui-monospace,monospace;letter-spacing:.17em}
.text-run[data-style="serif"]{font:italic 1.35em/1.5 Georgia,serif}
.text-run[data-style="quiet"]{opacity:.8;font-size:.9em}
.text-run[data-style="mark"]{font-weight:700;text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:5px}
.text-run[data-motion="float"]{animation:text-float 4s ease-in-out infinite}
.text-run[data-motion="pulse"]{animation:text-pulse 5s ease-in-out infinite}
@keyframes text-float{50%{transform:translateY(-3px)}}
@keyframes text-pulse{50%{text-shadow:0 0 16px currentColor}}
[data-skin-motion="paused"] .text-run{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){.text-run{animation:none!important}}
@media(forced-colors:active){.text-run{color:CanvasText!important;opacity:1!important;text-shadow:none!important}}
@media print{.text-run{animation:none!important;text-shadow:none!important}}


.text-run[data-tone="contrast"]{color:var(--text-contrast)}
.text-run[data-style="cutout"]{display:inline-block;font:800 clamp(20px,5.5cqw,38px)/1.3 'Bricolage Grotesque',system-ui,sans-serif;letter-spacing:-.03em;transform:rotate(-2deg);padding:.12em .08em;border-bottom:2px solid currentColor}
.text-run[data-style="stamp"]{display:inline-block;font:800 clamp(19px,5cqw,34px)/1.35 ui-monospace,monospace;letter-spacing:-.06em;text-transform:uppercase;transform:rotate(2deg);padding:.12em .08em}

/* Blue emphasis must not impersonate a hyperlink, including emphasis. */
.text-run:is([data-tone="blue"],[data-tone="number"]):is([data-style="mark"],[data-style="cutout"]){text-decoration:none;border-bottom:0}

/* Semantic color roles act like syntax highlighting for prose. */
.text-run[data-tone="keyword"]{color:var(--text-purple)}.text-run[data-tone="string"]{color:var(--text-green)}.text-run[data-tone="number"]{color:var(--text-blue)}.text-run[data-tone="comment"]{color:var(--decoration-ink);opacity:.8}


/* Composable group boundaries and decorative, code-owned imagery. */
.text-group{--group-ink:var(--decoration-ink);display:flow-root;container-type:inline-size;min-width:0;margin:0 0 1.1em;background:var(--decoration-panel);color:var(--decoration-ink)}
.text-group[data-tone="blue"],.text-group[data-tone="number"]{--group-ink:var(--text-blue)}
.text-group[data-tone="purple"],.text-group[data-tone="keyword"]{--group-ink:var(--text-purple)}
.text-group[data-tone="green"],.text-group[data-tone="string"]{--group-ink:var(--text-green)}
.text-group[data-tone="red"]{--group-ink:var(--text-red)}.text-group[data-tone="contrast"]{--group-ink:var(--text-contrast)}
.text-group[data-frame="card"]{border:1px solid var(--group-ink);border-radius:12px;padding:18px}
.text-group[data-frame="bubble"]{border:1px solid var(--group-ink);border-radius:30px 30px 30px 8px;padding:22px;box-shadow:inset 0 0 24px color-mix(in srgb,var(--group-ink) 8%,transparent)}
.text-group[data-frame="rail"]{border-left:3px solid var(--group-ink);padding:8px 0 8px 16px}
.text-run[data-style="tag"]{display:inline-block;max-width:100%;box-sizing:border-box;border:1px solid currentColor;border-radius:999px;padding:.08em .65em;margin:.1em .08em;font-size:.9em;font-weight:600;line-height:1.6;vertical-align:baseline;background:var(--decoration-panel)}
.text-run[data-effect="glow"]{text-shadow:0 0 4px currentColor,0 0 14px color-mix(in srgb,currentColor 75%,transparent),0 0 32px color-mix(in srgb,currentColor 45%,transparent)}
.text-icon{display:inline-block;margin-right:.3em;line-height:1;user-select:none}.text-icon::before{content:attr(data-symbol)}
.text-motif{position:relative;display:block;float:right;width:56px;height:56px;box-sizing:border-box;margin:0 0 14px 16px;color:var(--group-ink);background:transparent;pointer-events:none;user-select:none}
.text-motif::before,.text-motif::after{content:'';position:absolute;box-sizing:border-box}
.text-motif[data-motif="orbit"]{border:1px solid currentColor;border-radius:50%}.text-motif[data-motif="orbit"]::before{inset:12px -5px;border:1px solid currentColor;border-radius:50%;transform:rotate(-35deg)}.text-motif[data-motif="orbit"]::after{width:8px;height:8px;left:6px;top:0;background:currentColor;border-radius:50%}
.text-motif[data-motif="moon"]{border:1px solid currentColor;border-radius:50%;overflow:hidden}.text-motif[data-motif="moon"]::before{inset:0;background:currentColor;border-radius:50%}.text-motif[data-motif="moon"]::after{width:52px;height:52px;left:17px;top:-8px;background:var(--decoration-panel);border-radius:50%}
.text-motif[data-motif="spark"]::before{inset:0;background:currentColor;clip-path:polygon(50% 0,61% 36%,100% 50%,61% 62%,50% 100%,38% 62%,0 50%,38% 36%)}
.text-motif[data-motif="bloom"]::before{width:24px;height:24px;top:4px;left:4px;border:1px solid currentColor;border-radius:50%;box-shadow:24px 0 0 -1px var(--decoration-panel),24px 0 0 0 currentColor,0 24px 0 -1px var(--decoration-panel),0 24px 0 0 currentColor,24px 24px 0 -1px var(--decoration-panel),24px 24px 0 0 currentColor}.text-motif[data-motif="bloom"]::after{width:10px;height:10px;left:23px;top:23px;background:currentColor;border-radius:50%}
@media(forced-colors:active){.text-group{--group-ink:CanvasText!important;--decoration-panel:Canvas!important}.text-motif{display:none}.text-run[data-effect="glow"]{text-shadow:none!important}}
@media print{.text-run[data-effect="glow"]{text-shadow:none!important}.text-motif{display:none}}

/* Small drawings are inert DOM marks; captions preserve their meaning as text. */
.text-art{float:right;color:var(--decoration-ink);background:transparent}
.text-art-picture{position:relative;container-type:inline-size;isolation:isolate;width:min(100%,320px);aspect-ratio:1;margin:0;overflow:hidden;color:var(--decoration-ink);background:var(--decoration-panel)}
.text-art-line,.text-art-pixel{--art-ink:var(--decoration-ink)}
:is(.text-art-line,.text-art-pixel)[data-tone="blue"],:is(.text-art-line,.text-art-pixel)[data-tone="number"]{--art-ink:var(--text-blue)}
:is(.text-art-line,.text-art-pixel)[data-tone="purple"],:is(.text-art-line,.text-art-pixel)[data-tone="keyword"]{--art-ink:var(--text-purple)}
:is(.text-art-line,.text-art-pixel)[data-tone="green"],:is(.text-art-line,.text-art-pixel)[data-tone="string"]{--art-ink:var(--text-green)}
:is(.text-art-line,.text-art-pixel)[data-tone="red"]{--art-ink:var(--text-red)}
:is(.text-art-line,.text-art-pixel)[data-tone="contrast"]{--art-ink:var(--text-contrast)}
.text-art-line{position:absolute;display:block;border-radius:999px;transform-origin:0 50%;background:var(--art-ink)}
.text-art-picture[data-art="pixels"]{display:grid;background:repeating-conic-gradient(color-mix(in srgb,var(--decoration-ink) 9%,var(--decoration-panel)) 0 25%,var(--decoration-panel) 0 50%) 0/24px 24px}
.text-art-pixel[data-tone]{background:var(--art-ink)}
.text-art figcaption{font:400 12px/1.5 system-ui,sans-serif;color:var(--decoration-ink)}
@media(forced-colors:active){.text-art-line,.text-art-pixel{--art-ink:CanvasText!important}.text-art-picture{background:Canvas}}
.text-art-picture{background:transparent}
.text-art figcaption{display:none}

/* Decoration receipts are small and selectable; failure never replaces content. */
.decoration-status{display:block;margin:6px 0 0;color:var(--skin-muted,#53636a);background:var(--skin-panel,#fff);font:400 11px/1.5 system-ui,sans-serif}
.decoration-status-text{color:inherit;background:transparent}
.decoration-status[data-state="completed"] .decoration-status-text{opacity:.75}
.decoration-toggle{margin:0 0 0 8px;padding:1px 8px;border:1px solid var(--skin-line,var(--line,#c9d2cc));border-radius:999px;background:var(--skin-panel,var(--surface,#fff));color:var(--skin-ink,var(--ink,#18232a));font:inherit;cursor:pointer}
.decoration-toggle:hover{background:var(--skin-page,var(--page,#f3f5f2))}
.decoration-toggle:focus-visible{outline:2px solid var(--skin-ink,var(--ink,#18232a));outline-offset:2px}
/* Tables and code keep the plain renderer's layout: whole words, horizontal
   scrolling, and a full-width line below any floated artwork. */
.message-decoration :is(.table-wrap,pre){clear:both;overflow-wrap:normal}
.decoration-status:is([data-state="failed"],[data-state="timed_out"]){color:var(--skin-ink,#18232a)}
.message-decoration .text-art{pointer-events:none;max-width:180px;width:32%;margin:0 0 8px 12px}
/* Unframed art shares the article's text flow, including later paragraphs.
   Framed groups retain their own boundary alongside the shared artwork. */
.message-decoration .text-group[data-frame="none"]{display:contents;container-type:normal}
.message-decoration .text-run[data-style="hero"]{font-size:clamp(28px,7cqw,56px)}
.message-decoration .text-group>p:last-child{margin-bottom:0}
@media(max-width:520px){.message-decoration .text-art{width:28%;max-width:110px}.message-decoration .text-group[data-frame="bubble"]{padding:14px}.message-decoration .text-motif{width:36px;height:36px}}

/* Mobile reading experiment: the same source and decoration plan, compact type.
   Keep the conclusion readable before flourishes or trailing verification. */
@media(max-width:620px){
  .message-decoration{font-size:14px;line-height:1.5}
  .message-decoration .text-run:is([data-style="hero"],[data-style="echo"],[data-style="serif"],[data-style="cutout"],[data-style="stamp"]){font-size:1.1em;line-height:1.4;letter-spacing:normal;text-shadow:none;transform:none}
  .message-decoration .text-run[data-style="hero"]{display:inline;margin:0}
  .message-decoration .text-run[data-effect="glow"]{text-shadow:none}
  .message-decoration .text-group{margin-bottom:.65em}
  .message-decoration .text-group:is([data-frame="card"],[data-frame="bubble"]){padding:6px;border-radius:8px}
  .message-decoration .text-art{width:20%;max-width:64px;margin:0 0 6px 8px}
  .message-decoration .text-motif{width:24px;height:24px;margin:0 0 6px 8px}
}
