/* ═══════════════════════════════════════════════════════════════
   Customer-Facing Support & Tickets UI (Settings → Support)
   ═══════════════════════════════════════════════════════════════ */

.sup-nav-badge{
  margin-left:auto;
  min-width:18px;height:18px;padding:0 6px;
  background:var(--nd);color:#fff;
  border-radius:999px;
  font-size:10px;font-weight:800;line-height:18px;text-align:center;
}

.sup-ticket-list-cust{display:flex;flex-direction:column;gap:8px}

.sup-ticket-card{
  display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;
  padding:12px 14px;background:var(--s1);border:1px solid var(--b1);
  border-left:3px solid var(--pc,var(--t4));
  border-radius:10px;cursor:pointer;transition:var(--tr);
}
.sup-ticket-card:hover{border-color:var(--np);transform:translateX(2px);box-shadow:var(--sh-sm)}

.sup-tc-prio{width:8px;height:8px;border-radius:50%;background:var(--pc,var(--t4));box-shadow:0 0 8px color-mix(in srgb, var(--pc,var(--t4)) 60%, transparent)}

.sup-tc-main{display:flex;flex-direction:column;gap:3px;min-width:0}
.sup-tc-subject{font-size:13.5px;font-weight:700;color:var(--t1);line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sup-tc-meta{font-size:11px;color:var(--t4);display:flex;gap:8px;align-items:center;flex-wrap:wrap}

.sup-tc-status{
  font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  padding:3px 9px;border-radius:999px;white-space:nowrap;
}
.sup-tc-status.open{background:rgba(217,64,64,.14);color:var(--nd)}
.sup-tc-status.in_progress{background:rgba(212,148,58,.14);color:var(--na)}
.sup-tc-status.waiting_customer{background:rgba(59,158,255,.14);color:var(--nb)}
.sup-tc-status.resolved{background:rgba(29,217,122,.14);color:var(--ng)}
.sup-tc-status.closed{background:rgba(148,148,148,.14);color:var(--t4)}

.sup-tc-cat{font-size:9.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:1px 7px;border-radius:5px;background:var(--s2);color:var(--t4)}

/* Form */
.sup-form-row{margin-bottom:12px}
.sup-form-row-2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sup-form-field{display:flex;flex-direction:column;gap:5px}
.sup-form-field label{font-size:10.5px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:.5px}
.sup-form-field input,
.sup-form-field select,
.sup-form-field textarea{
  padding:9px 12px;background:var(--s2);border:1px solid var(--b2);border-radius:var(--r);
  color:var(--t1);font-family:var(--font);font-size:13px;outline:none;transition:var(--tr);
}
.sup-form-field input:focus,
.sup-form-field select:focus,
.sup-form-field textarea:focus{
  border-color:var(--np);box-shadow:0 0 0 3px rgba(200,149,90,.12);
}
.sup-form-field textarea{resize:vertical;min-height:60px;font-family:var(--font)}

/* Thread-Messages */
.sup-msg{
  display:flex;gap:10px;align-items:flex-start;
  padding:12px 14px;background:var(--s2);border:1px solid var(--b1);border-radius:10px;
}
.sup-msg.customer{background:color-mix(in srgb, var(--np) 7%, var(--s2));border-color:color-mix(in srgb, var(--np) 25%, var(--b1))}
.sup-msg.staff{background:var(--s1);border-left:3px solid var(--nb)}
.sup-msg.system{background:var(--s2);font-style:italic;color:var(--t4);border-left:3px solid var(--t4)}
.sup-msg-avatar{
  width:32px;height:32px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:800;color:#fff;
  background:linear-gradient(135deg, var(--acol,var(--np)), color-mix(in srgb, var(--acol,var(--np)) 70%, #fff));
}
.sup-msg-body{flex:1;min-width:0}
.sup-msg-hdr{font-size:11px;color:var(--t4);display:flex;align-items:center;gap:6px;margin-bottom:4px}
.sup-msg-author{font-weight:700;color:var(--t2);font-size:11.5px}
.sup-msg-text{font-size:13px;color:var(--t1);line-height:1.5;white-space:pre-wrap;word-wrap:break-word}

.sup-empty{
  padding:40px 20px;text-align:center;color:var(--t4);font-size:13px;
  background:var(--s1);border:1px dashed var(--b2);border-radius:10px;
}
.sup-empty-ico{font-size:36px;margin-bottom:10px;opacity:.5}

/* SLA Badge */
.sla-badge{
  display:inline-flex;align-items:center;gap:4px;
  font-size:10px;font-weight:800;letter-spacing:.03em;
  padding:2px 7px;border-radius:999px;white-space:nowrap;
}
.sla-badge.ok{background:rgba(29,217,122,.14);color:var(--ng);border:1px solid rgba(29,217,122,.35)}
.sla-badge.warning{background:rgba(212,148,58,.14);color:var(--na);border:1px solid rgba(212,148,58,.35)}
.sla-badge.breach{background:rgba(217,64,64,.14);color:var(--nd);border:1px solid rgba(217,64,64,.45)}
.sla-badge::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor}