/* ============================================================
   Tooltip System - MOK Interjection with Scrollable History
   ============================================================ */

/* MOK History Toggle — header-chip style matching AWOL button */
.mok-history-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid transparent;
  background: transparent;
  font-family: var(--theme-font-data, "Courier New", Consolas, monospace);
  font-size: 0.78em;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--theme-primary, var(--phosphor, #33ff33));
  text-decoration: none;
  position: relative;
  z-index: 9002;
}

.mok-history-icon {
  font-size: 0.85em;
  line-height: 1;
  transition: transform 0.2s ease;
}

.mok-history-label {
  font-size: 0.7em;
  letter-spacing: 0.08em;
}

.mok-history-toggle:hover {
  background: rgba(51, 255, 51, 0.1);
  border-color: var(--panel-border);
  color: #fff;
}

.mok-history-toggle:active {
  background: rgba(51, 255, 51, 0.2);
  transform: scale(0.98);
}

/* ============================================================
   MOK History Container — expands UPWARD from the footer
   Overlays the game screen with high z-index
   ============================================================ */
.mok-history-container {
  position: absolute;
  bottom: 100%;             /* anchor to top edge of footer */
  left: 0;
  right: 0;
  z-index: 9001;            /* above terminal / game canvas */
  background: linear-gradient(
    to top,
    rgba(6, 10, 8, 0.97) 0%,
    rgba(6, 10, 8, 0.92) 40%,
    rgba(6, 10, 8, 0.80) 100%
  );
  border: 1px solid var(--theme-panel-border);
  border-bottom: none;       /* seamless with footer */
  border-radius: 4px 4px 0 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease, opacity 0.3s ease;
  opacity: 0;
  pointer-events: none;
}

.mok-history-container.mok-history-expanded {
  max-height: 70vh;          /* covers most of the viewport */
  padding: 4px 6px;
  opacity: 1;
  pointer-events: auto;
}

.mok-history-container.mok-history-collapsed {
  max-height: 0;
  padding: 0;
  opacity: 0;
  pointer-events: none;
}

/* ============================================================
   MOK History Content — scrollable area
   Font: Consolas (console neue feel), tight line-height
   ============================================================ */
.mok-history-content {
  max-height: calc(70vh - 12px);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 2px 4px;
  font-family: var(--theme-font-data, 'Consolas', 'Courier New', monospace);
  font-size: 11px;
  line-height: 1.2;
}

/* Custom scrollbar */
.mok-history-content::-webkit-scrollbar {
  width: 6px;
}

.mok-history-content::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}

.mok-history-content::-webkit-scrollbar-thumb {
  background: var(--theme-panel-border);
  border-radius: 3px;
}

.mok-history-content::-webkit-scrollbar-thumb:hover {
  background: var(--theme-panel-border);
}

/* Firefox scrollbar */
.mok-history-content {
  scrollbar-width: thin;
  scrollbar-color: var(--theme-panel-border) rgba(0, 0, 0, 0.2);
}

/* ============================================================
   History Entry — tight rows, minimal padding
   Progressive opacity & compaction set via inline styles in JS
   ============================================================ */
.mok-history-entry {
  padding: 1px 0;
  border-bottom: 1px solid var(--theme-primary-glow);
  color: #ccc;
  word-wrap: break-word;
  font-family: var(--theme-font-data, 'Consolas', 'Courier New', monospace);
  font-size: 11px;
  line-height: 1.25;
}

.mok-history-entry:last-child {
  border-bottom: none;
}

.mok-history-entry:hover {
  background: var(--theme-primary-glow);
}

/* History Timestamp */
.mok-history-time {
  color: #555;
  font-size: 10px;
  margin-right: 4px;
  font-family: var(--theme-font-data, 'Consolas', 'Courier New', monospace);
  display: inline-block;
  min-width: 0;
}
/* Desktop: show brackets around timestamp */
@media (min-width: 601px) {
  .mok-history-time::before {
    content: '[';
  }
  .mok-history-time::after {
    content: ']';
  }
}

/* History Message */
.mok-history-message {
  color: var(--theme-primary);
  font-family: var(--theme-font-data, 'Consolas', 'Courier New', monospace);
}

/* Empty History State */
.mok-history-empty {
  color: #555;
  text-align: center;
  padding: 10px;
  font-style: italic;
  font-family: var(--theme-font-data, 'Consolas', 'Courier New', monospace);
}

/* ============================================================
   Footer font override — all MOK footer text uses Consolas
   EXCEPT the "MOK INTERJECTION" label which keeps its style
   ============================================================ */
#mok-interjections .interject-body {
  font-family: var(--theme-font-data, 'Consolas', 'Courier New', monospace);
  font-size: 0.85em;
}

/* Reduce gap between label and body */
#mok-interjections .interject-label {
  margin-bottom: 1px;
}

/* ============================================================
   Responsive Design
   ============================================================ */

@media (max-width: 768px) {
  .mok-history-container.mok-history-expanded {
    max-height: 60vh;
  }

  .mok-history-content {
    max-height: calc(60vh - 10px);
    font-size: 10px;
  }

  .mok-history-toggle {
    font-size: 9px;
    padding: 2px 6px;
  }
}

@media (max-width: 480px) {
  .mok-history-container.mok-history-expanded {
    max-height: 50vh;
  }

  .mok-history-content {
    max-height: calc(50vh - 8px);
    font-size: 9px;
  }

  .mok-history-toggle {
    font-size: 8px;
    padding: 1px 5px;
  }

  .mok-history-entry {
    padding: 1px 0;
  }

  .mok-history-time {
    font-size: 8px;
  }
}

/* Portrait: compact but still overlays upward */
@media (max-width: 600px) and (orientation: portrait) {
  .mok-history-container.mok-history-expanded {
    max-height: 45vh;
    padding: 2px;
  }
  .mok-history-content {
    max-height: calc(45vh - 6px);
    font-size: 9px;
    line-height: 1.15;
  }
  /* Condensed timestamp: no brackets, minimal spacing */
  .mok-history-time {
    font-size: 7px;
    margin-right: 1px;
    color: #666;
    white-space: nowrap;
    min-width: 28px;
    max-width: 32px;
    overflow: hidden;
    text-overflow: clip;
  }
  .mok-history-time::before,
  .mok-history-time::after {
    content: '';
  }
}

/* ============================================================
   Accessibility
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .mok-history-container,
  .mok-history-toggle {
    transition: none !important;
  }
}

@media (prefers-contrast: high) {
  .mok-history-container {
    border-width: 2px;
  }

  .mok-history-toggle {
    border-width: 2px;
  }

  .mok-history-entry {
    border-bottom-width: 2px;
  }
}

/* ============================================================
   NPC Dialogue — In-field clickable conversation UI
   Renders inside #mok-interject-body using innerHTML
   ============================================================ */

/* Speaker name/emoji tag */
.dialogue-speaker {
  color: #ffcc00;
  font-weight: bold;
  font-family: var(--theme-font-data, 'Consolas', 'Courier New', monospace);
  font-size: inherit;
  white-space: nowrap;
}

/* NPC speech text */
.dialogue-text {
  color: #e0e0e0;
  font-family: var(--theme-font-data, 'Consolas', 'Courier New', monospace);
  font-size: inherit;
}

/* Choice container */
.dialogue-choices {
  display: inline;
  margin-left: 4px;
}

/* Individual clickable choice */
.dialogue-choice {
  color: var(--theme-primary);
  text-decoration: underline;
  cursor: pointer;
  padding: 0 3px;
  font-family: var(--theme-font-data, 'Consolas', 'Courier New', monospace);
  font-size: inherit;
  transition: color 0.15s, background 0.15s;
  white-space: nowrap;
}

.dialogue-choice:hover {
  color: var(--theme-primary-bright);
  background: var(--theme-primary-glow);
  border-radius: 2px;
}

.dialogue-choice:active {
  color: #ffffff;
  background: var(--theme-panel-border);
}

/* Already-visited topic — dimmer color */
.dialogue-choice-visited {
  color: var(--theme-primary-dim);
  text-decoration: underline dotted;
}

.dialogue-choice-visited:hover {
  color: var(--theme-primary);
}

/* ── Dialogue in History Panel ── */
.mok-history-entry .dialogue-speaker {
  color: #ffcc00;
}

.mok-history-entry .dialogue-choice {
  color: var(--theme-primary);
  cursor: default;        /* not clickable in history */
  text-decoration: none;
  pointer-events: none;
}

/* ── Mobile: larger tap targets for dialogue choices ── */
@media (max-width: 600px) and (orientation: portrait) {
  .dialogue-choice {
    display: inline-block;
    padding: 3px 6px;
    margin: 1px 2px;
    min-height: 24px;    /* touch-friendly tap target */
    line-height: 24px;
    font-size: 10px;
  }

  .dialogue-choices {
    display: block;
    margin-left: 0;
    margin-top: 2px;
  }

  .dialogue-speaker {
    font-size: 9px;
  }

  .dialogue-text {
    font-size: 9px;
  }
}

/* Tablet: slightly larger choices */
@media (min-width: 601px) and (max-width: 768px) {
  .dialogue-choice {
    padding: 1px 4px;
    min-height: 20px;
    line-height: 20px;
  }
}

/* ============================================================
   Tooltip Thumb System - Frameless Emoji Popups
   ============================================================ */

.tooltip-thumb {
  position: absolute;
  pointer-events: none;
  z-index: 1000;
  font-family: var(--theme-font-data, 'Courier New', monospace);
  text-align: center;
  white-space: nowrap;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8));
}

.tooltip-thumb-content {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: rgba(10, 10, 10, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  padding: 6px 12px;
  min-height: 24px;
}

.tooltip-emoji {
  font-size: 20px;
  line-height: 1;
  display: inline-block;
}

.tooltip-glyph {
  font-size: 16px;
  font-weight: bold;
  line-height: 1;
  display: inline-block;
  font-family: var(--theme-font-data, 'Courier New', monospace);
}

.tooltip-text {
  font-size: 12px;
  color: #ffffff;
  line-height: 1.2;
  max-width: 200px;
  word-wrap: break-word;
  white-space: normal;
}

/* Tooltip Types */
.tooltip-thought .tooltip-thumb-content {
  background: rgba(100, 150, 255, 0.15);
  border-color: rgba(150, 180, 255, 0.4);
}

.tooltip-alert .tooltip-thumb-content {
  background: rgba(255, 50, 50, 0.2);
  border-color: rgba(255, 100, 100, 0.6);
  border-width: 2px;
}

.tooltip-status_glyph .tooltip-thumb-content {
  background: rgba(10, 10, 10, 0.95);
  border-color: rgba(255, 255, 255, 0.3);
  padding: 4px 10px;
}

.tooltip-food .tooltip-thumb-content {
  background: rgba(50, 200, 50, 0.15);
  border-color: rgba(100, 255, 100, 0.4);
}

/* ============================================================
   Tooltip Animations
   ============================================================ */

@keyframes tooltip-shake {
  0%, 100% { transform: translate(-50%, -100%) translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translate(-50%, -100%) translateX(-3px); }
  20%, 40%, 60%, 80% { transform: translate(-50%, -100%) translateX(3px); }
}

.tooltip-shake {
  animation: tooltip-shake 0.5s ease-in-out;
}

@keyframes tooltip-pulse {
  0%, 100% { transform: translate(-50%, -100%) scale(1); }
  50% { transform: translate(-50%, -100%) scale(1.1); }
}

.tooltip-pulse {
  animation: tooltip-pulse 1s ease-in-out infinite;
}

@keyframes tooltip-flash {
  0%, 50%, 100% { opacity: 1; }
  25%, 75% { opacity: 0.3; }
}

.tooltip-flash {
  animation: tooltip-flash 0.8s ease-in-out infinite;
}

@keyframes tooltip-bounce {
  0%, 100% { transform: translate(-50%, -100%) translateY(0); }
  50% { transform: translate(-50%, -100%) translateY(-8px); }
}

.tooltip-bounce {
  animation: tooltip-bounce 0.6s ease-in-out;
}

@keyframes tooltip-float-in {
  from {
    transform: translate(-50%, -100%) translateY(10px);
    opacity: 0;
  }
  to {
    transform: translate(-50%, -100%) translateY(0);
    opacity: 1;
  }
}

.tooltip-thumb {
  animation: tooltip-float-in 0.15s ease-out;
}

/* ============================================================
   Responsive Design for Tooltip Thumb
   ============================================================ */

@media (max-width: 768px) {
  .tooltip-emoji {
    font-size: 18px;
  }

  .tooltip-glyph {
    font-size: 14px;
  }

  .tooltip-text {
    font-size: 11px;
    max-width: 150px;
  }

  .tooltip-thumb-content {
    padding: 5px 10px;
    gap: 5px;
  }
}

@media (max-width: 480px) {
  .tooltip-emoji {
    font-size: 16px;
  }

  .tooltip-glyph {
    font-size: 12px;
  }

  .tooltip-text {
    font-size: 10px;
    max-width: 120px;
  }

  .tooltip-thumb-content {
    padding: 4px 8px;
    gap: 4px;
  }
}

/* ============================================================
   Accessibility for Tooltip Thumb
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .tooltip-shake,
  .tooltip-pulse,
  .tooltip-flash,
  .tooltip-bounce,
  .tooltip-thumb {
    animation: none !important;
  }

  .tooltip-thumb {
    transition: opacity 0.15s ease-in !important;
  }
}

@media (prefers-contrast: high) {
  .tooltip-thumb-content {
    border-width: 2px;
    background: rgba(0, 0, 0, 1);
  }

  .tooltip-text {
    color: #ffffff;
    text-shadow: 0 0 2px #000000;
  }
}