.ticket-topbar-button {
  align-items: center;
  display: inline-flex;
  gap: .55rem;
  white-space: nowrap;
}

.ticket-counter-badge {
  background: var(--accent);
  border-radius: 2rem;
  color: #fff;
  font-size: .68rem;
  font-weight: 800;
  margin-left: auto;
  min-width: 1.3rem;
  padding: .08rem .4rem;
  text-align: center;
}

.ticket-counter-badge[hidden] {
  display: none !important;
}

.ticket-counter-badge--light {
  background: #fff;
  color: #151922;
}

.ticket-shell {
  margin: 0 auto;
  max-width: 1080px;
  width: 100%;
}

.ticket-shell--narrow {
  max-width: 780px;
}

.ticket-page-header,
.ticket-detail-header {
  align-items: flex-start;
  display: flex;
  gap: 1.5rem;
  justify-content: space-between;
}

.ticket-page-header h1,
.ticket-detail-header h1 {
  margin-bottom: .45rem;
}

.ticket-page-header p,
.ticket-detail-header p {
  color: var(--muted);
  margin: 0;
}

.ticket-detail-controls {
  align-items: flex-end;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: .65rem;
}

.ticket-page-header .eyebrow {
  color: var(--accent);
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .12em;
  margin-bottom: .45rem;
  text-transform: uppercase;
}

.ticket-back-link {
  color: var(--muted);
  font-size: .9rem;
  font-weight: 700;
  text-decoration: none;
  width: fit-content;
}

.ticket-back-link:hover {
  color: var(--text);
}

.ticket-list {
  display: grid;
  gap: .75rem;
}

.ticket-list-card {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  color: var(--text);
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  padding: 1rem 1.1rem;
  text-decoration: none;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.ticket-list-card:hover {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  box-shadow: var(--shadow-soft);
  transform: translateY(-1px);
}

.ticket-list-card--attention {
  border-left: 3px solid #f59e0b;
}

.ticket-list-card__main {
  display: grid;
  gap: .25rem;
  min-width: 0;
}

.ticket-list-card__main strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ticket-list-card__main small,
.ticket-detail-header small {
  color: var(--muted);
}

.ticket-reference {
  color: var(--accent);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .06em;
}

.ticket-status {
  border: 1px solid transparent;
  border-radius: 999px;
  flex: 0 0 auto;
  font-size: .76rem;
  font-weight: 800;
  padding: .35rem .65rem;
}

.ticket-status--open {
  background: color-mix(in srgb, #f59e0b 14%, transparent);
  border-color: color-mix(in srgb, #f59e0b 38%, transparent);
  color: #d97706;
}

.ticket-status--answered {
  background: color-mix(in srgb, #22c55e 13%, transparent);
  border-color: color-mix(in srgb, #22c55e 35%, transparent);
  color: #16a34a;
}

.ticket-status--closed {
  background: color-mix(in srgb, var(--muted) 12%, transparent);
  border-color: color-mix(in srgb, var(--muted) 28%, transparent);
  color: var(--muted);
}

.ticket-form {
  display: grid;
  gap: .65rem;
}

.ticket-form label,
.ticket-filters label span {
  font-size: .86rem;
  font-weight: 750;
}

.ticket-form textarea {
  min-height: 8rem;
  resize: vertical;
}

.ticket-form input[type="file"] {
  background: color-mix(in srgb, var(--surface-raised) 75%, transparent);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  padding: .8rem;
}

.ticket-form small,
.optional {
  color: var(--muted);
  font-weight: 500;
}

.ticket-form__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  margin-top: .65rem;
}

.ticket-thread {
  display: grid;
  gap: .8rem;
}

[data-ticket-conversation].is-live-updated {
  animation: ticket-live-update .45s ease-out;
}

@keyframes ticket-live-update {
  from { opacity: .72; }
  to { opacity: 1; }
}

.ticket-message {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  max-width: 86%;
  padding: 1rem 1.1rem;
}

.ticket-message--administrator {
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
  border-color: color-mix(in srgb, var(--accent) 30%, var(--line));
  justify-self: end;
}

.ticket-message.is-unread {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 24%, transparent);
}

.ticket-message header {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: .45rem 1rem;
  justify-content: space-between;
  margin-bottom: .65rem;
}

.ticket-message time {
  color: var(--muted);
  font-size: .78rem;
}

.ticket-message__body {
  overflow-wrap: anywhere;
  white-space: normal;
}

.ticket-attachment {
  color: var(--accent);
  display: grid;
  font-size: .8rem;
  font-weight: 700;
  gap: .4rem;
  margin-top: .9rem;
  max-width: 420px;
  text-decoration: none;
}

.ticket-attachment img {
  aspect-ratio: 16 / 9;
  background: #090b0f;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  object-fit: contain;
  width: 100%;
}

.ticket-compose {
  margin-top: .5rem;
}

.ticket-compose h2 {
  font-size: 1.05rem;
  margin-bottom: .25rem;
}

.ticket-state-form,
.ticket-confirm-form {
  margin: 0;
}

.ticket-confirm-dialog__panel {
  width: min(32rem, calc(100vw - 2rem));
}

.ticket-confirm-dialog__panel > p {
  color: var(--muted);
  margin: 0;
}

.ticket-confirm-dialog__actions {
  align-items: center;
}

.ticket-closed-note {
  align-items: center;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1rem;
}

.ticket-closed-note strong {
  color: var(--text);
}

.ticket-pagination {
  align-items: center;
  display: flex;
  gap: .8rem;
  justify-content: center;
}

.ticket-empty {
  align-items: center;
  color: var(--muted);
  display: grid;
  justify-items: center;
  min-height: 210px;
  text-align: center;
}

.ticket-empty > span {
  color: var(--accent);
  font-size: 2rem;
}

.ticket-empty h2,
.ticket-empty p {
  margin: 0;
}

.ticket-filters {
  align-items: end;
  display: grid;
  gap: .8rem;
  grid-template-columns: minmax(220px, 1fr) minmax(160px, .35fr) auto;
}

.ticket-filters label {
  display: grid;
  gap: .4rem;
}

.ticket-metric {
  align-items: flex-end;
  background: color-mix(in srgb, #f59e0b 12%, var(--surface));
  border: 1px solid color-mix(in srgb, #f59e0b 35%, var(--line));
  border-radius: var(--radius-lg);
  display: flex;
  gap: .45rem;
  padding: .75rem 1rem;
}

.ticket-metric strong {
  color: #d97706;
  font-size: 1.65rem;
  line-height: 1;
}

.ticket-metric span {
  color: var(--muted);
  font-size: .78rem;
}

@media (max-width: 760px) {
  .ticket-page-header,
  .ticket-detail-header {
    align-items: stretch;
    flex-direction: column;
  }

  .ticket-page-header > .button {
    width: 100%;
  }

  .ticket-detail-controls {
    align-items: stretch;
  }

  .ticket-detail-controls > .button,
  .ticket-state-form > .button {
    width: 100%;
  }

  .ticket-filters {
    grid-template-columns: 1fr;
  }

  .ticket-message {
    max-width: 96%;
  }

  .ticket-topbar-button span:first-child {
    display: none;
  }

  .ticket-topbar-button::before {
    content: "✉";
  }
}

@media (max-width: 520px) {
  .ticket-list-card {
    align-items: flex-start;
    flex-direction: column;
  }

  .ticket-message {
    max-width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-ticket-conversation].is-live-updated {
    animation: none;
  }
}