body{
margin:0;
font-family:Arial, sans-serif;
background:#000;
color:white;
min-height:100vh;
}

/* MAIN AREA */

.main{
width:100%;
height:100vh;              /* FIX: force full viewport */
display:flex;
flex-direction:column;
justify-content:center;    /* center BEFORE chat */
align-items:center;
}

body.chat-mode .main{
height:auto;
justify-content:flex-start;
align-items:center;
padding-top:80px;
}

/* HEADER */

.header{
display:flex;
align-items:center;
gap:12px;
margin-bottom:25px;
}

.titleBlock{
display:flex;
flex-direction:column;
justify-content:center;
}

.logo{
width:100px;
height:100px;
object-fit:contain;
}

h1{
font-size:44px;
margin:0;
text-shadow:
0 0 6px rgba(255,255,255,0.7),
0 0 12px rgba(255,255,255,0.5),
0 0 25px rgba(255,255,255,0.3);
}

.subtitle{
margin:6px 0 0;
font-size:18px;
opacity:.9;
}

/* TEXTBOX */

.inputRow{
display:flex;
align-items:flex-end;
gap:12px;
}

textarea{
width:420px;
max-width:900px;
min-height:60px;
max-height:250px;

padding:16px;
font-size:26px;
line-height:1.4;

border-radius:10px;
border:1px solid #333;
background:#111;
color:white;

outline:none;
resize:none;

overflow-y:auto;

transition:width .35s ease,font-size .35s ease,height .2s ease;
}

textarea.active{
width:520px;
}

.sendBtn{
width:58px;
height:58px;
display:flex;
align-items:center;
justify-content:center;
border-radius:12px;
border:1px solid #333;
background:#111;
color:#fff;
cursor:pointer;
transition:transform .2s ease, background .2s ease, border-color .2s ease;
}

.sendBtn:hover{
background:#191919;
border-color:#4a4a4a;
}

.sendBtn:active{
transform:scale(.96);
}

.sendBtn svg{
width:24px;
height:24px;
fill:currentColor;
}

/* CREDIT */

.credit{
position:fixed;
bottom:12px;
right:18px;
display:flex;
align-items:center;
gap:6px;
font-size:18px;
opacity:.8;
}

.credit img{
width:35px;
height:35px;
}

/* ===================== */
/* CHAT MODE */
/* ===================== */

.hidden{
display:none;
}

/* IMPORTANT: chat doesn't interfere before activation */
.chatContainer{
display:none;
}

body.chat-mode .chatContainer{
display:flex;
flex-direction:column;
width:100%;
max-width:800px;
margin:0 auto;
padding:90px 10px 120px;
}


/* messages */

.userMsg, .botMsg, .agentMsg, .systemMsg {
    padding: 12px 16px;
    margin: 8px 0;
    border-radius: 12px;
    max-width: 70%;
    position: relative;
    padding-top: 30px; /* Space for sender label */
}

.senderLabel {
    position: absolute;
    top: 6px;
    left: 16px;
    font-size: 13px;
    font-weight: bold;
    opacity: 0.8;
}


.userMsg {
    background: #fff;
    color: #000;
    align-self: flex-end;
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.9), 0 0 12px rgba(255, 255, 255, 0.7), 0 0 25px rgba(255, 255, 255, 0.5);
    word-wrap: break-word;
}

.userMsg .senderLabel {
    color: #333;
}

.botMsg, .agentMsg {
    background: #222;
    align-self: flex-start;
}

.agentMsg .senderLabel {
    color: #a9a9a9; /* Lighter gray for agent names */
}

/* Agent-specific styling */
.agentMsg.agent-generator {
    color: #00d000;
    font-weight: bold;
}

.agentMsg.agent-negator {
    color: #ff4444;
    font-style: italic;
}

.agentMsg.agent-risk-analyzer {
    color: #4488ff;
}

.agentMsg.agent-constraint-enforcer {
    color: #ffffff;
}

.agentMsg.agent-refiner {
    color: #ffdd00;
}

.agentMsg.agent-moderator {
    color: #dd88ff;
    font-weight: bold;
}

.systemMsg {
    background: #3e1a1a;
    color: #ffcccc;
    align-self: center;
    width: 80%;
    text-align: center;
    font-style: italic;
}

.systemMsg .senderLabel {
    display: none; /* No sender label for system messages */
}

.typing {
    opacity: 0.6;
    animation: pulse 1s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}


/* switch layout AFTER first prompt */

body.chat-mode .main{
height:auto;
justify-content:flex-start;
align-items:center;
padding-top:80px;
}

/* header top */

body.chat-mode .header{
position:fixed;
top:0;
left:0;
width:100%;
height:70px;
justify-content:center;
background:#000;
z-index:10;
margin:0;
}

/* shrink */

body.chat-mode .logo{
width:50px;
height:50px;
}

body.chat-mode h1{
font-size:20px;
}

/* input bottom */

body.chat-mode .inputRow{
position:fixed;
bottom:0;
left:0;
width:100%;
justify-content:center;
padding:12px;
background:#000;
z-index:10;
}