@font-face{
  font-family:'IRANSansX';
  src:url('../fonts/woff/IRANSansX-Thin.woff') format('woff');
  font-weight:100;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'IRANSansX';
  src:url('../fonts/woff/IRANSansX-UltraLight.woff') format('woff');
  font-weight:200;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'IRANSansX';
  src:url('../fonts/woff/IRANSansX-Light.woff') format('woff');
  font-weight:300;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'IRANSansX';
  src:url('../fonts/woff/IRANSansX-Regular.woff') format('woff');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'IRANSansX';
  src:url('../fonts/woff/IRANSansX-Medium.woff') format('woff');
  font-weight:500;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'IRANSansX';
  src:url('../fonts/woff/IRANSansX-DemiBold.woff') format('woff');
  font-weight:600;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'IRANSansX';
  src:url('../fonts/woff/IRANSansX-Bold.woff') format('woff');
  font-weight:700;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'IRANSansX';
  src:url('../fonts/woff/IRANSansX-ExtraBold.woff') format('woff');
  font-weight:800;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'IRANSansX';
  src:url('../fonts/woff/IRANSansX-Heavy.woff') format('woff');
  font-weight:850;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'IRANSansX';
  src:url('../fonts/woff/IRANSansX-Black.woff') format('woff');
  font-weight:900;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'IRANSansX';
  src:url('../fonts/woff/IRANSansX-ExtraBlack.woff') format('woff');
  font-weight:950;
  font-style:normal;
  font-display:swap;
}

:root{
  --mg-vh:1vh;
  --bg:#efeae2;
  --panel:#ffffff;
  --muted:#667781;
  --text:#111b21;
  --line:#d1d7db;
  --primary:#25d366;
  --primary-strong:#128c7e;
  --primary-dark:#075e54;
  --primary-soft:#dcf8c6;
  --success:#25d366;
  --success-soft:#dcf8c6;
  --danger:#ea4335;
  --danger-soft:#fde9e7;
  --warning:#f4b400;
  --warning-soft:#fff4d1;
  --shadow:0 10px 30px rgba(17,27,33,.08);
  --radius:18px;
}

*{box-sizing:border-box}
html,body{
  margin:0;
  padding:0;
  height:100%;
}
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
body{
  min-height:100%;
  background:var(--bg);
  color:var(--text);
  font-family:'IRANSansX',Tahoma,Arial,sans-serif;
  line-height:1.7;
  overflow-x:hidden;
}

body,
body :where(button,input,textarea,select,option,label,a,span,div,p,strong,small,h1,h2,h3,h4,h5,h6,li,ul,ol,table,thead,tbody,tfoot,tr,td,th,form,fieldset,legend),
.swal2-container,
.swal2-popup,
.btn{
  font-family:'IRANSansX',Tahoma,Arial,sans-serif !important;
}

a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

.app-shell{
  width:min(1500px,calc(100% - 24px));
  margin:14px auto 24px;
}

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:16px;
  padding:14px 18px;
  border-radius:24px;
  background:var(--primary-dark);
  color:#fff;
  box-shadow:var(--shadow);
  position:sticky;
  top:10px;
  z-index:50;
}

.topbar-brand{
  min-width:0;
}

.top-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.top-actions form{
  margin:0;
}

.small{font-size:12px}
.muted{color:var(--muted)}
.topbar .muted{color:rgba(255,255,255,.75)}

.card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:16px;
}

.flash{
  border-radius:16px;
  padding:14px 16px;
  margin:0 0 14px;
  font-size:14px;
}
.flash.success{
  background:var(--success-soft);
  color:#0c6a3b;
  border:1px solid #bfe8cc;
}
.flash.error{
  background:var(--danger-soft);
  color:#8d2418;
  border:1px solid #f7c9c3;
}

.btn,
button,
input[type="submit"]{
  appearance:none;
  border:none;
  cursor:pointer;
  border-radius:14px;
  padding:10px 14px;
  font-size:14px;
  transition:.2s ease;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  background:#e9edef;
  color:#111b21;
}

.btn:hover{transform:translateY(-1px)}
.btn:disabled,
button:disabled,
input[type="submit"]:disabled{
  opacity:.65;
  cursor:not-allowed;
  transform:none;
}
.btn.primary{background:var(--primary);color:#fff}
.btn.secondary{background:#e7fce9;color:#0c6a3b}
.btn.success{background:var(--success);color:#fff}
.btn.danger{background:var(--danger-soft);color:#8d2418}
.btn.ghost{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.16)}
.btn.warning{background:var(--warning-soft);color:#7c5a00}
.btn.sm{padding:7px 10px;font-size:12px;border-radius:10px}

.input,.textarea,.select,input[type="text"],input[type="number"],input[type="datetime-local"],input[type="file"],textarea,select{
  width:100%;
  border:1px solid var(--line);
  background:#fff;
  border-radius:16px;
  padding:12px 14px;
  font-size:14px;
  outline:none;
  color:var(--text);
}

.input:focus,.textarea:focus,.select:focus,textarea:focus,select:focus,input[type="text"]:focus,input[type="number"]:focus,input[type="datetime-local"]:focus{
  border-color:#86d7b4;
  box-shadow:0 0 0 4px rgba(37,211,102,.14);
}

.textarea,textarea{
  min-height:96px;
  resize:vertical;
}

.field{display:flex;flex-direction:column;gap:8px}
.stack{display:flex;flex-direction:column}
.centered{
  min-height:70vh;
  display:grid;
  place-items:center;
}
.auth-card{width:min(520px,100%)}
.auth-hint{
  background:#f7f9fa;
  border:1px solid var(--line);
  border-radius:16px;
  padding:14px;
  color:#3b4a54;
}

.verify-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:stretch;
}
.verify-actions form{
  display:flex;
  margin:0;
}
.verify-actions .btn{
  min-height:44px;
}

.container{display:flex;flex-direction:column;gap:16px}
.container.narrow{max-width:780px;margin:0 auto}

.avatar-preview{
  width:84px;
  height:84px;
  border-radius:50%;
  object-fit:cover;
  border:3px solid #fff;
  box-shadow:var(--shadow);
}

.pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  background:#f3f5f6;
  color:#3b4a54;
  font-size:12px;
}
.pill-success{background:#dcf8c6;color:#0c6a3b}
.pill-warning{background:#fff4d1;color:#7c5a00}
.pill-danger{background:#fde9e7;color:#8d2418}

.split{
  display:grid;
  grid-template-columns:320px minmax(0,1fr) 300px;
  gap:16px;
  align-items:start;
}

.sidebar,.member-panel,.chat-panel{min-height:200px}

.navlist{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.chat-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
}

.chat-item.active{
  background:var(--primary-soft);
  border-color:#bfe8cc;
}

.avatar,.avatar-sm,.empty-avatar{
  width:42px;
  height:42px;
  border-radius:50%;
  flex:0 0 42px;
}

.avatar,.avatar-sm{
  object-fit:cover;
  background:#e9edef;
}

.empty-avatar{
  display:grid;
  place-items:center;
  background:#dcf8c6;
  color:#0c6a3b;
  font-weight:700;
}

.member-list{
  display:flex;
  flex-direction:column;
  gap:10px;
  max-height:760px;
  overflow:auto;
}

.chat-wrap{
  display:flex;
  flex-direction:column;
  gap:14px;
  min-height:760px;
}

.chat-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  border-bottom:1px solid var(--line);
  padding-bottom:12px;
}

.messages{
  background:#f7f9fa;
  border:1px solid var(--line);
  border-radius:18px;
  padding:16px;
  min-height:520px;
  max-height:520px;
  overflow:auto;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.msg{
  max-width:min(78%,640px);
  display:flex;
  flex-direction:column;
  gap:8px;
}

.msg.mine{align-self:flex-start}
.msg.other{align-self:flex-end}

.msg-row{display:flex;align-items:flex-end;gap:10px}
.msg.mine .msg-row{flex-direction:row}
.msg.other .msg-row{flex-direction:row-reverse}

.msg-bubble{
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  padding:12px;
  box-shadow:0 3px 12px rgba(17,27,33,.04);
  min-width:140px;
}

.msg.mine .msg-bubble{
  background:#dcf8c6;
  border-color:#bfe8cc;
}

.msg-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font-size:12px;
  color:#54656f;
  margin-bottom:4px;
}

.msg-text{white-space:pre-wrap;word-break:break-word}

.msg-actions{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  margin-top:6px;
}

.reply-box{
  background:#f7f9fa;
  border:1px solid var(--line);
  border-radius:12px;
  padding:10px;
  font-size:13px;
  color:#3b4a54;
}

.composer{
  border-top:1px solid var(--line);
  padding-top:14px;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.composer-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

.icon-btn{
  border:none;
  background:#e7fce9;
  color:#0c6a3b;
  border-radius:10px;
  padding:8px 10px;
  cursor:pointer;
  font-size:13px;
}

.notice-box{
  padding:12px 14px;
  border-radius:14px;
  border:1px solid #ffe69c;
  background:#fff4d1;
  color:#7c5a00;
}

.table-wrap{overflow:auto}
.table{width:100%;border-collapse:collapse}
.table th,.table td{
  border-bottom:1px solid var(--line);
  padding:10px;
  text-align:right;
  font-size:14px;
  vertical-align:top;
}
.checkbox{display:flex;align-items:center;gap:8px}
.admin-user-card{
  display:grid;
  grid-template-columns:1.5fr auto auto 1fr auto;
  gap:12px;
  align-items:center;
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px;
}
.compose-actions{
  display:grid;
  grid-template-columns:1fr auto auto;
  gap:10px;
  align-items:center;
}
.session-table form{min-width:220px}

details summary{list-style:none}
details summary::-webkit-details-marker{display:none}

hr{
  border:none;
  border-top:1px solid var(--line);
  margin:16px 0;
}

@media (max-width:1100px){
  .split{grid-template-columns:1fr}
  .member-panel{order:3}
  .sidebar{order:1}
  .chat-panel{order:2}
}

@media (max-width:920px){
  .app-shell{
    width:100%;
    margin:0;
    padding:0 10px 16px;
  }

  .topbar{
    top:0;
    margin:0 0 10px;
    border-radius:0 0 18px 18px;
    padding:calc(10px + env(safe-area-inset-top)) 12px 10px;
    gap:10px;
    flex-wrap:wrap;
    align-items:flex-start;
  }

  .topbar-brand{
    width:100%;
  }

  .topbar-brand .small{
    display:none;
  }

  .topbar strong{
    font-size:16px;
  }

  .top-actions{
    width:100%;
    min-width:0;
    flex-wrap:nowrap;
    overflow-x:auto;
    padding-bottom:2px;
    -webkit-overflow-scrolling:touch;
  }

  .top-actions::-webkit-scrollbar{
    display:none;
  }

  .top-actions .btn,
  .top-actions form{
    flex:0 0 auto;
  }

  .top-actions form .btn,
  .top-actions form button{
    white-space:nowrap;
  }

  .flash{
    margin:0 0 10px;
  }

  .input,.textarea,.select,
  input[type="text"],input[type="number"],input[type="datetime-local"],input[type="file"],
  textarea,select{
    font-size:16px !important;
  }

  .messages{
    min-height:420px;
    max-height:420px;
    padding:10px;
  }

  .msg{
    max-width:92%;
  }

  .chat-wrap{
    min-height:auto;
  }

  .admin-user-card,
  .compose-actions{
    grid-template-columns:1fr;
  }

  .verify-actions{
    flex-direction:column;
    align-items:stretch;
  }

  .verify-actions form{
    width:100%;
  }

  .verify-actions .btn{
    width:100%;
  }
}

@media (max-width:920px){
  body.page-chat.has-active-chat{
    position:fixed;
    inset:0;
    width:100%;
    height:calc(var(--mg-vh, 1vh) * 100);
    overflow:hidden !important;
    background:#f0f2f5 !important;
    overscroll-behavior:none;
  }

  body.page-chat.has-active-chat .app-shell{
    width:100% !important;
    height:calc(var(--mg-vh, 1vh) * 100) !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
    display:flex !important;
    flex-direction:column !important;
  }

  body.page-chat.has-active-chat .topbar,
  body.page-chat.has-active-chat .flash{
    display:none !important;
  }

  body.page-chat.has-active-chat .wa-shell{
    height:calc(var(--mg-vh, 1vh) * 100) !important;
    min-height:0 !important;
    margin:0 !important;
    overflow:hidden !important;
  }

  body.page-chat.has-active-chat .wa-layout{
    height:100% !important;
    min-height:0 !important;
    border:none !important;
    border-radius:0 !important;
    box-shadow:none !important;
    overflow:hidden !important;
  }

  body.page-chat.has-active-chat .wa-main,
  body.page-chat.has-active-chat .wa-sidebar,
  body.page-chat.has-active-chat .wa-members{
    height:100% !important;
    min-height:0 !important;
    overflow:hidden !important;
  }

  body.page-chat.has-active-chat .wa-main{
    display:flex !important;
    flex-direction:column !important;
  }

  body.page-chat.has-active-chat .wa-main-head{
    flex:0 0 auto !important;
    padding:10px 12px !important;
  }

  body.page-chat.has-active-chat .wa-chat-body{
    flex:1 1 auto !important;
    min-height:0 !important;
    max-height:none !important;
    overflow:auto !important;
    padding:10px !important;
    -webkit-overflow-scrolling:touch !important;
    overscroll-behavior:contain !important;
  }

  body.page-chat.has-active-chat .wa-messages{
    min-height:min-content !important;
  }

  body.page-chat.has-active-chat .wa-composer{
    flex:0 0 auto !important;
    position:relative !important;
    bottom:auto !important;
    z-index:5 !important;
    padding:8px 8px calc(8px + env(safe-area-inset-bottom)) !important;
  }

  body.keyboard-open.page-chat.has-active-chat .wa-composer{
    padding-bottom:8px !important;
  }

  body.page-chat.has-active-chat .wa-compose-shell{
    gap:8px !important;
  }

  body.page-chat.has-active-chat .wa-compose-bubble{
    min-height:52px !important;
    border-radius:24px !important;
    padding:6px 8px !important;
    gap:2px !important;
  }

  body.page-chat.has-active-chat .wa-compose-input{
    font-size:16px !important;
    padding:8px 4px 6px !important;
    max-height:110px !important;
  }

  body.page-chat.has-active-chat .wa-compose-icon-btn{
    width:34px !important;
    /*height:34px !important;*/
    transition:.15s ease !important;
            padding-left: 0;
        padding-right: 0px;
        padding-top: 4px;
  }

  body.page-chat.has-active-chat .wa-action-btn{
    width:50px !important;
    height:50px !important;
    flex-basis:50px !important;
  }

  body.page-chat.has-active-chat .wa-msg-row > .wa-msg{
    max-width:92% !important;
  }

  body.page-chat.has-active-chat .wa-public-msg-wrap{
    max-width:94% !important;
  }

  body.page-chat.has-active-chat .wa-emoji-panel{
    bottom:72px !important;
    inset-inline-start:8px !important;
    inset-inline-end:8px !important;
  }

  body.page-chat.has-active-chat .wa-emoji-grid{
    grid-template-columns:repeat(7,minmax(0,1fr)) !important;
  }

  body.page-chat.has-active-chat .wa-back-btn{
    display:inline-flex !important;
  }
}

body.page-chat .wa-compose-bubble.has-text #openAttachmentBtn,
body.page-chat .wa-compose-bubble.has-text #openCameraBtn{
  opacity:0 !important;
  visibility:hidden !important;
  width:0 !important;
  min-width:0 !important;
  height:0 !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  pointer-events:none !important;
}

body.page-chat .wa-compose-bubble.has-text{
  gap:0 !important;
}

@media (max-width:640px){
  body.page-chat .wa-layout{
    border-radius:0 !important;
    border:none !important;
    box-shadow:none !important;
  }

  body.page-chat .wa-sidebar-head{
    padding:10px 12px !important;
  }

  body.page-chat .wa-chat-item{
    padding:12px !important;
  }
}