/* ============================================================
   CSS COG: shared_dice.css - Party Shared Dice History Panel
   Author:   Steven J. Cook
   Date:     2026-04-22
   Time:     03:30 UTC
   Model:    Claude Opus 4.7
   Chat:     Abyssal Engine Web App Development
   Revision: 1.2.0
   Changes:
     v1.2.0 - Chat-log stacking. .shared-dice-history is now a
              flex column with margin-top:auto on its first
              child so short lists sit at the bottom of the
              panel (right above the status bar) and grow
              upward as rolls come in. Matches the fix applied
              to dice.css v1.1.0 for the personal Dice Roller.
     v1.1.1 - Fixed panel sizing. Previous values (top:110, w:240)
              still covered the tab bar bottom edge and cut into
              the 280px bestiary column on typical 1920px monitors
              where the centered container leaves only ~210px of
              left-margin space. New values: top:170 (clears the
              tab bar cleanly), width:200 (fits in a 1920px left
              margin without touching bestiary). Added a
              max-width:1799px media query that flips to the
              full-height slide-in overlay whenever the viewport
              is too narrow for the tuck-in-margin mode to work.
     v1.1.0 - Shrunk the panel so it fits in the empty space to
              the left of the tracker grid without covering the
              tab bar or the bestiary column. Narrower (240px vs
              340px), shorter (sits between the tab bar and the
              toggle button), no longer slides from left edge
              but fades in/out in place. Entry padding tightened.
              On narrow viewports (<900px) it falls back to the
              original full-height slide-in so nothing is lost.
     v1.0.1 - Added pointer-events: none on closed panel as a
              defensive measure against any browser edge case
              where a translated-off-screen element could still
              intercept clicks. Panel flips to pointer-events:
              auto when open.
     v1.0.0 - Initial version.
   Purpose:  Read-only mirror of the right-side dice roller for
             viewing rolls made by every participant in the
             current combat. Only renders on the Initiative
             Tracker view.
   ============================================================ */

/* Panel sits in the left margin, below the tab bar and above
   the toggle button. Fades in/out rather than sliding. When
   viewports are wide enough, this tucks into empty space
   alongside the tracker grid. */
#shared-dice-panel {
  position: fixed;
  left: 8px;
  top: 170px;        /* clears header + tab bar */
  bottom: 80px;      /* above the toggle button at bottom:20 */
  width: 200px;
  max-width: calc(100vw - 16px);
  background: var(--bg-darkest);
  border: 1px solid var(--accent-crimson);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  z-index: 11000;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
  box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}
#shared-dice-panel.open {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0s;
  pointer-events: auto;
}

/* Panel header - red accent instead of blue */
.shared-dice-header {
  padding: 0.6em 0.75em;
  border-bottom: 1px solid var(--border-thin);
  display: flex;
  align-items: center;
  gap: 0.5em;
}
.shared-dice-header h3 {
  margin: 0;
  font-size: 0.9em;
  color: var(--accent-red);
}
.shared-dice-header h3 i { margin-right: 0.3em; }
.shared-dice-close {
  cursor: pointer;
  color: var(--accent-red);
  font-size: 1.2em;
  opacity: 0.7;
  transition: all 0.15s;
  margin-left: auto;
}
.shared-dice-close:hover {
  color: var(--text-primary);
  opacity: 1;
}

/* Status bar showing who's connected to this log */
.shared-dice-status {
  padding: 0.35em 0.75em;
  border-bottom: 1px solid var(--border-thin);
  font-size: 0.7em;
  color: var(--text-muted);
  font-family: var(--font-display);
  letter-spacing: 0.04em;
}
.shared-dice-status i { margin-right: 0.3em; }
.shared-dice-status.no-session { color: var(--text-faint); font-style: italic; }
.shared-dice-status.session-live { color: var(--accent-green); }
.shared-dice-status.session-live .sds-pulse {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-green);
  margin-right: 0.4em;
  box-shadow: 0 0 6px rgba(87, 242, 135, 0.6);
  animation: sds-pulse 1.8s ease-in-out infinite;
}
@keyframes sds-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}

/* History feed.
   Chat-log stacking: the feed is a flex column and its first
   child claims the free space via margin-top:auto, so a short
   list sits at the bottom of the panel. renderFeed scrolls
   to scrollHeight on each render so the newest roll is always
   visible once the list overflows. */
.shared-dice-history {
  flex: 1;
  overflow-y: auto;
  padding: 0.5em;
  display: flex;
  flex-direction: column;
}
.shared-dice-history > *:first-child {
  margin-top: auto;
}
.shared-dice-empty {
  color: var(--text-faint);
  text-align: center;
  padding: 1.5em 0.75em;
  font-size: 0.78em;
  font-style: italic;
}

/* Individual roll entry - mirrors .dice-entry but with red accent */
.shared-dice-entry {
  background: var(--bg-dark);
  border: 1px solid var(--border-thin);
  border-left: 3px solid var(--accent-red);
  border-radius: var(--radius-sm);
  padding: 0.4em 0.55em;
  margin-bottom: 0.4em;
  font-size: 0.85em;
}
.shared-dice-entry .sde-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  color: var(--accent-red);
  font-size: 0.72em;
  margin-bottom: 0.2em;
  gap: 0.4em;
}
.shared-dice-entry .sde-char {
  color: var(--accent-red);
  font-weight: 700;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.shared-dice-entry .sde-ts {
  color: var(--text-faint);
  font-family: var(--font-code);
  font-size: 0.9em;
  flex-shrink: 0;
}
.shared-dice-entry .sde-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.4em;
}
.shared-dice-entry .sde-label {
  color: var(--text-primary);
  font-size: 0.78em;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.shared-dice-entry .sde-result {
  font-family: var(--font-code);
  font-size: 1.1em;
  color: var(--accent-cyan);
  font-weight: 700;
  flex-shrink: 0;
}
.shared-dice-entry .sde-detail {
  color: var(--text-primary);
  font-size: 0.72em;
  margin-top: 0.2em;
  word-break: break-word;
}
.shared-dice-entry .sde-crit   { color: var(--accent-green); font-weight: 700; }
.shared-dice-entry .sde-fumble { color: var(--accent-red);   font-weight: 700; }

/* Own rolls get a subtle amber highlight so the user can pick
   their own entries out of the feed at a glance. */
.shared-dice-entry.sde-own {
  border-left-color: var(--accent-amber);
}
.shared-dice-entry.sde-own .sde-char {
  color: var(--accent-amber);
}
.shared-dice-entry.sde-own .sde-header {
  color: var(--accent-amber);
}

/* Floating toggle button - mirror of #dice-toggle, on the left,
   using the crimson accent color. Hidden by default; shown by
   the JS cog only when the user is on the tracker view. */
#shared-dice-toggle {
  position: fixed;
  left: 20px;
  bottom: 20px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--accent-crimson);
  color: #fff;
  border: none;
  font-size: 1.3em;
  cursor: pointer;
  box-shadow: var(--shadow-high);
  z-index: 11000;
  transition: all 0.2s;
  display: none;
  align-items: center;
  justify-content: center;
}
#shared-dice-toggle.visible { display: flex; }
#shared-dice-toggle:hover {
  background: #b52a35;
  transform: scale(1.1);
}

/* Small notification dot for new-entry indicator (used later if we
   want to flash when rolls arrive while panel is closed) */
#shared-dice-toggle .sdt-dot {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent-amber);
  border: 2px solid var(--bg-darkest);
  display: none;
}
#shared-dice-toggle.has-new .sdt-dot { display: block; }

/* ---- Viewport-size fallbacks ------------------------------
   Tuck-in-margin mode only works when the viewport is wide
   enough to have empty space on the left of the centered
   container. The Abyssal Engine container is ~1500px wide in
   practice, so below ~1820px there's no room to the left of it
   without overlapping the bestiary. Swap to a traditional
   left-side slide-in overlay in that range. ------------------ */
@media (max-width: 1819px) {
  #shared-dice-panel {
    left: 0;
    top: 0;
    bottom: auto;
    width: 320px;
    max-width: 88vw;
    height: 100vh;
    border-radius: 0;
    border: none;
    border-right: 1px solid var(--accent-crimson);
    transform: translateX(-100%);
    transition: transform 0.3s ease, visibility 0s linear 0.3s;
  }
  #shared-dice-panel.open {
    transform: translateX(0);
    transition: transform 0.3s ease, visibility 0s linear 0s;
  }
}

/* ---- Small / mobile viewports ------------------------------
   Same overlay layout but with a relative width so it doesn't
   eat the whole screen. Toggle button nudged inward slightly. */
@media (max-width: 900px) {
  #shared-dice-panel {
    width: 88vw;
  }
  #shared-dice-toggle {
    left: 14px;
    bottom: 14px;
    width: 46px;
    height: 46px;
    font-size: 1.15em;
  }
}

/* Past Tracker modal: shared rolls section
   (rendered by combat_invite.js's openPastTracker) */
.past-tracker-shared-log {
  max-height: 240px;
  overflow-y: auto;
  border: 1px solid var(--border-thin);
  border-radius: var(--radius-sm);
  background: var(--bg-darkest);
  margin-bottom: 0.75em;
}
.past-tracker-shared-entry {
  padding: 0.4em 0.6em;
  border-bottom: 1px solid var(--border-thin);
  font-size: 0.82em;
  display: flex;
  gap: 0.5em;
  align-items: baseline;
  flex-wrap: wrap;
}
.past-tracker-shared-entry:last-child { border-bottom: none; }
.pts-char {
  font-weight: 700;
  color: var(--accent-crimson);
  flex-shrink: 0;
}
.pts-label {
  color: var(--text-primary);
  flex: 1;
  min-width: 120px;
}
.pts-result {
  font-family: var(--font-code);
  color: var(--accent-cyan);
  font-weight: 700;
  flex-shrink: 0;
}
.pts-ts {
  font-family: var(--font-code);
  font-size: 0.85em;
  color: var(--text-faint);
  flex-shrink: 0;
}