.support-hero {
    position: relative;
    overflow: hidden;
    border: 0;
    border-radius: 20px;
    background: linear-gradient(135deg, rgb(var(--primary-rgb)) 0%, #6347db 60%, #8b5cf6 100%);
    color: #fff;
    box-shadow: 0 18px 45px rgba(var(--primary-rgb), .2);
}

.support-hero::after {
    content: "";
    position: absolute;
    width: 280px;
    height: 280px;
    inset-inline-end: -80px;
    top: -130px;
    border-radius: 50%;
    background: rgba(255,255,255,.11);
}

.support-hero .card-body { position: relative; z-index: 1; padding: 1.6rem; }
.support-hero h4, .support-hero p { color: #fff; }
.support-hero p { opacity: .82; max-width: 620px; }
.support-hero-actions { display: flex; flex-wrap: wrap; gap: .65rem; }
.support-hero .btn-light { color: rgb(var(--primary-rgb)); border: 0; }
.support-availability { display: inline-flex; align-items: center; gap: .45rem; padding: .42rem .7rem; border-radius: 30px; background: rgba(255,255,255,.13); font-size: .75rem; }
.support-availability i { width: 8px; height: 8px; border-radius: 50%; background: #5df59a; box-shadow: 0 0 0 4px rgba(93,245,154,.18); }
.support-availability.off i { background: #f7b731; box-shadow: 0 0 0 4px rgba(247,183,49,.18); }

.support-stat-card { border: 0; border-radius: 16px; transition: transform .18s ease, box-shadow .18s ease; }
.support-stat-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(15,23,42,.08); }
.support-stat-icon { display: grid; place-items: center; width: 45px; height: 45px; border-radius: 14px; font-size: 1.25rem; }

.support-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem; }
/* کنترل‌های تلریک با TelerikRootComponent پیش‌فرض dir="ltr" رندر می‌شوند — اینجا RTL می‌شوند */
.support-toolbar .k-input-inner,
.support-toolbar .k-picker,
.ticket-create-modal .k-input-inner,
.ticket-create-modal .k-picker,
.ticket-composer .k-input-inner { direction: rtl; }
.support-search { position: relative; min-width: min(100%, 290px); flex: 1; }
.support-search i { position: absolute; inset-inline-start: 13px; top: 50%; transform: translateY(-50%); color: var(--text-muted); }
.support-search input { padding-inline-start: 2.45rem; border-radius: 12px; }
.support-filter { min-width: 150px; border-radius: 12px; }

.ticket-row { cursor: pointer; transition: background .15s ease; }
.ticket-row.unread td:first-child { box-shadow: inset -3px 0 rgb(var(--primary-rgb)); }
.ticket-row.unread .ticket-title { font-weight: 700; }
.ticket-title { color: var(--default-text-color); }
.ticket-preview { max-width: 430px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--text-muted); font-size: .75rem; }
.ticket-number { direction: ltr; display: inline-block; color: var(--text-muted); font-size: .72rem; }
.ticket-unread-dot { display: inline-block; width: 7px; height: 7px; margin-inline-start: .4rem; border-radius: 50%; background: rgb(var(--primary-rgb)); box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .13); }

.support-empty { padding: 4rem 1rem; text-align: center; }
.support-empty-icon { display: grid; place-items: center; width: 72px; height: 72px; margin: 0 auto 1rem; border-radius: 24px; background: rgba(var(--primary-rgb), .09); color: rgb(var(--primary-rgb)); font-size: 2rem; }

.ticket-create-modal .mahfel-modal-content { max-width: 680px; background: var(--custom-white); color: var(--default-text-color); border-color: var(--default-border); }
.ticket-create-modal .mahfel-form-group input,
.ticket-create-modal .mahfel-form-group select,
.ticket-create-modal .mahfel-form-group textarea { background: var(--form-control-bg); color: var(--default-text-color); border-color: var(--input-border); }
.ticket-create-modal textarea { min-height: 135px; resize: vertical; }
.ticket-priority-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; }
.ticket-priority { padding: .7rem .45rem; border: 1px solid var(--default-border); border-radius: 12px; background: transparent; color: var(--default-text-color); font: inherit; font-size: .78rem; transition: .15s ease; }
.ticket-priority.active { border-color: rgb(var(--primary-rgb)); background: rgba(var(--primary-rgb), .09); color: rgb(var(--primary-rgb)); font-weight: 600; }
.ticket-dropzone { display: flex; align-items: center; justify-content: center; gap: .65rem; min-height: 74px; padding: .8rem; border: 1.5px dashed var(--default-border); border-radius: 14px; color: var(--text-muted); cursor: pointer; transition: .15s ease; }
.ticket-dropzone:hover { border-color: rgb(var(--primary-rgb)); color: rgb(var(--primary-rgb)); background: rgba(var(--primary-rgb), .035); }
.ticket-file-list { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .6rem; }
.ticket-file-chip { display: inline-flex; align-items: center; gap: .35rem; max-width: 100%; padding: .38rem .6rem; border-radius: 9px; background: rgba(var(--primary-rgb), .07); color: rgb(var(--primary-rgb)); font-size: .72rem; }
.ticket-file-chip span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ticket-file-chip button { padding: 0; border: 0; background: none; color: inherit; }

.ticket-shell { display: grid; grid-template-columns: minmax(0, 1fr) 285px; gap: 1.25rem; align-items: start; }
.ticket-conversation { overflow: hidden; border-radius: 18px; }
.ticket-conversation .card-header { min-height: 75px; }
.ticket-head-avatar { display: grid; place-items: center; width: 43px; height: 43px; flex: 0 0 auto; border-radius: 14px; background: rgba(var(--primary-rgb), .1); color: rgb(var(--primary-rgb)); font-size: 1.2rem; }
.ticket-messages { min-height: 390px; max-height: calc(100vh - 390px); overflow-y: auto; padding: 1.35rem; background: linear-gradient(180deg, rgba(var(--primary-rgb), .025), transparent 180px); }
.ticket-message { display: flex; gap: .7rem; margin-bottom: 1.1rem; }
.ticket-message.mine { flex-direction: row-reverse; }
.ticket-message-avatar { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 auto; border-radius: 11px; background: rgba(var(--primary-rgb), .1); color: rgb(var(--primary-rgb)); font-size: .85rem; }
.ticket-message.staff .ticket-message-avatar { background: rgba(var(--success-rgb), .11); color: rgb(var(--success-rgb)); }
.ticket-message-content { max-width: min(78%, 650px); }
.ticket-message-meta { display: flex; align-items: center; gap: .55rem; margin-bottom: .3rem; color: var(--text-muted); font-size: .68rem; }
.ticket-message.mine .ticket-message-meta { justify-content: flex-end; }
.ticket-bubble { padding: .8rem 1rem; border: 1px solid var(--default-border); border-radius: 4px 15px 15px 15px; background: var(--custom-white); color: var(--default-text-color); line-height: 1.9; white-space: pre-wrap; overflow-wrap: anywhere; }
.ticket-message.mine .ticket-bubble { border-color: transparent; border-radius: 15px 4px 15px 15px; background: rgb(var(--primary-rgb)); color: #fff; }
.ticket-attachments { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .6rem; }
.ticket-attachment { display: inline-flex; align-items: center; gap: .45rem; max-width: 250px; padding: .5rem .65rem; border: 1px solid var(--default-border); border-radius: 10px; background: var(--custom-white); color: var(--default-text-color); font-size: .72rem; }
.ticket-attachment:hover { color: rgb(var(--primary-rgb)); }
.ticket-attachment img { width: 42px; height: 42px; border-radius: 7px; object-fit: cover; }
.ticket-composer { padding: 1rem; border-top: 1px solid var(--default-border); background: var(--custom-white); }
.ticket-composer textarea { min-height: 62px; max-height: 150px; resize: vertical; border-radius: 13px; }
.ticket-composer-actions { display: flex; align-items: center; justify-content: space-between; gap: .65rem; margin-top: .65rem; }
.ticket-closed-banner { padding: 1rem; border-top: 1px solid var(--default-border); text-align: center; background: rgba(var(--secondary-rgb), .05); }
.ticket-side-card { border-radius: 16px; }
.ticket-detail-list { display: grid; gap: 1rem; }
.ticket-detail-item small { display: block; margin-bottom: .3rem; color: var(--text-muted); }
.ticket-detail-item strong { color: var(--default-text-color); font-size: .82rem; }
.ticket-rating { display: flex; justify-content: center; gap: .35rem; direction: ltr; }
.ticket-rating button { border: 0; background: transparent; color: #d6d9df; font-size: 1.55rem; transition: transform .15s, color .15s; }
.ticket-rating button:hover, .ticket-rating button.active { color: #f7b731; transform: scale(1.12); }

/* ── چت زندهٔ پشتیبانی (سمت کارشناس) ── */
.support-view-tabs { display: flex; gap: .5rem; }
.support-view-tabs button {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .55rem 1.1rem; border: 1px solid var(--default-border); border-radius: 12px;
    background: var(--custom-white); color: var(--text-muted); font: inherit; font-size: .82rem;
    transition: .15s ease;
}
.support-view-tabs button:hover { color: var(--default-text-color); }
.support-view-tabs button.active {
    border-color: rgb(var(--primary-rgb)); background: rgba(var(--primary-rgb), .08);
    color: rgb(var(--primary-rgb)); font-weight: 700;
}
.support-live-badge {
    min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px;
    background: rgb(var(--danger-rgb)); color: #fff;
    font-size: .65rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center;
}

.livechat-grid { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.livechat-list { overflow: hidden; }
.livechat-sessions { max-height: 560px; overflow-y: auto; }
.livechat-item {
    display: flex; align-items: center; gap: .7rem; width: 100%; padding: .75rem .9rem;
    border: 0; border-bottom: 1px solid var(--default-border);
    background: transparent; color: var(--default-text-color); font: inherit; text-align: start;
    transition: background .12s;
}
.livechat-item:hover { background: var(--list-hover-focus-bg, rgba(var(--primary-rgb), .04)); }
.livechat-item.active { background: rgba(var(--primary-rgb), .07); box-shadow: inset -3px 0 rgb(var(--primary-rgb)); }
.livechat-av {
    display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 auto;
    border-radius: 12px; background: rgba(var(--primary-rgb), .1); color: rgb(var(--primary-rgb)); font-size: 1.05rem;
}
.livechat-av.guest { background: rgba(var(--info-rgb), .12); color: rgb(var(--info-rgb)); }
.livechat-item-tx { flex: 1; min-width: 0; }
.livechat-item-tx b { display: flex; align-items: center; gap: .4rem; font-size: .8rem; }
.livechat-item-tx small {
    display: block; margin-top: .2rem; color: var(--text-muted); font-size: .7rem;
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.livechat-item.unread .livechat-item-tx b { color: rgb(var(--primary-rgb)); }
.livechat-item-side { display: flex; flex-direction: column; align-items: flex-end; gap: .3rem; flex-shrink: 0; }
.livechat-item-side small { color: var(--text-muted); font-size: .63rem; }
.livechat-dot { width: 8px; height: 8px; border-radius: 50%; background: rgb(var(--danger-rgb)); box-shadow: 0 0 0 3px rgba(var(--danger-rgb), .14); }

.livechat-room { overflow: hidden; }
.livechat-messages { min-height: 420px; max-height: calc(100vh - 330px); }
.ticket-message.bot .ticket-message-avatar { background: rgba(var(--warning-rgb), .13); color: rgb(var(--warning-rgb)); }
.ticket-message.bot .ticket-bubble { border-style: dashed; }

/* ── چت زندهٔ کاربر داخل مرکز پشتیبانی (SupportUserChat) ── */
.uchat-card { overflow: hidden; }
.uchat-messages { min-height: 380px; max-height: calc(100vh - 320px); }
.uchat-faq {
    align-self: stretch; display: flex; flex-direction: column; gap: .45rem;
    background: var(--custom-white); border: 1px solid var(--default-border); border-radius: 14px; padding: .7rem;
}
.uchat-faq-head { display: flex; align-items: center; justify-content: space-between; font-size: .72rem; font-weight: 700; color: var(--text-muted); padding: 0 .15rem; }
.uchat-faq-head button { border: 0; background: none; color: inherit; padding: 0; font-size: .95rem; }
.uchat-faq-btn {
    border: 0; border-radius: 10px; padding: .55rem .75rem; text-align: start; font: inherit; font-size: .78rem; font-weight: 600;
    background: rgba(var(--primary-rgb), .09); color: rgb(var(--primary-rgb)); transition: background .15s;
}
.uchat-faq-btn:hover { background: rgba(var(--primary-rgb), .17); }
.uchat-typing { display: inline-flex; gap: 4px; padding: .35rem .2rem; }
.uchat-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--text-muted); animation: spBlink 1.2s infinite ease-in-out; }
.uchat-typing i:nth-child(2) { animation-delay: .15s; }
.uchat-typing i:nth-child(3) { animation-delay: .3s; }
.ticket-message.local .ticket-bubble { opacity: .95; }

/* ── فهرست تیکت با گرید تلریک ── */
.ticket-grid { border: 0; border-radius: 0; font-family: inherit; }
.ticket-grid .k-grid-header { background: var(--default-background); }
.ticket-grid .k-grid-header .k-header { font-weight: 600; font-size: .72rem; color: var(--text-muted); }
.ticket-grid .k-table-tbody .k-table-row { cursor: pointer; transition: background .12s; }
.ticket-grid .k-table-tbody .k-table-row:hover { background: rgba(var(--primary-rgb), .035); }
.ticket-grid td { vertical-align: middle; }
.ticket-grid .k-pager { background: var(--custom-white); border-top: 1px solid var(--default-border); }
.ticket-grid .k-pager-numbers .k-button.k-selected { background: rgb(var(--primary-rgb)); border-color: rgb(var(--primary-rgb)); color: #fff; }
.ticket-grid .k-button:hover { color: rgb(var(--primary-rgb)); }

@media (max-width: 991.98px) {
    .ticket-shell { grid-template-columns: 1fr; }
    .ticket-sidebar { order: -1; }
    .ticket-messages { max-height: 55vh; }
    .livechat-grid { grid-template-columns: 1fr; }
    .livechat-sessions { max-height: 260px; }
}

@media (max-width: 575.98px) {
    .support-hero .card-body { padding: 1.2rem; }
    .ticket-priority-grid { grid-template-columns: repeat(2, 1fr); }
    .ticket-message-content { max-width: 88%; }
    .ticket-messages { padding: .9rem; }
    .support-toolbar > * { width: 100%; }
    .ticket-create-modal .mahfel-modal-content { width: 96%; padding: 14px; }
}