/* Support tickets (pages/support.php, components/support/*). Same tokens and chrome as the
 * reviews page: colours come from body.mkt-v5 (market-v5.css), so light mode is its own palette.
 * Focus rings are box-shadows: the header's critical guards strip outlines with !important.
 * Logical properties throughout, so Arabic, Persian and Urdu mirror without extra rules. */

body.sp-body { background: rgb(var(--mk-bg)); }
.sp {
    --sp-ring: 0 0 0 2px rgb(var(--mk-bg)), 0 0 0 4px rgb(var(--mk-fg) / 0.85);
    --sp-line: rgb(var(--mk-fg) / 0.12);
    --sp-dim: rgb(var(--mk-fg) / calc(0.55 * var(--mk-tk)));
    --sp-faint: rgb(var(--mk-fg) / calc(0.42 * var(--mk-tk)));
    --sp-open: 251 191 36; --sp-answered: 74 222 128; --sp-hold: 96 165 250; --sp-danger: 248 113 113;
    display: block;
    padding: 72px 16px 120px;
    color: rgb(var(--mk-fg));
    font-family: Satoshi, 'Noto Sans Arabic', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
}
html[data-theme="light"] .sp { --sp-open: 161 98 7; --sp-answered: 21 128 61; --sp-hold: 29 78 216; --sp-danger: 185 28 28; }
.sp *, .sp *::before, .sp *::after { box-sizing: border-box; }
.sp a { color: inherit; text-decoration: none; }
.sp [hidden] { display: none !important; }
.sp-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
html[dir="rtl"] .sp-flip { display: inline-block; transform: scaleX(-1); }

/* ---- Heading ---- */
.sp-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 500; color: var(--sp-dim); }
.sp-crumbs a { transition: color .2s ease; }
.sp-crumbs a:hover { color: rgb(var(--mk-fg)); }
.sp-crumbs .fa-chevron-right { font-size: 8px; opacity: .6; }
.sp-crumbs [aria-current] { color: rgb(var(--mk-fg) / calc(0.8 * var(--mk-tk))); }
.sp-title { margin: 18px 0 0; font-family: Sora, 'Noto Sans Arabic', system-ui, sans-serif; font-size: 30px; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; text-wrap: balance; }
.sp-title__grad { background: var(--mk-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sp-lead { margin: 8px 0 0; max-width: 60ch; font-size: 14px; line-height: 1.6; color: var(--sp-dim); }
html[dir="rtl"] .sp-title, html[dir="rtl"] .sp-thread__subject { letter-spacing: 0; }

.sp-alert { margin-top: 18px; display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 14px; border: 1px solid rgb(var(--sp-open) / 0.35); background: rgb(var(--sp-open) / 0.08); font-size: 13.5px; line-height: 1.5; }
.sp-alert i { margin-top: 3px; color: rgb(var(--sp-open)); }

/* ---- Bento cards: an even hairline (the outer box's padding) around a flat surface, as on the marketplace ---- */
.sp-bento { margin-top: 16px; display: flex; flex-direction: column; gap: 12px; }
.sp-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.sp-bento > .sp-side { display: contents; }
.sp-bento .sp-card--mine { order: -1; }
/* Ticket limit reached (limit.php): in place of the form, under the Telegram strip. */
.sp-limit { margin-top: 16px; }
.sp-limit .sp-card__head { margin-bottom: 0; }
.sp-limit__foot { margin-top: 18px; padding-top: 16px; border-top: 1px solid rgb(var(--mk-fg) / 0.1); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; }
.sp-limit__foot .sp-note { flex: 1 1 240px; font-size: 13px; color: var(--sp-dim); }
.sp-limit time { font-weight: 600; color: rgb(var(--mk-fg)); }
.sp-quota { color: var(--sp-dim); }
/* First block under the heading after a choice: the same 22px as the home stubs. */
.sp-top, .sp-hero + .sp-bento, .sp-alert + .sp-bento { margin-top: 22px; }
.sp-card { display: block; padding: 1px; border-radius: 20px; background: rgb(var(--mk-fg) / 0.1); }
.sp-card__in { display: block; height: 100%; padding: 18px 16px; border-radius: 19px; background: linear-gradient(180deg, rgb(var(--mk-s1)) 0%, rgb(var(--mk-s2)) 100%); }

/* ---- Home: two ticket stubs (open a ticket / find your ticket), then this browser's tickets + Telegram.
 * Each stub tears off at a dashed perforation with a notch on both sides: the notches are page-coloured circles
 * centred on the card's edges, half clipped by the card (overflow: hidden), their 1px ring continuing the rim. ---- */
.sp-home { margin-top: 22px; display: grid; gap: 12px; }
.sp-stubs { display: grid; gap: 12px; }
.sp-stub { --sp-stub-pad: 20px; margin: 0; overflow: hidden; }
/* Container: the stubs narrow when the history column sits beside them, so their insides follow the card, not the screen. */
.sp-stub .sp-card__in { display: flex; flex-direction: column; padding: var(--sp-stub-pad) var(--sp-stub-pad) 0; container-type: inline-size; }
.sp-stub__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.sp-stub__stamp { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sp-faint); }
/* .sp-stub prefix: .sp-card__title (later in this file) resets these margins and sizes. */
.sp-stub .sp-stub__title { margin-top: 26px; font-size: 22px; }
.sp-stub .sp-stub__body { margin-top: 22px; margin-bottom: 22px; }
.sp-stub__label { display: block; margin: 0 0 8px; padding: 0; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sp-faint); }
html[dir="rtl"] .sp-stub__label, html[dir="rtl"] .sp-stub__stamp { letter-spacing: 0; }
.sp-stub__fields { display: grid; gap: 12px; }
.sp-stub__fields .sp-field { gap: 0; }
@container (min-width: 520px) {
    .sp-stub__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.sp-stub .sp-stub__error { margin: -8px 0 22px; }
/* margin-top: auto pins the perforation to the bottom, so the two stubs tear at the same height. */
.sp-stub__foot {
    position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px;
    margin: auto calc(-1 * var(--sp-stub-pad)) 0; padding: 16px var(--sp-stub-pad); border-top: 1px dashed rgb(var(--mk-fg) / 0.16);
}
.sp-stub__foot::before, .sp-stub__foot::after {
    content: ''; position: absolute; top: -12px; width: 22px; height: 22px; border-radius: 50%;
    background: rgb(var(--mk-bg)); border: 1px solid rgb(var(--mk-fg) / 0.1);
}
.sp-stub__foot::before { inset-inline-start: -12px; }
.sp-stub__foot::after { inset-inline-end: -12px; }
/* "Open a ticket" has no fields of its own (the topic is picked in the full form): how a ticket goes, then Continue at the end.
 * The steps sit side by side once the card is wide enough (container query on the card), stacked before that. */
.sp-stub--new .sp-stub__foot { justify-content: flex-end; }
/* A small timeline: each number is a pill marker (the first one filled: you start there) and a hairline runs from each
 * marker to the next, down the start side while stacked, across once the steps sit side by side. */
.sp-stub--new .sp-stub__label { margin-bottom: 14px; }
.sp-steps { --sp-node: 30px; --sp-steps-gap: 14px; margin: 0; padding: 0; list-style: none; display: grid; gap: var(--sp-steps-gap); }
.sp-steps__item { position: relative; display: grid; grid-template-columns: var(--sp-node) minmax(0, 1fr); column-gap: 12px; row-gap: 2px; }
.sp-steps__n {
    grid-row: span 2; display: flex; align-items: center; justify-content: center; width: var(--sp-node); height: 22px;
    border-radius: 999px; border: 1px solid rgb(var(--mk-fg) / 0.18); color: var(--sp-dim);
    font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em;
}
.sp-steps__item:first-child .sp-steps__n { border-color: transparent; background: rgb(var(--mk-fg)); color: rgb(var(--mk-bg)); }
html[data-theme="light"] .sp-steps__item:first-child .sp-steps__n { color: #fff; }
.sp-steps__item:not(:last-child)::after {
    content: ''; position: absolute; inset-inline-start: calc(var(--sp-node) / 2 - 0.5px); top: 28px; bottom: calc(6px - var(--sp-steps-gap));
    width: 1px; background: rgb(var(--mk-fg) / 0.14);
}
.sp-steps__t { font-size: 14px; font-weight: 600; line-height: 22px; color: rgb(var(--mk-fg)); }
.sp-steps__d { font-size: 12.5px; line-height: 1.5; color: var(--sp-dim); }
@container (min-width: 540px) {
    .sp-steps { --sp-steps-gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .sp-steps__item { grid-template-columns: minmax(0, 1fr); }
    .sp-steps__n { grid-row: auto; margin-bottom: 10px; }
    .sp-steps__item:not(:last-child)::after { top: 11px; bottom: auto; width: auto; height: 1px; inset-inline-start: calc(var(--sp-node) + 8px); inset-inline-end: calc(8px - var(--sp-steps-gap)); }
}
.sp-stub__foot .sp-note { flex: 1 1 200px; }
.sp-stub__foot .sp-btn { min-height: 44px; }
.sp-more { margin-top: 12px; display: grid; gap: 12px; align-items: start; }

/* Two fields only: keep them at a reading width inside the wide card. */
.sp-card--find .sp-form { max-width: 520px; }
.sp-card__head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 18px; }
.sp-card__ico { width: 42px; height: 42px; flex-shrink: 0; border-radius: 13px; display: flex; align-items: center; justify-content: center; background: rgb(var(--mk-fg)); color: rgb(var(--mk-bg)); font-size: 17px; }
html[data-theme="light"] .sp-card__ico { color: #fff; }
.sp-card__title { display: block; margin: 0; font-family: Sora, 'Noto Sans Arabic', system-ui, sans-serif; font-size: 19px; font-weight: 700; line-height: 1.25; }
.sp-card__title--sm { font-size: 16px; }
.sp-card__sub { display: block; margin: 5px 0 0; font-size: 13px; line-height: 1.55; color: var(--sp-dim); }

/* ---- Fields ---- */
.sp-form { display: flex; flex-direction: column; gap: 16px; }
.sp-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.sp-label { font-size: 12.5px; font-weight: 700; color: rgb(var(--mk-fg) / calc(0.82 * var(--mk-tk))); }
.sp-opt { font-weight: 500; color: var(--sp-faint); }
.sp-hint { font-size: 12px; line-height: 1.45; color: var(--sp-faint); }
.sp-hint--end { align-self: flex-end; font-variant-numeric: tabular-nums; }
.sp-input {
    width: 100%; min-height: 46px; padding: 11px 14px; border-radius: 13px;
    border: 1px solid rgb(var(--mk-fg) / 0.14); background: var(--mk-well); color: rgb(var(--mk-fg));
    font: inherit; font-size: 15px; line-height: 1.45; transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.sp-input::placeholder { color: var(--sp-faint); }
.sp-input:hover { border-color: rgb(var(--mk-fg) / 0.24); }
.sp-input:focus, .sp-input:focus-visible { outline: none; border-color: rgb(var(--mk-fg) / 0.55); box-shadow: 0 0 0 3px rgb(var(--mk-fg) / 0.1); }
.sp-input--mono, .sp-dl__mono { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13.5px; letter-spacing: 0.02em; }
.sp-textarea { min-height: 132px; resize: vertical; }
.sp-grid3 { display: grid; grid-template-columns: 1fr; gap: 16px; }
.sp-hp { position: absolute !important; inset-inline-start: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Topic chips (radio group) */
.sp-topics { margin: 0; padding: 0; border: 0; min-width: 0; }
.sp-topics legend { padding: 0; margin-bottom: 8px; }
.sp-topics__row { display: flex; flex-wrap: wrap; gap: 8px; }
.sp-topic { position: relative; }
.sp-topic input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.sp-topic__in {
    display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: 999px;
    border: 1px solid rgb(var(--mk-fg) / 0.14); background: rgb(var(--mk-fg) / 0.03); font-size: 13px; font-weight: 600;
    color: rgb(var(--mk-fg) / calc(0.75 * var(--mk-tk))); transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s var(--mk-ease);
}
.sp-topic__in i { font-size: 12px; opacity: .75; }
.sp-topic:hover .sp-topic__in { border-color: rgb(var(--mk-fg) / 0.3); color: rgb(var(--mk-fg)); }
.sp-topic input:checked + .sp-topic__in { background: rgb(var(--mk-fg)); border-color: rgb(var(--mk-fg)); color: rgb(var(--mk-bg)); }
html[data-theme="light"] .sp-topic input:checked + .sp-topic__in { color: #fff; }
.sp-topic input:checked + .sp-topic__in i { opacity: 1; }
.sp-topic input:focus-visible + .sp-topic__in { box-shadow: var(--sp-ring); }
.sp-topic:active .sp-topic__in { transform: scale(.97); }

/* Contact: pick the app (Telegram / WhatsApp / Instagram), then the handle or number for it. */
.sp-contact { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; padding: 3px; border-radius: 13px; border: 1px solid rgb(var(--mk-fg) / 0.12); background: var(--mk-well); }
.sp-contact__opt { position: relative; min-width: 0; }
.sp-contact__opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.sp-contact__in { display: flex; align-items: center; justify-content: center; gap: 7px; height: 36px; padding: 0 8px; border-radius: 10px; font-size: 12.5px; font-weight: 600; white-space: nowrap; color: var(--sp-dim); transition: background-color .2s ease, color .2s ease; }
.sp-contact__in i { font-size: 13px; }
.sp-contact__opt:hover .sp-contact__in { color: rgb(var(--mk-fg)); background: rgb(var(--mk-fg) / 0.06); }
.sp-contact__opt input:checked + .sp-contact__in { background: rgb(var(--mk-fg)); color: rgb(var(--mk-bg)); }
html[data-theme="light"] .sp-contact__opt input:checked + .sp-contact__in { color: #fff; }
.sp-contact__opt input:focus-visible + .sp-contact__in { box-shadow: var(--sp-ring); }
.sp-contact + .sp-input { margin-top: 8px; }

/* "Your details" card (right of the message on desktop): its fields, then Send across the card and the privacy line. */
.sp-card--details .sp-details { margin-top: 18px; }
.sp-card--details .sp-error { margin-top: 16px; }
.sp-card--details .sp-actions { flex-direction: column; align-items: stretch; margin-top: 18px; }

/* Screenshot picker */
.sp-attach { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.sp-attach__input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.sp-attach__btn { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: 12px; border: 1px dashed rgb(var(--mk-fg) / 0.28); font-size: 13px; font-weight: 600; cursor: pointer; transition: border-color .2s ease, background-color .2s ease; }
.sp-attach__btn:hover { border-color: rgb(var(--mk-fg) / 0.5); background: rgb(var(--mk-fg) / 0.04); }
.sp-attach__input:focus-visible + .sp-attach__btn { box-shadow: var(--sp-ring); }
.sp-attach__file { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; height: 32px; padding-inline: 12px 4px; border-radius: 999px; background: rgb(var(--mk-fg) / 0.08); font-size: 12.5px; }
.sp-attach__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.sp-attach__x { width: 26px; height: 26px; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; }
.sp-attach__x:hover { background: rgb(var(--mk-fg) / 0.1); }
.sp-attach__x:focus-visible { outline: none; box-shadow: var(--sp-ring); }
.sp-attach .sp-hint { flex-basis: 100%; }

/* Buttons */
.sp-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 46px; padding: 0 22px; border: 0; border-radius: 999px;
    background: rgb(var(--mk-acc)); color: rgb(var(--mk-on-acc)); font: inherit; font-size: 14.5px; font-weight: 700; cursor: pointer; white-space: nowrap;
    transition: transform .25s var(--mk-ease), opacity .2s ease, box-shadow .2s ease;
}
.sp-btn i { font-size: 13px; }
.sp-btn:hover { transform: translateY(-1px); }
.sp-btn:active { transform: translateY(0) scale(.98); }
.sp-btn:focus-visible { outline: none; box-shadow: var(--sp-ring); }
.sp-btn:disabled { opacity: .55; cursor: progress; transform: none; }
.sp-btn--ghost { background: rgb(var(--mk-fg) / 0.06); color: rgb(var(--mk-fg)); border: 1px solid rgb(var(--mk-fg) / 0.16); }
.sp-btn--ghost:hover { background: rgb(var(--mk-fg) / 0.1); }
.sp-btn--ghost.is-copied { border-color: rgb(var(--sp-answered) / 0.6); color: rgb(var(--sp-answered)); }
.sp-btn--block { width: 100%; }
.sp-icon-btn { width: 30px; height: 30px; flex-shrink: 0; border: 0; border-radius: 9px; background: rgb(var(--mk-fg) / 0.06); color: inherit; cursor: pointer; font-size: 12px; transition: background-color .2s ease; }
.sp-icon-btn:hover { background: rgb(var(--mk-fg) / 0.12); }
.sp-icon-btn:focus-visible { outline: none; box-shadow: var(--sp-ring); }
.sp-icon-btn.is-copied { color: rgb(var(--sp-answered)); }

.sp-actions { display: flex; flex-direction: column-reverse; gap: 12px; }
.sp-note { margin: 0; display: flex; align-items: flex-start; gap: 8px; font-size: 12px; line-height: 1.5; color: var(--sp-faint); }
.sp-note i { margin-top: 3px; font-size: 10px; }
.sp-error { margin: 0; padding: 10px 12px; border-radius: 12px; background: rgb(var(--sp-danger) / 0.1); border: 1px solid rgb(var(--sp-danger) / 0.3); color: rgb(var(--sp-danger)); font-size: 13px; line-height: 1.5; }

/* ---- Status pills ---- */
.sp-pill { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; white-space: nowrap; border: 1px solid; }
.sp-pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.sp-pill--open { color: rgb(var(--sp-open)); background: rgb(var(--sp-open) / 0.1); border-color: rgb(var(--sp-open) / 0.3); }
.sp-pill--answered { color: rgb(var(--sp-answered)); background: rgb(var(--sp-answered) / 0.1); border-color: rgb(var(--sp-answered) / 0.3); }
.sp-pill--on_hold { color: rgb(var(--sp-hold)); background: rgb(var(--sp-hold) / 0.1); border-color: rgb(var(--sp-hold) / 0.3); }
.sp-pill--closed { color: var(--sp-dim); background: rgb(var(--mk-fg) / 0.05); border-color: rgb(var(--mk-fg) / 0.14); }

/* ---- Your tickets ---- */
/* "Your tickets": one bordered list, rows split by hairlines. The card picks the row layout from its own width:
 * stacked (number + status, then subject and meta) in narrow spots, a table-like row once it is wide. */
.sp-card--mine .sp-card__in { container-type: inline-size; }
.sp-mine__head { display: flex; align-items: center; gap: 10px; }
.sp-mine__ico { width: 36px; height: 36px; border-radius: 11px; font-size: 15px; margin-inline-end: 2px; }
.sp-mine__count { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px; border: 1px solid rgb(var(--mk-fg) / 0.14); font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; font-weight: 700; color: var(--sp-dim); }
.sp-mine { list-style: none; margin: 14px 0 0; padding: 0; border: 1px solid var(--sp-line); border-radius: 14px; overflow: hidden; background: rgb(var(--mk-fg) / 0.015); }
.sp-mine > li + li { border-top: 1px solid var(--sp-line); }
/* Stacked: number, then status pushed to the end (it drops under the number when a long label does not fit), then the rest. */
.sp-mine__item {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 14px 16px; transition: background-color .2s ease;
}
.sp-mine__item:hover { background: rgb(var(--mk-fg) / 0.04); }
.sp-mine__item:focus-visible { outline: none; box-shadow: inset 0 0 0 2px rgb(var(--mk-fg) / 0.6); }
.sp-mine__id { grid-area: id; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12.5px; letter-spacing: 0.02em; color: var(--sp-dim); white-space: nowrap; }
.sp-mine__item .sp-pill { grid-area: pill; order: 1; margin-inline-start: auto; }
/* Subject and meta beside the topic icon (same icons as the form's topic chips), which spans both lines. */
.sp-mine__main { grid-area: main; order: 2; flex: 1 0 100%; display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; gap: 2px 11px; min-width: 0; }
.sp-mine__tico {
    grid-row: span 2; width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center;
    border: 1px solid rgb(var(--mk-fg) / 0.12); background: rgb(var(--mk-fg) / 0.05); color: rgb(var(--mk-fg) / 0.78); font-size: 12px;
    transition: border-color .2s ease, color .2s ease;
}
.sp-mine__item:hover .sp-mine__tico { border-color: rgb(var(--mk-fg) / 0.24); color: rgb(var(--mk-fg)); }
.sp-mine__subject { font-size: 14.5px; font-weight: 600; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-mine__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 12px; line-height: 1.5; color: var(--sp-faint); }
.sp-mine__meta time { color: var(--sp-dim); }
/* The dot between topic and date only in the one-line (wide) row: stacked, the date may wrap and leave it dangling. */
.sp-mine__sep { display: none; width: 3px; height: 3px; border-radius: 50%; background: currentColor; }
.sp-mine__meta { column-gap: 10px; }
.sp-mine__go { display: none; }
/* Under the list: a dashed panel (the stub perforation again) with a history mark and where the list comes from.
 * Centred and stacked by default; one row once the card is wide (container query below). */
.sp-mine__foot {
    margin-top: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
    padding: 20px 18px; border: 1px dashed rgb(var(--mk-fg) / 0.16); border-radius: 14px; text-align: center;
}
.sp-mine__glyph {
    width: 46px; height: 46px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    border: 1px solid rgb(var(--mk-fg) / 0.12); background: rgb(var(--mk-fg) / 0.05); color: rgb(var(--mk-fg) / 0.8); font-size: 17px;
}
.sp-mine__note { margin: 0; max-width: 30ch; font-size: 12.5px; line-height: 1.55; color: var(--sp-dim); }
.sp-mine__new { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; color: rgb(var(--sp-answered)); }
.sp-mine__meta .sp-mine__new { margin-inline-start: 4px; }
@container (min-width: 600px) {
    .sp-mine__item { display: grid; grid-template-columns: 124px minmax(0, 1fr) auto 16px; grid-template-areas: "id main pill go"; align-items: center; gap: 18px; padding: 15px 18px; }
    .sp-mine__item .sp-pill { margin-inline-start: 0; }
    .sp-mine__sep { display: block; }
    .sp-mine__meta { column-gap: 8px; }
    .sp-mine__foot { flex-direction: row; text-align: start; gap: 14px; padding: 14px 16px; }
    .sp-mine__glyph { width: 38px; height: 38px; font-size: 14px; }
    .sp-mine__note { flex: 1; max-width: none; }
    /* Flipped here, not with .sp-flip: that class sets display and would show the arrow in the stacked layout too. */
    .sp-mine__go { display: block; grid-area: go; font-size: 12px; color: var(--sp-faint); transition: color .2s ease, transform .3s var(--mk-ease); }
    html[dir="rtl"] .sp-mine__go { transform: scaleX(-1); }
    .sp-mine__item:hover .sp-mine__go { color: rgb(var(--mk-fg)); transform: translateX(3px); }
    html[dir="rtl"] .sp-mine__item:hover .sp-mine__go { transform: scaleX(-1) translateX(3px); }
}
.sp-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px rgb(var(--sp-answered) / 0.2); }

/* ---- Telegram card ---- */
/* A wide strip: white Telegram mark, the text, a white arrow button, and the logo again, large and faint, on the far end. */
.sp-card--tg { overflow: hidden; transition: transform .4s var(--mk-ease), background-color .2s ease; }
.sp-card--tg .sp-card__in {
    position: relative; display: flex; align-items: center; gap: 16px;
    background: linear-gradient(90deg, rgb(var(--mk-s1)) 40%, rgb(var(--mk-fg) / 0.06) 100%), rgb(var(--mk-s2));
}
html[dir="rtl"] .sp-card--tg .sp-card__in { background: linear-gradient(270deg, rgb(var(--mk-s1)) 40%, rgb(var(--mk-fg) / 0.06) 100%), rgb(var(--mk-s2)); }
.sp-card--tg:hover { background: rgb(var(--mk-fg) / 0.24); }
.sp-card--tg:focus-visible { outline: none; box-shadow: var(--sp-ring); }
.sp-tg__bg { position: absolute; inset-inline-end: 8%; top: 50%; transform: translateY(-50%); font-size: 120px; color: rgb(var(--mk-fg) / 0.05); pointer-events: none; }
.sp-tg__mark { position: relative; width: 46px; height: 46px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgb(var(--mk-fg)); color: rgb(var(--mk-bg)); font-size: 19px; }
.sp-tg__text { position: relative; flex: 1; min-width: 0; }
.sp-tg__go { position: relative; flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgb(var(--mk-fg)); color: rgb(var(--mk-bg)); font-size: 14px; transition: transform .3s var(--mk-ease); }
html[data-theme="light"] .sp-tg__mark, html[data-theme="light"] .sp-tg__go { color: #fff; }

/* ---- Ticket view ---- */
.sp-saved { margin-top: 18px; display: flex; gap: 14px; padding: 16px; border-radius: 18px; border: 1px solid rgb(var(--sp-answered) / 0.35); background: rgb(var(--sp-answered) / 0.07); }
.sp-saved__ico { font-size: 22px; color: rgb(var(--sp-answered)); }
.sp-saved__body { flex: 1; min-width: 0; }
.sp-saved__title { margin: 0; font-size: 16px; font-weight: 700; }
.sp-saved__sub { margin: 4px 0 12px; font-size: 13px; line-height: 1.55; color: var(--sp-dim); }
.sp-saved__row { display: flex; flex-direction: column; gap: 8px; }

.sp-view { margin-top: 18px; display: flex; flex-direction: column; gap: 12px; }
.sp-thread__head { padding-bottom: 16px; border-bottom: 1px solid var(--sp-line); }
.sp-thread__subject { margin: 0; font-family: Sora, 'Noto Sans Arabic', system-ui, sans-serif; font-size: 21px; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.sp-thread__meta { margin: 10px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 12.5px; color: var(--sp-dim); }

.sp-thread { list-style: none; margin: 0; padding: 18px 0 6px; display: flex; flex-direction: column; gap: 14px; }
.sp-msg { display: flex; align-items: flex-end; gap: 10px; max-width: 100%; }
.sp-msg--me { flex-direction: row-reverse; }
.sp-msg__ava { width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgb(var(--mk-fg) / 0.08); color: var(--sp-dim); font-size: 12px; }
.sp-msg__ava--staff { background: rgb(var(--mk-fg)); color: rgb(var(--mk-bg)); font-family: Sora, system-ui, sans-serif; font-size: 11px; font-weight: 800; letter-spacing: -0.02em; }
html[data-theme="light"] .sp-msg__ava--staff { color: #fff; }
.sp-msg__bubble { min-width: 0; max-width: min(560px, calc(100% - 42px)); padding: 10px 14px 12px; border-radius: 18px; border: 1px solid var(--sp-line); }
.sp-msg--staff .sp-msg__bubble { background: linear-gradient(160deg, rgb(var(--mk-c1)) 0%, rgb(var(--mk-c2)) 100%); border-end-start-radius: 6px; }
.sp-msg--me .sp-msg__bubble { background: rgb(var(--mk-fg) / 0.07); border-end-end-radius: 6px; }
.sp-msg__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 4px; font-size: 11.5px; color: var(--sp-faint); }
.sp-msg__who { font-weight: 700; color: rgb(var(--mk-fg) / calc(0.85 * var(--mk-tk))); }
.sp-msg__text { font-size: 14.5px; line-height: 1.6; overflow-wrap: anywhere; white-space: normal; }
.sp-msg__text a { text-decoration: underline; text-underline-offset: 2px; }
.sp-msg__img { display: block; margin-top: 8px; border-radius: 12px; overflow: hidden; border: 1px solid var(--sp-line); max-width: 280px; }
.sp-msg__img img { display: block; width: 100%; height: auto; max-height: 320px; object-fit: cover; }
.sp-msg__img:focus-visible { outline: none; box-shadow: var(--sp-ring); }
.sp-event { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 8px; font-size: 12px; color: var(--sp-faint); text-align: center; }
.sp-event i { font-size: 10px; }
.sp-event__time::before { content: '·'; margin-inline-end: 8px; }

.sp-reply { margin-top: 10px; padding-top: 16px; border-top: 1px solid var(--sp-line); display: flex; flex-direction: column; gap: 12px; }
.sp-reply__closed { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--sp-dim); }
.sp-reply__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.sp-reply .sp-attach .sp-hint { display: none; }
.sp-final { margin: 10px 0 0; padding-top: 16px; border-top: 1px solid var(--sp-line); display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; font-size: 13.5px; color: var(--sp-dim); }

.sp-dl { margin: 14px 0 16px; display: flex; flex-direction: column; }
.sp-dl > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--sp-line); }
.sp-dl > div:last-child { border-bottom: 0; }
.sp-dl dt { font-size: 12.5px; color: var(--sp-dim); }
.sp-dl dd { margin: 0; font-size: 13.5px; font-weight: 600; text-align: end; min-width: 0; overflow-wrap: anywhere; }
.sp-dl__id { display: flex; align-items: center; gap: 8px; font-family: 'JetBrains Mono', ui-monospace, monospace; }

@media (min-width: 640px) {
    .sp { padding: 96px 24px 120px; }
    .sp-grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
    .sp-actions { flex-direction: row; align-items: center; justify-content: space-between; }
    .sp-saved__row { flex-direction: row; }
    .sp-saved__row .sp-input { flex: 1; }
    .sp-card__in { padding: 22px 22px; }
}

@media (min-width: 768px) {
    .sp-stub { --sp-stub-pad: 26px; }
    .sp-home, .sp-more { gap: 16px; }
    .sp-more { margin-top: 16px; }
    .sp-title { font-size: clamp(34px, 3.6vw, 50px); line-height: 1.15; }
    .sp-lead { font-size: 15px; }
    .sp-thread__subject { font-size: 24px; }
}

/* Bento from 1024px: form (or thread) left, a column of smaller cards right. */
@media (min-width: 1024px) {
    .sp { margin-inline: max(var(--page-gutter), calc((100% - var(--page-inner)) / 2)); padding: 8px 0 0; }
    .sp-bento, .sp-view { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(320px, 1fr); align-items: start; gap: 16px; }
    .sp-bento > .sp-side, .sp-view > .sp-side { display: flex; gap: 16px; position: sticky; top: 24px; }
    .sp-bento .sp-card--mine { order: 0; }
    .sp-stubs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
    .sp-card--form .sp-card__in, .sp-card--thread .sp-card__in, .sp-limit .sp-card__in { padding: 28px 30px; }
    /* New ticket: both cards one height. The shorter one takes the room: a taller message box on the left,
       or the details' fields on the right, which keeps Send on the bottom edge. */
    .sp-split { align-items: stretch; }
    .sp-split > .sp-card > .sp-card__in { display: flex; flex-direction: column; }
    .sp-split .sp-card--details .sp-card__in { padding: 28px 26px; }
    .sp-split .sp-card--form .sp-form, .sp-split .sp-details, .sp-split .sp-field--grow, .sp-split .sp-field--grow .sp-textarea { flex: 1 0 auto; }
}

/* Home from 1200px with a history: the stubs and Telegram on the start side, "Your tickets" as one tall column at the end.
 * contain: size keeps a long history from stretching the stubs: the column takes their height and its list scrolls. */
@media (min-width: 1200px) {
    .sp-home.has-mine { grid-template-columns: minmax(0, 1fr) clamp(320px, 25%, 380px); grid-template-areas: "stubs mine" "tg mine"; align-items: start; }
    .sp-home.has-mine > .sp-stubs { grid-area: stubs; }
    .sp-home.has-mine > .sp-card--tg { grid-area: tg; }
    .sp-home.has-mine > .sp-card--mine { grid-area: mine; align-self: stretch; contain: size; }
    .sp-home.has-mine > .sp-card--mine .sp-card__in { display: flex; flex-direction: column; }
    .sp-home.has-mine .sp-mine { flex: 0 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgb(var(--mk-fg) / 0.2) transparent; }
    /* The panel takes whatever the list leaves: a short history gets a full, centred panel; a long one keeps it compact. */
    .sp-home.has-mine .sp-mine__foot { flex: 1 0 auto; }
}

@media (hover: hover) and (pointer: fine) {
    .sp-card--tg:hover { transform: translateY(-2px); }
    .sp-card--tg:hover .sp-tg__go { transform: translateX(3px); }
    html[dir="rtl"] .sp-card--tg:hover .sp-tg__go { transform: scaleX(-1) translateX(3px); }
}

@media (prefers-reduced-motion: no-preference) {
    @keyframes spRise { from { opacity: 0; transform: translateY(14px); } }
    @keyframes spIn { from { opacity: 0; transform: translateY(6px); } }
    .sp-hero, .sp-saved { animation: spRise .7s var(--mk-ease) backwards; }
    .sp-card { animation: spRise .7s var(--mk-ease) backwards; }
    .sp-card--form, .sp-card--thread, .sp-stub:nth-child(1) { animation-delay: .06s; }
    .sp-stub:nth-child(2) { animation-delay: .11s; }
    .sp-side .sp-card:nth-child(1), .sp-split .sp-card--details { animation-delay: .12s; }
    .sp-side .sp-card:nth-child(2) { animation-delay: .17s; }
    .sp-side .sp-card:nth-child(3) { animation-delay: .22s; }
    .sp-thread > li:last-child { animation: spIn .45s var(--mk-ease) backwards; }
}
@media (prefers-reduced-motion: reduce) {
    .sp *, .sp *::before, .sp *::after { transition-duration: .01ms !important; }
}