/* CSS Cog: dice.css */
/* ================================================================
   DICE ROLLER 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.1.0
   Changes:
     v1.1.0 - Chat-log stacking. .dice-history is now a flex
              column and its first direct child gets
              margin-top:auto, which pushes all entries toward
              the bottom of the panel (right above the dice
              tray) when the list is short. When the list
              grows and overflows, the browser falls back to
              normal top-down scrolling with auto-scroll to
              bottom driven by roller.js. Fixes the issue
              where a single roll entry sat pinned to the top
              with a huge empty gap below it.
     v1.0.0 - Original.
   ================================================================ */
#dice-panel{position:fixed;right:0;top:0;width:340px;height:100vh;background:var(--bg-darkest);border-left:2px solid var(--border-thin);display:flex;flex-direction:column;z-index:11000;transform:translateX(100%);transition:transform 0.3s ease;box-shadow:-4px 0 20px rgba(0,0,0,0.5);}
#dice-panel.open{transform:translateX(0);}
.dice-header{padding:1em;border-bottom:1px solid var(--border-thin);display:flex;align-items:center;gap:0.5em;}
.dice-header h3{margin:0;font-size:1em;}
.dice-close{cursor:pointer;color:var(--accent-cyan);font-size:1.2em;opacity:0.7;transition:all 0.15s;}.dice-close:hover{color:var(--text-primary);opacity:1;}
.dice-clear{cursor:pointer;color:var(--accent-amber);font-size:0.9em;margin-left:auto;margin-right:0.5em;opacity:0.7;transition:all 0.15s;}.dice-clear:hover{color:var(--accent-red);opacity:1;}
/* Chat-log stacking: a flex column that lets its first child
   claim the free space via margin-top:auto. Short lists stack
   at the bottom (right above the dice tray), long lists
   scroll naturally. */
.dice-history{flex:1;overflow-y:auto;padding:0.75em;display:flex;flex-direction:column;}
.dice-history > *:first-child{margin-top:auto;}
.dice-entry{background:var(--bg-dark);border:1px solid var(--border-thin);border-radius:var(--radius-sm);padding:0.6em 0.8em;margin-bottom:0.5em;font-size:1em;}
.dice-entry .roll-result{font-family:var(--font-code);font-size:1.3em;color:var(--accent-cyan);font-weight:700;}
.dice-entry .roll-detail{color:var(--text-primary);font-size:0.85em;margin-top:0.2em;}
.dice-entry .roll-header{display:flex;justify-content:space-between;color:var(--accent-blue);font-size:0.8em;margin-bottom:0.3em;}
.dice-entry .roll-label{color:var(--text-primary);font-size:0.85em;}
.dice-entry .roll-crit{color:var(--accent-green);font-weight:700;}.dice-entry .roll-fumble{color:var(--accent-red);font-weight:700;}
.dice-tray{padding:0.75em;border-top:1px solid var(--border-thin);display:flex;flex-wrap:wrap;gap:0.5em;justify-content:center;}
.dice-btn{width:56px;height:56px;border-radius:var(--radius-md);background:var(--bg-light);border:1px solid var(--border-thin);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:4px;transition:all 0.15s;}
.dice-btn:hover{background:var(--bg-lighter);border-color:var(--accent-amber);transform:scale(1.1);box-shadow:0 0 12px rgba(240,178,50,0.3);}
.dice-btn:active{transform:scale(0.95);}.dice-btn img{width:100%;height:100%;object-fit:contain;}
#dice-toggle{position:fixed;right:20px;bottom:20px;width:52px;height:52px;border-radius:50%;background:var(--accent-blue);color:#fff;border:none;font-size:1.3em;cursor:pointer;box-shadow:var(--shadow-high);z-index:11000;transition:all 0.2s;display:flex;align-items:center;justify-content:center;}
#dice-toggle:hover{background:var(--accent-blue-hover);transform:scale(1.1);}


/* Heal button in dice history */
.spell-heal-btn{display:inline-flex;align-items:center;gap:0.3em;padding:0.3em 0.7em;margin-top:0.4em;border-radius:var(--radius-sm);background:rgba(87,242,135,0.15);border:1px solid rgba(87,242,135,0.35);color:var(--accent-green);font-family:var(--font-display);font-size:0.7em;font-weight:700;letter-spacing:0.06em;cursor:pointer;transition:all 0.15s;}
.spell-heal-btn:hover{background:rgba(87,242,135,0.3);color:#8fff9f;}
.spell-dmg-btn{display:inline-flex;align-items:center;gap:0.3em;padding:0.3em 0.7em;margin-top:0.4em;border-radius:var(--radius-sm);background:rgba(237,66,69,0.15);border:1px solid rgba(237,66,69,0.35);color:var(--accent-red);font-family:var(--font-display);font-size:0.7em;font-weight:700;letter-spacing:0.06em;cursor:pointer;transition:all 0.15s;}
.spell-dmg-btn:hover{background:rgba(237,66,69,0.3);color:#ff8a8a;}
.dice-entry-dmg{border-left:3px solid var(--accent-red);}
.btn-undo{background:none;border:1px solid rgba(240,178,50,0.4);color:var(--accent-amber);font-size:0.55em;padding:0.15em 0.4em;border-radius:3px;cursor:pointer;font-weight:700;font-family:var(--font-display);letter-spacing:0.04em;transition:all 0.15s;}.btn-undo:hover{background:rgba(240,178,50,0.15);border-color:var(--accent-amber);}

/* Dice entry with heal available gets a subtle green left border */
.dice-entry-heal{border-left:3px solid rgba(87,242,135,0.4);}