/* =========================================================
   NoBoundsGM — GAME UI STYLES
   Scope: In-game sessions only
========================================================= */

/* =========================================================
   GAME ROOT
========================================================= */

body.game-ui {
    font-family: 'Caudex', serif;
    color: #2b1d14;
    line-height: 1.6;

    background-image: url('../assets/bg/parchment-bg.png');
    background-repeat: repeat;
    background-size: auto;
}

/* =========================================================
   COMPACT GAME HEADER (GRID: LEFT CONTEXT / RIGHT WORLD)
========================================================= */

.game-header {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.75rem 1rem;
    align-items: start;
    min-height: 3.2rem;   /* prevents collapse */
    opacity: 1;
    padding-bottom: 0.5rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid rgba(0,0,0,0.15);
}

.game-header:not(.loaded) {
  opacity: 0.35;
}

/* LEFT STACK */
.game-subtitle {
    grid-column: 1;
    font-size: 1.5rem;
    font-weight: 600;
}

.game-session {
    grid-column: 1;
    font-size: 1.25rem;
}

/* RIGHT: WORLD NAME */
.game-title {
    grid-column: 2;
    grid-row: 1 / span 2;
    font-family: 'Uncial Antiqua', serif;
    font-size: 1.4rem;
    text-align: right;
    white-space: nowrap;
    color: #3b2617;
}

/* =========================================================
   CHAT WINDOW
========================================================= */

/* .game-ui #chat {
    height: 60vh;
    overflow-y: auto;
    padding: 1rem;
    background: #f7f7f7;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
} */

/* ===========================
   CHAT LOG — FLEX HEIGHT
=========================== */
.game-ui #chat {
  flex: 1 1 auto;
  overflow-y: auto;

  padding: 1rem;
  background: #f7f7f7;
  border-radius: 0.5rem;

  /* REMOVE fixed height */
  height: auto;
  min-height: 30vh;
}


.game-ui .msg {
    margin-bottom: 0.75rem;
}

.game-ui .msg .role {
    font-weight: bold;
    margin-right: 0.4rem;
}

/* =========================================================
   MIC BUTTON
========================================================= */

.mic-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    font-size: 20px;
    cursor: pointer;
    border: 1px solid #ccc;
    border-right: none;
    background: #ffffff;
    transition: background 0.2s, color 0.2s;
}

.mic-btn:hover {
    background: #f0f0f0;
}

.mic-recording {
    background: #ffdddd !important;
    color: #cc0000 !important;
    border-color: #cc0000 !important;
    animation: pulse 1.2s infinite;
}

@keyframes pulse {
    0%   { box-shadow: 0 0 0 0 rgba(204,0,0,0.4); }
    70%  { box-shadow: 0 0 0 6px rgba(204,0,0,0); }
    100% { box-shadow: 0 0 0 0 rgba(204,0,0,0); }
}

/* =========================================================
   THINKING / SHIMMER
========================================================= */

.thinking {
    opacity: 0;
    font-style: italic;
    margin-top: 8px;
    transition: opacity 0.4s ease;
    position: relative;
    display: inline-block;
    color: #2b1d14;
    letter-spacing: 0.5px;
    animation: shimmerGlow 2s ease-in-out infinite;
}

@keyframes shimmerGlow {
    0%   { text-shadow: 0 0 2px rgba(255,255,255,0.2); }
    50%  { text-shadow: 0 0 6px rgba(255,255,255,0.7); }
    100% { text-shadow: 0 0 2px rgba(255,255,255,0.2); }
}

.thinking.loading-dots::after {
    content: "...";
    animation: dots 1.2s steps(4, end) infinite;
}

@keyframes dots {
    0%   { content: ""; }
    25%  { content: "."; }
    50%  { content: ".."; }
    75%  { content: "..."; }
    100% { content: ""; }
}

/* =========================================================
   REPORT ICON
========================================================= */

.report-icon {
    color: #b65f5f;
    float: right;
    cursor: pointer;
    font-size: 18px;
    margin-left: 8px;
    font-weight: bold;
    opacity: 0.85;
    transition: color 0.2s, opacity 0.2s;
}

.report-icon:hover {
    color: #8a3d3d;
    opacity: 1;
}

/* =========================================================
   ISSUE MODAL
========================================================= */

#issueModal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 5000;
}

#issueModal .popup {
    background: white;
    width: 400px;
    margin: 120px auto;
    padding: 20px;
    border-radius: 8px;
}

#issueText {
    width: 100%;
    height: 80px;
    resize: none;
}

.popup-buttons {
    text-align: right;
    margin-top: 10px;
}

.popup-buttons button {
    padding: 6px 12px;
}

/* ===========================
   MOBILE: GAME CONTROLS FIX
=========================== */
@media (max-width: 576px) {

  /* Allow wrapping */
  .game-ui .d-flex.align-items-center.gap-3 {
    flex-wrap: wrap;
    align-items: stretch;
  }

  /* Make selects full-width */
  .game-ui select.form-select {
    width: 100% !important;
  }

  /* Voice toggle spacing */
  .game-ui .form-check {
    width: 100%;
  }

  /* Input group spacing */
  .game-ui .input-group {
    margin-top: 0.5rem;
  }
}

/* ===========================
   THINKING INDICATOR — ALWAYS VISIBLE
=========================== */
#thinking {
  flex: 0 0 auto;
  margin: 0.4rem 0;
}

/* ===========================
   GAME LAYOUT ROOT
=========================== */
.game-layout {
  display: flex;
  flex-direction: column;
  height: calc(100dvh - 56px); /* navbar height */
  padding: 0.5rem 0.75rem;
  overflow: hidden;
}


/* Header never grows */
.game-header {
  flex: 0 0 auto;
}

/* Thinking never scrolls away */
#thinking {
  flex: 0 0 auto;
  margin: 0.25rem 0;
}

/* CHAT TAKES ALL REMAINING SPACE */
#chat {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 1rem;
  background: #f7f7f7;
  border-radius: 0.5rem;
}

/* Input bar is pinned at bottom */
#game-form {
  flex: 0 0 auto;
  margin-top: 0.5rem;
  padding-bottom: env(safe-area-inset-bottom);
}


/* =========================================================
   FUTURE COMBAT / HUD HOOKS
========================================================= */

.combat-panel {}
.hud-bar {}
.status-effect {}