/* The GM cockpit (sub-project 3B): initiative cards and their pieces. Tokens only. */

.anima-cockpit-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.anima-cockpit-card.is-acting {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

.anima-cockpit-card-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.anima-cockpit-init {
  min-width: 2.5rem;
  min-height: var(--touch-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-num);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ink-strong);
}

button.anima-cockpit-init--roll {
  padding: 0 var(--space-2);
  background: transparent;
  color: var(--link);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
}

.anima-cockpit-who {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1 1 auto;
}

button.anima-cockpit-name {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink-strong);
  font-family: var(--font-title);
  font-size: 1rem;
  font-weight: 700;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.anima-cockpit-kind {
  font-size: 0.8rem;
  color: var(--muted);
}

.anima-cockpit-badge {
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--on-accent);
  font-size: 0.8rem;
  font-weight: 700;
}

.anima-cockpit-gauges {
  display: flex;
  align-items: center;
  gap: 10px;
}

.anima-cockpit-hp-label {
  font-size: 0.8rem;
  color: var(--ink);
}

/* Mockup [Main]: the LP gauge takes the free width between « PV » and « 115/115 », 10 px
   high. The bar component is shared (roster rows, sheets): reshaped here only. */
.anima-cockpit-card .anima-participant-hp {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
}

.anima-cockpit-card .anima-participant-hp-toggle {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
}

.anima-cockpit-card .anima-hp-bar {
  flex-wrap: nowrap;
  gap: 10px;
  min-width: 0;
}

.anima-cockpit-card .anima-hp-bar-track {
  height: 10px;
  border-radius: 5px;
}

.anima-cockpit-card .anima-hp-bar-label {
  color: var(--ink);
}

.anima-cockpit-fatigue {
  font-family: var(--font-num);
  font-size: 0.8rem;
  color: var(--fatigue);
  white-space: nowrap;
}

.anima-cockpit-turn {
  display: flex;
  gap: var(--space-2);
}

/* Two equal buttons side by side: « ← Acteur précédent » (outline), then the next actor. */
.anima-cockpit-turn > .btn {
  flex: 1 1 0;
  min-width: 0;
}

.anima-cockpit-turn .anima-cockpit-turn-next {
  border: 1px solid var(--accent);
  background: var(--selected);
  color: var(--ink);
}

.anima-cockpit-mode {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.85rem;
}

.anima-cockpit-mode select {
  min-height: var(--touch-min);
  border-radius: 8px;
  font-size: 0.85rem;
  flex: 1 1 auto;
  min-width: 0;
}

.anima-cockpit-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

/* IPad landscape: four columns clip « Action libre »; three keep every label whole. */
@media (max-width: 1279.98px) {
  .anima-cockpit-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

button.anima-cockpit-action {
  min-height: var(--touch-min);
  padding: 0 var(--space-1);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--ink);
  font-size: 0.8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

button.anima-cockpit-action--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
}

.anima-cockpit-readonly {
  margin: 0;
  font-size: 0.8rem;
  color: var(--muted);
}

/* The initiative column. */
.anima-cockpit-column {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

.anima-cockpit-column-title {
  margin: 0;
  font-family: var(--font-title);
  font-size: 1.1rem;
  color: var(--ink-strong);
}

/* The roster tools: a two-column grid of dashed buttons (mockup [Main]). */
.anima-cockpit-tools {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.anima-cockpit-tools .btn {
  border: 1px dashed var(--border-strong);
  background: transparent;
  color: var(--ink-soft);
  white-space: normal;
  line-height: 1.2;
}

/* The encounter bar. */
.anima-cockpit-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.anima-cockpit-bar-info {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  min-width: 0;
}

.anima-cockpit-bar-label {
  font-size: 0.8rem;
  color: var(--muted);
}

.anima-cockpit-bar-name {
  font-family: var(--font-title);
  font-weight: 700;
  color: var(--ink-strong);
}

.anima-cockpit-turn-value {
  font-family: var(--font-num);
  font-weight: 700;
  color: var(--ink-strong);
}

.anima-cockpit-player {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
  max-width: 16rem;
}

.anima-cockpit-player-track {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.8rem;
  color: var(--ink);
}

button.anima-cockpit-player-btn {
  min-width: var(--touch-min);
  min-height: var(--touch-min);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--ink);
}

.anima-cockpit-bar-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-left: auto;
}

/* « Passage du temps » opens as a popover under its toggle: the bar never grows taller. */
.anima-cockpit-bar .anima-time-passage {
  position: relative;
  /* the panel's 12 px bottom margin would lift its button above the bar's others */
  margin-bottom: 0;
}

.anima-cockpit-bar .anima-time-passage-form {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 10;
  margin-top: var(--space-1);
  min-width: 18rem;
  background: var(--surface);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.anima-cockpit-card.is-spectator {
  background: var(--surface-2);
}

/* A spectator is set back by a muted surface and name, never by opacity: opacity lowers every
   text on the card under AA, while --muted on --surface-2 is pinned at 4.5:1 in both themes. */
.anima-cockpit-card.is-spectator button.anima-cockpit-name {
  color: var(--muted);
}

/* ========== The cockpit layout (the board overlay, GM dock in full screen, ≥ 1024 px) ==========
   Mockup [Main]: the encounter bar on top, then a grid — initiative | board over the journal |
   the GM's tools. The page never scrolls: each column scrolls on its own. The stage pane is the
   same element as on the plain board, given a grid area; only its frame changes. */
.anima-whiteboard-overlay--cockpit {
  background: var(--bg);
}

/* `flex-shrink: 0`: the encounter bar may wrap onto a second row (a narrow laptop, a long
   encounter name); the topbar then grows and the grid gives up the height, instead of the
   overlay's column squeezing the topbar under its own content. */
.anima-whiteboard-overlay--cockpit .anima-whiteboard-topbar {
  flex-shrink: 0;
  min-height: 60px;
  padding: var(--space-2) 24px;
  background: var(--surface);
  border-bottom-color: var(--border);
}

/* The bar takes what the title took: the rest of the row, shrinking rather than pushing. */
.anima-whiteboard-topbar > .anima-cockpit-bar {
  flex: 1 1 0;
  min-width: 0;
}

/* The board's tool rail and the token style controls are the plain board's: the cockpit is the
   combat screen. « Tableau plein écran » gives them back. The « À placer » tray stays. */
.anima-whiteboard-overlay--cockpit .anima-whiteboard-toolbar,
.anima-whiteboard-overlay--cockpit .anima-wb-token-colors {
  display: none;
}

.anima-workspace--cockpit {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr) 300px;
  grid-template-rows: minmax(0, 1fr) 260px;
  grid-template-areas:
    "init stage tools"
    "init journal tools";
  gap: 16px;
  padding: 14px 24px 20px;
}

@media (min-width: 1280px) {
  .anima-workspace--cockpit {
    grid-template-columns: 430px minmax(0, 1fr) 370px;
  }
}

.anima-workspace--cockpit > .anima-whiteboard-body {
  grid-area: stage;
  min-height: 0;
  border: 1px solid var(--border);
  border-radius: 12px;
}

.anima-workspace--cockpit .anima-whiteboard-stage {
  background: var(--board);
}

.anima-cockpit-region {
  min-width: 0;
  min-height: 0;
}

.anima-cockpit-region--init {
  grid-area: init;
  overflow-y: auto;
}

.anima-cockpit-region--journal,
.anima-cockpit-region--tools {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.anima-cockpit-region--journal {
  grid-area: journal;
  overflow: hidden;
}

.anima-cockpit-region--tools {
  grid-area: tools;
  overflow-y: auto;
}

/* ========== Cockpit buttons ==========
   The project's `.btn` is Cinzel, uppercase, letter-spaced; the mockup's cockpit buttons are
   Roboto 500 in sentence case, compact — and only those fit the encounter bar on one row at
   1280 px. Scoped to the cockpit's own pieces: the old panel's buttons keep the project look.
   0.8 rem is the floor for `.btn-sm` (the mockup's 13 px is below it). */
.anima-whiteboard-overlay--cockpit .anima-whiteboard-topbar .btn,
.anima-cockpit-bar .btn,
.anima-cockpit-turn .btn,
.anima-cockpit-tools .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-height: var(--touch-min);
  padding: 0 14px;
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
}

.anima-cockpit-bar .btn,
.anima-whiteboard-overlay--cockpit .anima-whiteboard-topbar .btn {
  white-space: nowrap;
}

.anima-cockpit-bar .btn-outline-secondary,
.anima-cockpit-turn .btn-outline-secondary,
.anima-whiteboard-overlay--cockpit .anima-whiteboard-topbar .btn-outline-secondary {
  border-color: var(--border-strong);
  background: transparent;
  color: var(--ink);
}

.anima-cockpit-bar .anima-cockpit-new-turn {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
}

/* The bar's identity, as in the mockup: « RENCONTRE » over the name, then « Tour n ». A long
   encounter name shrinks with an ellipsis instead of pushing the actions to a second row. */
.anima-whiteboard-topbar .anima-cockpit-bar-info {
  display: grid;
  grid-template-columns: minmax(0, auto) auto auto;
  grid-template-rows: auto auto;
  column-gap: var(--space-2);
  align-items: center;
  flex: 0 1 auto;
}

.anima-whiteboard-topbar .anima-cockpit-bar-info > :nth-child(1) {
  grid-area: 1 / 1;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.anima-whiteboard-topbar .anima-cockpit-bar-info > .anima-cockpit-bar-name {
  grid-area: 2 / 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 1.05rem;
}

.anima-whiteboard-topbar .anima-cockpit-bar-info > :nth-child(3) {
  grid-area: 1 / 2 / 3 / 3;
  margin-left: var(--space-3);
}

.anima-whiteboard-topbar .anima-cockpit-bar-info > .anima-cockpit-turn-value {
  grid-area: 1 / 3 / 3 / 4;
  font-size: 1.1rem;
}

.anima-whiteboard-topbar .anima-cockpit-bar-actions {
  flex-shrink: 0;
}

/* One row from 1280 px: the bar's actions, then Fond and Dés, Retour on the left. Below it
   (iPad landscape) the row may wrap. */
@media (min-width: 1280px) {
  .anima-whiteboard-overlay--cockpit .anima-whiteboard-topbar,
  .anima-whiteboard-overlay--cockpit .anima-whiteboard-tools,
  .anima-whiteboard-topbar .anima-cockpit-bar,
  .anima-whiteboard-topbar .anima-cockpit-bar-actions {
    flex-wrap: nowrap;
  }
}

/* ========== Journal | Messages (the box under the board, 260 px) ==========
   Mockup [Main]: a tablist (Journal, Messages + unread pill), a spacer, « Fil : » and one button
   per player; bubbles in the body; the send row in the footer. The box never grows: the body
   scrolls. The bubbles are the adventure's `anima-dm-*` ones. */
.anima-cockpit-journal {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

.anima-cockpit-journal-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: 0 var(--space-3);
  border-bottom: 1px solid var(--border);
}

.anima-cockpit-journal-tabs {
  display: flex;
  gap: var(--space-1);
}

button.anima-cockpit-journal-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: var(--touch-min);
  padding: 0 var(--space-3);
  border: 0;
  border-bottom: 3px solid transparent;
  background: transparent;
  color: var(--ink-soft);
  font-size: 0.85rem;
}

button.anima-cockpit-journal-tab.is-active {
  border-bottom-color: var(--accent);
  color: var(--accent);
  font-weight: 700;
}

.anima-cockpit-unread-badge {
  min-width: 1.2rem;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.3rem;
  text-align: center;
}

.anima-cockpit-journal-spacer {
  flex: 1 1 auto;
}

.anima-cockpit-thread-label {
  font-size: 0.8rem;
  color: var(--muted);
}

.anima-cockpit-threads {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

button.anima-cockpit-thread-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: var(--touch-min);
  padding: 0 var(--space-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--ink);
  font-size: 0.8rem;
}

button.anima-cockpit-thread-btn.is-selected {
  border-color: var(--accent);
  background: var(--selected);
  font-weight: 700;
}

.anima-cockpit-thread-count {
  min-width: 1.1rem;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 0.8rem;
  text-align: center;
}

.anima-cockpit-journal-body {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  padding: var(--space-2) var(--space-3);
}

.anima-cockpit-dm-form {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-top: 1px solid var(--border);
}

.anima-cockpit-dm-label {
  margin: 0;
  font-size: 0.8rem;
  color: var(--muted);
  white-space: nowrap;
}

.anima-cockpit-dm-input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: var(--touch-min);
  font-size: 0.85rem;
}

button.anima-cockpit-dm-send {
  min-height: var(--touch-min);
  padding: 0 var(--space-3);
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
}

.anima-cockpit-dm-error {
  margin: 0;
  padding: 0 var(--space-3) var(--space-2);
  font-size: 0.8rem;
  color: var(--danger);
}

/* ========== Outils du MJ: Jets de PNJ | Ambiance (the right column) ==========
   Mockup [Main]: a tablist of two 48 px tabs (flex 1, the active one bold in the accent with a
   3 px bottom border); the Jets pane is a PNJ select, a skill search, the skill list (it
   scrolls) and, pinned at the bottom, the dark result card and the two roll buttons. */
.anima-cockpit-toolbox { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.anima-cockpit-toolbox-tabs { display: flex; border-bottom: 1px solid var(--border); }
button.anima-cockpit-toolbox-tab {
  flex: 1 1 0; min-height: 48px; border: 0; border-bottom: 3px solid transparent;
  background: transparent; color: var(--ink-soft); font-size: 0.85rem;
}
button.anima-cockpit-toolbox-tab.is-active { border-bottom-color: var(--accent); color: var(--accent); font-weight: 700; }
.anima-cockpit-toolbox-pane { display: flex; flex-direction: column; flex: 1 1 0; min-height: 0; }
.anima-cockpit-rolls { display: flex; flex-direction: column; flex: 1 1 0; min-height: 0; gap: var(--space-2); padding: var(--space-3); }
.anima-cockpit-rolls-field { display: flex; flex-direction: column; gap: var(--space-1); }
.anima-cockpit-rolls-label { margin: 0; font-size: 0.8rem; color: var(--muted); }
.anima-cockpit-rolls-empty { margin: 0; font-size: 0.85rem; color: var(--muted); }
.anima-cockpit-skill-list { flex: 1 1 0; min-height: 0; margin: 0; padding: 0; overflow-y: auto; list-style: none; }
.anima-cockpit-skill-row {
  display: flex; align-items: center; gap: var(--space-2); padding: 0 var(--space-2);
  border-bottom: 1px solid var(--border); border-radius: var(--radius-sm);
}
.anima-cockpit-skill-row.is-selected { background: var(--selected); }
button.anima-cockpit-skill-pick {
  display: flex; align-items: center; justify-content: space-between; flex: 1 1 auto; min-width: 0;
  min-height: var(--touch-min); border: 0; background: transparent; color: var(--ink);
  font-size: 0.85rem; text-align: left;
}
.anima-cockpit-skill-value { font-family: var(--font-num); font-weight: 700; }
button.anima-cockpit-skill-die {
  flex: 0 0 var(--touch-min); width: var(--touch-min); height: var(--touch-min);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--surface-2); font-size: 1rem;
}
.anima-cockpit-roll-card { padding: var(--space-3); border-radius: var(--radius-sm); background: var(--result-bg); color: var(--result-ink); }
.anima-cockpit-roll-title { font-size: 0.85rem; color: var(--result-muted); }
.anima-cockpit-roll-line { font-family: var(--font-num); font-size: 1rem; font-weight: 700; }
.anima-cockpit-rolls-actions { display: flex; gap: var(--space-2); }
.anima-cockpit-rolls-actions button {
  flex: 1 1 0; min-height: var(--touch-min); border: 1px solid var(--gold);
  border-radius: var(--radius-sm); font-size: 0.85rem; font-weight: 700;
}
.anima-cockpit-rolls-actions button:disabled { opacity: 0.5; }
button.anima-cockpit-roll-visible { background: transparent; color: var(--ink); }
button.anima-cockpit-roll-secret { background: var(--gold); color: var(--c-ink-900); }

/* The Ambiance pane (Task 7). Mockup [Main] panel="ambiance": Musique then Nappes, the
   add / stop-all row pinned at the bottom. The ambient HUD's floating button is hidden while
   the cockpit is up: this pane replaces it, and it would sit over the tools column. */
body:has(.anima-whiteboard-overlay--cockpit) .anima-ambient-fab { display: none; }
.anima-cockpit-ambiance { display: flex; flex-direction: column; flex: 1 1 0; min-height: 0; gap: var(--space-2); padding: var(--space-3); overflow-y: auto; }
.anima-cockpit-ambiance-title { margin: var(--space-2) 0 0; font-size: 0.9rem; }
.anima-cockpit-music { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-md); }
.anima-cockpit-music-track { font-weight: 700; font-size: 0.9rem; overflow-wrap: anywhere; }
.anima-cockpit-music-controls { display: flex; align-items: center; gap: var(--space-2); }
.anima-cockpit-spacer { flex: 1 1 auto; }
button.anima-cockpit-round {
  display: inline-flex; align-items: center; justify-content: center; width: var(--touch-min); height: var(--touch-min);
  border: 1px solid var(--border-strong); border-radius: 50%; background: var(--surface); color: var(--ink); font-size: 1rem;
}
button.anima-cockpit-round--main { width: 52px; height: 52px; border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
button.anima-cockpit-repeat {
  min-height: var(--touch-min); padding: 0 var(--space-3); border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); background: transparent; color: var(--ink); font-size: 0.85rem;
}
button.anima-cockpit-repeat.is-on { border-color: var(--accent); color: var(--accent); font-weight: 700; }
.anima-cockpit-nappe { position: relative; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: var(--space-1) var(--space-2); }
.anima-cockpit-nappe-name { font-size: 0.85rem; }
.anima-cockpit-nappe input[type="range"] { grid-column: 1 / -1; width: 100%; }
button.anima-cockpit-pill {
  width: 64px; height: 36px; border: 1px solid var(--border-strong); border-radius: 18px;
  background: var(--surface-2); color: var(--ink-soft); font-size: 0.8rem;
}
button.anima-cockpit-pill.is-on { border-color: var(--accent); background: var(--accent); color: var(--on-accent); font-weight: 700; }
.anima-cockpit-ambiance-foot { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-2); margin-top: auto; padding-top: var(--space-2); }
.anima-cockpit-ambiance-foot .anima-cockpit-spacer { flex: 1 1 auto; min-height: var(--space-2); }
.anima-cockpit-ambiance-empty { margin: 0; font-size: 0.85rem; color: var(--muted); }
button.anima-cockpit-ambiance-btn {
  width: 100%; min-height: var(--touch-min); font-family: var(--font-body); font-size: 0.8rem;
  font-weight: 500; text-transform: none; letter-spacing: normal; white-space: normal;
  border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); color: var(--ink);
}
.anima-cockpit-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }