.mesh-preview-home { width: min(790px,calc(100% - 40px)); margin: 0 auto 24px; }
.mesh-preview-home:has(.mesh-preview[hidden]), .mesh-preview-home:empty { display: none; }
.mesh-preview { width: 100%; margin: 12px 0; overflow: hidden; border: 1px solid #34383d; border-radius: 16px; background: #141619; color: #e8ebef; box-shadow: 0 8px 24px #0003; }
.mesh-preview[hidden] { display: none; }
.mesh-preview header { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px; border-bottom:1px solid #292e35; }
.mesh-preview header strong { font-size:13px; font-weight:600; color:#f1f3f5; }
.mesh-preview header small { display:block; margin-top:4px; color:#98a3b3; font-size:10px; }
.mesh-review-badge { flex:none; border:1px solid #607a91; border-radius:6px; padding:4px 7px; color:#d0e6f8; background:#23313d; font-size:10px; font-weight:600; letter-spacing:.08em; }
.mesh-review-badge.passed { border-color:#45566b; color:#c5dcf8; }
.mesh-preview button { padding:6px 10px; border:1px solid #343a43; border-radius:8px; background:#202328; color:#d8dde5; font-size:11px; cursor:pointer; }
.mesh-preview button:hover:not(:disabled) { border-color:#637389; background:#2a2e35; color:#fff; }
.mesh-preview button:focus-visible { outline:2px solid #91bcf1; outline-offset:2px; }
.mesh-preview button:disabled { opacity:.4; cursor:default; }
.mesh-preview-body { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(210px,1fr); min-height:240px; height:min(300px,36vh); transition:height .2s ease; }
.mesh-viewport { position:relative; min-width:0; min-height:0; background:#101215; }
.mesh-viewport canvas { display:block; width:100%; height:100%; touch-action:none; }
.mesh-viewport nav { position:absolute; left:10px; bottom:10px; display:flex; gap:5px; }
.mesh-viewport nav button { background:#1b1e23; color:#aab5c5; border-color:#30353d; }
.mesh-viewport nav button[aria-pressed=true] { background:#27313d; color:#d4e8ff; border-color:#536b86; }
.mesh-viewport [data-mesh-auto-rig] { position:absolute; right:10px; bottom:10px; z-index:2; background:#f4f5f7; color:#171b20; border-color:#fff; font-weight:600; box-shadow:0 3px 14px #0005; }
.mesh-viewport [data-mesh-auto-rig]:hover:not(:disabled) { background:#fff; color:#11151b; border-color:#fff; }
.mesh-rig-open [data-mesh-auto-rig] { display:none; }
.mesh-animation { position:absolute; left:10px; top:10px; z-index:3; height:calc(100% - 20px); pointer-events:none; white-space:normal; line-height:1.4; width:36px; max-width:calc(100% - 20px); transition:width .25s cubic-bezier(.2,.8,.2,1); }
.mesh-animation[hidden],.mesh-animation [hidden] { display:none; }
.mesh-animation:has(.mesh-animation-detail:not([hidden])) { width:320px; }
.mesh-animation.expanded { width:calc(100% - 20px); }
.mesh-animation-composer { pointer-events:auto; display:flex; align-items:center; width:36px; max-width:100%; height:36px; padding:0; gap:0; border:1px solid transparent; border-radius:19px; background:transparent; box-shadow:0 4px 20px #0004; transition:width .25s cubic-bezier(.2,.8,.2,1),padding .25s,background .25s,border-color .25s; }
.mesh-animation.expanded .mesh-animation-composer { width:100%; height:auto; min-height:52px; gap:9px; padding:7px; background:#14202ded; border-color:#34566d; backdrop-filter:blur(16px); }
.mesh-animation.expanded .mesh-animation-composer:focus-within { border-color:#397da7; box-shadow:0 4px 20px #0004,0 0 0 2px #24658b22; }
.mesh-animation .mesh-animation-wand { display:grid; place-items:center; flex:none; width:34px; height:34px; min-width:34px; min-height:34px; max-height:34px; padding:7px; border:0; border-radius:50%; background:#1766a2; }
.mesh-preview .mesh-animation .mesh-animation-wand:hover:not(:disabled) { background:#1d70ac; color:#050d15; border-color:transparent; }
.mesh-animation-wand img { display:block; width:20px; height:23px; filter:none; object-fit:contain; }
.mesh-animation-entry { display:flex; align-items:center; flex:1; min-width:0; max-width:0; gap:8px; opacity:0; visibility:hidden; overflow:hidden; transition:max-width .25s,opacity .2s; }
.mesh-animation.expanded .mesh-animation-entry { max-width:100%; opacity:1; visibility:visible; }
.mesh-animation textarea { display:block; flex:1; width:100%; height:34px; min-height:34px; max-height:102px; min-width:0; resize:none; margin:0; padding:9px 0; border:0; outline:0; background:transparent; color:#edf6ff; font-size:11px; line-height:16px; font-family:inherit; box-shadow:none; }
.mesh-animation textarea::placeholder { color:#9db2c3; }
.mesh-animation [data-clip-generate] { display:grid; place-items:center; flex:none; border:0; margin:0; background:#1766a2; color:#050d15; border-radius:50%; width:28px; height:28px; padding:0; font-size:17px; line-height:1; }
.mesh-animation-detail { pointer-events:auto; margin-top:6px; padding:7px 9px; border:1px solid #42546a77; border-radius:10px; background:#141e2bea; backdrop-filter:blur(16px); color:#d5e6f4; box-shadow:0 3px 16px #0003; }
.mesh-animation:has(.mesh-animation-playback:not([hidden])) .mesh-animation-detail { position:absolute; bottom:44px; left:0; right:0; }
.mesh-animation-notice { display:flex; align-items:center; gap:6px; font-size:10px; line-height:1.4; }
.mesh-animation-notice span { flex:1; overflow-wrap:anywhere; }
.mesh-animation.error .mesh-animation-notice { color:#ffadba; }
.mesh-animation-playback { display:flex; align-items:center; gap:5px; margin-top:6px; }
.mesh-animation-playback button,.mesh-animation-notice button { flex:none; white-space:nowrap; padding:4px 6px; font-size:10px; background:#263749; }
.mesh-animation-playback input { min-width:25px; width:100%; accent-color:#38bdf8; }
.mesh-animation-playback output { flex:none; font-size:9px; color:#abc0d4; font-variant-numeric:tabular-nums; }
@media(prefers-reduced-motion:reduce) { .mesh-animation,.mesh-animation-composer,.mesh-animation-entry { transition:none; } }
@media(max-width:650px) { .mesh-animation { top:7px; left:7px; max-width:calc(100% - 14px); } .mesh-animation-playback { flex-wrap:wrap; } .mesh-animation-playback input { flex:1; width:35px; } }
.mesh-rig-beta .dialog-intro { color:#d2dae5; }
.mesh-rig-beta .dialog-header span { color:#38bdf8; font-weight:600; }
.mesh-review { min-width:0; overflow:auto; padding:12px; border-left:1px solid #292e35; scrollbar-color:#454950 transparent; }
.mesh-review[hidden],.mesh-rig-editor[hidden] { display:none; }
.mesh-rig-editor { min-width:0; overflow:auto; padding:12px; border-left:1px solid #303740; background:linear-gradient(140deg,#202a3466,#15181ce6); scrollbar-color:#454950 transparent; animation:mesh-rig-enter .2s ease-out; }
.mesh-rig-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:11px; }
.mesh-rig-editor label { display:block; margin:8px 0; color:#a7b3c3; font-size:10px; }
.mesh-rig-editor select,.mesh-rig-editor input { box-sizing:border-box; display:block; width:100%; min-width:0; margin-top:4px; padding:6px; color:#e8ebef; background:#10151bcc; border:1px solid #3b4754; border-radius:6px; font:inherit; }
.mesh-rig-coordinates { display:flex; gap:6px; }
.mesh-rig-editor .mesh-rig-mirror { display:flex; align-items:center; gap:7px; color:#b9ddfa; }
.mesh-rig-editor .mesh-rig-mirror input { width:auto; margin:0; accent-color:#38bdf8; }
.mesh-rig-coordinates label { min-width:0; flex:1; margin:0; }
.mesh-rig-hint,.mesh-rig-validation { color:#99aabd; font-size:10px; line-height:1.5; margin:7px 0; }
.mesh-rig-validation.error { color:#ff9aa6; }
.mesh-rig-buttons { display:flex; flex-wrap:wrap; gap:5px; }
.mesh-rig-buttons [data-rig-apply] { color:#d6eaff; background:#2b3d50; border-color:#516b87; }
.mesh-rig-open .mesh-preview-body { height:min(390px,42vh); }
@keyframes mesh-rig-enter { from { opacity:0; transform:translateX(6px); } to { opacity:1; transform:translateX(0); } }
@media(prefers-reduced-motion:reduce) { .mesh-rig-editor { animation:none; } .mesh-preview-body { transition:none; } }
@media(max-width:650px) { .mesh-rig-editor { padding:8px; } .mesh-rig-heading { flex-wrap:wrap; } .mesh-rig-open .mesh-preview-body { height:min(290px,32vh); } .mesh-rig-coordinates input { appearance:textfield; padding:5px 3px; } .mesh-rig-coordinates input::-webkit-inner-spin-button,.mesh-rig-coordinates input::-webkit-outer-spin-button { appearance:none; margin:0; } }
.mesh-review p { font-size:11px; line-height:1.55; color:#bac2cd; margin:10px 0; }
.mesh-review p.error { color:#ff9aa6; }
.mesh-upload-progress { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:8px 0 12px; }
.mesh-upload-progress[hidden] { display:none; }
.mesh-upload-progress small { color:#98a3b3; font-size:10px; }
.mesh-upload-track { position:relative; overflow:hidden; flex:1; min-width:80px; max-width:160px; height:5px; border-radius:4px; background:#28323e; }
.mesh-upload-track span { display:block; width:0; height:100%; border-radius:inherit; background:#49a9f8; transition:width .35s ease; }
.mesh-upload-track::after { content:""; position:absolute; inset:0; background:linear-gradient(100deg,transparent 20%,#c9eaff55 50%,transparent 80%); transform:translateX(-110%); animation:mesh-upload-shine 2.6s ease-in-out infinite; }
@keyframes mesh-upload-shine { to { transform:translateX(110%); } }
@media(prefers-reduced-motion:reduce) { .mesh-upload-track::after { animation:none; display:none; } .mesh-upload-track span { transition:none; } }
.mesh-review-views { display:flex; gap:6px; }
.mesh-review-views figure { margin:0; flex:1; min-width:0; }
.mesh-review-views img { width:100%; border-radius:6px; background:#101215; border:1px solid #262b31; }
.mesh-review-views figcaption { color:#98a3b3; text-align:center; font-size:9px; margin-top:4px; }
.mesh-position { display:flex; gap:6px; }
.mesh-position[hidden] { display:none; }
.mesh-position label { font-size:10px; color:#98a3b3; min-width:0; flex:1; }
.mesh-position input { box-sizing:border-box; display:block; width:100%; margin-top:4px; background:#101215; border:1px solid #34383d; border-radius:6px; padding:6px; color:#e8ebef; font-size:11px; }
.mesh-actions { display:flex; align-items:center; gap:12px; justify-content:space-between; padding:12px 16px; border-top:1px solid #292e35; background:#141619; }
.mesh-actions .mesh-approval-note { flex:1; margin:0; color:#98a3b3; font-size:10px; line-height:1.5; }
.mesh-action-buttons { display:flex; flex:none; gap:7px; }
.mesh-actions .mesh-approve { background:#d9eaff; color:#14283f; border-color:#d9eaff; font-weight:600; }
.mesh-actions .mesh-approve:hover:not(:disabled) { background:#edf5ff; border-color:#edf5ff; color:#14283f; }
@media(max-width:760px) { .mesh-actions { align-items:stretch; flex-direction:column; gap:9px; } .mesh-action-buttons { justify-content:flex-end; } }
@media(max-width:650px) { .mesh-preview-home { width:calc(100% - 24px); } .mesh-preview-body { grid-template-columns:minmax(0,1fr) minmax(140px,.85fr); min-height:220px; height:28vh; } .mesh-review { padding:8px; } .mesh-viewport nav { flex-wrap:wrap; right:8px; } .mesh-viewport nav button { font-size:9px; padding:5px 6px; } .mesh-preview header,.mesh-actions { padding:10px; } .mesh-preview header small { font-size:9px; } .mesh-action-buttons { gap:5px; } .mesh-action-buttons button { font-size:10px; padding:7px 9px; } }
@media(max-width:650px) { .mesh-viewport nav { right:85px; gap:4px; } .mesh-rig-open .mesh-viewport nav { right:8px; } .mesh-viewport [data-mesh-auto-rig] { right:7px; bottom:10px; padding:6px 7px; font-size:10px; } }

/* Make room for the complete approval card and keep its tool labels above it. */
.chat-app .chat-main:has(.mesh-preview:not([hidden])) .chat-face-stage { height:112px; }
.message-content:has(> .mesh-preview:not([hidden])) > .agent-output-card { display:none; }

.chat-main:has(.mesh-preview:not([hidden])) .welcome-state { display:none; }

.mesh-preview-heading { display:flex; align-items:center; justify-content:space-between; flex:1; min-width:0; gap:8px; }
.mesh-preview-heading > div { min-width:0; }
.mesh-preview-heading strong { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.mesh-preview .preview-history-button,.animator-header .preview-history-button { display:grid; place-items:center; flex:none; width:28px; height:28px; padding:0; border:1px solid #3b4652; border-radius:8px; background:#1b222a; color:#bdcddd; cursor:pointer; }
.preview-history-button svg { display:block; width:14px; height:14px; }
.preview-history-button:disabled { opacity:.3; cursor:default; }
.animator-header { gap:7px; }
.animator-header > div:first-of-type { flex:1; min-width:0; }
.animator-header-actions { flex:none; gap:5px; }
.animator-header-actions [data-animator-new] { padding:0 6px; }
@media(max-width:650px) { .mesh-preview header { gap:7px; } .mesh-preview-heading { gap:5px; } }