/* ======================================================
   DIVA ENTITY INTERFACE — EVOLUTION GRADE
   Fusion: GPT + DeepSeek + Claude + Gemini + Qwen3
   ====================================================== */

:root{

--bg-primary:#0f1419;
--bg-surface:#161b22;
--bg-sidebar:#1a1f29;
--bg-hover:#21262d;
--bg-input:#1e242e;
--bg-code:#0d1117;

--border:#30363d;
--border-highlight:#444c56;

--text-primary:#e6edf3;
--text-secondary:#8b949e;
--text-muted:#6e7681;

--accent:#7aa2f7;
--accent-hover:#5d8cd9;
--accent-dim:rgba(122,162,247,.12);
--accent-glow:rgba(122,162,247,.25);

--success:#3fb950;
--danger:#f85149;

--sidebar-width:280px;
--header-h:60px;

--radius-sm:6px;
--radius-md:12px;
--radius-lg:20px;
--radius-full:9999px;

--shadow:0 4px 24px rgba(0,0,0,.45);

--font-ui:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Ubuntu,sans-serif;
--font-mono:'JetBrains Mono','Fira Code','Courier New',monospace;

--transition-fast:150ms ease;
--transition-normal:250ms ease;

}

/* RESET */

*,*::before,*::after{
box-sizing:border-box;
margin:0;
padding:0;
}

body{
background:var(--bg-primary);
color:var(--text-primary);
font-family:var(--font-ui);
height:100dvh;
overflow:hidden;
line-height:1.65;
}

/* ACCESSIBILITY */

:focus-visible{
outline:2px solid var(--accent);
outline-offset:2px;
}

@media(prefers-reduced-motion:reduce){
*,*::before,*::after{
animation-duration:.01ms!important;
transition-duration:.01ms!important;
}
}

/* SCROLLBAR */

::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-thumb{
background:var(--border);
border-radius:3px
}
::-webkit-scrollbar-thumb:hover{
background:var(--border-highlight)
}

/* LAYOUT */

#app{
display:flex;
height:100dvh;
width:100%;
contain:layout style paint;
}

/* SIDEBAR */

.sidebar{

width:var(--sidebar-width);
min-width:var(--sidebar-width);

background:var(--bg-sidebar);

border-right:1px solid var(--border);

display:flex;
flex-direction:column;

transition:transform var(--transition-normal),width var(--transition-normal);

overflow:hidden;

}

.sidebar.collapsed{
width:0;
min-width:0;
border-right:none;
}

/* MOBILE OVERLAY */

.sidebar-overlay{
display:none;
position:fixed;
inset:0;
background:rgba(0,0,0,.55);
z-index:90;
backdrop-filter:blur(2px);
}

.sidebar.mobile-open ~ .sidebar-overlay{
display:block;
}

/* HEADER */

.sidebar-header{
height:var(--header-h);
display:flex;
align-items:center;
padding:0 16px;
border-bottom:1px solid var(--border);
font-weight:600;
}

/* NEW CHAT */

.new-chat-btn{
margin:12px;
padding:10px 14px;
border-radius:var(--radius-sm);
background:var(--accent-dim);
border:1px solid var(--accent);
color:var(--accent);
cursor:pointer;
font-size:.9rem;
transition:background var(--transition-fast);
}

.new-chat-btn:hover{
background:var(--accent);
color:#000;
}

/* HISTORY */

.chat-history{
flex:1;
overflow-y:auto;
padding:8px;
}

.history-item{
padding:10px 12px;
border-radius:var(--radius-sm);
cursor:pointer;
font-size:.9rem;
color:var(--text-secondary);
transition:all var(--transition-fast);
border-left:2px solid transparent;
}

.history-item:hover{
background:var(--bg-hover);
color:var(--text-primary);
}

.history-item.active{
color:var(--accent);
border-left-color:var(--accent);
}

/* CHAT */

.chat{
flex:1;
display:flex;
flex-direction:column;
overflow:hidden;
}

/* HEADER */

.chat-header{
height:var(--header-h);
display:flex;
align-items:center;
gap:14px;
padding:0 20px;
border-bottom:1px solid var(--border);
}

/* STATUS */

.status-dot{
width:8px;
height:8px;
border-radius:50%;
background:var(--success);
box-shadow:0 0 0 2px rgba(63,185,80,.25);
}

/* MESSAGES */

.messages{
flex:1;
overflow-y:auto;
padding:26px 20px;
display:flex;
flex-direction:column;
gap:6px;
scroll-behavior:smooth;
contain:content;
}

/* EMPTY STATE */

.messages-empty{
flex:1;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
color:var(--text-muted);
gap:12px;
text-align:center;
padding:40px;
}

/* MESSAGE */

.message{
max-width:820px;
width:100%;
margin:0 auto;
display:flex;
gap:14px;
animation:msgIn var(--transition-normal) ease;
}

@keyframes msgIn{
from{opacity:0;transform:translateY(8px)}
to{opacity:1;transform:translateY(0)}
}

.message.user{
flex-direction:row-reverse;
}

/* AVATAR */

.avatar{
width:34px;
height:34px;
display:flex;
align-items:center;
justify-content:center;
border-radius:var(--radius-sm);
font-size:16px;
}

.avatar.ai{
background:var(--accent);
color:#000;
}

.avatar.user{
background:var(--bg-hover);
}

/* BUBBLE */

.bubble{
max-width:72%;
padding:12px 16px;
border-radius:var(--radius-md);
font-size:.95rem;
line-height:1.7;
word-break:break-word;
}

.message.ai .bubble{
background:var(--bg-surface);
border:1px solid var(--border);
border-bottom-left-radius:var(--radius-sm);
}

.message.user .bubble{
background:#1a4a8a;
color:#fff;
border-bottom-right-radius:var(--radius-sm);
}

/* CODE */

.bubble pre{
background:var(--bg-code);
border:1px solid var(--border);
border-radius:var(--radius-sm);
padding:14px;
overflow-x:auto;
margin:10px 0;
font-size:.85rem;
}

.bubble code{
background:var(--bg-code);
padding:2px 6px;
border-radius:4px;
font-family:var(--font-mono);
color:#79c0ff;
}

/* STREAM CURSOR */

.streaming-cursor::after{
content:'▋';
color:var(--accent);
animation:blink .7s step-end infinite;
}

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

/* SKELETON */

.skeleton{
background:linear-gradient(
90deg,
var(--bg-hover) 25%,
var(--border) 50%,
var(--bg-hover) 75%
);
background-size:200% 100%;
animation:shimmer 1.4s infinite;
height:14px;
border-radius:4px;
}

@keyframes shimmer{
0%{background-position:200% 0}
100%{background-position:-200% 0}
}

/* COMPOSER */

.composer{
border-top:1px solid var(--border);
padding:16px 20px 20px;
}

.composer-row{
display:flex;
gap:10px;
align-items:flex-end;
}

.composer-row textarea{
flex:1;
background:var(--bg-input);
border:1px solid var(--border);
border-radius:var(--radius-lg);
padding:13px 18px;
font-size:.95rem;
color:var(--text-primary);
resize:none;
min-height:50px;
max-height:200px;
outline:none;
}

.composer-row textarea:focus{
border-color:var(--accent);
}

/* BUTTONS */

.send-btn,.voice-btn{
width:46px;
height:46px;
border-radius:var(--radius-full);
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
border:none;
font-size:18px;
transition:all var(--transition-fast);
}

.send-btn{
background:var(--accent);
color:#000;
}

.send-btn:hover{
background:var(--accent-hover);
transform:scale(1.05);
}

.voice-btn{
background:var(--bg-hover);
border:1px solid var(--border);
color:var(--accent);
}

.voice-btn.listening{
background:var(--danger);
color:#fff;
animation:pulse 1.5s infinite;
}

@keyframes pulse{
0%,100%{transform:scale(1)}
50%{transform:scale(1.08)}
}

/* MOBILE */

@media(max-width:768px){

.sidebar{
position:fixed;
top:0;
left:0;
bottom:0;
transform:translateX(-100%);
box-shadow:var(--shadow);
}

.sidebar.mobile-open{
transform:translateX(0);
}

.bubble{
max-width:88%;
}

.messages{
padding:16px 12px;
}

}

/* PRINT */

@media print{

.sidebar,.composer,.message-actions{
display:none!important
}

.chat{
height:auto;
overflow:visible
}

.messages{
overflow:visible;
padding:20px
}

body{
background:#fff;
color:#000;
}

}

/* MOBILE OVERLAY */
.sidebar-overlay{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.55);
  z-index:90;
  backdrop-filter:blur(2px);
}
.sidebar.mobile-open ~ .sidebar-overlay{ display:block; }

/* MSG ACTIONS */
.msg-actions{
  display:flex;gap:4px;
  margin-top:6px;
  opacity:0;transition:opacity .2s;
}
.message:hover .msg-actions{ opacity:1; }
.msg-btn{
  background:var(--bg-surface);
  border:1px solid var(--border);
  color:var(--text-muted);
  width:28px;height:28px;
  border-radius:var(--radius-sm);
  cursor:pointer;font-size:13px;
  display:flex;align-items:center;justify-content:center;
  transition:.18s;
}
.msg-btn:hover{
  background:var(--bg-hover);
  color:var(--text-primary);
  border-color:var(--accent);
}

/* EMPTY STATE */
.messages-empty{
  flex:1;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  color:var(--text-muted);gap:12px;
  text-align:center;padding:40px;
}
.messages-empty h3{ font-size:1.3rem;color:var(--text-secondary); }
.messages-empty p{ font-size:.88rem;max-width:340px; }

/* SEND DISABLED */
.send-btn:disabled{ opacity:.4;cursor:not-allowed;transform:none; }