:root{color-scheme:dark;--ink:#effaff;--muted:#91a5b7;--cyan:#82ecf1;--line:rgba(196,231,246,.13);--glass:rgba(9,16,27,.72)}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:#080b13;color:var(--ink);font-family:Manrope,system-ui,sans-serif;overflow:hidden}button,input{font:inherit}.world,.world:after{position:fixed;inset:0;pointer-events:none}.world{z-index:-2;background:linear-gradient(90deg,rgba(5,9,16,.76),rgba(6,10,18,.62) 50%,rgba(5,8,15,.8)),linear-gradient(0deg,rgba(5,8,14,.56),transparent 65%),url('images/image_2.webp') center 43%/cover;filter:saturate(.76)}.world:after{content:"";background:radial-gradient(ellipse at 48% 47%,transparent 15%,rgba(4,8,15,.58) 90%),linear-gradient(115deg,transparent 35%,rgba(87,216,234,.07),transparent 68%);animation:atmo 18s ease-in-out infinite alternate}.grain{position:fixed;inset:0;z-index:-1;opacity:.1;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.3'/%3E%3C/svg%3E")}.app{height:100dvh;min-height:620px;max-width:1600px;margin:auto;padding:24px 4.5vw 18px;display:flex;flex-direction:column}.topbar{height:56px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0}.brand{display:flex;align-items:center;gap:12px}.mark{width:33px;height:33px;border:1px solid rgba(130,236,241,.48);border-radius:50%;display:grid;place-items:center;color:var(--cyan);font:16px 'Space Grotesk';box-shadow:0 0 22px #73e9ed20}.brand-name{font:600 14px 'Space Grotesk';letter-spacing:.2em}.brand-sub{color:#76899b;font:9px 'DM Mono';letter-spacing:.13em;margin-top:3px}.top-meta,.eyebrow,.micro{font:10px 'DM Mono';letter-spacing:.12em;color:#8fa6b8}.top-meta{display:flex;gap:23px;align-items:center}.secure{display:flex;align-items:center;gap:8px}.secure i,.online-dot{width:6px;height:6px;border-radius:100%;background:#83efce;box-shadow:0 0 11px #83efce;display:inline-block}.stage{flex:1;min-height:0;display:grid;grid-template-columns:minmax(175px,235px) minmax(440px,690px) minmax(175px,235px);gap:22px;align-items:center;justify-content:center;padding:22px 0}.side{height:min(610px,78vh);display:flex;flex-direction:column;gap:14px}.glass{background:linear-gradient(145deg,rgba(21,34,48,.69),rgba(7,13,23,.64));border:1px solid var(--line);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);box-shadow:0 18px 65px #02050a70,inset 0 1px 0 #ffffff0a}.portrait-card{position:relative;overflow:hidden;border-radius:17px;flex:1;min-height:310px}.portrait-card:before{content:"";position:absolute;inset:12px;border:1px solid #b8f8ff24;border-radius:12px;z-index:1;pointer-events:none}.portrait-card:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#07101be8 0%,transparent 55%),linear-gradient(100deg,#06101b55,transparent 75%);pointer-events:none}.portrait{width:100%;height:100%;object-fit:cover;object-position:49% 29%;filter:saturate(.74) contrast(1.03);opacity:.9}.portrait-caption{position:absolute;z-index:2;bottom:17px;left:17px;right:17px}.portrait-caption strong{display:block;font:600 12px 'Space Grotesk';letter-spacing:.13em}.portrait-caption small{font:9px 'DM Mono';color:#a2bac9;letter-spacing:.09em}.corner{position:absolute;z-index:2;top:18px;left:18px;color:#9deaf0;font:9px 'DM Mono';letter-spacing:.13em}.corner:before{content:'◈';margin-right:7px}.mini-panel{border-radius:14px;padding:15px 16px}.panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;font:9px 'DM Mono';letter-spacing:.1em;color:#b4c8d4}.metric{display:flex;justify-content:space-between;color:#8195a5;font:9px 'DM Mono';padding:5px 0}.metric b{font-weight:400;color:#c2d7df}.bar{height:2px;background:#32414c;margin-top:8px}.bar i{display:block;width:82%;height:100%;background:#83e3e8;box-shadow:0 0 8px #83e3e8}.chat{height:min(670px,82vh);min-height:500px;border-radius:20px;display:flex;flex-direction:column;overflow:hidden;position:relative;box-shadow:0 25px 100px #02050a99,inset 0 1px 0 #ffffff12}.chat:before{content:"";position:absolute;inset:0 0 auto;height:1px;background:linear-gradient(90deg,transparent,#9ceaf080,transparent)}.chat-head{padding:22px 24px 17px;border-bottom:1px solid #d8f4ff12;display:flex;justify-content:space-between;align-items:center;flex-shrink:0}.title-wrap{display:flex;align-items:center;gap:14px}.avatar{width:42px;height:42px;border-radius:50%;border:1px solid #8cecf14f;overflow:hidden;position:relative;box-shadow:0 0 24px #60dfeb21}.avatar img{width:100%;height:100%;object-fit:cover;object-position:50% 25%}.avatar:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 40%,#09111c55)}h1{font:600 20px 'Space Grotesk';letter-spacing:.16em;margin:0}.subtitle{font:9px 'DM Mono';color:#8ea4b3;letter-spacing:.09em;margin-top:5px}.active{font:9px 'DM Mono';letter-spacing:.1em;color:#a3d6ce;display:flex;align-items:center;gap:8px}.active .online-dot{width:5px;height:5px}.chat-scroll{flex:1;overflow:auto;padding:23px 24px;scrollbar-width:thin;scrollbar-color:#49616c transparent}.day{text-align:center;margin:0 0 23px;color:#748999;font:9px 'DM Mono';letter-spacing:.13em}.message{max-width:86%;margin-bottom:19px;animation:appear .35s ease both}.message.user{margin-left:auto}.label{font:9px 'DM Mono';letter-spacing:.12em;color:#8da3b0;margin:0 0 7px 3px}.message.user .label{text-align:right;margin-right:3px}.bubble{padding:13px 15px;border:1px solid #c6edfa14;background:#e2f7ff08;border-radius:4px 14px 14px 14px;color:#dce8ed;font-size:13px;line-height:1.7}.message.user .bubble{background:linear-gradient(120deg,#4caab422,#5979a328);border-color:#8ce8ee22;border-radius:14px 4px 14px 14px}.welcome{color:#cbd9df}.welcome em{font-style:normal;color:#91e5e8}.audio-state{margin-top:12px;display:flex;align-items:center;gap:10px;color:#9eb6c2;font:9px 'DM Mono';letter-spacing:.1em}.wave{height:18px;display:flex;align-items:center;gap:3px}.wave span{width:2px;height:5px;border-radius:3px;background:#7ee4e8;opacity:.8}.wave span:nth-child(3n){height:12px}.wave span:nth-child(4n){height:8px}.speaking .wave span{animation:wave .65s ease-in-out infinite alternate}.wave span:nth-child(2n){animation-delay:.2s}.composer{padding:16px 20px 20px;border-top:1px solid #d8f4ff12;flex-shrink:0}.composer-label{font:9px 'DM Mono';letter-spacing:.12em;color:#77909e;margin-bottom:9px}.input-wrap{min-height:54px;display:flex;align-items:center;gap:10px;border:1px solid #c5e7f025;border-radius:12px;background:#07111c85;padding:7px 8px 7px 15px;transition:.2s}.input-wrap:focus-within{border-color:#79dce36e;box-shadow:0 0 25px #53dbe316}.input-wrap input{flex:1;min-width:0;color:#effaff;border:0;outline:0;background:transparent;font-size:13px}.input-wrap input::placeholder{color:#718493}.icon-btn,.send{display:grid;place-items:center;border:0;cursor:pointer;transition:.2s}.icon-btn{height:36px;width:36px;border-radius:9px;background:#d8f7ff09;color:#98afba;font-size:16px}.icon-btn:hover{background:#d8f7ff16;color:#c9faff}.send{height:38px;width:42px;border-radius:9px;background:#94ebed;color:#071318;font-size:18px;box-shadow:0 0 18px #7be3e42c}.send:hover{transform:translateY(-1px);box-shadow:0 0 28px #7be3e47a}.send:disabled{opacity:.45;cursor:not-allowed}.hint{display:flex;justify-content:space-between;margin-top:9px;color:#6f8491;font:9px 'DM Mono';letter-spacing:.04em}.right .portrait-card{flex:.9;min-height:230px}.right .portrait{object-position:50% 20%;filter:saturate(.55);}.system-list{border-radius:14px;padding:16px}.sys-row{display:flex;align-items:center;justify-content:space-between;margin-top:12px;color:#8295a4;font:9px 'DM Mono';letter-spacing:.05em}.sys-row b{color:#bee1df;font-weight:400}.sys-row i{display:inline-block;width:5px;height:5px;border-radius:50%;background:#81e4c3;margin-right:6px;box-shadow:0 0 8px #81e4c3}.foot{height:25px;display:flex;align-items:center;justify-content:space-between;color:#728798;font:9px 'DM Mono';letter-spacing:.1em;flex-shrink:0}.foot span{display:flex;align-items:center;gap:8px}.foot .online-dot{width:5px;height:5px}.mobile-status{display:none}
@keyframes wave{to{transform:scaleY(.35);opacity:.45}}@keyframes appear{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}@keyframes atmo{to{transform:translateX(2%) scale(1.02);opacity:.72}}@media(max-width:1050px){.app{padding-inline:24px}.stage{grid-template-columns:minmax(400px,690px) 190px;gap:16px}.left{display:none}.right{height:min(600px,77vh)}}@media(max-width:720px){body{overflow:auto}.world{background-position:54% center}.app{height:100dvh;min-height:560px;padding:12px 13px 9px}.topbar{height:44px}.top-meta .secure span:last-child{display:none}.top-meta{gap:12px}.brand-sub{font-size:8px}.stage{display:block;padding:10px 0;min-height:0}.chat{height:calc(100dvh - 98px);min-height:450px;border-radius:17px}.chat-head{padding:16px 16px 13px}.avatar{width:38px;height:38px}.chat-scroll{padding:20px 16px}.composer{padding:13px 13px 15px}.message{max-width:94%}.right{display:none}.foot{display:none}.mobile-status{display:flex;justify-content:center;gap:7px;color:#8298a5;font:8px 'DM Mono';letter-spacing:.09em;margin-top:8px}.subtitle{font-size:8px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}

/* Visual balance pass: equal side rails, clearer artwork, steadier hierarchy */
.world{background-image:linear-gradient(90deg,rgba(5,9,16,.55),rgba(6,10,18,.42) 50%,rgba(5,8,15,.58)),linear-gradient(0deg,rgba(5,8,14,.42),rgba(5,8,14,.06) 68%),url('../images/image_2.webp');filter:saturate(.88) brightness(1.08)}
.world:after{background:radial-gradient(ellipse at 50% 45%,transparent 20%,rgba(4,8,15,.4) 95%),linear-gradient(115deg,transparent 35%,rgba(87,216,234,.09),transparent 68%)}
.stage{width:100%;max-width:1450px;margin:0 auto;grid-template-columns:minmax(215px,1fr) minmax(440px,1.62fr) minmax(215px,1fr);gap:24px}
.side{height:min(650px,80vh);gap:16px}
.portrait-card{flex:1!important;min-height:0!important}
.mini-panel,.system-list{height:158px;flex:0 0 158px;display:flex;flex-direction:column;justify-content:center}
.right .portrait{object-position:center 34%;filter:saturate(.78) brightness(.94)}
.left .portrait{object-position:50% 28%;filter:saturate(.83) brightness(1.06)}
.portrait-card:after{background:linear-gradient(0deg,#07101be8 0%,rgba(7,16,27,.08) 63%),linear-gradient(100deg,#06101b35,transparent 75%)}
.glass{background:linear-gradient(145deg,rgba(21,34,48,.76),rgba(7,13,23,.70));border-color:rgba(196,231,246,.18)}
.chat{background:linear-gradient(145deg,rgba(14,24,37,.84),rgba(6,12,22,.82))}
.chat-scroll{background:linear-gradient(180deg,rgba(11,21,32,.13),rgba(8,15,25,.24))}
.bubble{background:rgba(218,243,255,.075);border-color:rgba(198,237,250,.19);color:#e6f0f4}
.message.user .bubble{background:linear-gradient(120deg,rgba(76,170,178,.22),rgba(89,121,163,.23));border-color:rgba(140,232,238,.3)}
.subtitle,.brand-sub,.top-meta,.micro,.hint,.foot{color:#a0b4c2}
.label,.day,.composer-label{color:#a6bac6}
@media(max-width:1050px){.stage{grid-template-columns:minmax(430px,1.65fr) minmax(215px,1fr);gap:18px}.left{display:none}.right{height:min(650px,80vh)}}
@media(max-width:720px){.world{background-image:linear-gradient(90deg,rgba(5,9,16,.58),rgba(6,10,18,.52)),linear-gradient(0deg,rgba(5,8,14,.45),transparent 70%),url('../images/image_2.webp');background-position:54% center}.stage{display:block;padding:10px 0}.right{display:none}.chat{height:calc(100dvh - 98px)}}
/* Keep the footer and all status labels inside the viewport */
.app{min-height:0}
.stage{min-height:0;overflow:visible}
.chat{height:100%;min-height:0;max-height:min(670px,calc(100dvh - 150px))}
.side{height:min(650px,100%);min-height:0}
.foot{height:30px;flex:0 0 30px;padding-bottom:2px}
@media(max-width:1050px){.chat{max-height:min(670px,calc(100dvh - 150px))}}
@media(max-width:720px){.app{min-height:0}.chat{height:calc(100dvh - 108px);max-height:none;min-height:0}.stage{overflow:visible}.mobile-status{margin:4px 0 0}}
/* Give the central chat a little more vertical presence than the side panels */
@media(min-width:721px){
  .chat{height:calc(100% + 34px);max-height:min(704px,calc(100dvh - 116px));}
}
.mark{width:48px;height:48px;border:1px solid rgba(130,236,241,.48);border-radius:50%;overflow:hidden;background:#07111e;box-shadow:0 0 22px #73e9ed35;flex:0 0 48px;padding:0}
.mark img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;border-radius:50%}
@media(max-width:720px){.mark{width:40px;height:40px;flex-basis:40px}}
/* Ambient motion: slow enough to keep the interface calm */
@keyframes logo-breathe{0%,100%{box-shadow:0 0 18px #73e9ed26}50%{box-shadow:0 0 30px #73e9ed63}}
@keyframes status-pulse{0%,100%{opacity:.72;box-shadow:0 0 7px currentColor}50%{opacity:1;box-shadow:0 0 14px currentColor}}
@keyframes panel-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes border-shimmer{0%,100%{border-color:rgba(196,231,246,.16)}50%{border-color:rgba(130,236,241,.31)}}
.mark{animation:logo-breathe 4s ease-in-out infinite}
.active .online-dot,.secure i,.sys-row i,.foot .online-dot{animation:status-pulse 2.6s ease-in-out infinite}
.left .portrait-card{animation:panel-float 8s ease-in-out infinite}
.right .portrait-card{animation:panel-float 9s ease-in-out infinite reverse}
.chat{animation:border-shimmer 8s ease-in-out infinite}
.state-text{color:#a4e5df}.label-tag{color:#8297a5}.build-sep{color:#9cb3c0}
@media(prefers-reduced-motion:reduce){.mark,.active .online-dot,.secure i,.sys-row i,.foot .online-dot,.left .portrait-card,.right .portrait-card,.chat{animation:none!important}}

/* Rare, restrained signal glitch on the EIRA identity */
@keyframes signal-glitch{
  0%,91%,94%,100%{transform:translate(0);text-shadow:none;filter:none}
  91.4%{transform:translate(1px,0);text-shadow:-1px 0 rgba(87,228,242,.75),1px 0 rgba(185,106,255,.45)}
  92%{transform:translate(-1px,1px);text-shadow:1px 0 rgba(87,228,242,.65),-1px 0 rgba(185,106,255,.45)}
  92.6%{transform:translate(0,-1px);filter:brightness(1.18)}
  93.2%{transform:translate(1px,0);text-shadow:1px 0 rgba(87,228,242,.55),-1px 0 rgba(185,106,255,.35)}
}
@keyframes logo-scan{
  0%,88%,100%{opacity:0;transform:translateY(-18px)}
  89%{opacity:.5;transform:translateY(-4px)}
  90%{opacity:0;transform:translateY(16px)}
}
.brand-name{display:inline-block;animation:signal-glitch 9s steps(1,end) infinite}
.mark{position:relative}
.mark:after{content:"";position:absolute;left:3px;right:3px;top:0;height:6px;border-radius:50%;background:linear-gradient(90deg,transparent,#98f8ff,transparent);filter:blur(2px);opacity:0;animation:logo-scan 9s steps(1,end) infinite;pointer-events:none}
@media(prefers-reduced-motion:reduce){.brand-name,.mark:after{animation:none!important}}

/* Quiet hover feedback and a barely-there lift for the glass containers */
@keyframes chat-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.chat{animation:border-shimmer 8s ease-in-out infinite,chat-float 10s ease-in-out infinite;transition:box-shadow .28s ease,border-color .28s ease}
.glass{transition:background .28s ease,border-color .28s ease,box-shadow .28s ease,filter .28s ease}
.portrait-card:hover,.mini-panel:hover,.system-list:hover{filter:brightness(1.07);border-color:rgba(130,236,241,.31);box-shadow:0 20px 70px #02050a80,0 0 24px #6ee7ed15,inset 0 1px 0 #ffffff12}
.chat:hover{box-shadow:0 28px 110px #02050ab0,0 0 28px #6ee7ed12,inset 0 1px 0 #ffffff14}
.icon-btn,.send{transition:transform .22s ease,background .22s ease,color .22s ease,box-shadow .22s ease}
.icon-btn:hover{transform:translateY(-1px);box-shadow:0 0 14px #8ce8ee18}
.send:hover{transform:translateY(-2px) scale(1.03)}
@media(prefers-reduced-motion:reduce){.chat{animation:none!important}.glass,.icon-btn,.send{transition:none!important}}
.composer-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:9px}
.composer-toolbar .composer-label{margin:0}
.voice-tools{display:flex;align-items:center;gap:7px}
.voice-select-label{font:8px 'DM Mono';letter-spacing:.1em;color:#8399a8}
#voiceSelect,.tool-button{height:27px;border:1px solid rgba(190,226,239,.16);border-radius:7px;background:rgba(7,17,28,.78);color:#b9d0da;font:8px 'DM Mono';letter-spacing:.04em;padding:0 8px;outline:none}
#voiceSelect{max-width:130px}
#voiceSelect:focus,.tool-button:hover{border-color:rgba(130,236,241,.45);color:#e7fbff}
.tool-button{cursor:pointer;transition:background .2s ease,border-color .2s ease,transform .2s ease}
.tool-button:hover{background:rgba(108,218,226,.12);transform:translateY(-1px)}
.tool-button[aria-pressed="false"]{color:#82929d}
.clear-button{color:#94a4ae}
.icon-btn.listening{color:#09151a;background:#82ecf1;box-shadow:0 0 18px #82ecf166;animation:status-pulse 1s ease-in-out infinite}
@media(max-width:720px){.composer-toolbar{align-items:flex-start;flex-direction:column;gap:7px}.voice-tools{width:100%;justify-content:flex-end}.voice-select-label{margin-right:auto}#voiceSelect{max-width:145px}}