/* Tenant Support screens (support.js): queue lanes, ticket detail, agent dashboard. */

.sp-card { display: grid; align-content: start; gap: 12px; }
.sp-card__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; }
.main-content .sp-card__head h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 1.08rem; }
.sp-card__head h2 .lucide { width: 17px; height: 17px; color: var(--link); }
.sp-card__head a { display: inline-flex; align-items: center; gap: 4px; font-size: .84rem; font-weight: 700; text-decoration: none; }
.sp-card__head a .lucide { width: 14px; height: 14px; }
.sp-sub { display: block; margin-top: 2px; font-size: .76rem; color: var(--muted); }
.sp-id { font-weight: 800; font-variant-numeric: tabular-nums; text-decoration: none; }
.sp-overdue { display: inline-flex; align-items: center; gap: 4px; margin-right: 6px; color: var(--tone-bad); font-weight: 700; font-size: .82rem; }
.sp-met { display: inline-flex; align-items: center; gap: 4px; color: var(--tone-good); font-weight: 700; font-size: .82rem; }
.sp-overdue .lucide, .sp-met .lucide { width: 14px; height: 14px; }

/* Toolbar */
.sp-toolbar { align-items: flex-end; }
.sp-toolbar .field select { min-height: 40px; padding: 8px 12px; border: 1px solid var(--field-border); border-radius: 10px; background: var(--field-bg); color: var(--ink); }
.sp-toolbar__note { display: flex; align-items: center; gap: 6px; margin: 0 0 10px; flex-basis: 100%; }
.sp-toolbar__note .lucide { width: 14px; height: 14px; flex: none; }
.sp-race { margin: 0; }

/* Lanes */
.sp-lanes { display: grid; gap: 16px; }
.sp-lane { display: grid; gap: 10px; padding-left: 14px; border-left: 4px solid var(--p3); }
.sp-lane--p1 { border-left-color: var(--p1); }
.sp-lane--p2 { border-left-color: var(--p2); }
.sp-lane--p4 { border-left-color: var(--p4); border-left-style: dashed; }
.sp-lane__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 14px; }
.main-content .sp-lane__head h2 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 1rem; }
.sp-lane__count { font-size: .9rem; font-weight: 700; color: var(--ink); }
.sp-lane__head p { margin: 0; }
.sp-lane__empty { display: flex; align-items: center; gap: 6px; margin: 0; padding: 10px 14px; border: 1px dashed var(--field-border); border-radius: 12px; }
.sp-lane__empty .lucide { width: 15px; height: 15px; color: var(--tone-good); }
.sp-queue-table td:first-child { white-space: nowrap; }
.mz-table tr.sp-breached td:first-child { box-shadow: inset 3px 0 0 var(--tone-bad); }
.mz-table tr[data-open]:focus-visible { outline: 3px solid var(--info); outline-offset: -3px; }
.mz-table tr.sp-new td { animation: sp-new 2.4s ease-out 1; }
.sp-newtag { margin-left: 6px; padding: 1px 6px; border-radius: 99px; background: var(--tone-live-bg); color: var(--tone-live); font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
@keyframes sp-new { from { background: var(--tone-live-bg); } }
@media (prefers-reduced-motion: reduce) { .mz-table tr.sp-new td { animation: none; } }
.sp-issue { max-width: 260px; }

/* Dashboard */
.sp-mylist, .sp-feedback, .sp-notelist { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sp-mylist a { display: grid; gap: 4px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--control-bg); color: var(--ink); text-decoration: none; }
.sp-mylist a:hover { border-color: var(--brand-200); background: var(--hover-bg); }
.sp-mylist__top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sp-mylist__text { font-size: .88rem; }
.sp-feedback li { display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); }
.sp-feedback p { margin: 0; color: var(--ink); }
.sp-stars { color: #d88a00; font-size: 1.05rem; letter-spacing: 1px; }
.sp-stars span { color: var(--line); }
html[data-theme="dark"] .sp-stars { color: #ffc75a; }
html[data-theme="dark"] .sp-stars span { color: rgba(255, 255, 255, .2); }
.sp-restrict { display: flex; align-items: center; gap: 6px; margin: 0; }
.sp-restrict .lucide { width: 14px; height: 14px; }
.sp-denied { padding: 48px 20px; }

/* Ticket header */
.sp-head__badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.sp-actions { align-self: center; }
.sp-noact { display: flex; align-items: center; gap: 6px; margin: 0; max-width: 320px; }
.sp-noact .lucide { width: 15px; height: 15px; flex: none; }
.sp-summary { margin: 0; font-size: 1rem; font-weight: 550; color: var(--ink); }

/* Escalation chain */
.sp-chain { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.sp-chain li { position: relative; padding: 5px 12px 5px 10px; border-radius: 99px; background: var(--surface-2); color: var(--muted); font-size: .78rem; font-weight: 650; }
.sp-chain li.is-past { color: var(--ink); }
.sp-chain li.is-past::before { content: "✓ "; color: var(--tone-good); }
.sp-chain li.is-current { background: var(--brand-500); color: #fff; }
.sp-chain li.is-current::before { content: "● "; }

/* SLA */
.sp-sla { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.sp-sla__row { display: grid; gap: 5px; }
.sp-sla__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; }
.sp-sla__top strong { font-size: .9rem; }
.sp-sla__row small { font-size: .74rem; color: var(--muted); }
.sp-sla__row.is-breached .sp-sla__top strong { color: var(--tone-bad); }
.sp-sla__note { display: flex; gap: 6px; margin: 0; }
.sp-sla__note .lucide { width: 14px; height: 14px; flex: none; margin-top: 2px; }

/* Contact */
.sp-ctabs { border-radius: 14px; }
.sp-ctabs button .lucide { width: 15px; height: 15px; }
.sp-panel { display: grid; gap: 10px; }
.sp-panel .field select, .sp-panel .field input, .sp-panel .field textarea, .sp-notes textarea { border-color: var(--field-border); background: var(--field-bg); color: var(--ink); }
.sp-panel .small { display: flex; align-items: center; gap: 6px; margin: 0; }
.sp-panel .small .lucide { width: 14px; height: 14px; flex: none; }
.sp-call { display: grid; gap: 10px; }
.sp-call__state { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--tone-live-bg); color: var(--tone-live); }
.sp-call__state strong { color: inherit; }
.sp-live { width: 10px; height: 10px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 4px rgba(15, 157, 138, .25); animation: mz-pulse 1.4s infinite; }
.sp-ring .lucide { width: 18px; height: 18px; animation: sp-ring 1s ease-in-out infinite; }
@keyframes sp-ring { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-14deg); } 75% { transform: rotate(14deg); } }
@media (prefers-reduced-motion: reduce) { .sp-live, .sp-ring .lucide { animation: none; } }
.main-content .sp-subhead { display: flex; align-items: center; gap: 7px; margin: 6px 0 0; font-size: .92rem; }
.sp-subhead .lucide { width: 16px; height: 16px; color: var(--link); }
.sp-thread { display: grid; gap: 8px; max-height: 420px; overflow: auto; margin: 0; padding: 2px; list-style: none; }
.sp-msg { display: grid; gap: 4px; max-width: 84%; padding: 10px 12px; border-radius: 14px 14px 14px 4px; background: var(--surface-2); }
.sp-msg--out { justify-self: end; border-radius: 14px 14px 4px 14px; background: var(--tone-live-bg); }
.sp-msg--system { opacity: .85; border: 1px dashed var(--field-border); }
.sp-msg p { margin: 0; color: var(--ink) !important; font-size: .9rem; overflow-wrap: anywhere; }
.sp-msg__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: .72rem; color: var(--muted); }
.sp-msg__meta .lucide { width: 13px; height: 13px; }
.sp-msg__subject { font-size: .88rem; }
.sp-thread__empty { padding: 12px; border: 1px dashed var(--field-border); border-radius: 12px; }

/* Notes and resolution */
.sp-notes { box-shadow: inset 0 0 0 1px var(--tone-warn-bg), var(--glass-shadow) !important; }
.sp-notelist li { display: grid; gap: 4px; padding: 8px 10px; border-left: 3px solid var(--tone-warn); border-radius: 0 10px 10px 0; background: var(--tone-warn-bg); }
.sp-notelist li.small { border: 0; background: none; padding: 0; }
.sp-notelist p { margin: 0; color: var(--ink) !important; font-size: .88rem; }
.sp-notelist small { margin-left: 4px; }
.sp-rating { display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); }
.sp-rating p { margin: 0; }
.sp-await { display: flex; align-items: center; gap: 6px; margin: 0; }
.sp-await .lucide { width: 14px; height: 14px; animation: mz-spin 1s linear infinite; }

@media (max-width: 760px) {
  .sp-lane { padding-left: 10px; }
  .sp-msg { max-width: 100%; }
  .sp-actions { justify-content: flex-start !important; }
  .sp-head { flex-direction: column; align-items: stretch; }
}
.sp-card .mz-kv--cols dt code { display: block; width: fit-content; max-width: 100%; margin-top: 2px; font-size: .72rem; font-weight: 500; overflow-wrap: anywhere; }
.sp-chain { margin-top: 4px; }
.sp-stats { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.sp-panel .small.sp-callline { display: block; }
.sp-callline .lucide { display: inline-block; margin-right: 4px; vertical-align: -2px; }