/* =========================================================
   RogueScroll Stylesheet (Indexed & Organized)
   ---------------------------------------------------------
   TABLE OF CONTENTS
   0. Critical load first
   1. Global Layout
   2. Title Bar & Toolbar (Buttons, Branding, Menu)
   3. Panels (Settings, About)
   4. Terminal Layout (Columns, Titles, Content)
   5. Message Blocks (Cards, Images, Ads)
   6. Countdown Graphic (Message Timer)
   7. Pause Animation (Per-Terminal)
   8. Scrolling Styles (Looping, Keyframes)
   9. CLI & Config Editor
   10. Global Controls & Metrics (Pause, FPS, Epoch)
   11. Matrix Mode (Monochrome Green)
   12. Fonts & Toolbar Sizing
   13. Responsive / Small Form Factor
   14. Utilities (Hide Images, No-wrap)
   15. Loading Overlay & Spinner
   16. Code Mode (JSON blocks)
   17. ANSI Topbar (Per-terminal)
   18. Special functions (misc) like hide images
   
   ========================================================= */

/* =========================================================
   0. Critical load first
   ========================================================= */

/* Critical toast styles for instant paint */
/* === Centered overlay for instant paint === */
.rs-toast-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.45);           /* backdrop */
  backdrop-filter: blur(2px);             /* subtle blur */
  -webkit-backdrop-filter: blur(2px);
  z-index: 100000;
  opacity: 1;
}

/* Card */
.rs-toast {
  max-width: 640px;
  width: min(92vw, 640px);
  background: #0f0f10;
  color: #e6e6e6;
  border: 1px solid rgba(120,160,255,.35);
  border-radius: 14px;
  padding: 18px 20px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  box-shadow:
    0 18px 42px rgba(0,0,0,.55),
    0 0 0 1px rgba(120,160,255,.15) inset,
    0 0 24px rgba(80,140,255,.25);        /* soft blue glow */
}

/* Typography */
.rs-toast-title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .3px;
  color: #aecdff;
  margin-bottom: 8px;
}
.rs-toast-line1 {
  font-size: 15px;
  margin-bottom: 12px;
}
.rs-toast-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
.rs-toast-link {
  color: #7bd;
  text-decoration: underline;
  cursor: pointer;
  font-weight: 600;
}
.rs-toast-link:hover { text-decoration: none; }

/* Close button */
.rs-toast-close {
  margin-left: auto;
  background: #1c1f28;
  color: #d7d7d7;
  border: 1px solid #314165;
  border-radius: 10px;
  padding: 4px 10px;
  cursor: pointer;
}
.rs-toast-close:hover { background: #23293a; }

/* Auto-hide entire overlay after 3s */
.rs-toast-autorun { animation: rs-toast-hide .28s ease 3s forwards; }
@keyframes rs-toast-hide {
  to { opacity: 0; visibility: hidden; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .rs-toast-autorun { animation-duration: 0s; }
}


/* =========================================================
   1. GLOBAL LAYOUT
   ========================================================= */

/* --- GLOBAL LAYOUT --- */
body {
  margin: 0;
  padding: 0;
  background-color: #111;
  color: #ccc;
  font-family: monospace;
  overflow: hidden;
  height: 100vh;
  display: flex;
  flex-direction: column;
}


/* =========================================================
   2. TITLE BAR & TOOLBAR (Buttons, Branding, Menu)
   ========================================================= */

#main_title_bar {
  background-color: #222;
  color: white;
  padding: 10px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: monospace;
  font-size: 18px;
  border-bottom: 1px solid #333;
}

#top_controls {
  display: flex;
  align-items: center;
  gap: 12px;
}

#settings_gear {
  font-size: 31px;
  cursor: pointer;
  color: #fff;  /* ← White by default */
}
#settings_gear:hover {
  color: #aaa;  /* ← Light gray on hover */
}

.settings-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.settings-close {
  cursor: pointer;
  font-size: 18px;
  color: #666;
}
.settings-close:hover {
  color: #000;
}

#menu {
  color: #fff;
  cursor: pointer;
}
#menu:hover {
  color: #aaa;
}

#app_title {
  color: white;
  font-weight: bold;
  font-size: 24px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Toolbar buttons (consolidated) */
.toolbar-button {
  background-color: #222;
  color: white;
  border: 1px solid #444;
  font-family: monospace;
  font-size: 12px;
  padding: 4px 10px;
  cursor: pointer;
  border-radius: 4px;
  min-width: 80px;       /* from later block */
  text-align: center;    /* from later block */
}
.toolbar-button,
.toolbar-button:link,
.toolbar-button:visited,
.toolbar-button:hover,
.toolbar-button:active,
.toolbar-button:focus {
  color: white !important;
  text-decoration: none !important;
}
.toolbar-button:hover {
  background-color: #333;
}

.divider-bar {
  width: 1px;
  height: 32px;
  background-color: #444;
  margin: 0 8px;
}

/* Branding group used across form factors */
#branding_group {
  display: flex;
  align-items: center;
  gap: 6px;
}


/* =========================================================
   3. PANELS (Settings, About)
   ========================================================= */

/* Light Theme: settings_panel */
#settings_panel {
  position: fixed;
  z-index: 1000;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #f9f9f9;
  color: #222;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 12px rgba(0,0,0,0.2);
  max-height: 90vh;
  overflow-y: auto;
}

#settings_panel h3 {
  color: #222;
  font-size: 18px;
  margin-bottom: 16px;
}

#settings_panel select,
#settings_panel input[type="number"],
#settings_panel input[type="text"] {
  background-color: #fff;
  color: #222;
  border: 1px solid #ccc;
  padding: 6px;
  margin: 6px 0 12px;
  width: 100%;
  box-sizing: border-box;
  border-radius: 4px;
}

#settings_panel fieldset {
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 12px;
  margin-bottom: 20px;
  background-color: #ffffff;
}

#settings_panel legend {
  font-weight: bold;
  color: #0077cc;
  margin-bottom: 8px;
  font-size: 16px;
}

#settings_panel label {
  display: block;
  margin-bottom: 6px;
  font-weight: 500;
  color: #333;
}

#settings_panel .checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

#settings_panel .checkbox-group label {
  display: flex;
  align-items: center;
  gap: 4px;
  background: #f0f0f0;
  padding: 4px 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
  color: #000;
}

#settings_panel input[type="checkbox"] {
  accent-color: #0077cc;
}

#settings_console {
  resize: vertical;
  min-height: 80px;
  max-height: 200px;
}

/* Light Theme: about_panel */
#about_panel {
  position: fixed;
  z-index: 1000;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #ffffff;
  color: #222;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 12px rgba(0,0,0,0.2);
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
}

#about_panel h1 {
  font-size: 22px;
  color: #0077cc;
  margin-bottom: 12px;
}

#about_panel h2 {
  font-size: 18px;
  color: #005999;
  margin-top: 20px;
}

#about_panel ul {
  padding-left: 20px;
  margin-top: 10px;
}

#about_panel li {
  margin-bottom: 8px;
}

#about_panel a {
  color: #0077cc;
  text-decoration: underline;
}


/* =========================================================
   4. TERMINAL LAYOUT (Columns, Titles, Content)
   ========================================================= */

/* === Terminal Layout by Column Count === */
/* Handles 1–6 columns cleanly with centering and even spacing */
/* Multi-row wrap is DISABLED for 4 and 5 columns — see comments to re-enable */

#terminal_wrapper {
  display: grid;
  gap: 5px;
  padding: 5px;
  width: 100%;
  justify-content: center;
  align-content: start;
  /* flex: 1; REMOVE THIS LINE */
  overflow-y: auto;
  overflow-x: hidden;
}

.terminal {
  display: flex;
  flex-direction: column;
  /* flex: 1 1 0; */
  min-height: 0;  /* <-- IMPORTANT! Prevents overflow collapse */
  min-width: 0;
}

/* Let 1–2 columns be narrow and centered */
#terminal_wrapper.columns-1 {
  grid-template-columns: repeat(1, minmax(260px, 320px));
  max-width: 340px;
  margin: 0 auto;
}

#terminal_wrapper.columns-2 {
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  max-width: 680px;
  margin: 0 auto;
}

/* Allow full screen use for 3+ columns */
#terminal_wrapper.columns-3 {
  grid-template-columns: repeat(3, minmax(260px, 1fr));
  max-width: none;       /* ← allow full width */
  width: 100%;
}

#terminal_wrapper.columns-4 {
  grid-template-columns: repeat(4, minmax(240px, 1fr));
  max-width: none;
  width: 100%;
}

#terminal_wrapper.columns-5 {
  grid-template-columns: repeat(5, minmax(220px, 1fr));
  max-width: none;
  width: 100%;
}

#terminal_wrapper.columns-6 {
  grid-template-columns: repeat(6, minmax(200px, 1fr));
  max-width: none;
  width: 100%;
}

#terminal_wrapper.columns-7 {
  grid-template-columns: repeat(7, minmax(180px, 1fr));
  max-width: none;
  width: 100%;
}

.terminal_title {
  background-color: #222;
  color: gray;
  padding: 4px 6px;
  font-weight: bold;
  font-size: 14px;
  border-bottom: 1px solid #333;
  text-align: left;
}

.terminal_text {
  flex: 1;
  overflow: hidden;
  padding: 6px;
  display: flex;
  flex-direction: column-reverse;
  gap: 8px;
  scroll-behavior: smooth;
  font-size: 13px;
  white-space: pre-wrap;
}

.terminal_text.scrollback_mode {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  white-space: normal;
  padding: 6px;
  display: block;
  min-height: 0;
}


/* =========================================================
   5. MESSAGE BLOCKS (Cards, Images, Ads)
   ========================================================= */

/* Anchor wrapper for full-block clickable area */
.message_link {
  text-decoration: none;   /* remove underline */
  color: inherit;          /* inherit text color */
  display: block;          /* makes entire block clickable */
}

/* --- MESSAGE BLOCKS --- */
.message_block {
  border: 1px dashed #333;
  padding: 6px;
  cursor: pointer;
  min-height: 40px;      /* lower minimum to prevent collapse */
  max-height: none;      /* remove upper constraint if any */
  white-space: normal;       /* allows text wrap */
  overflow-wrap: break-word; /* prevents long strings from overflowing */
  display: block;
  width: 100%;
  box-sizing: border-box;
  transition: background-color 0.2s, border 0.2s;
}

/* hover applies when link is hovered */
.message_link:hover .message_block {
  background-color: #222;
  border-color: #444;
}

/* --- MESSAGE IMAGE --- */
.message_image {
  display: block;
  width: 100%;
  height: auto;        /* let the image decide */
  max-width: 100%;     /* avoid overflow */
  object-fit: contain; /* or cover, depending on look you want */
}


/* hide images until all terminals are fully fetched, then fade them in --- see main.js */
body.images-hidden .message_image {
  visibility: hidden;
}

/* --- CATEGORY + TITLE --- */
.category {
  font-weight: bold;
  display: inline-block;
  margin-right: 5px;
  color: #ffa657;   /* pop color for category */
}

.title {
  color: #7ec8ff;   /* soft cyan for titles */
  font-weight: bold;
  margin-bottom: 3px;
}

.message {
  line-height: 1.4;
}

.html_ad_wrapper {
  padding: 8px;
  background: #111;
  border: 1px dashed #444;
  color: #ccc;
  font-family: monospace;
}



/* =========================================================
   6. COUNTDOWN GRAPHIC (Message Timer)
   ========================================================= */

/* --- COUNTDOWN GRAPHIC (MESSAGE TIMER) --- */
.countdown_block {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 2px;
}

.countdown_block.block-1,
.countdown_block.block-2 {
  background-color: #b0e0e6; /* PowderBlue */
}

.countdown_block.block-3,
.countdown_block.block-4 {
  background-color: #87ceeb; /* SkyBlue */
}

.countdown_block.block-5,
.countdown_block.block-6 {
  background-color: #1e90ff; /* DodgerBlue */
}

.countdown_block.block-7,
.countdown_block.block-8 {
  background-color: #0165fc; /* DeepSkyBlue 00bfff */
}

.countdown_block.block-9,
.countdown_block.block-10 {
  background-color: #00ffff; /* ElectricBlue (cyan approximation) */
}

.countdown_graphic {
  margin-top: 5px;
  font-size: 12px;
  line-height: 1;
}


/* =========================================================
   7. PAUSE ANIMATION (Per-Terminal)
   ========================================================= */

/* --- PAUSE ANIMATION (REPLACES TERMINAL LABEL) --- */
.pause_block {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  margin-right: 2px;
  opacity: 0.2;
  transform: scale(0.9);
  background-color: #333;
  transition: transform 0.3s ease, opacity 0.3s ease, background-color 0.3s ease;
}

.pause_block.active {
  opacity: 1;
  transform: scale(1.2);
}

.pause_block.block-1.active,
.pause_block.block-2.active {
  background-color: #00bfff; /* blue */
}

.pause_block.block-3.active,
.pause_block.block-4.active {
  background-color: #00ff00; /* green */
}

.pause_block.block-5.active,
.pause_block.block-6.active {
  background-color: #ffff00; /* yellow */
}

.pause_block.block-7.active,
.pause_block.block-8.active {
  background-color: #ff0000; /* red */
}

.pause-banner {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 6px 10px;
  background-color: #222;  /* ✅ Matches .terminal_title */
  font-size: 13px;
  border-bottom: 1px solid #333;
  gap: 4px;
  height: 24px;
}

/* =========================================================
   8. SCROLLING STYLES - FIXED FOR JAVASCRIPT SYSTEM
   ========================================================= */

/* --- SCROLLING STYLES --- */
.scroll-content {
  max-height: 100%;
  overflow: hidden;
  position: relative;
}

.scroll-wrapper {
  position: relative;
  overflow: hidden;  /* Default: hidden for auto-scroll */
  height: 100%;
}

/* Normal scroll container - NO CSS ANIMATION */
.scroll-inner {
  display: flex;
  flex-direction: column;
  /* NO CSS animation - handled by JavaScript */
}

.scroll-inner > * {
  flex-shrink: 0;
}

/* Reflow hinting for images inside scrollers */
.scroll-inner img {
  will-change: opacity, transform;
}

/* ---------------------------------------
   PAUSED STATE - ENABLE MANUAL SCROLLING
   --------------------------------------- */

/* CRITICAL: Enable scrolling when paused */
.scroll-wrapper.js-paused,
.scroll-wrapper.js-individually-paused,
body.js-globally-paused .scroll-wrapper {
  overflow-y: auto !important;    /* Enable manual scrolling */
  overflow-x: hidden;
  scroll-behavior: smooth;        /* Smooth manual scrolling */
  cursor: default;                /* Show normal cursor */
}

/* Make sure content is scrollable when paused */
.scroll-wrapper.js-paused .scroll-inner,
.scroll-wrapper.js-individually-paused .scroll-inner,
body.js-globally-paused .scroll-wrapper .scroll-inner {
  /* Content should be normally positioned for manual scroll */
  position: static;
}

/* Visual indication of pause state */
.scroll-wrapper.js-paused::before,
.scroll-wrapper.js-individually-paused::before,
body.js-globally-paused .scroll-wrapper::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(0, 255, 255, 0.5); /* cyan indicator for JS system */
  z-index: 1000;
  pointer-events: none;
}

/* Additional styles for better manual scrolling experience */
.scroll-wrapper.js-paused::-webkit-scrollbar,
.scroll-wrapper.js-individually-paused::-webkit-scrollbar,
body.js-globally-paused .scroll-wrapper::-webkit-scrollbar {
  width: 8px;
}

.scroll-wrapper.js-paused::-webkit-scrollbar-track,
.scroll-wrapper.js-individually-paused::-webkit-scrollbar-track,
body.js-globally-paused .scroll-wrapper::-webkit-scrollbar-track {
  background: #222;
}

.scroll-wrapper.js-paused::-webkit-scrollbar-thumb,
.scroll-wrapper.js-individually-paused::-webkit-scrollbar-thumb,
body.js-globally-paused .scroll-wrapper::-webkit-scrollbar-thumb {
  background: #555;
  border-radius: 4px;
}

.scroll-wrapper.js-paused::-webkit-scrollbar-thumb:hover,
.scroll-wrapper.js-individually-paused::-webkit-scrollbar-thumb:hover,
body.js-globally-paused .scroll-wrapper::-webkit-scrollbar-thumb:hover {
  background: #777;
}

/* =========================================================
   9. CLI & CONFIG EDITOR
   ========================================================= */

/* --- CLI / CONFIG EDITOR --- */
#cli_container {
  display: flex;
  align-items: center;
  background-color: #000;
  padding: 6px 10px;
  border-top: 1px solid #333;
}

.cli_prompt {
  color: white;
  margin-right: 6px;
}

#cli_input {
  flex: 1;
  background-color: #111;
  border: none;
  color: #0f0;
  font-family: monospace;
  font-size: 14px;
  padding: 4px 6px;
}

#cli_button {
  background-color: #222;
  color: white;
  border: 1px solid #444;
  font-family: monospace;
  padding: 4px 10px;
  margin-left: 6px;
  cursor: pointer;
}

#cli_button:hover {
  background-color: #333;
}

#config_editor {
  display: flex;
  flex-direction: column;
  height: 50vh;
  padding: 10px;
  background-color: #111;
  color: #0f0;
  font-family: monospace;
  border-top: 1px solid #333;
}

.editor_header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 6px;
  font-size: 14px;
  color: #0ff;
}

#editor_textarea {
  flex: 1;
  width: 100%;
  height: 100%;
  resize: none;
  padding: 12px;
  font-size: 14px;
  line-height: 1.4;
  background-color: #000;
  color: #0f0;
  border: 1px solid #444;
  font-family: monospace;
  box-sizing: border-box;
}


/* =========================================================
   10. GLOBAL CONTROLS & METRICS (Pause, FPS, Epoch)
   ========================================================= */

/* Pause scrolling everything */
#pause_button {
  float: right;
  margin-right: 10px;
  background-color: #222;
  color: white;
  border: 1px solid #444;
  font-family: monospace;
  font-size: 14px;
  padding: 4px 10px;
  cursor: pointer;
}
#pause_button:hover {
  background-color: #333;
}

.category_domain {
  font-weight: bold;
  margin-bottom: 2px;
}

#fps_container {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  color: #aaa;
}

#fps_label {
  font-weight: normal;
}

#fps_display {
  font-weight: normal;
}

#epoch_display {
  font-size: 10px;
  color: #aaa;
  margin-left: 4px;
}


/* =========================================================
   11. MATRIX MODE (Monochrome Green)
   ========================================================= */

/* matrix mode */
body.monochrome-green {
  filter: grayscale(100%) sepia(100%) hue-rotate(90deg) saturate(300%);
  font-family: 'Courier New', Courier, monospace;
  text-shadow: 0 0 2px #00ff41, 0 0 5px #00ff41;
}

body.monochrome-green,
body.monochrome-green * {
  color: #00ff41 !important;
  background-color: black !important;
  border-color: #00ff41 !important;
}

/* Ensure buttons, inputs, and selects are readable */
body.monochrome-green button,
body.monochrome-green input,
body.monochrome-green select {
  color: #00ff41 !important;
  background-color: black !important;
  border: 1px solid #00ff41 !important;
  text-shadow: 0 0 3px #00ff41;
}

/* Hover glow effect */
body.monochrome-green button:hover,
body.monochrome-green input:hover,
body.monochrome-green select:hover {
  box-shadow: 0 0 6px #00ff41;
  cursor: pointer;
}

/* countdown blocks per message matrix mode fix */
body.monochrome-green .countdown_block.block-1,
body.monochrome-green .countdown_block.block-2 {
  background-color: #004400 !important;
}

body.monochrome-green .countdown_block.block-3,
body.monochrome-green .countdown_block.block-4 {
  background-color: #007700 !important;
}

body.monochrome-green .countdown_block.block-5,
body.monochrome-green .countdown_block.block-6 {
  background-color: #00aa00 !important;
}

body.monochrome-green .countdown_block.block-7,
body.monochrome-green .countdown_block.block-8 {
  background-color: #00ff00 !important;
}

body.monochrome-green .countdown_block.block-9,
body.monochrome-green .countdown_block.block-10 {
  background-color: #88ff88 !important;
}

body.monochrome-green .countdown_block {
  box-shadow: 0 0 3px #00ff41;
}

/* Matrix mode pause blocks fixed */
body.monochrome-green .pause_block.block-1.active,
body.monochrome-green .pause_block.block-2.active {
  background-color: #0055aa !important;
}

body.monochrome-green .pause_block.block-3.active,
body.monochrome-green .pause_block.block-4.active {
  background-color: #00aa00 !important;
}

body.monochrome-green .pause_block.block-5.active,
body.monochrome-green .pause_block.block-6.active {
  background-color: #aaaa00 !important;
}

body.monochrome-green .pause_block.block-7.active,
body.monochrome-green .pause_block.block-8.active {
  background-color: #aa0000 !important;
}

body.monochrome-green .pause_block {
  box-shadow: 0 0 4px #00ff41;
}


/* =========================================================
   12. FONTS & TOOLBAR SIZING
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap');

/* Prevent Japanese characters from stacking */
.nowrap-text {
  white-space: nowrap;
}

/* Normalize size for matrix-mode button */
.matrix-mode-button {
  font-family: 'Noto Sans JP', monospace;
  font-size: 12px;        /* match other buttons */
  padding: 4px 10px;      /* match other buttons */
  line-height: 1;         /* ensure height stays consistent */
}


/* =========================================================
   13. RESPONSIVE / SMALL FORM FACTOR
   ========================================================= */

/* small form factor */
@media (max-width: 600px) {
  #main_title_bar {
    flex-direction: column;
    align-items: flex-start;
    padding: 10px 12px;
    gap: 8px;
  }

  #top_controls {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 8px;
  }

  .toolbar-button {
    flex-shrink: 0;
  }

  #app_title {
    font-size: 20px;
  }

  #settings_gear {
    order: -1; /* Optional: move gear to top if needed */
  }
}

/* All form factor tweaks */
@media (max-width: 600px) {
  #main_title_bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  #branding_group {
    order: -1; /* keep branding at top */
    justify-content: flex-start;
  }

  #top_controls {
    flex-wrap: wrap;
  }
}


/* =========================================================
   14. UTILITIES (Hide Images, No-wrap)
   ========================================================= */

.hide-images img {
  display: none !important;
}


/* =========================================================
   15. LOADING OVERLAY & SPINNER
   ========================================================= */

/* Loading message and animation */
#loading_overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #111;
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  font-family: monospace;
  font-size: 18px;
}

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #444;
  border-top: 4px solid #0f0;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 10px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


/* =========================================================
   16. Code Mode (Fixed implementation)
   ========================================================= */

body.code-mode {
  background-color: #0a0e13;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Courier New", monospace;
}

/* Hide original content when code mode is active */
body.code-mode .message_block > *:not(.cm-overlay) {
  display: none;
}

/* Code overlay styling */
.cm-overlay {
  background: rgba(10, 15, 20, 0.95);
  border: 1px solid #2d3748;
  border-radius: 6px;
  padding: 12px;
  margin: 8px 0;
  color: #ffffff;
  font-size: 13px;
  line-height: 1.4;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.cm-line {
  margin: 3px 0;
}

.cm-key {
  color: #7dd3fc;
  font-weight: bold;
  margin-right: 8px;
}

/* URL parts - distinct neon colors */
.cm-protocol { color: #00ffff; }     /* cyan */
.cm-host { color: #00ff00; }         /* green */
.cm-path { color: #ffff00; }         /* yellow */
.cm-query { color: #ff6b6b; }        /* red */
.cm-hash { color: #da70d6; }         /* orchid */
.cm-punct { color: #9ca3af; }        /* gray punctuation */

/* Content styling */
.cm-title {
  color: #fbbf24;
  font-weight: bold;
}

.cm-body {
  color: #d1d5db;
}

.cm-string {
  color: #34d399;
}

/* Hex dump styling */
.cm-hex {
  font-family: monospace;
  font-size: 11px;
  color: #6b7280;
  background: rgba(0, 0, 0, 0.3);
  border-left: 3px solid #374151;
  padding: 8px 12px;
  margin: 6px 0 6px 20px;
  white-space: pre;
  overflow-x: auto;
}

.cm-hex:hover {
  color: #9ca3af;
}

/* Progress bars */
.cm-progress {
  position: absolute;
  bottom: 15px;
  left: 15px;
  right: 15px;
  background: rgba(0, 0, 0, 0.9);
  border: 1px solid #374151;
  border-radius: 8px;
  padding: 10px;
  z-index: 10;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
}

.cm-progress-line {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  margin-bottom: 8px;
  color: #9ca3af;
}

.cm-progress-label {
  color: #60a5fa;
}

.cm-package {
  color: #34d399;
}

.cm-progress-pct {
  color: #fbbf24;
}

.cm-progress-bar {
  height: 6px;
  background: #1f2937;
  border-radius: 3px;
  overflow: hidden;
}

.cm-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #00ff00, #00ffff);
  transition: width 200ms linear;
}



/* =========================================================
   17. ANSI TOPBAR (Per-terminal)
   ========================================================= */

/* ANSI topbar (per-terminal) */
.ansi-topbar {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: 4px 8px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  font-family: ui-monospace,Menlo,Consolas,monospace;
  font-size: 12px;
  letter-spacing: .2px;
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(2px);
  z-index: 2;
}
.ansi-topbar.compact { padding: 2px 6px; }
.terminal .ansi-topbar { position: sticky; top: 0; }

.ansi-label { opacity: .9; white-space: nowrap; }

.ansi-stream {
  display: flex;
  gap: 2px;
  flex: 1;
  overflow: hidden;
}

.ansi-dot {
  width: 10px;
  height: 12px;
  display: inline-block;
  border-radius: 2px;
  opacity: 0.95;
}

.ansi-topbar.fade-out { animation: ansiFade .3s ease forwards; }
@keyframes ansiFade { to { opacity: 0; transform: translateY(-2px); } }


/* =========================================================
   18. Special functions (misc) like hide images
   ========================================================= */


/* Toggle image visibility */
body.images-hidden img,
body.images-hidden .message_image {
  display: none !important;
}

/* Lock image height - crops top/bottom when images are too tall */
body.images-height-locked .message_image {
  height: 180px !important;        /* Fixed height - adjust as needed */
  max-height: 180px !important;    /* Ensure it doesn't exceed this */
  object-fit: cover !important;    /* Crop to fill the space */
  object-position: center !important; /* Center the crop area */
}