/**
 * Smart Support Widget — Production CSS
 *
 * دقیقاً از HTML مرجع تأییدشده استخراج و بهینه‌سازی شده.
 * تمام CSS اسکوپ‌شده به .ss-fab و .ss-panel — بدون تأثیر بر سایت وردپرس.
 *
 * @package SmartSupport
 */

/* ===== Design Tokens — LIGHT (default) ===== */
:root{
  --ss-primary-1:#6D5DF6;
  --ss-primary-2:#8B5CF6;
  --ss-primary-3:#A78BFA;
  --ss-grad: linear-gradient(135deg, var(--ss-primary-1) 0%, var(--ss-primary-2) 55%, var(--ss-primary-3) 100%);
  --ss-grad-soft: linear-gradient(135deg, rgba(109,93,246,0.12) 0%, rgba(139,92,246,0.06) 100%);
  --ss-bg:#F8F9FC;
  --ss-surface:#FFFFFF;
  --ss-border: rgba(17,24,39,0.08);
  --ss-text-1:#191A23;
  --ss-text-2:#5B5F73;
  --ss-text-3:#9A9EB0;
  --ss-success:#22C55E;
  --ss-success-bg:#EAFBF1;
  --ss-warning:#F59E0B;
  --ss-warning-bg:#FEF6E7;
  --ss-danger:#EF4444;
  --ss-danger-bg:#FDECEC;
  --ss-shadow-sm: 0 2px 8px rgba(23,15,80,0.06);
  --ss-shadow-md: 0 8px 24px rgba(23,15,80,0.10);
  --ss-shadow-lg: 0 20px 60px rgba(23,15,80,0.20);
  --ss-shadow-fab: 0 10px 30px rgba(109,93,246,0.45);
  --ss-radius-xl: 26px;
  --ss-radius-lg: 20px;
  --ss-radius-md: 14px;
  --ss-radius-sm: 10px;
  --ss-radius-pill: 999px;
  --ss-font: 'Vazirmatn', -apple-system, sans-serif;
  --ss-bubble-user-text:#fff;
  --ss-bubble-bot-bg: var(--ss-bg);
  --ss-bubble-bot-text: var(--ss-text-1);
}

/* ===== Design Tokens — DARK ===== */
.ss-fab[data-theme="dark"],
.ss-panel[data-theme="dark"]{
  --ss-primary-1:#8B7CFA;
  --ss-primary-2:#A78BFA;
  --ss-primary-3:#C4B5FD;
  --ss-grad: linear-gradient(135deg, var(--ss-primary-1) 0%, var(--ss-primary-2) 55%, var(--ss-primary-3) 100%);
  --ss-grad-soft: linear-gradient(135deg, rgba(139,124,250,0.20) 0%, rgba(167,139,250,0.10) 100%);
  --ss-bg:#15151F;
  --ss-surface:#1E1E2C;
  --ss-border: rgba(255,255,255,0.09);
  --ss-text-1:#F2F2F7;
  --ss-text-2:#A6A8BF;
  --ss-text-3:#6D6F87;
  --ss-success:#34D399;
  --ss-success-bg:rgba(52,211,153,0.14);
  --ss-warning:#FBBF24;
  --ss-warning-bg:rgba(251,191,36,0.14);
  --ss-danger:#F87171;
  --ss-danger-bg:rgba(248,113,113,0.14);
  --ss-shadow-sm: 0 2px 10px rgba(0,0,0,0.25);
  --ss-shadow-md: 0 8px 26px rgba(0,0,0,0.35);
  --ss-shadow-lg: 0 20px 60px rgba(0,0,0,0.55);
  --ss-shadow-fab: 0 10px 30px rgba(139,124,250,0.35);
  --ss-bubble-bot-bg:#292938;
  --ss-bubble-bot-text: var(--ss-text-1);
  color-scheme: dark;
}

/* ===== Scoped Reset (widget only — never global) ===== */
.ss-fab,
.ss-fab *,
.ss-panel,
.ss-panel *{
  box-sizing:border-box;
}
.ss-panel{
  font-family: 'Vazirmatn', -apple-system, sans-serif;
  direction: rtl;
}
.ss-panel *{
  margin:0; padding:0;
}
.ss-panel button,
.ss-panel input,
.ss-panel textarea,
.ss-panel select{
  font-family: inherit;
}

/* Scroll lock protector — never block WP page scroll */
html,
body{
  overflow-y: auto !important;
}

/* ===================================================== */
/* Floating Action Button                                 */
/* ===================================================== */
.ss-fab{
  position:fixed; bottom:90px; left:28px; z-index:9999;
  width:64px; height:64px; border-radius:50%;
  background: var(--ss-grad);
  box-shadow: var(--ss-shadow-fab);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; border:none;
  transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease, bottom .3s ease, width .3s ease, height .3s ease, left .3s ease;
}
.ss-fab:hover{ transform: scale(1.07) translateY(-2px); }
.ss-fab:active{ transform: scale(0.96); }
.ss-fab svg{ width:26px; height:26px; transition: transform .3s ease, opacity .2s ease; }
.ss-fab .ss-fab-icon-close{ position:absolute; opacity:0; transform: rotate(-90deg) scale(0.6); }
.ss-fab.open .ss-fab-icon-chat{ opacity:0; transform: rotate(90deg) scale(0.6); }
.ss-fab.open .ss-fab-icon-close{ opacity:1; transform: rotate(0) scale(1); }

/* وقتی پنل باز است، دکمه شناور کوچک‌تر شده و به زیر پنل (نزدیک لبه پایین صفحه) منتقل می‌شود
   تا دیگر روی نوار ورودی پیام یا دکمه‌های داخل پنل نیفتد */
.ss-fab.open{
  width:42px !important; height:42px !important;
  bottom:16px !important;
}
.ss-fab.open svg{ width:17px !important; height:17px !important; }

.ss-fab-badge{
  position:absolute; top:-4px; right:-4px;
  min-width:22px; height:22px; padding:0 5px;
  background: var(--ss-danger); color:#fff;
  border-radius:50%; border:3px solid var(--ss-bg);
  font-size:11px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  animation: ss-pop .3s cubic-bezier(.34,1.56,.64,1);
}
@keyframes ss-pop{ from{ transform:scale(0);} to{ transform:scale(1);} }

.ss-fab-pulse{
  position:absolute; inset:0; border-radius:50%;
  background: var(--ss-primary-2);
  animation: ss-pulse 2.4s ease-out infinite;
  z-index:-1;
}
@keyframes ss-pulse{
  0%{ transform:scale(1); opacity:.55; }
  100%{ transform:scale(1.9); opacity:0; }
}

/* ===================================================== */
/* Main Panel                                             */
/* ===================================================== */
.ss-panel{
  position:fixed; bottom:166px; left:28px; z-index:9998;
  width:380px; height:600px; max-height:calc(100vh - 140px);
  background: var(--ss-surface);
  border-radius: var(--ss-radius-xl);
  box-shadow: var(--ss-shadow-lg);
  border:1px solid var(--ss-border);
  display:flex; flex-direction:column;
  overflow:hidden;
  transform-origin: bottom left;
  transform: scale(0.92) translateY(16px);
  opacity:0; pointer-events:none;
  transition: transform .32s cubic-bezier(.2,.9,.25,1.15), opacity .24s ease, background .3s ease;
}
.ss-panel.open{
  transform: scale(1) translateY(0);
  opacity:1; pointer-events:auto;
}

/* Click-outside overlay (transparent, behind panel) */
.ss-backdrop{
  position:fixed; inset:0; z-index:9997;
  display:none;
}
.ss-backdrop.show{ display:block; }

/* ---- Header ---- */
.ss-header{
  background: var(--ss-grad);
  padding:20px 20px 44px;
  position:relative;
  color:#fff;
  flex-shrink:0;
}
.ss-header::after{
  content:'';
  position:absolute; inset:0;
  background: radial-gradient(circle at 85% -10%, rgba(255,255,255,0.25), transparent 55%);
  pointer-events:none;
}
.ss-header-top{ display:flex; align-items:center; justify-content:space-between; }
.ss-brand{ display:flex; align-items:center; gap:10px; }
.ss-brand-avatar{
  width:38px; height:38px; border-radius:50%;
  background: rgba(255,255,255,0.22);
  backdrop-filter: blur(6px);
  display:flex; align-items:center; justify-content:center;
  border:1.5px solid rgba(255,255,255,0.4);
  flex-shrink:0;
}
.ss-brand-avatar svg{ width:19px; height:19px; }
.ss-brand-name{ font-weight:700; font-size:15px; }

.ss-header-actions{ display:flex; align-items:center; gap:8px; }
.ss-icon-btn{
  width:32px; height:32px; border-radius:50%;
  background: rgba(255,255,255,0.16);
  border:none; color:#fff; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition: background .2s ease;
  flex-shrink:0;
}
.ss-icon-btn:hover{ background: rgba(255,255,255,0.28); }
.ss-icon-btn svg{ width:16px; height:16px; }
.ss-icon-btn .ss-icon-moon{ display:none; }
[data-theme="dark"] .ss-icon-btn .ss-icon-sun{ display:none; }
[data-theme="dark"] .ss-icon-btn .ss-icon-moon{ display:block; }

.ss-header-title{ margin-top:16px; font-size:20px; font-weight:800; line-height:1.4; }

/* ---- Tabs ---- */
.ss-tabs{
  display:flex; gap:4px;
  background: var(--ss-surface);
  padding:6px; margin:-26px 14px 0;
  border-radius: var(--ss-radius-md);
  box-shadow: var(--ss-shadow-md);
  position:relative; z-index:2;
  flex-shrink:0;
}
.ss-tab{
  flex:1; border:none; background:transparent; cursor:pointer;
  padding:9px 6px; border-radius: var(--ss-radius-sm);
  font-family: var(--ss-font); font-size:12.5px; font-weight:600;
  color: var(--ss-text-2);
  display:flex; flex-direction:column; align-items:center; gap:3px;
  transition: background .2s ease, color .2s ease;
}
.ss-tab svg{ width:17px; height:17px; }
.ss-tab.active{ background: var(--ss-grad-soft); color: var(--ss-primary-1); }

/* ---- Body (scrollable views) ---- */
.ss-body{ flex:1; min-height:0; position:relative; margin-top:14px; }
.ss-view{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  opacity:0; visibility:hidden; transform: translateY(6px);
  transition: opacity .2s ease, transform .2s ease;
}
.ss-view.active{ opacity:1; visibility:visible; transform:none; }

/* ===================================================== */
/* Chat View                                              */
/* ===================================================== */
.ss-chat-scroll{
  flex:1; overflow-y:auto; padding:16px 16px 6px;
  display:flex; flex-direction:column; gap:12px;
}
.ss-chat-scroll::-webkit-scrollbar{ width:5px; }
.ss-chat-scroll::-webkit-scrollbar-thumb{ background: var(--ss-border); border-radius:10px; }

.ss-day-divider{
  align-self:center; font-size:11px; color: var(--ss-text-3);
  background: var(--ss-bg); padding:3px 12px; border-radius: var(--ss-radius-pill);
  margin:4px 0;
}

/* Customer (user) => right side. Admin (bot/agent) => left side. */
.ss-msg-row{ display:flex; gap:8px; max-width:88%; animation: ss-msg-in .28s cubic-bezier(.2,.8,.3,1.1); }
@keyframes ss-msg-in{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:none;} }
.ss-msg-row.bot{ align-self:flex-start; flex-direction:row; }
.ss-msg-row.user{ align-self:flex-end; flex-direction:row-reverse; }

.ss-msg-avatar{
  width:26px; height:26px; border-radius:50%; flex-shrink:0;
  background: var(--ss-grad); display:flex; align-items:center; justify-content:center;
}
.ss-msg-avatar svg{ width:13px; height:13px; color:#fff; }

.ss-bubble{
  padding:10px 14px; border-radius: var(--ss-radius-md);
  font-size:13.5px; line-height:1.9;
}
.ss-msg-row.bot .ss-bubble{
  background: var(--ss-bubble-bot-bg); color: var(--ss-bubble-bot-text);
  border-bottom-left-radius:4px;
}
.ss-msg-row.user .ss-bubble{
  background: var(--ss-grad); color: var(--ss-bubble-user-text);
  border-bottom-right-radius:4px;
  box-shadow: 0 4px 14px rgba(109,93,246,0.3);
}
.ss-msg-time{ font-size:10.5px; color: var(--ss-text-3); margin-top:4px; }
.ss-msg-row.user .ss-msg-time{ text-align:left; }
.ss-msg-row.bot .ss-msg-time{ text-align:right; }

/* Typing indicator */
.ss-typing{
  display:inline-flex; gap:4px; padding:12px 14px;
  background: var(--ss-bubble-bot-bg); border-radius: var(--ss-radius-md); border-bottom-left-radius:4px;
}
.ss-typing span{
  width:6px; height:6px; border-radius:50%; background: var(--ss-primary-2);
  animation: ss-bounce 1.2s infinite ease-in-out;
}
.ss-typing span:nth-child(2){ animation-delay:.15s; }
.ss-typing span:nth-child(3){ animation-delay:.3s; }
@keyframes ss-bounce{ 0%,60%,100%{ transform:translateY(0); opacity:.5;} 30%{ transform:translateY(-5px); opacity:1;} }

/* Image message */
.ss-msg-image{
  max-width:200px; border-radius: var(--ss-radius-md); display:block;
  box-shadow: var(--ss-shadow-sm); cursor:pointer;
}
.ss-msg-row.user .ss-msg-image{ border-bottom-right-radius:4px; }
.ss-msg-row.bot .ss-msg-image{ border-bottom-left-radius:4px; }

/* Voice message bubble */
.ss-voice-bubble{
  display:flex; align-items:center; gap:10px;
  padding:9px 12px; border-radius: var(--ss-radius-md);
  min-width:180px;
}
.ss-msg-row.user .ss-voice-bubble{ background: var(--ss-grad); border-bottom-right-radius:4px; }
.ss-msg-row.bot .ss-voice-bubble{ background: var(--ss-bubble-bot-bg); border-bottom-left-radius:4px; }
.ss-voice-play{
  width:30px; height:30px; border-radius:50%; border:none; flex-shrink:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.ss-msg-row.user .ss-voice-play{ background: rgba(255,255,255,0.25); color:#fff; }
.ss-msg-row.bot .ss-voice-play{ background: var(--ss-grad-soft); color: var(--ss-primary-1); }
.ss-voice-play svg{ width:13px; height:13px; }
.ss-voice-wave{ flex:1; display:flex; align-items:center; gap:2px; height:22px; }
.ss-voice-wave span{ width:2.5px; border-radius:2px; background: currentColor; opacity:.6; }
.ss-msg-row.user .ss-voice-wave{ color:#fff; }
.ss-msg-row.bot .ss-voice-wave{ color: var(--ss-primary-2); }
.ss-voice-duration{ font-size:10.5px; flex-shrink:0; opacity:.85; }

/* Attachment preview row (before sending) */
.ss-attach-preview{
  display:none; align-items:center; gap:10px;
  padding:8px 14px; margin:0 14px; border-radius: var(--ss-radius-sm);
  background: var(--ss-grad-soft); border:1px solid var(--ss-border);
}
.ss-attach-preview.show{ display:flex; }
.ss-attach-preview img{ width:36px; height:36px; border-radius:8px; object-fit:cover; }
.ss-attach-preview .info{ flex:1; min-width:0; }
.ss-attach-preview .info .name{ font-size:11.5px; font-weight:600; color: var(--ss-text-1); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ss-attach-preview .info .size{ font-size:10.5px; color: var(--ss-text-3); }
.ss-attach-remove{
  width:22px; height:22px; border-radius:50%; border:none; background: var(--ss-surface);
  color: var(--ss-text-2); cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.ss-attach-remove svg{ width:11px; height:11px; }

/* Chat input */
.ss-chat-input{
  display:flex; align-items:flex-end; gap:6px;
  padding:12px 14px; border-top:1px solid var(--ss-border);
  background: var(--ss-surface); flex-shrink:0;
}
.ss-chat-input textarea{
  flex:1; resize:none; border:1.5px solid var(--ss-border); border-radius: var(--ss-radius-pill);
  padding:10px 16px; font-family: var(--ss-font); font-size:13px;
  max-height:80px; line-height:1.5; outline:none;
  transition: border-color .2s ease, background .2s ease, color .2s ease;
  background: var(--ss-bg); color: var(--ss-text-1);
}
.ss-chat-input textarea:focus{ border-color: var(--ss-primary-2); background: var(--ss-surface); }

.ss-attach-btn, .ss-mic-btn, .ss-send-btn{
  width:38px; height:38px; border-radius:50%; border:none; flex-shrink:0;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition: transform .15s ease, opacity .2s ease, background .2s ease;
}
.ss-attach-btn{ background: var(--ss-bg); color: var(--ss-text-2); }
.ss-attach-btn:hover{ background: var(--ss-grad-soft); color: var(--ss-primary-1); }
.ss-attach-btn svg{ width:17px; height:17px; }

.ss-mic-btn{ background: var(--ss-bg); color: var(--ss-text-2); }
.ss-mic-btn:hover{ background: var(--ss-grad-soft); color: var(--ss-primary-1); }
.ss-mic-btn.recording{ background: var(--ss-danger); color:#fff; animation: ss-rec-pulse 1.2s ease-in-out infinite; }
.ss-mic-btn svg{ width:17px; height:17px; }
@keyframes ss-rec-pulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(239,68,68,.5);} 50%{ box-shadow:0 0 0 7px rgba(239,68,68,0);} }

.ss-send-btn{ background: var(--ss-grad); color:#fff; }
.ss-send-btn:hover{ transform: scale(1.08); }
.ss-send-btn:active{ transform: scale(0.94); }
.ss-send-btn:disabled{ opacity:.4; cursor:not-allowed; transform:none; }
.ss-send-btn svg{ width:16px; height:16px; transform: scaleX(-1); }

/* Recording indicator bubble */
.ss-mic-wrap{ position:relative; flex-shrink:0; }
.ss-recording-indicator{
  position:absolute; bottom:46px; left:50%; transform:translateX(-50%) translateY(4px);
  background: var(--ss-text-1); color: var(--ss-surface);
  padding:6px 12px; border-radius: var(--ss-radius-pill);
  font-size:11px; font-weight:600; white-space:nowrap;
  display:none; align-items:center; gap:6px;
  opacity:0; transition: opacity .18s ease, transform .18s ease;
  pointer-events:none;
}
.ss-recording-indicator::after{
  content:''; position:absolute; top:100%; left:50%; transform:translateX(-50%);
  border:5px solid transparent; border-top-color: var(--ss-text-1);
}
.ss-recording-indicator.show{ display:flex; opacity:1; transform:translateX(-50%) translateY(0); }
.ss-recording-indicator .rdot{ width:6px; height:6px; border-radius:50%; background: var(--ss-danger); animation: ss-rec-pulse 1s infinite; flex-shrink:0; }

/* Recording bar (waveform) — replaces textarea while recording */
.ss-recording-bar{
  display:none; align-items:center; gap:10px; flex:1;
  padding:6px 8px 6px 14px; border-radius: var(--ss-radius-pill);
  background: var(--ss-danger-bg);
  font-size:12.5px; font-weight:600;
  overflow:hidden;
}
.ss-recording-bar.show{ display:flex; }
.ss-recording-dot{ width:8px; height:8px; border-radius:50%; background: var(--ss-danger); animation: ss-rec-pulse 1s infinite; flex-shrink:0; }
.ss-recording-time{ font-variant-numeric: tabular-nums; color: var(--ss-danger); flex-shrink:0; }
.ss-recording-wave{
  flex:1; height:26px; display:flex; align-items:center; gap:2px; overflow:hidden;
}
.ss-recording-wave span{
  width:2.5px; min-height:3px; border-radius:2px; background: var(--ss-danger); opacity:.75;
  transition: height .1s ease;
}
.ss-recording-cancel{
  flex-shrink:0; background:none; border:none; color: var(--ss-danger);
  font-family: var(--ss-font); font-size:11.5px; font-weight:700; cursor:pointer;
  padding:6px 8px;
}

/* ===================================================== */
/* Clear chat overlay                                     */
/* ===================================================== */
.ss-clear-overlay{
  position:absolute; inset:0; z-index:10;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(4px);
  display:none; align-items:center; justify-content:center;
  border-radius: var(--ss-radius-xl);
}
.ss-clear-overlay.show{ display:flex; }
.ss-clear-modal{
  background: var(--ss-surface);
  border-radius: var(--ss-radius-lg);
  padding:28px 24px; text-align:center;
  max-width:280px; box-shadow: var(--ss-shadow-lg);
  animation: ss-pop .25s cubic-bezier(.34,1.56,.64,1);
}
.ss-clear-icon{
  width:52px; height:52px; border-radius:50%; background: var(--ss-danger-bg);
  display:flex; align-items:center; justify-content:center; margin:0 auto 14px;
}
.ss-clear-icon svg{ width:24px; height:24px; color: var(--ss-danger); }
.ss-clear-modal h4{ font-size:14px; font-weight:700; color: var(--ss-text-1); margin-bottom:6px; }
.ss-clear-modal p{ font-size:12px; color: var(--ss-text-2); line-height:1.8; margin-bottom:16px; }
.ss-clear-actions{ display:flex; gap:10px; }
.ss-btn.danger{
  flex:1; padding:11px; border-radius: var(--ss-radius-pill); border:none; cursor:pointer;
  font-family: var(--ss-font); font-size:13px; font-weight:700;
  background: var(--ss-danger); color:#fff;
  box-shadow: 0 4px 12px rgba(239,68,68,0.3);
  transition: transform .15s ease;
}
.ss-btn.danger:hover{ transform: translateY(-1px); }

/* ===================================================== */
/* FAQ View                                               */
/* ===================================================== */
.ss-faq-wrap{ flex:1; display:flex; flex-direction:column; min-height:0; }
.ss-search{ margin:0 16px 12px; position:relative; flex-shrink:0; }
.ss-search svg{
  position:absolute; right:13px; top:50%; transform:translateY(-50%);
  width:15px; height:15px; color: var(--ss-text-3); pointer-events:none;
}
.ss-search input{
  width:100%; padding:10px 40px 10px 14px; border-radius: var(--ss-radius-pill);
  border:1.5px solid var(--ss-border); background: var(--ss-bg); color: var(--ss-text-1);
  font-family: var(--ss-font); font-size:13px; outline:none;
  transition: border-color .2s ease;
}
.ss-search input:focus{ border-color: var(--ss-primary-2); background:var(--ss-surface); }

.ss-faq-scroll{ flex:1; overflow-y:auto; padding:0 16px 16px; }
.ss-faq-scroll::-webkit-scrollbar{ width:5px; }
.ss-faq-scroll::-webkit-scrollbar-thumb{ background: var(--ss-border); border-radius:10px; }

.ss-faq-cat{
  font-size:11px; font-weight:700; color: var(--ss-primary-1);
  text-transform:uppercase; letter-spacing:.4px;
  margin:14px 4px 8px;
}
.ss-faq-cat:first-child{ margin-top:2px; }

.ss-accordion-item{
  border:1px solid var(--ss-border); border-radius: var(--ss-radius-sm);
  margin-bottom:8px; overflow:hidden; background: var(--ss-surface);
  transition: box-shadow .2s ease, border-color .2s ease;
}
.ss-accordion-item.open{ box-shadow: var(--ss-shadow-sm); border-color: rgba(109,93,246,0.25); }
.ss-accordion-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px; cursor:pointer; gap:10px;
}
.ss-accordion-head span.q{ font-size:12.5px; font-weight:600; color: var(--ss-text-1); line-height:1.6; }
.ss-accordion-head svg{
  width:14px; height:14px; color: var(--ss-primary-1); flex-shrink:0;
  transition: transform .25s ease;
}
.ss-accordion-item.open .ss-accordion-head svg{ transform: rotate(180deg); }
.ss-accordion-body{ max-height:0; overflow:hidden; transition: max-height .28s ease; }
.ss-accordion-body-inner{ padding:0 14px 14px; font-size:12.5px; color: var(--ss-text-2); line-height:2; }

/* ===================================================== */
/* Tickets View — Landing (2 big buttons)                 */
/* ===================================================== */
.ss-tickets-landing{
  flex:1; display:flex; flex-direction:column; justify-content:center;
  gap:14px; padding:20px 20px 32px;
}
.ss-tickets-landing-header{ text-align:center; margin-bottom:8px; }
.ss-tickets-landing-header .icon{
  width:56px; height:56px; border-radius:50%; background: var(--ss-grad-soft);
  display:flex; align-items:center; justify-content:center; margin:0 auto 12px;
}
.ss-tickets-landing-header .icon svg{ width:26px; height:26px; color: var(--ss-primary-1); }
.ss-tickets-landing-header h4{ font-size:14.5px; font-weight:700; margin-bottom:4px; }
.ss-tickets-landing-header p{ font-size:12px; color: var(--ss-text-2); line-height:1.8; }

.ss-big-btn{
  display:flex; align-items:center; gap:14px;
  width:100%; padding:16px 18px; border-radius: var(--ss-radius-lg);
  border:1.5px solid var(--ss-border); cursor:pointer;
  font-family: var(--ss-font); text-align:right;
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
  background: var(--ss-surface);
}
.ss-big-btn:hover{ transform: translateY(-2px); box-shadow: var(--ss-shadow-md); }
.ss-big-btn.primary{ background: var(--ss-grad); border-color:transparent; }
.ss-big-btn .ss-big-btn-icon{
  width:42px; height:42px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.ss-big-btn.primary .ss-big-btn-icon{ background: rgba(255,255,255,0.22); }
.ss-big-btn:not(.primary) .ss-big-btn-icon{ background: var(--ss-grad-soft); }
.ss-big-btn .ss-big-btn-icon svg{ width:19px; height:19px; }
.ss-big-btn.primary .ss-big-btn-icon svg{ color:#fff; }
.ss-big-btn:not(.primary) .ss-big-btn-icon svg{ color: var(--ss-primary-1); }
.ss-big-btn-text{ flex:1; }
.ss-big-btn-title{ font-size:13.5px; font-weight:700; }
.ss-big-btn.primary .ss-big-btn-title{ color:#fff; }
.ss-big-btn:not(.primary) .ss-big-btn-title{ color: var(--ss-text-1); }
.ss-big-btn-desc{ font-size:11px; margin-top:2px; }
.ss-big-btn.primary .ss-big-btn-desc{ color: rgba(255,255,255,0.85); }
.ss-big-btn:not(.primary) .ss-big-btn-desc{ color: var(--ss-text-2); }
.ss-big-btn-chevron{ flex-shrink:0; }
.ss-big-btn-chevron svg{ width:14px; height:14px; }
.ss-big-btn.primary .ss-big-btn-chevron svg{ color: rgba(255,255,255,0.85); }
.ss-big-btn:not(.primary) .ss-big-btn-chevron svg{ color: var(--ss-text-3); }

/* ===================================================== */
/* Tickets — Sub views (forms, lookup, list, detail)       */
/* ===================================================== */
.ss-subview{ flex:1; display:flex; flex-direction:column; min-height:0; }
.ss-subview-head{ display:flex; align-items:center; gap:10px; padding:0 16px 14px; flex-shrink:0; }
.ss-back-btn{
  width:30px; height:30px; border-radius:50%; border:1px solid var(--ss-border);
  background: var(--ss-surface); cursor:pointer; display:flex; align-items:center; justify-content:center;
  flex-shrink:0; transition: background .2s ease; color: var(--ss-text-1);
}
.ss-back-btn:hover{ background: var(--ss-bg); }
.ss-back-btn svg{ width:14px; height:14px; transform: scaleX(-1); }
.ss-subview-title{ font-size:13.5px; font-weight:700; }

.ss-form-scroll{ flex:1; overflow-y:auto; padding:2px 16px 16px; }
.ss-form-scroll::-webkit-scrollbar{ width:5px; }
.ss-form-scroll::-webkit-scrollbar-thumb{ background: var(--ss-border); border-radius:10px; }

.ss-step-dots{ display:flex; gap:6px; justify-content:center; margin-bottom:16px; }
.ss-step-dots span{ width:20px; height:4px; border-radius:2px; background: var(--ss-border); transition: background .2s ease, width .2s ease; }
.ss-step-dots span.active{ background: var(--ss-grad); width:28px; }

.ss-field{ margin-bottom:14px; }
.ss-field label{ display:block; font-size:12px; font-weight:600; color: var(--ss-text-2); margin-bottom:6px; }
.ss-field input[type="text"],
.ss-field input[type="tel"],
.ss-field textarea,
.ss-field select{
  width:100%; padding:11px 14px; border-radius: var(--ss-radius-sm);
  border:1.5px solid var(--ss-border); background: var(--ss-bg); color: var(--ss-text-1);
  font-family: var(--ss-font); font-size:13px; outline:none;
  transition: border-color .2s ease, background .2s ease;
}
.ss-field input:focus, .ss-field textarea:focus, .ss-field select:focus{
  border-color: var(--ss-primary-2); background: var(--ss-surface);
}
.ss-field textarea{ resize:vertical; min-height:80px; line-height:1.7; }
.ss-field select{ cursor:pointer; }

.ss-form-error{
  background: var(--ss-danger-bg); color: var(--ss-danger);
  font-size:11px; font-weight:600; padding:8px 12px; border-radius:9px;
  margin-bottom:10px; line-height:1.7;
}

.ss-file-drop{
  border:1.5px dashed var(--ss-border); border-radius: var(--ss-radius-sm);
  padding:16px; text-align:center; cursor:pointer;
  transition: border-color .2s ease, background .2s ease;
  background: var(--ss-bg);
}
.ss-file-drop:hover{ border-color: var(--ss-primary-2); background: var(--ss-grad-soft); }
.ss-file-drop svg{ width:20px; height:20px; color: var(--ss-primary-1); margin-bottom:6px; }
.ss-file-drop p{ font-size:12px; color: var(--ss-text-2); }
.ss-file-drop p.hint{ font-size:10.5px; color: var(--ss-text-3); margin-top:3px; }
.ss-file-chip{
  display:flex; align-items:center; gap:8px; margin-top:8px;
  padding:7px 12px; border-radius: var(--ss-radius-sm); background: var(--ss-grad-soft);
  font-size:11.5px; color: var(--ss-primary-1); font-weight:600;
}
.ss-file-chip svg{ width:13px; height:13px; flex-shrink:0; }
.ss-file-chip .fname{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ss-file-chip button{ background:none; border:none; cursor:pointer; color: var(--ss-primary-1); display:flex; }
.ss-file-chip button svg{ width:12px; height:12px; }

.ss-form-actions{ display:flex; gap:10px; margin-top:6px; }
.ss-btn{
  flex:1; padding:12px; border-radius: var(--ss-radius-pill); border:none; cursor:pointer;
  font-family: var(--ss-font); font-size:13px; font-weight:700;
  transition: transform .15s ease, opacity .2s ease;
}
.ss-btn:hover{ transform: translateY(-1px); }
.ss-btn.primary{ background: var(--ss-grad); color:#fff; box-shadow: 0 6px 16px rgba(109,93,246,0.32); }
.ss-btn.secondary{ background: var(--ss-bg); color: var(--ss-text-2); }
.ss-btn:disabled{ opacity:.5; cursor:not-allowed; transform:none; }

.ss-success-box{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:20px 24px; gap:10px;
}
.ss-success-box .icon{
  width:64px; height:64px; border-radius:50%; background: var(--ss-success-bg);
  display:flex; align-items:center; justify-content:center; margin-bottom:6px;
}
.ss-success-box .icon svg{ width:30px; height:30px; color: var(--ss-success); }
.ss-success-box h4{ font-size:15px; font-weight:700; }
.ss-success-box p{ font-size:12.5px; color: var(--ss-text-2); line-height:1.8; max-width:240px; }
.ss-tracking-code-badge{
  display:inline-block; background: var(--ss-grad-soft); color: var(--ss-primary-1);
  font-weight:800; font-size:15px; letter-spacing:.5px; padding:8px 18px;
  border-radius: var(--ss-radius-pill); margin:8px 0; direction:ltr;
}

/* Ticket list (after lookup) */
.ss-tickets-scroll{ flex:1; overflow-y:auto; padding:0 16px 16px; display:flex; flex-direction:column; gap:10px; }
.ss-tickets-scroll::-webkit-scrollbar{ width:5px; }
.ss-tickets-scroll::-webkit-scrollbar-thumb{ background: var(--ss-border); border-radius:10px; }

.ss-ticket-card{
  border:1px solid var(--ss-border); border-radius: var(--ss-radius-md);
  padding:13px 14px; cursor:pointer; background: var(--ss-surface);
  transition: box-shadow .2s ease, border-color .2s ease, transform .15s ease;
}
.ss-ticket-card:hover{ box-shadow: var(--ss-shadow-sm); border-color: rgba(109,93,246,0.25); transform: translateY(-1px); }
.ss-ticket-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.ss-ticket-id{ font-size:11px; color: var(--ss-text-3); font-weight:600; }
.ss-badge{
  font-size:10.5px; font-weight:700; padding:3px 9px; border-radius: var(--ss-radius-pill);
  display:inline-flex; align-items:center; gap:4px;
}
.ss-badge::before{ content:''; width:6px; height:6px; border-radius:50%; }
.ss-badge.open{ background: var(--ss-warning-bg); color:#B45309; }
[data-theme="dark"] .ss-badge.open{ color: var(--ss-warning); }
.ss-badge.open::before{ background: var(--ss-warning); }
.ss-badge.replied{ background: var(--ss-success-bg); color:#15803D; }
[data-theme="dark"] .ss-badge.replied{ color: var(--ss-success); }
.ss-badge.replied::before{ background: var(--ss-success); }
.ss-badge.user_replied{ background: var(--ss-grad-soft); color: var(--ss-primary-1); }
.ss-badge.user_replied::before{ background: var(--ss-primary-1); }
.ss-badge.closed{ background: var(--ss-bg); color: var(--ss-text-2); }
.ss-badge.closed::before{ background: var(--ss-text-3); }

.ss-ticket-subject{ font-size:13px; font-weight:700; color: var(--ss-text-1); margin-bottom:4px; }
.ss-ticket-preview{ font-size:12px; color: var(--ss-text-2); line-height:1.7; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ss-ticket-meta{ display:flex; align-items:center; gap:6px; margin-top:8px; font-size:10.5px; color: var(--ss-text-3); }
.ss-ticket-meta svg{ width:11px; height:11px; }

.ss-detail-scroll{ flex:1; overflow-y:auto; padding:4px 16px 12px; display:flex; flex-direction:column; gap:12px; }
.ss-detail-scroll::-webkit-scrollbar{ width:5px; }
.ss-detail-scroll::-webkit-scrollbar-thumb{ background: var(--ss-border); border-radius:10px; }

/* Empty states */
.ss-empty{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:30px 24px; gap:10px;
}
.ss-empty-icon{
  width:56px; height:56px; border-radius:50%; background: var(--ss-grad-soft);
  display:flex; align-items:center; justify-content:center; margin-bottom:4px;
}
.ss-empty-icon svg{ width:26px; height:26px; color: var(--ss-primary-1); }
.ss-empty h4{ font-size:13.5px; font-weight:700; color: var(--ss-text-1); }
.ss-empty p{ font-size:12px; color: var(--ss-text-2); line-height:1.8; max-width:220px; }

/* ===================================================== */
/* Mobile                                                 */
/* ===================================================== */
@media (max-width:480px){
  .ss-panel{ left:12px; right:12px; width:auto; bottom:96px; height:calc(100vh - 140px); }
  .ss-fab{ left:16px; bottom:120px; }
  .ss-fab.open{ bottom:12px !important; left:12px !important; }
}

/* ===================================================== */
/* Reduced Motion + Accessibility                         */
/* ===================================================== */
@media (prefers-reduced-motion: reduce){
  .ss-fab, .ss-fab *, .ss-panel, .ss-panel *{ animation-duration:.001s !important; transition-duration:.001s !important; }
}

.ss-panel button:focus-visible,
.ss-panel input:focus-visible,
.ss-panel textarea:focus-visible,
.ss-panel select:focus-visible,
.ss-fab:focus-visible{
  outline:2px solid var(--ss-primary-1); outline-offset:2px;
}

/* ===== Pre-chat form (نام و شماره تماس قبل شروع) ===== */
.ss-prechat-form{
  flex:1; display:flex; align-items:center; justify-content:center;
  padding:20px;
}
.ss-prechat-inner{
  text-align:center; width:100%; max-width:260px;
}
.ss-prechat-icon{
  width:56px; height:56px; border-radius:50%;
  background: var(--ss-grad-soft);
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 14px;
}
.ss-prechat-icon svg{ width:26px; height:26px; color: var(--ss-primary-1); }
.ss-prechat-inner h4{
  font-size:13.5px; font-weight:700; color: var(--ss-text-1);
  margin-bottom:16px; line-height:1.8;
}
.ss-prechat-inner .ss-field{ margin-bottom:10px; }
.ss-prechat-inner .ss-field input{
  width:100%; padding:11px 14px; border-radius: var(--ss-radius-sm);
  border:1.5px solid var(--ss-border); background: var(--ss-bg);
  color: var(--ss-text-1); font-family: var(--ss-font); font-size:13px;
  outline:none; transition: border-color .2s ease;
  text-align:center;
}
.ss-prechat-inner .ss-field input:focus{
  border-color: var(--ss-primary-2); background: var(--ss-surface);
}
.ss-prechat-inner .ss-btn{
  width:100%; margin-top:6px;
}

/* ===== تیک ارسال / سین (Telegram-style) ===== */
.ss-tick{
  font-size:11px; font-weight:700; margin-right:4px;
  color: rgba(255,255,255,0.5); letter-spacing:-1px;
}
.ss-tick.ss-tick-read{
  color: #34D399; /* سبز = خوانده‌شده */
}