/* MasaLobi Live Chat V2 */
:root{
  --chat-bg:#071522;
  --chat-panel:#0d2231;
  --chat-panel-2:#102c3d;
  --chat-line:#315065;
  --chat-soft:#8fa8b7;
  --chat-text:#e9f1f5;
  --chat-gold:#e9c47b;
  --chat-green:#49c684;
  --chat-red:#e7796d;
}
.ml-chat-page{width:min(1420px,calc(100% - 28px));margin:0 auto 28px;}
.ml-chat-topline{
  margin:18px 0 12px;padding:14px 16px;border:1px solid #36586c;border-radius:10px;
  background:linear-gradient(135deg,#102c3d,#0a1c2a 68%);color:var(--chat-text);
  display:flex;justify-content:space-between;align-items:center;gap:18px;
}
.ml-chat-topline h1{margin:3px 0 4px;font:800 26px/1.1 Georgia,serif;color:#f3d496;}
.ml-chat-topline p{margin:0;color:#a9beca;font-size:12px;}
.ml-chat-membership-note{white-space:nowrap;border:1px solid #496477;background:#081a28;padding:8px 11px;border-radius:7px;font-size:11px;color:#bdd0d9;}
.ml-chat-membership-note span{color:#c7d4da;font-weight:800;}
.ml-chat-membership-note strong{color:#ffd77c;}
.ml-chat-membership-note b{color:#6e8795;margin:0 5px;}

.ml-live-chat{
  min-height:650px;border:1px solid #3c5d70;border-radius:10px;overflow:hidden;
  background:var(--chat-bg);box-shadow:0 18px 48px rgba(0,0,0,.22);
}
.ml-chat-loading,.ml-chat-login{
  min-height:420px;display:grid;place-items:center;text-align:center;color:#b7c7cf;padding:30px;
}
.ml-chat-login-inner{max-width:460px;border:1px solid #36566a;background:#0d2635;padding:24px;border-radius:10px;}
.ml-chat-login h2{margin:0 0 8px;color:#f0cf91;font:800 22px Georgia,serif;}
.ml-chat-login p{font-size:12px;line-height:1.6;}
.ml-chat-login a{display:inline-block;margin-top:8px;padding:9px 15px;border-radius:6px;background:#d1a557;color:#102433;text-decoration:none;font-weight:900;}

.ml-chat-shell{
  display:grid;grid-template-columns:230px minmax(0,1fr) 250px;
  min-height:650px;height:min(74vh,790px);
}
.ml-chat-left,.ml-chat-right{background:#0b1d2b;min-width:0;overflow:hidden;display:flex;flex-direction:column;}
.ml-chat-left{border-right:1px solid var(--chat-line);}
.ml-chat-right{border-left:1px solid var(--chat-line);}
.ml-chat-center{min-width:0;display:flex;flex-direction:column;background:#081824;}

.ml-chat-side-head{
  height:48px;display:flex;align-items:center;justify-content:space-between;
  padding:0 12px;border-bottom:1px solid var(--chat-line);background:#102838;
}
.ml-chat-side-head strong{font:800 13px Georgia,serif;color:#f0d093;}
.ml-chat-side-head small{font-size:10px;color:#8fa7b5;}

.ml-chat-side-tools{display:flex;align-items:center;gap:7px;}
.ml-chat-admin-room-btn{
  border:1px solid #8e6d38;background:#3a2d1c;color:#f3d18b;border-radius:5px;
  min-height:25px;padding:3px 7px;font-size:9px;font-weight:900;cursor:pointer;
}
.ml-chat-admin-room-btn:hover{background:#513c21;border-color:#c79b50;}
.ml-chat-admin-dialog{
  width:min(420px,calc(100vw - 28px));border:1px solid #6a593d;border-radius:9px;
  background:#0b1f2d;color:#dce7eb;padding:0;box-shadow:0 24px 70px rgba(0,0,0,.55);
}
.ml-chat-admin-dialog::backdrop{background:rgba(2,9,14,.72);}
.ml-chat-admin-form{padding:15px;display:grid;gap:11px;}
.ml-chat-admin-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-bottom:9px;border-bottom:1px solid #2f4c5e;}
.ml-chat-admin-head strong{font:800 16px Georgia,serif;color:#f0cf8e;}
.ml-chat-admin-head span{font-size:9px;color:#84a0ae;}
.ml-chat-admin-field{display:grid;gap:5px;}
.ml-chat-admin-field>span{font-size:10px;font-weight:800;color:#9db3bf;}
.ml-chat-admin-field input{
  width:100%;height:35px;border:1px solid #3e5e70;border-radius:6px;background:#071824;color:#e5eef2;
  padding:0 9px;font-size:11px;outline:none;
}
.ml-chat-admin-field input:focus{border-color:#c69a4e;box-shadow:0 0 0 2px #c69a4e1c;}
.ml-chat-admin-note{min-height:28px;padding:7px 8px;border-radius:5px;background:#0a1924;color:#7f9ba9;font-size:9px;line-height:1.45;}
.ml-chat-admin-note[data-kind="error"]{background:#2c1c20;color:#ff9d91;}
.ml-chat-admin-actions{display:flex;justify-content:flex-end;gap:7px;}
.ml-chat-admin-actions button{border:1px solid #456477;background:#142e3f;color:#cbdce4;border-radius:6px;padding:7px 11px;font-size:10px;font-weight:800;cursor:pointer;}
.ml-chat-admin-actions button.is-primary{border-color:#d0a75f;background:#b98a40;color:#102331;}
.ml-chat-admin-actions button:disabled{opacity:.55;cursor:not-allowed;}
.ml-chat-side-section{padding:10px;border-bottom:1px solid #233f51;}
.ml-chat-side-title{display:flex;justify-content:space-between;align-items:center;margin:0 0 8px;color:#8fa9b7;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;}

.ml-chat-room-list,.ml-chat-dm-list{display:flex;flex-direction:column;gap:5px;}
.ml-chat-room-btn,.ml-chat-dm-btn{
  width:100%;border:1px solid transparent;border-radius:6px;background:transparent;color:#c9d5db;
  min-height:36px;padding:7px 9px;text-align:left;cursor:pointer;display:flex;align-items:center;gap:8px;
  font:700 11px/1.2 system-ui;min-width:0;
}
.ml-chat-room-btn:hover,.ml-chat-dm-btn:hover{background:#122f41;border-color:#2f5267;}
.ml-chat-room-btn.is-view,.ml-chat-dm-btn.is-view{background:#193a4c;border-color:#b28a4b;color:#f2d89f;}
.ml-chat-room-dot{width:8px;height:8px;border-radius:50%;background:#5a7483;box-shadow:0 0 0 3px #ffffff05;}
.ml-chat-room-btn.is-active-room .ml-chat-room-dot{background:var(--chat-green);box-shadow:0 0 0 3px #49c68420;}
.ml-chat-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1;}
.ml-chat-count,.ml-chat-new{
  flex:0 0 auto;min-width:19px;height:19px;padding:0 5px;border-radius:10px;display:grid;place-items:center;
  font-size:9px;font-weight:900;background:#27465a;color:#cfe0e8;
}
.ml-chat-new{background:#9d4338;color:#ffe2dc;}
.ml-chat-dm-close{
  border:0;background:transparent;color:#7f99a7;cursor:pointer;font-size:14px;padding:0 2px;line-height:1;
}
.ml-chat-dm-close:hover{color:#ff9a8e;}
.ml-chat-dm-empty{margin:4px 2px;color:#78919f;font-size:10px;line-height:1.45;}
.ml-chat-left-foot{margin-top:auto;padding:10px;border-top:1px solid #233f51;color:#7894a3;font-size:10px;line-height:1.45;}
.ml-chat-left-foot b{color:#e7c67e;}

.ml-chat-head{
  height:58px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 14px;
  background:linear-gradient(180deg,#123044,#0f2736);border-bottom:1px solid var(--chat-line);
}
.ml-chat-head-main{min-width:0;}
.ml-chat-head h2{margin:0;color:#f2d398;font:800 18px/1.2 Georgia,serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ml-chat-subtitle{margin-top:3px;color:#89a4b4;font-size:10px;}
.ml-chat-head-actions{display:flex;gap:6px;}
.ml-chat-head-actions button{
  border:1px solid #466477;background:#153346;color:#d8e3e8;border-radius:6px;padding:6px 9px;font-size:10px;cursor:pointer;
}
.ml-chat-head-actions button:hover{background:#20465b;}
.ml-chat-head-actions button.is-danger{border-color:#7d4f4b;color:#ffb1a6;background:#3b2628;}

.ml-chat-status{
  min-height:26px;padding:6px 12px;border-bottom:1px solid #1e394b;background:#091b29;
  color:#819caa;font-size:10px;display:flex;align-items:center;
}
.ml-chat-status[data-kind="error"]{color:#ff9d91;background:#2b1d21;}
.ml-chat-status[data-kind="success"]{color:#a8e5bb;background:#11271e;}

.ml-chat-log{
  flex:1;min-height:0;overflow:auto;padding:12px 14px 18px;scroll-behavior:smooth;
  background:
    radial-gradient(circle at 18% 12%,#12334a45 0,transparent 26%),
    linear-gradient(180deg,#081824,#071521);
}
.ml-chat-empty{min-height:220px;display:grid;place-items:center;color:#7894a3;text-align:center;font-size:11px;}
.ml-chat-msg{display:grid;grid-template-columns:34px minmax(0,1fr);gap:8px;padding:7px 6px;border-radius:7px;}
.ml-chat-msg:hover{background:#ffffff05;}
.ml-chat-msg + .ml-chat-msg{margin-top:2px;}
.ml-chat-avatar{
  width:34px;height:34px;border-radius:50%;object-fit:cover;border:1px solid #456273;background:#142f40;
}
.ml-chat-msg-top{display:flex;align-items:center;gap:6px;min-width:0;}
.ml-chat-name{font-size:11px;font-weight:850;color:#d7e2e7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ml-chat-name.is-pro{color:#f3cc74;text-shadow:0 0 12px #e7b85625;}
.ml-chat-pro-badge{
  display:inline-flex;align-items:center;gap:2px;border:1px solid #a77e38;border-radius:4px;
  padding:1px 4px;background:#4b381f;color:#ffdb83;font-size:8px;font-weight:900;letter-spacing:.04em;
}
.ml-chat-time{margin-left:auto;color:#617d8c;font-size:9px;white-space:nowrap;}
.ml-chat-body{margin-top:2px;color:#d7e2e7;font:12px/1.48 system-ui;overflow-wrap:anywhere;white-space:pre-wrap;}
.ml-chat-msg.is-mine .ml-chat-body{color:#f3e1bc;}
.ml-chat-msg.is-mine{background:#4a3b221c;}

.ml-chat-compose{
  border-top:1px solid var(--chat-line);padding:10px 12px;background:#0c2231;
}
.ml-chat-compose-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;}
.ml-chat-input{
  width:100%;min-width:0;height:38px;border:1px solid #466577;border-radius:6px;background:#071a28;
  color:#edf4f7;padding:0 11px;font:12px system-ui;outline:none;
}
.ml-chat-input:focus{border-color:#c79b50;box-shadow:0 0 0 2px #c79b5017;}
.ml-chat-send{
  min-width:88px;border:1px solid #e1b466;border-radius:6px;background:linear-gradient(180deg,#e9c57c,#b8873d);
  color:#102433;font-size:11px;font-weight:900;cursor:pointer;padding:0 14px;
}
.ml-chat-send:disabled{opacity:.5;cursor:not-allowed;}
.ml-chat-compose-meta{display:flex;justify-content:space-between;margin-top:5px;color:#6f8b99;font-size:9px;}

.ml-chat-member-search{padding:8px 10px;border-bottom:1px solid #233f51;}
.ml-chat-member-search input{
  width:100%;height:31px;border:1px solid #36576b;border-radius:6px;background:#071a28;color:#dbe7ec;
  padding:0 9px;font-size:10px;outline:none;
}
.ml-chat-members{overflow:auto;padding:7px;display:flex;flex-direction:column;gap:4px;}
.ml-chat-member{
  width:100%;border:1px solid transparent;background:transparent;border-radius:7px;padding:6px;display:grid;
  grid-template-columns:30px minmax(0,1fr) auto;gap:7px;align-items:center;color:#d6e0e5;text-align:left;cursor:default;
}
.ml-chat-member:hover{background:#123144;border-color:#2a5065;}
.ml-chat-member-avatar-wrap{position:relative;width:30px;height:30px;}
.ml-chat-member-avatar{width:30px;height:30px;border-radius:50%;object-fit:cover;border:1px solid #456273;background:#142f40;}
.ml-chat-online-dot{
  position:absolute;right:-1px;bottom:-1px;width:9px;height:9px;border-radius:50%;background:#3bca7b;border:2px solid #0b1d2b;
}
.ml-chat-member-info{min-width:0;}
.ml-chat-member-name{display:flex;align-items:center;gap:4px;min-width:0;font-size:10px;font-weight:800;}
.ml-chat-member-name span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ml-chat-member-name.is-pro{color:#f0c970;}
.ml-chat-member-hint{margin-top:2px;color:#6d8997;font-size:9px;}
.ml-chat-private-btn{
  border:1px solid #365a6e;background:#153346;color:#adc7d4;border-radius:5px;min-width:27px;height:27px;
  cursor:pointer;font-size:11px;
}
.ml-chat-private-btn:hover{border-color:#bf9148;color:#f1d28f;background:#273927;}
.ml-chat-help{padding:9px 10px;border-top:1px solid #233f51;margin-top:auto;color:#7893a2;font-size:9px;line-height:1.45;}
.ml-chat-help b{color:#d5b877;}
.ml-chat-footnote{text-align:center;color:#6d8491;font-size:10px;margin:9px 0 0;}

@media(max-width:1050px){
  .ml-chat-shell{grid-template-columns:205px minmax(0,1fr) 220px;}
}
@media(max-width:820px){
  .ml-chat-page{width:min(100% - 16px,760px);}
  .ml-chat-topline{align-items:flex-start;flex-direction:column;}
  .ml-chat-membership-note{white-space:normal;}
  .ml-chat-shell{height:auto;min-height:0;grid-template-columns:1fr;}
  .ml-chat-left,.ml-chat-right{border:0;}
  .ml-chat-left{border-bottom:1px solid var(--chat-line);}
  .ml-chat-right{border-top:1px solid var(--chat-line);}
  .ml-chat-side-head{height:42px;}
  .ml-chat-side-section{padding:8px;}
  .ml-chat-room-list,.ml-chat-dm-list{flex-direction:row;overflow:auto;padding-bottom:2px;scrollbar-width:none;-ms-overflow-style:none;}
  .ml-chat-room-list::-webkit-scrollbar,.ml-chat-dm-list::-webkit-scrollbar{display:none;}
  .ml-chat-room-btn,.ml-chat-dm-btn{width:auto;min-width:135px;flex:0 0 auto;}
  .ml-chat-left-foot{display:none;}
  .ml-chat-center{min-height:540px;}
  .ml-chat-log{min-height:350px;max-height:52vh;}
  .ml-chat-members{max-height:210px;}
  .ml-chat-help{display:none;}
}
@media(max-width:500px){
  .ml-chat-topline h1{font-size:22px;}
  .ml-chat-head{height:54px;padding:0 10px;}
  .ml-chat-head h2{font-size:16px;}
  .ml-chat-head-actions button{padding:5px 7px;}
  .ml-chat-log{padding:9px 8px 14px;}
  .ml-chat-msg{grid-template-columns:30px minmax(0,1fr);padding:6px 4px;}
  .ml-chat-avatar{width:30px;height:30px;}
  .ml-chat-compose{padding:8px;}
  .ml-chat-send{min-width:72px;}
}