/* =========================================================
   TOTOSLOTJP — Bottom navigation / LiveChat visual layer
   Added separately so existing APIs and settled modules stay intact.
   ========================================================= */

.bottom .bottom-ico{
  width:31px;
  height:31px;
  display:grid;
  place-items:center;
  line-height:1;
}

.bottom .bottom-ico svg{
  width:27px;
  height:27px;
  display:block;
  overflow:visible;
  fill:none;
  stroke:currentColor;
  stroke-width:2.25;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.bottom .bottom-icon-home{color:#fff}
.bottom .bottom-icon-promo{color:#ff9f31}
.bottom .bottom-icon-event{color:#ffd04a}
.bottom .bottom-icon-chat{color:#63bff7}
.bottom .bottom-icon-livechat{color:#ff5b3d}

.bottom>a{
  transition:background .16s ease, filter .16s ease;
}

.bottom>a:hover,
.bottom>a:focus-visible{
  background:linear-gradient(
    180deg,
    rgba(255,205,67,.20),
    rgba(255,205,67,.06)
  );
}

.bottom>a:focus-visible{
  outline:2px solid #ffe36a;
  outline-offset:-2px;
}

.bottom-livechat .content > span:last-child{
  color:#fff;
}

.bottom-livechat:hover .bottom-icon-livechat{
  filter:drop-shadow(0 0 5px rgba(255,91,61,.65));
}

/* ===== LIVE CHAT WINDOW ===== */

.tj-livechat{
  position:fixed;
  right:14px;
  bottom:70px;
  z-index:99990;
  width:min(390px,calc(100vw - 24px));
  height:min(620px,calc(100vh - 92px));
  display:none;
  flex-direction:column;
  overflow:hidden;
  background:#090909;
  border:1px solid #8d681d;
  border-radius:12px;
  box-shadow:0 20px 70px rgba(0,0,0,.72);
}

.tj-livechat.open{
  display:flex;
}

.tj-livechat-head{
  min-height:58px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:8px 11px;
  background:linear-gradient(180deg,#171717,#0d0d0d);
  border-bottom:1px solid #393939;
}

.tj-livechat-brand{
  display:flex;
  align-items:center;
  gap:9px;
  min-width:0;
}

.tj-livechat-logo{
  width:35px;
  height:35px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#ff5b3d;
  color:#fff;
  box-shadow:0 0 10px rgba(255,91,61,.24);
}

.tj-livechat-logo svg{
  width:21px;
  height:21px;
  fill:none;
  stroke:currentColor;
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.tj-livechat-title{
  min-width:0;
}

.tj-livechat-title strong{
  display:block;
  color:#fff;
  font-size:12px;
  line-height:1.2;
}

.tj-livechat-title span{
  display:flex;
  align-items:center;
  gap:5px;
  margin-top:3px;
  color:#aaa;
  font-size:8px;
}

.tj-livechat-online{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#28e78a;
  box-shadow:0 0 7px rgba(40,231,138,.7);
}

.tj-livechat-close{
  width:31px;
  height:31px;
  flex:0 0 31px;
  border:1px solid #4a4a4a;
  border-radius:6px;
  background:#202020;
  color:#fff;
  font-size:20px;
  line-height:1;
  cursor:pointer;
}

.tj-livechat-close:hover{
  border-color:#ffc735;
  color:#ffc735;
}

.tj-livechat-name{
  padding:9px 10px 0;
  background:#090909;
}

.tj-livechat-name input{
  width:100%;
  height:34px;
  border:1px solid #3b3b3b;
  border-radius:6px;
  background:#111;
  color:#fff;
  padding:0 10px;
  outline:0;
  font:inherit;
  font-size:10px;
}

.tj-livechat-name input:focus{
  border-color:#ffc735;
  box-shadow:0 0 0 1px rgba(255,199,53,.12);
}

.tj-livechat-messages{
  flex:1;
  min-height:0;
  overflow-y:auto;
  padding:10px;
  display:flex;
  flex-direction:column;
  gap:8px;
  background:
    radial-gradient(circle at 50% 0,rgba(255,199,53,.035),transparent 35%),
    #090909;
}

.tj-livechat-empty{
  margin:auto;
  color:#777;
  text-align:center;
  font-size:9px;
  line-height:1.5;
  max-width:230px;
}

.tj-livechat-msg{
  max-width:84%;
  padding:8px 10px;
  border-radius:9px;
  color:#eee;
  font-size:10px;
  line-height:1.45;
  word-break:break-word;
}

.tj-livechat-msg.user{
  align-self:flex-end;
  background:linear-gradient(180deg,#8d681d,#62460f);
  border:1px solid #a77b22;
  border-bottom-right-radius:3px;
}

.tj-livechat-msg.agent{
  align-self:flex-start;
  background:#191919;
  border:1px solid #343434;
  border-bottom-left-radius:3px;
}

.tj-livechat-msg.system{
  align-self:center;
  max-width:95%;
  color:#999;
  background:#101010;
  border:1px dashed #2b2b2b;
  font-size:8px;
}

.tj-livechat-time{
  display:block;
  margin-top:3px;
  color:rgba(255,255,255,.48);
  font-size:7px;
}

.tj-livechat-status{
  min-height:24px;
  padding:4px 10px 0;
  color:#777;
  font-size:8px;
  background:#090909;
}

.tj-livechat-form{
  display:flex;
  gap:7px;
  padding:8px 10px 10px;
  background:#111;
  border-top:1px solid #2d2d2d;
}

.tj-livechat-form textarea{
  flex:1;
  min-width:0;
  min-height:38px;
  max-height:90px;
  resize:none;
  border:1px solid #3b3b3b;
  border-radius:7px;
  background:#090909;
  color:#fff;
  padding:9px;
  outline:0;
  font-family:inherit;
  font-size:10px;
  line-height:1.35;
}

.tj-livechat-form textarea:focus{
  border-color:#ffc735;
}

.tj-livechat-send{
  width:62px;
  min-width:62px;
  align-self:stretch;
  border:1px solid #ffe17a;
  border-radius:7px;
  background:linear-gradient(#ffe45b,#d79d18);
  color:#17110a;
  font-size:9px;
  font-weight:900;
  cursor:pointer;
}

.tj-livechat-send:disabled{
  opacity:.55;
  cursor:not-allowed;
}

@media(max-width:600px){
  .tj-livechat{
    right:0;
    bottom:58px;
    width:100%;
    height:calc(100vh - 58px);
    max-height:none;
    border-radius:12px 12px 0 0;
    border-right:0;
    border-left:0;
  }
}


/* =========================================================
   OFFICIAL LIVECHAT COMPATIBILITY
   The old custom .tj-livechat panel is no longer generated.
   The real LiveChat widget is rendered by LiveChat itself.
   ========================================================= */

body.tj-livechat-open{
  overflow:auto;
}

/* Never allow the retired custom panel to reappear if an
   older cached script happens to leave its markup behind. */
#tjLiveChat{
  display:none !important;
}

/* Final bottom-nav reference override */
@media (max-width:700px){
  .bottom{
    height:58px !important;
    min-height:58px !important;
    grid-template-columns:repeat(5,1fr) !important;
    background:linear-gradient(180deg,#73551a,#4c370d) !important;
    border-top:1px solid #c18f27 !important;
  }
  .bottom>a{
    height:58px !important;
    border-right:1px solid #1c1509 !important;
    background:transparent !important;
  }
  .bottom .content{
    height:58px !important;
    font-size:9px !important;
    gap:2px !important;
  }
  .bottom .bottom-ico{
    width:28px !important;
    height:28px !important;
    flex:0 0 28px !important;
  }
  .bottom .bottom-ico svg{
    width:26px !important;
    height:26px !important;
  }
}