/**
 * gm-blocks.css
 * Semantic Content Block Styles
 *
 * Each block type produced by the server-side ContentBlockParser
 * (.gm-scene, .gm-narration, .gm-dialogue, .gm-skillcheck, .gm-savingthrow,
 * .gm-diceroll, .gm-rollprompt, .gm-combat, .gm-loot, .gm-transition,
 * .gm-choices, .gm-quest, .gm-npc) gets its own CSS class for independent
 * styling. `.gm-table` is also styled here but is emitted client-side by
 * message-formatter.js for markdown tables (| a | b |) rather than by the
 * content-block parser. Also includes contextual block labels and roll headers.
 *
 * Extracted from styles.css to keep the monolith trimmer and group all
 * semantic-block presentation in one place.
 *
 * Consumers: chat/semantic-renderer.js renders these classes.
 *
 * Cascade: rules live in @layer components. Layer order is declared in
 * css/base/variables.css. Unlayered rules elsewhere will still win — that
 * is the intended escape hatch during incremental @layer adoption.
 */

@layer components {

/* ========================================
   SEMANTIC CONTENT BLOCKS
   ======================================== */

/* Scene: atmospheric / scene-setting text */
.gm-scene {
  border-left: 3px solid var(--gold);
  padding: 10px 14px;
  margin: 10px 0;
  font-style: italic;
  color: rgba(255, 255, 255, 0.9);
  background: linear-gradient(90deg, color-mix(in srgb, var(--gold) 8%, transparent) 0%, transparent 60%);
  border-radius: 0 6px 6px 0;
}

/* Narration: standard prose — transparent glass (no fill, border only) */
.gm-narration {
  margin: 12px 0;
  padding: 10px 14px;
  background: transparent;
  border-left: 2px solid var(--glass-border);
  border-top: none;
  border-right: none;
  border-bottom: none;
  border-radius: 0 6px 6px 0;
  box-shadow: none;
}

/* Dialogue: NPC spoken text */
.gm-dialogue {
  margin: 8px 0;
  padding: 8px 14px;
  border-left: 3px solid color-mix(in srgb, var(--ability-check) 60%, transparent);
  background: linear-gradient(90deg, color-mix(in srgb, var(--ability-check) 7%, transparent) 0%, transparent 50%);
  border-radius: 0 6px 6px 0;
}

/* Disposition-coded dialogue frames.
   Colors mirror the D&D 5E attitude ladder (hostile → helpful).
   Unknown / not-yet-perceived defaults to the base blue above. */
.gm-dialogue[data-disposition="hostile"] {
  border-left-color: color-mix(in srgb, var(--damage) 85%, transparent);
  background: linear-gradient(90deg, color-mix(in srgb, var(--damage) 9%, transparent) 0%, transparent 50%);
}
.gm-dialogue[data-disposition="hostile"] .gm-block-label {
  color: color-mix(in srgb, var(--damage) 90%, transparent);
}

.gm-dialogue[data-disposition="unfriendly"] {
  border-left-color: color-mix(in srgb, var(--save-throw) 80%, transparent);
  background: linear-gradient(90deg, color-mix(in srgb, var(--save-throw) 8%, transparent) 0%, transparent 50%);
}
.gm-dialogue[data-disposition="unfriendly"] .gm-block-label {
  color: color-mix(in srgb, var(--save-throw) 90%, transparent);
}

.gm-dialogue[data-disposition="neutral"] {
  border-left-color: color-mix(in srgb, var(--text-secondary) 60%, transparent);
  background: linear-gradient(90deg, color-mix(in srgb, var(--text-secondary) 6%, transparent) 0%, transparent 50%);
}
.gm-dialogue[data-disposition="neutral"] .gm-block-label {
  color: color-mix(in srgb, var(--text-secondary) 80%, transparent);
}

.gm-dialogue[data-disposition="friendly"] {
  border-left-color: color-mix(in srgb, var(--healing) 75%, transparent);
  background: linear-gradient(90deg, color-mix(in srgb, var(--healing) 8%, transparent) 0%, transparent 50%);
}
.gm-dialogue[data-disposition="friendly"] .gm-block-label {
  color: color-mix(in srgb, var(--healing) 90%, transparent);
}

.gm-dialogue[data-disposition="helpful"] {
  border-left-color: color-mix(in srgb, var(--dialogue) 80%, transparent);
  background: linear-gradient(90deg, color-mix(in srgb, var(--dialogue) 10%, transparent) 0%, transparent 50%);
}
.gm-dialogue[data-disposition="helpful"] .gm-block-label {
  color: color-mix(in srgb, var(--dialogue) 90%, transparent);
}


/* Skill check prompt: "Make a Perception check DC 15" */
.gm-skillcheck {
  margin: 8px 0;
  padding: 10px 14px;
  background: color-mix(in srgb, var(--ability-check) 10%, transparent);
  border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--ability-check) 25%, transparent);
  box-shadow: 0 0 8px color-mix(in srgb, var(--ability-check) 5%, transparent);
}

/* Saving throw prompt: "Make a Dexterity saving throw DC 13" */
.gm-savingthrow {
  margin: 8px 0;
  padding: 10px 14px;
  background: color-mix(in srgb, var(--critical-failure) 10%, transparent);
  border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--critical-failure) 30%, transparent);
  box-shadow: 0 0 8px color-mix(in srgb, var(--critical-failure) 5%, transparent);
}

/* Dice roll result or general mechanic */
.gm-diceroll {
  margin: 8px 0;
  padding: 10px 14px;
  background: color-mix(in srgb, var(--gold) 8%, transparent);
  border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--gold) 20%, transparent);
  box-shadow: 0 0 8px color-mix(in srgb, var(--gold) 5%, transparent);
}

/* Contextual block label — sits above block content.
   Always upright, even when the parent block (gm-scene, gm-quest,
   gm-transition) sets font-style: italic on its body text. */
.gm-block-label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.68em;
  font-weight: 700;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  opacity: 0.65;
  margin-bottom: 5px;
  user-select: none;
  pointer-events: none;
}

.gm-block-label__icon {
  font-style: normal;
  line-height: 1;
  opacity: 0.9;
}

/* Block-type tints for labels */
.gm-combat .gm-block-label      { color: color-mix(in srgb, var(--damage) 95%, transparent); }
.gm-loot .gm-block-label        { color: var(--gold, #d4a017); }
.gm-quest .gm-block-label       { color: color-mix(in srgb, var(--save-throw) 95%, transparent); }
.gm-skillcheck .gm-block-label  { color: color-mix(in srgb, var(--ability-check) 95%, transparent); }
.gm-savingthrow .gm-block-label { color: color-mix(in srgb, var(--critical-failure) 95%, transparent); }
.gm-rollprompt .gm-block-label  { color: color-mix(in srgb, var(--spell-cast) 95%, transparent); }
.gm-dialogue .gm-block-label    { color: color-mix(in srgb, var(--ability-check) 90%, transparent); }
.gm-npc .gm-block-label         { color: color-mix(in srgb, var(--spell-cast) 90%, transparent); }
.gm-scene .gm-block-label       { color: var(--gold, #d4a017); }
.gm-narration .gm-block-label   { color: color-mix(in srgb, var(--text-primary) 40%, transparent); }
.gm-transition .gm-block-label  { color: color-mix(in srgb, var(--text-primary) 40%, transparent); }

/* Roll header: "Perception check › 17 › Success" */
.roll-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8em;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 6px;
  opacity: 0.9;
}
.roll-icon { font-style: normal; line-height: 1; flex-shrink: 0; }
.roll-name { color: var(--text-muted, #ccc); }
.roll-separator { color: var(--gold, #d4a017); opacity: 0.6; }
.roll-total { color: var(--gold, #d4a017); font-size: 1.05em; }
.roll-success { color: var(--critical-success); }
.roll-failure { color: var(--critical-failure); }
.roll-damage { color: var(--gold, #d4a017); font-style: italic; }

/* Player roll request — shown on the right (decision) page */
.gm-rollprompt {
  margin: 8px 0;
  padding: 10px 14px;
  background: color-mix(in srgb, var(--spell-cast) 9%, transparent);
  border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--spell-cast) 28%, transparent);
  box-shadow: 0 0 8px color-mix(in srgb, var(--spell-cast) 6%, transparent);
}

/* Wrapper that holds the prose box, roll chip, and dismiss button stacked vertically */
.roll-prompt-wrapper {
  margin: 8px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.roll-prompt-wrapper > .gm-rollprompt {
  margin: 0;
}

/* Prominent roll chip shown outside the prose box */
@keyframes roll-btn-shimmer {
  0%   { box-shadow: 0 0 8px 2px rgba(150, 100, 255, 0.60),
                     0 0 18px 4px rgba(150, 100, 255, 0.28); }
  50%  { box-shadow: 0 0 18px 5px rgba(150, 100, 255, 1.00),
                     0 0 38px 10px rgba(150, 100, 255, 0.50); }
  100% { box-shadow: 0 0 8px 2px rgba(150, 100, 255, 0.60),
                     0 0 18px 4px rgba(150, 100, 255, 0.28); }
}

.roll-chip--prompt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  background: color-mix(in srgb, var(--spell-cast) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--spell-cast) 55%, transparent);
  border-radius: 6px;
  color: var(--spell-name);
  font-size: 0.9em;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
  width: 100%;
  text-align: left;
  animation: roll-btn-shimmer 2s ease-in-out infinite;
}

.roll-chip--prompt:hover {
  background: color-mix(in srgb, var(--spell-cast) 28%, transparent);
  border-color: color-mix(in srgb, var(--spell-cast) 80%, transparent);
  animation-duration: 1s;
}

.roll-chip--prompt .roll-chip__icon {
  font-size: 1.1em;
  flex-shrink: 0;
}

/* "Continue without rolling" dismiss button */
.roll-prompt-dismiss {
  display: block;
  width: 100%;
  padding: 6px 14px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.45);
  font-size: 0.82em;
  cursor: pointer;
  text-align: center;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.roll-prompt-dismiss:hover {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.7);
  border-color: rgba(255, 255, 255, 0.3);
}

/* Combat: attacks, damage, initiative */
.gm-combat {
  margin: 8px 0;
  padding: 10px 14px;
  background: color-mix(in srgb, var(--damage) 10%, transparent);
  border-left: 3px solid color-mix(in srgb, var(--damage) 60%, transparent);
  border-radius: 0 6px 6px 0;
  box-shadow: 0 0 8px color-mix(in srgb, var(--damage) 5%, transparent);
}

/* Loot: treasure, items, rewards */
.gm-loot {
  margin: 8px 0;
  padding: 10px 14px;
  background: color-mix(in srgb, var(--gold) 10%, transparent);
  border-left: 3px solid var(--gold);
  border-radius: 0 6px 6px 0;
  box-shadow: 0 0 8px color-mix(in srgb, var(--gold) 5%, transparent);
}

/* Transition: scene change, time passing, travel */
.gm-transition {
  margin: 12px 0;
  padding: 8px 14px;
  font-style: italic;
  color: rgba(255, 255, 255, 0.6);
  border-left: 2px solid rgba(255, 255, 255, 0.2);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.03) 0%, transparent 40%);
  border-radius: 0 6px 6px 0;
}

/* Choices: player decision options */
.gm-choices {
  margin: 6px 0;
  padding: 8px 16px;
  background: color-mix(in srgb, var(--critical-success) 6%, transparent);
  border: 1px dashed color-mix(in srgb, var(--critical-success) 20%, transparent);
  border-radius: 6px;
}

/* Divider: section break */
hr.gm-divider {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  margin: 16px 0;
}

/* Quest: assignment, objective update, or completion */
.gm-quest {
  margin: 12px 0;
  padding: 10px 16px;
  background: color-mix(in srgb, var(--save-throw) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--save-throw) 30%, transparent);
  border-left: 3px solid color-mix(in srgb, var(--save-throw) 70%, transparent);
  border-radius: 4px;
  font-style: italic;
  color: var(--experience);
}

/* NPC: character introduction or physical description */
.gm-npc {
  margin: 10px 0;
  padding: 10px 14px;
  border-left: 3px solid color-mix(in srgb, var(--spell-cast) 60%, transparent);
  background: color-mix(in srgb, var(--spell-cast) 6%, transparent);
  border-radius: 0 4px 4px 0;
}


/* Stat block / ability score tables in chat messages */
.gm-table {
  border-collapse: collapse;
  width: auto;
  max-width: 100%;
  margin: 10px 0;
  font-size: 0.88em;
  background: color-mix(in srgb, var(--bg-primary) 55%, transparent);
  border: 1px solid color-mix(in srgb, var(--gold) 18%, transparent);
  border-radius: 6px;
  overflow: hidden;
}

.gm-table th {
  background: color-mix(in srgb, var(--gold) 12%, transparent);
  color: var(--gold, #d4a017);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.82em;
  padding: 5px 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--gold) 25%, transparent);
  text-align: center;
  white-space: nowrap;
}

.gm-table td {
  padding: 4px 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--text-primary) 6%, transparent);
  text-align: center;
  color: color-mix(in srgb, var(--text-primary) 88%, transparent);
}

.gm-table tr:last-child td {
  border-bottom: none;
}

.gm-table tbody tr:hover td {
  background: color-mix(in srgb, var(--gold) 5%, transparent);
}

/* First column left-aligned by default (ability name, item name, etc.)
   Overridden per-cell when the separator row specifies :---: or ---: alignment
   via inline style — inline styles always win over class selectors */
.gm-table td:first-child,
.gm-table th:first-child {
  text-align: left;
}

/* Consecutive tables (e.g. creature stat block = two tables) share a border */
.gm-table + .gm-table {
  margin-top: -1px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.gm-table:has(+ .gm-table) {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-color: color-mix(in srgb, var(--gold) 8%, transparent);
}

} /* end @layer components */