/* ====================================================
   ChiranjibAI Chat — Full Colorful Hacker Theme
   ==================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');

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

:root {
    --green:   #00ff41;
    --cyan:    #00e5ff;
    --purple:  #c084fc;
    --orange:  #fb923c;
    --yellow:  #fbbf24;
    --red:     #f87171;
    --pink:    #f472b6;
    --white:   #f1f5f9;

    --bg:      #050505;
    --bg2:     #0a0a0a;
    --bg3:     #0f0f0f;
    --sidebar-w: 280px;

    --border:  rgba(255,255,255,0.07);
    --border2: rgba(255,255,255,0.14);

    --dim:     #6b7280;
    --dimmer:  #374151;
    --font-code: 'Fira Code', monospace;
    --font-ui:   'Inter', system-ui, sans-serif;

    --green-g:  rgba(0,255,65,0.25);
    --cyan-g:   rgba(0,229,255,0.25);
    --purple-g: rgba(192,132,252,0.25);
    --orange-g: rgba(251,146,60,0.25);
}

html, body { height:100%; overflow:hidden; }

body {
    font-family: var(--font-ui);
    background: var(--bg);
    color: var(--white);
    overflow: hidden;
}

/* ══════════ BACKGROUND ══════════ */
.bg-layer {
    position: fixed; top:0; left:0; width:100%; height:100%;
    z-index: 0; pointer-events: none; overflow: hidden;
}

.orb {
    position: absolute; border-radius: 50%;
    filter: blur(120px); opacity: 0.12;
    animation: floatOrb ease-in-out infinite;
}
.orb-1 { width:600px;height:600px;background:var(--purple); top:-100px;left:-100px; animation-duration:20s; }
.orb-2 { width:500px;height:500px;background:var(--cyan);   top:30%;right:-150px; animation-duration:25s;animation-delay:-8s; }
.orb-3 { width:550px;height:550px;background:var(--orange); bottom:-100px;left:20%; animation-duration:22s;animation-delay:-5s; }
.orb-4 { width:400px;height:400px;background:var(--green);  bottom:20%;right:10%; animation-duration:18s;animation-delay:-12s; }
.orb-5 { width:350px;height:350px;background:var(--pink);   top:50%;left:50%;transform:translate(-50%,-50%); animation-duration:30s; }

@keyframes floatOrb {
    0%,100% { transform: translate(0,0) scale(1); }
    25%  { transform: translate(60px,-80px) scale(1.1); }
    50%  { transform: translate(-40px,60px) scale(0.9); }
    75%  { transform: translate(80px,40px) scale(1.05); }
}

.bg-grid {
    position: absolute; inset:0;
    background-image:
        linear-gradient(rgba(0,255,65,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,255,65,0.03) 1px, transparent 1px);
    background-size: 40px 40px;
}

#matrix {
    position: fixed; top:0; left:0; z-index:1;
    opacity: 0.04; pointer-events:none;
}

/* ══════════ APP LOADING ══════════ */
.app-loading {
    position: fixed; inset:0; z-index:9999;
    background: #000;
    display: flex; align-items:center; justify-content:center;
    transition: opacity 0.6s, visibility 0.6s;
}
.app-loading.hidden { opacity:0; visibility:hidden; }

.al-content { text-align:center; }

.al-icon {
    position: relative; width:80px; height:80px;
    margin: 0 auto 1.5rem;
    display: flex; align-items:center; justify-content:center;
}
.al-c {
    font-family: var(--font-code); font-size:2rem; font-weight:700;
    background: linear-gradient(135deg,var(--purple),var(--cyan));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text; z-index:2;
}
.al-ring {
    position: absolute; border-radius:50%; border:2px solid transparent;
    animation: ringPulse 1.5s ease infinite;
}
.al-ring:nth-child(1) {
    width:60px;height:60px;
    border-top-color:var(--purple); border-right-color:var(--cyan);
}
.al-ring:nth-child(2) {
    width:80px;height:80px;
    border-bottom-color:var(--orange); border-left-color:var(--green);
    animation-delay: 0.5s;
}
@keyframes ringPulse { to { transform: rotate(360deg); } }

.al-text { font-family:var(--font-code); font-size:0.85rem; color:var(--dim); margin-bottom:1.5rem; }
.al-bar { width:300px; max-width:90vw; height:2px; background:rgba(255,255,255,0.1); margin:0 auto 0.75rem; overflow:hidden; }
.al-bar > div { height:100%; background:linear-gradient(90deg,var(--green),var(--cyan),var(--purple)); width:0%; transition:width 0.1s; }
.al-status { font-family:var(--font-code); font-size:0.72rem; color:var(--dimmer); }

/* ══════════ APP LAYOUT ══════════ */
.app {
    position: fixed; inset:0; z-index:10;
    display: flex;
}

/* ══════════ SIDEBAR ══════════ */
.sidebar {
    width: var(--sidebar-w);
    height: 100%;
    background: rgba(10,10,10,0.92);
    backdrop-filter: blur(20px);
    border-right: 1px solid var(--border);
    display: flex; flex-direction:column;
    flex-shrink: 0;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 100;
    transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
}
.sidebar::-webkit-scrollbar { width:3px; }
.sidebar::-webkit-scrollbar-thumb { background:var(--dimmer); }

.sb-top {
    padding: 1.2rem 1rem 0.8rem;
    display: flex; align-items:center; gap:0.6rem;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.sb-logo {
    width:38px; height:38px;
    background: linear-gradient(135deg,var(--purple),var(--cyan));
    display:flex; align-items:center; justify-content:center;
    font-family:var(--font-code); font-weight:700; font-size:1.1rem; color:#000;
    flex-shrink:0;
    box-shadow: 0 0 20px var(--purple-g), 0 0 40px var(--cyan-g);
}
.logo-bracket { color:rgba(0,0,0,0.5); }
.sb-brand-text { flex:1; overflow:hidden; }
.sb-name { display:block; font-weight:700; font-size:0.95rem; color:var(--white); letter-spacing:0.5px; }
.sb-powered { display:block; font-size:0.68rem; color:var(--dim); font-family:var(--font-code); }
.sidebar-close {
    background:none; border:none; color:var(--dim); cursor:pointer;
    font-size:1rem; padding:4px; display:none; flex-shrink:0;
}

.new-chat-btn {
    display:flex; align-items:center; gap:0.6rem;
    width:calc(100% - 2rem); margin:1rem;
    padding:0.7rem 1rem; background:transparent;
    border:1px solid var(--border2);
    color:var(--white); font-family:var(--font-ui); font-size:0.85rem; font-weight:500;
    cursor:pointer; transition:all 0.2s; flex-shrink:0;
}
.new-chat-btn:hover {
    background: linear-gradient(135deg,rgba(192,132,252,0.15),rgba(0,229,255,0.1));
    border-color: var(--purple);
    box-shadow: 0 0 20px var(--purple-g);
}
.ncb-icon { font-size:1.2rem; color:var(--purple); }

.sb-section-label {
    padding: 0.3rem 1rem;
    font-family:var(--font-code); font-size:0.65rem;
    letter-spacing:2px; color:var(--dimmer);
    flex-shrink:0;
}

.sb-history {
    flex:1; overflow-y:auto; padding:0.3rem 0;
}
.sb-history::-webkit-scrollbar { width:2px; }
.sb-history::-webkit-scrollbar-thumb { background:var(--dimmer); }

.no-history { padding:1rem; font-size:0.78rem; color:var(--dimmer); font-style:italic; }

.hist-item {
    display:flex; align-items:center; gap:0.5rem;
    padding:0.6rem 1rem; cursor:pointer;
    font-size:0.8rem; color:var(--dim); border-left:2px solid transparent;
    transition:all 0.2s; text-overflow:ellipsis; overflow:hidden; white-space:nowrap;
}
.hist-item:hover { color:var(--white); border-left-color:var(--purple); background:rgba(255,255,255,0.03); }
.hist-item.active { color:var(--purple); border-left-color:var(--purple); background:rgba(192,132,252,0.08); }
.hist-del {
    margin-left:auto; background:none; border:none; color:var(--dimmer);
    cursor:pointer; opacity:0; transition:opacity 0.2s; font-size:0.85rem; flex-shrink:0;
}
.hist-item:hover .hist-del { opacity:1; }
.hist-del:hover { color:var(--red); }

.sb-bottom {
    padding:1rem; border-top:1px solid var(--border); flex-shrink:0;
}

.model-wrap { display:flex; align-items:center; gap:0.5rem; margin-bottom:0.3rem; }
.model-name-display { font-family:var(--font-code); font-size:0.78rem; color:var(--purple); letter-spacing:0.05em; }
.model-dot {
    width:8px; height:8px; border-radius:50%; background:var(--dim); flex-shrink:0;
    transition: background 0.3s, box-shadow 0.3s;
}
.model-dot.online { background:var(--green); box-shadow:0 0 8px var(--green); animation:dotPulse 2s infinite; }
.model-dot.offline { background:var(--red); box-shadow:0 0 8px var(--red); }
@keyframes dotPulse { 0%,100%{opacity:1} 50%{opacity:0.5} }

.model-select, .url-input {
    flex:1; background:rgba(255,255,255,0.05); border:1px solid var(--border);
    color:var(--white); font-family:var(--font-code); font-size:0.75rem;
    padding:0.45rem 0.6rem; outline:none; width:100%;
    transition: border-color 0.2s;
    appearance:none; -webkit-appearance:none;
}
.model-select:focus, .url-input:focus { border-color:var(--purple); box-shadow:0 0 10px var(--purple-g); }
.model-select option { background:#111; }

.url-input { margin-bottom:1rem; font-size:0.72rem; }

/* ─── CONTACT LINKS IN SIDEBAR ─── */
.sb-contact-links { display:flex; gap:0.5rem; margin-bottom:0.75rem; }
.sb-contact-link {
    flex:1; display:flex; align-items:center; justify-content:center; gap:0.3rem;
    padding:0.45rem 0.5rem; border-radius:5px; text-decoration:none;
    font-family:var(--font-code); font-size:0.7rem; font-weight:600;
    transition: all 0.2s;
}
.sb-tg { background:rgba(34,158,217,0.12); border:1px solid rgba(34,158,217,0.3); color:#229ED9; }
.sb-tg:hover { background:rgba(34,158,217,0.22); box-shadow:0 0 12px rgba(34,158,217,0.3); }
.sb-email { background:rgba(192,132,252,0.1); border:1px solid rgba(192,132,252,0.25); color:var(--purple); }
.sb-email:hover { background:rgba(192,132,252,0.2); box-shadow:0 0 12px rgba(192,132,252,0.25); }

/* ─── FLOATING CONTACT CTA ─── */
.direct-cta-float {
    position:fixed; bottom:5.5rem; right:1.2rem; z-index:200;
    display:flex; align-items:center; gap:0.5rem; flex-wrap:wrap;
    background:rgba(10,10,20,0.92); border:1px solid rgba(34,158,217,0.35);
    border-radius:10px; padding:0.6rem 0.8rem;
    box-shadow:0 0 30px rgba(34,158,217,0.2);
    backdrop-filter:blur(16px);
    opacity:0; transform:translateY(12px); pointer-events:none;
    transition:opacity 0.4s, transform 0.4s;
    max-width:280px;
}
.direct-cta-float.show { opacity:1; transform:translateY(0); pointer-events:all; }
.dcf-label { font-size:0.7rem; color:var(--dim); font-family:var(--font-code); flex:1 0 100%; margin-bottom:0.15rem; }
.dcf-btn {
    display:inline-flex; align-items:center; gap:0.3rem;
    padding:0.35rem 0.7rem; border-radius:5px; text-decoration:none;
    font-family:var(--font-code); font-size:0.72rem; font-weight:600;
    transition:all 0.2s;
}
.dcf-tg { background:linear-gradient(135deg,#229ED9,#1a8cbf); color:#fff; }
.dcf-tg:hover { box-shadow:0 0 12px rgba(34,158,217,0.5); }
.dcf-email { background:rgba(192,132,252,0.15); border:1px solid rgba(192,132,252,0.3); color:var(--purple); }
.dcf-email:hover { background:rgba(192,132,252,0.25); }
.dcf-close {
    background:none; border:none; color:var(--dim); cursor:pointer;
    font-size:0.8rem; padding:0.2rem; line-height:1; transition:color 0.2s;
}
.dcf-close:hover { color:var(--red); }

.sb-links { display:flex; flex-direction:column; gap:0.3rem; margin-top:0.3rem; }
.sb-link {
    font-size:0.75rem; color:var(--dim); text-decoration:none;
    padding:0.3rem 0; transition:color 0.2s;
    font-family:var(--font-code);
}
.sb-link:hover { color:var(--cyan); }

.sb-overlay {
    position:fixed; inset:0; background:rgba(0,0,0,0.7); z-index:99;
    display:none; backdrop-filter:blur(4px);
}
.sb-overlay.show { display:block; }

/* ══════════ CHAT MAIN ══════════ */
.chat-main {
    flex:1; display:flex; flex-direction:column;
    min-width:0; height:100%; position:relative; z-index:10;
}

/* ══════════ HEADER ══════════ */
.chat-header {
    height:56px; display:flex; align-items:center; gap:0.75rem;
    padding:0 1.5rem;
    background: rgba(5,5,5,0.85); backdrop-filter:blur(20px);
    border-bottom:1px solid var(--border);
    flex-shrink:0; z-index:20;
}
.hdr-brand {
    font-family:var(--font-code); font-weight:700; font-size:1rem;
    letter-spacing:1px; color:var(--white);
}
.hdr-logo-bracket { color:var(--purple); }
.hdr-title { margin-left:0.3rem; background:linear-gradient(135deg,var(--purple),var(--cyan)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.hdr-right { margin-left:auto; display:flex; align-items:center; gap:1rem; }
.hdr-model { display:flex; align-items:center; gap:0.4rem; font-family:var(--font-code); font-size:0.75rem; color:var(--dim); }
.hdr-dot { width:7px; height:7px; border-radius:50%; background:var(--dim); transition:all 0.3s; }
.hdr-dot.online { background:var(--green); box-shadow:0 0 6px var(--green); animation:dotPulse 2s infinite; }

.hdr-btn {
    background:none; border:none; cursor:pointer; color:var(--dim);
    width:34px; height:34px; display:flex; align-items:center; justify-content:center;
    transition:all 0.2s; border:1px solid transparent;
    font-size:1.1rem;
}
.hdr-btn:hover { color:var(--white); border-color:var(--border2); }
.sidebar-toggle { flex-direction:column; gap:4px; }
.sidebar-toggle span { width:18px; height:1.5px; background:currentColor; display:block; transition:0.2s; }
.clear-btn { font-size:1rem; }

/* ══════════ MESSAGES AREA ══════════ */
.messages-area {
    flex:1; overflow-y:auto; padding:2rem 0;
    display:flex; flex-direction:column;
    scroll-behavior: smooth;
}
.messages-area::-webkit-scrollbar { width:4px; }
.messages-area::-webkit-scrollbar-track { background:transparent; }
.messages-area::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.1); border-radius:2px; }

/* ══════════ WELCOME SCREEN ══════════ */
.welcome {
    flex:1; display:flex; flex-direction:column;
    align-items:center; justify-content:center;
    padding:3rem 2rem; min-height:100%;
    position:relative;
}
.welcome-glow {
    position:absolute; width:400px; height:400px; border-radius:50%;
    background:radial-gradient(circle, rgba(192,132,252,0.1) 0%, transparent 70%);
    animation:glowPulse 3s ease infinite;
}
@keyframes glowPulse { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.2);opacity:0.6} }

.welcome-logo { text-align:center; margin-bottom:2.5rem; animation:wlIn 0.8s ease both; }
@keyframes wlIn { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:none} }

.wl-icon-wrap { position:relative; width:100px; height:100px; margin:0 auto 1.5rem; display:flex; align-items:center; justify-content:center; }
.wl-icon {
    width:70px; height:70px; background:linear-gradient(135deg,var(--purple),var(--cyan));
    display:flex; align-items:center; justify-content:center;
    font-family:var(--font-code); font-weight:900; font-size:2rem; color:#000;
    z-index:2; position:relative;
    box-shadow: 0 0 30px var(--purple-g), 0 0 60px var(--cyan-g);
    animation: iconFloat 3s ease infinite;
}
@keyframes iconFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }

.wl-ring {
    position:absolute; border-radius:50%;
    border:1px solid transparent; animation:ringRotate linear infinite;
}
.r1 { width:80px;height:80px; border-top-color:var(--purple); border-right-color:rgba(192,132,252,0.3); animation-duration:3s; }
.r2 { width:95px;height:95px; border-bottom-color:var(--cyan); border-left-color:rgba(0,229,255,0.3); animation-duration:4s;animation-direction:reverse; }
.r3 { width:110px;height:110px; border-top-color:rgba(251,146,60,0.4); border-right-color:transparent; animation-duration:6s; }
@keyframes ringRotate { to { transform:rotate(360deg); } }

.wl-title { font-family:var(--font-code); font-size:clamp(2rem,5vw,3.5rem); font-weight:900; letter-spacing:3px; margin-bottom:0.5rem; }
.wlt-1 { color:var(--white); }
.wlt-2 { background:linear-gradient(135deg,var(--purple),var(--cyan)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }

.wl-sub { color:var(--dim); font-size:1rem; margin-bottom:1.2rem; }

.wl-badges { display:flex; flex-wrap:wrap; gap:0.4rem; justify-content:center; }
.badge {
    font-family:var(--font-code); font-size:0.65rem; font-weight:600;
    padding:0.2rem 0.6rem; letter-spacing:0.5px;
    border:1px solid; animation: badgeIn 0.5s ease both;
}
.badge-purple { color:var(--purple); border-color:rgba(192,132,252,0.4); background:rgba(192,132,252,0.08); animation-delay:0.3s; }
.badge-red    { color:var(--red);    border-color:rgba(248,113,113,0.4); background:rgba(248,113,113,0.08); animation-delay:0.4s; }
.badge-orange { color:var(--orange); border-color:rgba(251,146,60,0.4);  background:rgba(251,146,60,0.08);  animation-delay:0.5s; }
.badge-cyan   { color:var(--cyan);   border-color:rgba(0,229,255,0.4);   background:rgba(0,229,255,0.08);   animation-delay:0.6s; }
.badge-green  { color:var(--green);  border-color:rgba(0,255,65,0.4);    background:rgba(0,255,65,0.08);    animation-delay:0.7s; }
@keyframes badgeIn { from{opacity:0;transform:scale(0.8)} to{opacity:1;transform:scale(1)} }

/* ── SUGGESTIONS ── */
.suggestions {
    display:grid; grid-template-columns:repeat(4,1fr);
    gap:0.6rem; max-width:900px; width:100%;
    animation: wlIn 0.8s 0.3s both;
}
.chip {
    background:rgba(255,255,255,0.04); border:1px solid var(--border);
    color:var(--dim); font-family:var(--font-ui); font-size:0.78rem;
    padding:0.7rem 0.9rem; cursor:pointer; text-align:left;
    transition:all 0.2s; line-height:1.4;
}
.chip:hover {
    border-color:var(--purple); color:var(--white);
    background:rgba(192,132,252,0.1);
    box-shadow:0 0 15px var(--purple-g);
    transform:translateY(-2px);
}

/* ══════════ MESSAGES ══════════ */
.messages-list { display:flex; flex-direction:column; gap:0; width:100%; }

.msg {
    display:flex; width:100%;
    animation: msgIn 0.35s cubic-bezier(0.4,0,0.2,1) both;
    padding:0.5rem 0;
}
@keyframes msgIn { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} }

/* USER MESSAGE */
.msg.user { justify-content:flex-end; padding-right:2rem; padding-left:4rem; }
.msg.user .msg-bubble {
    background:linear-gradient(135deg,rgba(251,146,60,0.9),rgba(251,191,36,0.9));
    color:#000; max-width:75%;
    padding:0.9rem 1.2rem;
    font-size:0.9rem; line-height:1.6; font-weight:500;
    box-shadow: 0 4px 20px var(--orange-g), 0 0 0 1px rgba(251,146,60,0.3);
}

/* AI MESSAGE */
.msg.ai { justify-content:flex-start; padding-left:1.5rem; padding-right:4rem; }
.msg.ai .msg-inner { display:flex; gap:0.8rem; max-width:85%; }
.msg-avatar {
    width:36px; height:36px; flex-shrink:0;
    background:linear-gradient(135deg,var(--purple),var(--cyan));
    display:flex; align-items:center; justify-content:center;
    font-family:var(--font-code); font-weight:700; font-size:0.9rem; color:#000;
    box-shadow:0 0 15px var(--purple-g);
    margin-top:2px;
}
.msg.ai .msg-bubble {
    background:rgba(15,15,15,0.8); backdrop-filter:blur(10px);
    border:1px solid rgba(255,255,255,0.08);
    border-left:2px solid var(--purple);
    padding:1rem 1.2rem; flex:1;
    box-shadow:0 4px 20px rgba(0,0,0,0.3), -4px 0 15px var(--purple-g);
    transition: border-left-color 0.3s;
}
.msg.ai .msg-bubble.streaming { border-left-color:var(--cyan); box-shadow:0 4px 20px rgba(0,0,0,0.3), -4px 0 15px var(--cyan-g); }

.msg-meta { display:flex; align-items:center; gap:0.5rem; margin-bottom:0.4rem; }
.msg-sender { font-family:var(--font-code); font-size:0.72rem; color:var(--purple); font-weight:600; }
.msg-time { font-size:0.65rem; color:var(--dimmer); margin-left:auto; }
.msg-model { font-family:var(--font-code); font-size:0.62rem; color:var(--dimmer); }

.msg-content { font-size:0.88rem; line-height:1.7; color:rgba(241,245,249,0.9); }
.msg-content h1,.msg-content h2,.msg-content h3 { color:var(--white); margin:0.8rem 0 0.4rem; font-size:1rem; }
.msg-content h2 { font-size:0.95rem; }
.msg-content h3 { font-size:0.9rem; color:var(--cyan); }
.msg-content p { margin-bottom:0.6rem; }
.msg-content p:last-child { margin-bottom:0; }
.msg-content strong { color:var(--white); font-weight:600; }
.msg-content em { color:var(--cyan); font-style:italic; }
.msg-content ul,.msg-content ol { padding-left:1.2rem; margin-bottom:0.6rem; }
.msg-content li { margin-bottom:0.3rem; }
.msg-content a { color:var(--cyan); text-decoration:underline; }
.msg-content blockquote { border-left:3px solid var(--purple); padding-left:0.75rem; color:var(--dim); margin:0.5rem 0; }
.msg-content hr { border:none; border-top:1px solid var(--border); margin:0.75rem 0; }

/* Code blocks */
.msg-content pre {
    background: rgba(0,0,0,0.6); border:1px solid var(--border);
    border-left:3px solid var(--cyan);
    padding:1rem; margin:0.75rem 0; overflow-x:auto;
    position:relative;
}
.msg-content pre code {
    font-family:var(--font-code); font-size:0.8rem; color:#e2e8f0;
    white-space:pre; background:none; padding:0; border:none;
}
.msg-content code {
    font-family:var(--font-code); font-size:0.82rem; background:rgba(0,229,255,0.1);
    border:1px solid rgba(0,229,255,0.2); color:var(--cyan);
    padding:0.1rem 0.35rem;
}

/* Copy button in code blocks */
.code-wrap { position:relative; }
.code-copy-btn {
    position:absolute; top:0.5rem; right:0.5rem;
    background:rgba(255,255,255,0.1); border:1px solid var(--border);
    color:var(--dim); font-size:0.65rem; padding:0.2rem 0.5rem;
    cursor:pointer; font-family:var(--font-code); transition:all 0.2s;
    opacity:0;
}
.code-wrap:hover .code-copy-btn { opacity:1; }
.code-copy-btn:hover { color:var(--green); border-color:var(--green); }
.code-copy-btn.copied { color:var(--green); }

.msg-actions {
    display:flex; gap:0.4rem; margin-top:0.6rem; opacity:0; transition:opacity 0.2s;
}
.msg:hover .msg-actions { opacity:1; }
.msg-action-btn {
    background:none; border:1px solid var(--border); color:var(--dimmer);
    font-size:0.65rem; padding:0.15rem 0.45rem; cursor:pointer; font-family:var(--font-code);
    transition:all 0.2s;
}
.msg-action-btn:hover { color:var(--white); border-color:var(--border2); }

/* ══════════ TYPING INDICATOR ══════════ */
.typing-indicator {
    display:flex; padding-left:1.5rem; gap:0.8rem; align-items:flex-start;
    animation: msgIn 0.3s ease both;
}
.typing-avatar {
    width:36px; height:36px; flex-shrink:0;
    background:linear-gradient(135deg,var(--purple),var(--cyan));
    display:flex; align-items:center; justify-content:center;
    font-family:var(--font-code); font-weight:700; color:#000;
}
.typing-bubble {
    background:rgba(15,15,15,0.8); border:1px solid rgba(255,255,255,0.08);
    border-left:2px solid var(--purple);
    padding:0.9rem 1.2rem; min-width:80px;
    display:flex; align-items:center; gap:0.3rem;
}
.t-dot {
    width:6px; height:6px; border-radius:50%;
    animation: tDot 1.2s ease infinite;
}
.t-dot:nth-child(1) { background:var(--green); }
.t-dot:nth-child(2) { background:var(--cyan); animation-delay:0.2s; }
.t-dot:nth-child(3) { background:var(--purple); animation-delay:0.4s; }
@keyframes tDot {
    0%,60%,100% { transform:translateY(0); opacity:0.4; }
    30%          { transform:translateY(-8px); opacity:1; }
}

/* ══════════ STREAM CURSOR ══════════ */
.stream-cursor {
    display:inline-block; width:2px; height:1em;
    background:var(--cyan); margin-left:1px;
    animation:blink 0.7s step-end infinite;
    vertical-align:text-bottom;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }

/* ══════════ INPUT AREA ══════════ */
.input-area {
    padding:1rem 2rem 1.25rem;
    background:rgba(5,5,5,0.85); backdrop-filter:blur(20px);
    border-top:1px solid var(--border);
    flex-shrink:0; z-index:20;
}

.input-wrap {
    border:1px solid var(--border);
    background:rgba(15,15,15,0.8);
    transition:border-color 0.3s, box-shadow 0.3s;
    position:relative;
    max-width:900px; margin:0 auto;
}
.input-wrap::before {
    content:'';
    position:absolute; inset:-1px;
    background:linear-gradient(135deg,var(--purple),var(--cyan),var(--orange),var(--green));
    z-index:-1; opacity:0; transition:opacity 0.3s;
    animation: borderRotate 3s linear infinite;
}
.input-wrap.focused::before { opacity:1; }
@keyframes borderRotate {
    0%   { background:linear-gradient(0deg,var(--purple),var(--cyan),var(--orange),var(--green)); }
    25%  { background:linear-gradient(90deg,var(--purple),var(--cyan),var(--orange),var(--green)); }
    50%  { background:linear-gradient(180deg,var(--purple),var(--cyan),var(--orange),var(--green)); }
    75%  { background:linear-gradient(270deg,var(--purple),var(--cyan),var(--orange),var(--green)); }
    100% { background:linear-gradient(360deg,var(--purple),var(--cyan),var(--orange),var(--green)); }
}
/* Inner bg to cut out the border */
.input-inner {
    background:rgba(10,10,10,0.95); padding:0.9rem 1rem;
    display:flex; align-items:flex-end; gap:0.75rem;
}

.chat-input {
    flex:1; background:none; border:none; outline:none;
    color:var(--white); font-family:var(--font-ui); font-size:0.9rem;
    resize:none; line-height:1.6; max-height:200px; overflow-y:auto;
    scrollbar-width: none;
}
.chat-input::placeholder { color:var(--dimmer); }
.chat-input::-webkit-scrollbar { display:none; }

.input-actions { display:flex; align-items:center; gap:0.6rem; flex-shrink:0; }
.char-count { font-family:var(--font-code); font-size:0.65rem; color:var(--dimmer); }

.send-btn {
    width:38px; height:38px; flex-shrink:0;
    background:linear-gradient(135deg,var(--purple),var(--cyan));
    border:none; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:all 0.2s; opacity:0.4;
}
.send-btn:not(:disabled) { opacity:1; }
.send-btn:not(:disabled):hover { transform:scale(1.08); box-shadow:0 0 20px var(--purple-g); }
.send-btn:disabled { cursor:not-allowed; }
.send-btn svg { width:16px; height:16px; color:#000; }
.send-btn.loading { background:linear-gradient(135deg,var(--orange),var(--red)); animation:loadingPulse 1s infinite; }
@keyframes loadingPulse { 0%,100%{opacity:0.7} 50%{opacity:1} }

.input-hint {
    text-align:center; font-size:0.68rem; color:var(--dimmer);
    margin-top:0.5rem; font-family:var(--font-code);
    max-width:900px; margin-left:auto; margin-right:auto;
}
.hint-dot {
    display:inline-block; width:6px; height:6px; border-radius:50%;
    background:var(--green); box-shadow:0 0 6px var(--green);
    animation:dotPulse 2s infinite; vertical-align:middle; margin-right:0.3rem;
}

/* ══════════ TOAST ══════════ */
.toast {
    position:fixed; bottom:6rem; left:50%; transform:translateX(-50%);
    background:rgba(20,20,20,0.95); border:1px solid var(--border);
    color:var(--white); font-size:0.8rem; font-family:var(--font-code);
    padding:0.6rem 1.2rem; z-index:9999;
    opacity:0; pointer-events:none; transition:opacity 0.3s;
    backdrop-filter:blur(10px);
}
.toast.show { opacity:1; }
.toast.error { border-color:var(--red); color:var(--red); }
.toast.success { border-color:var(--green); color:var(--green); }

/* ══════════ ERROR STATE ══════════ */
.error-msg {
    display:flex; align-items:center; gap:0.5rem;
    padding:1rem 1.5rem; max-width:700px; margin:1rem auto;
    background:rgba(248,113,113,0.08); border:1px solid rgba(248,113,113,0.3);
    color:var(--red); font-size:0.82rem; font-family:var(--font-code);
}

/* ══════════ RESPONSIVE ══════════ */
@media (max-width: 768px) {
    .sidebar {
        position:fixed; left:0; top:0; height:100%; z-index:200;
        transform:translateX(-100%);
    }
    .sidebar.open { transform:translateX(0); }
    .sidebar-close { display:flex; }

    .suggestions { grid-template-columns:repeat(2,1fr); }

    .msg.user { padding-right:1rem; padding-left:2rem; }
    .msg.ai   { padding-left:0.75rem; padding-right:1rem; }
    .msg.ai .msg-inner { max-width:100%; }

    .input-area { padding:0.75rem 1rem 1rem; }

    .chat-header { padding:0 1rem; }
}

@media (max-width: 480px) {
    .suggestions { grid-template-columns:1fr 1fr; }
    .wl-title { font-size:2rem; }
    .msg.ai .msg-inner { gap:0.5rem; }
    .msg-avatar,.typing-avatar { width:28px; height:28px; font-size:0.75rem; }
}