.support-page {
    --support-navy: #0b2741;
    --support-blue: #126b88;
    --support-cyan: #0faaa8;
    --support-mint: #8ff8f3;
    --support-gold: #f2b84b;
    width: 100%;
    padding-block: clamp(1rem, 3vw, 2.4rem) 3rem;
}

.support-hero,
.support-page-header,
.ticket-detail-header {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(15, 170, 168, .18);
    border-radius: 24px;
    background:
        radial-gradient(circle at 10% 20%, rgba(143, 248, 243, .16), transparent 34%),
        linear-gradient(135deg, #0b2741, #104862 62%, #0d6f78);
    box-shadow: 0 22px 55px rgba(11, 39, 65, .16);
    color: #ffffff;
}

.support-hero {
    padding: clamp(1.5rem, 5vw, 3.6rem);
    text-align: center;
}

.support-hero h1,
.support-page-header h1,
.ticket-detail-header h1 {
    margin: .25rem 0 .5rem;
    color: #ffffff;
    font-size: clamp(1.8rem, 4vw, 3rem);
    font-weight: 900;
}

.support-hero p {
    max-width: 850px;
    margin: 0 auto;
    color: #d9f6f5;
    font-size: clamp(.9rem, 2vw, 1.08rem);
    line-height: 2;
}

.support-eyebrow,
.support-section-kicker {
    display: inline-block;
    color: #8ff8f3;
    font-size: .78rem;
    font-weight: 850;
    letter-spacing: .02em;
}

.contact-top-actions {
    display: flex;
    justify-content: flex-start;
    margin-bottom: .65rem;
}

.contact-close-button {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    padding: .42rem .78rem;
    border: 1px solid rgba(11, 39, 65, .18);
    border-radius: 11px;
    color: #0b2741;
    background: #ffffff;
    box-shadow: 0 7px 18px rgba(11, 39, 65, .08);
    font-size: .78rem;
    font-weight: 850;
    transition: color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease;
}

.contact-close-button:hover,
.contact-close-button:focus-visible {
    transform: translateY(-1px);
    color: #ffffff;
    border-color: #0b2741;
    background: #0b2741;
}

.contact-close-icon {
    font-size: 1.05rem;
    line-height: 1;
}

.contact-section {
    margin-top: 1.5rem;
    padding: clamp(1rem, 3vw, 1.6rem);
    border: 1px solid #e2e8f0;
    border-radius: 22px;
    background: #ffffff;
    box-shadow: 0 14px 38px rgba(15, 23, 42, .06);
}

.support-section-heading {
    display: flex;
    flex-direction: column;
    gap: .45rem;
    margin-bottom: 1.2rem;
}

.support-section-heading h2,
.support-separate-copy h2,
.support-reply-form h2,
.support-form-guide h2 {
    margin: .15rem 0 0;
    color: #0b2741;
    font-size: clamp(1.2rem, 3vw, 1.55rem);
}

.support-section-heading p,
.support-separate-copy p {
    margin: 0;
    color: #64748b;
    line-height: 1.9;
}

.contact-phone-grid,
.contact-social-grid {
    display: grid;
    gap: .85rem;
}

.contact-phone-card,
.contact-social-card {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: 1rem;
    border: 1px solid #dbe6ed;
    border-radius: 17px;
    color: #0b2741;
    background: linear-gradient(145deg, #ffffff, #f7fbfd);
    box-shadow: 0 8px 22px rgba(15, 23, 42, .05);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.contact-phone-card:hover,
.contact-social-card:hover {
    transform: translateY(-3px);
    border-color: rgba(15, 170, 168, .42);
    box-shadow: 0 14px 32px rgba(11, 39, 65, .11);
}

.contact-phone-icon,
.contact-social-mark,
.support-separate-icon {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    display: inline-grid;
    place-items: center;
    border-radius: 15px;
    color: #ffffff;
    background: linear-gradient(145deg, #126b88, #0faaa8);
    box-shadow: 0 8px 18px rgba(15, 170, 168, .22);
    font-size: 1.25rem;
    font-weight: 900;
}

.contact-phone-copy,
.contact-social-copy {
    min-width: 0;
    display: flex;
    flex: 1;
    flex-direction: column;
}

.contact-phone-copy small,
.contact-social-copy span {
    color: #64748b;
    font-size: .76rem;
}

.contact-phone-copy strong {
    color: #0b2741;
    font-size: 1.2rem;
    font-variant-numeric: tabular-nums;
}

.contact-card-action,
.contact-social-action {
    flex: 0 0 auto;
    color: #087f82;
    font-size: .75rem;
    font-weight: 800;
}

.support-social-bale .contact-social-mark { background: linear-gradient(145deg, #2a76e8, #1b56b6); }
.support-social-rubika .contact-social-mark { background: linear-gradient(145deg, #8b5cf6, #db4db5); }
.support-social-eitaa .contact-social-mark { background: linear-gradient(145deg, #0ea5a8, #087d83); }

.contact-placeholder-note {
    margin: 1rem 0 0;
    padding: .75rem 1rem;
    border-radius: 12px;
    color: #80610e;
    background: #fff9e8;
    font-size: .78rem;
    line-height: 1.8;
}

.support-separate-card {
    display: grid;
    gap: 1rem;
    align-items: center;
    margin-top: 1.5rem;
    padding: clamp(1.1rem, 4vw, 1.8rem);
    border: 1px solid rgba(15, 170, 168, .24);
    border-radius: 22px;
    background: linear-gradient(135deg, #ecfeff, #ffffff 62%, #fff8e8);
    box-shadow: 0 15px 40px rgba(11, 39, 65, .08);
}

.support-separate-icon { width: 58px; height: 58px; font-size: 1.45rem; }

.support-separate-actions,
.support-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem;
}

.support-count-pill {
    min-width: 20px;
    display: inline-flex;
    justify-content: center;
    margin-inline-start: .35rem;
    padding-inline: .35rem;
    border-radius: 999px;
    color: #0b2741;
    background: #8ff8f3;
    font-size: .7rem;
}

.support-role-note {
    max-width: 290px;
    color: #526779;
    font-size: .78rem;
    line-height: 1.8;
}

.support-page-header,
.ticket-detail-header {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
    justify-content: space-between;
    padding: clamp(1.2rem, 4vw, 2rem);
}

.support-page-header p,
.ticket-detail-header p {
    margin: 0;
    color: #d9f6f5;
    line-height: 1.8;
}

.support-filter-tabs {
    display: flex;
    gap: .55rem;
    margin-block: 1.1rem;
    padding-bottom: .25rem;
    overflow-x: auto;
}

.support-filter-tabs a {
    flex: 0 0 auto;
    padding: .55rem .9rem;
    border: 1px solid #dbe6ed;
    border-radius: 999px;
    color: #475569;
    background: #ffffff;
    font-size: .78rem;
    font-weight: 750;
}

.support-filter-tabs a.is-active {
    border-color: #0faaa8;
    color: #ffffff;
    background: #0f818a;
}

.ticket-card-grid { display: grid; gap: .9rem; }

.ticket-summary-card {
    min-width: 0;
    padding: 1rem;
    border: 1px solid #dfe8ee;
    border-radius: 18px;
    color: #0f263a;
    background: #ffffff;
    box-shadow: 0 10px 28px rgba(15, 23, 42, .06);
    transition: transform .2s ease, box-shadow .2s ease;
}

.ticket-summary-card:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(11, 39, 65, .1); }
.ticket-summary-card.has-unread { border-color: rgba(15, 170, 168, .65); box-shadow: 0 0 0 3px rgba(15, 170, 168, .09); }
.ticket-summary-card h2 { margin: .75rem 0; font-size: 1.05rem; }

.ticket-summary-topline,
.ticket-summary-meta,
.ticket-summary-card footer,
.ticket-detail-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .55rem;
}

.ticket-summary-topline code,
.support-admin-table code {
    color: #0d6f78;
    font-weight: 850;
}

.support-unread-dot,
.support-table-new {
    padding: .25rem .55rem;
    border-radius: 999px;
    color: #075a5d;
    background: #ccfbf1;
    font-size: .68rem;
    font-weight: 850;
}

.ticket-summary-card footer {
    margin-top: .9rem;
    padding-top: .75rem;
    border-top: 1px solid #edf2f6;
    color: #64748b;
    font-size: .72rem;
}

.support-badge,
.support-priority {
    display: inline-flex;
    align-items: center;
    padding: .3rem .62rem;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 800;
    white-space: nowrap;
}

.support-badge-new { color: #1d4ed8; background: #dbeafe; }
.support-badge-progress { color: #92400e; background: #fef3c7; }
.support-badge-answered { color: #047857; background: #d1fae5; }
.support-badge-closed,
.support-badge-muted { color: #475569; background: #e2e8f0; }
.support-priority-low { color: #475569; background: #f1f5f9; }
.support-priority-normal { color: #155e75; background: #cffafe; }
.support-priority-high { color: #9a3412; background: #ffedd5; }
.support-priority-urgent { color: #b91c1c; background: #fee2e2; }

.support-empty-state {
    grid-column: 1 / -1;
    padding: 2.5rem 1rem;
    border: 1px dashed #bdd4df;
    border-radius: 20px;
    text-align: center;
    background: #f8fcfd;
}

.support-empty-state > span { font-size: 2.3rem; }
.support-empty-state h2 { margin: .5rem 0; color: #0b2741; }
.support-empty-state p { color: #64748b; }

.support-form-layout { display: grid; gap: 1rem; margin-top: 1rem; align-items: start; }
.support-ticket-form,
.support-reply-form { padding: clamp(1rem, 4vw, 1.6rem); }
.support-ticket-form { display: grid; gap: 1.1rem; }
.support-message-input { resize: vertical; min-height: 140px; line-height: 1.9; }
.support-character-count { margin-top: .35rem; color: #94a3b8; font-size: .7rem; text-align: left; }

.support-upload-box {
    position: relative;
    min-height: 92px;
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .9rem;
    border: 1.5px dashed #9bbbc9;
    border-radius: 15px;
    color: #23445b;
    background: #f7fcfd;
}

.support-upload-box-compact { min-height: 78px; }
.support-upload-icon { font-size: 1.8rem; color: #0f818a; }
.support-upload-box div { display: flex; min-width: 0; flex-direction: column; }
.support-upload-box small { color: #64748b; font-size: .7rem; line-height: 1.7; }
.support-file-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }

.support-selected-files { display: grid; gap: .4rem; margin: .55rem 0 0; padding: 0; list-style: none; }
.support-selected-files li { display: flex; justify-content: space-between; gap: .7rem; padding: .5rem .7rem; border-radius: 9px; background: #eef8fa; font-size: .75rem; }
.support-selected-files span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.support-selected-files small { flex: 0 0 auto; color: #64748b; }

.support-form-guide {
    padding: 1.1rem;
    border: 1px solid #f2d998;
    border-radius: 18px;
    background: linear-gradient(145deg, #fffdf6, #fff8e5);
}

.support-form-guide ul { margin: .8rem 0 0; padding-inline-start: 1.2rem; color: #68572d; line-height: 2; font-size: .8rem; }

.ticket-detail-header { margin-bottom: 1rem; }
.support-back-link { color: #8ff8f3; font-size: .78rem; }
.ticket-detail-badges { justify-content: flex-start; }

.ticket-detail-summary {
    display: grid;
    gap: .7rem;
    margin-bottom: 1rem;
}

.ticket-detail-summary > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .2rem;
    padding: .8rem;
    border: 1px solid #e2e8f0;
    border-radius: 13px;
    background: #ffffff;
}

.ticket-detail-summary span { color: #64748b; font-size: .7rem; }
.ticket-detail-summary strong { color: #0b2741; font-size: .8rem; overflow-wrap: anywhere; }

.ticket-conversation { display: flex; flex-direction: column; gap: .85rem; margin-block: 1rem; }
.ticket-message { width: min(92%, 820px); padding: 1rem; border-radius: 18px; box-shadow: 0 9px 24px rgba(15, 23, 42, .06); }
.ticket-message.is-user { align-self: flex-start; border: 1px solid #cde4ec; border-bottom-right-radius: 5px; background: #f5fbfd; }
.ticket-message.is-staff { align-self: flex-end; border: 1px solid #bde9dd; border-bottom-left-radius: 5px; background: #effcf8; }
.ticket-message header { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; padding-bottom: .55rem; border-bottom: 1px solid rgba(148, 163, 184, .22); }
.ticket-message header strong { color: #0b5660; font-size: .78rem; }
.ticket-message header time { color: #64748b; font-size: .67rem; }
.ticket-message-body { padding-top: .7rem; color: #243b4d; font-size: .84rem; line-height: 2; overflow-wrap: anywhere; }

.ticket-attachment-list { display: grid; gap: .4rem; margin-top: .75rem; }
.ticket-attachment-link { min-width: 0; display: flex; align-items: center; gap: .45rem; padding: .48rem .6rem; border: 1px solid rgba(15, 170, 168, .18); border-radius: 9px; color: #0d6f78; background: rgba(255, 255, 255, .8); font-size: .72rem; }
.ticket-attachment-name { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ticket-attachment-link small { flex: 0 0 auto; color: #64748b; }

.support-reply-form { margin-top: 1rem; }
.support-reply-form .form-group { margin-top: .8rem; }
.support-close-ticket-form { margin-top: .8rem; text-align: left; }
.support-closed-notice { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: 1rem; padding: 1rem; border: 1px solid #cbd5e1; border-radius: 14px; color: #475569; background: #f8fafc; }
.support-closed-notice span { flex: 1; }

.support-admin { min-width: 0; }
.support-admin-summary { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; margin-bottom: 1rem; }
.support-admin-summary > div { min-width: 130px; display: flex; flex-direction: column; padding: .65rem .85rem; border: 1px solid #dce7ed; border-radius: 12px; background: #f8fcfd; }
.support-admin-summary span { color: #64748b; font-size: .68rem; }
.support-admin-summary strong { color: #0b2741; font-size: 1.15rem; }
.support-admin-summary .has-alert { border-color: #fed7aa; background: #fff7ed; }
.support-admin-summary .has-alert strong { color: #c2410c; }

.support-admin-filters {
    display: grid;
    gap: .65rem;
    margin-bottom: 1rem;
    padding: .8rem;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #f8fafc;
}

.support-admin-results { min-height: 130px; transition: opacity .2s ease; }
.support-admin-results.is-loading { opacity: .45; pointer-events: none; }
.support-admin-table { min-width: 1180px; }
.support-category-table { min-width: 1050px; }
.support-row-unread { background: #f0fdfa !important; }
.support-table-subline { display: block; color: #64748b; }
.support-table-new { display: block; width: max-content; margin-top: .3rem; }
.support-table-action { min-height: 36px; padding: .35rem .65rem; }
.support-category-description { min-width: 230px; max-width: 360px; line-height: 1.8; }
.support-table-required { color: #b45309; font-weight: 800; }
.support-category-table .table-actions { justify-content: center; }
.support-category-table .table-actions form { margin: 0; }

.support-admin-detail-top { display: grid; gap: 1rem; align-items: start; }
.ticket-admin-citizen { padding: 1rem; border: 1px solid #dce7ed; border-radius: 15px; background: #f8fcfd; }
.ticket-admin-citizen h2 { margin: .25rem 0; color: #0b2741; }
.ticket-admin-citizen p { margin: .3rem 0 0; color: #64748b; font-size: .8rem; }
.ticket-admin-update-form { display: grid; gap: .7rem; padding: 1rem; border: 1px solid #e2e8f0; border-radius: 15px; background: #ffffff; }

.support-category-form { max-width: 920px; display: grid; gap: 1rem; }
.support-checkbox-card { min-height: 75px; display: flex; align-items: center; gap: .75rem; padding: .8rem; border: 1px solid #dce7ed; border-radius: 13px; cursor: pointer; background: #f8fcfd; }
.support-checkbox-card input { width: 22px; height: 22px; }
.support-checkbox-card span { display: flex; flex-direction: column; }
.support-checkbox-card strong { color: #0b2741; }
.support-checkbox-card small { color: #64748b; line-height: 1.7; }

@media (min-width: 620px) {
    .contact-phone-grid,
    .contact-social-grid,
    .ticket-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ticket-detail-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .support-page-header,
    .ticket-detail-header { flex-direction: row; align-items: center; }
    .support-section-heading { flex-direction: row; align-items: end; justify-content: space-between; }
    .support-section-heading > p { max-width: 520px; text-align: left; }
}

@media (min-width: 780px) {
    .support-separate-card { grid-template-columns: auto minmax(0, 1fr) auto; }
    .support-form-layout { grid-template-columns: minmax(0, 1fr) 300px; }
    .support-form-guide { position: sticky; top: 86px; }
    .support-admin-filters { grid-template-columns: minmax(240px, 1.5fr) repeat(3, minmax(130px, .65fr)) auto auto; align-items: center; }
    .support-category-search { grid-template-columns: minmax(280px, 1fr) auto auto; }
    .support-admin-detail-top { grid-template-columns: minmax(0, 1fr) 380px; }
    .support-category-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .support-form-wide { grid-column: 1 / -1; }
}

@media (min-width: 1080px) {
    .contact-social-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .ticket-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 430px) {
    .contact-card-action,
    .contact-social-action { display: none; }
    .contact-phone-icon,
    .contact-social-mark { width: 43px; height: 43px; border-radius: 13px; }
    .ticket-message { width: 97%; }
    .support-separate-actions .btn,
    .support-form-actions .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .contact-phone-card,
    .contact-social-card,
    .ticket-summary-card,
    .support-admin-results { transition: none; }
}