/* ========================================
   SHARED PORTRAIT & PORTRAIT HISTORY STYLES
   Used by: character-builder, character-manager
   ======================================== */

/* ===== MAIN SHEET PORTRAIT AREA ===== */
.portrait-container {
  position: relative;
  margin: var(--spacing-md) 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-md);
}

.portrait-actions {
  display: flex;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
  align-items: center;
  align-self: flex-end;
}

.ascii-portrait {
  font-size: 7px;
  line-height: 1.2;
  color: var(--terminal-accent);
  text-align: center;
  white-space: pre;
  font-family: var(--font-mono);
  /* Treat the portrait area as a fixed frame:
     - center the ASCII horizontally
     - crop anything that overflows instead of adding scrollbars */
  overflow-x: hidden;
  overflow-y: hidden;
  width: 100%;
  max-width: 100%;
}

/* Loading state for portrait area (used while AI portrait is being generated).
   Loosens the constraints so status text + cube spinner behave like the demo: */
.ascii-portrait.ascii-portrait--loading {
  /* Allow loader text to wrap across lines */
  white-space: pre-wrap;
  /* Avoid overly centered, cramped feel while loading */
  text-align: left;
  /* Don't clip spinner/text during loading */
  overflow-x: visible;
  overflow-y: visible;
  /* Give the loader some guaranteed vertical space */
  min-height: 8rem;
}

/* Wrapper for spinner + text (used in portrait loaders and narrator text).
   Keeps cube and text on one line, vertically centered. */
.narrator-spinner-shell {
  white-space: normal;
  display: inline-flex;
  align-items: center;
}

/* DEPRECATED: Old text-based spinner (↻ glyph). Replaced by .spinner-cube-* in terminal-theme.css.
 * Keeping this rule for backward compatibility with any legacy code that hasn't been migrated yet. */
.ascii-portrait .spinner {
  color: var(--panel-teal);
  margin-right: 0;
}

/* ===== PORTRAIT HISTORY MODAL ===== */

/* Wrapper around the horizontal card row so we can layer navigation arrows
   over the scrollable area without changing the card math. */
.portrait-history-carousel {
  position: relative;
}

/* Smaller portrait preview inside history modal to keep it readable
   without overwhelming the layout. */
.portrait-history-preview.ascii-portrait {
  font-size: inherit; /* Match base card-thumbnail typography */
  max-height: 100%;
  overflow-y: hidden;
}

/* Portrait history card row in modal */
.portrait-history-card-row {
  display: flex;
  gap: var(--spacing-md);
  overflow-x: auto;
  overflow-y: visible;
  /* Give the scrollbar some breathing room below the cards and create
     dedicated side gutters for the carousel arrows so they don't sit
     directly on top of card content. */
  padding-block: var(--spacing-sm) var(--spacing-md);
  padding-inline: 48px;
  scroll-behavior: smooth;
}

.portrait-history-card-row.is-single {
  justify-content: center;
}

/* Match card sizing used in manager grid: effectively 3 columns with the
   same gap. This keeps the card proportions consistent between views. */
.portrait-history-modal .portrait-history-card {
  flex: 0 0 calc((100% - 2 * var(--spacing-md)) / 3);
  max-width: calc((100% - 2 * var(--spacing-md)) / 3);
  box-sizing: border-box;
}

/* Portrait history cards use the same vertical card layout pattern. */
.portrait-history-modal .character-card {
  background-color: var(--terminal-bg);
  border: 1px solid var(--terminal-border);
  padding: 0;
  transition: all var(--transition-speed);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  /* Match the 3:4 geometry of manager grid cards and clip internal overflow.
     Portrait history menus are positioned in viewport space, so they are not
     affected by this clipping. */
  overflow: hidden;
  aspect-ratio: 3 / 4;
}

/* Hover and keyboard focus (unselected) - green accent, translucent bg */
.portrait-history-modal .character-card:hover:not(.is-selected),
.portrait-history-modal .character-card.is-keyboard-focused:not(.is-selected) {
  border-color: var(--terminal-accent);
  background-color: hsla(
    var(--theme-terminal-h),
    var(--theme-terminal-s),
    var(--theme-terminal-l-bright),
    0.08
  );
  box-shadow: 0 0 15px
    hsla(
      var(--theme-terminal-h),
      var(--theme-terminal-s),
      var(--theme-terminal-l-bright),
      0.25
    );
}

/* Ensure thumbnails in history cards render images nicely */
.portrait-history-modal .card-thumbnail {
  /* Fixed 3:4 box; ASCII and IMG are absolutely positioned inside. */
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  display: block;
  overflow: hidden;
}

.portrait-history-modal .card-thumbnail .ascii-portrait,
.portrait-history-modal .card-thumbnail img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.portrait-history-modal .card-thumbnail img {
  object-fit: cover; /* Scale & crop to fill card thumbnail */
  display: block;
}

.portrait-history-modal .card-details {
  padding: var(--spacing-md);
}

.portrait-history-modal .card-name {
  color: var(--terminal-fg);
  font-size: var(--font-size-small);
  line-height: 1.2;
  margin-bottom: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.portrait-history-modal .card-info {
  color: var(--terminal-dim);
  font-size: var(--font-size-small);
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Yellow-themed cards inside portrait history modal */
.portrait-history-modal .character-card {
  border-color: var(--modal-accent);
  background-color: hsla(
    var(--theme-yellow-h),
    var(--theme-yellow-s),
    var(--theme-yellow-l-bright),
    0.06
  );
}

.portrait-history-modal .character-card .card-name {
  color: var(--modal-accent);
}

.portrait-history-modal .character-card .card-info {
  color: hsla(
    var(--theme-yellow-h),
    var(--theme-yellow-s),
    var(--theme-yellow-l-bright),
    0.8
  );
}

/* Default: ASCII art in unselected portrait history cards is yellow */
.portrait-history-modal .character-card:not(.is-selected) .card-thumbnail,
.portrait-history-modal
  .character-card:not(.is-selected)
  .card-thumbnail
  .ascii-portrait {
  color: var(--modal-accent);
}

/* Yellow-themed buttons inside portrait history cards */
.portrait-history-modal .portrait-history-actions .terminal-btn {
  border-color: var(--modal-accent);
  color: var(--modal-accent);
  background: transparent;
}

.portrait-history-modal .portrait-history-actions .terminal-btn:hover {
  background-color: hsla(
    var(--theme-yellow-h),
    var(--theme-yellow-s),
    var(--theme-yellow-l-bright),
    0.15
  );
  box-shadow: 0 0 10px
    hsla(
      var(--theme-yellow-h),
      var(--theme-yellow-s),
      var(--theme-yellow-l-bright),
      0.6
    );
}

/* When a portrait history card is focused/selected, switch the entire card UI
   (borders, text, buttons, ASCII) to the teal theme used for active characters. */
.portrait-history-modal .character-card.is-selected,
.portrait-history-modal .character-card.is-keyboard-focused {
  border-color: var(--panel-teal);
  box-shadow: 0 0 16px
    hsla(
      var(--theme-teal-h),
      calc(var(--theme-teal-s) * 0.67),
      var(--theme-teal-l-dim),
      0.7
    );
  background-color: hsla(
    var(--theme-teal-h),
    var(--theme-teal-s),
    var(--theme-teal-l-bright),
    0.12
  );
}

.portrait-history-modal .character-card.is-selected .card-name,
.portrait-history-modal .character-card.is-keyboard-focused .card-name {
  color: var(--panel-teal);
}

.portrait-history-modal .character-card.is-selected .card-info,
.portrait-history-modal .character-card.is-keyboard-focused .card-info {
  color: var(--panel-teal-dim);
}

.portrait-history-modal .character-card.is-selected .card-thumbnail,
.portrait-history-modal .character-card.is-keyboard-focused .card-thumbnail,
.portrait-history-modal
  .character-card.is-selected
  .card-thumbnail
  .ascii-portrait,
.portrait-history-modal
  .character-card.is-keyboard-focused
  .card-thumbnail
  .ascii-portrait {
  color: var(--panel-teal);
}

.portrait-history-modal
  .character-card.is-selected
  .portrait-history-actions
  .terminal-btn,
.portrait-history-modal
  .character-card.is-keyboard-focused
  .portrait-history-actions
  .terminal-btn {
  border-color: var(--panel-teal);
  color: var(--panel-teal);
}

.portrait-history-modal
  .character-card.is-selected
  .portrait-history-actions
  .terminal-btn:hover,
.portrait-history-modal
  .character-card.is-keyboard-focused
  .portrait-history-actions
  .terminal-btn:hover {
  background-color: hsla(
    var(--theme-teal-h),
    var(--theme-teal-s),
    var(--theme-teal-l-bright),
    0.18
  );
  box-shadow: 0 0 10px
    hsla(
      var(--theme-teal-h),
      calc(var(--theme-teal-s) * 0.67),
      var(--theme-teal-l-dim),
      0.6
    );
}

/* Layout for date + overflow inside a single footer band */
.portrait-history-details {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.portrait-history-meta {
  flex: 1 1 auto;
  min-width: 0;
}

/* Add breathing room around history card actions */
.portrait-history-actions {
  margin-left: auto;
  display: inline-flex;
  justify-content: flex-end;
  align-items: center;
}

/* Extra spacing between helper text and history cards in the modal */
.portrait-history-modal .modal-body > .terminal-text-small.terminal-text-dim {
  margin-bottom: var(--spacing-md);
}

/* Let portrait history menus escape the scrollable modal-body without
   getting clipped, while the overall modal still scrolls if needed. */
.portrait-history-modal .modal-body {
  overflow-y: visible;
}

/* Allow portrait history menus to render outside the card stack while keeping
   other modals using the default clipping behavior. */
.portrait-history-modal {
  overflow: visible;
}

 .portrait-history-modal .modal-content {
  overflow: visible;
}

/* Ensure portrait history listbox appears above other modal content */
.portrait-history-modal .selector-menu {
  z-index: 999;
}

/* Carousel arrow buttons for portrait history
   - Absolutely positioned over the scrollable row
   - Keyboard-focusable buttons for accessibility
*/
.portrait-history-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--modal-accent);
  /* Default: subtle translucent black panel so arrows stand out without
     competing with the yellow card chrome. */
  background-color: rgba(0, 0, 0, 0.4);
  color: var(--modal-accent);
  cursor: pointer;
  padding: 0;
}

.portrait-history-nav span {
  line-height: 1;
}

.portrait-history-nav-left {
  left: 4px;
}

.portrait-history-nav-right {
  right: 4px;
}

.portrait-history-nav:hover {
  background-color: hsla(
    var(--theme-yellow-h),
    var(--theme-yellow-s),
    var(--theme-yellow-l-bright),
    0.18
  );
  box-shadow: 0 0 10px
    hsla(
      var(--theme-yellow-h),
      var(--theme-yellow-s),
      var(--theme-yellow-l-bright),
      0.6
    );
}

.portrait-history-nav:disabled,
.portrait-history-nav[aria-disabled='true'] {
  opacity: 0.4;
  cursor: default;
  box-shadow: none;
}

/* Portrait history listbox hover/focus background:
   - Unfocused cards (default menu): yellow modal theme
   - Focused/selected card menu: teal sheet theme to match the active card */
.portrait-history-menu-detached .selector-option:hover,
.portrait-history-menu-detached .selector-option:focus {
  background-color: hsla(
    var(--theme-yellow-h),
    var(--theme-yellow-s),
    var(--theme-yellow-l-bright),
    0.16
  );
}

.portrait-history-menu-detached--teal .selector-option:hover,
.portrait-history-menu-detached--teal .selector-option:focus {
  background-color: hsla(
    var(--theme-teal-h),
    var(--theme-teal-s),
    var(--theme-teal-l-bright),
    0.18
  );
}

/* Overflow trigger button in portrait history cards */
.portrait-history-overflow-btn {
  border-color: var(--modal-accent);
  color: var(--modal-accent);
  background: transparent;
  /* Match the 24px height of .terminal-btn-small sheet header actions */
  width: 24px;
  min-width: 24px;
  height: 24px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.portrait-history-overflow-btn:hover {
  background-color: hsla(
    var(--theme-yellow-h),
    var(--theme-yellow-s),
    var(--theme-yellow-l-bright),
    0.15
  );
  box-shadow: 0 0 10px
    hsla(
      var(--theme-yellow-h),
      var(--theme-yellow-s),
      var(--theme-yellow-l-bright),
      0.6
    );
}

/* Selected/keyboard-focused cards use teal theme for overflow button */
.portrait-history-modal
  .character-card.is-selected
  .portrait-history-overflow-btn,
.portrait-history-modal
  .character-card.is-keyboard-focused
  .portrait-history-overflow-btn {
  border-color: var(--panel-teal);
  color: var(--panel-teal);
}

.portrait-history-modal
  .character-card.is-selected
  .portrait-history-overflow-btn:hover,
.portrait-history-modal
  .character-card.is-keyboard-focused
  .portrait-history-overflow-btn:hover {
  background-color: hsla(
    var(--theme-teal-h),
    var(--theme-teal-s),
    var(--theme-teal-l-bright),
    0.18
  );
  box-shadow: 0 0 10px
    hsla(
      var(--theme-teal-h),
      calc(var(--theme-teal-s) * 0.67),
      var(--theme-teal-l-dim),
      0.6
    );
}

/* Portrait history menus that are moved to document.body need explicit theme tokens */
.portrait-history-menu-detached {
  /* Default to the modal's yellow theme when detached so they match the
     non-teal portrait history UI. */
  --ui-border-color: hsl(
    var(--theme-yellow-h),
    var(--theme-yellow-s),
    var(--theme-yellow-l-bright)
  );
  --ui-fg-color: hsl(
    var(--theme-yellow-h),
    var(--theme-yellow-s),
    var(--theme-yellow-l-bright)
  );
  --ui-dim-color: hsla(
    var(--theme-yellow-h),
    var(--theme-yellow-s),
    var(--theme-yellow-l-bright),
    0.7
  );
}

/* When the detached menu belongs to the focused/selected card, we switch its
   tokens to the teal theme so the listbox matches the teal card chrome. */
.portrait-history-menu-detached--teal {
  --ui-border-color: var(--panel-teal);
  --ui-fg-color: var(--panel-teal);
  --ui-dim-color: var(--panel-teal-dim);
}