.chat-chart { padding: var(--space-md, 16px); margin-block: var(--space-sm, 12px); border-radius: 16px; min-width: 0; max-width: 100%; font-size: var(--type-body); }
.chat-chart-heading { display: flex; gap: 12px; align-items: start; justify-content: space-between; }
.chat-chart-heading button { flex-shrink: 0; padding: 8px 12px; border-radius: 12px; font-size: var(--type-caption); }
.chat-chart p { line-height: 1.6; overflow-wrap: anywhere; }
.chat-chart-preview { max-height: 320px; overflow: hidden; margin-block: 12px; }
.chat-chart[data-chart-system="western"] .chat-chart-preview .chat-chart-table-scroll { display: none; }
.chat-chart-wheel, .chat-chart-bodygraph { width: 100%; max-width: 420px; display: block; margin-inline: auto; color: rgb(var(--c-on-bg)); }
.chat-chart-preview :is(.chat-chart-wheel,.chat-chart-bodygraph) { max-height: 280px; }
.chat-chart-wheel :is(circle,path), .chat-chart-bodygraph :is(rect,path) { fill: none; stroke: rgb(var(--c-tint) / .5); stroke-width: 1; }
.chat-chart-wheel text, .chat-chart-bodygraph text { fill: currentColor; text-anchor: middle; dominant-baseline: middle; font-size: var(--type-caption); stroke: none; }
.chat-chart-wheel .chat-chart-sign { font-size: var(--type-caption); }
.chat-chart-wheel .chat-chart-planet { fill: rgb(var(--c-accent)); font-size: var(--type-title); }
.chat-chart-wheel .chat-chart-house { stroke-dasharray: 3 4; opacity: .5; }
.chat-chart-bodygraph .chat-chart-center-defined { fill: rgb(var(--c-accent) / .3); stroke: rgb(var(--c-accent)); }
.chat-chart-bodygraph .chat-chart-channel { stroke: rgb(var(--c-accent)); stroke-width: 4; }
.chat-chart-pillars, .chat-chart-zodiac { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; margin-block: 12px; }
.chat-chart-pillars > div { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 4px; text-align: center; font-size: var(--type-caption); }
.chat-chart-symbol { font-size: var(--type-title); line-height: 1.3; }
.chat-chart-zodiac > div { padding: 8px; font-size: var(--type-caption); }
.chat-chart-elements > div { display: grid; grid-template-columns: 3em minmax(0,1fr) 3em; gap: 8px; align-items: center; }
.chat-chart-elements meter { width: 100%; accent-color: rgb(var(--c-accent)); }
.chat-chart-elements meter::-webkit-meter-bar { background: rgb(var(--c-tint) / .2); border: 0; }
.chat-chart-elements meter::-webkit-meter-optimum-value { background: rgb(var(--c-accent)); }
.chat-chart-elements meter::-moz-meter-bar { background: rgb(var(--c-accent)); }
.chat-chart-table-scroll { overflow-x: auto; overscroll-behavior-x: contain; }
.chat-chart-table { width: 100%; border-collapse: collapse; font-size: var(--type-caption); }
.chat-chart-table :is(td,th) { padding: 8px; border: 1px solid rgb(var(--c-tint) / .25); text-align: center; white-space: nowrap; }
.chat-chart-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.chat-chart-tag { padding: 4px 8px; font-size: var(--type-caption); border-radius: 12px; }
.chat-chart-stale { color: rgb(var(--c-accent)); font-size: var(--type-caption); }
.chat-chart-raw { white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--type-caption); }
.chat-msg-chart { width: 100%; max-width: 720px; align-self: stretch; }
.chat-pair-charts { width: 100%; max-width: 720px; }
@media(max-width: 479px) { .chat-chart-zodiac { grid-template-columns: repeat(3,minmax(0,1fr)); } .chat-chart-heading { flex-wrap: wrap; } }

/* Native science renderers keep their geometry; only the enclosing viewport changes. */
.chat-chart-native { min-width:0; color:rgb(var(--c-on-bg)); }
.chat-native-views { display:grid; gap:var(--space-md); }
.chat-native-view { min-width:0; }
.chat-native-view h3 { margin-block:var(--space-sm); font-size:var(--type-label); }
.chat-native-canvas { min-width:0; overflow-x:auto; }
.chat-native-canvas svg { display:block; width:100%; height:auto; max-width:640px; margin-inline:auto; }
.chat-chart-preview:has(.chat-chart-native) { max-height:none; overflow:visible; }
.chat-chart-preview .chat-native-canvas svg { max-width:360px; }
.chat-native-thaiastro .chat-native-views { grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr)); }
[data-chart-expanded] .chat-native-thaiastro .chat-native-views { grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); }
.chat-native-humandesign .chat-native-canvas svg { max-width:360px; }
.chat-chart-preview .chat-native-humandesign .chat-native-canvas svg { max-width:260px; }
.chat-chart-native select { display:block; width:100%; margin-block:var(--space-sm); padding:var(--space-sm); font-size:var(--type-body); }
.chat-native-view[hidden] { display:none; }
.chat-chart-native .sn-table { width:100%; min-width:580px; border-collapse:collapse; font-size:var(--type-caption); }
.chat-chart-native .sn-table :is(th,td) { padding:var(--space-sm); border-bottom:1px solid rgb(var(--c-tint) / .25); }
.chat-chart-native .sn-rowhead { min-width:12em; max-width:15em; }
.chat-chart-native .sn-cell { cursor:pointer; }
.chat-chart-native .sn-cell.match { background:rgb(var(--c-accent) / .2); outline:1px solid rgb(var(--c-accent)); }
.chat-chart-native .sn-cell:focus-visible { outline:2px solid rgb(var(--c-accent)); }
.chat-chart-native :is(.font-caption,.text-\[8px\],.text-\[9px\],.text-\[10px\],.text-\[11px\]) { font-size:var(--type-caption); }
.chat-native-bazi .chat-native-canvas > div { min-width:360px; }
.chat-native-bazi .text-\[34px\] { font-size:var(--type-display); }
.chat-native-lifegraph .chat-native-canvas svg { min-width:760px; max-width:none; }
.chat-native-lifegraph .chat-native-canvas { overflow-x:auto; }
@media(max-width:479px) { .chat-native-thaiastro .chat-native-views { grid-template-columns:1fr; } .chat-native-bazi .chat-native-canvas > div { min-width:320px; } }