/* Import Noto Sans Deseret font */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+Deseret&display=swap");
/* Import a retro mono font */
@import url("https://fonts.googleapis.com/css2?family=VT323&display=swap");
/* Import Share Tech Mono for TV display */
@import url("https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap");

/* Add this import at the top with the others */
@import url("https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;700&display=swap");

:root {
  /* Base colors */
  --color-beige-light: #eae3d5;
  --color-beige-dark: #dcd3c3;
  --color-dark-grey: #4a4a4a;
  --color-charcoal: #2a2a2a;
  --color-black: #1a1a1a;
  --color-mint-base: #a0e6af;
  --color-mint-border: #76a887;
  --color-mint-glow: #c8ffd4;
  --color-amber-glow: #ffcc00;

  /* Metallic/Hardware colors */
  --color-metallic-light: #cacaca;
  --color-metallic-mid: #9a9a9a;
  --color-metallic: #8a8a8a;
  --color-metallic-dark: #7a7a7a;
  --color-metallic-darker: #6a6a6a;
  --color-metallic-darkest: #5a5a5a;
  --color-grey-mid: #999;
  --color-grey-dark: #666;
  --color-grey-darker: #3a3a3a;

  /* Paper/Display colors */
  --color-paper-light: #f8f8f0;
  --color-paper-dark: #f5f5e8;
  --color-display-bg: #d4cfc4;
  --color-textarea-bg: #d4d4cc;
  --color-textarea-bg-focus: #e0e0d8;

  /* TV Display colors */
  --color-tv-bg: #2a2825;
  --color-tv-bg-mid: #383531;
  --color-tv-bg-dark: #1c1a18;
  --color-tv-text: #f0e6d2;

  /* Status/Signal colors */
  --color-cyan: #00d4ff;
  --color-cyan-dark: #00a8ff;
  --color-cyan-ready: rgba(0, 200, 255, 0.2);
  --color-magenta: #ff00d4;
  --color-magenta-dark: #ff00a8;
  --color-magenta-ready: rgba(255, 0, 200, 0.2);

  /* Bot colors */
  --color-bot-a: rgba(0, 139, 170, 0.7);
  --color-bot-a-border: rgba(0, 139, 170, 0.4);
  --color-bot-b: rgba(170, 0, 139, 0.7);
  --color-bot-b-border: rgba(170, 0, 139, 0.4);

  /* Button colors */
  --color-purple: #9b59b6;
  --color-purple-dark: #8e44ad;
  --color-bakelite-1: #9b7f57;
  --color-bakelite-2: #8b6f47;
  --color-bakelite-3: #7a5f3a;
  --color-bakelite-4: #6a4f2d;
  --color-bakelite-border: #3a2a1a;

  /* Typography */
  --font-family-retro-mono: "VT323", monospace;
  --font-family-share-tech: "Share Tech Mono", monospace;
  --font-family-roboto-mono: "Roboto Mono", monospace;

  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;

  /* Common shadows */
  --shadow-inset-light: inset 0 1px 1px rgba(255, 255, 255, 0.1);
  --shadow-inset-dark: inset 0 -2px 2px rgba(0, 0, 0, 0.3);
  --shadow-inset-deep: inset 0 2px 4px rgba(0, 0, 0, 0.4);
  --shadow-depth-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-depth-md: 0 3px 6px rgba(0, 0, 0, 0.3);
  --shadow-tv-inset: inset 0 2px 8px rgba(0, 0, 0, 0.4),
    inset 0 -2px 8px rgba(0, 0, 0, 0.4);

  /* Status light shadows */
  --shadow-status-base: inset 0 2px 3px rgba(0, 0, 0, 0.8),
    inset 0 -1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.2),
    0 2px 3px rgba(0, 0, 0, 0.4);
  --shadow-status-cyan: inset 0 -1px 2px rgba(0, 0, 0, 0.2),
    0 0 10px var(--color-cyan), 0 0 20px rgba(0, 212, 255, 0.8),
    0 0 30px rgba(0, 212, 255, 0.6);
  --shadow-status-magenta: inset 0 -1px 2px rgba(0, 0, 0, 0.2),
    0 0 10px var(--color-magenta), 0 0 20px rgba(255, 0, 212, 0.8),
    0 0 30px rgba(255, 0, 212, 0.6);

  /* Display container shadow */
  --shadow-display-container: inset 0 4px 8px rgba(0, 0, 0, 0.1),
    inset 0 2px 4px rgba(0, 0, 0, 0.08), inset 4px 0 8px rgba(0, 0, 0, 0.1),
    inset 2px 0 4px rgba(0, 0, 0, 0.06),
    inset 0 -2px 3px rgba(255, 255, 255, 0.3),
    inset 0 -1px 1px rgba(255, 255, 255, 0.5),
    inset -2px 0 3px rgba(255, 255, 255, 0.25),
    inset -1px 0 1px rgba(255, 255, 255, 0.4), 0 1px 2px rgba(0, 0, 0, 0.05);

  /* Button shadows */
  --shadow-button-base: 0 1px 1px rgba(0, 0, 0, 0.2),
    inset 0 1px 1px rgba(255, 255, 255, 0.1),
    inset 0 -2px 2px rgba(0, 0, 0, 0.3);
  --shadow-button-face: inset 0 1px 1px rgba(255, 255, 255, 0.2),
    inset 0 -2px 2px rgba(0, 0, 0, 0.3);
  --shadow-button-active: inset 0 3px 5px rgba(0, 0, 0, 0.5);

  /* Animation values */
  --animation-scroll: 2s linear forwards;
  --transition-default: all 0.3s ease;
  --transition-fast: all 0.15s ease;
  --transition-button: all 0.1s ease-out;

  /* Dimensions */
  --scroll-distance: -360px;
  --paper-height: 297px;
  --message-height: 142px;
  --header-height: 24px;
  --prompt-height: 90px;
  --footer-height: 30px;
}

/* Page title styling */
.post-container h1 {
  font-family: var(--font-family-retro-mono);
  font-size: 2.5rem;
  color: var(--color-charcoal);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-shadow: 2px 2px 0px var(--color-beige-dark);
}

/* Main App Container - Retro Hardware Case */
.app-container {
  background-color: var(--color-beige-light);
  border: 3px solid var(--color-charcoal);
  border-radius: 12px;
  max-width: 920px; /* Use consistent max-width */
  width: calc(100% - 40px); /* Account for 20px margins on each side */
  min-height: 700px;
  margin: var(--spacing-xl) auto; /* Auto margins for centering */
  padding: var(--spacing-lg);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.2),
    0px 0px 0px var(--color-charcoal);
}

/* Greebles: Ventilation grilles */
.app-container::before {
  content: "";
  position: absolute;
  top: 20px;
  right: 20px;
  width: 120px;
  height: 80px;
  background-image: repeating-linear-gradient(
    0deg,
    var(--color-charcoal) 0px,
    var(--color-charcoal) 3px,
    transparent 3px,
    transparent 8px
  );
  opacity: 0.3;
  pointer-events: none;
}

/* Chatbot Container */
.chatbot-container {
  background: transparent;
  border: none;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Molded Plastic Display Container */
.display-container {
  background: var(--color-display-bg);
  background-image: radial-gradient(
      ellipse at 50% 50%,
      rgba(255, 255, 255, 0.03) 0%,
      transparent 50%
    ),
    radial-gradient(
      ellipse at 50% 50%,
      transparent 40%,
      rgba(0, 0, 0, 0.08) 100%
    );
  border: none;
  border-radius: 20px;
  padding: 20px;
  position: relative;
  box-shadow: var(--shadow-display-container);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  margin-bottom: 6px;
}

/* Chat Area */
.chat-area {
  display: flex;
  flex-direction: column;
  margin-bottom: 12px;
}

/* Chat columns wrapper - Dot Matrix Paper with metallic bezel */
.chat-columns-wrapper {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  flex: 0 0 var(--paper-height);
  width: 100%;
  margin: 0 auto;
  background: var(--color-paper-light);
  border-radius: 10px;
  border: 6px solid var(--color-metallic);
  overflow: hidden;
  padding: 0 35px;
  box-sizing: border-box;
  box-shadow: 0 0 0 2px var(--color-metallic-darker),
    inset 0 2px 0 rgba(255, 255, 255, 0.7), inset 0 3px 5px rgba(0, 0, 0, 0.1),
    inset 0 2px 8px rgba(0, 0, 0, 0.2), inset 0 -1px 4px rgba(0, 0, 0, 0.1),
    inset 26px 0 8px -8px rgba(0, 0, 0, 0.08),
    inset -26px 0 8px -8px rgba(0, 0, 0, 0.08), var(--shadow-depth-md);
  background-image: radial-gradient(
      circle at 12.5px 15px,
      var(--color-dark-grey) 4px,
      transparent 4px
    ),
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 5px,
      var(--color-grey-mid) 5px,
      var(--color-grey-mid) 8px
    ),
    radial-gradient(
      circle at calc(100% - 12.5px) 15px,
      var(--color-dark-grey) 4px,
      transparent 4px
    ),
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 5px,
      var(--color-grey-mid) 5px,
      var(--color-grey-mid) 8px
    ),
    repeating-linear-gradient(
      180deg,
      rgba(144, 238, 144, 0.15) 0px,
      rgba(144, 238, 144, 0.15) 30px,
      transparent 30px,
      transparent 60px
    ),
    linear-gradient(
      180deg,
      var(--color-paper-light) 0%,
      var(--color-paper-dark) 100%
    );
  background-size: 30px 30px, 1px 100%, 30px 30px, 1px 100%, 100% 60px,
    100% 100%;
  background-position: 0 -15px, 25px 0, right 0 top -15px, calc(100% - 26px) 0,
    0 -15px, 0 0;
  background-repeat: repeat-y, repeat-y, repeat-y, repeat-y, repeat-y, no-repeat;
}

/* Metallic shine effect */
.chat-columns-wrapper::before {
  content: "";
  position: absolute;
  top: -6px;
  left: -6px;
  right: -6px;
  bottom: -6px;
  border-radius: 10px;
  background: linear-gradient(
    135deg,
    var(--color-metallic-mid) 0%,
    var(--color-metallic-light) 45%,
    var(--color-metallic) 50%,
    var(--color-metallic-dark) 100%
  );
  z-index: -1;
}

@keyframes paperScroll {
  from {
    background-position: 0 -15px, 25px 0, right 0 top -15px, calc(100% - 26px) 0,
      0 -15px, 0 0;
  }
  to {
    background-position: 0 -375px, 25px var(--scroll-distance),
      right 0 top -375px, calc(100% - 26px) var(--scroll-distance), 0 -375px,
      0 0;
  }
}

.chat-columns-wrapper.scrolling {
  animation: paperScroll var(--animation-scroll);
}

.chat-column {
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: visible;
  padding: 0;
}

/*
============================================================
=== TV DISPLAY STYLES ===
============================================================
*/

/* Warm White Vintage TV Style */
.tv-display {
  width: 100%;
  height: 140px;
  background: var(--color-tv-bg);
  background-image: radial-gradient(
    ellipse at center,
    var(--color-tv-bg-mid) 0%,
    var(--color-tv-bg) 60%,
    var(--color-tv-bg-dark) 100%
  );
  border: 3px solid var(--color-black);
  border-radius: 12px;
  box-shadow: var(--shadow-tv-inset);
  position: relative;
  overflow: hidden;
  padding: 20px 20px 20px 20px;
  box-sizing: border-box;
}

.tv-display::before {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.1) 0%,
    transparent 40%,
    transparent 60%,
    rgba(0, 0, 0, 0.1) 100%
  );
  border-radius: 12px;
  pointer-events: none;
}

.tv-scanlines {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.15) 2px,
    rgba(0, 0, 0, 0.15) 4px
  );
  pointer-events: none;
  z-index: 10;
}

.tv-content {
  color: var(--color-tv-text);
  font-family: var(--font-family-share-tech);
  font-size: 18px;
  line-height: 1.6;
  position: relative;
  z-index: 1;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 100%;
  filter: blur(0.3px);
  text-shadow: 0 0 2px rgba(240, 230, 210, 0.6);
  animation: phosphorFlicker 3s infinite;
  margin: 0 20px;
}

.tv-emoji {
  font-size: 36px;
  margin-right: 30px;
  margin-left: 0;
  filter: sepia(0.2) brightness(1.1) blur(0.3px);
}

@keyframes phosphorFlicker {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.98;
  }
}

.display-text {
  flex: 1;
}

/* Loader animation for TV display */
.loader {
  width: 36px;
  aspect-ratio: 1;
  display: grid;
  color: var(--color-tv-text);
  background: radial-gradient(
    farthest-side,
    currentColor calc(100% - 6px),
    #0000 calc(100% - 5px) 0
  );
  -webkit-mask: radial-gradient(
    farthest-side,
    #0000 calc(100% - 13px),
    #000 calc(100% - 12px)
  );
  mask: radial-gradient(
    farthest-side,
    #0000 calc(100% - 13px),
    #000 calc(100% - 12px)
  );
  border-radius: 50%;
  animation: l19 4s infinite linear;
  margin-right: 30px;
  flex-shrink: 0;
  filter: blur(0.3px);
  box-shadow: 0 0 8px rgba(240, 230, 210, 0.3);
}

.loader::before,
.loader::after {
  content: "";
  grid-area: 1/1;
  background: linear-gradient(currentColor 0 0) center,
    linear-gradient(currentColor 0 0) center;
  background-size: 100% 8px, 8px 100%;
  background-repeat: no-repeat;
}

.loader::after {
  transform: rotate(45deg);
}

@keyframes l19 {
  100% {
    transform: rotate(1turn);
  }
}

/* FEEDBACK MODE STYLES */
.feedback-mode {
  height: 100%;
  display: flex;
  padding: 0 !important;
}

.feedback-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
  justify-content: flex-start;
  position: relative;
  z-index: 1;
  padding: 5px 0 0 0;
}

.feedback-question {
  color: var(--color-tv-text);
  font-family: var(--font-family-share-tech);
  font-size: 20px;
  text-align: center;
  text-shadow: 0 0 2px rgba(240, 230, 210, 0.6);
  filter: blur(0.3px);
  margin-bottom: auto;
  margin-top: 0;
  padding-bottom: 10px;
}

.feedback-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding-bottom: 8px;
}

/* Intensity Signal Bars */
.intensity-signals {
  position: relative;
  height: 40px;
  margin-top: 0;
  margin-bottom: 4px;
  display: flex;
  justify-content: center;
  padding: 0 0;
  gap: 4px;
  width: 100%;
  cursor: pointer;
  box-sizing: border-box;
}

.signal {
  flex: 1;
  min-width: 0;
  height: 45px;
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 2px;
}

.signal span {
  flex: 1;
  background: rgba(240, 230, 210, 0.15);
  display: block;
  transition: var(--transition-fast);
  position: relative;
  border: 1px solid rgba(240, 230, 210, 0.3);
  border-radius: 0;
  margin-right: 1px;
  box-shadow: 0 0 2px rgba(240, 230, 210, 0.2);
}

.signal span:last-child {
  margin-right: 0;
}

/* Bar heights */
.signal-left span:nth-child(1) {
  height: 100%;
}
.signal-left span:nth-child(2) {
  height: 84.23%;
}
.signal-left span:nth-child(3) {
  height: 71.06%;
}
.signal-left span:nth-child(4) {
  height: 60.06%;
}
.signal-left span:nth-child(5) {
  height: 50.88%;
}
.signal-left span:nth-child(6) {
  height: 43.2%;
}
.signal-left span:nth-child(7) {
  height: 36.79%;
}
.signal-left span:nth-child(8) {
  height: 31.44%;
}
.signal-left span:nth-child(9) {
  height: 26.97%;
}
.signal-left span:nth-child(10) {
  height: 23.23%;
}
.signal-left span:nth-child(11) {
  height: 20.11%;
}
.signal-left span:nth-child(12) {
  height: 17.5%;
}
.signal-left span:nth-child(13) {
  height: 15.33%;
}
.signal-left span:nth-child(14) {
  height: 13.51%;
}
.signal-left span:nth-child(15) {
  height: 11.99%;
}

.signal-right span:nth-child(1) {
  height: 11.99%;
}
.signal-right span:nth-child(2) {
  height: 13.51%;
}
.signal-right span:nth-child(3) {
  height: 15.33%;
}
.signal-right span:nth-child(4) {
  height: 17.5%;
}
.signal-right span:nth-child(5) {
  height: 20.11%;
}
.signal-right span:nth-child(6) {
  height: 23.23%;
}
.signal-right span:nth-child(7) {
  height: 26.97%;
}
.signal-right span:nth-child(8) {
  height: 31.44%;
}
.signal-right span:nth-child(9) {
  height: 36.79%;
}
.signal-right span:nth-child(10) {
  height: 43.2%;
}
.signal-right span:nth-child(11) {
  height: 50.88%;
}
.signal-right span:nth-child(12) {
  height: 60.06%;
}
.signal-right span:nth-child(13) {
  height: 71.06%;
}
.signal-right span:nth-child(14) {
  height: 84.23%;
}
.signal-right span:nth-child(15) {
  height: 100%;
}

/* Ready state - neon cyan/magenta */
.signal-left span.ready {
  background: var(--color-cyan-ready);
  box-shadow: inset 0 0 4px rgba(0, 200, 255, 0.3);
  border-color: rgba(0, 200, 255, 0.4);
  opacity: 1;
}

.signal-right span.ready {
  background: var(--color-magenta-ready);
  box-shadow: inset 0 0 4px rgba(255, 0, 200, 0.3);
  border-color: rgba(255, 0, 200, 0.4);
  opacity: 1;
}

/* Active state - neon cyan/magenta */
.signal-left span.active {
  background: linear-gradient(
    135deg,
    var(--color-cyan) 0%,
    var(--color-cyan-dark) 100%
  );
  box-shadow: 0 0 12px rgba(0, 212, 255, 0.8), 0 0 20px rgba(0, 212, 255, 0.4),
    inset 0 0 4px rgba(255, 255, 255, 0.5);
  border-color: rgba(255, 255, 255, 0.5);
  opacity: 1;
  filter: brightness(1.1);
}

.signal-right span.active {
  background: linear-gradient(
    135deg,
    var(--color-magenta) 0%,
    var(--color-magenta-dark) 100%
  );
  box-shadow: 0 0 12px rgba(255, 0, 212, 0.8), 0 0 20px rgba(255, 0, 212, 0.4),
    inset 0 0 4px rgba(255, 255, 255, 0.5);
  border-color: rgba(255, 255, 255, 0.5);
  opacity: 1;
  filter: brightness(1.1);
}

.intensity-signals:hover .signal span {
  filter: brightness(1.2);
}

/* Feedback labels */
.feedback-slider-labels {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-family-retro-mono);
  font-size: 11px;
  font-weight: normal;
  padding: 0 0;
  position: relative;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  height: 20px;
  align-items: flex-end;
  box-sizing: border-box;
}

.tv-display .feedback-slider-labels {
  color: var(--color-tv-text);
}

.feedback-slider-labels span {
  position: absolute;
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: var(--font-family-retro-mono);
  font-size: 0.75rem;
  font-weight: normal;
  line-height: 1;
  text-align: center;
  bottom: 0;
}

.feedback-slider-labels span:nth-child(1) {
  left: 0%;
  transform: translateX(0);
  text-align: left;
}
.feedback-slider-labels span:nth-child(2) {
  left: 16.67%;
}
.feedback-slider-labels span:nth-child(3) {
  left: 33.33%;
}
.feedback-slider-labels span:nth-child(4) {
  left: 50%;
}
.feedback-slider-labels span:nth-child(5) {
  left: 66.67%;
}
.feedback-slider-labels span:nth-child(6) {
  left: 83.33%;
}
.feedback-slider-labels span:nth-child(7) {
  left: 100%;
  transform: translateX(-100%);
  text-align: right;
}

/* CHAT INPUT SECTION - CASSETTE DECK STYLE */
.chat-input-section {
  position: relative;
  height: auto;
  flex-shrink: 0;
  background: var(--color-grey-darker);
  border-radius: 15px;
  border: 2px solid var(--color-black);
  box-shadow: 0 0 0 1px #5a5a5a,
    /* Outer line */ inset 0 4px 8px rgba(0, 0, 0, 0.1),
    /* Top shadow */ inset 0 2px 4px rgba(0, 0, 0, 0.4),
    /* Top shadow */ inset 0 -4px 8px rgba(0, 0, 0, 0.6),
    /* Bottom shadow */ inset 0 -2px 4px rgba(0, 0, 0, 0.2); /* Bottom shadow */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: var(--spacing-md) var(--spacing-lg);
}

/* Chat input area */
.chat-input {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  position: relative;
  z-index: 10;
  margin: 0;
}

/* Container for input and buttons */
.input-wrapper {
  display: flex;
  gap: var(--spacing-md);
  align-items: flex-start;
}

/* Status indicator lights */
.status-indicators {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}

.status-light {
  width: 18px;
  height: 10px;
  background: var(--color-charcoal);
  border: 2px solid var(--color-black);
  border-radius: 2px;
  position: relative;
  cursor: help;
  transition: var(--transition-default);
  box-shadow: var(--shadow-status-base);
}

.status-light-inner {
  position: absolute;
  top: 1px;
  left: 1px;
  right: 1px;
  bottom: 1px;
  background: var(--color-black);
  border-radius: 1px;
  transition: var(--transition-default);
}

.status-light.active .status-light-inner {
  filter: brightness(1.3);
}

.bot-a-status.active .status-light-inner {
  background: var(--color-cyan);
  box-shadow: var(--shadow-status-cyan);
}

.bot-b-status.active .status-light-inner {
  background: var(--color-magenta);
  box-shadow: var(--shadow-status-magenta);
}

/* Left side - prompt input */
.input-side {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Right side - buttons */
.buttons-side {
  display: flex;
  gap: var(--spacing-sm);
  width: auto;
  align-items: flex-start;
}

.buttons-container {
  display: flex;
  flex-direction: column; /* Stack items vertically */
  align-items: stretch; /* Make send button take full width */
  gap: var(--spacing-sm);
  width: 170px;
  position: relative;
  height: 100%;
}

.button-footer-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start; /* This sets the default for the row to top-alignment */
  padding: 0px 0px 0px 6px;
}

/* Textarea */
textarea {
  flex: 1;
  padding: var(--spacing-sm) var(--spacing-md);
  border: 2px solid var(--color-black);
  border-radius: 8px;
  font-family: var(--font-family-retro-mono);
  font-size: 1.5rem;
  line-height: 1.3;
  transition: all 0.2s ease;
  resize: none;
  background: var(--color-textarea-bg);
  color: var(--color-grey-dark);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3),
    inset 0 -1px 0 rgba(255, 255, 255, 0.8);
  height: 124px;
  min-height: unset;
  width: 100%;
  box-sizing: border-box;
}

textarea::placeholder {
  color: var(--color-grey-mid);
  opacity: 1;
}

textarea:focus {
  outline: none;
  border-color: var(--color-charcoal);
  background: var(--color-textarea-bg-focus);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4),
    inset 0 -1px 0 rgba(255, 255, 255, 0.8);
}

/* Temperature Slider styles */
.temp-slider-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  height: 124px;
  width: 40px;
  border-radius: 8px;
  padding: 4px 2px 0px 0px;
  position: relative;
  box-sizing: border-box;
}

.temp-slider-track {
  position: relative;
  width: 100%;
  height: 70px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  flex-grow: 1;
}

.temp-roller-wheel {
  position: absolute;
  width: 12px;
  height: 95%;
  background: #777;
  border-radius: 8px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), 2px 0 3px rgba(0, 0, 0, 0.6),
    -2px 0 3px rgba(0, 0, 0, 0.6), inset 1px 0 1px rgba(0, 0, 0, 0.3),
    inset -1px 0 1px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

.temp-indicator-line {
  position: absolute;
  width: 30%;
  height: 3px;
  background: rgba(230, 230, 230, 0.8);
  left: 50%;
  top: var(--indicator-position, 20%);
  transform: translate(-50%, -50%);
  z-index: 3;
  pointer-events: none;
  transition: top 0.1s linear;
}

.temp-icon {
  font-size: 0.6rem;
  margin-top: auto;
  opacity: 0.6;
  filter: sepia(30%);
}

/* ============================================================
           === SKEUOMORPHIC BUTTON STYLES ===
           ============================================================
        */

.btn {
  border: none;
  padding: 0;
  font-family: var(--font-family-retro-mono);
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
  user-select: none;
}

.btn-illuminated {
  position: relative;
  width: 100%;
  border-radius: 12px;
  background: linear-gradient(180deg, #383838, #202020);
  box-shadow: var(--shadow-button-base);
}

.btn-illuminated-face {
  position: absolute;
  top: 7px;
  left: 7px;
  right: 7px;
  bottom: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: 1.2rem;
  color: #ffffff;
  transition: all 0.2s ease-in-out;
  box-shadow: var(--shadow-button-face);
}

/* Transmit Button: Bakelite Brown with Amber Glow Text */
.send-btn .btn-illuminated-face {
  background:
        /* Bakelite gradient */ radial-gradient(
      ellipse 200% 100% at 50% 50%,
      var(--color-bakelite-1) 0%,
      var(--color-bakelite-2) 30%,
      var(--color-bakelite-3) 70%,
      var(--color-bakelite-4) 100%
    ),
    /* Overall gradient for depth */
      linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.12) 0%,
        rgba(255, 255, 255, 0.05) 30%,
        transparent 50%,
        rgba(0, 0, 0, 0.2) 70%,
        rgba(0, 0, 0, 0.35) 100%
      ),
    /* Molded plastic texture */
      radial-gradient(
        circle at 30% 30%,
        rgba(255, 255, 255, 0.08) 0%,
        transparent 30%
      );
  color: var(--color-amber-glow);
  text-shadow: 0 0 10px rgba(255, 204, 0, 0.8), 0 0 20px rgba(255, 204, 0, 0.5),
    0 0 30px rgba(255, 204, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.5);
  border: 1px solid var(--color-bakelite-border);
  box-shadow:
        /* Enhanced depth shadows */ 0 3px 5px rgba(0, 0, 0, 0.6),
    /* Edge shadows for rounded effect */ inset 2px 0 3px -2px rgba(0, 0, 0, 0.3),
    inset -2px 0 3px -2px rgba(0, 0, 0, 0.3),
    /* Top highlight */ inset 0 1px 0 rgba(255, 255, 255, 0.15),
    /* Bottom shadow for depth */ inset 0 -2px 3px rgba(0, 0, 0, 0.5);
}

/* Random Button: Vintage Mint, Circular */
.random-btn {
  border-radius: 50%;
}

.random-btn-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: top; /* This moves ONLY the button to the top */
}

.random-btn .btn-illuminated-face {
  border-radius: 50%;
  font-size: 1.6rem;
}

/* FINAL Illuminated (enabled) state for the random button */
.random-btn:not(:disabled) .btn-illuminated-face {
  background-image:
    /* 1. Dimmer highlight from the top */ radial-gradient(
      ellipse at 50% 0%,
      var(--color-mint-glow) 0%,
      transparent 60%
    ),
    /* 2. Solid Base Color Layer */
      linear-gradient(var(--color-mint-base), var(--color-mint-base));

  box-shadow:
    /* Softer Outer glow */ 0 0 6px rgba(160, 230, 175, 0.5),
    0 0 10px rgba(160, 230, 175, 0.3),
    /* Inner Bevel/Shadow (for depth) */ inset 0 1px 1px
      rgba(255, 255, 255, 0.25),
    inset 0 -2px 2px rgba(0, 0, 0, 0.3);

  border: none;
  text-shadow: none;

  /* Adjust this value to fine-tune the opacity of the icon and button together */
  opacity: 0.85;
}

/* FINAL Non-illuminated (disabled) state for the random button */
.random-btn:disabled .btn-illuminated-face {
  background-image: 
    /* 1. Dimmer Shading and Highlight Layer */ radial-gradient(
      ellipse 200% 100% at 50% 50%,
      rgba(255, 255, 255, 0.1) 0%,
      /* Reduced highlight */ rgba(255, 255, 255, 0.03) 30%,
      rgba(0, 0, 0, 0) 60%,
      rgba(0, 0, 0, 0.1) 100%
    ),
    /* 2. Molded Plastic Texture Layer */
      radial-gradient(
        circle at 30% 30%,
        rgba(255, 255, 255, 0.08) 0%,
        transparent 30%
      ),
    /* 3. Solid Base Color Layer */
      linear-gradient(var(--color-mint-base), var(--color-mint-base));

  border: 1px solid var(--color-vintage-mint-border);
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.6),
    inset 2px 0 3px -2px rgba(0, 0, 0, 0.3),
    inset -2px 0 3px -2px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.15), inset 0 -2px 3px rgba(0, 0, 0, 0.5);

  text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.1);

  /* Adjust this value to fine-tune the opacity of the icon and button together */
  opacity: 0.45;
}

/* Button sizing */
.btn-illuminated.random-btn {
  width: 60px;
  height: 60px;
  flex-shrink: 0;
}

.btn-illuminated.send-btn {
  height: 54px;
}

/* Active State */
.btn-illuminated:not(:disabled):active .btn-illuminated-face {
  transform: translateY(2px);
  filter: brightness(0.9);
  box-shadow: var(--shadow-button-active);
}

/* Disabled State */
.btn-illuminated:disabled {
  cursor: not-allowed;
}

/* Disabled Transmit Button - glow turns off */
.send-btn:disabled .btn-illuminated-face {
  color: var(--color-charcoal);
  text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.2);
}

.signature-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: right;
  text-align: center;
  pointer-events: none;
  flex-grow: 1;
  padding-top: 8px;
}

/*
============================================================
=== SIGNATURE LABEL STYLES ===
============================================================
*/

.label-screenprint {
  background: transparent;
  color: var(--color-grey-mid);
  font-family: var(--font-family-roboto-mono);
  line-height: 1.4;
  height: auto;
}

.label-screenprint .line1 {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.4px;
}

.label-screenprint .line2 {
  font-size: 0.5rem;
  opacity: 0.8;
  white-space: nowrap;
}

.temp-roller-wheel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: repeating-linear-gradient(
    0deg,
    transparent 0px,
    transparent 2px,
    rgba(0, 0, 0, 0.2) 2px,
    rgba(0, 0, 0, 0.2) 4px,
    transparent 4px,
    transparent 6px,
    rgba(255, 255, 255, 0.1) 6px,
    rgba(255, 255, 255, 0.1) 8px
  );
  background-size: 100% 8px;
  background-position: 0 var(--roller-position, 0%);
  transition: background-position 0.1s linear;
}

.temp-roller-wheel::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.1) 50%,
    transparent 100%
  );
}

.temp-slider {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 100%;
  background: transparent;
  position: absolute;
  z-index: 2;
  cursor: ns-resize;
  margin: 0;
  padding: 0;
  opacity: 0;
  writing-mode: bt-lr;
  -webkit-appearance: slider-vertical;
}

/* Welcome Overlay */
.welcome-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: -62px;
  background: var(--color-paper-light);
  z-index: 100;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  border-radius: 10px;
  transition: none;
  padding-top: 15px;
  background-image: radial-gradient(
      circle at 12.5px 15px,
      var(--color-dark-grey) 4px,
      transparent 4px
    ),
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 5px,
      var(--color-grey-mid) 5px,
      var(--color-grey-mid) 8px
    ),
    radial-gradient(
      circle at calc(100% - 12.5px) 15px,
      var(--color-dark-grey) 4px,
      transparent 4px
    ),
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 5px,
      var(--color-grey-mid) 5px,
      var(--color-grey-mid) 8px
    ),
    repeating-linear-gradient(
      180deg,
      rgba(144, 238, 144, 0.15) 0px,
      rgba(144, 238, 144, 0.15) 30px,
      transparent 30px,
      transparent 60px
    ),
    linear-gradient(
      180deg,
      var(--color-paper-light) 0%,
      var(--color-paper-dark) 100%
    );
  background-size: 30px 30px, 1px 100%, 30px 30px, 1px 100%, 100% 60px,
    100% 100%;
  background-position: 0 -15px, 25px 0, right 0 top -15px, calc(100% - 26px) 0,
    0 -15px, 0 0;
  background-repeat: repeat-y, repeat-y, repeat-y, repeat-y, repeat-y, no-repeat;
}

.welcome-content {
  text-align: center;
  max-width: 100%;
  padding: 0 35px 40px 35px;
  overflow-x: auto;
}

/* New styles for the welcome title container */
.ascii-container {
  text-align: center;
  color: #2a2a2a;
  margin-bottom: 0px; /* Add some space before the epigraph */
}

/* Styles the main title text */
.ascii-main-title {
  font-size: 2.8rem; /* Makes the title much larger */
  margin: 10px; /* Removes vertical space around the title */
  line-height: 1; /* Ensures tight line spacing */
  font-family: "VT323", monospace;
  padding: 0;
}

.welcome-epigraph {
  max-width: 100%;
  margin: 0 auto;
  margin-top: 36px;
  padding: 0 50px;
  text-align: left;
}

/* Update the welcome overlay title */
.welcome-overlay .display-heading {
  font-family: var(--font-family-share-tech);
  font-size: 1rem;
  font-weight: normal;
  text-transform: uppercase;
  margin-bottom: 0px;
  margin-top: 0;
  color: var(--color-charcoal);
  text-shadow: none;
  letter-spacing: 0em;
  line-height: 1;
}

/* Update the epigraph text */
.welcome-epigraph p {
  font-family: var(--font-family-share-tech);
  font-size: 0.8rem;
  line-height: 2.1;
  color: var(--color-charcoal);
  font-style: normal;
  margin: 0 0 0px 0;
  font-weight: normal;
  opacity: 0.8;
}

/* Update the attribution */
.epigraph-attribution {
  text-align: right;
  font-size: 0.75 rem;
  margin-top: 2px;
  font-family: var(--font-family-share-tech);
  font-style: italic;
  opacity: 0.8;
}

@keyframes welcomeOverlayScroll {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(var(--scroll-distance));
  }
}

.welcome-overlay.scrolling {
  animation: welcomeOverlayScroll var(--animation-scroll);
}

/* Strip containers */
.header-strips,
.prompt-strips,
.prompt-header-strips,
.footer-strips,
.message-border-strips {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
}

.header-strips {
  z-index: 10;
}
.prompt-strips {
  z-index: 9;
}
.prompt-header-strips {
  z-index: 10;
}
.footer-strips {
  z-index: 8;
}
.message-border-strips {
  z-index: 7;
}

/* Individual prompt header strip */
.prompt-header-strip {
  position: absolute;
  left: 35px;
  width: 89px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 9px;
  background-color: rgba(102, 102, 102, 0.3);
  color: rgba(102, 102, 102, 0.8);
  font-family: var(--font-family-retro-mono);
  font-weight: normal;
  font-size: 1.2rem;
  letter-spacing: 0.05em;
  box-sizing: border-box;
  background-image: radial-gradient(
    circle at 1px 1px,
    rgba(102, 102, 102, 0.1) 1px,
    transparent 1px
  );
  background-size: 3px 3px;
  text-shadow: none;
}

/* Individual prompt strip */
.prompt-strip {
  position: absolute;
  left: 26px;
  right: 26px;
  height: var(--prompt-height);
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--spacing-sm) var(--spacing-md);
  padding-top: var(--spacing-xs);
  background: transparent;
  margin: 0 9px;
  background-image: linear-gradient(
      to right,
      rgba(102, 102, 102, 0.2) 0%,
      rgba(102, 102, 102, 0.2) 100%
    ),
    linear-gradient(
      to right,
      rgba(102, 102, 102, 0.2) 0%,
      rgba(102, 102, 102, 0.2) 100%
    ),
    linear-gradient(
      to bottom,
      rgba(102, 102, 102, 0.2) 0%,
      rgba(102, 102, 102, 0.2) 100%
    ),
    linear-gradient(
      to bottom,
      rgba(102, 102, 102, 0.2) 0%,
      rgba(102, 102, 102, 0.2) 100%
    );
  background-size: 100% 4px, 100% 4px, 4px 100%, 4px 100%;
  background-position: 0 0, 0 100%, 0 0, 100% 0;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
}

/* Individual footer strip */
.footer-strip {
  position: absolute;
  left: 35px;
  right: 35px;
  height: var(--footer-height);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  margin: 0;
  margin-top: 30px;
}

/* Scantron bubble container */
.scantron-bubbles {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0;
  width: 100%;
  padding: 0;
  max-width: none;
}

/* Individual scantron bubble */
.scantron-bubble {
  width: 24px;
  height: 17px;
  border-radius: 50%;
  background: transparent;
  border: 1.5px solid rgba(51, 51, 51, 0.35);
  position: relative;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin: 0;
}

.scantron-bubble::before {
  content: attr(data-value);
  position: absolute;
  font-size: 10px;
  font-family: var(--font-family-retro-mono);
  color: rgba(51, 51, 51, 0.4);
  line-height: 1;
  pointer-events: none;
  z-index: 1;
}

.scantron-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(26, 26, 26, 0.7);
  opacity: 0;
  transition: none;
  position: relative;
  z-index: 2;
}

.scantron-bubble:hover {
  border-color: rgba(102, 102, 102, 0.5);
  background: rgba(0, 0, 0, 0.02);
  cursor: pointer;
}

.scantron-bubble.marked .scantron-dot {
  opacity: 1;
}

.scantron-bubble:hover {
  border-color: var(--color-grey-dark);
  background: var(--color-paper-light);
  cursor: pointer;
}

/* Prompt text in strip */
.prompt-strip-text {
  font-family: var(--font-family-retro-mono);
  font-size: 1.2rem;
  color: var(--color-charcoal);
  line-height: 1.52; /* MODIFIED: Adjusted for 30px line spacing */
  text-align: left;
  max-width: 100%;
  word-wrap: break-word;
  font-weight: normal;
  font-style: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
  padding-left: 90px;
}

.prompt-strip-text.typing::after {
  content: "▊";
  animation: blink 1s infinite;
  color: var(--color-grey-dark);
  margin-left: 2px;
}

/* Animation containers */
.prompt-header-strips-container,
.footer-strips-container,
.prompt-strips-container,
.header-strips-container,
.message-border-strips-container {
  position: relative;
  width: 100%;
  height: 100%;
}

@keyframes headerStripScroll {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(var(--scroll-distance));
  }
}

.prompt-header-strips-container.scrolling,
.footer-strips-container.scrolling,
.prompt-strips-container.scrolling,
.header-strips-container.scrolling,
.message-border-strips-container.scrolling {
  animation: headerStripScroll var(--animation-scroll);
}

/* Individual header strip */
.header-strip {
  position: absolute;
  left: 0;
  right: 0;
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-family: var(--font-family-retro-mono);
  font-weight: normal;
  font-size: 1.2rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.2);
}

.header-strip.bot-a {
  background-color: rgba(0, 139, 170, 0.25);
  background-image: radial-gradient(
    circle at 1px 1px,
    rgba(0, 139, 170, 0.1) 1px,
    transparent 1px
  );
  background-size: 3px 3px;
  color: rgba(0, 139, 170, 0.8);
}

.header-strip.bot-b {
  background-color: rgba(170, 0, 139, 0.25);
  background-image: radial-gradient(
    circle at 1px 1px,
    rgba(170, 0, 139, 0.1) 1px,
    transparent 1px
  );
  background-size: 3px 3px;
  color: rgba(170, 0, 139, 0.8);
}

/* Message display area */
.chat-messages {
  flex: none;
  height: var(--message-height);
  padding: 0;
  overflow: visible;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0;
  background: transparent;
  border-radius: 0;
  position: absolute;
  top: 109px;
  left: 0;
  right: 0;
  line-height: 1.6;
  text-align: justify;
  hyphens: auto;
  z-index: 5;
}

/* Individual message border strip */
.message-border-strip {
  position: absolute;
  left: 0;
  right: 0;
  height: var(--message-height);
  pointer-events: none;
}

/* Individual message border strip */
.message-border-strip.bot-a {
  background-image: linear-gradient(
      to right,
      rgba(0, 139, 170, 0.3) 0%,
      rgba(0, 139, 170, 0.3) 100%
    ),
    linear-gradient(
      to right,
      rgba(0, 139, 170, 0.3) 0%,
      rgba(0, 139, 170, 0.3) 100%
    ),
    linear-gradient(
      to bottom,
      rgba(0, 139, 170, 0.3) 0%,
      rgba(0, 139, 170, 0.3) 100%
    ),
    linear-gradient(
      to bottom,
      rgba(0, 139, 170, 0.3) 0%,
      rgba(0, 139, 170, 0.3) 100%
    );
  background-size: 100% 4px, 100% 4px, 4px 100%, 4px 100%;
  background-position: 0 0, 0 100%, 0 0, 100% 0;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
}

.message-border-strip.bot-b {
  background-image: linear-gradient(
      to right,
      rgba(170, 0, 139, 0.3) 0%,
      rgba(170, 0, 139, 0.3) 100%
    ),
    linear-gradient(
      to right,
      rgba(170, 0, 139, 0.3) 0%,
      rgba(170, 0, 139, 0.3) 100%
    ),
    linear-gradient(
      to bottom,
      rgba(170, 0, 139, 0.3) 0%,
      rgba(170, 0, 139, 0.3) 100%
    ),
    linear-gradient(
      to bottom,
      rgba(170, 0, 139, 0.3) 0%,
      rgba(170, 0, 139, 0.3) 100%
    );
  background-size: 100% 4px, 100% 4px, 4px 100%, 4px 100%;
  background-position: 0 0, 0 100%, 0 0, 100% 0;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
}

/* Messages container */
.messages-container {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0;
  opacity: 1;
  transition: opacity 0.3s ease;
  /* MODIFIED: Was 34px, adjusted for better vertical alignment */
  padding-top: 28px;
  padding-left: 8px;
  padding-right: 8px;
  position: relative;
}

@keyframes messageSlideUp {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(var(--scroll-distance));
    opacity: 1;
  }
}

.messages-container.scrolling {
  animation: messageSlideUp var(--animation-scroll);
}

/* Message styles */
.message {
  margin: 0;
  padding: 0;
  max-width: 100%;
  word-wrap: break-word;
  white-space: pre-wrap;
  position: relative;
  z-index: 5;
}

.ai-message {
  font-family: var(--font-family-retro-mono);
  font-size: 1.2rem;
  color: var(--color-charcoal);
  line-height: 1.52; /* MODIFIED: Adjusted for 30px line spacing */
  margin: 0;
  text-align: left;
  font-weight: normal;
  font-style: normal;
  white-space: pre-wrap;
  text-shadow: none;
  padding-left: 12px;
}

.ai-message.typing::after {
  content: "▊";
  animation: blink 1s infinite;
  color: var(--color-grey-dark);
}

@keyframes blink {
  0%,
  50% {
    opacity: 1;
  }
  51%,
  100% {
    opacity: 0;
  }
}

.error-message {
  font-family: var(--font-family-body);
  font-size: var(--font-size-small);
  color: #721c24;
  font-style: italic;
  text-align: center;
  margin: var(--spacing-xs) 0;
  padding: var(--spacing-sm);
  border: 1px dashed #f5c6cb;
  background: rgba(248, 215, 218, 0.3);
  border-radius: 4px;
}

/*
======================================================
=== PERSISTENT SLIDER ===
======================================================
*/

.persistent-slider-container {
  padding: 0 var(--spacing-lg);
  margin-bottom: 12px;
}

/* Wrapper for slider */
.slider-wrapper {
  position: relative;
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  box-sizing: border-box;
}

.feedback-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 100%;
  background: transparent;
  outline: none;
  cursor: pointer;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  margin: 0;
  border: none;
  box-shadow: none;
}

.feedback-slider:focus {
  outline: none;
  border: none;
  box-shadow: none;
}

.feedback-slider:disabled {
  cursor: not-allowed;
}

.feedback-slider:disabled::-webkit-slider-thumb {
  cursor: not-allowed;
  background: #9a9a9a;
}

.feedback-slider:disabled::-moz-range-thumb {
  cursor: not-allowed;
  background: #9a9a9a;
}

/* Slider track */
.feedback-slider::-webkit-slider-runnable-track {
  width: 100%;
  height: 6px;
  cursor: pointer;
  background: var(--color-charcoal);
  border-radius: 4px;
  border: none;
  box-shadow: none;
}

.feedback-slider::-moz-range-track {
  width: 100%;
  height: 6px;
  cursor: pointer;
  background: var(--color-charcoal);
  border-radius: 4px;
  border: none;
  box-shadow: none;
}

/* Slider thumb - Bakelite with LED */
.feedback-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 44px;
  height: 24px;
  background:
        /* Triangle LED indicator */ linear-gradient(
      135deg,
      transparent 0%,
      transparent 50%,
      rgba(255, 204, 0, 0.9) 50%,
      rgba(255, 204, 0, 0.9) 100%
    ),
    linear-gradient(
      225deg,
      transparent 0%,
      transparent 50%,
      rgba(255, 204, 0, 0.9) 50%,
      rgba(255, 204, 0, 0.9) 100%
    ),
    /* LED glow effect */
      radial-gradient(
        ellipse at 50% 45%,
        rgba(255, 204, 0, 0.5) 0%,
        rgba(255, 204, 0, 0.2) 30%,
        transparent 50%
      ),
    /* Bakelite gradient */
      radial-gradient(
        ellipse 200% 100% at 50% 50%,
        var(--color-bakelite-1) 0%,
        var(--color-bakelite-2) 30%,
        var(--color-bakelite-3) 70%,
        var(--color-bakelite-4) 100%
      ),
    /* Overall gradient for depth */
      linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.12) 0%,
        rgba(255, 255, 255, 0.05) 30%,
        transparent 50%,
        rgba(0, 0, 0, 0.2) 70%,
        rgba(0, 0, 0, 0.35) 100%
      ),
    /* Molded plastic texture */
      radial-gradient(
        circle at 30% 30%,
        rgba(255, 255, 255, 0.08) 0%,
        transparent 30%
      );
  background-size: 6px 6px, 6px 6px, 20px 20px, 100% 100%, 100% 100%, 100% 100%;
  background-position: calc(50% - 3px) 42%, calc(50% + 3px) 42%, center 45%,
    center center, 0 0, 0 0;
  background-repeat: no-repeat;
  border: 1px solid var(--color-bakelite-border);
  border-radius: 4px;
  cursor: pointer;
  box-shadow:
        /* Enhanced depth shadows */ 0 3px 5px rgba(0, 0, 0, 0.6),
    /* Edge shadows for flared effect */ inset 3px 0 3px -2px rgba(0, 0, 0, 0.3),
    inset -3px 0 3px -2px rgba(0, 0, 0, 0.3),
    /* Top highlight */ inset 0 1px 0 rgba(255, 255, 255, 0.15),
    /* Bottom shadow for depth */ inset 0 -2px 3px rgba(0, 0, 0, 0.5),
    /* Stronger LED glow in the shadow */ inset 0 0 12px rgba(255, 204, 0, 0.3);
  margin-top: -10px;
  transition: var(--transition-button);
}

.feedback-slider::-moz-range-thumb {
  width: 44px;
  height: 24px;
  background:
        /* Triangle LED indicator */ linear-gradient(
      135deg,
      transparent 0%,
      transparent 50%,
      rgba(255, 204, 0, 0.9) 50%,
      rgba(255, 204, 0, 0.9) 100%
    ),
    linear-gradient(
      225deg,
      transparent 0%,
      transparent 50%,
      rgba(255, 204, 0, 0.9) 50%,
      rgba(255, 204, 0, 0.9) 100%
    ),
    /* LED glow effect */
      radial-gradient(
        ellipse at 50% 45%,
        rgba(255, 204, 0, 0.5) 0%,
        rgba(255, 204, 0, 0.2) 30%,
        transparent 50%
      ),
    /* Bakelite gradient */
      radial-gradient(
        ellipse 200% 100% at 50% 50%,
        var(--color-bakelite-1) 0%,
        var(--color-bakelite-2) 30%,
        var(--color-bakelite-3) 70%,
        var(--color-bakelite-4) 100%
      ),
    /* Overall gradient for depth */
      linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.12) 0%,
        rgba(255, 255, 255, 0.05) 30%,
        transparent 50%,
        rgba(0, 0, 0, 0.2) 70%,
        rgba(0, 0, 0, 0.35) 100%
      ),
    /* Molded plastic texture */
      radial-gradient(
        circle at 30% 30%,
        rgba(255, 255, 255, 0.08) 0%,
        transparent 30%
      );
  background-size: 6px 6px, 6px 6px, 20px 20px, 100% 100%, 100% 100%, 100% 100%;
  background-position: calc(50% - 3px) 42%, calc(50% + 3px) 42%, center 45%,
    center center, 0 0, 0 0;
  background-repeat: no-repeat;
  border: 1px solid var(--color-bakelite-border);
  border-radius: 4px;
  cursor: pointer;
  box-shadow:
        /* Enhanced depth shadows */ 0 3px 5px rgba(0, 0, 0, 0.6),
    /* Edge shadows for flared effect */ inset 3px 0 3px -2px rgba(0, 0, 0, 0.3),
    inset -3px 0 3px -2px rgba(0, 0, 0, 0.3),
    /* Top highlight */ inset 0 1px 0 rgba(255, 255, 255, 0.15),
    /* Bottom shadow for depth */ inset 0 -2px 3px rgba(0, 0, 0, 0.5),
    /* Stronger LED glow in the shadow */ inset 0 0 12px rgba(255, 204, 0, 0.3);
  transition: var(--transition-button);
}

/* Active state for thumb */
.feedback-slider:active::-webkit-slider-thumb {
  transform: translateY(1px);
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.6),
    inset 3px 0 3px -2px rgba(0, 0, 0, 0.3),
    inset -3px 0 3px -2px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.15), inset 0 -2px 3px rgba(0, 0, 0, 0.5),
    inset 0 0 12px rgba(255, 204, 0, 0.3);
}

.feedback-slider:active::-moz-range-thumb {
  transform: translateY(1px);
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.6),
    inset 3px 0 3px -2px rgba(0, 0, 0, 0.3),
    inset -3px 0 3px -2px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.15), inset 0 -2px 3px rgba(0, 0, 0, 0.5),
    inset 0 0 12px rgba(255, 204, 0, 0.3);
}

/* Disabled slider - LED is off */
.feedback-slider:disabled::-webkit-slider-thumb {
  cursor: not-allowed;
  background:
        /* Triangle LED OFF - dark grey/black */ linear-gradient(
      135deg,
      transparent 0%,
      transparent 50%,
      rgba(0, 0, 0, 0.9) 50%,
      rgba(0, 0, 0, 0.9) 100%
    ),
    linear-gradient(
      225deg,
      transparent 0%,
      transparent 50%,
      rgba(0, 0, 0, 0.9) 50%,
      rgba(0, 0, 0, 0.9) 100%
    ),
    /* No glow when disabled */ /* SAME bakelite gradient as enabled state */
      radial-gradient(
        ellipse 200% 100% at 50% 50%,
        var(--color-bakelite-1) 0%,
        var(--color-bakelite-2) 30%,
        var(--color-bakelite-3) 70%,
        var(--color-bakelite-4) 100%
      ),
    /* SAME depth gradient as enabled state */
      linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.12) 0%,
        rgba(255, 255, 255, 0.05) 30%,
        transparent 50%,
        rgba(0, 0, 0, 0.2) 70%,
        rgba(0, 0, 0, 0.35) 100%
      ),
    /* SAME molded plastic texture */
      radial-gradient(
        circle at 30% 30%,
        rgba(255, 255, 255, 0.08) 0%,
        transparent 30%
      );
  background-size: 6px 6px, 6px 6px, 100% 100%, 100% 100%, 100% 100%;
  background-position: calc(50% - 3px) 42%, calc(50% + 3px) 42%, center center,
    0 0, 0 0;
  background-repeat: no-repeat;
  border: 1px solid var(--color-bakelite-border);
  border-radius: 4px;
  box-shadow:
        /* SAME shadows as enabled state */ 0 3px 5px
      rgba(0, 0, 0, 0.6),
    inset 3px 0 3px -2px rgba(0, 0, 0, 0.3),
    inset -3px 0 3px -2px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.15), inset 0 -2px 3px rgba(0, 0, 0, 0.5);
  /* No LED glow when disabled */
}

.feedback-slider:disabled::-moz-range-thumb {
  cursor: not-allowed;
  background:
        /* Triangle LED OFF - dark grey/black */ linear-gradient(
      135deg,
      transparent 0%,
      transparent 50%,
      rgba(42, 42, 42, 0.9) 50%,
      rgba(42, 42, 42, 0.9) 100%
    ),
    linear-gradient(
      225deg,
      transparent 0%,
      transparent 50%,
      rgba(42, 42, 42, 0.9) 50%,
      rgba(42, 42, 42, 0.9) 100%
    ),
    /* No glow when disabled */ /* SAME bakelite gradient as enabled state */
      radial-gradient(
        ellipse 200% 100% at 50% 50%,
        var(--color-bakelite-1) 0%,
        var(--color-bakelite-2) 30%,
        var(--color-bakelite-3) 70%,
        var(--color-bakelite-4) 100%
      ),
    /* SAME depth gradient as enabled state */
      linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.12) 0%,
        rgba(255, 255, 255, 0.05) 30%,
        transparent 50%,
        rgba(0, 0, 0, 0.2) 70%,
        rgba(0, 0, 0, 0.35) 100%
      ),
    /* SAME molded plastic texture */
      radial-gradient(
        circle at 30% 30%,
        rgba(255, 255, 255, 0.08) 0%,
        transparent 30%
      );
  background-size: 6px 6px, 6px 6px, 100% 100%, 100% 100%, 100% 100%;
  background-position: calc(50% - 3px) 42%, calc(50% + 3px) 42%, center center,
    0 0, 0 0;
  background-repeat: no-repeat;
  border: 1px solid var(--color-bakelite-border);
  border-radius: 4px;
  box-shadow:
        /* SAME shadows as enabled state */ 0 3px 5px
      rgba(0, 0, 0, 0.6),
    inset 3px 0 3px -2px rgba(0, 0, 0, 0.3),
    inset -3px 0 3px -2px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.15), inset 0 -2px 3px rgba(0, 0, 0, 0.5);
  /* No LED glow when disabled */
}
/* Desktop - hide mobile status container */
.mobile-status-container {
  display: none;
}

.mobile-not-supported {
  display: none; /* Hidden by default on desktop */
  padding: 40px 20px;
  text-align: center;
  color: var(--color-charcoal);
  font-family: var(--font-family-retro-mono);
}
.mobile-not-supported h2 {
  font-size: 1.5rem;
  margin-bottom: 20px;
}
.mobile-not-supported p {
  font-size: 1rem;
  line-height: 1.6;
}

/* ============================================================
   === MOBILE RESPONSIVENESS - COMPLETE REWRITE ===
   ============================================================ */

@media (max-width: 768px) {
  .app-container,
  .post-container {
    display: none;
  }

  body {
    background: var(--color-beige-light);
  }

  .mobile-not-supported {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 20px;
    background: transparent;
  }

  .mobile-message-paper {
    width: 340px;
    min-width: 340px;
    max-width: 340px;
    padding: 30px 40px;
    background: var(--color-paper-light);
    background-image: radial-gradient(
        circle at 12.5px 15px,
        var(--color-dark-grey) 4px,
        transparent 4px
      ),
      repeating-linear-gradient(
        0deg,
        transparent,
        transparent 5px,
        var(--color-grey-mid) 5px,
        var(--color-grey-mid) 8px
      ),
      radial-gradient(
        circle at calc(100% - 12.5px) 15px,
        var(--color-dark-grey) 4px,
        transparent 4px
      ),
      repeating-linear-gradient(
        0deg,
        transparent,
        transparent 5px,
        var(--color-grey-mid) 5px,
        var(--color-grey-mid) 8px
      ),
      repeating-linear-gradient(
        180deg,
        rgba(144, 238, 144, 0.15) 0px,
        rgba(144, 238, 144, 0.15) 30px,
        transparent 30px,
        transparent 60px
      ),
      linear-gradient(
        180deg,
        var(--color-paper-light) 0%,
        var(--color-paper-dark) 100%
      );
    background-size: 30px 30px, 1px 100%, 30px 30px, 1px 100%, 100% 60px,
      100% 100%;
    background-position: 0 -15px, 30px 0, right 0 top -15px, calc(100% - 30px) 0,
      0 -15px, 0 0;
    background-repeat: repeat-y, repeat-y, repeat-y, repeat-y, repeat-y,
      no-repeat;
    border-radius: 10px;
    border: 6px solid var(--color-metallic);
    box-shadow: 0 0 0 2px var(--color-metallic-darker),
      inset 0 2px 0 rgba(255, 255, 255, 0.7), inset 0 3px 5px rgba(0, 0, 0, 0.1),
      inset 0 2px 8px rgba(0, 0, 0, 0.2), 0 4px 12px rgba(0, 0, 0, 0.3);
    position: relative;
  }

  .mobile-message-paper::before {
    content: "";
    position: absolute;
    top: -6px;
    left: -6px;
    right: -6px;
    bottom: -6px;
    border-radius: 10px;
    background: linear-gradient(
      135deg,
      var(--color-metallic-mid) 0%,
      var(--color-metallic-light) 45%,
      var(--color-metallic) 50%,
      var(--color-metallic-dark) 100%
    );
    z-index: -1;
  }

  /* TOP ASCII BORDER */
  .ascii-border {
    font-family: var(--font-family-retro-mono);
    color: var(--color-dark-grey);
    font-size: 14px;
    line-height: 1;
    text-align: center;
    margin-top: -20px;
    margin-bottom: 20px;
    opacity: 0.6;
    letter-spacing: 0;
  }

  /* H2 HEADING "DISPLAY TOO SMALL" */
  .mobile-not-supported h2 {
    font-family: var(--font-family-retro-mono);
    font-size: 29px;
    color: var(--color-charcoal);
    text-align: center;
    margin-top: 0;
    margin-bottom: 25px;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  /* GENERAL P RULE - styling only, no margins */
  .mobile-not-supported p {
    font-family: var(--font-family-retro-mono);
    font-size: 19px;
    line-height: 1.52;
    color: var(--color-charcoal);
    text-align: left;
  }

  /* FIRST PARAGRAPH - full control of positioning */
  .paragraph-first {
    margin-top: 20px;
    margin-bottom: 38px;
  }

  /* SECOND PARAGRAPH - full control of positioning */
  .paragraph-second {
    margin-top: 0px;
    margin-bottom: 25px;
  }

  /* BOTTOM ASCII BORDER */
  .ascii-border-bottom {
    font-family: var(--font-family-retro-mono);
    color: var(--color-dark-grey);
    font-size: 14px;
    line-height: 1;
    text-align: center;
    margin-top: 20px;
    margin-bottom: -20px;
    opacity: 0.6;
    letter-spacing: 0;
  }
}