/* components.ai-decision-tree.css (public)
 * Accessible, higher contrast styling for AI Decision Tree explorer.
 * Dark theme baseline with WCAG-friendly contrasts and clear affordances.
 */
:root {
  --adt-bg: #121417;
  --adt-panel: #1d2126;
  --adt-panel-alt: #23282f;
  --adt-border: #2f3740;
  --adt-border-strong: #3d4752;
  --adt-text: #e5e9ef;
  --adt-text-dim: #a8b2bd;
  --adt-accent: #4aa3ff;
  --adt-accent-alt: #ffcc4d;
  --adt-focus: #ffcc4d;
  --adt-danger: #ff5f56;
  --adt-ai-bg: #243445;
  --adt-human-bg: #3b2a22;
  --adt-ai-glow: #4aa3ff44;
  --adt-human-glow: #ff7d4d44;
  --adt-tag-claw: #ff6b57;
  --adt-tag-energy: #48d187;
  --adt-tag-heal: #ff9ad6;
  --adt-tag-triple: #ffd166;
  --adt-tag-potential: #8aa4ff;
  --adt-radius-sm: 4px;
  --adt-radius: 6px;
  --adt-font-stack: 'Nunito', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --adt-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
  --adt-transition: 120ms ease;
}

.cmp-ai-decision-tree { font-family: var(--adt-font-stack); display:flex; flex-direction:column; gap:8px; background:var(--adt-bg); color:var(--adt-text); padding:8px 10px; border:1px solid var(--adt-border); border-radius: var(--adt-radius); box-shadow:0 4px 18px -4px #000a, 0 2px 6px -2px #0008; max-height:560px; }
.cmp-ai-decision-tree * { box-sizing:border-box; }
.cmp-ai-decision-tree button { font-family:inherit; }

/* When in a modal, allow component to fill available space */
.ai-decision-tree-wrapper .cmp-ai-decision-tree {
  height: 100%;
  max-height: none;
}

/* Toolbar */
.cmp-ai-decision-tree .adt-toolbar { display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; background:var(--adt-panel); padding:6px 8px; border:1px solid var(--adt-border); border-radius:var(--adt-radius); }
.cmp-ai-decision-tree .adt-left-tools, .cmp-ai-decision-tree .adt-right-tools { display:flex; gap:8px; align-items:center; }
.cmp-ai-decision-tree .adt-btn { background:var(--adt-panel-alt); border:1px solid var(--adt-border-strong); color:var(--adt-text); padding:4px 10px; font-size:12px; border-radius:var(--adt-radius-sm); cursor:pointer; line-height:1.2; display:inline-flex; align-items:center; gap:4px; transition:background var(--adt-transition), border-color var(--adt-transition), color var(--adt-transition); }
.cmp-ai-decision-tree .adt-btn:hover { background:var(--adt-accent); border-color:var(--adt-accent); color:#fff; }
.cmp-ai-decision-tree .adt-btn:active { transform:translateY(1px); }
.cmp-ai-decision-tree .adt-btn:focus-visible { outline:2px solid var(--adt-focus); outline-offset:2px; }

/* Fixed widths for toggle buttons to prevent layout shift */
.cmp-ai-decision-tree .adt-btn[data-action="toggle-view"] { min-width: 105px; }
.cmp-ai-decision-tree .adt-btn[data-action="toggle-mode"] { min-width: 105px; }

/* Embedded version styling for Settings modal */
.ai-decision-tree-embedded .cmp-ai-decision-tree {
  height: 100%;
  font-size: 11px;
  background: #f9f9f9;
  border-radius: 4px;
}

body.dark-mode .ai-decision-tree-embedded .cmp-ai-decision-tree {
  background: #1f2429;
}

.ai-decision-tree-embedded .cmp-ai-decision-tree .adt-toolbar {
  background: #e9e9e9;
  border: 1px solid #ddd;
  border-radius: 4px 4px 0 0;
  padding: 4px 6px;
}

body.dark-mode .ai-decision-tree-embedded .cmp-ai-decision-tree .adt-toolbar {
  background: #2c3339;
  border-color: #30363d;
}

.ai-decision-tree-embedded .cmp-ai-decision-tree .adt-btn {
  padding: 3px 8px;
  font-size: 10px;
  background: #fff;
  border: 1px solid #ccc;
  color: #333;
}

body.dark-mode .ai-decision-tree-embedded .cmp-ai-decision-tree .adt-btn {
  background: #282828;
  border-color: #444;
  color: #ddd;
}

.ai-decision-tree-embedded .cmp-ai-decision-tree .adt-btn:hover {
  background: #f0f0f0;
  border-color: #999;
}

body.dark-mode .ai-decision-tree-embedded .cmp-ai-decision-tree .adt-btn:hover {
  background: #333;
  border-color: #555;
}

.ai-decision-tree-embedded .cmp-ai-decision-tree .adt-tree-scroll {
  background: #fff;
  border: 1px solid #ddd;
  border-top: none;
  border-radius: 0 0 4px 4px;
}

body.dark-mode .ai-decision-tree-embedded .cmp-ai-decision-tree .adt-tree-scroll {
  background: #262c31;
  border-color: #30363d;
}

.ai-decision-tree-embedded .cmp-ai-decision-tree input[type=text] {
  background: #fff;
  border: 1px solid #ccc;
  color: #333;
  font-size: 10px;
  min-width: 120px;
}

body.dark-mode .ai-decision-tree-embedded .cmp-ai-decision-tree input[type=text] {
  background: #1f2429;
  border-color: #30363d;
  color: #e6ebf0;
}

/* Inputs */
.cmp-ai-decision-tree input[type=text] { background:#101317; border:1px solid var(--adt-border); color:var(--adt-text); padding:4px 6px; border-radius:var(--adt-radius-sm); font-size:12px; min-width:170px; }
.cmp-ai-decision-tree input[type=text]:focus { outline:2px solid var(--adt-accent); outline-offset:1px; }
.cmp-ai-decision-tree input[type=checkbox] { accent-color: var(--adt-accent); }
.cmp-ai-decision-tree label { font-size:12px; display:inline-flex; align-items:center; gap:4px; cursor:pointer; }

/* Summary */
.cmp-ai-decision-tree .adt-summary { display:flex; gap:18px; font-size:12px; color:var(--adt-text-dim); padding:2px 6px 0; flex-wrap:wrap; }
.cmp-ai-decision-tree .adt-summary span { background:var(--adt-panel); padding:3px 8px; border-radius:var(--adt-radius-sm); border:1px solid var(--adt-border); }
.cmp-ai-decision-tree .adt-summary .adt-pre-meta { font-size:11px; margin-left:4px; opacity:0.85; }

/* Legend */
.cmp-ai-decision-tree .adt-legend { display:flex; gap:14px; align-items:center; flex-wrap:wrap; font-size:11px; padding:2px 6px 0; color:var(--adt-text-dim); }
.cmp-ai-decision-tree .adt-legend .legend-item { display:inline-flex; gap:6px; align-items:center; background:var(--adt-panel); padding:2px 8px; border:1px solid var(--adt-border); border-radius:var(--adt-radius-sm); }
.cmp-ai-decision-tree .adt-legend .legend-note { opacity:0.7; font-style:italic; }
.cmp-ai-decision-tree .adt-legend .badge { display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:50%; font-size:10px; font-weight:700; letter-spacing:0.5px; font-family:var(--adt-mono); }
.cmp-ai-decision-tree .adt-legend .badge-ai { background:var(--adt-accent); color:#fff; }
.cmp-ai-decision-tree .adt-legend .badge-human { background:#ff7d4d; color:#1a0e06; }

/* Tag Filters */
.cmp-ai-decision-tree .adt-tag-filters { display:flex; gap:6px; flex-wrap:wrap; padding:2px 2px 0; }
.cmp-ai-decision-tree .adt-tag { font-size:11px; background:var(--adt-panel-alt); color:var(--adt-text-dim); border:1px solid var(--adt-border); padding:3px 8px; border-radius:100px; cursor:pointer; line-height:1; display:inline-flex; align-items:center; gap:4px; transition:background var(--adt-transition), color var(--adt-transition), border-color var(--adt-transition); }
.cmp-ai-decision-tree .adt-tag:hover { background:var(--adt-accent); color:#fff; border-color:var(--adt-accent); }
.cmp-ai-decision-tree .adt-tag.is-active { background:var(--adt-accent-alt); color:#222; font-weight:600; border-color:var(--adt-accent-alt); }

/* Tree Scroll */
.cmp-ai-decision-tree .adt-tree-scroll { flex:1; overflow:auto; border:1px solid var(--adt-border); background:#0e1012; padding:6px 8px; border-radius:var(--adt-radius); scrollbar-width:thin; }

body.dark-mode .cmp-ai-decision-tree .adt-tree-scroll {
  background: #0e1012 !important;
  border-color: #2d343d !important;
}
.cmp-ai-decision-tree .adt-tree-scroll::-webkit-scrollbar { width:10px; }
.cmp-ai-decision-tree .adt-tree-scroll::-webkit-scrollbar-track { background:#0b0d10; }
.cmp-ai-decision-tree .adt-tree-scroll::-webkit-scrollbar-thumb { background:#2c333b; border:2px solid #0b0d10; border-radius:10px; }
.cmp-ai-decision-tree .adt-tree-scroll::-webkit-scrollbar-thumb:hover { background:#39434d; }

/* Empty */
.cmp-ai-decision-tree .adt-empty { text-align:center; padding:42px 10px; color:var(--adt-text-dim); font-style:italic; font-size:13px; }

/* Round / Turn */
.cmp-ai-decision-tree .adt-round { margin-bottom:12px; background:var(--adt-panel); border:1px solid var(--adt-border); border-radius:var(--adt-radius); overflow:hidden; }
.cmp-ai-decision-tree .adt-round-header { cursor:pointer; font-weight:600; color:var(--adt-accent-alt); background:linear-gradient(to right,#2a3139,#232a31); padding:6px 10px; display:flex; align-items:center; gap:8px; font-size:13px; border-bottom:1px solid var(--adt-border); }
.cmp-ai-decision-tree .adt-round-header:hover { background:#313a44; }
.cmp-ai-decision-tree .adt-turn { margin:6px 0 6px 14px; padding-left:6px; border-left:2px solid #2d333a; }
.cmp-ai-decision-tree .adt-turn-header { cursor:pointer; font-weight:600; color:var(--adt-accent); display:flex; align-items:center; gap:6px; padding:3px 4px; font-size:12px; }
.cmp-ai-decision-tree .adt-turn-header:hover { color:#66b7ff; }

/* Roll */
.cmp-ai-decision-tree .adt-roll { border:1px solid #273038; border-left:4px solid #3d4953; background:var(--adt-panel-alt); margin:6px 0 6px 18px; border-radius:var(--adt-radius-sm); box-shadow:0 1px 2px #0006; }
.cmp-ai-decision-tree .adt-roll.is-open { border-left-color: var(--adt-accent-alt); }
.cmp-ai-decision-tree .adt-roll.is-ai { border-left-color: var(--adt-accent); }
.cmp-ai-decision-tree .adt-roll.is-human { border-left-color: #ff7d4d; }
.cmp-ai-decision-tree .adt-roll.is-ai { background:linear-gradient(90deg,var(--adt-ai-bg), rgba(20,26,32,0.35)); box-shadow:0 0 0 1px #2d3a46, 0 0 0 3px transparent, 0 2px 4px -2px #0008; }
.cmp-ai-decision-tree .adt-roll.is-human { background:linear-gradient(90deg,var(--adt-human-bg), rgba(32,20,14,0.35)); box-shadow:0 0 0 1px #44352c, 0 0 0 3px transparent, 0 2px 4px -2px #0008; }
.cmp-ai-decision-tree .adt-roll.is-ai.is-open { box-shadow:0 0 0 1px #345066, 0 0 0 3px var(--adt-ai-glow); }
.cmp-ai-decision-tree .adt-roll.is-human.is-open { box-shadow:0 0 0 1px #5a3e32, 0 0 0 3px var(--adt-human-glow); }
.cmp-ai-decision-tree .adt-roll-header { cursor:pointer; display:flex; gap:10px; align-items:center; font-size:12px; padding:5px 8px; }
.cmp-ai-decision-tree .adt-roll-header:hover { background:#2c343c; }
.cmp-ai-decision-tree .adt-roll-header .faces { font-family:var(--adt-mono); color:var(--adt-text); font-weight:600; letter-spacing:0.5px; }
.cmp-ai-decision-tree .adt-roll-header .mini-dice-seq { display:inline-flex; gap:4px; margin-right:6px; }
.cmp-ai-decision-tree .adt-roll-header .mini-die { width:20px; height:20px; display:inline-flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; }
.cmp-ai-decision-tree .adt-roll-header .mini-die.is-num { background:#fff; color:#000; border-radius:50%; box-shadow:0 0 0 1px #0004, 0 1px 2px #0008; font-family:var(--adt-mono); }
.cmp-ai-decision-tree .adt-roll-header .mini-die.is-icon { background:transparent; box-shadow:none; font-size:14px; }
.cmp-ai-decision-tree .adt-roll-header .mini-die.face-heart { color:#ff5fae; }
.cmp-ai-decision-tree .adt-roll-header .mini-die.face-claw { color:#ff897d; }
.cmp-ai-decision-tree .adt-roll-header .mini-die.face-energy { color:#6de3a0; }
.cmp-ai-decision-tree .adt-roll.is-pre .adt-roll-header { opacity:0.75; }
.cmp-ai-decision-tree .adt-roll .pre-label { margin-left:6px; font-size:10px; background:#39424b; color:#d5dde5; padding:1px 4px; border-radius:8px; letter-spacing:0.5px; text-transform:uppercase; }
.cmp-ai-decision-tree .adt-roll-header .score-badge { background:#39424b; color:#fff; padding:2px 7px; border-radius:12px; font-size:11px; font-weight:600; line-height:1; }
.cmp-ai-decision-tree .adt-roll.is-open .score-badge { background:var(--adt-accent); }
.cmp-ai-decision-tree .adt-roll-header .origin-badge { background:#2e353c; color:#fff; padding:2px 6px; border-radius:8px; font-size:10px; font-weight:600; letter-spacing:0.5px; }
.cmp-ai-decision-tree .adt-roll.is-human .origin-badge { background:#ff7d4d; color:#1d120c; }
.cmp-ai-decision-tree .adt-roll.is-ai .origin-badge { background:var(--adt-accent); color:#08121d; }
.cmp-ai-decision-tree .adt-roll-header .why-badge { background:#272f37; color:#d8e2ec; padding:2px 8px; border-radius:14px; font-size:10px; line-height:1.2; max-width:190px; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; border:1px solid #34404a; }
.cmp-ai-decision-tree .adt-roll-header .why-badge:hover { background:#313b44; }
.cmp-ai-decision-tree .adt-roll-body { padding:6px 10px 10px; font-size:12px; color:var(--adt-text-dim); line-height:1.45; }
.cmp-ai-decision-tree .adt-roll-body .rationale { margin-bottom:6px; white-space:pre-wrap; }
.cmp-ai-decision-tree .adt-roll-body .english-expl { margin:4px 0 8px; font-size:11px; color:#d0d6dc; font-style:italic; }
.cmp-ai-decision-tree .adt-roll-body .kept-line { display:flex; flex-wrap:wrap; gap:4px; align-items:center; margin:4px 0 6px; }
.cmp-ai-decision-tree .adt-roll-body .keep-label { font-size:11px; text-transform:uppercase; letter-spacing:0.5px; opacity:0.75; margin-right:4px; }
.cmp-ai-decision-tree .adt-roll-body .keep-die { width:22px; height:22px; display:inline-flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; border-radius:50%; background:#2a3239; color:#fff; box-shadow:0 0 0 1px #384149; position:relative; }
.cmp-ai-decision-tree .adt-roll-body .keep-die.is-num { background:#fff; color:#000; box-shadow:0 0 0 1px #0005; }
.cmp-ai-decision-tree .adt-roll-body .keep-die.is-icon { background:transparent; box-shadow:none; }
.cmp-ai-decision-tree .adt-roll-body .keep-die.is-kept { outline:2px solid var(--adt-accent-alt); outline-offset:1px; }
.cmp-ai-decision-tree .adt-roll-body .keep-die.is-kept.is-num { box-shadow:0 0 0 2px var(--adt-accent-alt), 0 0 0 1px #000 inset; }

/* Tags */
.cmp-ai-decision-tree .tags { display:flex; gap:5px; flex-wrap:wrap; margin-left:auto; }
.cmp-ai-decision-tree .tag { background:#303a44; color:#d5dde5; padding:2px 6px; border-radius:10px; font-size:10px; font-weight:500; letter-spacing:0.3px; text-transform:uppercase; }
.cmp-ai-decision-tree .tag:hover { background:#3b4651; }
.cmp-ai-decision-tree .tags.empty { opacity:0.35; }
.cmp-ai-decision-tree .tag[data-tag=claw] { background:var(--adt-tag-claw); color:#2a0d07; }
.cmp-ai-decision-tree .tag[data-tag=energy] { background:var(--adt-tag-energy); color:#062016; }
.cmp-ai-decision-tree .tag[data-tag=heal] { background:var(--adt-tag-heal); color:#2a1122; }
.cmp-ai-decision-tree .tag[data-tag=triple] { background:var(--adt-tag-triple); color:#3a2c05; }
.cmp-ai-decision-tree .tag[data-tag=potential] { background:var(--adt-tag-potential); color:#06122e; }

/* Caret */
.cmp-ai-decision-tree .caret { width:0; height:0; border-top:5px solid transparent; border-bottom:5px solid transparent; border-left:6px solid #6c7a86; display:inline-block; transition:transform var(--adt-transition), border-left-color var(--adt-transition); }
.cmp-ai-decision-tree .caret.open { transform:rotate(90deg); border-left-color:var(--adt-accent-alt); }

/* Hypotheticals */
.cmp-ai-decision-tree details.hypo { margin-top:6px; background:#20262c; border:1px solid #2c353d; padding:6px 8px; border-radius:var(--adt-radius-sm); }
.cmp-ai-decision-tree details.hypo[open] { background:#252d34; }
.cmp-ai-decision-tree details.hypo summary { cursor:pointer; font-size:11px; color:var(--adt-text); font-weight:600; }
.cmp-ai-decision-tree .hypo-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(60px,1fr)); gap:6px; margin-top:6px; }
.cmp-ai-decision-tree .hypo-item { background:#161b20; border:1px solid #2b333b; padding:4px 4px 5px; font-size:11px; text-align:center; border-radius:var(--adt-radius-sm); line-height:1.1; color:var(--adt-text-dim); }
.cmp-ai-decision-tree .hypo-item code { display:block; font-size:11px; color:var(--adt-accent-alt); margin-bottom:2px; font-family:var(--adt-mono); }

/* ============================================================
   STANDARD VIEW (Legacy White Background Theme)
   ============================================================ */

/* Container overrides for standard view - scoped to tree scroll container only */
.cmp-ai-decision-tree .adt-tree-scroll[data-view="standard"] {
  background: #fff;
  border: 2px solid #dee2e6;
  color: #333;
}

/* Note: Toolbar, buttons, and root styling remain modern/dark regardless of view */

/* Player action header */
.cmp-ai-decision-tree .standard-player-action-header {
  background: #f8f9fa;
  border: 2px solid #d4af37;
  border-radius: 8px 8px 0 0;
  padding: 12px 16px;
  font-weight: 900;
  font-size: 14px;
  text-align: center;
  color: #2c1810;
  letter-spacing: 1px;
  margin-bottom: 0;
  font-family: 'Bangers', cursive;
}

body.dark-mode .cmp-ai-decision-tree .standard-player-action-header {
  background: #2a3137;
  border-color: #8b7a3d;
  color: #ffd54f;
}

.cmp-ai-decision-tree .standard-roll-container {
  background: #fff;
  border: 2px solid #d4af37;
  border-top: none;
  margin-bottom: 16px;
}

body.dark-mode .cmp-ai-decision-tree .standard-roll-container {
  background: #1a1f24;
  border-color: #8b7a3d;
}

.cmp-ai-decision-tree .standard-roll-header-with-dice {
  background: #f8f9fa;
  padding: 10px 14px;
  border-bottom: 1px solid #dee2e6;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

body.dark-mode .cmp-ai-decision-tree .standard-roll-header-with-dice {
  background: #2a3137;
  border-bottom-color: #3d4651;
}

.cmp-ai-decision-tree .standard-player-label {
  font-weight: 700;
  font-size: 13px;
  color: #495057;
  margin-right: 8px;
  font-family: 'Bangers', cursive;
  letter-spacing: 0.5px;
}

body.dark-mode .cmp-ai-decision-tree .standard-player-label {
  color: #c5cdd6;
}

.cmp-ai-decision-tree .standard-inline-die { 
  width: 35px;
  height: 35px;
  border: 2px solid #333;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  background: linear-gradient(145deg, #f0f0f0, #d0d0d0);
  color: #333;
  margin-right: 4px;
  padding: 0;
  box-shadow: 2px 2px 4px rgba(0,0,0,.3);
}

.cmp-ai-decision-tree .standard-inline-die.kept { 
  border-color: #FFD700;
  background: linear-gradient(145deg, #fff, #f8f8f8);
  box-shadow: 0 0 0 2px #FFD700, 2px 2px 4px rgba(0,0,0,.3);
}

.cmp-ai-decision-tree .standard-inline-die.unkept { 
  opacity: 0.85;
}

.cmp-ai-decision-tree .standard-dice-count {
  font-size: 12px;
  color: #6c757d;
  margin-left: 8px;
  font-weight: 600;
}

/* Decision detail section */
.cmp-ai-decision-tree .standard-decision-detail { 
  background: #fff;
  padding: 14px 16px;
  border-bottom: 1px solid #dee2e6;
}

.cmp-ai-decision-tree .standard-detail-header { 
  font-weight: 700;
  color: #212529;
  margin-bottom: 10px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-family: 'Bangers', cursive;
}

.cmp-ai-decision-tree .standard-detail-row { 
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  font-size: 13px;
}

.cmp-ai-decision-tree .standard-label { 
  font-weight: 600;
  color: #212529;
  margin-right: 10px;
  min-width: 140px;
  font-family: 'Nunito', sans-serif;
}

.cmp-ai-decision-tree .standard-goal-badge { 
  background: #17a2b8;
  color: #fff;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
}

.cmp-ai-decision-tree .standard-decision-badge { 
  background: #e8e8e8;
  color: #000;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  font-style: italic;
  letter-spacing: 0.5px;
  display: inline-flex;
  align-items: center;
}

.cmp-ai-decision-tree .standard-confidence-badge { 
  background: #ffeaa7;
  color: #000;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
}

.cmp-ai-decision-tree .standard-kept-die { 
  width: 28px;
  height: 28px;
  border: 2px solid #333;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 5px;
  background: linear-gradient(145deg, #f0f0f0, #d0d0d0);
  color: #333;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 2px 2px 4px rgba(0,0,0,.3);
}

body.dark-mode .cmp-ai-decision-tree .standard-kept-die {
  background: linear-gradient(145deg, #3a4249, #2a3137);
  color: #e5e9ef;
  border-color: #5a6672;
}

.cmp-ai-decision-tree .standard-justification { 
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  padding: 10px 12px;
  margin-top: 6px;
  font-size: 12px;
  color: #495057;
  line-height: 1.5;
  font-family: 'Nunito', sans-serif;
}

body.dark-mode .cmp-ai-decision-tree .standard-justification {
  background: #2a3137;
  border-color: #3d4651;
  color: #c5cdd6;
}

/* Roll odds section */
.cmp-ai-decision-tree .standard-roll-odds { 
  background: #e9ecef;
  padding: 14px 16px;
  border-top: 1px solid #dee2e6;
}

body.dark-mode .cmp-ai-decision-tree .standard-roll-odds {
  background: #1e2429;
  border-top-color: #3d4651;
}

.cmp-ai-decision-tree .standard-odds-header { 
  font-weight: 700;
  color: #495057;
  margin-bottom: 10px;
  font-size: 13px;
  font-family: 'Bangers', cursive;
  letter-spacing: 0.5px;
}

body.dark-mode .cmp-ai-decision-tree .standard-odds-header {
  color: #c5cdd6;
}

.cmp-ai-decision-tree .standard-odds-subtitle { 
  font-weight: 400;
  color: #6c757d;
  font-size: 11px;
  font-family: 'Nunito', sans-serif;
}

.cmp-ai-decision-tree .standard-odds-row { 
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.cmp-ai-decision-tree .standard-odds-label { 
  font-size: 12px;
  font-weight: 600;
  color: #495057;
  min-width: 80px;
}

.cmp-ai-decision-tree .standard-odds-bar { 
  flex: 1;
  height: 20px;
  background: #dee2e6;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  border: 1px solid #ced4da;
}

.cmp-ai-decision-tree .standard-odds-fill { 
  height: 100%;
  background: linear-gradient(90deg, #28a745, #20c997);
  border-radius: 10px;
  transition: width 0.3s ease;
}

.cmp-ai-decision-tree .standard-odds-percent { 
  font-size: 12px;
  font-weight: 700;
  color: #495057;
  min-width: 45px;
  text-align: right;
}

.cmp-ai-decision-tree .standard-considerations { 
  font-size: 12px;
  color: #6c757d;
  line-height: 1.5;
  margin-top: 8px;
  font-family: 'Nunito', sans-serif;
}

/* Round/turn wrappers */
.cmp-ai-decision-tree .standard-round { 
  margin-bottom: 16px;
  background: #fff;
  border: 2px solid #d4af37;
  border-radius: 8px;
  overflow: hidden;
}

.cmp-ai-decision-tree .standard-round-header { 
  background: linear-gradient(135deg, #d4af37, #f4e68a);
  color: #2c1810;
  font-weight: 900;
  font-size: 15px;
  padding: 10px 14px;
  text-align: center;
  letter-spacing: 1px;
  font-family: 'Bangers', cursive;
}

/* Responsive adjustments for legacy view */
@media (max-width:820px){
  .cmp-ai-decision-tree .standard-dice-row { flex-wrap:wrap; }
  .cmp-ai-decision-tree .standard-turn-header { flex-wrap:wrap; }
  .cmp-ai-decision-tree .standard-detail-row { flex-direction:column; align-items:flex-start; }
  .cmp-ai-decision-tree .standard-label { min-width:auto; margin-bottom:4px; }
}

/* Modern view responsive */
@media (max-width:820px){
  .cmp-ai-decision-tree { max-height:60vh; }
  .cmp-ai-decision-tree .adt-toolbar { flex-direction:column; align-items:stretch; }
  .cmp-ai-decision-tree .adt-left-tools, .cmp-ai-decision-tree .adt-right-tools { flex-wrap:wrap; }
  .cmp-ai-decision-tree input[type=text]{ width:100%; min-width:0; }
}

/* ============================================================
   STANDARD VIEW - LEGACY STRUCTURE CLASSES
   (Used by standard view with white background theme)
   All classes renamed from ai-flow-* to adt-std-* for consistency
   ============================================================ */

/* Mini Dice in Logic Flow */
.cmp-ai-decision-tree .adt-tree-scroll[data-view="standard"] .adt-std-die {
    width: 24px;
    height: 24px;
    border-radius: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    background: #ffffff;
    color: #111;
    border: 1px solid #d0d7de;
    box-shadow: 0 1px 1px rgba(0,0,0,0.06);
    position: relative;
    vertical-align: middle;
    overflow: hidden;
}

.cmp-ai-decision-tree .adt-tree-scroll[data-view="standard"] .adt-std-die.attack {
    background: #ffe4d5;
    border-color: #ffb491;
}

.cmp-ai-decision-tree .adt-tree-scroll[data-view="standard"] .adt-std-die.kept {
    outline: 2px solid #25a244;
    box-shadow: 0 0 0 2px rgba(37,162,68,0.35);
}

.cmp-ai-decision-tree .adt-tree-scroll[data-view="standard"] .adt-std-die.face-heart {
    color: #d01212;
}

.cmp-ai-decision-tree .adt-tree-scroll[data-view="standard"] .adt-std-die.face-claw {
    color: #ff897d;
}

.cmp-ai-decision-tree .adt-tree-scroll[data-view="standard"] .adt-std-die.face-energy {
    color: #ffce00;
}

.cmp-ai-decision-tree .adt-tree-scroll[data-view="standard"] .adt-std-die.face-unknown {
    background: #eee;
    color: #666;
    font-size: 12px;
    border-style: dashed;
}

/* Decision Pills */
.cmp-ai-decision-tree .adt-tree-scroll[data-view="standard"] .adt-std-decision-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    background: #e8e8e8;
    color: #000;
    border: 1px solid #bbb;
}

/* Confidence Pills */
.cmp-ai-decision-tree .adt-tree-scroll[data-view="standard"] .adt-std-confidence-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
}

.cmp-ai-decision-tree .adt-tree-scroll[data-view="standard"] .adt-std-confidence-pill.high {
    background: #a8e6a3;
    color: #000;
}

.cmp-ai-decision-tree .adt-tree-scroll[data-view="standard"] .adt-std-confidence-pill.med {
    background: #ffeaa7;
    color: #000;
}

.cmp-ai-decision-tree .adt-tree-scroll[data-view="standard"] .adt-std-confidence-pill.low {
    background: #ffb3b3;
    color: #000;
}

/* Structured Lines */
.cmp-ai-decision-tree .adt-tree-scroll[data-view="standard"] .adt-std-line {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 0;
    font-size: 13px;
}

.cmp-ai-decision-tree .adt-tree-scroll[data-view="standard"] .adt-std-line-label {
    font-weight: 700;
    min-width: 95px;
    display: inline-block;
}

.cmp-ai-decision-tree .adt-tree-scroll[data-view="standard"] .adt-std-line-value.kept {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

/* Empty state */
.cmp-ai-decision-tree .adt-tree-scroll[data-view="standard"] .adt-std-empty {
    opacity: .7;
    font-style: italic;
    padding: 10px 4px;
}

/* Round Structure */
.cmp-ai-decision-tree .adt-tree-scroll[data-view="standard"] .adt-std-round {
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 6px;
    margin: 0 0 10px;
    background: linear-gradient(180deg, #ffffff 0%, #f4f8fb 100%);
    box-shadow: 0 1px 2px rgba(0,0,0,.06);
    color: #000;
    border-color: #ccd6de;
}

.cmp-ai-decision-tree .adt-tree-scroll[data-view="standard"] .adt-std-round.collapsed .adt-std-round-body {
    display: none;
}

.cmp-ai-decision-tree .adt-tree-scroll[data-view="standard"] .adt-std-round-header {
    cursor: pointer;
    padding: 10px 16px;
    font-family: 'Bangers', cursive;
    font-weight: 400;
    background: linear-gradient(90deg, #e9f1f7, #dde7ef);
    border-bottom: 1px solid rgba(0,0,0,0.05);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    font-size: 16px;
}

.cmp-ai-decision-tree .adt-tree-scroll[data-view="standard"] .adt-std-round-header:hover {
    filter: brightness(0.97);
}

.cmp-ai-decision-tree .adt-tree-scroll[data-view="standard"] .adt-std-round-meta {
    font-weight: 400;
    font-size: 11px;
    opacity: .75;
}

/* Disclosure triangles */
.cmp-ai-decision-tree .adt-tree-scroll[data-view="standard"] .adt-std-round-header::before {
    content: '\25B6';
    display: inline-block;
    transform: rotate(90deg);
    margin-right: 6px;
    font-size: 10px;
    opacity: .7;
    transition: transform .18s ease;
}

.cmp-ai-decision-tree .adt-tree-scroll[data-view="standard"] .adt-std-round.collapsed > .adt-std-round-header::before {
    transform: rotate(0deg);
}

/* Turn Structure */
.cmp-ai-decision-tree .adt-tree-scroll[data-view="standard"] .adt-std-turn {
    border-top: 1px solid rgba(0,0,0,0.05);
}

.cmp-ai-decision-tree .adt-tree-scroll[data-view="standard"] .adt-std-turn-header {
    cursor: pointer;
    padding: 8px 18px;
    background: linear-gradient(90deg, #fbfdff, #f0f6fa);
    font-family: 'Bangers', cursive;
    font-weight: 400;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    gap: 10px;
    border-left: 4px solid #b7ccdc;
}

.cmp-ai-decision-tree .adt-tree-scroll[data-view="standard"] .adt-std-turn-header:hover {
    filter: brightness(0.96);
}

.cmp-ai-decision-tree .adt-tree-scroll[data-view="standard"] .adt-std-turn.collapsed .adt-std-turn-body {
    display: none;
}

.cmp-ai-decision-tree .adt-tree-scroll[data-view="standard"] .adt-std-turn-meta {
    font-size: 11px;
    opacity: .65;
    margin-left: 6px;
}

.cmp-ai-decision-tree .adt-tree-scroll[data-view="standard"] .adt-std-turn-body {
    padding: 8px 18px 14px;
    background: #ffffff;
    font-size: 14px;
    line-height: 1.45;
    color: #000;
    border-left: 4px solid #d2e1ec;
    font-family: Arial, var(--ui-font, system-ui, sans-serif);
    font-style: italic;
}

body.dark-mode .cmp-ai-decision-tree .adt-tree-scroll[data-view="standard"] .adt-std-turn-body {
    background: #1a1f24;
    color: #000000;
    border-left-color: #3d4651;
}

/* Target only text-containing elements, not emojis/SVGs */
body.dark-mode .cmp-ai-decision-tree .adt-tree-scroll[data-view="standard"] .adt-std-turn-body p,
body.dark-mode .cmp-ai-decision-tree .adt-tree-scroll[data-view="standard"] .adt-std-turn-body span:not(.adt-std-die),
body.dark-mode .cmp-ai-decision-tree .adt-tree-scroll[data-view="standard"] .adt-std-turn-body div:not(.adt-std-dice) {
    color: #000000;
}

/* Disclosure triangles for turns */
.cmp-ai-decision-tree .adt-tree-scroll[data-view="standard"] .adt-std-turn-header::before {
    content: '\25B6';
    display: inline-block;
    transform: rotate(90deg);
    margin-right: 6px;
    font-size: 10px;
    opacity: .7;
    transition: transform .18s ease;
}

.cmp-ai-decision-tree .adt-tree-scroll[data-view="standard"] .adt-std-turn.collapsed > .adt-std-turn-header::before {
    transform: rotate(0deg);
}

/* Turn Chain Narrative */
.cmp-ai-decision-tree .adt-tree-scroll[data-view="standard"] .adt-std-turn-chain {
    margin-top: 12px;
    font-size: 11px;
    line-height: 1.4;
    background: #eef2f6;
    border: 1px solid #d0d7de;
    padding: 8px 10px;
    border-radius: 6px;
}

.cmp-ai-decision-tree .adt-tree-scroll[data-view="standard"] .adt-std-turn-chain .mini-die {
    transform: scale(.75);
    margin: 0 1px;
}

/* Roll Cards */
.cmp-ai-decision-tree .adt-tree-scroll[data-view="standard"] .adt-std-roll {
    border: 1px solid rgba(0,0,0,0.07);
    background: linear-gradient(180deg, #ffffff 0%, #f6f9fc 100%);
    border-radius: 8px;
    padding: 10px 14px 12px;
    margin: 10px 0;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-left: 4px solid #c9dae8;
}

.cmp-ai-decision-tree .adt-tree-scroll[data-view="standard"] .adt-std-roll:hover {
    border-color: #6ea6ff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.08);
}

.cmp-ai-decision-tree .adt-tree-scroll[data-view="standard"] .adt-std-roll-header {
    display: flex;
    gap: 12px;
    align-items: center;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .6px;
    opacity: .95;
}

.cmp-ai-decision-tree .adt-tree-scroll[data-view="standard"] .adt-std-roll-number {
    font-weight: 600;
}

/* Dice Display */
.cmp-ai-decision-tree .adt-tree-scroll[data-view="standard"] .adt-std-dice-row {
    display: flex;
    align-items: center;
    margin-top: 4px;
    margin-bottom: 8px;
    gap: 8px;
}

.cmp-ai-decision-tree .adt-tree-scroll[data-view="standard"] .adt-std-dice {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

/* Metrics Row */
.cmp-ai-decision-tree .adt-tree-scroll[data-view="standard"] .adt-std-metrics-row {
    display: flex;
    gap: 14px;
    padding: 4px 18px 2px;
    font-size: 11px;
    opacity: .8;
}

/* Sections */
.cmp-ai-decision-tree .adt-tree-scroll[data-view="standard"] .adt-std-section {
    border: 1px solid #e3e7eb;
    background: #f7f9fb;
    padding: 8px 10px;
    border-radius: 6px;
    line-height: 1.4;
    color: #000;
}

body.dark-mode .cmp-ai-decision-tree .adt-tree-scroll[data-view="standard"] .adt-std-section {
    border-color: #2f3740;
    background: #23282f;
    color: #e5e9ef;
}

.cmp-ai-decision-tree .adt-tree-scroll[data-view="standard"] .adt-std-sec-h {
    font-family: 'Bangers', cursive;
    font-weight: 400;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .8px;
    margin-bottom: 6px;
    opacity: .85;
}

.cmp-ai-decision-tree .adt-tree-scroll[data-view="standard"] .adt-std-just-text {
    margin: 4px 0 0 0;
    font-style: italic;
    font-size: 13px;
}

.cmp-ai-decision-tree .adt-tree-scroll[data-view="standard"] .adt-std-line.just-label {
    margin-top: 4px;
}

/* Probability Chart */
.cmp-ai-decision-tree .adt-tree-scroll[data-view="standard"] .adt-std-prob-chart {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-width: 520px;
}

.cmp-ai-decision-tree .adt-tree-scroll[data-view="standard"] .adt-std-prob-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
}

.cmp-ai-decision-tree .adt-tree-scroll[data-view="standard"] .adt-std-prob-label {
    width: 90px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    opacity: .85;
    display: flex;
    align-items: center;
    gap: 4px;
}

.cmp-ai-decision-tree .adt-tree-scroll[data-view="standard"] .adt-std-prob-bar-wrap {
    flex: 1;
    height: 14px;
    border-radius: 5px;
    background: #e4e9f1;
    position: relative;
    overflow: hidden;
    max-width: 360px;
}

body.dark-mode .cmp-ai-decision-tree .adt-tree-scroll[data-view="standard"] .adt-std-prob-bar-wrap {
    background: #2a3137;
}

.cmp-ai-decision-tree .adt-tree-scroll[data-view="standard"] .adt-std-prob-bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: linear-gradient(90deg, #4f8df7, #1b62d1);
    box-shadow: 0 0 0 1px rgba(0,0,0,.15) inset;
}

.cmp-ai-decision-tree .adt-tree-scroll[data-view="standard"] .adt-std-prob-val {
    width: 36px;
    text-align: right;
    font-size: 10px;
    font-weight: 600;
    opacity: .85;
}

/* Focus States (Accessibility) */
.cmp-ai-decision-tree .adt-tree-scroll[data-view="standard"] .adt-std-round-header:focus-visible,
.cmp-ai-decision-tree .adt-tree-scroll[data-view="standard"] .adt-std-turn-header:focus-visible {
    outline: 3px solid #ffcc33;
    outline-offset: 2px;
}

/* Opening Intent (personality-based turn introduction) */
.cmp-ai-decision-tree .adt-tree-scroll[data-view="standard"] .adt-std-opening-intent {
    font-size: 12px;
    line-height: 1.35;
    background: linear-gradient(90deg, rgba(255,255,255,0.65), rgba(255,255,255,0));
    padding: 6px 10px;
    border-left: 3px solid #d4c14f;
    border-radius: 4px;
    font-style: italic;
    color: #333;
    margin: 0 8px 8px 8px;
}

.cmp-ai-decision-tree .adt-tree-scroll[data-view="standard"] .adt-std-opening-intent .adt-std-die {
    transform: scale(.9);
    margin-right: 2px;
    position: relative;
    top: 2px;
}

/* Turn Chain Narrative (roll sequence summary) */
.cmp-ai-decision-tree .adt-tree-scroll[data-view="standard"] .adt-std-turn-chain {
    background: #eef4f8;
    border: 1px solid #cfd8df;
    border-radius: 4px;
    padding: 8px 10px;
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.4;
    font-weight: 400;
}

body.dark-mode .cmp-ai-decision-tree .adt-tree-scroll[data-view="standard"] .adt-std-turn-chain {
    background: #242a30;
    border-color: #3d4651;
}

.cmp-ai-decision-tree .adt-tree-scroll[data-view="standard"] .adt-std-turn-chain .adt-std-die {
    margin-right: 6px;
}

/* ========================================
 * INTERACTIVE REASONING MODAL STYLES
 * ======================================== */

/* AI Reasoning link */
.adt-reasoning-link {
    font-size: 11px;
    color: #000000;
    cursor: pointer;
    text-decoration: underline;
    transition: color 0.2s ease;
    -webkit-user-select: none;
    user-select: none;
}

.adt-reasoning-link:hover {
    color: #ffd700;
}

/* Detailed reasoning modal content */
.detailed-reasoning-content {
    font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: #e0e0e0;
    line-height: 1.6;
    padding: 12px;
}

.reasoning-header {
    font-family: 'Bangers', cursive;
    font-size: 1.5em;
    color: #ffd700;
    margin-bottom: 16px;
    text-align: center;
    letter-spacing: 1px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.reasoning-situation,
.reasoning-logic,
.reasoning-summary {
    background: rgba(255, 255, 255, 0.05);
    border-left: 3px solid #ffd700;
    padding: 12px;
    margin-bottom: 12px;
    border-radius: 4px;
}

.reasoning-situation h3,
.reasoning-logic h3,
.reasoning-summary h3 {
    font-family: 'Bangers', cursive;
    color: #ffd700;
    font-size: 1.2em;
    margin-top: 0;
    margin-bottom: 8px;
    letter-spacing: 0.5px;
}

.reasoning-situation p,
.reasoning-logic p,
.reasoning-summary p {
    margin: 8px 0;
    font-size: 0.95em;
}

.reasoning-logic ul {
    margin: 8px 0;
    padding-left: 24px;
}

.reasoning-logic li {
    margin: 6px 0;
    font-size: 0.95em;
}

.reasoning-summary {
    border-left-color: #4caf50;
    background: rgba(76, 175, 80, 0.1);
}

.reasoning-summary h3 {
    color: #4caf50;
}

/* Dice display in reasoning modal */
.reasoning-dice-display {
    display: flex;
    gap: 6px;
    margin: 8px 0;
    flex-wrap: wrap;
}

.reasoning-dice-display .adt-std-die {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.2);
    font-weight: bold;
    font-size: 1.1em;
}

.reasoning-dice-display .adt-std-die.kept {
    border-color: #ffd700;
    background: rgba(255, 215, 0, 0.15);
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.3);
}

/* Claw icon inline styling for AI decision tree */
.dice-claw-icon-inline {
    width: 0.9em;
    height: 0.9em;
    display: inline-block;
    vertical-align: middle;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}