#tab-chains .can-panel { min-width: 0; max-width: 100%; margin-top: 1rem; }
.can-heading { display: flex; align-items: start; justify-content: space-between; flex-wrap: wrap; gap: .75rem; margin-bottom: 1rem; }
.can-heading .panel-title { margin: 0 0 .35rem; }
.can-heading .card-sub { margin: 0; }
.can-toolbar { gap: .65rem; align-items: end; }
.can-actions { display: flex; gap: .35rem; align-items: center; flex-wrap: wrap; }
.can-toolbar label { display: grid; gap: .25rem; font-size: .75rem; color: var(--text-secondary); min-width: 0; }
.can-search { flex: 1 1 200px; max-width: 320px; }
.can-labels { flex: 0 1 145px; }
.can-toolbar select { min-width: 0; width: 100%; padding: .45rem .6rem; font-size: .8rem; }
.can-toolbar button { min-height: 34px; white-space: nowrap; }
.can-canvas { height: clamp(380px, 62vh, 680px); width: 100%; max-width: 100%; min-width: 0; overflow: hidden; position: relative; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-elevated, #f8fafc); }
.can-canvas canvas, .can-canvas > div { max-width: 100%; }
.can-hint, .can-scope { font-size: .75rem; color: var(--text-secondary); line-height: 1.5; margin: .6rem 0 0; overflow-wrap: anywhere; white-space: normal; }
.can-scope { font-variant-numeric: tabular-nums; }
.can-guide { border-top: 1px solid var(--border); margin-top: .75rem; font-size: .78rem; color: var(--text-secondary); }
.can-guide summary { cursor: pointer; padding: .65rem 0; font-weight: 600; }
.can-guide-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 1rem; }
.can-guide h4 { margin: 0 0 .5rem; font-size: .8rem; color: var(--text-primary); }
.can-guide p { margin: .5rem 0; line-height: 1.6; overflow-wrap: anywhere; }
.can-statuses, .can-edge-legend { display: flex; flex-wrap: wrap; gap: .6rem 1rem; }
.can-statuses span, .can-edge-legend span { display: inline-flex; gap: .35rem; align-items: center; }
.can-statuses i { width: 9px; height: 9px; border-radius: 50%; }
.can-edge-legend i { width: 20px; border-top: 2px solid var(--line); }
.can-inspect { margin-top: .75rem; padding: .7rem .85rem; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 8px; }
.can-tip { max-width: min(340px, 75vw); font: 13px/1.5 system-ui, sans-serif; color: var(--text-primary); white-space: normal; overflow-wrap: anywhere; }
.can-tip strong, .can-tip span { display: block; }
.can-tip strong { margin-bottom: .25rem; }
.can-canvas .vis-tooltip, .can-canvas .scene-tooltip { max-width: min(360px, 80vw); white-space: normal; padding: 10px 12px; background: var(--bg-card, #fff); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 4px 16px rgb(15 23 42 / .12); }
.can-canvas .scene-tooltip:empty { display: none; }
#tab-chains .can-panel.can-fullscreen { position: fixed; inset: 12px; z-index: 9999; margin: 0; padding: 1rem; background: var(--bg-card, #fff); display: flex; flex-direction: column; overflow: auto; }
.can-fullscreen .can-canvas { flex: 1 0 250px; height: auto; }
.can-fullscreen .can-guide { flex: 0 0 auto; }
@media (max-width: 600px) { .can-toolbar { align-items: stretch; } .can-search { max-width: none; flex-basis: 100%; } .can-canvas { height: 420px; } .can-heading .panel-title { font-size: 1rem; } }