/* Shared ELA styles for Chat and Login */
:root{
    --bg:#040409; /* deep black */
    --panel:#07080c; /* near-black panel */
    --silver:#cfcfd1; /* metallic text */
    --accent-blue:#00b8ff; /* neon cyan */
    --accent-purple:#8a3cff; /* neon purple */
    --glass: rgba(255,255,255,0.03);
}
html,body{height:100%;}
body{margin:0;background:var(--bg);font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial;color:var(--silver);-webkit-font-smoothing:antialiased; font-size:18px}

/* Titles and important UI */
.ela-title{font-weight:700;color:var(--silver);font-size:28px}
.ela-footer{font-size:14px}

/* Chat styles */
.ela-root{display:flex;gap:22px;max-width:1200px;margin:28px auto;padding:18px}
/* Sidebar */
.ela-sidebar{width:220px;background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);border-radius:12px;padding:16px;box-shadow:0 10px 30px rgba(0,0,0,0.7);border:1px solid rgba(255,255,255,0.02)}
.ela-brand{font-weight:800;font-size:20px;letter-spacing:1px;color:var(--silver);margin-bottom:10px}
.ela-nav{display:flex;flex-direction:column;gap:8px;flex:1}
.ela-conv{background:transparent;border:0;color:rgba(255,255,255,0.65);padding:10px 12px;border-radius:8px;cursor:pointer;text-align:left;transition:all .14s ease}
.ela-conv:hover{transform:translateX(6px);color:white}
.ela-conv.active{background:linear-gradient(90deg,var(--accent-purple),var(--accent-blue));color:#fff;box-shadow:0 8px 24px rgba(72,32,160,0.18)}
.ela-footer{font-size:12px;color:rgba(255,255,255,0.45);margin-top:12px}

/* Main panel */
.ela-main{flex:1;display:flex;flex-direction:column;background:linear-gradient(180deg,rgba(255,255,255,0.01),transparent);padding:12px;border-radius:12px;min-height:540px;box-shadow:0 18px 48px rgba(0,0,0,0.7);border:1px solid rgba(255,255,255,0.02)}
.ela-header{display:flex;justify-content:center;align-items:center;padding:8px 12px}
.ela-header .ela-title{display:block;text-align:center;width:100%;margin:0 auto}
.ela-status{font-size:13px;color:rgba(255,255,255,0.5)}

.ela-chat{flex:1;padding:22px;display:flex;flex-direction:column;gap:14px;overflow:auto;border-radius:10px;background:linear-gradient(180deg, rgba(255,255,255,0.005), rgba(255,255,255,0.001));}
.msg{max-width:78%;padding:14px 18px;border-radius:14px;line-height:1.6;font-size:18px;position:relative;word-wrap:break-word}
.msg.bot{align-self:flex-start;background:linear-gradient(180deg, rgba(12,14,20,0.6), rgba(18,20,28,0.6));border:1px solid rgba(124,58,237,0.06);box-shadow:0 6px 18px rgba(2,6,23,0.6);color:rgba(230,240,255,0.95)}
.msg.user{align-self:flex-end;background:linear-gradient(90deg, rgba(138,60,255,0.12), rgba(0,184,255,0.08));border:1px solid rgba(60,120,255,0.08);color:#fff}
.msg .meta{display:block;font-size:12px;color:rgba(255,255,255,0.45);margin-top:8px}

/* typing */
.typing{display:inline-flex;gap:6px;align-items:center}
.typing > span{width:8px;height:8px;border-radius:50%;background:linear-gradient(180deg,var(--accent-blue),var(--accent-purple));opacity:0.95;transform:scale(0.85);animation:typingDots 1s infinite ease-in-out}
.typing > span:nth-child(2){animation-delay:0.12s}
.typing > span:nth-child(3){animation-delay:0.24s}
@keyframes typingDots{0%{transform:translateY(0) scale(0.7);opacity:0.5}50%{transform:translateY(-6px) scale(1);opacity:1}100%{transform:translateY(0) scale(0.7);opacity:0.5}}

/* Composer */
.ela-composer{display:flex;gap:12px;align-items:center;padding:10px;border-top:1px solid rgba(255,255,255,0.02)}
.ela-input-wrap{flex:1}
#messageInput{width:100%;min-height:56px;max-height:260px;padding:14px 16px;border-radius:14px;background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.03);color:var(--silver);resize:none;outline:none;transition:box-shadow .12s ease;font-size:17px}
#messageInput:focus{box-shadow:0 10px 30px rgba(0,184,255,0.06);transform:translateY(-1px)}

.ela-send{width:56px;height:56px;border-radius:12px;border:0;cursor:pointer;position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;color:white;background:linear-gradient(135deg,var(--accent-purple),var(--accent-blue));box-shadow:0 12px 36px rgba(0,0,0,0.6),0 6px 20px rgba(12,10,30,0.6);transition:transform .16s ease}
.ela-send:hover{transform:translateY(-5px) scale(1.02)}
.ela-send svg{filter:drop-shadow(0 6px 24px rgba(0,184,255,0.06))}
.ela-glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 20% 20%, rgba(138,60,255,0.14), transparent 18%),radial-gradient(circle at 80% 80%, rgba(0,184,255,0.10), transparent 30%);transform:translateY(100%);transition:transform .36s cubic-bezier(.2,.9,.3,1)}
.ela-send:hover .ela-glow{transform:translateY(0%)}

/* Responsive tweaks: mobile-first adjustments */
@media (max-width:900px){
    .ela-root{padding:12px;margin:12px;flex-direction:column}
    .ela-sidebar{display:none}
    .ela-main{min-height:calc(100vh - 100px);border-radius:10px}
    .ela-chat{padding:12px;gap:10px}
    .msg{max-width:92%;font-size:15px}
    #messageInput{min-height:56px;font-size:16px}
    .ela-send{width:64px;height:64px}
}

/* Small phones */
@media (max-width:420px){
    .ela-root{padding:8px;margin:8px}
    .ela-send{width:64px;height:64px;border-radius:14px}
    .ela-composer{padding:10px}
    #messageInput{padding:14px}
}

/* Login styles */
.ela-login-root{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:28px;position:relative}
.ela-login-bg{position:fixed;inset:0;background-image:url('../images/soloLogoEla.png');background-position:center;background-size:cover;background-repeat:no-repeat;filter:blur(6px) brightness(.14);z-index:0}
.ela-login-card{position:relative;z-index:2;width:min(660px,94%);background:linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));border-radius:18px;padding:40px 34px 32px 34px;box-shadow:0 28px 80px rgba(2,6,23,0.75);border:1px solid rgba(255,255,255,0.04);backdrop-filter:blur(6px)}
.ela-login-logo{display:block;margin:0 auto 18px auto;max-width:240px;height:auto}
.ela-login-card h2{font-size:26px;text-align:center;margin:4px 0 18px;color:var(--silver);font-weight:700}
.ela-login-form{display:flex;flex-direction:column;gap:12px}
.ela-login-form label{font-size:13px;color:rgba(255,255,255,0.7)}

/* input group with icons */
.ela-input-group{position:relative;display:flex;align-items:center}
.ela-input-icon{position:absolute;left:12px;color:rgba(255,255,255,0.6);display:inline-flex;align-items:center;justify-content:center}
.ela-input-group input{padding:14px 16px 14px 44px;border-radius:12px;border:1px solid rgba(255,255,255,0.06);background:rgba(255,255,255,0.03);color:var(--silver);outline:none;transition:box-shadow .12s ease;font-size:16px;height:50px;width:100%}
.ela-input-group input:focus{box-shadow:0 14px 40px rgba(0,184,255,0.08)}

.ela-login-form input{padding:14px 16px;border-radius:12px;border:1px solid rgba(255,255,255,0.06);background:rgba(255,255,255,0.03);color:var(--silver);outline:none;transition:box-shadow .12s ease;font-size:17px;height:48px}
.ela-login-form input:focus{box-shadow:0 12px 36px rgba(0,184,255,0.08)}
.ela-btn-primary{margin-top:12px;padding:14px 22px;border-radius:12px;border:0;color:white;background:linear-gradient(135deg,var(--accent-purple),var(--accent-blue));cursor:pointer;font-weight:600;box-shadow:0 14px 40px rgba(0,0,0,0.6);font-size:16px;min-height:50px}
.ela-error{background:linear-gradient(180deg, rgba(255,120,120,0.12), rgba(255,80,80,0.06));border:1px solid rgba(255,80,80,0.12);padding:10px;border-radius:8px;color:#ffdede;margin-bottom:6px}
@media (max-width:600px){
    .ela-login-card{padding:22px 16px 20px 16px}
    .ela-login-logo{max-width:180px}
    .ela-login-form input{font-size:15px;height:54px}
    .ela-btn-primary{font-size:15px;padding:14px}
}

/* Chat background similar to login */
.ela-chat-bg{position:fixed;inset:0;background-image:url('../images/soloLogoEla.png');background-position:center;background-size:cover;background-repeat:no-repeat;filter:blur(6px) brightness(.12);z-index:0}

/* Ensure root content sits above the chat background */
.ela-root, .ela-main { position: relative; z-index: 1 }

/* Toast styles for notifications */
.ela-toast-container{position:fixed;bottom:24px;right:24px;display:flex;flex-direction:column;gap:10px;z-index:1600}
.ela-toast{min-width:220px;max-width:420px;background:linear-gradient(90deg,rgba(20,20,30,0.95),rgba(10,10,18,0.95));color:var(--silver);padding:12px 14px;border-radius:10px;box-shadow:0 12px 40px rgba(0,0,0,0.6);opacity:0;transform:translateY(8px);transition:all .28s cubic-bezier(.2,.9,.26,1)}
.ela-toast.visible{opacity:1;transform:translateY(0)}
.ela-toast-success{border-left:4px solid #28d37b}
.ela-toast-error{border-left:4px solid #ff6b6b}
.ela-toast-info{border-left:4px solid #00b8ff}
.ela-toast-body{font-size:14px}
.ela-toast-close{background:transparent;border:0;color:var(--silver);font-size:16px;margin-left:12px;float:right;cursor:pointer}
@media (min-width:1000px){
    /* increase base font size on desktop for better readability */
    body{font-size:19px}
    .ela-root{max-width:1400px}
    .ela-title{font-size:32px}
    .msg{font-size:19px;padding:16px 20px}
    #messageInput{font-size:18px;min-height:64px}
    .ela-btn-primary{font-size:17px;padding:16px 26px;min-height:56px}
    .ela-login-card{width:min(720px,92%);padding:44px 36px}
    .ela-login-logo{max-width:280px}
    .ela-chat{padding:36px}
}