/* Préfixe v-image — thème clair, tokens avec fallbacks */

#veillee-image-board.v-image-board,
.v-image-board {
  --v-image-bg: var(--surface, #fffefb);
  --v-image-bg-soft: var(--paper, #f6f4ed);
  --v-image-border: var(--line, #dedfd5);
  --v-image-fg: var(--ink, #292d27);
  --v-image-fg-soft: var(--muted, #70756b);
  --v-image-accent: var(--green, #466b55);
  --v-image-danger: var(--color-danger, #b3261e);
  --v-image-radius: var(--radius-md, 8px);
  --v-image-shadow: var(--shadow-md, 0 8px 28px rgba(0,0,0,0.18));
  --v-image-max-img: 70vh;

  display: block;
  box-sizing: border-box;
  background: var(--v-image-bg);
  color: var(--v-image-fg);
  border: 1px solid var(--v-image-border);
  border-radius: var(--v-image-radius);
  padding: 10px 12px;
  margin: 0;
  font: inherit;
}

.v-image-board[hidden] { display: none !important; }

.v-image-board-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.v-image-board-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--v-image-fg-soft, #5b5b66);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.v-image-board-frame {
  width: 100%;
  background: var(--v-image-bg-soft, #f6f4ed);
  border-radius: var(--v-image-radius, 8px);
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.v-image-board-img {
  display: block;
  width: 100%;
  max-height: var(--v-image-max-img, 70vh);
  object-fit: contain;
  background: transparent;
}

/* Bandeau compact MJ : pas de grande image */
.v-image-board-gm .v-image-board-frame { display: none; }
.v-image-board-gm {
  padding: 8px 12px;
}

.v-image-board-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 10px;
}

.v-image-board-remove,
.v-image-board-close,
.v-image-board-preview {
  font: inherit;
  cursor: pointer;
  border-radius: var(--v-image-radius, 8px);
  padding: 6px 12px;
  min-height: 44px;
  transition: background 120ms ease, border-color 120ms ease;
}

.v-image-board-remove {
  background: var(--v-image-bg-soft, #f6f4ed);
  color: var(--v-image-danger, #b3261e);
  border: 1px solid var(--v-image-border, #dedfd5);
}
.v-image-board-remove:hover:not(:disabled) {
  background: var(--v-image-bg, #fff);
  border-color: var(--v-image-danger, #b3261e);
}
.v-image-board-remove:disabled { opacity: 0.6; cursor: not-allowed; }
.v-image-board-remove[hidden] { display: none !important; }

.v-image-board-preview {
  background: var(--v-image-bg-soft, #f6f4ed);
  color: var(--v-image-fg, #292d27);
  border: 1px solid var(--v-image-border, #dedfd5);
}
.v-image-board-preview:hover:not(:disabled) {
  background: var(--v-image-bg, #fff);
  border-color: var(--v-image-accent, #466b55);
}
.v-image-board-preview[hidden] { display: none !important; }

/* Dialog */

.v-image-dialog {
  --v-image-bg: var(--surface, #fffefb);
  --v-image-bg-soft: var(--paper, #f6f4ed);
  --v-image-border: var(--line, #dedfd5);
  --v-image-fg: var(--ink, #292d27);
  --v-image-fg-soft: var(--muted, #70756b);
  --v-image-accent: var(--green, #466b55);
  --v-image-danger: var(--color-danger, #b3261e);
  --v-image-radius: var(--radius-md, 8px);
  --v-image-shadow: var(--shadow-md, 0 12px 40px rgba(0,0,0,0.28));

  box-sizing: border-box;
  width: min(960px, 94vw);
  max-width: 94vw;
  max-height: 92vh;
  padding: 0;
  border: 1px solid var(--v-image-border, #dedfd5);
  border-radius: var(--v-image-radius, 8px);
  background: var(--v-image-bg, #fff);
  color: var(--v-image-fg, #292d27);
  box-shadow: var(--v-image-shadow, 0 12px 40px rgba(0,0,0,0.28));
  overflow: hidden;
  font: inherit;
  display: flex;
  flex-direction: column;
}

.v-image-dialog:not([open]) { display: none; }
.v-image-dialog.v-image-dialog-free { position: fixed; margin: 0; z-index: 8050; }   /* joueur : fenêtre libre, sans voile */

.v-image-dialog::backdrop {
  background: rgba(15, 15, 20, 0.55);
}

.v-image-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--v-image-border, #dedfd5);
  flex: 0 0 auto;
}

.v-image-dialog-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--v-image-fg, #292d27);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.v-image-dialog-close {
  font: inherit;
  font-size: 1.25rem;
  line-height: 1;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid transparent;
  background: transparent;
  color: var(--v-image-fg-soft, #70756b);
  cursor: pointer;
  flex: 0 0 auto;
}
.v-image-dialog-close:hover {
  background: var(--v-image-bg-soft, #f6f4ed);
  color: var(--v-image-fg, #292d27);
}

.v-image-dialog-status {
  padding: 6px 16px;
  font-size: 0.88rem;
  color: var(--v-image-fg-soft, #70756b);
  border-bottom: 1px solid var(--v-image-border, #dedfd5);
  flex: 0 0 auto;
  background: var(--v-image-bg-soft, #f6f4ed);
}
.v-image-dialog-status[hidden] { display: none !important; }
.v-image-dialog-status--error { color: var(--v-image-danger, #b3261e); }

.v-image-dialog-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 12px;
  padding: 12px 16px;
  overflow: hidden;
  flex: 1 1 auto;
  min-height: 0;
}

.v-image-dialog-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.v-image-dialog-frame {
  background: var(--v-image-bg-soft, #f6f4ed);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--v-image-radius, 8px);
  overflow: hidden;
  min-height: 0;
  flex: 1 1 auto;
}

.v-image-dialog-img {
  display: block;
  max-width: 100%;
  max-height: 60vh;
  width: auto;
  height: auto;
  object-fit: contain;
}

.v-image-dialog-help {
  margin: 8px 0 0;
  font-size: 0.82rem;
  color: var(--v-image-fg-soft, #70756b);
  line-height: 1.35;
}

.v-image-dialog-players-block {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border: 1px solid var(--v-image-border, #dedfd5);
  border-radius: var(--v-image-radius, 8px);
  overflow: hidden;
  background: var(--v-image-bg, #fff);
}

.v-image-dialog-players-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--v-image-border, #dedfd5);
  background: var(--v-image-bg-soft, #f6f4ed);
  flex: 0 0 auto;
}

.v-image-dialog-players-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--v-image-fg, #292d27);
}

.v-image-dialog-players-actions {
  display: flex;
  gap: 6px;
}

.v-image-dialog-mini {
  font: inherit;
  font-size: 0.78rem;
  cursor: pointer;
  background: var(--v-image-bg, #fff);
  color: var(--v-image-fg, #292d27);
  border: 1px solid var(--v-image-border, #dedfd5);
  border-radius: 6px;
  padding: 4px 8px;
  min-height: 32px;
}
.v-image-dialog-mini:hover {
  border-color: var(--v-image-accent, #466b55);
}

.v-image-dialog-players {
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
  padding: 6px 4px;
}

.v-image-dialog-players-empty {
  padding: 8px 10px;
  font-size: 0.85rem;
  color: var(--v-image-fg-soft, #70756b);
}

.v-image-dialog-player {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-radius: 6px;
}
.v-image-dialog-player:hover { background: var(--v-image-bg-soft, #f6f4ed); }

.v-image-dialog-player-check {
  width: 18px;
  height: 18px;
  accent-color: var(--v-image-accent, #466b55);
  cursor: pointer;
  flex: 0 0 auto;
}

.v-image-dialog-player-label {
  font-size: 0.88rem;
  color: var(--v-image-fg, #292d27);
  cursor: pointer;
  user-select: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.v-image-dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--v-image-border, #dedfd5);
  background: var(--v-image-bg, #fff);
  flex: 0 0 auto;
}

.v-image-dialog-send,
.v-image-dialog-remove {
  font: inherit;
  cursor: pointer;
  border-radius: var(--v-image-radius, 8px);
  padding: 8px 14px;
  font-weight: 600;
  min-height: 44px;
  transition: filter 120ms ease, opacity 120ms ease;
}

.v-image-dialog-send {
  background: var(--v-image-accent, #466b55);
  color: #ffffff;
  border: 1px solid var(--v-image-accent, #466b55);
}
.v-image-dialog-send:hover:not(:disabled) { filter: brightness(1.08); }
.v-image-dialog-send:disabled { opacity: 0.55; cursor: not-allowed; }

.v-image-dialog-remove {
  background: var(--v-image-bg-soft, #f6f4ed);
  color: var(--v-image-danger, #b3261e);
  border: 1px solid var(--v-image-border, #dedfd5);
}
.v-image-dialog-remove:hover:not(:disabled) {
  background: var(--v-image-bg, #fff);
  border-color: var(--v-image-danger, #b3261e);
}
.v-image-dialog-remove:disabled { opacity: 0.6; cursor: not-allowed; }
.v-image-dialog-remove[hidden] { display: none !important; }

@media (max-width: 640px) {
  .v-image-dialog-body {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
    overflow-y: auto;
  }
  .v-image-dialog-frame {
    flex: 0 0 auto;
  }
  .v-image-dialog-img {
    max-height: 38vh;
  }
  .v-image-dialog-players {
    max-height: 20vh;
  }
  .v-image-dialog-footer {
    flex-wrap: wrap;
  }
  .v-image-dialog-send,
  .v-image-dialog-remove {
    flex: 1 1 auto;
  }
}

/* Library utility (kept from previous stylesheet) */
.v-image-library{display:flex;flex-wrap:wrap;gap:10px}

@media(max-width:600px){
  .topbar [data-act="image-library"]{font-size:0;gap:0;min-width:44px;min-height:44px}
  .topbar [data-act="image-library"] svg{width:20px;height:20px}
}

.v-image-board-gm{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:6px 12px;min-height:44px}
.v-image-board-gm .v-image-board-header,.v-image-board-gm .v-image-board-actions{margin:0}
.v-image-board-gm .v-image-board-label{white-space:normal;overflow-wrap:anywhere}
.v-image-dialog [hidden]{display:none!important}
@media(max-width:600px){.v-image-board-gm{flex-wrap:wrap}.v-image-dialog-title{white-space:normal}}

.v-image-board-close{background:var(--v-image-accent,#466b55);color:#fff;border:1px solid var(--v-image-accent,#466b55);font-weight:600}
.v-image-board-close:hover{filter:brightness(1.08)}
.v-image-board-close[hidden]{display:none!important}