/* R4Z Terminal UI - Noir Detective Aesthetic (Fully Integrated Theme) */

@font-face {
  font-family: 'DepartureMono';
  src: url('../fonts/DepartureMono-Regular.woff2') format('woff2'),
       url('../fonts/DepartureMono-Regular.woff') format('woff'),
       url('../fonts/DepartureMono-Regular.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

:root {
  /* Site Theme Colors - Extracted from your material CSS files */
  --site-blue: #0052bd;
  --site-cyan: #49dffc;
  --site-bg-light: #fafafa;
  --site-bg-dark: #161718;
  --site-card-dark: #2a2c2d;

  /* Default (Light Mode) */
  --terminal-accent: var(--site-blue);
  --terminal-text: var(--site-blue);
  --terminal-bg: var(--site-bg-light);
  --terminal-border: #ddd;
  --terminal-glow: rgba(0, 82, 189, 0.15);
  --terminal-scanline: rgba(0, 0, 0, 0.02);
  --btn-text: white;
  --btn-hover-bg: rgba(0, 82, 189, 0.1);
  --btn-hover-text: var(--site-blue);
}

body.dark-mode {
  --terminal-accent: var(--site-cyan);
  --terminal-text: var(--site-cyan);
  --terminal-bg: var(--site-bg-dark);
  --terminal-border: #333;
  --terminal-glow: rgba(73, 223, 253, 0.2);
  --terminal-scanline: rgba(255, 255, 255, 0.03);
  --btn-text: black;
  --btn-hover-bg: var(--site-cyan);
  --btn-hover-text: black;
}

#r4z-full-page-chat {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  position: relative;
}

.r4z-auth-wall {
  position: relative;
}

.r4z-floating-logout {
  position: absolute;
  top: 15px;
  right: 15px;
  z-index: 100;
}

#r4z-logout-btn, .r4z-logout-btn {
  background: var(--terminal-bg);
  border: 2px solid var(--terminal-accent);
  color: var(--terminal-accent);
  padding: 6px 10px;
  cursor: pointer;
  text-transform: uppercase;
  font-size: 0.9em;
  font-weight: 700;
  font-family: inherit;
  transition: all 0.2s;
  flex-shrink: 0;
  opacity: 0.6;
  border-radius: 4px;
}

@media (max-width: 480px) {
  .r4z-floating-logout {
    top: 10px;
    right: 10px;
  }
}

#r4z-logout-btn:hover, .r4z-logout-btn:hover {
  background-color: var(--btn-hover-bg);
  color: var(--btn-hover-text);
  opacity: 1;
}

/* Landing State */
.r4z-landing {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 20px;
  z-index: 6;
  width: 100%;
  box-sizing: border-box;
}

.r4z-greeting-title {
  font-family: 'm4ttbit', sans-serif;
  font-size: clamp(2.2em, 8vw, 3.2em); /* Restored to original balanced size */
  color: var(--terminal-accent);
  letter-spacing: 4px;
  margin: 0 !important;
  padding: 0 !important;
  margin-bottom: 4px !important;
  text-align: center !important;
  width: 100% !important;
  display: block !important;
  box-sizing: border-box !important;
}

.r4z-greeting-subtitle {
  font-family: 'DepartureMono', 'Courier New', Courier, monospace;
  font-size: clamp(0.8em, 4vw, 1.1em);
  opacity: 0.8;
  margin: 0 auto 40px auto;
  max-width: 100%;
  width: fit-content;
  text-align: center;
}

/* Screens with Typewriter Effect */
#r4z-auth-wall .r4z-greeting-subtitle {
  width: 21ch;
  white-space: nowrap;
  overflow: hidden;
  border-right: 2px solid var(--terminal-accent);
  animation: typing-21 2s steps(21) forwards, blink-caret .75s step-end infinite;
}

#r4z-register-wall .r4z-greeting-subtitle {
  width: 20ch;
  white-space: nowrap;
  overflow: hidden;
  border-right: 2px solid var(--terminal-accent);
  animation: typing-20 2s steps(20) forwards, blink-caret .75s step-end infinite;
}

@keyframes typing-21 { from { width: 0 } to { width: 21ch } }
@keyframes typing-20 { from { width: 0 } to { width: 20ch } }
@keyframes typing-23 { from { width: 0 } to { width: 23ch } }
@keyframes typing-26 { from { width: 0 } to { width: 26ch } }

/* Screens WITHOUT Typewriter Effect (Immediate Reveal) */
#r4z-notify-wall .r4z-greeting-subtitle,
#r4z-denied-wall .r4z-greeting-subtitle {
  white-space: normal;
  overflow: visible;
  width: 100%;
  border-right: none;
  animation: none;
}

@keyframes typing-23 { from { width: 0 } to { width: 23ch } }
@keyframes typing-26 { from { width: 0 } to { width: 26ch } }
@keyframes typing-45 { from { width: 0 } to { width: 45ch } }

.r4z-chat-tagline {
  font-family: 'DepartureMono', 'Courier New', Courier, monospace;
  font-size: clamp(0.7em, 2.1vw, 1.5em);
  opacity: 0.8;
  margin: 0 auto 40px auto;
  border-right: 2px solid var(--terminal-accent);
  white-space: nowrap;
  overflow: hidden;
  max-width: 100%;
  width: 45ch;
  animation: typing-45 3s steps(45) forwards, blink-caret .75s step-end infinite;
}

/* Specific wall overrides */
#r4z-auth-wall .r4z-greeting-subtitle,
#r4z-register-wall .r4z-greeting-subtitle {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

#r4z-notify-wall .r4z-greeting-subtitle,
#r4z-denied-wall .r4z-greeting-subtitle {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: fit-content;
}

@keyframes blink-caret { from, to { border-color: transparent } 50% { border-color: var(--terminal-accent); } }

.r4z-suggestions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
  max-width: 800px;
  padding: 0 10px;
}

.r4z-suggestion-card {
  padding: 10px 15px;
  border: 2px solid var(--terminal-accent);
  cursor: pointer;
  background: var(--terminal-bg);
  transition: all 0.2s;
  text-transform: uppercase;
  font-size: 0.85em;
  color: var(--terminal-accent);
  flex: 1 1 auto;
  min-width: 150px;
}

.r4z-suggestion-card:hover {
  background-color: var(--btn-hover-bg);
  color: var(--btn-hover-text);
  box-shadow: 0 0 15px var(--terminal-glow);
}

/* Messages Area */
.r4z-messages {
  flex-grow: 1;
  padding: 24px 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 6;
  width: 100%;
  box-sizing: border-box;
}

@media (max-width: 600px) {
  .r4z-messages {
    padding: 20px 15px;
  }
}

.r4z-message-wrapper {
  display: flex;
  gap: 8px;
  scroll-margin-top: 60px;
  align-items: flex-start; /* Ensure everything starts at the same top point */
}

.r4z-msg-text,
.r4z-msg-text p,
.r4z-msg-text li,
.r4z-thinking {
  font-size: 16px !important;
  line-height: 1.8em !important;
}

body.dark-mode .r4z-msg-text,
body.dark-mode .r4z-msg-text p,
body.dark-mode .r4z-msg-text li,
body.dark-mode .r4z-thinking {
  font-size: 18px !important;
  line-height: 1.8em !important;
}

.r4z-msg-text p {
  margin: 0 0 1rem 0 !important;
}

.r4z-msg-text p:last-child {
  margin-bottom: 0 !important;
}

/* Tighter connection between text and following code blocks */
.r4z-msg-text p + pre,
.r4z-msg-text p + .code-toolbar {
  margin-top: -0.5rem !important;
}

.r4z-avatar {
  font-weight: bold;
  flex-shrink: 0;
  color: var(--terminal-accent);
  white-space: nowrap;
  font-size: 16px !important;
  line-height: 1.8em !important;
  margin-top: 0 !important;
}

body.dark-mode .r4z-avatar {
  font-size: 18px !important;
  line-height: 1.8em !important;
}

.r4z-avatar-r4z::before { content: "[R4Z]: "; }
.r4z-avatar-user::before { content: "[YOU]: "; }

@media (max-width: 480px) {
  .r4z-avatar-r4z::before { content: "[R]: "; }
  .r4z-avatar-user::before { content: "[U]: "; }
}

.r4z-msg-content {
  flex-grow: 1;
  min-width: 0;
}

.r4z-msg-text {
  word-wrap: break-word;
  overflow-wrap: break-word;
  display: flex;
  flex-direction: column;
}

.r4z-msg-text blockquote {
  margin: 12px 0 12px 20px;
  padding-left: 15px;
  border-left: 3px solid var(--terminal-accent);
  font-style: normal;
  font-size: inherit;
  font-weight: 400;
  color: inherit;
  position: relative;
}

.r4z-msg-text blockquote::before,
.r4z-msg-text blockquote::after {
  content: none !important;
}

.r4z-msg-text ul, .r4z-msg-text ol { 
  list-style: "> "; 
  padding-left: 20px; 
  margin: 5px 0 16px 0;
  column-count: 1 !important;
  columns: auto !important;
}

.r4z-msg-text :not(pre) > code {
  font-family: 'DepartureMono', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
  background-color: #eef3f9;
  color: #ae0b0b;
  padding: 0.2em 0.4em;
  border-radius: 6px;
  border: 1px solid rgba(27, 31, 35, 0.08);
  font-size: 90%;
}

body.dark-mode .r4z-msg-text :not(pre) > code {
  background-color: rgba(255, 255, 255, 0.103);
  color: #49fc70;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.r4z-msg-text pre,
.r4z-msg-text div.code-toolbar {
  margin: 1em 0;
}

.r4z-msg-text div.code-toolbar pre {
  margin: 0;
}

.r4z-msg-text pre {
  border-radius: 0px;
  overflow-x: auto;
}

.r4z-msg-text pre code {
  background: none !important;
  color: inherit !important;
  padding: 0 !important;
  border: none !important;
}

.r4z-msg-text pre[class*="language-"] {
  border-radius: 0px;
}

/* Input Area */
.r4z-input-area-container {
  padding: 20px;
  background: var(--terminal-bg);
  border-top: 1px solid var(--terminal-accent);
  z-index: 6;
  opacity: 0.95;
  width: 100%;
  box-sizing: border-box;
}

@media (max-width: 600px) {
  .r4z-input-area-container {
    padding: 15px;
  }
}

.r4z-input-form {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 800px;
  margin: 0 auto;
  border: none !important;
  box-shadow: none !important;
}

.r4z-prompt {
  font-weight: bold;
  color: var(--terminal-accent);
  flex-shrink: 0;
}

.r4z-input-wrapper {
  flex-grow: 1;
  display: flex;
  align-items: center;
  min-width: 0;
  height: 100%;
}

.r4z-input {
  width: 100%;
  background: transparent;
  border: none;
  color: inherit;
  font-family: Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 24px;
  text-shadow: 0 0 2px var(--terminal-glow);
  outline: none;
  margin: 0;
  padding: 0;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
  box-sizing: border-box;
  resize: none;
  white-space: normal;
  word-break: break-word;
  height: 24px; 
  min-height: 24px;
  max-height: 72px; /* Expand up to 3 lines */
  display: block;
  overflow-y: auto;
  caret-color: var(--terminal-accent);
}

@media (max-width: 480px) {
  .r4z-input {
    font-size: 16px !important;
    line-height: 24px;
    height: 24px;
  }
}

.r4z-input:focus,
.r4z-input:focus-visible {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}

body.dark-mode .r4z-input {
  font-weight: 500;
}

.r4z-send-btn {
  background: var(--terminal-bg);
  border: 2px solid var(--terminal-accent);
  color: var(--terminal-accent);
  padding: 6px 16px;
  cursor: pointer;
  text-transform: uppercase;
  font-size: 0.85em;
  font-weight: 700;
  font-family: inherit;
  transition: all 0.2s;
  flex-shrink: 0;
}

@media (max-width: 480px) {
  .r4z-send-btn {
    padding: 6px 12px;
    font-size: 0.8em;
  }
}

.r4z-send-btn:hover {
  background-color: var(--btn-hover-bg);
  color: var(--btn-hover-text);
}

.r4z-disclaimer {
  font-family: 'DepartureMono', 'Courier New', Courier, monospace;
  font-size: 10px;
  text-align: center;
  opacity: 0.4;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  pointer-events: none;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
}

/* Scoped override for MDL mini-footer to match header height (64px) */
.mdl-mini-footer {
  padding: 14px 16px !important;
  height: 64px;
  box-sizing: border-box;
  position: relative; /* Essential for absolute positioning of disclaimer */
  display: flex !important;
  align-items: center !important;
  flex-shrink: 0 !important; /* Prevents footer from being squashed */
}

.page-content,
#r4z-main-chat,
#r4z-full-page-chat {
  min-height: 0; /* Essential flexbox fix to allow containers to shrink */
}

@media (max-width: 600px) {
  .mdl-mini-footer {
    display: flex !important;
    -webkit-flex-flow: row wrap !important;
    -ms-flex-flow: row wrap !important;
    flex-flow: row wrap !important;
    -webkit-justify-content: space-between !important;
    -ms-flex-pack: justify !important;
    justify-content: space-between !important;
    padding: 32px 16px !important;
    height: auto !important;
    min-height: 0 !important;
    background-color: #1e2021 !important; /* Match site-wide footer color */
    gap: 0 !important; /* Let margins handle vertical spacing */
  }
  
  .r4z-disclaimer {
    position: static !important;
    transform: none !important;
    order: 1; /* Disclaimer on top */
    margin: 0 0 16px 0 !important;
    padding: 0 0 0 20px !important; /* Match the 20px inline padding of other sections */
    opacity: 0.6;
    white-space: normal !important;
    text-align: left !important;
    width: 100% !important;
    line-height: 1.4;
  }

  .r4z-disclaimer .mobile-break {
    display: block;
    margin-top: 2px;
  }

  .mdl-mini-footer__left-section {
    order: 2; /* Socials in middle */
    margin: 0 !important; /* Minimized gap with copyright line below */
    padding: 0 !important;
    display: flex !important;
    justify-content: flex-start !important;
    width: 100% !important;
  }

  .mdl-mini-footer__right-section {
    order: 3; /* Copyright at bottom */
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    justify-content: flex-start !important;
    width: 100% !important;
  }

  .mdl-mini-footer__left-section .mdl-logo,
  .mdl-mini-footer__right-section .mdl-logo {
    margin: 0 !important;
    text-align: left !important;
    font-size: 16px !important;
    /* Removed padding override to allow 20px inline style to work */
  }

  /* Specific fix for social icon alignment on mobile */
  .mdl-mini-footer__left-section .mdl-logo span:first-child {
    padding-left: 0 !important;
  }
}

/* Auth Wall */
.r4z-auth-wall {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  overflow-y: auto;
  background-color: var(--terminal-bg);
  z-index: 10;
  padding: 20px;
}

.r4z-auth-wall::before,
.r4z-auth-wall::after {
  content: '';
  margin: auto;
}

.r4z-auth-card {
  text-align: center;
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 15px 20px;
  background-color: var(--terminal-bg);
  box-sizing: border-box;
  margin: 0 auto;
}

.r4z-auth-header {
  width: 100%;
  text-align: center;
  margin-bottom: 8px; /* Tightened from 24px */
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 20px;
}

.r4z-auth-header .r4z-greeting-subtitle {
  font-size: clamp(0.9em, 3.5vw, 1.1em);
  opacity: 0.6;
}

.r4z-google-btn {
  background: var(--terminal-bg);
  color: var(--terminal-accent);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 42px;
  border-radius: 8px;
  border: 2px solid var(--terminal-accent);
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.9em;
  transition: all 0.2s;
  box-sizing: border-box;
}

.r4z-google-btn:hover {
  background-color: var(--btn-hover-bg);
  color: var(--btn-hover-text);
  transform: translateY(-1px);
}

.r4z-email-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.r4z-email-form input {
  padding: 0 14px;
  height: 42px;
  border-radius: 8px;
  border: 2px solid var(--terminal-accent);
  background: var(--terminal-bg);
  color: inherit;
  font-family: inherit;
  font-size: 0.9em;
  box-sizing: border-box;
}

.r4z-primary-btn {
  background-color: var(--terminal-bg);
  color: var(--terminal-accent);
  width: 100%;
  height: 42px;
  border-radius: 8px;
  font-weight: 700;
  cursor: pointer;
  border: 2px solid var(--terminal-accent);
  font-family: inherit;
  font-size: 1em;
  transition: all 0.2s;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}

.r4z-primary-btn:hover {
  background-color: var(--btn-hover-bg);
  color: var(--btn-hover-text);
  transform: translateY(-1px);
}

.r4z-divider {
  margin: 30px 0; /* Increased vertical margin to prevent overlap */
  border-top: 1px solid var(--terminal-accent);
  width: 100%;
  position: relative;
}

.r4z-divider span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--terminal-bg);
  padding: 0 12px;
  font-size: 0.7em;
  font-weight: 700;
  z-index: 1;
}

.r4z-auth-footer {
  margin-top: 4px; /* Reduced top margin to repurpose space */
  font-size: 0.8em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.r4z-auth-footer a {
  color: var(--terminal-accent);
  text-decoration: none;
}

/* Height-based responsiveness for short screens */
/* Aggressive compacting starts early to protect the 500px viewing area */
@media (max-height: 750px) {
  .r4z-auth-card {
    padding: 10px 20px;
    gap: 18px;
    margin: 0 auto;
  }
  .r4z-divider {
    margin: 12px 0;
  }
  .r4z-auth-footer {
    margin-top: 8px;
  }
}

@media (max-height: 650px) {
  .r4z-auth-card {
    padding: 10px 20px;
    gap: 14px;
  }
  .r4z-google-btn, .r4z-email-form input, .r4z-primary-btn, #r4z-birth-year, #r4z-parent-email {
    height: 38px;
  }
  .r4z-divider {
    margin: 8px 0;
  }
  .r4z-auth-footer {
    margin-top: 4px;
  }
}

@media (max-height: 550px) {
  .r4z-auth-wall {
    padding: 0 10px;
  }
  .r4z-auth-card {
    padding: 5px 20px;
    gap: 10px;
    margin: 0 auto;
  }
  .r4z-google-btn, .r4z-email-form input, .r4z-primary-btn, #r4z-birth-year, #r4z-parent-email {
    height: 32px;
    font-size: 0.8em;
  }
  .r4z-divider {
    margin: 4px 0;
  }
  .r4z-auth-footer {
    margin-top: 2px;
    font-size: 0.7em;
  }
}

.r4z-thinking {
  font-family: inherit;
  color: inherit;
  font-style: italic;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 1ch;
}

#r4z-thinking-blocks {
  display: inline-block;
  font-family: 'DepartureMono', monospace;
  font-style: normal;
  color: var(--terminal-accent);
  text-shadow: 0 0 5px var(--terminal-glow);
  white-space: pre;
  min-width: 10ch;
}

/* ASCII Art Styling & Stabilization */
.r4z-art, 
.self-portrait-art, 
.r4z-msg-text pre[style*="monospace"] {
  white-space: pre !important;
  display: block !important;
  align-self: flex-start !important;
  width: auto !important;
  max-width: 100% !important;
  overflow: visible !important; 
  line-height: 1 !important;
  border-radius: 0 !important;
  /* Use FSEX302 at its native 12pt (16px) size for pixel-perfection */
  font-family: 'FSEX302', monospace !important;
  font-size: 16px !important;
  text-align: left !important;
  letter-spacing: 0 !important;
  word-spacing: 0 !important;
  -webkit-text-size-adjust: 100% !important;
  text-rendering: optimizeSpeed !important; /* Disables anti-aliasing for sharper pixels */
  padding: 0 !important;
  margin: 12px 0 !important;
}

.r4z-art {
  color: var(--terminal-accent);
  text-shadow: 0 0 5px var(--terminal-glow);
}

.self-portrait-art {
  color: var(--terminal-accent);
}

@media (max-width: 480px) {
  .r4z-art, 
  .self-portrait-art, 
  .r4z-msg-text pre[style*="monospace"] {
    font-size: 12px !important; /* Scale down to next stable boundary for small screens */
  }
}

/* Scrollbar Styling for Terminal Components */
.r4z-messages::-webkit-scrollbar,
.r4z-input::-webkit-scrollbar {
  width: 4px;
}

.r4z-messages::-webkit-scrollbar-thumb,
.r4z-input::-webkit-scrollbar-thumb {
  background: var(--terminal-accent);
  border-radius: 0;
}

.r4z-messages::-webkit-scrollbar-track,
.r4z-input::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
}

body.dark-mode .r4z-messages::-webkit-scrollbar-track,
body.dark-mode .r4z-input::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
}

/* Scrollbar for Firefox */
.r4z-messages,
.r4z-input {
  scrollbar-width: thin;
  scrollbar-color: var(--terminal-accent) transparent;
}