/* ================================================================
   SUPPORT / TICKETS — "Trading Desk Daylight" (v2 — select UI)
   static/css/support.css — Scoped with .sp- prefix
   ================================================================ */

/* Shabnam (اگر fonts.css قبلاً register کرده، این ۴ بلاک را حذف کنید) */
@font-face{font-family:'Shabnam';src:url('../fonts/shabnam/Shabnam.woff2') format('woff2'),url('../fonts/shabnam/Shabnam.woff') format('woff'),url('../fonts/shabnam/Shabnam.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Shabnam';src:url('../fonts/shabnam/Shabnam-Bold.woff2') format('woff2'),url('../fonts/shabnam/Shabnam-Bold.woff') format('woff'),url('../fonts/shabnam/Shabnam-Bold.ttf') format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:'Shabnam';src:url('../fonts/shabnam/Shabnam-Medium.woff2') format('woff2'),url('../fonts/shabnam/Shabnam-Medium.woff') format('woff'),url('../fonts/shabnam/Shabnam-Medium.ttf') format('truetype');font-weight:500;font-display:swap}
@font-face{font-family:'Shabnam';src:url('../fonts/shabnam/Shabnam-Light.woff2') format('woff2'),url('../fonts/shabnam/Shabnam-Light.woff') format('woff'),url('../fonts/shabnam/Shabnam-Light.ttf') format('truetype');font-weight:300;font-display:swap}

/* ============ FORMS ============ */
.sp-form label,.sp-reply label{display:block;margin-bottom:8px;font-weight:600;font-size:14px;color:#0F172A}
.sp-req{color:#DC2626}
.sp-form input[type=text],.sp-form textarea,.sp-reply textarea{
    width:100%;padding:12px 14px;border:1px solid #CBD5E1;border-radius:10px;
    font-size:15px;font-family:inherit;color:#0F172A;background:#fff;
    transition:border-color .2s,box-shadow .2s;
}
.sp-form input:focus,.sp-form textarea:focus,.sp-reply textarea:focus{
    outline:none;border-color:#2563EB;box-shadow:0 0 0 4px rgba(37,99,235,.12);
}
.sp-form textarea,.sp-reply textarea{resize:vertical;min-height:120px;line-height:1.8}
.sp-field{margin-bottom:18px}
.sp-hint{display:block;font-size:12px;color:#94A3B8;margin-top:7px;line-height:1.75;min-height:14px}

/* ============ CUSTOM SELECT (لیست کشویی) ============ */
.sp-row-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.sp-select-wrap{position:relative}
.sp-select-wrap::after{
    content:"";position:absolute;inset-inline-end:17px;top:50%;
    width:8px;height:8px;pointer-events:none;
    border-inline-end:2px solid #64748B;border-bottom:2px solid #64748B;
    transform:translateY(-70%) rotate(45deg);
    transition:border-color .2s;
}
.sp-select-wrap:focus-within::after{border-color:#2563EB}
select.sp-select{
    width:100%;
    appearance:none;-webkit-appearance:none;-moz-appearance:none;
    padding:12px 14px;padding-inline-end:42px;
    border:1px solid #CBD5E1;border-radius:10px;
    font-size:15px;font-family:inherit;color:#0F172A;background:#fff;
    cursor:pointer;transition:border-color .2s,box-shadow .2s;
}
select.sp-select:hover{border-color:#93C5FD}
select.sp-select:focus{outline:none;border-color:#2563EB;box-shadow:0 0 0 4px rgba(37,99,235,.12)}

/* ============ TIP BOX ============ */
.sp-tip{
    display:flex;gap:10px;align-items:flex-start;
    background:#EFF6FF;border:1px solid #BFDBFE;color:#1E40AF;
    border-radius:12px;padding:12px 16px;font-size:12.5px;line-height:1.8;
}

/* ============ BADGES ============ */
.sp-badge,.sp-prio-badge,.sp-chip{
    display:inline-flex;align-items:center;gap:7px;
    padding:4px 13px;border-radius:99px;font-size:12px;font-weight:700;white-space:nowrap;
    background:#F1F5F9;color:#475569;border:1px solid #E2E8F0;
}
.sp-dot{width:7px;height:7px;border-radius:50%;background:currentColor;display:inline-block;flex-shrink:0}

/* status — OPEN سبز / CLOSED خاکستری / بقیه زرد */
.sp-badge--open{background:#ECFDF5;color:#047857;border-color:#A7F3D0}
.sp-badge--open .sp-dot{animation:spPulse 1.6s ease-in-out infinite}
.sp-badge--in_progress,.sp-badge--waiting,.sp-badge--answered,.sp-badge--pending{background:#FFFBEB;color:#B45309;border-color:#FDE68A}
.sp-badge--closed{background:#F1F5F9;color:#64748B;border-color:#E2E8F0}
@keyframes spPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.75)}}

/* priority */
.sp-prio-badge--low{background:#F8FAFC;color:#475569;border-color:#E2E8F0}
.sp-prio-badge--normal{background:#EFF6FF;color:#1D4ED8;border-color:#BFDBFE}
.sp-prio-badge--high{background:#FFFBEB;color:#B45309;border-color:#FDE68A}
.sp-prio-badge--urgent{background:#FEF2F2;color:#B91C1C;border-color:#FECACA}
.sp-prio-badge--urgent .sp-dot{animation:spPulse 1.6s ease-in-out infinite}

/* category chip */
.sp-chip{background:#F8FAFC;color:#475569;border-color:#E2E8F0}

/* ticket number link */
.sp-num{
    font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
    color:#2563EB;text-decoration:none;font-weight:700;direction:ltr;font-size:.95em;
}
.sp-num:hover{text-decoration:underline}

/* ============ TICKET META ============ */
.sp-meta{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.sp-meta-date{color:#94A3B8;font-size:12.5px;direction:ltr;display:inline-flex;align-items:center;gap:5px}

/* ============ CHAT THREAD (صفحه جزئیات) ============ */
.sp-thread{display:flex;flex-direction:column;gap:16px;padding:6px 0 4px}
.sp-msg{display:flex;gap:12px;max-width:90%}
.sp-msg--own{margin-inline-start:auto;flex-direction:row-reverse}
.sp-avatar{
    width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
    color:#fff;font-weight:800;font-size:15px;flex-shrink:0;
    background:linear-gradient(135deg,#0891B2,#2563EB);
    box-shadow:0 8px 18px -8px rgba(37,99,235,.5);
}
.sp-avatar--staff{background:linear-gradient(135deg,#059669,#0E7490);box-shadow:0 8px 18px -8px rgba(5,150,105,.5);font-size:17px}
.sp-avatar--muted{background:linear-gradient(135deg,#64748B,#475569)}
.sp-bubble{
    background:#fff;border:1px solid #E2E8F0;border-radius:16px;
    padding:14px 18px;box-shadow:0 1px 2px rgba(15,23,42,.04),0 10px 24px -14px rgba(15,23,42,.12);
    min-width:0;
}
.sp-msg--own .sp-bubble{border-color:#BFDBFE;background:#F5F9FF}
.sp-msg--staff .sp-bubble{border-color:#A7F3D0}
.sp-msg-meta{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:8px}
.sp-msg-name{font-weight:700;font-size:13px;direction:ltr}
.sp-msg-chip{
    display:inline-flex;align-items:center;gap:4px;
    font-size:10.5px;font-weight:800;letter-spacing:.05em;
    padding:2px 10px;border-radius:99px;
    background:#ECFDF5;color:#047857;border:1px solid #A7F3D0;
}
.sp-msg-chip--author{background:#EFF6FF;color:#1D4ED8;border-color:#BFDBFE}
.sp-msg-date{color:#94A3B8;font-size:11.5px;direction:ltr;margin-inline-start:auto}
.sp-msg-text{
    font-size:14px;color:#475569;line-height:1.9;
    white-space:pre-wrap;overflow-wrap:break-word;word-break:break-word;
}
.sp-empty{
    text-align:center;padding:30px 18px;color:#94A3B8;font-size:14px;
    border:1px dashed #CBD5E1;border-radius:14px;background:#F8FAFC;
}

/* ============ REPLY FORM ============ */
.sp-reply{
    background:#F8FAFC;border:1px solid #E2E8F0;border-radius:16px;
    padding:18px;margin-top:22px;
}
.sp-reply-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:12px;flex-wrap:wrap}

/* ============ CLOSED NOTICE ============ */
.sp-closed{
    display:flex;align-items:center;justify-content:center;gap:10px;
    background:#F1F5F9;border:1px solid #E2E8F0;border-radius:14px;
    padding:16px 20px;margin-top:22px;color:#475569;font-size:14px;font-weight:600;
}

/* ---------- Responsive ---------- */
@media (max-width:640px){
    .sp-row-2{grid-template-columns:1fr}
    .sp-msg{max-width:100%}
    .sp-msg--own .sp-msg-date{margin-inline-start:0}
}
@media (prefers-reduced-motion:reduce){
    .sp-dot{animation:none!important}
}