/* Telegram-ish container */
.sac-tg{
  max-width:760px;
  margin:0 auto;
  border:1px solid #e6e6e6;
  border-radius:18px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 10px 30px rgba(0,0,0,.08);
  display:flex;
  flex-direction:column;
}

/* Header */
.sac-tg__header{
  padding:12px 14px;
  background:linear-gradient(180deg, #ffffff, #f7f9ff);
  border-bottom:1px solid #eee;
}
.sac-tg__title{display:flex;align-items:center;gap:10px}
.sac-tg__avatar{
  width:38px;height:38px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  background:#2a7cff;color:#fff;font-weight:800;
}
.sac-tg__name{font-weight:900;font-size:14px}
.sac-tg__status{font-size:12px;color:#2aa84a;margin-top:2px}

/* Guest fields */
.sac-tg__guest{
  display:flex;gap:10px;
  padding:10px 14px;
  border-bottom:1px solid #eee;
  background:#fff;
}
.sac-tg__guest input{
  flex:1;min-width:0;
  padding:10px 12px;
  border:1px solid #e2e2e2;
  border-radius:12px;
  outline:none;
}

/* Body (Telegram-ish background) */
.sac-tg__body{
  background:
    radial-gradient(circle at 20px 20px, rgba(42,124,255,.10), transparent 60%),
    radial-gradient(circle at 120px 120px, rgba(0,0,0,.04), transparent 60%),
    linear-gradient(180deg, #f4f7ff, #eef3ff);
  padding:14px;
  height:min(62vh,560px);
  overflow:auto;
}

/* Bubble */
.sac-bubble{
  max-width:78%;
  margin:8px 0;
  padding:10px 12px;
  border-radius:16px;
  line-height:1.7;
  font-size:14px;
  position:relative;
  word-wrap:break-word;
}
.sac-bubble.user{
  margin-left:auto;
  background:#ffffff;
  border:1px solid rgba(0,0,0,.06);
  border-bottom-right-radius:6px;
}
.sac-bubble.admin{
  margin-right:auto;
  background:#dff1ff;
  border:1px solid rgba(0,0,0,.06);
  border-bottom-left-radius:6px;
}

/* Meta */
.sac-meta{
  margin-top:6px;
  font-size:11px;
  color:rgba(0,0,0,.55);
  display:flex;
  justify-content:flex-end;
  gap:10px;
}
.sac-file{
  margin-top:8px;
  font-size:13px;
}
.sac-file a{
  display:inline-flex;
  gap:8px;
  align-items:center;
  padding:8px 10px;
  border-radius:12px;
  background:rgba(255,255,255,.65);
  border:1px solid rgba(0,0,0,.06);
  word-break:break-word;
  text-decoration:none;
}

/* Sticker bubble */
.sac-sticker{
  font-size:42px;
  line-height:1;
  display:inline-block;
}
.sac-bubble .sac-sticker{font-size:56px}

/* Composer */
.sac-tg__composer{
  display:flex;
  gap:10px;
  align-items:flex-end;
  padding:12px;
  border-top:1px solid #eee;
  background:#fff;
}
.sac-inputWrap{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.sac-tg__composer textarea{
  width:100%;
  min-height:44px;
  max-height:140px;
  resize:none;
  border:1px solid #e2e2e2;
  border-radius:16px;
  padding:12px 12px;
  outline:none;
  background:#fff;
}

/* Icon Buttons */
.sac-iconBtn{
  width:44px;height:44px;
  border:1px solid #e2e2e2;
  border-radius:14px;
  background:#fff;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  user-select:none;
}
.sac-iconBtn:hover{background:#f7f8ff}

/* File Button with reliable paperclip */
.sac-fileBtn{
  width:44px;height:44px;
  border:1px solid #e2e2e2;
  border-radius:14px;
  background:#fff;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  user-select:none;
}
.sac-fileBtn input{display:none}
.sac-fileBtn:hover{background:#f7f8ff}
.sac-fileBtn__icon{
  width:18px;height:18px;display:block;background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M15.5 6.5l-7.7 7.7a3 3 0 01-4.2 0 3 3 0 010-4.2l8.1-8.1a2 2 0 012.8 2.8l-8.2 8.2a1 1 0 01-1.4-1.4l7.7-7.7' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M15.5 6.5l-7.7 7.7a3 3 0 01-4.2 0 3 3 0 010-4.2l8.1-8.1a2 2 0 012.8 2.8l-8.2 8.2a1 1 0 01-1.4-1.4l7.7-7.7' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Send button */
.sac-sendBtn{
  width:46px;height:46px;
  border:0;
  border-radius:16px;
  cursor:pointer;
  background:#2a7cff;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 10px 18px rgba(42,124,255,.25);
}
.sac-sendBtn:hover{filter:brightness(.98)}
.sac-sendBtn:active{transform:translateY(1px)}
.sac-sendBtn__icon{font-size:18px}

/* Upload status chip */
.sac-upload{
  border:1px solid rgba(0,0,0,.08);
  background:rgba(255,255,255,.75);
  border-radius:14px;
  padding:10px 10px;
}
.sac-upload__row{
  display:flex;
  gap:10px;
  align-items:center;
}
.sac-upload__name{
  flex:1;
  min-width:0;
  font-size:12px;
  font-weight:700;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.sac-upload__state{
  font-size:12px;
  color:rgba(0,0,0,.6);
  white-space:nowrap;
}
.sac-upload__remove{
  width:28px;height:28px;
  border:1px solid rgba(0,0,0,.10);
  border-radius:10px;
  background:#fff;
  cursor:pointer;
}
.sac-upload__bar{
  margin-top:8px;
  height:8px;
  background:rgba(0,0,0,.08);
  border-radius:999px;
  overflow:hidden;
}
.sac-upload__barFill{
  height:100%;
  width:0%;
  background:#2a7cff;
  border-radius:999px;
  transition:width .12s linear;
}

/* Sticker panel */
.sac-stickers{
  position:relative;
  border-top:1px solid #eee;
  background:#fff;
  display:none;
}
.sac-stickers.open{display:block}
.sac-stickers__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 12px;
  border-bottom:1px solid #eee;
}
.sac-stickers__title{font-weight:900}
.sac-stickers__grid{
  padding:12px;
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  gap:10px;
}
.sac-stickerBtn{
  border:1px solid rgba(0,0,0,.08);
  background:#fff;
  border-radius:14px;
  height:48px;
  cursor:pointer;
  font-size:22px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.sac-stickerBtn:hover{background:#f7f8ff}

.sac-hint{
  padding:6px 14px 12px;
  font-size:12px;
  color:rgba(0,0,0,.65);
}

/* Mobile */
@media (max-width:520px){
  .sac-tg__guest{flex-direction:column}
  .sac-bubble{max-width:92%}
  .sac-stickers__grid{grid-template-columns:repeat(5, 1fr)}
  .sac-tg__body{height:65vh}
}
/* ✅ center chat on any WP page (mobile friendly) */
.sac-page{
  padding: 16px;
  display: flex;
  justify-content: center;   /* وسط افقی */
}

.sac-page .sac-tg{
  width: 100%;
  max-width: 760px;          /* همون سایز دسکتاپ */
}

@media (max-width:520px){
  .sac-page{ padding: 10px; }
}