/* ── SUPPORT 💬 + COORDINATOR 🎧 — tickets, threads, staff desk ──── */

.tk-topics { display: flex; flex-wrap: wrap; gap: 6px; }

/* ── ticket list rows (shared by the user page and the staff desk) ── */
.tk-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 10px;
  margin-bottom: 8px;
  border: var(--border-ink);
  border-radius: var(--radius);
  background: var(--paper-2);
  box-shadow: var(--shadow-hard);
  cursor: pointer;
  font-family: var(--f-body);
  color: var(--ink);
}
.tk-row:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--panel-shadow); }
.tk-row.is-open { background: var(--paper); box-shadow: var(--shadow-harder); }
.tk-row-subject { font-weight: 700; font-size: 14px; line-height: 1.25; }
.tk-row-meta { font-size: 11px; margin-top: 2px; }

.tk-status {
  font-family: var(--f-head);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border-radius: 999px;
  border: 2px solid var(--ink-line);
  white-space: nowrap;
}
.tk-status--open { background: var(--riso-yellow); color: var(--ink); }
.tk-status--answered { background: var(--success); color: #fff; }
.tk-status--closed { background: var(--locked); color: var(--paper-2); }

/* ── thread ── */
.tk-thread {
  max-height: 46vh;
  overflow-y: auto;
  padding: 4px 2px;
  margin-bottom: 10px;
}
.tk-msg { margin-bottom: 12px; }
.tk-msg-who {
  font-size: 11px;
  font-weight: 700;
  color: var(--newsprint-mute);
  margin-bottom: 3px;
}
.tk-msg-when { font-weight: 400; }

/* Speech-balloon bubbles: user's own on the left in paper, staff replies on the
   right in riso blue, so a thread scans as a conversation at a glance. */
.tk-bubble {
  display: inline-block;
  max-width: 92%;
  padding: 9px 12px;
  border: var(--border-ink);
  border-radius: var(--radius);
  background: var(--speech-fill);
  box-shadow: var(--shadow-hard);
  font-size: 14px;
  line-height: 1.4;
  white-space: pre-wrap;
  word-break: break-word;
}
.tk-msg.is-staff { text-align: right; }
.tk-msg.is-staff .tk-bubble {
  background: var(--riso-blue);
  color: #fff;
  text-align: left;
}

.tk-composer { border-top: 2px dashed var(--halftone); padding-top: 10px; }
.tk-composer.is-closed { opacity: 0.6; }
.tk-reply { width: 100%; resize: vertical; margin-bottom: 8px; }
.tk-send { flex: 0 0 auto; }

.tk-detail:empty { display: none; }
.tk-detail-meta { margin: -6px 0 10px; }

/* ── coordinator desk ── */
.co-filters { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }

.co-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1.5px dashed var(--halftone);
  flex-wrap: wrap;
}
.co-user:last-child { border-bottom: 0; }
.co-user.is-busy { opacity: 0.55; pointer-events: none; }
.co-uname { font-weight: 700; font-size: 14px; }
/* A flex child will not shrink below its content width without min-width:0,
   so without this the email pushes out and runs under the tier badge. */
.co-uinfo { min-width: 0; flex: 1 1 140px; }
.co-uemail,
.co-uname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.co-uemail { font-size: 11px; }
.co-exp { font-size: 11px; white-space: nowrap; }
.co-uactions { display: flex; gap: 4px; flex: 0 0 auto; }
/* On a phone the three tier chips take their own row rather than fighting the
   name column for space. LEFT-aligned, not right: right-aligning them left a
   band of dead space under the name and made the chips read as belonging to
   nothing. Flush left, they sit directly beneath the person they act on. */
@media (max-width: 420px) {
  .co-uactions { width: 100%; justify-content: flex-start; margin-top: 2px; }
}

.co-tier {
  font-family: var(--f-head);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 999px;
  border: 2px solid var(--ink-line);
  background: var(--paper-sunk);
  white-space: nowrap;
  margin-left: 6px;
}
.co-tier--premium { background: var(--riso-yellow); }
.co-tier--promax { background: var(--riso-purple); color: #fff; }

.co-thread:empty { display: none; }
.co-thread-meta { margin: -6px 0 10px; text-transform: capitalize; }
.co-tickets { max-height: 52vh; overflow-y: auto; }
.co-users { max-height: 40vh; overflow-y: auto; }