/* FADAK PUBLIC SUPPORT CHAT v1 */

.psc{
  position:fixed;
  left:18px;
  bottom:18px;
  z-index:99999;
  font-family:inherit;
  direction:rtl;
}

.psc-toggle{
  width:54px;
  height:54px;
  min-width:54px;
  border:0;
  border-radius:50%;
  background:linear-gradient(145deg,#0877a8,#149dbe);
  color:#fff;
  box-shadow:0 10px 30px rgba(0,74,117,.28);
  cursor:pointer;
  font-size:23px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.psc-panel{
  position:absolute;
  left:0;
  bottom:64px;
  width:330px;
  height:390px;
  max-height:calc(100vh - 110px);
  background:#fff;
  border:1px solid #dbe7ed;
  border-radius:20px;
  box-shadow:0 20px 60px rgba(20,52,72,.22);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

.psc-panel[hidden]{
  display:none !important;
}

.psc-header{
  position:relative;
  flex:0 0 66px;
  min-height:66px;
  padding:10px 56px 10px 16px;
  background:linear-gradient(135deg,#086c9b,#16a2c2);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:flex-start;
}

.psc-header strong{
  display:block;
  font-size:17px;
  line-height:1.5;
}

.psc-header small{
  display:block;
  margin-top:2px;
  font-size:11px;
  opacity:.88;
}

.psc-close{
  position:absolute;
  left:12px;
  top:50%;
  transform:translateY(-50%);
  width:36px;
  height:36px;
  border:0;
  border-radius:11px;
  background:rgba(255,255,255,.16);
  color:#fff;
  cursor:pointer;
  font-size:26px;
  line-height:1;
}

.psc-messages{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  padding:12px;
  background:#f6fafc;
}

.psc-empty{
  text-align:center;
  padding:28px 10px;
  color:#7b8c95;
  font-size:12px;
}

.psc-message{
  margin-bottom:9px;
  padding:8px 10px;
  border:1px solid;
  border-radius:14px;
}

.psc-message.visitor{
  background:#eefaf2;
  border-color:#c7ead2;
}

.psc-message.support{
  background:#eef8fc;
  border-color:#c5e4ec;
}

.psc-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:4px;
  font-size:10px;
  color:#73828a;
}

.psc-message.visitor .psc-sender{
  color:#27824c;
  font-weight:700;
}

.psc-message.support .psc-sender{
  color:#19708b;
  font-weight:700;
}

.psc-text{
  color:#283840;
  font-size:13px;
  line-height:1.7;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}

.psc-name-row{
  flex:0 0 auto;
  padding:8px 10px 0;
  background:#fff;
}

.psc-name-row input{
  width:100%;
  height:38px;
  box-sizing:border-box;
  border:1px solid #cbdce4;
  border-radius:11px;
  padding:7px 10px;
  font:inherit;
  outline:none;
}

.psc-status{
  min-height:20px;
  padding:3px 11px;
  color:#788890;
  font-size:10px;
  background:#fff;
}

.psc-form{
  flex:0 0 auto;
  display:grid;
  grid-template-columns:minmax(0,1fr) 68px;
  gap:7px;
  padding:8px 10px 10px;
  background:#fff;
}

.psc-form textarea{
  width:100%;
  height:48px;
  min-height:48px;
  max-height:48px;
  box-sizing:border-box;
  resize:none;
  border:1px solid #b8d0dc;
  border-radius:12px;
  padding:8px 10px;
  font:inherit;
  outline:none;
}

.psc-form textarea:focus,
.psc-name-row input:focus{
  border-color:#168cb4;
  box-shadow:0 0 0 3px rgba(22,140,180,.10);
}

.psc-form button{
  width:68px;
  border:0;
  border-radius:12px;
  background:#168bb5;
  color:#fff;
  font:inherit;
  font-weight:700;
  cursor:pointer;
}

@media(max-width:600px){
  .psc{
    left:10px;
    bottom:10px;
  }

  .psc-panel{
    position:fixed;
    left:10px;
    right:10px;
    bottom:72px;
    width:auto;
    height:385px;
    max-height:calc(100vh - 90px);
  }
}

/* FADAK PUBLIC CHAT v2 - bottom right */
@media (min-width:601px){
  .psc{
    position:fixed !important;
    right:18px !important;
    left:auto !important;
    bottom:18px !important;
  }

  .psc-panel{
    position:fixed !important;
    right:18px !important;
    left:auto !important;
    bottom:78px !important;
    width:300px !important;
    height:365px !important;
    max-height:calc(100vh - 100px) !important;
  }
}

@media (max-width:600px){
  .psc{
    position:fixed !important;
    right:10px !important;
    left:auto !important;
    bottom:10px !important;
  }

  .psc-panel{
    position:fixed !important;
    right:10px !important;
    left:10px !important;
    bottom:72px !important;
    width:auto !important;
    height:365px !important;
    max-height:calc(100vh - 90px) !important;
  }
}


/* FADAK PUBLIC CHAT v3 - attachments */
.psc-attach-wrap{
  display:flex;
  align-items:center;
  gap:8px;
  direction:rtl;
  padding:6px 10px 0;
  min-height:30px;
}
.psc-attach-btn{
  border:1px solid #b8d8dc;
  background:#f4fbfc;
  color:#117d93;
  border-radius:9px;
  padding:5px 9px;
  font-family:inherit;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
  white-space:nowrap;
}
.psc-attach-btn:hover{background:#e9f7f9;}
.psc-attach-btn:disabled{opacity:.55;cursor:not-allowed;}
.psc-file-name{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:11px;
  color:#53656a;
  flex:1;
}
.psc-attachment{
  display:block;
  margin-top:7px;
  padding:7px 9px;
  border:1px solid #b8d8dc;
  border-radius:9px;
  background:#fff;
  color:#117d93;
  text-decoration:none;
  font-size:12px;
  overflow-wrap:anywhere;
}
.psc-attachment:hover{background:#f0fafb;}

/* upload button different color */
.psc-form button[type="button"]{
  background:#f59e0b !important;
  color:#ffffff !important;
  border:0 !important;
}
.psc-form button[type="button"]:hover{
  background:#d97706 !important;
}

/* FADAK attachment button color */
.psc-attach-btn{
  background:#f59e0b !important;
  color:#ffffff !important;
  border:1px solid #f59e0b !important;
  box-shadow:0 2px 6px rgba(245,158,11,.25) !important;
}

.psc-attach-btn:hover{
  background:#d97706 !important;
  border-color:#d97706 !important;
}

/* move attachment button a bit higher */
.psc-attach-btn{
  position: relative !important;
  top: -8px !important;
}