/* Help & support: the requester's page, the desk, and the public help center.
   Logical properties throughout (inline-start/end), so Arabic and Urdu lay out
   mirrored without a second set of rules. */

/* ── Search ─────────────────────────────────────────────────────────── */
.support-search { display: flex; gap: .5rem; }
.support-search input { flex: 1; min-width: 0; }
.support-search-lg input { font-size: 1.05rem; padding-block: .8rem; }

/* ── Cards: your requests ───────────────────────────────────────────── */
.support-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
    gap: .85rem;
}
.support-card {
    display: flex; flex-direction: column; gap: .3rem;
    background: #fff; border: 1px solid #e2e8f0; border-radius: 1rem;
    padding: .9rem 1rem; min-height: 7.5rem;
    transition: border-color .15s, box-shadow .15s;
}
a.support-card:hover { border-color: #93c5fd; box-shadow: 0 6px 18px rgba(15, 23, 42, .06); }
.support-card.is-open { grid-column: 1 / -1; padding: 1.1rem 1.2rem; gap: .9rem; }
.support-card-head { display: flex; align-items: flex-start; gap: .75rem; }
.support-card-head > div { flex: 1; }
.support-ref { font-size: .75rem; font-weight: 600; color: #64748b; letter-spacing: .01em; }
.support-dot {
    display: inline-block; width: .5rem; height: .5rem; border-radius: 999px;
    background: #2563eb; vertical-align: middle; margin-inline-start: .2rem;
}
.support-close {
    font-size: 1.6rem; line-height: 1; color: #94a3b8; padding: 0 .25rem;
}
.support-close:hover { color: #475569; }

/* ── The thread ─────────────────────────────────────────────────────── */
.support-thread { display: flex; flex-direction: column; gap: .7rem; margin: 0; padding: 0; list-style: none; }
.support-message {
    border-radius: .9rem; padding: .75rem .9rem; background: #f8fafc;
    border: 1px solid #e2e8f0; max-width: 46rem;
}
.support-message.is-staff { background: #eff6fc; border-color: #bfdbfe; margin-inline-start: auto; }
.support-message.is-note { background: #fffbeb; border-color: #fcd34d; border-style: dashed; }
.support-message-meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
    font-size: .75rem; color: #475569; margin-bottom: .3rem;
}
.support-message-meta time { color: #94a3b8; margin-inline-start: auto; }
.support-message-body { font-size: .9rem; color: #0f172a; line-height: 1.55; overflow-wrap: anywhere; }
.support-message-body a { color: #1d4ed8; text-decoration: underline; }
.support-event { text-align: center; font-size: .72rem; color: #64748b; }
.support-event time { color: #94a3b8; margin-inline-start: .25rem; }
.support-shot { display: inline-block; margin-top: .5rem; }
.support-shot img { max-width: min(100%, 22rem); max-height: 16rem; border-radius: .6rem; border: 1px solid #e2e8f0; }

/* ── Reply box, screenshots, rating ─────────────────────────────────── */
.support-reply { border-top: 1px solid #e2e8f0; padding-top: .9rem; }
.support-reply textarea { width: 100%; }
.support-reply-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .6rem; margin-top: .55rem; }
.support-reply-actions .support-attach { margin-inline-end: auto; }
.support-attach { display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; }
.support-attach-button {
    font-size: .8rem; font-weight: 600; color: #1d4ed8; border: 1px dashed #93c5fd;
    border-radius: .6rem; padding: .35rem .7rem; background: #f8fbff;
}
.support-attach:focus-within .support-attach-button { outline: 2px solid #2563eb; outline-offset: 2px; }
.support-rating { background: #f8fafc; border-radius: .9rem; padding: .75rem .9rem; }
.support-rate {
    font-size: .8rem; font-weight: 700; border-radius: 999px; padding: .35rem .9rem; border: 1px solid;
}
.support-rate.is-good { color: #166534; border-color: #86efac; background: #f0fdf4; }
.support-rate.is-bad { color: #9f1239; border-color: #fda4af; background: #fff1f2; }

/* ── New request form ───────────────────────────────────────────────── */
.support-field { display: flex; flex-direction: column; gap: .3rem; font-size: .85rem; font-weight: 600; color: #334155; }
.support-suggest { background: #f0f9ff; border: 1px solid #bae6fd; border-radius: .8rem; padding: .6rem .8rem; }
.support-suggest ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .3rem; }
.support-suggest a { font-size: .85rem; font-weight: 600; color: #1d4ed8; text-decoration: underline; }
.support-suggest span { display: block; font-size: .75rem; color: #475569; }

/* ── Article lists, the help center ─────────────────────────────────── */
.support-article-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .55rem; }
.support-article-list a { font-weight: 600; color: #1d4ed8; }
.support-article-list a:hover { text-decoration: underline; }
.support-article-list span { display: block; font-size: .82rem; color: #64748b; }
.support-cta {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
    background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 1rem; padding: 1rem 1.2rem;
}

/* ── The desk ───────────────────────────────────────────────────────── */
a.support-queue { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .4rem; }
.support-row {
    display: grid; grid-template-columns: 3.5rem minmax(0, 1fr) auto 8rem; align-items: center; gap: .75rem;
    background: #fff; border: 1px solid #e2e8f0; border-radius: .8rem; padding: .6rem .85rem;
}
.support-row:hover { border-color: #93c5fd; }
.support-row.is-overdue { border-inline-start: 3px solid #e11d48; }
.support-row-main { display: flex; flex-direction: column; min-width: 0; }
.support-row-tags { display: flex; flex-wrap: wrap; gap: .3rem; justify-content: flex-end; }
.support-row-meta { text-align: end; }
@media (max-width: 640px) {
    .support-row { grid-template-columns: minmax(0, 1fr) auto; }
    .support-row .support-ref, .support-row-meta { display: none; }
}
.support-desk-ticket { background: #fff; border: 1.5px solid #93c5fd; border-radius: 1rem; padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: 1rem; }
.support-desk-columns { display: grid; grid-template-columns: minmax(0, 1fr) 19rem; gap: 1.1rem; align-items: start; }
@media (max-width: 1024px) { .support-desk-columns { grid-template-columns: minmax(0, 1fr); } }
.support-side { display: flex; flex-direction: column; gap: .75rem; }
.support-side-box { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: .85rem; padding: .75rem .85rem; font-size: .85rem; }
.support-side-title { font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: #64748b; margin-bottom: .35rem; }
.support-prop label { display: flex; flex-direction: column; gap: .2rem; font-size: .75rem; font-weight: 600; color: #475569; margin-bottom: .5rem; }
.support-facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .2rem .6rem; font-size: .8rem; }
.support-facts dt { color: #64748b; }
.support-facts dd { color: #0f172a; margin: 0; }
.support-actions { display: flex; flex-direction: column; gap: .4rem; margin-top: .7rem; }
.support-actions form { display: flex; flex-wrap: wrap; gap: .4rem; }
.support-mini-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .45rem; font-size: .8rem; }
.support-pre { margin-top: .75rem; background: #0f172a; color: #e2e8f0; font-size: .72rem; line-height: 1.5; border-radius: .6rem; padding: .8rem; overflow: auto; max-height: 24rem; white-space: pre-wrap; }