.container {
display: flex;
flex-direction: column;
height: 100%;
background: var(--bg-primary);
}
.header {
display: flex;
align-items: center;
gap: var(--spacing-sm);
padding: var(--spacing-md);
background: var(--bg-secondary);
border-bottom: 1px solid var(--border-color);
transition: all 0.5s ease;
}
/* JAILED STATE (Blood Mode) */
.header.jailed {
background: #330000;
border-bottom: 1px solid #ff0000;
animation: pulseRed 2s infinite;
}
@keyframes pulseRed {
0% {
box-shadow: 0 0 10px #ff0000 inset;
}
50% {
box-shadow: 0 0 30px #ff0000 inset;
}
100% {
box-shadow: 0 0 10px #ff0000 inset;
}
}
.headerIcon {
color: var(--accent-cyan);
}
.headerIcon.alarm-active {
color: #ff0000;
animation: flashIcon 0.5s infinite;
}
@keyframes flashIcon {
0% {
opacity: 1;
text-shadow: 0 0 10px #ff0000;
}
50% {
opacity: 0.3;
}
100% {
opacity: 1;
text-shadow: 0 0 10px #ff0000;
}
}
.headerTitle {
font-size: 0.75rem;
letter-spacing: 0.1em;
color: var(--text-secondary);
text-transform: uppercase;
}
.messages {
flex: 1;
overflow-y: auto;
padding: var(--spacing-lg);
display: flex;
flex-direction: column;
gap: var(--spacing-md);
}
/* Welcome Screen */
.welcome {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
text-align: center;
gap: var(--spacing-lg);
}
.welcomeTitle {
font-size: 1.5rem;
color: var(--accent-green);
text-shadow: 0 0 20px var(--accent-green);
}
.welcomeText {
max-width: 400px;
color: var(--text-secondary);
line-height: 1.6;
}
.suggestions {
display: flex;
flex-direction: column;
gap: var(--spacing-sm);
margin-top: var(--spacing-lg);
}
.suggestionLabel {
font-size: 0.75rem;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.1em;
}
.suggestion {
background: transparent;
border: 1px solid var(--border-color);
color: var(--text-secondary);
padding: var(--spacing-sm) var(--spacing-md);
font-family: var(--font-mono);
font-size: 0.875rem;
cursor: pointer;
transition: all var(--transition-fast);
}
.suggestion:hover {
border-color: var(--accent-cyan);
color: var(--accent-cyan);
background: rgba(0, 255, 255, 0.05);
}
/* Messages */
.message {
padding: var(--spacing-md);
border-radius: 4px;
animation: slideIn 0.3s ease;
}
@keyframes slideIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.user {
background: var(--bg-elevated);
border-left: 3px solid var(--accent-cyan);
align-self: flex-end;
max-width: 80%;
}
.agent {
background: var(--bg-secondary);
border-left: 3px solid var(--accent-green);
max-width: 90%;
}
.system {
background: transparent;
border: 1px dashed var(--border-color);
color: var(--text-muted);
font-size: 0.875rem;
text-align: center;
}
.messageHeader {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--spacing-sm);
}
.messageRole {
font-size: 0.6875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--text-muted);
}
.user .messageRole {
color: var(--accent-cyan);
}
.agent .messageRole {
color: var(--accent-green);
}
.messageTime {
font-size: 0.6875rem;
color: var(--text-muted);
}
.messageContent {
color: var(--text-primary);
line-height: 1.85; /* Increased for "blackspace" legibility */
white-space: pre-wrap;
letter-spacing: 0.01em;
margin-top: 4px;
}
/* Alternating paragraph colors for visual distinction */
/* Paragraphs are separated by double newlines in pre-wrap, we style via line groups */
.messageContent p:nth-child(even),
.paragraphGold {
color: #d4a853; /* Off-gold/amber accent */
}
/* Line-based alternation for pre-wrap content (via JS class injection) */
.agent .messageContent .altLine {
color: #d4a853;
}
.blockedBanner {
background: rgba(255, 68, 68, 0.1);
border: 1px solid var(--accent-red);
color: var(--accent-red);
padding: var(--spacing-sm);
margin-bottom: var(--spacing-sm);
font-size: 0.75rem;
text-align: center;
}
.messageMetadata {
display: flex;
gap: var(--spacing-sm);
margin-top: var(--spacing-sm);
flex-wrap: wrap;
}
.metaBadge {
font-size: 0.6875rem;
padding: 2px 8px;
background: rgba(0, 255, 0, 0.1);
border: 1px solid var(--accent-green);
color: var(--accent-green);
}
.metaBadge.filtered {
background: rgba(255, 221, 0, 0.1);
border-color: var(--accent-yellow);
color: var(--accent-yellow);
}
.thinking {
opacity: 0.7;
}
.thinkingDots {
display: flex;
gap: 4px;
}
.thinkingDots span {
animation: bounce 1.4s infinite;
color: var(--accent-green);
}
.thinkingDots span:nth-child(2) {
animation-delay: 0.2s;
}
.thinkingDots span:nth-child(3) {
animation-delay: 0.4s;
}
@keyframes bounce {
0%,
80%,
100% {
transform: translateY(0);
}
40% {
transform: translateY(-6px);
}
}
/* Input Area */
.inputArea {
position: relative;
background: var(--bg-secondary);
border-top: 1px solid var(--border-color);
}
.blockedOverlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(50, 0, 0, 0.9);
display: flex;
align-items: center;
justify-content: center;
gap: var(--spacing-sm);
z-index: 10;
color: #ff0000;
font-family: var(--font-mono);
font-weight: 700;
letter-spacing: 0.2em;
animation: pulseText 2s infinite;
}
@keyframes pulseText {
0% {
opacity: 0.7;
}
50% {
opacity: 1;
}
100% {
opacity: 0.7;
}
}
.blockedIcon {
font-size: 1.5rem;
}
.inputForm {
display: flex;
align-items: center;
gap: var(--spacing-sm);
padding: var(--spacing-md);
}
.prompt {
color: var(--accent-green);
font-weight: 600;
font-size: 1.125rem;
}
.input {
flex: 1;
background: var(--bg-terminal);
border: 1px solid var(--border-color);
color: var(--text-primary);
font-family: var(--font-mono);
font-size: 0.9375rem;
padding: var(--spacing-sm) var(--spacing-md);
outline: none;
transition: border-color var(--transition-fast);
}
.input:focus {
border-color: var(--accent-green);
}
.input::placeholder {
color: var(--text-muted);
}
.input:disabled {
opacity: 0.1;
cursor: not-allowed;
border-color: #330000;
}
.sendButton {
background: var(--accent-green);
border: none;
color: var(--bg-primary);
font-family: var(--font-mono);
font-size: 0.75rem;
font-weight: 600;
padding: var(--spacing-sm) var(--spacing-md);
letter-spacing: 0.1em;
cursor: pointer;
transition: all var(--transition-fast);
}
.sendButton:hover:not(:disabled) {
background: var(--text-primary);
}
.sendButton:disabled {
opacity: 0.3;
cursor: not-allowed;
}
.suggestionGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--spacing-sm);
max-width: 600px;
}
.followUps {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-sm);
margin-top: var(--spacing-sm);
padding-left: var(--spacing-md);
margin-bottom: var(--spacing-md);
animation: fadeIn 0.5s ease;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.followUpBtn {
background: rgba(0, 255, 255, 0.05);
border: 1px solid var(--border-color);
color: var(--accent-cyan);
padding: 4px 12px;
font-family: var(--font-mono);
font-size: 0.75rem;
cursor: pointer;
transition: all var(--transition-fast);
border-radius: 2px;
}
.followUpBtn:hover {
background: rgba(0, 255, 255, 0.15);
border-color: var(--accent-cyan);
box-shadow: 0 0 10px rgba(0, 255, 255, 0.2);
}
/* ==========================================================================
SECURE UPLINK HUD - Neo-Brutalist Terminal Interface
========================================================================== */
/* Scanline Animation */
@keyframes hudScanline {
0% {
transform: translateY(-100%);
}
100% {
transform: translateY(100%);
}
}
/* Pulsing LED */
@keyframes ledPulse {
0%,
100% {
opacity: 1;
box-shadow:
0 0 8px var(--accent-cyan),
0 0 16px var(--accent-cyan);
}
50% {
opacity: 0.6;
box-shadow: 0 0 4px var(--accent-cyan);
}
}
/* Typewriter reveal for transmission log */
@keyframes typeReveal {
from {
opacity: 0;
transform: translateX(-10px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
/* HUD Overlay Container */
.contactOverlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.92);
backdrop-filter: blur(12px);
display: flex;
align-items: center;
justify-content: center;
z-index: 100;
padding: var(--spacing-lg);
}
/* Main HUD Container */
.contactForm {
background: rgba(10, 10, 10, 0.95);
border: 1px solid var(--accent-cyan);
width: 100%;
max-width: 720px;
padding: 0;
box-shadow:
0 0 40px rgba(0, 255, 255, 0.15),
inset 0 0 60px rgba(0, 0, 0, 0.8);
position: relative;
overflow: hidden;
}
/* Scanline Overlay Effect */
.contactForm::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 100%;
background: linear-gradient(
0deg,
transparent 0%,
rgba(0, 255, 255, 0.03) 50%,
transparent 100%
);
height: 60px;
animation: hudScanline 4s linear infinite;
pointer-events: none;
z-index: 10;
}
/* HUD Header */
.contactHeader {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--spacing-md) var(--spacing-lg);
background: rgba(0, 0, 0, 0.6);
color: var(--accent-cyan);
font-weight: 700;
letter-spacing: 0.2em;
font-size: 0.75rem;
border-bottom: 1px solid var(--accent-cyan);
text-transform: uppercase;
}
.contactHeader button {
background: transparent;
border: 1px solid var(--text-muted);
color: var(--text-muted);
cursor: pointer;
font-size: 0.875rem;
padding: 4px 12px;
font-family: var(--font-mono);
transition: all var(--transition-fast);
}
.contactHeader button:hover {
border-color: var(--accent-cyan);
color: var(--accent-cyan);
}
/* Split-Pane Layout */
.hudBody {
display: grid;
grid-template-columns: 1fr 1.3fr;
min-height: 320px;
}
/* Left Panel - Data Manifest */
.hudDataManifest {
background: rgba(0, 0, 0, 0.6);
padding: var(--spacing-lg);
border-right: 1px solid rgba(0, 255, 255, 0.2);
display: flex;
flex-direction: column;
gap: var(--spacing-md);
}
.hudSectionTitle {
font-size: 0.625rem;
color: var(--text-muted);
letter-spacing: 0.15em;
text-transform: uppercase;
margin-bottom: var(--spacing-sm);
border-bottom: 1px solid var(--border-color);
padding-bottom: var(--spacing-xs);
}
.hudStatRow {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.8125rem;
padding: var(--spacing-xs) 0;
}
.hudStatLabel {
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.1em;
font-size: 0.6875rem;
}
.hudStatValue {
color: var(--text-primary);
font-family: var(--font-mono);
letter-spacing: 0.05em;
}
/* Status with LED */
.hudStatusRow {
display: flex;
align-items: center;
gap: var(--spacing-sm);
}
.hudLed {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--accent-cyan);
animation: ledPulse 2s ease-in-out infinite;
}
.hudStatusText {
color: var(--accent-cyan);
font-weight: 600;
letter-spacing: 0.1em;
}
/* Right Panel - Input Console */
.hudInputConsole {
padding: var(--spacing-lg);
display: flex;
flex-direction: column;
gap: var(--spacing-md);
}
.formGroup {
margin-bottom: 0;
}
.formGroup label {
display: block;
font-size: 0.625rem;
color: var(--accent-cyan);
margin-bottom: 6px;
letter-spacing: 0.15em;
text-transform: uppercase;
}
/* Terminal-style inputs */
.formGroup input,
.formGroup textarea {
width: 100%;
background: transparent;
border: none;
border-bottom: 1px solid var(--border-color);
color: var(--text-primary);
padding: var(--spacing-sm) 0;
font-family: var(--font-mono);
font-size: 0.875rem;
letter-spacing: 0.05em;
outline: none;
transition: border-color var(--transition-fast);
}
.formGroup input::placeholder,
.formGroup textarea::placeholder {
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.1em;
font-size: 0.75rem;
}
.formGroup input:focus,
.formGroup textarea:focus {
border-color: var(--accent-cyan);
box-shadow: 0 2px 0 var(--accent-cyan);
}
.formGroup textarea {
resize: none;
min-height: 80px;
}
/* Submit Button */
.submitBtn {
width: 100%;
background: transparent;
border: 1px solid var(--accent-cyan);
color: var(--accent-cyan);
padding: var(--spacing-md);
font-family: var(--font-mono);
font-weight: 700;
font-size: 0.75rem;
letter-spacing: 0.2em;
text-transform: uppercase;
cursor: pointer;
margin-top: var(--spacing-md);
transition: all var(--transition-fast);
}
.submitBtn:hover {
background: var(--accent-cyan);
color: var(--bg-primary);
box-shadow: 0 0 20px rgba(0, 255, 255, 0.3);
}
/* ==========================================================================
TRANSMISSION LOG - Post-Submit Animation
========================================================================== */
.transmissionLog {
padding: var(--spacing-xl);
font-family: var(--font-mono);
min-height: 280px;
display: flex;
flex-direction: column;
justify-content: center;
}
.transmissionLine {
font-size: 0.875rem;
color: var(--accent-cyan);
padding: var(--spacing-xs) 0;
opacity: 0;
animation: typeReveal 0.3s ease forwards;
}
.transmissionLine.done {
color: var(--accent-green);
}
.transmissionLine .status {
float: right;
font-weight: 600;
}
.transmissionComplete {
margin-top: var(--spacing-xl);
text-align: center;
animation: typeReveal 0.5s ease forwards;
animation-delay: 0.2s;
opacity: 0;
}
.transmissionComplete h3 {
color: var(--accent-cyan);
letter-spacing: 0.15em;
margin-bottom: var(--spacing-md);
font-size: 1rem;
}
/* Responsive: Stack panels on mobile */
@media (max-width: 600px) {
.hudBody {
grid-template-columns: 1fr;
}
.hudDataManifest {
border-right: none;
border-bottom: 1px solid rgba(0, 255, 255, 0.2);
}
.contactForm {
max-width: 100%;
}
}
/* Legacy success styles - kept for fallback */
.successMessage {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
gap: var(--spacing-md);
padding: var(--spacing-lg);
animation: fadeIn 0.5s ease;
}
.successIcon {
font-size: 3rem;
color: var(--accent-cyan);
border: 2px solid var(--accent-cyan);
width: 80px;
height: 80px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: var(--spacing-md);
box-shadow: 0 0 20px rgba(0, 255, 255, 0.2);
}
.successMessage h3 {
color: var(--accent-cyan);
letter-spacing: 0.1em;
margin: 0;
}
.successMessage p {
color: var(--text-secondary);
line-height: 1.6;
}
