/* Customer full-screen: reuse the mobile layout at every width (generated from styles.css 768px rules). */
body.cust-full #viewport{margin:0;width:100%;height:100dvh}
body.cust-full #stage{position:relative;width:100%;height:100%;display:flex;flex-direction:column;transform:none}
body.cust-full .topbar{position:relative;width:100%;height:60px;flex:0 0 60px}
body.cust-full .brand{left:10px;top:14px;width:145px;height:33px}
body.cust-full .tagline,body.cust-full .slash-art,body.cust-full .server,body.cust-full .admin-copy,body.cust-full .chev{display:none}
body.cust-full .admin-avatar{left:auto;right:12px;top:10px;width:38px;height:38px}
body.cust-full .bell{left:auto;right:66px;top:14px;width:27px;height:30px}
body.cust-full .admin-menu-hit{right:4px;top:4px;width:52px;height:50px}
body.cust-full .admin-menu{right:8px;top:55px}
body.cust-full .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}
body.cust-full .sidebar nav{display:contents}
body.cust-full .sidebar .nav-item,body.cust-full .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}
body.cust-full .sidebar .navicon-img{position:static;width:22px;height:22px}
body.cust-full .sidebar .nav-item>span:nth-child(2){margin-left:7px}
body.cust-full .sidebar .nav-item.ext small{position:static;margin-left:6px}
body.cust-full .sidebar .red-badge{position:static;margin-left:6px;width:19px;height:19px}
body.cust-full .side-line,body.cust-full .sidebar-art{display:none}
body.cust-full .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}
body.cust-full .rightcol,body.cust-full .footer{display:none}
body.cust-full .chatlist{position:relative;inset:auto;width:100%;height:174px;flex:0 0 174px}
body.cust-full .public-page .chatlist{display:none}
body.cust-full .list-title{top:8px;left:10px;font-size:18px}
body.cust-full .list-sub{display:none}
body.cust-full .search{top:6px;left:auto;right:8px;width:55%;height:30px}
body.cust-full .tabs{top:42px;left:8px;gap:6px}
body.cust-full .tabs button{height:28px;padding:0 8px;font-size:12px}
body.cust-full #conversationList{top:76px}
body.cust-full .conv{height:64px}
body.cust-full .conv.active{height:64px}
body.cust-full .conv-avatar{width:40px;height:40px;flex-basis:40px}
body.cust-full .conv-copy strong{font-size:13px}
body.cust-full .conv-copy span{font-size:12px}
body.cust-full .chatpanel{position:relative;inset:auto;width:100%;height:auto;flex:1;min-height:180px;border-radius:9px}
body.cust-full .chat-head{height:66px}
body.cust-full .head-avatar{left:10px;top:10px;width:40px;height:40px}
body.cust-full .head-name{left:60px;top:10px;max-width:calc(100% - 165px);font-size:15px}
body.cust-full .head-online{left:60px;top:30px;font-size:11px}
body.cust-full .head-last{left:60px;top:46px;font-size:10px}
body.cust-full .head-search,body.cust-full .head-more{top:12px;width:34px;height:34px}
body.cust-full .head-search{right:48px}
body.cust-full .head-more{right:8px}
body.cust-full .chat-body{top:66px;bottom:105px;height:auto;padding:12px 10px}
body.cust-full .message{max-width:88%;font-size:14px}
body.cust-full .message img.chat-media-image{max-width:100%;height:auto}
body.cust-full .message audio{max-width:100%}
body.cust-full .composer{bottom:39px;height:66px;padding:0 8px;gap:6px}
body.cust-full .clip,body.cust-full .smile{width:36px;height:40px;flex:0 0 36px}
body.cust-full .send{width:57px;flex:0 0 57px}
body.cust-full .message-input{padding:0 8px;font-size:16px}
body.cust-full .info-note{height:39px;left:8px;right:8px;font-size:9px}
body.cust-full .info-note-icon{width:19px;height:20px;flex-basis:19px;margin-right:5px}
body.cust-full .info-note #sendState{white-space:normal;font-size:10px}
body.cust-full .chat-search-bar{top:61px;right:6px;width:calc(100% - 12px)}
body.cust-full .chat-more-menu{top:52px}
body.cust-full .emoji-menu{right:64px;bottom:98px}
body.cust-full .auth-overlay{inset:0;padding:14px}
body.cust-full .auth-card,body.cust-full .ui-modal-card{width:min(100%,420px);max-height:95%;overflow:auto}
body.cust-full .ui-modal{padding:12px}
body.cust-full .ui-modal input,body.cust-full .ui-modal textarea,body.cust-full .auth-form input{font-size:16px}
body.cust-full .owner-card{max-height:100%;width:100%;padding:15px}
body.cust-full .owner-card form{grid-template-columns:1fr}
body.cust-full .owner-row{flex-wrap:wrap}
body.cust-full .owner-row span{flex-basis:100%}
body.cust-full.compact-height .chatlist{display:none}
body.cust-full .chatpanel{min-height:0}
body.cust-full .message{overflow-wrap:anywhere}
body.cust-full .flow-btn{height:40px;padding:0 12px;font-size:12px}

/* Center the customer chat on wide screens */
body.cust-full{background:#050d18}
body.cust-full #viewport{margin:0 auto;max-width:980px}
body.cust-full .chatlist{display:none}
/* Only Ruang Chat + CHAT ADMIN for customers */
body.cust-full #navRoom,body.cust-full #navWeb,body.cust-full #navApk,body.cust-full #profileBtn,body.cust-full #settingsBtn{display:none!important}
body.cust-full .sidebar{justify-content:center}
body.cust-full .sidebar .nav-item{flex:1 1 0;max-width:260px;justify-content:center}

/* Telegram-style inline keyboard under the last bot message */
.tg-kb{display:grid;gap:7px;margin:6px 0 14px;max-width:min(520px,92%);animation:tgPop .35s cubic-bezier(.2,.8,.2,1) both}
.tg-kb .tg-row{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:7px}
.tg-btn{min-height:42px;padding:9px 10px;border:1px solid #2a4a74;border-radius:11px;background:#0f2038;color:#dbe8ff;font:700 13px system-ui,Arial;cursor:pointer;transition:transform .15s,filter .15s}
.tg-btn:hover:not(:disabled){transform:translateY(-1px);filter:brightness(1.15)}
.tg-btn:disabled{opacity:.45;cursor:wait}
.tg-btn.primary{background:linear-gradient(135deg,#2f7bff,#6a5cff);border-color:#7da8ff;color:#fff}
.tg-btn.secondary{background:linear-gradient(135deg,#0f9b6c,#3ddc97);border-color:#6ff0b8;color:#04140d}
.tg-btn.ghost{background:#0f2038}
.tg-btn.ref{background:linear-gradient(90deg,#b8893a,#e9c77b,#fff1c9,#e9c77b,#b8893a);background-size:200%;border-color:#e9c77b;color:#1a1206;animation:tgShine 3s linear infinite}
.tg-typing{display:inline-flex;gap:4px;padding:12px 14px;margin:4px 0 10px;border-radius:14px;background:#13243c;border:1px solid #20395c}
.tg-typing i{width:6px;height:6px;border-radius:50%;background:#9db4d8;animation:tgDot 1s infinite}.tg-typing i:nth-child(2){animation-delay:.15s}.tg-typing i:nth-child(3){animation-delay:.3s}
#messageList>.message:last-child{animation:tgPop .35s cubic-bezier(.2,.8,.2,1) both}
.tg-ref{max-width:min(520px,92%);margin:6px 0 8px;border:1px solid rgba(233,199,123,.5);border-radius:14px;background:linear-gradient(135deg,#140c2c,#24123f);padding:14px;display:grid;gap:10px;color:#eef;animation:tgPop .35s both}
.tg-ref h4{margin:0;font:800 17px Georgia,serif;color:#e9c77b}.tg-ref p{margin:0;font-size:12px;color:#c7c2e6}
.tg-ref .g{display:grid;grid-template-columns:1fr 1fr;gap:8px}.tg-ref .g div{border:1px solid #4b3a78;border-radius:10px;padding:10px;background:#ffffff08}
.tg-ref .g b{display:block;font:800 22px Georgia,serif;color:#e9c77b}.tg-ref .g span{font-size:10px;letter-spacing:.15em}
.composer.flow-buttons-only .flow-buttons{justify-content:center}
@keyframes tgPop{from{opacity:0;transform:translateY(10px) scale(.98)}}
@keyframes tgShine{to{background-position:-200%}}
@keyframes tgDot{50%{transform:translateY(-4px);opacity:.5}}
@media (prefers-reduced-motion:reduce){.tg-kb,.tg-ref,.tg-btn.ref,#messageList>.message:last-child{animation:none}}