/* ── Support Chat – Frontend (RTL/فارسی) ─────────────────────────────────── */
:root {
    --sc-primary:      #2563eb;
    --sc-primary-dark: #1d4ed8;
    --sc-bg:           #f9fafb;
    --sc-surface:      #ffffff;
    --sc-border:       #e5e7eb;
    --sc-text:         #111827;
    --sc-muted:        #6b7280;
    --sc-customer-bg:  #dbeafe;
    --sc-admin-bg:     #f3f4f6;
    --sc-error:        #dc2626;
    --sc-error-bg:     #fef2f2;
    --sc-radius:       14px;
    --sc-shadow:       0 4px 24px rgba(0,0,0,.10);
    --sc-font:         'Vazirmatn', 'Tahoma', system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

.sc-wrap {
    font-family: var(--sc-font);
    direction: rtl;
    color: var(--sc-text);
    background: var(--sc-surface);
    border: 1px solid var(--sc-border);
    border-radius: var(--sc-radius);
    box-shadow: var(--sc-shadow);
    max-width: 600px;
    margin: 2rem auto;
    overflow: hidden;
}

/* ── تب‌ها ────────────────────────────────────────────────────────────────── */
.sc-tabs {
    display: flex;
    border-bottom: 1px solid var(--sc-border);
    background: var(--sc-bg);
}
.sc-tab {
    flex: 1;
    padding: .8rem 1rem;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    font-size: .9rem;
    font-weight: 600;
    font-family: var(--sc-font);
    color: var(--sc-muted);
    transition: color .15s, border-color .15s;
}
.sc-tab:hover { color: var(--sc-primary); }
.sc-tab--active { color: var(--sc-primary); border-bottom-color: var(--sc-primary); }

/* ── پنل‌ها ────────────────────────────────────────────────────────────────── */
.sc-panel { display: none; padding: 1.75rem; }
.sc-panel--active { display: block; }
.sc-panel__title { font-size: 1.1rem; font-weight: 700; margin-bottom: 1.25rem; }

/* ── فرم ──────────────────────────────────────────────────────────────────── */
.sc-form-group { margin-bottom: 1.1rem; }
.sc-label { display: block; font-size: .875rem; font-weight: 600; margin-bottom: .4rem; }
.sc-label span { color: var(--sc-error); }
.sc-input {
    width: 100%;
    padding: .65rem .9rem;
    border: 1.5px solid var(--sc-border);
    border-radius: 10px;
    font-size: .95rem;
    font-family: var(--sc-font);
    background: var(--sc-surface);
    color: var(--sc-text);
    transition: border-color .15s, box-shadow .15s;
}
.sc-input:focus {
    outline: none;
    border-color: var(--sc-primary);
    box-shadow: 0 0 0 3px rgba(37,99,235,.15);
}
.sc-textarea { resize: vertical; min-height: 60px; flex: 1; }

/* ── دکمه‌ها ───────────────────────────────────────────────────────────────── */
.sc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    padding: .6rem 1.2rem;
    border: 1.5px solid transparent;
    border-radius: 10px;
    font-size: .9rem;
    font-weight: 600;
    font-family: var(--sc-font);
    cursor: pointer;
    transition: background .15s, box-shadow .15s, opacity .15s;
    white-space: nowrap;
    line-height: 1;
}
.sc-btn:disabled { opacity: .6; cursor: not-allowed; }
.sc-btn--primary { background: var(--sc-primary); color: #fff; }
.sc-btn--primary:hover:not(:disabled) { background: var(--sc-primary-dark); }
.sc-btn--ghost { background: transparent; border-color: var(--sc-border); color: var(--sc-muted); }
.sc-btn--ghost:hover { background: var(--sc-bg); }
.sc-btn--copy {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: var(--sc-primary);
    padding: .3rem .7rem;
    font-size: .8rem;
}
.sc-btn--copy:hover { background: #dbeafe; }
.sc-btn--icon {
    padding: .6rem .75rem;
    background: var(--sc-bg);
    border-color: var(--sc-border);
    color: var(--sc-muted);
    cursor: pointer;
}
.sc-btn--sm { padding: .3rem .6rem; font-size: .8rem; }
.sc-full-width { width: 100%; margin-top: .6rem; }

/* ── جعبه اعتبارنامه ──────────────────────────────────────────────────────── */
.sc-access-code-box {
    background: #fff7ed;
    border: 1.5px solid #fed7aa;
    border-radius: 12px;
    padding: 1.2rem 1.4rem;
    margin-bottom: 1.25rem;
}
.sc-access-code-box__intro {
    font-size: .875rem;
    color: #92400e;
    font-weight: 700;
    margin-bottom: .9rem;
    line-height: 1.6;
}
.sc-cred-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .7rem;
    flex-wrap: wrap;
}
.sc-cred-label { font-size: .82rem; color: var(--sc-muted); font-weight: 600; min-width: 110px; }
.sc-cred-value {
    font-family: 'Courier New', monospace;
    font-size: 1rem;
    background: #fff;
    padding: .25rem .6rem;
    border-radius: 6px;
    border: 1px solid #e5e7eb;
    letter-spacing: .08em;
    direction: ltr;
    flex: 1;
    min-width: 120px;
}

/* ── هدر چت ────────────────────────────────────────────────────────────────── */
.sc-wrap--chat {
    display: flex;
    flex-direction: column;
    height: min(620px, 85vh);
}
.sc-chat-header {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .9rem 1.2rem;
    background: var(--sc-primary);
    color: #fff;
    flex-shrink: 0;
}
.sc-chat-header__name { font-weight: 700; flex: 1; font-size: .95rem; }
.sc-chat-header__id { font-size: .75rem; opacity: .8; direction: ltr; }

/* ── پیام‌ها ────────────────────────────────────────────────────────────────── */
.sc-messages {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: .65rem;
    background: var(--sc-bg);
}
.sc-empty-state {
    text-align: center;
    color: var(--sc-muted);
    font-size: .875rem;
    margin: auto;
    padding: 2rem;
}
.sc-msg {
    max-width: 78%;
    padding: .65rem .9rem;
    border-radius: 14px;
    font-size: .9rem;
    line-height: 1.6;
    word-break: break-word;
}
.sc-msg--customer {
    align-self: flex-end;
    background: var(--sc-primary);
    color: #fff;
    border-bottom-left-radius: 4px;
}
.sc-msg--customer .sc-msg__who,
.sc-msg--customer .sc-msg__time { color: rgba(255,255,255,.75); }
.sc-msg--admin {
    align-self: flex-start;
    background: var(--sc-surface);
    border: 1px solid var(--sc-border);
    border-bottom-right-radius: 4px;
}
.sc-msg__meta {
    display: flex;
    gap: .4rem;
    align-items: baseline;
    margin-bottom: .25rem;
}
.sc-msg__who { font-size: .72rem; font-weight: 700; color: var(--sc-muted); }
.sc-msg__time { font-size: .68rem; color: var(--sc-muted); margin-right: auto; }

/* ── پیوست ──────────────────────────────────────────────────────────────────── */
.sc-attachment { margin-top: .4rem; }
.sc-attachment__link, .sc-attachment a {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .82rem;
    color: var(--sc-primary);
    text-decoration: none;
    direction: ltr;
}
.sc-msg--customer .sc-attachment__link { color: #bfdbfe; }
.sc-attachment__link:hover { text-decoration: underline; }

/* ── ناحیه ارسال ────────────────────────────────────────────────────────────── */
.sc-composer {
    padding: .8rem 1rem;
    border-top: 1px solid var(--sc-border);
    background: var(--sc-surface);
    flex-shrink: 0;
}
.sc-composer__row {
    display: flex;
    gap: .5rem;
    align-items: flex-end;
}
.sc-file-preview {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .6rem;
    background: #eff6ff;
    border-radius: 8px;
    font-size: .8rem;
    margin-bottom: .5rem;
}
.sc-file-preview__name { flex: 1; color: var(--sc-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: ltr; }

/* ── اعلان‌ها ────────────────────────────────────────────────────────────────── */
.sc-notice {
    padding: .65rem .9rem;
    border-radius: 10px;
    font-size: .875rem;
    margin-bottom: .75rem;
    line-height: 1.5;
}
.sc-notice--error { background: var(--sc-error-bg); color: var(--sc-error); border: 1px solid #fecaca; }

/* ── ریسپانسیو ──────────────────────────────────────────────────────────────── */
@media (max-width: 500px) {
    .sc-wrap { margin: .75rem; border-radius: 10px; }
    .sc-msg  { max-width: 90%; }
    .sc-cred-row { flex-direction: column; align-items: flex-start; }
    .sc-cred-value { width: 100%; }
}

/* ── Progress bar (chunked upload) ────────────────────────────────────────── */
.sc-upload-progress {
    padding: .4rem .85rem;
    background: #eff6ff;
    border-radius: 8px;
    font-size: .8rem;
    color: var(--sc-primary);
    font-weight: 600;
    margin-bottom: .4rem;
    text-align: center;
    animation: sc-pulse .8s ease-in-out infinite alternate;
}
@keyframes sc-pulse { from { opacity: .7; } to { opacity: 1; } }

/* ── subtitle in login panel ────────────────────────────────────────────── */
.sc-panel__sub {
    font-size: .85rem;
    color: var(--sc-muted);
    margin-bottom: 1rem;
    margin-top: -.5rem;
}
.sc-access-code-box__note {
    font-size: .82rem;
    color: #92400e;
    margin: .6rem 0 .9rem;
    line-height: 1.5;
}