/* Public ticket pages - My Tickets, New Ticket and a ticket's conversation.
   Loaded only by those three views, on top of site.css, webapp.css and
   /assets/public.css (cards, icon tiles, page heads). Everything is scoped
   to .tp-* / .tp-page so the admin ticket views, which share webapp.css's
   ticket-* classes, are untouched. */

/* ---------- Page head ---------- */
.tp-head .wrap { padding-block: clamp(2rem, 5vw, 3rem) clamp(1.6rem, 4vw, 2.25rem); gap: .9rem; }
.tp-head h1 { font-size: clamp(2rem, 5vw, 2.9rem); }
.tp-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.tp-head-copy { display: flex; flex-direction: column; gap: .9rem; min-width: 0; }
.tp-head-actions { display: flex; gap: .6rem; flex-wrap: wrap; }
.tp-head-actions .btn svg, .tp-empty .btn svg { width: 16px; height: 16px; }
.tp-back {
  display: inline-flex; align-items: center; gap: .45rem; width: fit-content;
  color: var(--dim); text-decoration: none; font-size: .82rem; font-weight: 700; line-height: 1;
  padding: .45rem .8rem .45rem .6rem; border-radius: 999px;
  background: color-mix(in srgb, var(--ink-1) 80%, transparent); border: 1px solid var(--line-strong);
  transition: color .15s ease, border-color .15s ease;
}
.tp-back svg { width: 14px; height: 14px; transition: transform .15s ease; }
.tp-back:hover { color: var(--text); border-color: var(--ice); }
.tp-back:hover svg { transform: translateX(-2px); }
.tp-title-row { display: flex; align-items: center; gap: 1rem; min-width: 0; }
.tp-title-row > .pb-ico { width: 54px; height: 54px; border-radius: 15px; }
.tp-title-row > .pb-ico svg { width: 24px; height: 24px; }
.ticket-page-title { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.tp-title-kicker { font-family: var(--mono); font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.tp-head-detail h1 { font-size: clamp(1.55rem, 4vw, 2.3rem); overflow-wrap: anywhere; }

/* ---------- Shared bits ---------- */
.tp-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; background: #6f7b94; }
.tp-dot.is-open { background: #5ee29a; box-shadow: 0 0 0 3px rgba(94,226,154,.15); }
.tp-dot.is-new { background: var(--accent); animation: tp-pulse 2s ease-out infinite; }
@keyframes tp-pulse { 0% { box-shadow: 0 0 0 0 rgba(53,215,255,.6); } 70% { box-shadow: 0 0 0 7px rgba(53,215,255,0); } 100% { box-shadow: 0 0 0 0 rgba(53,215,255,0); } }
.tp-chip-new { border-color: rgba(53,215,255,.4); color: var(--text); }
.tp-status, .tp-new {
  display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap;
  font-size: .76rem; font-weight: 700; line-height: 1; padding: .38rem .7rem; border-radius: 999px;
  border: 1px solid var(--line-strong); background: var(--ink-2); color: var(--dim);
}
.tp-status.is-open { color: #5ee29a; border-color: rgba(94,226,154,.4); background: rgba(94,226,154,.08); }
.tp-new { color: #9be9ff; border-color: rgba(53,215,255,.45); background: rgba(53,215,255,.08); }

.tp-band { padding-block: clamp(1.75rem, 4vw, 2.5rem) clamp(3rem, 7vw, 5rem); }
.tp-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1.5rem; align-items: start; }
.tp-main { min-width: 0; display: flex; flex-direction: column; gap: 1rem; }
.tp-side { display: flex; flex-direction: column; gap: 1rem; position: sticky; top: 84px; min-width: 0; }
.tp-side-card { display: flex; flex-direction: column; gap: .8rem; padding: 1.15rem 1.2rem; }
.tp-side-card p { font-size: .88rem; }
.tp-page .tp-side-card p a, .tp-page .field-note a { color: var(--ice); font-weight: 700; text-decoration: none; }
.tp-page .tp-side-card p a:hover, .tp-page .field-note a:hover { text-decoration: underline; }
.tp-card-head { display: flex; align-items: center; gap: .7rem; }
.tp-card-head h3 { font-size: .98rem; margin: 0; }
.tp-card-head .pb-ico.sm { width: 32px; height: 32px; border-radius: 9px; }
.tp-card-head .pb-ico.sm svg { width: 16px; height: 16px; }
.tp-alert {
  display: flex; gap: .7rem; align-items: flex-start; padding: .85rem 1rem; margin-bottom: 1rem;
  border-radius: 12px; background: rgba(255,90,95,.08); border: 1px solid rgba(255,90,95,.35); color: #ffb4b6; font-size: .9rem;
}
.tp-alert svg { width: 18px; height: 18px; flex: none; color: var(--blood); margin-top: .1rem; }

/* ---------- My Tickets ---------- */
.tp-toolbar { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.tp-tabs { display: inline-flex; gap: .25rem; padding: .25rem; border-radius: 12px; background: var(--ink-1); border: 1px solid var(--line); }
.tp-tab {
  display: inline-flex; align-items: center; gap: .45rem; cursor: pointer;
  font: 700 .85rem var(--body); color: var(--dim); background: none; border: 0; padding: .5rem .85rem; border-radius: 9px;
  transition: color .15s ease, background-color .15s ease;
}
.tp-tab .n { font-family: var(--mono); font-size: .68rem; padding: .12rem .42rem; border-radius: 6px; background: var(--ink-2); border: 1px solid var(--line); }
.tp-tab:hover { color: var(--text); background: var(--ink-2); }
.tp-tab.is-active { color: #fff; background: linear-gradient(90deg, #00b8e6, #0047ff); box-shadow: 0 6px 16px -8px rgba(0,120,255,.9); }
.tp-tab.is-active .n { background: rgba(255,255,255,.18); border-color: transparent; color: #fff; }
.tp-search { position: relative; display: flex; align-items: center; flex: 0 1 280px; }
.tp-search svg { position: absolute; left: .8rem; width: 16px; height: 16px; color: #6f7b94; pointer-events: none; }
.tp-search input {
  width: 100%; padding: .62rem .9rem .62rem 2.35rem; border-radius: 11px;
  background: var(--ink-1); border: 1px solid var(--line-strong); color: var(--text); font: 500 .88rem var(--body);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.tp-search input:focus { outline: none; border-color: var(--ice); box-shadow: 0 0 0 3px rgba(126,232,255,.12); }
.tp-list { display: flex; flex-direction: column; gap: .6rem; }
.tp-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 1rem;
  padding: .95rem 1.1rem; text-decoration: none; color: inherit;
}
.tp-row-main { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.tp-row-subject { font-weight: 800; font-size: 1rem; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-row-meta { display: flex; flex-wrap: wrap; gap: .4rem; font-size: .82rem; color: var(--dim); }
.tp-row-meta .sep { color: #4f6290; }
.tp-row-side { display: flex; flex-direction: column; align-items: flex-end; gap: .4rem; }
.tp-row-tags { display: flex; gap: .4rem; }
.tp-row-when { font-family: var(--mono); font-size: .68rem; color: #7d89a3; white-space: nowrap; }
.tp-row-chev { width: 18px; height: 18px; color: #6f7b94; transition: color .15s ease, transform .15s ease; }
.tp-row:hover .tp-row-chev { color: var(--ice); transform: translateX(2px); }
.tp-row.has-new { border-color: rgba(53,215,255,.45); background: linear-gradient(90deg, rgba(53,215,255,.08), var(--ink-1) 60%); }
.tp-none { text-align: center; color: var(--dim); padding: 1.5rem; }
.tp-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .85rem; padding: 3rem 1.5rem; }
.tp-empty img { filter: drop-shadow(0 0 16px rgba(126,232,255,.35)); }
.tp-empty h2 { font-family: var(--display); font-weight: 800; font-size: 1.4rem; }
.tp-empty p { max-width: 46ch; }
.tp-quick { display: flex; flex-direction: column; gap: .1rem; margin-inline: -.4rem; }
.tp-quick a {
  display: flex; align-items: center; gap: .7rem; padding: .42rem .5rem; border-radius: 10px;
  color: var(--text); text-decoration: none; font-weight: 600; font-size: .87rem; transition: background-color .15s ease;
}
.tp-quick a .pb-ico.sm { width: 30px; height: 30px; border-radius: 9px; }
.tp-quick a .pb-ico.sm svg { width: 15px; height: 15px; }
.tp-quick a > span:not(.pb-ico) { flex: 1; min-width: 0; }
.tp-quick .go { width: 15px; height: 15px; color: #6f7b94; opacity: 0; transition: opacity .15s ease, transform .15s ease; }
.tp-quick a:hover { background: var(--ink-2); }
.tp-quick a:hover .go { opacity: 1; color: var(--ice); transform: translateX(2px); }
.tp-discord { border-color: rgba(140,158,255,.35); background: linear-gradient(180deg, rgba(88,101,242,.13), var(--ink-1) 75%); }
.tp-discord-btn { width: 100%; background: #5865f2; color: #fff; border-color: rgba(255,255,255,.15); }
.tp-discord-btn:hover { background: #6b77ff; }
.tp-discord-btn svg, .tp-discord .pb-ico svg { width: 16px; height: 16px; }

/* ---------- New Ticket ---------- */
.tp-step { display: flex; flex-direction: column; gap: 1.15rem; padding: 1.4rem; }
.tp-step-head { display: flex; align-items: center; gap: .85rem; }
.tp-step-n {
  width: 32px; height: 32px; flex: none; border-radius: 10px; display: grid; place-items: center;
  font-family: var(--mono); font-weight: 700; color: #fff; background: linear-gradient(135deg, #00b8e6, #0047ff);
  box-shadow: 0 8px 18px -8px rgba(0,120,255,.9);
}
.tp-step-head h2 { font-family: var(--display); font-size: 1.12rem; font-weight: 800; }
.tp-step-head p { color: var(--dim); font-size: .85rem; }
.tp-cats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.tp-cat {
  position: relative; display: flex; align-items: flex-start; gap: .75rem; cursor: pointer;
  padding: .85rem 2.4rem .85rem .9rem; border-radius: 12px; background: var(--ink-0); border: 1px solid var(--line);
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.tp-cat input { position: absolute; opacity: 0; pointer-events: none; }
.tp-cat .pb-ico.sm { width: 34px; height: 34px; }
.tp-cat-text { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.tp-cat-text b { font-size: .9rem; }
.tp-cat-text span { font-size: .78rem; color: var(--dim); line-height: 1.35; }
.tp-cat::after {
  content: ""; position: absolute; top: .8rem; right: .8rem; width: 18px; height: 18px; border-radius: 50%;
  border: 1.5px solid var(--line-strong); background: var(--ink-1) center / 11px no-repeat;
}
.tp-cat:hover { border-color: var(--line-strong); background: var(--ink-2); }
.tp-cat:has(input:checked) {
  border-color: color-mix(in srgb, var(--c, var(--accent)) 60%, var(--line));
  background: color-mix(in srgb, var(--c, var(--accent)) 8%, var(--ink-1));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--c, var(--accent)) 35%, transparent);
}
.tp-cat:has(input:checked)::after {
  border-color: transparent; background-color: var(--c, var(--accent));
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2305070d' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.tp-cat:has(input:focus-visible) { outline: 2px solid var(--ice); outline-offset: 2px; }
/* the tile's colour comes from its icon - mirror it onto the tile itself */
.tp-cat:has(.c-red) { --c: var(--red); }
.tp-cat:has(.c-pink) { --c: var(--pink); }
.tp-cat:has(.c-amber) { --c: var(--amber); }
.tp-cat:has(.c-green) { --c: var(--green); }
.tp-cat:has(.c-accent) { --c: var(--accent); }
.tp-cat:has(.c-purple) { --c: var(--purple); }
.tp-cat:has(.c-ice) { --c: var(--ice); }
.tp-cat:has(.c-grey) { --c: #8b97b0; }
.tp-hidden-select { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.tp-page .field label { font-size: .78rem; font-weight: 700; }
.tp-page .field input, .tp-page .field textarea {
  background: var(--ink-0); border: 1px solid var(--line-strong); border-radius: 10px;
  padding: .72rem .9rem; font-size: .92rem; transition: border-color .15s ease, box-shadow .15s ease;
}
.tp-page .field input:hover, .tp-page .field textarea:hover { border-color: #3a5182; }
.tp-page .field input:focus, .tp-page .field textarea:focus { outline: none; border-color: var(--ice); box-shadow: 0 0 0 3px rgba(126,232,255,.12); }
.tp-page .field textarea { min-height: 150px; }
.tp-page .custom-select-trigger { background-color: var(--ink-0); border-radius: 10px; min-height: 44px; padding-inline: .9rem; font-size: .9rem; }
.tp-linked {
  display: flex; align-items: center; gap: .6rem; min-height: 44px; padding: .3rem .45rem .3rem .55rem;
  border-radius: 10px; background: var(--ink-0); border: 1px dashed var(--line-strong);
}
.tp-linked img { border-radius: 6px; image-rendering: pixelated; flex: none; }
.tp-page .tp-linked input { flex: 1; min-width: 0; background: none; border: 0; padding: .3rem 0; box-shadow: none; font-weight: 700; opacity: 1; cursor: default; }
.tp-linked-pill {
  display: inline-flex; align-items: center; gap: .3rem; flex: none;
  font-size: .7rem; font-weight: 700; color: #5ee29a; padding: .28rem .55rem; border-radius: 999px;
  background: rgba(94,226,154,.08); border: 1px solid rgba(94,226,154,.35);
}
.tp-linked-pill svg { width: 12px; height: 12px; }
.tp-custom-fields { display: flex; flex-direction: column; gap: 1rem; }
.tp-attach-zone:has(.attachment-preview-list:empty):has(.attachment-hint-error:empty) { display: none; }
.tp-submit-row { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.tp-attach {
  display: inline-flex; align-items: center; gap: .5rem; height: 40px; padding: 0 .9rem; cursor: pointer;
  border-radius: 10px; background: var(--ink-2); border: 1px solid var(--line-strong); color: var(--text); font: 700 .85rem var(--body);
  transition: border-color .15s ease, color .15s ease;
}
.tp-attach svg { width: 16px; height: 16px; color: var(--ice); }
.tp-attach:hover { border-color: var(--ice); }
.tp-attach.is-icon { width: 36px; height: 36px; padding: 0; justify-content: center; background: transparent; border-color: transparent; }
.tp-attach.is-icon:hover { background: var(--ink-2); border-color: var(--line-strong); }
.tp-hint { color: #7d89a3; font-size: .76rem; }
.tp-hint kbd { font-family: var(--mono); font-size: .66rem; padding: .05rem .35rem; border-radius: 5px; border: 1px solid var(--line-strong); background: var(--ink-2); color: var(--dim); }
.tp-submit { margin-left: auto; }
.tp-submit svg, .tp-send svg { width: 15px; height: 15px; }
.tp-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; font-size: .85rem; color: var(--dim); }
.tp-checks li { position: relative; padding-left: 1.4rem; }
.tp-checks li::before { content: "✓"; position: absolute; left: 0; top: 0; color: #5ee29a; font-weight: 800; }
.tp-tips { display: flex; flex-direction: column; gap: .35rem; margin-inline: -.35rem; }
.tp-tip { display: flex; flex-direction: column; gap: .15rem; padding: .55rem .7rem; border-radius: 10px; border: 1px solid transparent; font-size: .82rem; color: var(--dim); transition: background-color .2s ease, border-color .2s ease; }
.tp-tip b { color: var(--text); font-size: .85rem; }
.tp-tip code { font-family: var(--mono); font-size: .78em; background: var(--ink-2); border: 1px solid var(--line); border-radius: 4px; padding: .05rem .3rem; color: var(--ice); }
.tp-tip.is-active { border-color: rgba(245,166,35,.4); background: rgba(245,166,35,.07); }
.tp-tip.is-active b { color: #ffcf7a; }

/* ---------- Ticket conversation ---------- */
.tp-chat .ticket-thread-card {
  height: calc(100vh - 170px); min-height: 560px; padding: 0; gap: 0; overflow: hidden;
  border-radius: 16px; background: linear-gradient(180deg, #0c1530, var(--ink-1) 160px);
}
.tp-thread-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .85rem 1.1rem; border-bottom: 1px solid var(--line); flex: none; }
.tp-thread-title { display: flex; align-items: center; gap: .55rem; font-weight: 800; font-size: .92rem; }
.tp-thread-title svg { width: 17px; height: 17px; color: var(--ice); }
.tp-live { display: inline-flex; align-items: center; gap: .45rem; font-family: var(--mono); font-size: .64rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #5ee29a; }
.tp-chat .ticket-thread { padding: 1.1rem 1.1rem .9rem; gap: .9rem; }
.tp-chat .ticket-msg-row { max-width: 80%; gap: .6rem; align-items: flex-end; }
.tp-chat .ticket-msg-avatar {
  width: 32px; height: 32px; flex: none; border-radius: 9px; overflow: hidden; display: grid; place-items: center;
  background: var(--ink-2); border: 1px solid var(--line-strong);
}
.tp-chat .ticket-msg-avatar img { width: 100%; height: 100%; image-rendering: pixelated; }
.tp-chat .ticket-msg-avatar.is-support { background: radial-gradient(circle at 50% 40%, rgba(126,232,255,.22), var(--ink-2)); border-color: rgba(53,215,255,.35); }
.tp-chat .ticket-msg-avatar.is-support img { width: 22px; height: 22px; image-rendering: auto; }
.tp-chat .ticket-msg {
  padding: .65rem .85rem .5rem; border-radius: 14px 14px 4px 14px;
  background: linear-gradient(135deg, rgba(0,184,230,.17), rgba(0,71,255,.2)); border: 1px solid rgba(53,215,255,.3);
}
.tp-chat .ticket-msg-row.is-staff .ticket-msg { border-radius: 14px 14px 14px 4px; background: var(--ink-2); border-color: var(--line-strong); }
.tp-chat .ticket-msg-author { display: flex; align-items: center; gap: .45rem; font-size: .76rem; font-weight: 800; color: var(--ice); margin-bottom: .25rem; }
.tp-chat .ticket-msg-row:not(.is-staff) .ticket-msg-author { justify-content: flex-start; text-align: left; }
/* same reading order in every bubble: name top-left, date left, time right */
.tp-chat .ticket-msg-row .ticket-msg-footer, .tp-chat .ticket-msg-row.is-staff .ticket-msg-footer { flex-direction: row; }
.tp-chat .ticket-msg-row.is-staff .ticket-msg-author { color: var(--text); }
.tp-chat .ticket-msg-row.is-staff .ticket-msg-author::after {
  content: "Staff"; font-family: var(--mono); font-size: .56rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent); padding: .14rem .4rem; border-radius: 999px; border: 1px solid rgba(53,215,255,.4); background: rgba(53,215,255,.08);
}
.tp-chat .ticket-msg-body { font-size: .9rem; line-height: 1.5; margin-bottom: .3rem; }
.tp-chat .ticket-msg-footer { font-family: var(--mono); font-size: .62rem; color: #8794ae; gap: .45rem; }
.tp-chat #reply-section { flex: none; padding: .8rem 1rem 1rem; border-top: 1px solid var(--line); background: color-mix(in srgb, var(--ink-0) 40%, transparent); }
.tp-composer { border: 1px solid var(--line-strong); border-radius: 14px; background: var(--ink-0); transition: border-color .15s ease, box-shadow .15s ease; }
.tp-composer:focus-within { border-color: var(--ice); box-shadow: 0 0 0 3px rgba(126,232,255,.12); }
.tp-chat .tp-composer #reply-body {
  width: 100%; min-height: 54px; max-height: 200px; resize: none; display: block;
  border: 0; background: none; box-shadow: none; outline: none; border-radius: 14px 14px 0 0;
  padding: .8rem .95rem .3rem; font: 500 .92rem/1.5 var(--body); color: var(--text);
}
.tp-composer .attachment-preview-list { padding-inline: .8rem; }
.tp-composer .attachment-preview-list:not(:empty) { padding-block: .4rem; }
.tp-composer .attachment-hint-error:not(:empty) { display: block; padding: 0 .95rem .3rem; }
.tp-composer-bar { display: flex; align-items: center; gap: .6rem; padding: .4rem .5rem .5rem .45rem; }
.tp-send { margin-left: auto; border-radius: 10px; }
.tp-closed {
  display: flex; align-items: center; gap: .85rem; flex: none; margin: .9rem 1rem 1rem; padding: .85rem 1rem;
  border-radius: 12px; border: 1px dashed var(--line-strong); background: var(--ink-0);
}
.tp-closed p { flex: 1; color: var(--dim); font-size: .88rem; }
.tp-closed strong { color: var(--text); }

/* rating overlay */
.tp-chat .ticket-review-overlay { border-radius: 16px; background: rgba(5,7,13,.55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.tp-chat .ticket-review-card {
  border: 0; border-top: 1px solid var(--line-strong); border-radius: 0 0 16px 16px;
  background: linear-gradient(180deg, #0f1934, var(--ink-1)); padding: 1.25rem 1.4rem; gap: .55rem;
}
.tp-chat .ticket-review-card.ticket-review-done { border: 1px solid var(--line-strong); border-radius: 16px; padding: 1.75rem 1.75rem 1.5rem; gap: .7rem; }
.tp-review-ico {
  width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; color: #ffd24d;
  background: rgba(255,210,77,.1); border: 1px solid rgba(255,210,77,.35);
}
.tp-review-ico svg { width: 18px; height: 18px; }
.tp-review-ico.is-done { color: #5ee29a; background: rgba(94,226,154,.1); border-color: rgba(94,226,154,.35); }
.tp-review-step { font-family: var(--mono); font-size: .64rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.tp-chat .ticket-review-card h3 { font-family: var(--display); font-weight: 800; font-size: 1.1rem; }
.tp-chat .ticket-review-question textarea { background: var(--ink-0); border-radius: 10px; }

/* sidebar details */
.tp-details { display: flex; flex-direction: column; }
.tp-detail { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-top: 1px solid var(--line); font-size: .86rem; }
.tp-detail:first-child { border-top: 0; padding-top: 0; }
.tp-detail .k { color: var(--dim); }
.tp-detail .v { font-weight: 700; text-align: right; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tp-player { display: inline-flex; align-items: center; gap: .45rem; }
.tp-player img { border-radius: 4px; image-rendering: pixelated; }

/* totem list in the shared death-info popup */
.tp-totems { list-style: none; margin: 0; padding: 1rem 1.25rem 1.25rem; display: flex; flex-direction: column; gap: .45rem; max-height: 50vh; overflow-y: auto; }
.tp-totems li { display: flex; align-items: center; gap: .7rem; padding: .6rem .75rem; border-radius: 10px; background: var(--ink-2); border: 1px solid var(--line); font-size: .86rem; }
.tp-totem-ico { width: 26px; height: 26px; flex: none; border-radius: 8px; display: grid; place-items: center; color: #f5c451; background: rgba(245,196,81,.1); border: 1px solid rgba(245,196,81,.3); }
.tp-totem-ico svg { width: 13px; height: 13px; }
.tp-totems-empty { padding: 1.5rem 1.25rem; color: var(--dim); text-align: center; font-size: .88rem; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .tp-layout { grid-template-columns: 1fr; }
  .tp-side { position: static; }
}
@media (max-width: 900px) {
  .tp-chat .ticket-thread-card { height: calc(100vh - 150px); min-height: 480px; }
}
@media (max-width: 640px) {
  .tp-row { grid-template-columns: auto minmax(0, 1fr); gap: .5rem .85rem; }
  .tp-row-side { grid-column: 2; flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; }
  .tp-row-chev { display: none; }
  .tp-search { flex: 1 1 100%; }
  .tp-cats { grid-template-columns: 1fr; }
  .tp-chat .ticket-msg-row { max-width: 92%; }
  .tp-hint { display: none; }
  .tp-step { padding: 1.1rem; }
}