.chat-hero{height:145px;margin-bottom:14px;padding:25px 32px;border-radius:17px;background:#fff url('mockup/home-hero-v2.png') center/cover no-repeat;position:relative;overflow:hidden}.chat-hero:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#fff 0 45%,transparent 70%)}.chat-hero>div{position:relative;z-index:1}.chat-hero span{font-size:11px;font-weight:900;letter-spacing:.17em}.chat-hero h1{font:900 42px/1 Nunito,sans-serif;margin:8px 0}.chat-hero h1 b{color:#ff4b16}.chat-hero p{margin:0;color:#47668d}.citizen-chat-page{padding:20px 0 35px;background:#fff9f3;min-height:calc(100vh - 82px)}.citizen-chat-layout,.admin-chat-layout{display:grid;grid-template-columns:330px minmax(0,1fr);gap:12px}.chat-admin-list,.chat-window,.admin-chat-list,.admin-chat-window{background:#fff;border:1px solid #e2e8ed;border-radius:15px;box-shadow:0 8px 24px #18364e0b;overflow:hidden}.chat-admin-list>header,.admin-chat-list>header{height:60px;padding:0 16px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e7ecef}.chat-admin-list h2,.admin-chat-list h2{font:900 18px Nunito,sans-serif;margin:0}.chat-admin-list header span,.admin-chat-list header span{padding:5px 12px;border-radius:999px;background:#dcf7e7;color:#078347;font-size:11px;font-weight:800}.chat-admin-row,.admin-chat-person{min-height:67px;padding:9px 14px;display:flex;align-items:center;gap:12px;border-bottom:1px solid #edf1f3}.chat-admin-row:hover,.chat-admin-row.active,.admin-chat-person:hover,.admin-chat-person.active{background:#eafaf1}.chat-avatar{position:relative;width:44px;height:44px;flex:0 0 44px;display:grid;place-items:center;border-radius:50%;background:#e1f2ff;color:#1676c9;font-weight:900}.chat-avatar i{position:absolute;right:0;bottom:1px;width:11px;height:11px;border-radius:50%;border:2px solid #fff}.chat-avatar .online{background:#14b85b}.chat-avatar .offline{background:#a9b4be}.chat-admin-row strong,.chat-admin-row small,.admin-chat-person strong,.admin-chat-person small{display:block}.chat-admin-row small,.admin-chat-person small{margin-top:3px;color:#6d8298;font-size:11px}.admin-chat-person>span:nth-child(2){min-width:0;flex:1}.admin-chat-person small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.admin-chat-person>b{width:21px;height:21px;display:grid;place-items:center;border-radius:50%;background:#f42f3e;color:#fff;font-size:11px}.chat-window,.admin-chat-window{height:590px;display:flex;flex-direction:column}.chat-window>header,.admin-chat-window>header{height:67px;flex:0 0 67px;padding:0 18px;display:flex;align-items:center;gap:12px;border-bottom:1px solid #e6ecef}.chat-window>header strong,.chat-window>header small,.admin-chat-window>header strong,.admin-chat-window>header small{display:block}.chat-window>header small,.admin-chat-window>header small{color:#6a8298;font-size:11px}.chat-messages{flex:1;min-height:0;padding:18px;overflow-y:auto;background:linear-gradient(135deg,#f9fbfd,#fffaf6)}.chat-bubble{width:fit-content;max-width:min(75%,560px);margin:0 0 11px;padding:11px 14px;border-radius:15px 15px 15px 3px;background:#edf1f5;color:#173551}.chat-bubble.mine{margin-left:auto;border-radius:15px 15px 3px 15px;background:#d9f7dd}.chat-bubble p{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;font-size:13px;line-height:1.45}.chat-bubble time{display:block;margin-top:4px;text-align:right;color:#6b8195;font-size:10px}.chat-compose{min-height:65px;display:flex;align-items:end;gap:9px;padding:10px 12px;border-top:1px solid #e3e9ed}.chat-compose textarea{flex:1;min-height:42px;max-height:105px;resize:vertical;border:1px solid #d9e2e8;border-radius:22px;padding:11px 16px;font:inherit;outline:0}.chat-compose textarea:focus{border-color:#159873}.chat-compose button{width:43px;height:43px;border:0;border-radius:50%;background:#079c6a;color:#fff;font-size:19px;cursor:pointer}.chat-empty,.chat-empty-state{padding:25px;color:#6f8295;text-align:center}.chat-empty-state{margin:auto}.chat-empty-state b,.chat-empty-state strong{display:block}.chat-empty-state b{font-size:40px}.admin-chat-layout{grid-template-columns:310px minmax(0,1fr)}.admin-chat-window,.admin-chat-list{height:650px}.admin-chat-list{overflow-y:auto}
@media(max-width:850px){.citizen-chat-layout,.admin-chat-layout{grid-template-columns:1fr}.chat-admin-list,.admin-chat-list{max-height:270px;overflow-y:auto}.chat-window,.admin-chat-window{height:62vh;min-height:480px}.chat-hero{height:135px}.chat-hero h1{font-size:34px}}
@media(max-width:520px){.citizen-chat-page{padding-top:10px}.chat-hero{height:125px;padding:20px}.chat-hero h1{font-size:29px}.chat-hero p{font-size:12px;max-width:70%}.chat-bubble{max-width:88%}.citizen-chat-page .wrap{width:calc(100% - 18px)}}
.live-chat-float{position:fixed;z-index:90;right:22px;bottom:22px;min-height:46px;padding:0 18px;display:flex;align-items:center;gap:8px;border-radius:999px;background:#079c6a;color:#fff!important;box-shadow:0 10px 25px #087b5845;font-weight:800;font-size:13px}.live-chat-float:hover{transform:translateY(-3px);background:#087e5a}.citizen-chat-page~.portal-footer+.live-chat-float{display:none}@media(max-width:520px){.live-chat-float{right:12px;bottom:12px;padding:0 14px;font-size:12px}}

/* Compact floating citizen chat widget */
button.live-chat-float{z-index:110;right:18px;bottom:18px;width:228px;min-height:62px;padding:8px 14px;border:0;border-radius:18px;background:#087a61;color:#fff;cursor:pointer;text-align:left}.live-chat-float>span:first-child{width:42px;height:42px;display:grid;place-items:center;flex:0 0 42px;border-radius:50%;background:#d9f3e9;color:#087a61;font-size:20px}.live-chat-float>span:last-child{min-width:0}.live-chat-float strong,.live-chat-float small{display:block}.live-chat-float strong{font-size:13px}.live-chat-float small{margin-top:3px;font-size:10px;font-weight:500}.live-chat-float small i,.live-chat-widget header small b{display:inline-block;width:7px;height:7px;border-radius:50%;background:#36df92}.live-chat-widget{position:fixed;z-index:109;right:18px;bottom:90px;width:390px;height:520px;border:1px solid #dce8e3;border-radius:17px;background:#f6fbf9;box-shadow:0 22px 55px #173e332d;overflow:hidden}.live-chat-widget[hidden]{display:none}.live-chat-widget>header{height:82px;padding:0 16px;display:flex;align-items:center;gap:12px;background:#087a61;color:#fff}.live-chat-widget-avatar{position:relative;width:45px;height:45px;display:grid;place-items:center;flex:0 0 45px;border-radius:50%;background:#dbf3eb;color:#087a61;font-weight:900}.live-chat-widget-avatar i{position:absolute;right:0;bottom:1px;width:10px;height:10px;border:2px solid #087a61;border-radius:50%;background:#32dc8e}.live-chat-widget header>div{flex:1;min-width:0}.live-chat-widget header strong,.live-chat-widget header small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.live-chat-widget header strong{font-size:15px}.live-chat-widget header small{margin-top:3px;font-size:10px}.live-chat-widget header>button{width:34px;height:34px;border:0;background:transparent;color:#fff;font-size:28px;cursor:pointer}.live-chat-widget-messages{height:374px;padding:15px 12px;overflow-y:auto;background:linear-gradient(145deg,#fbfdfc,#f2f9f6)}.widget-chat-empty{margin:120px auto 0;max-width:270px;text-align:center;color:#70878a;font-size:12px;line-height:1.45}.widget-chat-bubble{width:fit-content;max-width:82%;margin:0 0 10px;padding:9px 11px;border-radius:13px 13px 13px 3px;background:#fff;color:#173c3b;box-shadow:0 2px 8px #173e3310}.widget-chat-bubble.mine{margin-left:auto;border-radius:13px 13px 3px 13px;background:#d9f6de}.widget-chat-bubble p{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;font-size:12px;line-height:1.4}.widget-chat-bubble time{display:block;margin-top:3px;text-align:right;color:#718789;font-size:9px}.live-chat-widget>form{height:64px;padding:9px 11px;display:flex;align-items:end;gap:8px;border-top:1px solid #dce7e2;background:#fff}.live-chat-widget textarea{box-sizing:border-box;flex:1;height:43px;min-height:43px;max-height:80px;padding:11px 13px;border:1px solid #ccddd6;border-radius:11px;resize:none;font:inherit;font-size:12px;outline:0}.live-chat-widget textarea:focus{border-color:#159a76}.live-chat-widget form button{width:43px;height:43px;border:0;border-radius:10px;background:#078467;color:#fff;font-size:19px;cursor:pointer}
@media(max-width:520px){button.live-chat-float{right:10px;bottom:10px;width:205px;min-height:56px}.live-chat-widget{right:8px;bottom:75px;width:calc(100vw - 16px);height:min(520px,calc(100vh - 90px))}.live-chat-widget-messages{height:calc(100% - 146px)}}

/* Floating chat launcher matching the citizen portal visual language */
button.live-chat-float{right:24px;bottom:22px;width:390px;min-height:118px;padding:12px 76px 12px 18px;gap:19px;border:2px solid #ffd7c2;border-radius:999px;background:linear-gradient(110deg,#fff,#fffaf7);color:#092858!important;box-shadow:0 15px 36px #63331818;text-align:left;transition:transform .2s,box-shadow .2s}button.live-chat-float:hover{transform:translateY(-4px);background:linear-gradient(110deg,#fff,#fff7f1);box-shadow:0 20px 42px #63331824}.live-chat-float .live-chat-logo{width:91px!important;height:91px!important;flex:0 0 91px!important;border:6px solid #fff!important;background:#ff5a1d url('mockup/chat-admin-avatar.png') center 16%/98% auto no-repeat!important;box-shadow:0 0 0 2px #ffe0d0,0 8px 17px #ff57282b}.live-chat-float .live-chat-logo svg{display:none}.live-chat-float>span:nth-child(2){flex:1}.live-chat-float strong{color:#092858;font:900 20px/1.15 Nunito,Arial,sans-serif;white-space:nowrap}.live-chat-float small{display:flex;align-items:center;gap:8px;margin-top:9px!important;color:#6580a2;font-size:14px!important;font-weight:600!important;white-space:nowrap}.live-chat-float small i{width:14px!important;height:14px!important;flex:0 0 14px;box-shadow:0 0 0 5px #27cd7c12}.live-chat-float:after{content:'›';position:absolute;right:18px;top:50%;width:51px;height:51px;display:grid;place-items:center;transform:translateY(-50%);border-radius:50%;background:#fff0e8;color:#ff4d16;font:400 43px/1 Arial}.live-chat-float[aria-expanded="true"]:after{content:'×';font-size:28px}.live-chat-widget{bottom:153px}
@media(max-width:650px){button.live-chat-float{right:10px;bottom:10px;width:290px;min-height:82px;padding:9px 56px 9px 12px;gap:12px}.live-chat-float .live-chat-logo{width:61px!important;height:61px!important;flex-basis:61px!important;border-width:4px!important}.live-chat-float strong{font-size:15px}.live-chat-float small{margin-top:5px!important;font-size:11px!important}.live-chat-float small i{width:9px!important;height:9px!important;flex-basis:9px}.live-chat-float:after{right:12px;width:38px;height:38px;font-size:32px}.live-chat-widget{bottom:101px}}
button.live-chat-float{width:340px;min-height:88px;padding:10px 18px;gap:14px;overflow:visible}.live-chat-float .live-chat-logo{width:67px!important;height:67px!important;flex:0 0 67px!important;border-width:4px!important}.live-chat-float>span:nth-child(2){min-width:0;overflow:visible}.live-chat-float strong{font-size:16px;white-space:nowrap;overflow:visible}.live-chat-float small{margin-top:6px!important;font-size:12px!important;white-space:nowrap;overflow:visible}.live-chat-float:after{display:none!important}.live-chat-widget{bottom:120px}
@media(max-width:420px){button.live-chat-float{right:8px;bottom:8px;width:280px;min-height:74px;padding:8px 13px;gap:10px}.live-chat-float .live-chat-logo{width:56px!important;height:56px!important;flex-basis:56px!important}.live-chat-float strong{font-size:14px}.live-chat-float small{font-size:10px!important}.live-chat-widget{bottom:91px}}

/* Warm orange chat widget, matching the citizen portal mockup. */
button.live-chat-float{width:252px;min-height:72px;padding:10px 16px;border:1px solid #f2ded1;border-radius:23px;background:#fff9f5;color:#092d61!important;box-shadow:0 14px 35px #75422225}.live-chat-float:hover{background:#fff4ed}.live-chat-float>span:first-child{width:52px;height:52px;flex-basis:52px;background:linear-gradient(145deg,#ff6d20,#ff3e1c);color:#fff;font-size:0}.live-chat-float>span:first-child:after{content:'•••';width:29px;height:25px;display:grid;place-items:center;border-radius:50%;background:#fff;color:#ff511d;font-size:13px;letter-spacing:1px}.live-chat-float strong{font:900 15px Nunito,sans-serif}.live-chat-float small{color:#637895;font-size:11px}.live-chat-float small i{background:#aab5c2}.live-chat-widget{width:420px;height:570px;bottom:102px;border-color:#f0dfd3;border-radius:23px;background:#fffdfb;box-shadow:0 24px 60px #7542222b}.live-chat-widget>header{box-sizing:border-box;height:112px;padding:18px 18px;align-items:flex-start;background:#fff4eb url('mockup/login-logo.png') 82% bottom/135px auto no-repeat;color:#092d61;border-bottom:1px solid #f2dfd2}.live-chat-widget>header:after{content:'';position:absolute;left:0;right:0;top:92px;height:20px;background:#fffdfb;border-radius:55% 45% 0 0}.live-chat-widget-avatar{width:61px;height:61px;flex-basis:61px;border:5px solid #fff;background:#f5dccd url('mockup/password-security-hero.png') 68% 32%/auto 125% no-repeat;color:transparent;box-shadow:0 0 0 1px #f0dfd3}.live-chat-widget-avatar i{right:-2px;bottom:2px;width:14px;height:14px;border:4px solid #fff;background:#aab5c2}.live-chat-widget header>div{padding-top:7px}.live-chat-widget header strong{font:900 20px Nunito,sans-serif}.live-chat-widget header small{font-size:12px;color:#667a96}.live-chat-widget header small b{background:#aab5c2}.live-chat-widget header>button{margin-left:auto;color:#57636f;font-size:32px}.live-chat-widget-messages{box-sizing:border-box;height:394px;padding:17px 17px;background:#fff}.widget-chat-empty{position:relative;margin:123px auto 0;max-width:310px;color:#667b9d;font-size:13px;line-height:1.55}.widget-chat-empty:before{content:'•••';display:grid;place-items:center;width:70px;height:58px;margin:0 auto 15px;border-radius:50%;background:#ffe2d0;color:#fff;font-size:24px;letter-spacing:4px}.widget-chat-empty:after{content:'Belum ada pesan';display:block;position:absolute;left:0;right:0;top:70px;color:#082d62;font:900 21px Nunito,sans-serif}.widget-chat-empty{padding-top:40px}.widget-chat-bubble{background:#fff3ec;border:1px solid #f7e5da}.widget-chat-bubble.mine{background:#dff5df;border-color:#d5edd5}.live-chat-widget>form{box-sizing:border-box;height:64px;padding:9px 12px;background:#fffaf7;border-top:1px solid #f0dfd5}.live-chat-widget textarea{height:45px;min-height:45px;padding:12px 42px 12px 42px;border-color:#ead8cc;border-radius:18px;background:#fff}.live-chat-widget>form:before{content:'☺';position:absolute;z-index:1;margin:10px 0 0 13px;color:#637796;font-size:23px}.live-chat-widget>form:after{content:'⌕';position:absolute;right:74px;margin-top:11px;color:#637796;font-size:22px;transform:rotate(-35deg)}.live-chat-widget form button{width:47px;height:47px;border-radius:15px;background:linear-gradient(145deg,#ff6920,#ff3d1b);font-size:0}.live-chat-widget form button:after{content:'➤';font-size:21px;color:#fff}
@media(max-width:520px){button.live-chat-float{width:218px;min-height:61px;border-radius:19px}.live-chat-float>span:first-child{width:43px;height:43px;flex-basis:43px}.live-chat-float strong{font-size:13px}.live-chat-widget{right:7px;bottom:78px;width:calc(100vw - 14px);height:min(570px,calc(100vh - 90px))}.live-chat-widget-messages{height:calc(100% - 176px)}}

/* Ikon chat khusus: tajam pada semua resolusi dan selaras dengan warna portal. */
.live-chat-float>.live-chat-logo{position:relative;isolation:isolate;overflow:visible;background:linear-gradient(145deg,#ff7b2c,#ff3f18);box-shadow:0 7px 16px #ff4b1f4d, inset 0 1px 0 #ffffff70}
.live-chat-float>.live-chat-logo:before{content:'';position:absolute;inset:5px;border:1px solid #ffffff4d;border-radius:50%;z-index:-1}
.live-chat-float>.live-chat-logo:after{content:none}
.live-chat-float>.live-chat-logo svg,.live-chat-float>.live-chat-logo svg *{display:none!important}.live-chat-float>.live-chat-logo:before,.live-chat-float>.live-chat-logo:after{content:none!important;display:none!important}
.live-chat-logo svg{display:block;width:34px;height:34px;overflow:visible;filter:drop-shadow(0 2px 2px #b7291640)}
.live-chat-logo .chat-logo-bubble{fill:#fff}
.live-chat-logo circle{fill:#ff511d}
.live-chat-logo .chat-logo-smile{fill:none;stroke:#ff511d;stroke-width:2.7;stroke-linecap:round}
.live-chat-logo .chat-logo-spark{fill:#ffd55c;stroke:#fff;stroke-width:1}
.live-chat-float:hover>.live-chat-logo{transform:rotate(-4deg) scale(1.05)}
.live-chat-widget>header,.live-chat-widget>form{position:relative}