*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#050b14}body{font-family:Arial,sans-serif;color:#f5f7fb}#viewport{position:relative;margin:0 auto;overflow:hidden;width:1536px;height:1024px}#stage{position:absolute;left:0;top:0;width:1536px;height:1024px;transform-origin:0 0;background:#050d18}
.topbar{position:absolute;left:0;top:0;width:1536px;height:66px;background:linear-gradient(90deg,#0c1b2f 0%,#102440 53%,#08131f 100%);border-bottom:1px solid #1b304d}
.brand{position:absolute;left:20px;top:10px;width:210px;height:48px;object-fit:cover}
.tagline{position:absolute;left:272px;top:24px;font-size:13px;color:#c5d2e8;white-space:nowrap}.tagline span{color:#7590b6;margin:0 10px}
.slashes{position:absolute;left:973px;top:0;width:145px;height:66px;overflow:hidden}.slashes i{position:absolute;top:-16px;width:10px;height:96px;background:#1f61ff;transform:skew(-35deg);opacity:.86}.slashes i:nth-child(1){left:38px}.slashes i:nth-child(2){left:74px;background:#3e7fff}.slashes i:nth-child(3){left:104px;background:#1b4ed3}
.server{position:absolute;left:1122px;top:25px;color:#a7f3c1;font-size:14px}.server b{display:inline-block;width:10px;height:10px;border-radius:50%;background:#42e589;margin-right:9px;box-shadow:0 0 10px rgba(66,229,137,.5)}
.bell{position:absolute;left:1257px;top:17px;width:30px;height:35px;color:#c9d9f3}.bell svg{width:25px;height:25px;fill:none;stroke:#c9d9f3;stroke-width:2}.bell em{position:absolute;right:-4px;top:-7px;width:21px;height:21px;border-radius:50%;background:#ff3b4d;color:#fff;font-size:12px;font-style:normal;display:grid;place-items:center;font-weight:700}
.admin-avatar{position:absolute;left:1326px;top:9px;width:46px;height:46px;object-fit:cover}.admin-copy{position:absolute;left:1380px;top:14px}.admin-copy strong{display:block;font-size:15px}.admin-copy span{display:block;font-size:13px;color:#bac8dd;margin-top:3px}.chev{position:absolute;right:35px;top:22px;font-size:21px;color:#bbcae1}
.sidebar{position:absolute;left:0;top:66px;width:233px;height:897px;background:#0a1626;border-right:1px solid #17283e;overflow:hidden}.sidebar nav{padding-top:18px}.nav-item{position:relative;height:58px;margin:0 8px 0 8px;border-radius:10px;display:flex;align-items:center;color:#bfd1ed;font-size:16px}.nav-item>span:nth-child(2){margin-left:18px}.nav-item .navicon{width:27px;text-align:center;font-size:24px;color:#bad0ff}.nav-item.active{background:linear-gradient(90deg,#1c79ff 0%,#2b55ff 100%);color:white;box-shadow:0 0 18px rgba(38,105,255,.75)}.nav-item.active>span:nth-child(2){font-weight:600}.red-badge{position:absolute;right:12px;top:17px;width:23px;height:23px;border-radius:50%;background:#ff3449;color:#fff;font-size:12px;font-style:normal;display:grid;place-items:center;font-weight:700}.nav-item.ext small{position:absolute;right:11px;font-size:19px;color:#b9cdf1}.side-line{position:absolute;left:23px;right:14px;top:257px;height:1px;background:#21334c}.account-title{position:absolute;left:24px;top:277px;color:#91a6c5;font-size:13px}.nav-item.account{position:absolute;left:0;right:0;margin:0 8px}.nav-item.account:nth-of-type(1){top:307px}.nav-item.account:nth-of-type(2){top:363px}.sidebar-art{position:absolute;left:0;bottom:0;width:233px;height:508px;object-fit:cover;pointer-events:none}
.workspace{position:absolute;left:233px;top:66px;width:1303px;height:897px;background:#050d18}.panel{background:linear-gradient(180deg,#0c1727 0%,#0c1625 100%);border:1px solid #21344d;border-radius:12px}
.chatlist{position:absolute;left:13px;top:14px;width:354px;height:868px;padding:0}.list-title{position:absolute;left:17px;top:18px;font-size:27px;font-weight:750;letter-spacing:-.4px}.list-sub{position:absolute;left:17px;top:55px;font-size:14px;color:#a9bad5}.search{position:absolute;left:17px;top:84px;width:318px;height:41px;border:1px solid #405274;background:#1b2940;border-radius:8px;color:#9eb2d2;display:flex;align-items:center;font-size:14px}.search span:first-child{font-size:23px;margin:0 10px 0 14px;color:#a9bedf}.tabs{position:absolute;left:17px;top:137px;display:flex;gap:10px}.tabs button{height:35px;border:1px solid #273b59;border-radius:8px;background:#101d30;color:#eef3ff;padding:0 17px;font-size:14px}.tabs button.sel{background:linear-gradient(180deg,#0c82ff,#066ef2);box-shadow:0 0 18px rgba(0,119,255,.55)}.tabs button b{display:inline-grid;place-items:center;width:21px;height:21px;border-radius:50%;background:#ff4154;margin-left:8px;color:#fff;font-size:11px}
#conversationList{position:absolute;left:0;right:0;top:184px;bottom:0;overflow:hidden}.conv{position:relative;height:74px;margin:0 13px;border-bottom:1px solid #1d3149;display:flex;align-items:center}.conv.active{height:74px;border:1px solid #3b7fff;border-radius:9px;background:linear-gradient(90deg,#18304f,#172844);box-shadow:inset 0 0 0 1px rgba(86,128,255,.25)}.conv img{width:54px;height:54px;object-fit:cover;flex:0 0 auto;margin-left:0}.conv.active img{margin-left:1px}.conv-copy{min-width:0;margin-left:12px;margin-top:-1px}.conv-copy strong{display:block;font-size:15px;font-weight:750;margin-bottom:5px}.conv-copy span{display:block;color:#b5c7e3;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:203px}.conv-meta{position:absolute;right:0;top:12px;text-align:right}.conv.active .conv-meta{right:11px}.conv-meta time{display:block;color:#afc2e1;font-size:13px}.conv-meta b{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#ff3e50;margin:8px 0 0 auto;color:#fff;font-size:12px}
.chatpanel{position:absolute;left:376px;top:14px;width:628px;height:868px;overflow:hidden}.chat-head{position:absolute;left:0;top:0;width:100%;height:85px;border-bottom:1px solid #1c3048}.head-avatar{position:absolute;left:16px;top:15px;width:56px;height:56px;object-fit:cover}.head-name{position:absolute;left:88px;top:18px;font-size:17px;font-weight:750}.head-online{position:absolute;left:88px;top:42px;color:#8bd7a6;font-size:13px}.head-online span,.profile-online span{display:inline-block;width:9px;height:9px;border-radius:50%;background:#48df80;margin-right:7px}.head-last{position:absolute;left:88px;top:62px;color:#8196b7;font-size:12px}.head-search,.head-more{position:absolute;top:22px;width:40px;height:40px;border:1px solid #1b2d45;border-radius:10px;background:#0a1525;color:#c4d6ef}.head-search{right:61px}.head-more{right:16px;font-size:18px;letter-spacing:2px}.head-search svg{width:22px;height:22px;fill:none;stroke:#c4d6ef;stroke-width:2}.chat-body{position:absolute;left:0;top:85px;width:100%;height:642px;background:#0a1321;overflow:hidden}.chat-art{position:absolute;right:0;top:0;width:297px;height:642px;object-fit:cover;opacity:.98}.message{position:absolute;min-height:59px;border-radius:14px;padding:13px 15px 27px 15px;font-size:15px;line-height:1.48;box-shadow:0 10px 20px rgba(0,0,0,.08)}.message.left{left:16px;background:#263650;color:#fff;border-top-left-radius:10px}.message.right{right:16px;background:linear-gradient(135deg,#2f67ff,#1f4fe8);color:#fff;border-top-right-radius:10px}.message time{position:absolute;right:13px;bottom:8px;color:#aebeda;font-size:11px}.message.right time{color:#cae0ff}.m1{top:37px;width:349px}.m2{top:107px;width:217px}.m3{top:183px;width:343px}.m4{top:290px;width:343px}.m5{top:397px;width:260px}.m6{top:463px;width:174px}.m7{top:524px;width:379px}
.composer{position:absolute;left:0;bottom:60px;width:100%;height:80px;border-top:1px solid #1b2f48;display:flex;align-items:center;padding:0 14px;gap:10px}.clip,.smile{width:44px;height:44px;border:1px solid #314766;background:#16243a;border-radius:8px;color:#c3d3ed}.clip svg{width:24px;height:24px;fill:none;stroke:#c3d3ed;stroke-width:2}.input-placeholder{height:44px;flex:1;border:1px solid #314766;border-radius:8px;background:#16243a;color:#7187a8;display:flex;align-items:center;padding-left:14px;font-size:14px}.smile{font-size:23px;background:#17253b}.send{height:44px;width:84px;border:0;border-radius:8px;background:linear-gradient(180deg,#087ef8,#1267ef);color:#fff;font-size:14px;font-weight:600}.info-note{position:absolute;left:14px;right:14px;bottom:0;height:60px;border-top:1px solid #20344d;display:flex;align-items:center;color:#d2dded;font-size:12px;line-height:1.3}.info-note span{font-size:20px;margin-right:12px;color:#c7daf5}
.rightcol{position:absolute;left:1017px;top:14px;width:286px;height:868px}.profile{position:absolute;left:0;top:0;width:275px;height:552px}.profile-head{position:absolute;left:0;top:0;width:100%;height:117px}.profile-avatar{position:absolute;left:14px;top:18px;width:78px;height:78px;object-fit:cover}.profile-name{position:absolute;left:107px;top:34px;font-size:18px;font-weight:750}.profile-online{position:absolute;left:107px;top:62px;color:#65e693;font-size:14px}.divider{position:absolute;left:14px;right:14px;height:1px;background:#20324a}.d1{top:116px}.d2{top:328px}.info-title{position:absolute;left:15px;top:139px;font-size:16px;font-weight:750}.info-row{position:absolute;left:15px;right:16px;height:28px;display:grid;grid-template-columns:28px 1fr auto;align-items:center;color:#aebed8;font-size:13px}.info-row span{font-size:19px;color:#b7c9e6}.info-row strong{color:#f5f7fb;font-weight:500}.r1{top:174px}.r2{top:211px}.r3{top:248px}.r4{top:285px}.note-title{position:absolute;left:15px;top:350px;font-size:16px;font-weight:750}.note-box{position:absolute;left:15px;right:15px;top:383px;height:103px;border:1px solid #38506f;border-radius:7px;background:#14233a;color:#8399bb;font-size:12px;padding:13px}.save{position:absolute;right:15px;top:497px;width:88px;height:37px;border:0;border-radius:7px;background:linear-gradient(180deg,#0788ff,#086be7);color:#fff;font-size:13px;font-weight:600}.promo-right{position:absolute;left:0;top:565px;width:276px;height:304px;object-fit:cover;border-radius:12px}
.footer{position:absolute;left:0;bottom:0;width:1536px;height:61px;background:linear-gradient(180deg,#0d1727,#101c2f);border-top:1px solid #1a2d47;color:#8ea2c3;font-size:12px;display:flex;align-items:center;justify-content:space-between;padding:0 29px}.footer>div{display:flex;align-items:center;gap:18px}.footer i{width:1px;height:18px;background:#2a3c55}
@page{size:16in 10.6666667in;margin:0}
@media print{html,body{width:1536px;height:1024px}#viewport{width:1536px!important;height:1024px!important}#stage{transform:none!important}}
/* visual QA corrections */
.nav-item{margin-left:8px;margin-right:8px}
.navicon-img{width:28px;height:29px;object-fit:cover;margin-left:14px;flex:0 0 28px}
.nav-item>span:nth-child(2){margin-left:18px}
.side-line{top:317px}
.account-title{top:343px}
.nav-item.account{left:0;right:0;margin-left:8px;margin-right:8px}
.nav-item.profile-item{top:362px}
.nav-item.settings-item{top:418px}
.bell img{position:absolute;inset:0;width:34px;height:38px;object-fit:cover}.bell em{right:-2px;top:-5px}
.head-search img,.head-more img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:10px}.head-search,.head-more{padding:0;overflow:hidden;border:0;background:transparent}.head-search svg{display:none}
.clip,.smile{padding:0;overflow:hidden;border:0;background:transparent}.clip img,.smile img{width:100%;height:100%;object-fit:cover}
.info-row img{width:23px;height:29px;object-fit:cover}
.conv{margin-left:17px;margin-right:13px}
.conv.active{margin-left:0;margin-right:0;padding-left:16px;padding-right:15px}
.conv.active .conv-meta{right:15px}
.message{font-size:14px;line-height:1.42;padding-top:13px}
.m1{height:61px}.m2{height:59px}.m3{height:97px}.m4{height:97px}.m5{height:56px}.m6{height:58px}.m7{height:89px}
.sidebar-art{z-index:0}.sidebar nav,.sidebar .nav-item,.sidebar .side-line,.sidebar .account-title{z-index:2}.nav-item>span:nth-child(2){margin-left:22px}
.tabs{gap:10px}.tabs button{padding:0;display:flex;align-items:center;justify-content:center;gap:8px}.tabs button:nth-child(1){width:101px}.tabs button:nth-child(2){width:136px}.tabs button:nth-child(3){width:64px}.tabs button b{margin-left:0;flex:0 0 21px}
/* final pixel alignment pass */
.nav-item>span:nth-child(2){margin-left:23px}
.nav-item.profile-item{top:358px}
.nav-item.settings-item{top:411px}
.list-title{left:18px;top:21px;letter-spacing:-1.2px}
.list-sub{left:18px;top:54px;font-size:13.5px;letter-spacing:-.12px}
.search span:last-child{position:relative;top:-2px;font-size:13.5px;letter-spacing:-.08px}
.conv-copy{margin-left:15px}
.profile-name{left:109px;top:36px}
.profile-online{left:109px;top:64px}
.slashes{display:none}.slash-art{position:absolute;left:970px;top:0;width:145px;height:66px;object-fit:cover}
.nav-item.ext small{width:21px;height:24px;display:block}.nav-item.ext small img{width:21px;height:24px;object-fit:cover}
.info-note{left:14px}.info-note-icon{width:26px;height:28px;object-fit:cover;margin-right:10px;flex:0 0 26px}
/* sampled surface colors from reference */
.workspace{background:#040c15}
.sidebar{background:#0b1523}
.chatlist{background:#0f1927}
.chatpanel{background:#0c1321}
.profile{background:#0f1a29}
.chatpanel{background:linear-gradient(180deg,#0c1727 0%,#0c1625 100%)}
/* REAL-DATA PREVIEW OVERRIDES */
.hidden{display:none!important}
button{font:inherit}.topbar button,.sidebar button{appearance:none;-webkit-appearance:none}
.nav-item{width:calc(100% - 16px);border:0;background:transparent;text-align:left;cursor:pointer}.nav-item:disabled{cursor:default;opacity:.7}
.bell{border:0;background:transparent;cursor:pointer;padding:0}.bell.hidden-badge em{display:none}
.real-avatar{display:grid;place-items:center;border-radius:50%;background:linear-gradient(135deg,#263b60,#5175c5);color:#eef4ff;font-weight:800;border:2px solid rgba(165,195,255,.28);object-fit:unset}.admin-avatar{font-size:15px}.head-avatar{font-size:17px}.profile-avatar{font-size:23px}
.search{padding:0 10px}.search img{width:18px;height:18px;object-fit:contain;margin-right:9px;opacity:.9}.search input{width:100%;height:100%;border:0;outline:0;background:transparent;color:#eef3ff;font-size:13.5px}.search input::placeholder{color:#9eb2d2}
#conversationList{overflow-y:auto;overflow-x:hidden;padding-bottom:8px}.loading-row,.empty-list{padding:24px;color:#91a7c8;font-size:13px;text-align:center}.conv{cursor:pointer}.conv-avatar{width:54px;height:54px;flex:0 0 54px;margin-left:0;font-size:15px}.conv.active .conv-avatar{margin-left:1px}.conv-media-mark{display:inline-block;margin-right:4px;color:#9fb5d5}.tabs button:disabled{opacity:.55;cursor:not-allowed}
.empty-state{position:absolute;inset:0;display:grid;place-items:center;color:#8fa6c8;font-size:14px}.chatpanel>#chatContent{position:absolute;inset:0}.head-online.unavailable,.profile-online.unavailable{color:#8fa3c2}.head-online.unavailable span,.profile-online.unavailable span{background:#667d9f;box-shadow:none}
.chat-body{overflow-y:auto;overflow-x:hidden;padding:24px 16px 18px;background:#0a1321}.chat-art{position:absolute;right:0;top:0;pointer-events:none}.message-list{position:relative;z-index:2;min-height:100%;display:flex;flex-direction:column;gap:10px;padding-bottom:8px}.message{position:relative!important;left:auto!important;right:auto!important;top:auto!important;width:auto!important;height:auto!important;min-height:54px;max-width:76%;padding:12px 14px 26px;font-size:14px;line-height:1.42}.message.left{align-self:flex-start}.message.right{align-self:flex-end}.message time{bottom:7px}.message img.chat-media-image{display:block;max-width:300px;max-height:280px;border-radius:9px;margin-bottom:6px}.message audio{display:block;width:260px;max-width:100%;margin-bottom:4px}.message .sender-caption{font-size:11px;color:#9fb2cf;margin-bottom:5px;font-weight:700}.message.right .sender-caption{color:#d4e3ff}.message.system{align-self:center;background:#142238;color:#9db0cc;min-height:auto;padding:8px 12px;border-radius:999px;max-width:80%;font-size:12px}.message.system time{display:none}
.message-input{height:44px;flex:1;min-width:0;border:1px solid #314766;border-radius:8px;background:#16243a;color:#eef3ff;padding:0 14px;font-size:14px;outline:none}.message-input::placeholder{color:#7187a8}.message-input:focus{border-color:#4d78b5}.composer{z-index:5;background:#0c1625}.send:disabled,.clip:disabled{opacity:.55;cursor:not-allowed}.info-note{z-index:5;background:#0c1625}.info-note #sendState{margin-left:auto;color:#8fb0dd;font-size:11px;white-space:nowrap}.info-note #sendState.error{color:#ff7b8f}
.info-row strong{max-width:135px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.disabled-control{opacity:.55;cursor:not-allowed}
.auth-overlay{position:absolute;left:233px;top:66px;right:0;bottom:61px;z-index:100;background:rgba(3,8,15,.86);display:grid;place-items:center}.auth-card{width:420px;padding:28px;border:1px solid #2f4666;border-radius:16px;background:#0e1a2a;text-align:center;box-shadow:0 28px 80px rgba(0,0,0,.45)}.auth-card h2{margin:0 0 10px}.auth-card p{color:#9fb1cc;line-height:1.5}.auth-card a{display:inline-block;margin-top:12px;padding:11px 16px;border-radius:9px;background:#126df3;color:#fff;text-decoration:none;font-weight:700}
.connection-error .server b{background:#ff5b6e}.connection-error .server span{color:#ff9cab}
::-webkit-scrollbar{width:9px;height:9px}::-webkit-scrollbar-thumb{background:#233b5d;border-radius:999px}::-webkit-scrollbar-track{background:transparent}
/* FUNCTIONAL CONTROLS */
.admin-menu-hit{position:absolute;right:17px;top:4px;width:205px;height:57px;border:0;background:transparent;cursor:pointer;z-index:12}
.admin-menu{position:absolute;right:18px;top:59px;width:195px;padding:7px;background:#0d1a2b;border:1px solid #29405f;border-radius:10px;box-shadow:0 16px 36px rgba(0,0,0,.45);z-index:40}
.admin-menu button,.chat-more-menu button{display:block;width:100%;border:0;background:transparent;color:#dce8fa;text-align:left;padding:10px 12px;border-radius:7px;cursor:pointer}.admin-menu button:hover,.chat-more-menu button:hover{background:#172b45}
.editable-name{appearance:none;border:0;background:transparent;color:inherit;padding:0;margin:0;text-align:left;cursor:pointer}.editable-name:hover{text-decoration:underline;text-decoration-style:dotted;text-underline-offset:4px}.head-name{line-height:20px}.profile-name{line-height:22px}
.chat-search-bar{position:absolute;right:15px;top:76px;width:340px;height:43px;z-index:30;background:#0d1b2e;border:1px solid #2f4667;border-radius:9px;display:flex;align-items:center;gap:5px;padding:5px}.chat-search-bar input{flex:1;min-width:0;height:31px;border:0;outline:0;background:#15253c;color:#eef4ff;border-radius:6px;padding:0 9px}.chat-search-bar span{font-size:11px;color:#9cb0ce;min-width:30px;text-align:center}.chat-search-bar button{width:29px;height:29px;border:0;border-radius:6px;background:#15253c;color:#d7e4f8;cursor:pointer}
.chat-more-menu{position:absolute;right:15px;top:70px;width:190px;padding:7px;background:#0d1a2b;border:1px solid #29405f;border-radius:10px;box-shadow:0 16px 36px rgba(0,0,0,.45);z-index:31}
.message.search-hit{outline:2px solid #ffd34f;box-shadow:0 0 0 4px rgba(255,211,79,.15)}
.note-box{resize:none;outline:0;font-family:inherit}.note-box:focus{border-color:#4b78b7}.save{cursor:pointer}.save:disabled{opacity:.55;cursor:not-allowed}
.ui-modal{position:absolute;inset:0;z-index:120;background:rgba(2,7,13,.74);display:grid;place-items:center}.ui-modal-card{width:390px;padding:22px;border:1px solid #304967;border-radius:14px;background:#0e1a2b;box-shadow:0 24px 70px rgba(0,0,0,.5)}.ui-modal-card h3{margin:0 0 8px;font-size:20px}.ui-modal-card p{margin:0 0 16px;color:#9fb0c9;font-size:13px;line-height:1.5}.ui-modal-card>input{width:100%;height:42px;border:1px solid #385274;border-radius:8px;background:#14243a;color:#f3f7ff;padding:0 11px;outline:0}.ui-modal-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:17px}.ui-modal-actions button,.primary-action{min-height:36px;border:1px solid #355477;border-radius:8px;background:#13253d;color:#e9f1ff;padding:0 14px;cursor:pointer}.ui-modal-actions .primary-action,.primary-action{background:linear-gradient(180deg,#0a83ff,#1167e8);border:0;color:#fff;font-weight:700}.modal-info-row{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid #22364f;color:#9eb1ce}.modal-info-row strong{color:#f0f5ff}.setting-row{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:12px 0;border-bottom:1px solid #22364f;color:#c4d1e5}.setting-row input[type=checkbox]{width:20px;height:20px}
.online-state{color:#65e693!important}.online-state span{background:#48df80!important}.offline-state{color:#8fa3c2!important}.offline-state span{background:#667d9f!important;box-shadow:none!important}
.emoji-menu{position:absolute;right:98px;bottom:72px;z-index:40;display:grid;grid-template-columns:repeat(3,40px);gap:5px;padding:8px;background:#0d1a2b;border:1px solid #29405f;border-radius:10px;box-shadow:0 14px 34px rgba(0,0,0,.4)}.emoji-menu button{width:40px;height:36px;border:0;border-radius:7px;background:#15263e;font-size:20px;cursor:pointer}.emoji-menu button:hover{background:#203755}
.head-name{max-width:360px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.profile-name{max-width:145px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* AUTH ROLE ROUTING FIX */
.auth-card{text-align:left}.auth-card h2,.auth-card>p{text-align:center}.auth-choice{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:18px 0 14px}.auth-choice button{height:40px;border:1px solid #355477;border-radius:8px;background:#13253d;color:#dce8fa;font-weight:700;cursor:pointer}.auth-choice button.active{border-color:#2d7fff;background:linear-gradient(180deg,#0a83ff,#1167e8);color:#fff}.auth-form{display:grid;gap:11px}.auth-form label{display:grid;gap:6px;color:#c5d2e5;font-size:13px}.auth-form input{height:41px;border:1px solid #385274;border-radius:8px;background:#14243a;color:#f3f7ff;padding:0 11px;outline:0}.auth-form input:focus{border-color:#4d7fc4}.auth-submit{height:41px;border:0;border-radius:8px;background:linear-gradient(180deg,#0a83ff,#1167e8);color:#fff;font-weight:700;cursor:pointer;margin-top:2px}.auth-error{min-height:18px;margin-top:10px;color:#ff7b8f;font-size:12px;text-align:center}.auth-public-link{display:block!important;width:max-content;margin:10px auto 0!important;background:transparent!important;padding:0!important;color:#9fc1ef!important;font-size:13px;font-weight:500!important;text-decoration:underline!important}.auth-overlay.hidden{display:none!important}
@media(max-width:768px){
  #viewport{margin:0;width:100%;height:100dvh}#stage{position:relative;width:100%;height:100%;display:flex;flex-direction:column;transform:none}
  .topbar{position:relative;width:100%;height:60px;flex:0 0 60px}.brand{left:10px;top:14px;width:145px;height:33px}.tagline,.slash-art,.server,.admin-copy,.chev{display:none}.admin-avatar{left:auto;right:12px;top:10px;width:38px;height:38px}.bell{left:auto;right:66px;top:14px;width:27px;height:30px}.admin-menu-hit{right:4px;top:4px;width:52px;height:50px}.admin-menu{right:8px;top:55px}
  .sidebar{position:relative;left:auto;top:auto;width:100%;height:50px;flex:0 0 50px;display:flex;overflow-x:auto;overflow-y:hidden;border-right:0;border-bottom:1px solid #21334d}.sidebar nav{display:contents}.sidebar .nav-item,.sidebar .nav-item.account{position:relative;inset:auto;flex:0 0 auto;width:auto;height:42px;margin:4px;padding:0 10px;font-size:12px;white-space:nowrap}.sidebar .navicon-img{position:static;width:22px;height:22px}.sidebar .nav-item>span:nth-child(2){margin-left:7px}.sidebar .nav-item.ext small{position:static;margin-left:6px}.sidebar .red-badge{position:static;margin-left:6px;width:19px;height:19px}.side-line,.sidebar-art{display:none}
  .workspace{position:relative;left:auto;top:auto;width:100%;height:auto;flex:1;min-height:0;display:flex;flex-direction:column;padding:6px;gap:6px}.rightcol,.footer{display:none}.chatlist{position:relative;inset:auto;width:100%;height:174px;flex:0 0 174px}.public-page .chatlist{display:none}.list-title{top:8px;left:10px;font-size:18px}.list-sub{display:none}.search{top:6px;left:auto;right:8px;width:55%;height:30px}.tabs{top:42px;left:8px;gap:6px}.tabs button{height:28px;padding:0 8px;font-size:12px}#conversationList{top:76px}.conv{height:64px}.conv.active{height:64px}.conv-avatar{width:40px;height:40px;flex-basis:40px}.conv-copy strong{font-size:13px}.conv-copy span{font-size:12px}
  .chatpanel{position:relative;inset:auto;width:100%;height:auto;flex:1;min-height:180px;border-radius:9px}.chat-head{height:66px}.head-avatar{left:10px;top:10px;width:40px;height:40px}.head-name{left:60px;top:10px;max-width:calc(100% - 165px);font-size:15px}.head-online{left:60px;top:30px;font-size:11px}.head-last{left:60px;top:46px;font-size:10px}.head-search,.head-more{top:12px;width:34px;height:34px}.head-search{right:48px}.head-more{right:8px}.chat-body{top:66px;bottom:105px;height:auto;padding:12px 10px}.message{max-width:88%;font-size:14px}.message img.chat-media-image{max-width:100%;height:auto}.message audio{max-width:100%}.composer{bottom:39px;height:66px;padding:0 8px;gap:6px}.clip,.smile{width:36px;height:40px;flex:0 0 36px}.send{width:57px;flex:0 0 57px}.message-input{padding:0 8px;font-size:16px}.info-note{height:39px;left:8px;right:8px;font-size:9px}.info-note-icon{width:19px;height:20px;flex-basis:19px;margin-right:5px}.info-note #sendState{white-space:normal;font-size:10px}.chat-search-bar{top:61px;right:6px;width:calc(100% - 12px)}.chat-more-menu{top:52px}.emoji-menu{right:64px;bottom:98px}
  .auth-overlay{inset:0;padding:14px}.auth-card,.ui-modal-card{width:min(100%,420px);max-height:95%;overflow:auto}.ui-modal{padding:12px}.ui-modal input,.ui-modal textarea,.auth-form input{font-size:16px}
}
.owner-card{width:min(800px,95%);max-height:94%;overflow:auto}.owner-heading{display:flex;justify-content:space-between;align-items:center;gap:12px}.owner-card section{border-top:1px solid #29405f;padding:12px 0}.owner-card h4{margin:4px 0 12px}.owner-card form{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}.owner-card label{display:grid;gap:5px;font-size:13px;color:#c4d1e5}.owner-card input:not([type=checkbox]),.owner-card textarea,.owner-card select{width:100%;min-width:0;border:1px solid #385274;border-radius:6px;background:#14243a;color:#f3f7ff;padding:8px;font:inherit}.owner-card button{border:1px solid #355477;border-radius:6px;background:#13253d;color:#e9f1ff;padding:8px 10px;cursor:pointer}.owner-card .owner-check{display:flex;align-items:center}.owner-row{display:flex;align-items:center;gap:8px;padding:8px 0;border-top:1px solid #20344d}.owner-row span{flex:1;min-width:0;overflow-wrap:anywhere}.owner-row select{width:100px}.owner-card .error{color:#ff7b8f}.owner-card button:disabled{opacity:.5;cursor:wait}@media(max-width:768px){.owner-card{max-height:100%;width:100%;padding:15px}.owner-card form{grid-template-columns:1fr}.owner-row{flex-wrap:wrap}.owner-row span{flex-basis:100%}}
@media(max-width:768px){.compact-height .chatlist{display:none}.chatpanel{min-height:0}.message{overflow-wrap:anywhere}}
/* Shared image preview for staff and customers, including the embedded widget. */
.chat-image-preview{display:block;max-width:100%;padding:0;border:0;background:transparent;cursor:zoom-in;border-radius:10px;overflow:hidden;text-align:left}
.chat-image-preview:focus-visible{outline:2px solid #c9dcff;outline-offset:3px}
.chat-image-download{display:inline-flex;align-items:center;justify-content:center;gap:6px;margin-top:8px;padding:8px 12px;border:1px solid #7da4e0;border-radius:7px;background:#14243a;color:#fff!important;text-decoration:none;font:600 12px system-ui;cursor:pointer}
.chat-image-download:hover{background:#24406a}
.chat-image-viewer{width:min(960px,94vw);max-width:94vw;max-height:92dvh;padding:12px;border:1px solid #405779;border-radius:14px;background:#091423;color:#f1f5ff;box-shadow:0 24px 80px #0009}
.chat-image-viewer::backdrop{background:#020712d9}
.chat-image-toolbar{display:flex;align-items:center;gap:12px;margin-bottom:12px}.chat-image-toolbar strong{flex:1;font:600 14px system-ui}.chat-image-toolbar a{margin-top:0}.chat-image-toolbar button{border:0;background:#21324c;color:white;border-radius:6px;min-width:36px;min-height:36px;cursor:pointer;font-size:18px}
.chat-image-viewer>img{display:block;width:auto;max-width:100%;height:auto;max-height:calc(92dvh - 90px);object-fit:contain;margin:auto;background:#fff;border-radius:5px}
@media(max-width:520px){.chat-image-viewer{padding:10px}.chat-image-toolbar{gap:7px}.chat-image-toolbar strong{font-size:12px}.chat-image-toolbar a{padding:8px;font-size:11px}}
.guest-login-button{width:100%;margin:10px 0 0;background:linear-gradient(120deg,#165dce,#357fff)!important;color:#fff!important;border:1px solid #608fd6!important}.guest-login-help{text-align:center;font-size:12px;color:#aebfda;margin:8px 0 14px}.guest-recovery{margin:0 0 16px;font-size:12px;color:#c7d7f2}.guest-recovery summary{cursor:pointer}.guest-recovery label{display:block;margin:10px 0}.guest-recovery input{display:block;box-sizing:border-box;width:100%;padding:9px;border:1px solid #405779;border-radius:7px;background:#0a1626;color:#fff}.guest-recovery button,.guest-recovery-notice button{padding:8px 10px;border:1px solid #608fd6;border-radius:6px;background:#17345b;color:#fff;cursor:pointer}.guest-recovery-notice{position:fixed;z-index:10001;bottom:18px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:10px;width:min(560px,calc(100vw - 36px));box-sizing:border-box;padding:14px;background:#0e213a;color:#e4edff;border:1px solid #456b9a;border-radius:10px;box-shadow:0 12px 40px #0008;font:12px/1.5 system-ui}.guest-recovery-notice span{flex:1}.guest-recovery-notice button{flex:none}@media(max-width:520px){.guest-recovery-notice{flex-wrap:wrap}.guest-recovery-notice span{flex-basis:100%}}