:root{color-scheme:dark;--bg:#06101d;--panel:#0b1b2e;--panel2:#0d2137;--line:rgba(130,166,201,.15);--text:#f3f8ff;--muted:#849bb2;--cyan:#24d5e8;--blue:#3989ff;--green:#51dda9;--red:#ff7085;--shadow:0 24px 70px rgba(0,0,0,.38)}
*{box-sizing:border-box}html,body{min-height:100%;margin:0}body{overflow-x:hidden;color:var(--text);background:radial-gradient(circle at 85% 0,#10344c 0,transparent 28%),linear-gradient(150deg,#081523,#050c16 75%);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}.glow{position:fixed;border-radius:50%;filter:blur(130px);opacity:.12;pointer-events:none}.glow-a{width:430px;height:430px;right:-190px;top:-160px;background:var(--cyan)}.glow-b{width:500px;height:500px;left:-260px;bottom:-260px;background:var(--blue)}
button,input,textarea{font:inherit}.app-shell{position:relative;width:min(1440px,calc(100% - 36px));margin:auto}.topbar{height:74px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:11px;color:var(--text);text-decoration:none}.brand-icon{width:38px;height:38px;display:grid;place-items:center;border-radius:12px;background:linear-gradient(140deg,var(--cyan),var(--blue));box-shadow:0 8px 26px rgba(36,213,232,.18)}.brand-icon svg{width:23px;fill:#05101d}.brand strong,.brand small{display:block}.brand strong{font-size:15px}.brand small{margin-top:3px;color:#617a92;font-size:8px;font-weight:850;letter-spacing:2px}.top-actions{display:flex;align-items:center;gap:10px}.service-state{display:flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--line);border-radius:99px;color:var(--muted);font-size:10px}.service-state span{width:7px;height:7px;border-radius:50%;background:#718195}.service-state.online span{background:var(--green);box-shadow:0 0 12px var(--green)}.service-state.offline span{background:var(--red)}.ghost-button,.icon-button,.load-more,.back-button{border:1px solid var(--line);color:#a8bdcf;background:rgba(8,22,37,.75);cursor:pointer}.ghost-button{height:34px;padding:0 13px;border-radius:9px;font-size:10px;font-weight:750}.notice{margin:18px 0;padding:10px 14px;border:1px solid rgba(36,213,232,.13);border-radius:10px;color:#7089a1;background:rgba(36,213,232,.035);font-size:10px}.notice strong{color:#b8ccdc}
.inbox-card{height:calc(100vh - 156px);min-height:540px;display:grid;grid-template-columns:340px minmax(420px,1fr) 250px;overflow:hidden;border:1px solid var(--line);border-radius:20px;background:rgba(8,23,39,.82);box-shadow:var(--shadow);backdrop-filter:blur(18px)}.conversation-rail,.details-panel{min-width:0;min-height:0;background:rgba(9,27,45,.72)}.conversation-rail{display:flex;flex-direction:column;min-height:0;overflow:hidden;border-right:1px solid var(--line)}.rail-head{display:flex;align-items:center;justify-content:space-between;padding:24px 22px 15px}.eyebrow{margin:0 0 7px;color:var(--cyan);font-size:8px;font-weight:850;letter-spacing:2px}.rail-head h1,.details-panel h2{margin:0;font-size:20px;letter-spacing:-.4px}.icon-button{width:34px;height:34px;display:grid;place-items:center;border-radius:9px}.icon-button svg{width:16px;fill:currentColor}.icon-button.loading svg{animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.search-box{height:39px;display:flex;align-items:center;gap:8px;margin:0 18px 13px;padding:0 12px;border:1px solid var(--line);border-radius:10px;background:rgba(3,14,25,.55)}.search-box svg{width:15px;fill:#5d778f}.search-box input{width:100%;border:0;outline:0;color:var(--text);background:transparent;font-size:11px}.search-box input::placeholder{color:#597189}.conversation-list{flex:1 1 0;min-height:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;padding:0 8px 10px}.conversation-item{width:100%;display:grid;grid-template-columns:43px 1fr auto;gap:11px;align-items:center;padding:12px;border:0;border-radius:11px;color:inherit;background:transparent;text-align:left;cursor:pointer}.conversation-item:hover{background:rgba(69,142,210,.07)}.conversation-item.active{background:linear-gradient(100deg,rgba(36,213,232,.12),rgba(57,137,255,.08));box-shadow:inset 2px 0 var(--cyan)}.conversation-item.unread .conversation-copy strong{color:#fff;font-weight:850}.conversation-item.unread .conversation-copy span{color:#b7cce0}.unread-badge{display:grid;place-items:center;min-width:18px;height:18px;margin-top:7px;padding:0 5px;border-radius:99px;color:#04111c;background:var(--cyan);font-size:8px;font-weight:900}.avatar{position:relative;width:43px;height:43px;display:grid;place-items:center;overflow:hidden;border-radius:50%;color:#dceeff;background:linear-gradient(145deg,#245a83,#163451);font-size:14px;font-weight:800;text-transform:uppercase}.avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.avatar img+span{visibility:hidden}.conversation-copy{min-width:0}.conversation-copy strong,.conversation-copy span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.conversation-copy strong{font-size:12px}.conversation-copy span{margin-top:5px;color:#7088a0;font-size:10px}.conversation-meta{align-self:start;padding-top:2px;color:#5e7890;font-size:8px}.rail-empty,.message-loading{display:grid;place-items:center;gap:12px;padding:48px 24px;color:#698198;text-align:center;font-size:10px}.loader{width:20px;height:20px;border:2px solid rgba(36,213,232,.18);border-top-color:var(--cyan);border-radius:50%;animation:spin .8s linear infinite}.load-more{height:36px;margin:0 18px 14px;border-radius:9px;font-size:9px;font-weight:750}
.chat-panel{min-width:0;min-height:0;overflow:hidden;position:relative;background:linear-gradient(rgba(6,17,30,.76),rgba(6,17,30,.93)),radial-gradient(circle at 50% 0,#15334e 0,transparent 45%)}.chat-empty{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:30px;text-align:center}.empty-icon{width:70px;height:70px;display:grid;place-items:center;border:1px solid rgba(36,213,232,.18);border-radius:23px;color:var(--cyan);background:rgba(36,213,232,.05)}.empty-icon svg{width:38px;fill:currentColor}.chat-empty h2{margin:21px 0 8px;font-size:20px}.chat-empty p{max-width:310px;margin:0;color:var(--muted);font-size:11px;line-height:1.6}.chat-view{height:100%;min-height:0;display:grid;grid-template-rows:70px minmax(0,1fr) auto}.chat-head{display:flex;align-items:center;gap:12px;padding:0 21px;border-bottom:1px solid var(--line);background:rgba(8,24,40,.72)}.chat-head .avatar{width:38px;height:38px}.chat-head h2{margin:0;font-size:13px}.chat-head p{margin:4px 0 0;color:#637d95;font-size:8px}.chat-refresh{margin-left:auto}.back-button{display:none;width:31px;height:31px;border-radius:8px;font-size:22px}.message-area{min-height:0;display:flex;flex-direction:column-reverse;gap:8px;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;padding:22px}.message-row{display:flex}.message-row.outgoing{justify-content:flex-end}.bubble{max-width:min(72%,520px);padding:10px 13px;border:1px solid var(--line);border-radius:4px 14px 14px 14px;color:#d9e6f1;background:#102840;font-size:11px;line-height:1.5;word-break:break-word}.outgoing .bubble{border-color:rgba(36,213,232,.17);border-radius:14px 4px 14px 14px;color:#03111d;background:linear-gradient(120deg,#35d3df,#4ba3ff)}.bubble small{display:block;margin-top:5px;color:#66829b;font-size:7px}.outgoing .bubble small{color:rgba(3,17,29,.58);text-align:right}.attachment-note{font-style:italic}.bubble-text{display:block}.image-link{position:relative;display:block;overflow:hidden;margin:-7px -10px 8px;border-radius:10px;color:#8aa4bb;background:#071522;text-decoration:none}.message-image{display:block;width:100%;max-width:360px;max-height:360px;object-fit:cover}.image-fallback{display:none;padding:24px;text-align:center;font-size:10px}.message-image.broken{display:none}.message-image.broken+.image-fallback{display:block}.media-only{padding:8px}.media-only .image-link{margin:0}.attachment-chip{display:inline-block;margin-bottom:7px;padding:7px 10px;border-radius:8px;background:rgba(111,139,164,.14);font-size:9px;text-transform:capitalize}.history-more{align-self:center;padding:7px 11px;border:1px solid var(--line);border-radius:99px;color:#7290a8;background:rgba(8,23,39,.8);font-size:8px;cursor:pointer}.reply-box{display:grid;grid-template-columns:minmax(0,1fr) 43px;align-items:end;gap:10px;padding:14px 18px;border-top:1px solid var(--line);background:rgba(8,23,39,.9)}.reply-input-wrap{min-width:0}.reply-box textarea{width:100%;max-height:120px;resize:none;border:1px solid var(--line);border-radius:12px;outline:0;padding:12px;color:var(--text);background:rgba(3,14,25,.72);font-size:11px;line-height:1.45}.reply-box textarea:focus{border-color:rgba(36,213,232,.45)}.reply-box button{width:43px;height:43px;border:0;border-radius:12px;color:#06111d;background:linear-gradient(140deg,var(--cyan),var(--blue));cursor:pointer}.reply-box button:disabled{opacity:.5}.reply-box svg{width:18px;fill:currentColor}.reply-status{padding:7px 2px 0;color:var(--green);font-size:9px;line-height:1.35}.reply-status.error{color:var(--red)}
.details-panel{padding:25px 20px;border-left:1px solid var(--line)}.details-panel h2{margin-bottom:19px}.health-grid{display:grid;gap:1px}.health-grid>div{display:grid;grid-template-columns:9px 1fr;align-items:center;gap:10px;padding:12px 0;border-top:1px solid var(--line)}.health-grid>div>span{width:7px;height:7px;border-radius:50%;background:#687d91}.health-grid>div>span.on{background:var(--green);box-shadow:0 0 10px rgba(81,221,169,.55)}.health-grid>div>span.off{background:var(--red)}.health-grid p{margin:0;color:#b9cad9;font-size:10px;font-weight:700}.health-grid small{display:block;margin-top:4px;color:#5d7891;font-size:8px;font-weight:500}.details-note{margin-top:20px;padding:15px;border:1px solid var(--line);border-radius:11px;background:rgba(4,15,27,.38)}.details-note strong{font-size:9px;text-transform:uppercase;letter-spacing:.8px}.details-note p{margin:7px 0 0;color:#718aa1;font-size:9px;line-height:1.55}footer{display:flex;justify-content:space-between;padding:18px 3px;color:#4f687f;font-size:8px;text-transform:uppercase;letter-spacing:1.2px}
.modal-backdrop{position:fixed;z-index:20;inset:0;display:grid;place-items:center;padding:20px;background:rgba(2,8,15,.76);backdrop-filter:blur(9px)}.modal-backdrop.closed{display:none}.key-modal{position:relative;width:min(430px,100%);padding:34px;border:1px solid var(--line);border-radius:20px;background:linear-gradient(145deg,#102840,#091a2d);box-shadow:var(--shadow)}.modal-close{position:absolute;right:16px;top:14px;border:0;color:#7590a8;background:transparent;font-size:23px;cursor:pointer}.modal-icon{width:42px;height:42px;display:grid;place-items:center;margin-bottom:18px;border-radius:12px;color:var(--green);background:rgba(81,221,169,.08)}.modal-icon svg{width:20px;fill:currentColor}.key-modal h2{margin:0;font-size:23px}.key-modal>p:not(.eyebrow){margin:11px 0 20px;color:var(--muted);font-size:11px;line-height:1.65}.key-modal code{color:#c1d5e6}.key-modal label{display:grid;gap:8px;color:#b5c6d5;font-size:10px;font-weight:700}.key-modal input{height:45px;padding:0 13px;border:1px solid var(--line);border-radius:10px;outline:0;color:var(--text);background:#061422;font-size:11px}.key-modal input:focus{border-color:rgba(36,213,232,.5)}.connect-button{width:100%;height:45px;margin-top:16px;border:0;border-radius:11px;color:#05111c;background:linear-gradient(120deg,var(--cyan),var(--blue));font-size:11px;font-weight:850;cursor:pointer}.connect-button:disabled{opacity:.55}.modal-error{margin-top:12px;color:var(--red);font-size:9px;line-height:1.45}.hidden{display:none!important}
@media(max-width:1100px){.inbox-card{grid-template-columns:320px 1fr}.details-panel{display:none}}@media(max-width:730px){.app-shell{width:100%}.topbar{padding:0 14px}.notice{margin:10px 12px}.inbox-card{height:calc(100vh - 130px);min-height:560px;margin:0 8px;border-radius:15px;grid-template-columns:1fr}.conversation-rail{border-right:0}.chat-panel{display:none}.inbox-card.chat-open .conversation-rail{display:none}.inbox-card.chat-open .chat-panel{display:block}.chat-view{height:100%}.back-button{display:grid;place-items:center}footer{display:none}}@media(max-width:420px){.brand small{display:none}.notice{font-size:9px}.conversation-rail{min-width:0}.key-modal{padding:27px 21px}}