@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Merriweather:ital,wght@0,400;0,700;1,400&display=swap');

/* =========================================
   Design System: "Grimoire Sombre" (Bleu Nuit)
   ========================================= */
:root {
  /* Polices */
  --font-main: 'Merriweather', serif;
  --font-display: 'Cinzel', serif;

  /* Couleurs (Palette bleu nuit et argent/or pâle) */
  --color-text: #EAE0D5;
  --color-text-muted: #9AA7B7; /* Bleu gris pour texte secondaire */
  --color-bg-dark: #1A202C; /* Bleu nuit profond */
  --color-bg-med: #2A3342; /* Bleu plus clair pour les surfaces */
  --color-bg-light: #3F4C60; /* Encore plus clair pour les éléments */
  --color-border: #526075; /* Bordure bleu gris */

  --color-primary: #A7C5E8; /* Argent / Bleu clair lumineux */
  --color-primary-hover: #C2DCEF;
  --color-primary-text: #1A202C; /* Texte sombre sur primaire */

  --color-danger: #A42A28; /* Rouge thématique conservé */
  --color-danger-hover: #C64F4C;
  --color-danger-text: #EAE0D5;

  --bg-overlay: rgba(26, 32, 44, 0.7); /* Superposition plus sombre pour le bleu nuit */

  /* Dimensions */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --spacing-1: 0.25rem; /* 4px */
  --spacing-2: 0.5rem;  /* 8px */
  --spacing-3: 1rem;    /* 16px */
  --spacing-4: 1.5rem;  /* 24px */
  --spacing-5: 2rem;    /* 32px */
}

/* Fallback pour les anciennes variables (à supprimer à terme) */
:root{
  --fg: var(--color-text);
  --font: var(--font-main);
  --card: var(--color-bg-med);
  --border: var(--color-border);
  --surface: var(--color-bg-light);
  --primary: var(--color-primary);
  --danger: var(--color-danger);
  --muted: var(--color-text-muted);
}


/* Reset court */
*{ box-sizing:border-box; }
html, body{ height:100%; }
body{
  margin:0;
  color: var(--color-text);
  font-family: var(--font-main);
  background-color: var(--color-bg-dark); /* fallback si image non chargée */
  /* image par défaut (mobile first) */
  background-image:
    linear-gradient(var(--bg-overlay), var(--bg-overlay)),
    url("./assets/img/bg-mobile.jpg");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Le main reste vide pour l’instant, mais centré si on y met quelque chose */
#app{
  flex-grow: 1;
  padding:1rem; /* Adjust padding for better responsiveness */
  overflow-y: auto; /* Allow scrolling within the main content area */
}

/* Breakpoints : change l’image selon la largeur */
@media (min-width: 600px){
  body{
    background-image:
      linear-gradient(var(--bg-overlay), var(--bg-overlay)),
      url("./assets/img/bg-tablet.jpg");
  }
}
@media (min-width: 1024px){
  body{
    background-image:
      linear-gradient(var(--bg-overlay), var(--bg-overlay)),
      url("./assets/img/bg-desktop.jpg");
  }
}
@media (min-width: 1600px){
  body{
    background-image:
      linear-gradient(var(--bg-overlay), var(--bg-overlay)),
      url("./assets/img/bg-ultrawide.jpg");
  }
}

/* Optionnel : légère animation d’apparition */
@media (prefers-reduced-motion: no-preference){
  body{ animation: fadeIn 400ms ease-out both; }
  @keyframes fadeIn{
    from{ opacity:0; }
    to{ opacity:1; }
  }
}

/* ===== TOPBAR ===== */
.topbar{
  position: sticky; top: 0; z-index: 1000;
  display: grid; grid-template-columns: 1fr auto auto;
  align-items: center; gap: var(--spacing-3);
  padding: var(--spacing-2) var(--spacing-3);
  background: color-mix(in srgb, var(--color-bg-med) 85%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-border);
}
.topbar__brand{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: .8px;
  color: var(--color-primary);
}
.topbar__nav{ display: flex; gap: var(--spacing-3); }
.topbar__user{ display: flex; gap: var(--spacing-2); align-items: center; }

@media (max-width: 599px) {
  .topbar {
    grid-template-columns: 1fr; /* Stack elements vertically */
    gap: var(--spacing-2); /* Reduce gap */
    padding: var(--spacing-2); /* Reduce padding */
  }
  .topbar__nav {
    flex-wrap: wrap; /* Allow buttons to wrap */
    justify-content: center; /* Center the buttons */
  }
}

/* =========================================================
   UI — composants génériques (dark-friendly)
   Utilise var(--token, fallback) pour rester compatible
   avec tes tokens existants.
   ========================================================= */

/* Layout helpers */
.container { width: 100%; margin: 0 auto; padding: 8px 16px; }
.stack { display: grid; }
.row {
    display: flex;
    justify-content: space-around;
}
.grid { display: grid; }
.gap-8 { gap: 8px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.align-center { align-items: center; }
.justify-between { justify-content: space-between; }
.m-0 { margin: 0; }
.w-100 { width: 100%; }

/* Typo */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--color-text);
  letter-spacing: .5px;
  margin: 0 0 var(--spacing-3) 0;
}

h1, .h1 { font-size: 2.5rem; }
h2, .h2 { font-size: 2rem; }
h3, .h3 { font-size: 1.75rem; }
h4, .h4 { font-size: 1.5rem; }

p, li, span {
  line-height: 1.6;
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color .2s ease;
}
a:hover {
  color: var(--color-primary-hover);
  text-decoration: underline;
}

/* Card (surface) */
.card {
  background: var(--color-bg-med);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 12px rgba(0,0,0,0.4), inset 0 1px 0px rgba(255,255,255,0.03);
  overflow: hidden;
}

/* Inputs */
.input, .select, .textarea {
  width: 100%; /* Ensure inputs take full width of their container */
  background: var(--color-bg-dark);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--spacing-2) var(--spacing-3);
  font-family: var(--font-main);
  font-size: 1rem;
  line-height: 1.4;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.4);
}
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--color-primary);
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.4), 0 0 0 3px color-mix(in srgb, var(--color-primary) 25%, transparent);
}
.textarea {
  min-height: 120px;
  resize: vertical;
}

/* Buttons */
.btn {
  appearance: none;
  border: 1px solid var(--color-border);
  color: var(--color-text);
  background: var(--color-bg-light);
  padding: var(--spacing-2) var(--spacing-3);
  border-radius: var(--radius-md);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: .5px;
  text-transform: uppercase;
  line-height: 1.2;
  cursor: pointer;
  transition: transform .1s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.05);
}
.btn:hover {
  transform: translateY(-2px);
  background-color: var(--color-bg-med);
  border-color: var(--color-primary);
  box-shadow: 0 3px 5px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.05);
}
.btn:active {
  transform: translateY(0);
  background-color: var(--color-bg-dark);
  transition-duration: 0s;
}
.btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.btn--primary {
  background: var(--color-primary);
  color: var(--color-primary-text);
  border-color: var(--color-primary);
}
.btn--primary:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}

.btn--danger {
  background: var(--color-danger);
  color: var(--color-danger-text);
  border-color: var(--color-danger);
}
.btn--danger:hover {
  background: var(--color-danger-hover);
  border-color: var(--color-danger-hover);
}

/* Badge */
.badge{
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-1) var(--spacing-2);
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  background: var(--color-bg-light);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
}

/* Tables */
.table {
  width: 100%;
  border-collapse: collapse;
}
.table thead th {
  text-align: left;
  padding: var(--spacing-3);
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--color-text-muted);
  background: var(--color-bg-dark);
  border-bottom: 2px solid var(--color-border);
}
.table tbody td {
  padding: var(--spacing-3);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
}
.table--list tbody tr {
  transition: background-color .2s ease;
}
.table--list tbody tr:hover {
  background: color-mix(in srgb, var(--color-primary) 8%, var(--color-bg-med));
}

.table--condensed tbody td {
  padding: var(--spacing-2) var(--spacing-3);
}
.table--condensed .input--sm {
  padding: 4px 8px; /* Further reduce padding for very small inputs */
  font-size: 0.9rem;
}


/* Utilities for forms in modals/fragments */
.form-grid {
  display: grid;
  gap: var(--spacing-4);
}
.form-grid label {
  display: grid;
  gap: var(--spacing-2);
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.9rem;
  letter-spacing: .5px;
  color: var(--color-text-muted);
}
.help {
  font-family: var(--font-main);
  font-style: italic;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  text-transform: none;
  letter-spacing: normal;
}
.error {
  color: var(--color-danger);
  font-weight: 700;
  display: none; /* Keep hidden by default */
}

#page {
    background: color-mix(in srgb, var(--color-bg-med) 90%, transparent);
    backdrop-filter: blur(10px);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: 0 5px 20px rgba(0,0,0,0.5);
    /*max-width: 1200px;*/
    width: 80vw;
    margin: 0 auto;
    padding: var(--spacing-5);
}

/* ===========================
   Icon picker (propre & DRY)
   =========================== */

/* grille des icônes */
.icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
  gap: var(--spacing-2);
  max-height: 250px;
  overflow: auto;
  padding: var(--spacing-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-dark); /* Darker background for contrast */
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.4);
}

/* cellule (bouton) */
.icon-cell {
  /* reset bouton natif */
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  border: 1px solid transparent;
  outline: none;
  margin: 0;
  padding: 6px;
  font: inherit;
  color: inherit;

  /* layout */
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  cursor: pointer;

  /* anims discrètes */
  transition:
    transform .06s ease,
    background .2s ease,
    border-color .2s ease;
}

/* état hover / selected / disabled */
.icon-cell:hover {
  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
}

.icon-cell[aria-selected="true"] {
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 18%, transparent);
}

.icon-cell:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.icon-cell[disabled] {
  opacity: .5;
  cursor: not-allowed;
}

/* icône */
.icon-cell img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  /* léger relief sans toucher au fond de l'image */
  filter: drop-shadow(0 0 1px rgba(0,0,0,.3));
}

/* accessibilité : réduit les animations si demandé */
@media (prefers-reduced-motion: reduce) {
  .icon-cell {
    transition: none;
  }
}

/* Backdrop plein écran cliquable */
.hansi-modal__backdrop{
  position: absolute;
  inset: 0;
}

/* Contenu du modal */
.hansi-modal__content {
    position: absolute;
    top: 8vh;
    /* max-width: min(92vw, 960px); */
    width: 80vw;
    overflow: auto;
    background: var(--color-bg-med);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
    padding: var(--spacing-5);
    display: flex;
    flex-direction: column;
    /* height: 90vh; */
    /* max-height: calc(100vh - (var(--spacing-5) * 2)); */
    min-height: 300px;
}

/* New: for modal body scrolling */
#module-modal-body {
  flex-grow: 1; /* Take remaining space */
  overflow-y: auto; /* Allow scrolling for content if it overflows */
  padding-top: var(--spacing-3); /* Add some spacing above content */
}
/* Exemple de conteneur modal plein écran centré (si besoin) */
.hansi-modal {
    position: fixed; /* Use fixed to cover the entire viewport */
    inset: 0;
    display: grid;
    place-items: center; /* Center the modal content */
    z-index: 1000;
    background-color: rgba(0, 0, 0, 0.7); /* Add a backdrop for the modal */
        overflow: auto;
}

.login-modal {
    padding: 24px;
    /* max-width: min(92vw, 1100px); */
    margin: auto;
    /* margin-bottom: 1vh; */
    /* margin-top: 1vh; */
}

/* Page specific styles */
.page-grid {
  display: grid;
  gap: var(--spacing-4);
}

.table-actions-col {
  width: 96px; /* consistent with biblio table */
}

/* Styles pour la checklist de personnages dans les modales de session */
.char-checklist {
  display: grid;
  gap: var(--spacing-2);
}

.char-row {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-1);
  border-radius: var(--radius-md);
  transition: background-color .2s ease;
  cursor: pointer;
}
.char-row:hover {
  background-color: var(--color-bg-light);
}

.char-row input[type="checkbox"] {
  width: 20px; /* Standardize checkbox size */
  height: 20px;
}

.char-row img {
  object-fit: cover;
  border-radius: var(--radius-md);
}

/* Module Checklist */
.module-checklist, .char-checklist-container {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
  max-height: 200px; /* Limit height and enable scroll */
  overflow-y: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--spacing-2);
  background-color: var(--color-bg-dark);
}

.module-checklist label, .char-checklist-container label {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  cursor: pointer;
  padding: var(--spacing-1);
  border-radius: var(--radius-sm);
  transition: background-color .2s ease;
}

.module-checklist label:hover, .char-checklist-container label:hover {
  background-color: var(--color-bg-light);
}

.module-checklist input[type="checkbox"], .char-checklist-container input[type="checkbox"] {
  accent-color: var(--color-primary); /* Style checkbox with primary color */
}

/* Toast Notifications */
#toast-host {
  position: fixed;
  bottom: var(--spacing-4);
  right: var(--spacing-4);
  display: flex;
  flex-direction: column-reverse; /* Newest toast on top */
  gap: var(--spacing-2);
  z-index: 2000; /* Above modals */
  pointer-events: none; /* Allow clicks to pass through */
}

.toast {
  background-color: var(--color-bg-med);
  color: var(--color-text);
  padding: var(--spacing-3);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
  pointer-events: auto; /* Re-enable pointer events for the toast itself */
  max-width: 300px;
  border: 1px solid var(--color-border);
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
}

.toast--info {
  border-left: 4px solid var(--color-primary);
}
.toast--success {
  border-left: 4px solid #4CAF50; /* Green */
}
.toast--error {
  border-left: 4px solid var(--color-danger);
}

/* ============================
   Session / Chat Layout
   ============================ */

.session-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  grid-template-rows: 1fr;
  /*height: calc(100vh - 50px);*/ /* Full height minus topbar */
  gap: 0;
}

.session-sidebar {
  background-color: var(--color-bg-panel);
  padding: 16px;
  border-right: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.sidebar-section {
  border-top: 1px solid var(--color-border);
  padding-top: 16px;
}
.sidebar-section h3 {
  margin-top: 0;
  margin-bottom: 12px;
  font-size: 1rem;
}

.participants-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.participant {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px;
  border-radius: 4px;
  font-size: 14px;
}
.participant img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}
.participant i {
  margin-left: auto;
  color: var(--color-text-muted);
}
.participant[data-status="gm"] i { color: var(--color-accent-secondary); }
.participant[data-status="active"] i { color: var(--color-accent-primary); }


.session-main {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.session-main-view {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.chat-messages {
  flex-grow: 1;
  padding: var(--spacing-2);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
  min-height: 0; /* Prevents flexbox overflow issue */
}

.chat-message {
  display: flex;
  gap: var(--spacing-3);
  padding: var(--spacing-3);
  border-radius: var(--radius-md);
  background-color: var(--color-bg-dark);
  width: 100%; /* Make messages full width */
  align-items: flex-start;
}

.chat-message:nth-child(even) {
  background-color: #1f232c;
}

/* Style for the new scroll-to-bottom button */
#scroll-to-bottom-btn {
  position: absolute;
  bottom: calc(var(--spacing-3) + 70px); /* Position above the chat input form */
  right: var(--spacing-4);
  z-index: 100;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  padding: 0;
  display: none; /* Hidden by default */
  place-items: center;
  font-size: 1.5rem;
}

.chat-message__portrait {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--color-border);
}

.chat-message__main {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}

.chat-message__sender {
  font-weight: 700;
  font-family: var(--font-display);
  color: var(--color-primary);
  font-size: 1.1rem;
}

.chat-message__content {
  line-height: 1.5;
  color: var(--color-text);
}
.chat-message__content p {
  margin: 0;
}
.chat-message__content p:not(:last-child) {
  margin-bottom: var(--spacing-2);
}

.chat-card {
  background-color: var(--color-bg-med);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--spacing-2) var(--spacing-3);
  display: grid;
  gap: var(--spacing-1);
}

.chat-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-2);
}

.chat-card__title {
  font-family: var(--font-display);
  font-weight: 700;
}

.chat-card__badge {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-primary);
  border: 1px solid var(--color-border);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
}

.chat-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-1);
}

.chat-card__tag {
  font-size: 0.75rem;
  background-color: var(--color-bg-dark);
  border: 1px solid var(--color-border);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}

.chat-card__summary {
  color: var(--color-text-muted);
  font-style: italic;
}

.chat-card__description {
  white-space: pre-wrap;
}


.chat-message[data-sender="system"] {
  display: block; /* Override flex for system messages */
  align-self: center;
  background-color: transparent;
  color: var(--color-text-muted);
  font-style: italic;
  font-size: 0.9rem;
  max-width: 100%;
  text-align: center;
}

.chat-form {
  display: flex;
  gap: 8px;
  padding: 16px;
  border-top: 1px solid var(--color-border);
  background-color: var(--color-bg-default);
}
.chat-form textarea {
  flex-grow: 1;
  resize: none;
  min-height: 40px;
}


/* ============================
   Session Content Layout
   ============================ */
.session-content {
  position: relative; /* Establish stacking context for absolute children */
  flex-grow: 1; /* Allow it to take available space in parent grid */
  height: 100%;
  border-left: 1px solid var(--color-border); /* Separates sidebar from content */
  /* No display:flex here, children are absolutely positioned */
}


/* ============================
   Participant Images (MJ Icon)
   ============================ */
.participant img {
  /* Existing styles */
}
.participant.is-gm img {
  content: url('/assets/img/crown.svg'); /* Placeholder, user can replace */
  width: 32px; /* Ensure icon size matches */
  height: 32px;
  background-color: transparent; /* Remove background if it's an icon */
  border-radius: 0; /* No border-radius for icon */
  object-fit: contain; /* Ensure icon fits */
}


/* ============================
   Dice Roller Module
   ============================ */
.module-content {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--color-border);
}
.module-content:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}
.dice-buttons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
  gap: 8px;
}
.dice-buttons .btn {
  width: 100%;
}

/* Styling for the new #session-toolbar inside the sidebar */
#session-toolbar {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2); /* Use design system spacing */
  padding: var(--spacing-2) 0; /* Consistent padding with other sidebar sections */
  align-items: stretch; /* Make buttons fill available width */
}

#session-toolbar .btn {
  width: 100%;
  text-align: left; /* Align text to left */
  display: flex; /* Allow emoji and text to be side-by-side */
  align-items: center;
  gap: var(--spacing-2); /* Space between emoji and text */
  padding: var(--spacing-2) var(--spacing-3); /* Adjust padding for button content */
  justify-content: flex-start;
  font-size: 1rem; /* Slightly larger text for buttons */
}

/* Styling for the new module modal header */
.module-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-3);
  padding-bottom: var(--spacing-2);
  border-bottom: 1px solid var(--color-border);
}

.module-modal-header .module-modal-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0;
  color: var(--color-text);
}

.btn--close-module-modal {
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-size: 1.8rem;
  cursor: pointer;
  padding: 0 var(--spacing-1);
  transition: color 0.2s ease;
}
.btn--close-module-modal:hover {
  color: var(--color-danger);
}

#whiteboard-canvas {
  display: block; /* The canvas should be a block element */
  border: 1px solid var(--color-border);
  cursor: crosshair;
}

/* Whiteboard specific styles for layout */
#module-whiteboard {
  display: flex;
  flex-direction: column;
  flex-grow: 1; /* Make the module fill the available space in the modal body */
  height: 100%;
  overflow: hidden; /* Prevent content from spilling outside its defined flex boundaries */
}

.whiteboard-controls {
  flex-shrink: 0; /* Prevent the toolbar from shrinking */
  background-color: var(--color-bg-med);
  padding: var(--spacing-2);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  flex-wrap: wrap;
  z-index: 10; /* Ensure it's above the canvas content */
}

.whiteboard-canvas-scroll-area {
  flex-grow: 1; /* Allow the canvas container to take the remaining space */
  overflow: auto; /* This container is the one that should scroll */
  -webkit-overflow-scrolling: touch; /* Momentum scrolling on touch devices */
}

/* =========================================
   Whiteboard Canvas Resizing
   ========================================= */

#whiteboard-canvas-container {
  position: relative; /* Needed for absolute positioning of the handle */
  width: 100%; /* Default width */
  overflow: hidden; /* Hide overflow content */
  resize: both; /* Fallback resizing */
  flex-grow: 1; /* Allow the container to grow and fill space */
}

#whiteboard-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.canvas-resize-handle {
  position: absolute;
  width: 20px;
  height: 20px;
  bottom: 0;
  right: 0;
  cursor: nwse-resize;
  background-color: var(--color-border);
  border-top-left-radius: var(--radius-md);
  opacity: 0.5;
  transition: opacity 0.2s ease;
}

.canvas-resize-handle:hover {
  opacity: 1;
}

/* =========================================
   Whiteboard Library Preview
   ========================================= */

#whiteboard-list .list-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  padding: var(--spacing-2);
  border-bottom: 1px solid var(--color-border);
}

#whiteboard-list .list-item:last-child {
  border-bottom: none;
}

.whiteboard-preview {
  width: 120px;
  height: 80px;
  object-fit: cover;
  border: 1px solid var(--color-border);
  background-color: var(--color-bg-dark);
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.whiteboard-preview-placeholder {
  width: 120px;
  height: 80px;
  border: 1px dashed var(--color-border);
  background-color: var(--color-bg-dark);
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.item-details {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
  flex-grow: 1;
}

.item-details .muted {
  font-size: 0.8rem;
}

#whiteboard-list .actions {
  display: flex;
  gap: var(--spacing-2);
  margin-left: auto;
}

/* =========================================
   Character Sheet Module
   ========================================= */

.character-sheet-module {
  display: flex;
  height: 100%;
  gap: var(--spacing-4);
}

.character-sheet-sidebar {
  width: 200px;
  flex-shrink: 0;
  border-right: 1px solid var(--color-border);
  padding-right: var(--spacing-4);
  overflow-y: auto;
}

.character-sheet-sidebar h4 {
  margin-top: 0;
}

.char-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}

.char-list li {
  padding: var(--spacing-2);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color .2s ease;
}

.char-list li:hover {
  background-color: var(--color-bg-light);
}

.char-list li.active {
  background-color: var(--color-primary);
  color: var(--color-primary-text);
  font-weight: 700;
}

.character-sheet-content {
  flex-grow: 1;
  overflow-y: auto;
}

  .sheet-section {
    margin-bottom: var(--spacing-4);
  }

  .item-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: var(--spacing-2);
  }

  .item-list__item {
    background-color: var(--color-bg-dark);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--spacing-2) var(--spacing-3);
    display: grid;
    gap: var(--spacing-1);
  }

  .item-list__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-2);
  }

  .item-list__title {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--spacing-2);
  }

  .item-list__meta {
    font-size: 0.85rem;
  }

  .item-list__summary {
    font-size: 0.9rem;
  }

.attributes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--spacing-3);
}

.attributes-grid p {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
}

.btn--xs {
  padding: var(--spacing-1) var(--spacing-2);
  font-size: 0.75rem;
}

.sheet-item-share {
  border-left: 3px solid var(--color-primary);
  padding: var(--spacing-2) var(--spacing-3);
  background-color: var(--color-bg-light);
  border-radius: var(--radius-sm);
  margin: var(--spacing-2) 0;
}
.sheet-item-share h4 {
  font-size: 1rem;
  margin: 0 0 var(--spacing-1) 0;
}
.sheet-item-share p {
  margin: 0;
  font-style: italic;
  color: var(--color-text-muted);
}

/* =========================================
   SWADE Dice Roll Output
   ========================================= */
.swade-roll-output {
  background-color: var(--color-bg-med);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-md);
  padding: var(--spacing-3);
  margin: var(--spacing-1) 0;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  font-size: 0.95rem;
}
.swade-roll-output .roll-header {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--spacing-2);
}
.swade-roll-output .trait-name {
  color: var(--color-primary);
  font-weight: 700;
}
.swade-roll-output .roll-body {
  display: grid;
  gap: var(--spacing-1);
  padding: var(--spacing-2) 0;
  color: var(--color-text-muted);
}
.swade-roll-output .roll-body.is-crit-fail {
  text-align: center;
}
.swade-roll-output .roll-detail {
  font-family: monospace;
  background-color: var(--color-bg-dark);
  padding: 2px 4px;
  border-radius: var(--radius-sm);
}
.swade-roll-output .roll-total {
  font-weight: 700;
}
.swade-roll-output .roll-total.is-best {
  color: var(--color-primary);
  text-shadow: 0 0 5px var(--color-primary);
}
.swade-roll-output .crit-fail-text {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-danger);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.swade-roll-output .roll-footer {
  border-top: 1px solid var(--color-border);
  padding-top: var(--spacing-2);
  margin-top: var(--spacing-2);
  text-align: right;
  font-family: var(--font-display);
  font-weight: 600;
}
.swade-roll-output .final-result.is-failure strong {
  color: var(--color-text-muted);
}
.swade-roll-output .final-result.is-success strong {
  color: #85d8a1; /* Light Green */
  text-shadow: 0 0 6px color-mix(in srgb, #85d8a1 50%, transparent);
}
.swade-roll-output .raises-display {
    font-size: 0.9em;
    color: #ffc107;
    margin-left: 8px;
    font-weight: 700;
    text-shadow: 0 0 4px #ffc107;
}

/* Individual Die Colors */
.swade-roll-output .roll-base {
  font-weight: normal;
  color: var(--color-text-muted);
}
.swade-roll-output .roll-one {
  color: var(--color-danger);
  font-weight: 700;
  text-decoration: line-through;
}
.swade-roll-output .roll-ace {
  color: #ffc107; /* Bright Gold/Yellow */
  font-weight: 700;
  text-shadow: 0 0 4px #ffc107;
}
.swade-roll-output .roll-ace::before {
  content: '💥';
  margin-right: 2px;
  display: inline-block;
  animation: shake-sm 0.3s ease-in-out;
}

@keyframes shake-sm {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-2px) rotate(-3deg); }
  75% { transform: translateX(2px) rotate(3deg); }
}

/* =========================================
   Tabbed Interface for Modals
   ========================================= */

.tab-nav {
  display: flex;
  border-bottom: 2px solid var(--color-border);
  margin-bottom: var(--spacing-4);
}

.tab-btn {
  /* Reset button styles */
  background: none;
  border: none;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-text-muted);
  padding: var(--spacing-2) var(--spacing-3);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px; /* Overlap the main border */
  transition: color 0.2s ease, border-color 0.2s ease;
}

.tab-btn:hover {
  color: var(--color-text);
}

.tab-btn.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

.tab-content {
  display: none; /* Hidden by default */
}

.tab-content.active {
  display: block; /* Show active tab content */
}