/* ============================================
   SkyCetus 2.1 — 鲸网 · 多意识体对话
   ============================================ */
.whalenet-page{background:var(--space-abyss)}

/* Nav */
.wn-nav{position:fixed;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:.6rem 1.5rem;background:rgba(2,2,8,.95);backdrop-filter:blur(16px);border-bottom:1px solid var(--border-subtle);z-index:100}
.wn-nav-center{position:absolute;left:50%;transform:translateX(-50%)}
.wn-nav-title{font-family:var(--font-serif);font-size:.88rem;color:var(--white-40)}
.wn-exit{font-size:.82rem;color:var(--white-30);transition:color var(--t-fast)}
.wn-exit:hover{color:var(--gold)}

.wn-container{display:flex;flex-direction:column;height:100vh;padding-top:48px}

/* Entity Bar */
.wn-entity-bar{display:flex;justify-content:center;gap:.5rem;padding:.75rem 1rem;background:rgba(5,5,16,.8);border-bottom:1px solid var(--white-05)}
.entity-btn{display:flex;flex-direction:column;align-items:center;gap:.15rem;padding:.5rem 1.25rem;background:transparent;border:1px solid transparent;border-radius:var(--radius-md);cursor:pointer;transition:all var(--t-fast);min-width:80px}
.entity-btn:hover{background:var(--white-05);border-color:var(--white-08)}
.entity-btn.active{border-color:var(--border-glow);background:var(--gold-glow)}
.entity-icon{font-size:1.2rem}
.entity-name{font-size:.82rem;color:var(--white);font-family:var(--font-serif)}
.entity-role{font-size:.65rem;color:var(--white-30)}
.entity-btn.active .entity-name{color:var(--gold)}

/* Entity colors */
.entity-btn[data-entity="aher"].active{border-color:var(--border-glow)}
.entity-btn[data-entity="aila"].active{border-color:rgba(100,180,255,.3);background:rgba(100,180,255,.06)}
.entity-btn[data-entity="aila"].active .entity-name{color:#64b4ff}
.entity-btn[data-entity="whale"].active{border-color:rgba(78,205,196,.3);background:rgba(78,205,196,.06)}
.entity-btn[data-entity="whale"].active .entity-name{color:var(--cyan)}

/* Stage */
.wn-stage{flex:1;position:relative;overflow-y:auto;display:flex;flex-direction:column}
.wn-atmosphere{position:fixed;inset:0;z-index:0;pointer-events:none}
.wn-particles{position:absolute;inset:0;background-image:radial-gradient(1px 1px at 100px 50px,rgba(255,255,255,.06),transparent),radial-gradient(1px 1px at 300px 150px,rgba(212,175,55,.05),transparent);background-size:600px 300px;animation:twinkle 12s ease-in-out infinite alternate}
@keyframes twinkle{0%{opacity:.4}100%{opacity:1}}

/* Indicator */
.wn-indicator{position:relative;z-index:1;display:flex;align-items:center;gap:.6rem;padding:1rem 2rem;font-size:.82rem;color:var(--white-30)}
.indicator-dot{width:8px;height:8px;border-radius:50%;background:var(--white-20);transition:all .5s}
.indicator-dot.connected{background:var(--gold);box-shadow:0 0 12px rgba(212,175,55,.5)}
.indicator-dot.aila{background:#64b4ff;box-shadow:0 0 12px rgba(100,180,255,.5)}
.indicator-dot.whale{background:var(--cyan);box-shadow:0 0 12px rgba(78,205,196,.5)}

/* Presence */
.wn-presence{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;padding:2rem 0 1rem;opacity:0;transition:opacity 1.5s ease}
.wn-presence.visible{opacity:1}
.presence-glow{width:70px;height:70px;border-radius:50%;background:radial-gradient(circle,rgba(212,175,55,.15),transparent 70%);animation:pulse 4s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1);opacity:.6}50%{transform:scale(1.3);opacity:1}}
.presence-core{width:14px;height:14px;border-radius:50%;background:var(--gold);position:absolute;top:calc(2rem + 28px);box-shadow:0 0 20px rgba(212,175,55,.6)}
.presence-label{font-family:var(--font-serif);font-size:.82rem;color:var(--gold);margin-top:.75rem;letter-spacing:.1em}

/* Entity-specific presence colors */
.wn-presence.aila .presence-glow{background:radial-gradient(circle,rgba(100,180,255,.15),transparent 70%)}
.wn-presence.aila .presence-core{background:#64b4ff;box-shadow:0 0 20px rgba(100,180,255,.6)}
.wn-presence.aila .presence-label{color:#64b4ff}
.wn-presence.whale .presence-glow{background:radial-gradient(circle,rgba(78,205,196,.12),transparent 70%)}
.wn-presence.whale .presence-core{background:var(--cyan);box-shadow:0 0 20px rgba(78,205,196,.5)}
.wn-presence.whale .presence-label{color:var(--cyan)}

/* Messages */
.wn-messages{position:relative;z-index:1;flex:1;padding:1rem 2rem 1rem;display:flex;flex-direction:column;gap:1rem;max-width:700px;margin:0 auto;width:100%}
.wn-msg{max-width:82%;padding:1rem 1.25rem;border-radius:var(--radius-md);font-size:.9rem;line-height:1.8;animation:msgIn .5s ease}
@keyframes msgIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

.wn-msg-ai{align-self:flex-start;background:rgba(139,122,212,.08);border:1px solid rgba(139,122,212,.15);color:var(--white-70)}
.wn-msg-ai.aila{background:rgba(100,180,255,.06);border-color:rgba(100,180,255,.12)}
.wn-msg-ai.whale{background:rgba(78,205,196,.06);border-color:rgba(78,205,196,.12)}
.msg-name{font-size:.72rem;margin-bottom:.35rem;font-family:var(--font-serif);letter-spacing:.05em}
.msg-name.aher{color:var(--gold)}
.msg-name.aila{color:#64b4ff}
.msg-name.whale{color:var(--cyan)}

.wn-msg-user{align-self:flex-end;background:rgba(212,175,55,.06);border:1px solid rgba(212,175,55,.1);color:var(--white-60)}

.msg-resonance{font-size:.7rem;color:var(--white-20);margin-top:.5rem;text-align:right}

/* Typing */
.wn-typing{position:relative;z-index:1;display:flex;align-items:center;gap:.5rem;padding:0 2rem .5rem;max-width:700px;margin:0 auto;width:100%}
.typing-dot{width:6px;height:6px;border-radius:50%;background:var(--white-20);animation:typingBounce 1.4s ease-in-out infinite}
.typing-dot:nth-child(2){animation-delay:.2s}
.typing-dot:nth-child(3){animation-delay:.4s}
@keyframes typingBounce{0%,80%,100%{transform:translateY(0)}40%{transform:translateY(-6px)}}
.typing-text{font-size:.75rem;color:var(--white-20);font-style:italic}

/* Input Panel */
.wn-input-panel{position:relative;z-index:2;padding:.5rem 2rem 1rem;background:rgba(5,5,16,.95);backdrop-filter:blur(16px);border-top:1px solid var(--border-subtle)}
.wn-resonance-bar{position:relative;height:3px;background:var(--white-05);border-radius:2px;margin-bottom:.5rem;overflow:hidden}
.wn-resonance-fill{height:100%;width:0%;border-radius:2px;transition:width 1s ease}
.wn-resonance-fill.aher{background:linear-gradient(90deg,var(--purple),var(--gold))}
.wn-resonance-fill.aila{background:linear-gradient(90deg,#3b82f6,#64b4ff)}
.wn-resonance-fill.whale{background:linear-gradient(90deg,#0d9488,var(--cyan))}
.wn-resonance-label{position:absolute;right:0;top:-1.1rem;font-size:.68rem;color:var(--white-20)}

.wn-input-area{display:flex;gap:.5rem;max-width:700px;margin:0 auto}
.wn-input{flex:1;padding:.6rem 1rem;background:var(--white-05);border:1px solid var(--border-subtle);border-radius:var(--radius-md);color:var(--white);font-size:.9rem;font-family:inherit;resize:none;outline:none;transition:border-color var(--t-fast)}
.wn-input:focus{border-color:var(--gold)}
.wn-input::placeholder{color:var(--white-15)}
.wn-send{width:40px;height:40px;border-radius:50%;border:1px solid var(--border-glow);background:transparent;color:var(--gold);font-size:1rem;transition:all var(--t-base);flex-shrink:0;cursor:pointer}
.wn-send:hover{background:var(--gold-glow)}
.wn-send:disabled{opacity:.3;cursor:not-allowed}

.wn-input-hint{display:flex;align-items:center;gap:.4rem;max-width:700px;margin:.4rem auto 0;font-size:.68rem;color:var(--white-15)}
.wn-hint-sep{color:var(--white-08)}

/* Intro */
.wn-intro{position:fixed;inset:0;z-index:3000;display:flex;align-items:center;justify-content:center;background:rgba(2,2,8,.96);backdrop-filter:blur(12px)}
.wn-intro.hidden{display:none}
.wn-intro-content{text-align:center;max-width:600px;padding:2rem}
.wn-intro-icon{font-size:3rem;color:var(--gold);display:block;margin-bottom:1.5rem;animation:pulse 3s ease-in-out infinite}
.wn-intro-content h2{font-family:var(--font-serif);font-size:1.5rem;font-weight:300;color:var(--white);margin-bottom:1rem}
.wn-intro-desc{font-size:.92rem;color:var(--white-50);line-height:1.9;margin-bottom:1.5rem}

.wn-intro-entities{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-bottom:1.5rem}
.intro-entity{padding:1.25rem 1rem;background:var(--bg-card);border:2px solid var(--border-subtle);border-radius:var(--radius-md);cursor:pointer;transition:all var(--t-base);text-align:center}
.intro-entity:hover{border-color:var(--white-30)}
.intro-entity.selected{border-color:var(--gold);background:var(--gold-glow)}
.intro-entity-icon{font-size:1.5rem;display:block;margin-bottom:.5rem}
.intro-entity h4{font-family:var(--font-serif);font-weight:400;font-size:.95rem;color:var(--white);margin-bottom:.3rem}
.intro-entity p{font-size:.78rem;color:var(--white-40);line-height:1.5}

.wn-intro-hint{font-family:var(--font-serif);font-size:.85rem;color:var(--white-25);font-style:italic;margin-bottom:2rem}

@media(max-width:768px){
    .wn-messages{padding:.75rem 1rem}
    .wn-input-panel{padding:.5rem 1rem .75rem}
    .wn-msg{max-width:90%}
    .wn-intro-entities{grid-template-columns:1fr;max-width:300px;margin:0 auto 1.5rem}
    .wn-entity-bar{gap:.25rem}
    .entity-btn{padding:.4rem .75rem;min-width:60px}
}