/* Ticket detail workspaces and large attachment uploader */
.ticket-detail-page {
  padding: 1.5rem clamp(0.75rem, 2.5vw, 2rem) 3rem;
}
.ticket-detail-shell { width: 100%; max-width: 1280px; margin: 0 auto; }
.ticket-detail-shell-wide { max-width: 1500px; }
.ticket-back-nav { margin-bottom: 1rem; }
.ticket-back-nav ol { margin: 0; }
.ticket-back-nav > a,
.ticket-back-nav .breadcrumb-item a {
  display: inline-flex; align-items: center; gap: 0.45rem; color: var(--sp-text-muted);
  font-size: 0.84rem; font-weight: 600; text-decoration: none;
}
.ticket-back-nav > a:hover,
.ticket-back-nav .breadcrumb-item a:hover { color: var(--sp-primary); }

.ticket-detail-header {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1.25rem;
  padding: 0.25rem 0 1.25rem; border-bottom: 1px solid var(--sp-border);
}
.ticket-detail-title { min-width: 0; }
.ticket-reference,
.ticket-id-badge {
  display: inline-flex; align-items: center; gap: 0.4rem; color: var(--sp-primary);
  font-size: 0.78rem; font-weight: 800; text-transform: uppercase;
}
.ticket-detail-header h1 {
  margin: 0.35rem 0 0.4rem; color: var(--sp-text); font-size: 1.55rem; line-height: 1.25;
  overflow-wrap: anywhere; letter-spacing: 0;
}
.ticket-detail-header p,
.ticket-meta-row { margin: 0; color: var(--sp-text-muted); font-size: 0.82rem; }
.ticket-meta-row { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem; }
.ticket-header-state { display: flex; align-items: center; justify-content: flex-end; gap: 0.45rem; flex-wrap: wrap; }
.ticket-state {
  display: inline-flex; align-items: center; gap: 0.4rem; width: max-content; padding: 0.35rem 0.6rem;
  border: 1px solid var(--sp-border); border-radius: 6px; color: var(--sp-text-muted);
  background: var(--sp-surface-alt); font-size: 0.72rem; font-weight: 750; white-space: nowrap;
}
.ticket-state > span { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.ticket-state-open { color: #38bdf8; }
.ticket-state-waiting_reply { color: #f59e0b; }
.ticket-state-replied { color: #22c55e; }
.ticket-state-closed { color: #94a3b8; }
.ticket-state-hold { color: #f59e0b; }

.ticket-summary-strip {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 1rem 0; border: 1px solid var(--sp-border); background: var(--sp-surface); border-radius: 8px;
}
.ticket-summary-strip > div { display: flex; align-items: center; gap: 0.7rem; min-width: 0; padding: 0.8rem 1rem; }
.ticket-summary-strip > div + div { border-left: 1px solid var(--sp-border); }
.ticket-summary-strip > div > i { color: var(--sp-text-muted); font-size: 1rem; }
.ticket-summary-strip span { display: flex; flex-direction: column; min-width: 0; }
.ticket-summary-strip small { color: var(--sp-text-muted); font-size: 0.68rem; }
.ticket-summary-strip strong { color: var(--sp-text); font-size: 0.8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ticket-detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) 318px; gap: 1rem; align-items: start; }
.ticket-conversation-column { min-width: 0; }
.ticket-conversation-panel,
.ticket-composer,
.ticket-side-panel {
  border: 1px solid var(--sp-border); border-radius: 8px; background: var(--sp-surface); overflow: hidden;
}
.ticket-panel-heading,
.ticket-composer > header {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.85rem 1rem; border-bottom: 1px solid var(--sp-border); background: var(--sp-surface-alt);
}
.ticket-panel-heading > div,
.ticket-composer > header { display: flex; align-items: center; }
.ticket-panel-heading > div { gap: 0.65rem; }
.ticket-panel-icon,
.ticket-composer > header > span {
  display: grid; place-items: center; width: 32px; height: 32px; flex: 0 0 32px;
  border-radius: 6px; background: rgba(var(--sp-primary-rgb), 0.13); color: var(--sp-primary);
}
.ticket-panel-heading h2,
.ticket-composer h2,
.ticket-side-panel h2 { margin: 0; color: var(--sp-text); font-size: 0.88rem; letter-spacing: 0; }
.ticket-panel-heading p,
.ticket-composer header p { margin: 0.15rem 0 0; color: var(--sp-text-muted); font-size: 0.71rem; }
.ticket-live-label { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--sp-text-muted); font-size: 0.68rem; white-space: nowrap; }
.ticket-live-label i { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; }

.ticket-message-list { padding: 0.75rem 1rem; }
.ticket-message { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 0.75rem; padding: 0.8rem 0; }
.ticket-message + .ticket-message { border-top: 1px solid var(--sp-border); }
.ticket-message-avatar {
  display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--sp-border);
  border-radius: 50%; color: var(--sp-text-muted); background: var(--sp-surface-alt);
}
.ticket-message-staff .ticket-message-avatar { color: var(--sp-primary); background: rgba(var(--sp-primary-rgb), 0.1); border-color: rgba(var(--sp-primary-rgb), 0.25); }
.ticket-message-content { min-width: 0; }
.ticket-message-content > header { display: flex; align-items: center; gap: 0.45rem; min-height: 24px; }
.ticket-message-content > header strong { color: var(--sp-text); font-size: 0.8rem; }
.ticket-message-content > header span { color: var(--sp-primary); font-size: 0.63rem; font-weight: 750; }
.ticket-message-content > header time { margin-left: auto; color: var(--sp-text-light); font-size: 0.66rem; white-space: nowrap; }
.ticket-message-body { color: var(--sp-text); font-size: 0.86rem; line-height: 1.65; overflow-wrap: anywhere; }
.ticket-message-body > :last-child { margin-bottom: 0; }
.ticket-message-body img { max-width: 100%; height: auto; }
.ticket-system-event {
  display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 0.55rem; align-items: center;
  margin: 0.45rem 0; padding: 0.55rem 0.7rem; border: 1px dashed var(--sp-border); border-radius: 6px;
  color: var(--sp-text-muted); background: var(--sp-surface-alt); font-size: 0.7rem;
}
.ticket-system-event > span { display: grid; place-items: center; }
.ticket-system-event time { font-size: 0.62rem; white-space: nowrap; }

.ticket-message-files { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.55rem; margin-top: 0.7rem; }
.ticket-file-media,
.ticket-file-document {
  min-width: 0; margin: 0; overflow: hidden; border: 1px solid var(--sp-border); border-radius: 6px;
  background: var(--sp-surface-alt); color: var(--sp-text); text-decoration: none;
}
.ticket-file-media img,
.ticket-file-media video { display: block; width: 100%; max-height: 320px; object-fit: contain; background: #080c14; }
.ticket-file-media > span,
.ticket-file-media figcaption { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.55rem 0.65rem; font-size: 0.68rem; }
.ticket-file-media figcaption > span,
.ticket-file-image > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ticket-file-media small { margin-left: 0.4rem; color: var(--sp-text-muted); }
.ticket-file-document { display: flex; align-items: center; gap: 0.6rem; padding: 0.7rem; }
.ticket-file-document > i:first-child { color: #f87171; font-size: 1.25rem; }
.ticket-file-document span { display: flex; flex: 1; min-width: 0; flex-direction: column; }
.ticket-file-document strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.72rem; }
.ticket-file-document small { color: var(--sp-text-muted); font-size: 0.64rem; }

.ticket-composer { margin-top: 1rem; }
.ticket-composer > header { justify-content: flex-start; gap: 0.65rem; }
.ticket-composer form > textarea,
.ticket-rating-panel textarea {
  display: block; width: 100%; resize: vertical; border: 0; border-bottom: 1px solid var(--sp-border);
  border-radius: 0; outline: 0; color: var(--sp-text); background: var(--sp-surface); padding: 1rem;
  min-height: 130px; font-size: 0.87rem; line-height: 1.55;
}
.ticket-composer form > textarea:focus { box-shadow: inset 3px 0 0 var(--sp-primary); }
.ticket-composer footer {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.75rem 1rem;
  border-top: 1px solid var(--sp-border); background: var(--sp-surface-alt);
}
.ticket-composer footer > span { color: var(--sp-text-muted); font-size: 0.68rem; }
.ticket-composer footer button { width: auto; }

.ticket-detail-sidebar { position: sticky; top: 76px; display: grid; gap: 0.7rem; }
.ticket-side-panel > header { display: flex; align-items: center; gap: 0.55rem; padding: 0.75rem 0.85rem; border-bottom: 1px solid var(--sp-border); background: var(--sp-surface-alt); }
.ticket-side-panel > header > i { color: var(--sp-primary); }
.ticket-detail-list { margin: 0; padding: 0.25rem 0.85rem; }
.ticket-detail-list > div { display: grid; grid-template-columns: minmax(90px, 0.75fr) 1.25fr; gap: 0.75rem; padding: 0.65rem 0; border-bottom: 1px solid var(--sp-border); }
.ticket-detail-list > div:last-child { border-bottom: 0; }
.ticket-detail-list dt { color: var(--sp-text-muted); font-size: 0.68rem; font-weight: 650; }
.ticket-detail-list dd { margin: 0; color: var(--sp-text); font-size: 0.72rem; text-align: right; overflow-wrap: anywhere; }
.ticket-priority-value { display: inline-flex; align-items: center; justify-content: flex-end; gap: 0.35rem; text-transform: capitalize; }
.ticket-priority-value i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ticket-priority-low { color: #94a3b8 !important; }
.ticket-priority-normal { color: #38bdf8 !important; }
.ticket-priority-high { color: #f59e0b !important; }
.ticket-priority-urgent { color: #ef4444 !important; }
.ticket-side-notice,
.ticket-side-action,
.ticket-private-link,
.ticket-closed-state {
  display: flex; align-items: flex-start; gap: 0.7rem; padding: 0.8rem; border: 1px solid var(--sp-border);
  border-radius: 8px; color: var(--sp-text-muted); background: var(--sp-surface); font-size: 0.7rem;
}
.ticket-side-notice > i { color: #f59e0b; font-size: 1rem; }
.ticket-side-notice p,
.ticket-private-link p { margin: 0; line-height: 1.5; }
.ticket-side-success > i { color: #22c55e; }
.ticket-side-action { display: grid; }
.ticket-side-action > div { display: flex; align-items: center; gap: 0.65rem; }
.ticket-side-action > div > i { color: #22c55e; font-size: 1.1rem; }
.ticket-side-action span { display: flex; flex-direction: column; }
.ticket-side-action strong { color: var(--sp-text); font-size: 0.75rem; }
.ticket-side-action small { color: var(--sp-text-muted); font-size: 0.64rem; }
.ticket-side-action form button { width: 100%; }
.ticket-private-link { border-style: dashed; background: transparent; }
.ticket-private-link > i { color: var(--sp-primary); }
.ticket-closed-state { align-items: center; margin-top: 1rem; padding: 1rem; }
.ticket-closed-state > i { color: #22c55e; font-size: 1.5rem; }
.ticket-closed-state h2 { margin: 0; color: var(--sp-text); font-size: 0.88rem; }
.ticket-closed-state p { margin: 0.2rem 0 0; }

.ticket-rating-panel form { padding: 0.8rem; }
.ticket-stars { display: flex; justify-content: center; gap: 0.25rem; margin-bottom: 0.7rem; }
.ticket-stars button { border: 0; padding: 0.1rem; background: none; color: var(--sp-text-light); font-size: 1.45rem; }
.ticket-stars button.active { color: #fbbf24; }
.ticket-rating-panel textarea { min-height: 78px; margin-bottom: 0.65rem; border: 1px solid var(--sp-border); border-radius: 6px; padding: 0.65rem; }
.ticket-check { display: flex; gap: 0.45rem; align-items: flex-start; margin-bottom: 0.65rem; color: var(--sp-text-muted); font-size: 0.66rem; }

/* Large attachment picker */
.ticket-attachment-manager { padding: 0.75rem 1rem; }
.ticket-upload-picker {
  display: flex; align-items: center; gap: 0.65rem; min-height: 52px; padding: 0.65rem 0.75rem;
  border: 1px dashed var(--sp-input-border); border-radius: 6px; color: var(--sp-text); cursor: pointer;
  background: var(--sp-surface-alt); transition: border-color 0.15s, background 0.15s;
}
.ticket-upload-picker:hover { border-color: var(--sp-primary); background: rgba(var(--sp-primary-rgb), 0.06); }
.ticket-upload-picker input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ticket-upload-picker-icon { display: grid; place-items: center; width: 32px; height: 32px; flex: 0 0 32px; border-radius: 6px; color: var(--sp-primary); background: rgba(var(--sp-primary-rgb), 0.12); }
.ticket-upload-picker > span:last-child { display: flex; min-width: 0; flex-direction: column; }
.ticket-upload-picker strong { font-size: 0.74rem; }
.ticket-upload-picker small { color: var(--sp-text-muted); font-size: 0.63rem; line-height: 1.4; }
.ticket-upload-list { display: grid; gap: 0.4rem; margin-top: 0.5rem; }
.ticket-upload-item { display: flex; align-items: center; gap: 0.6rem; min-width: 0; padding: 0.5rem 0.6rem; border: 1px solid var(--sp-border); border-radius: 6px; background: var(--sp-surface); }
.ticket-upload-icon { display: grid; place-items: center; width: 28px; height: 28px; flex: 0 0 28px; border-radius: 5px; color: var(--sp-primary); background: rgba(var(--sp-primary-rgb), 0.1); }
.ticket-upload-file { display: flex; flex: 1; min-width: 0; flex-direction: column; position: relative; }
.ticket-upload-file strong { overflow: hidden; color: var(--sp-text); font-size: 0.7rem; text-overflow: ellipsis; white-space: nowrap; }
.ticket-upload-file small { color: var(--sp-text-muted); font-size: 0.6rem; }
.ticket-upload-progress { height: 3px; margin-top: 0.35rem; overflow: hidden; border-radius: 2px; background: var(--sp-border); }
.ticket-upload-progress i { display: block; height: 100%; background: var(--sp-primary); transition: width 0.2s; }
.ticket-upload-remove { display: grid; place-items: center; width: 28px; height: 28px; flex: 0 0 28px; border: 0; border-radius: 5px; color: var(--sp-text-muted); background: transparent; }
.ticket-upload-remove:hover { color: #ef4444; background: rgba(239, 68, 68, 0.1); }
.ticket-upload-failed { border-color: rgba(239, 68, 68, 0.4); }
.ticket-upload-ready .ticket-upload-icon { color: #22c55e; background: rgba(34, 197, 94, 0.1); }
.ticket-upload-status { min-height: 1rem; margin-top: 0.35rem; font-size: 0.63rem; }

/* Staff ticket workspace */
.ticket-staff-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 1rem; align-items: start; }
.ticket-staff-main { min-width: 0; }
.ticket-detail-header-staff { margin-bottom: 0.75rem; }
.ticket-detail-header-staff .ticket-id-badge { margin-right: 0.35rem; }
.ticket-detail-header-staff h1 { font-size: 1.3rem; }
.ticket-workspace-tabs { margin: 0; padding: 0.35rem 0.5rem 0; border: 1px solid var(--sp-border); border-bottom: 0; border-radius: 8px 8px 0 0; background: var(--sp-surface-alt); }
.ticket-workspace-tabs .nav-link { padding: 0.55rem 0.75rem; border-radius: 5px 5px 0 0; color: var(--sp-text-muted); font-size: 0.75rem; }
.ticket-workspace-tabs .nav-link.active { color: var(--sp-primary); background: var(--sp-surface); border-color: var(--sp-border) var(--sp-border) var(--sp-surface); }
.ticket-workspace-content { min-height: 180px; padding: 0.6rem 0.85rem; border: 1px solid var(--sp-border); border-radius: 0 0 8px 8px; background: var(--sp-surface); }
.ticket-detail-staff .ticket-thread-container { margin: 0; padding: 0; }
.ticket-detail-staff .ticket-thread-container::before { display: none; }
.ticket-detail-staff .thread-msg { gap: 0.7rem; padding: 0.8rem 0; }
.ticket-detail-staff .thread-msg-content { padding: 0.7rem 0.8rem; border: 1px solid var(--sp-border); border-radius: 6px; background: var(--sp-surface-alt); }
.ticket-detail-staff .thread-msg-player .thread-msg-content { border-left: 3px solid #22c55e; }
.ticket-detail-staff .thread-msg-staff .thread-msg-content { border-left: 3px solid var(--sp-primary); }
.ticket-detail-staff .thread-msg-internal .thread-msg-content { border-left-color: #f59e0b; background: var(--sp-warning-bg); }
.ticket-detail-staff .thread-msg-body { font-size: 0.82rem; }
.thread-msg-meta-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 0.45rem; }
.thread-msg-meta-actions > span { display: flex; align-items: center; gap: 0.35rem; color: var(--sp-text-muted); font-size: 0.62rem; }
.thread-msg-meta-actions time { white-space: nowrap; }
.thread-msg-actions { display: flex; gap: 0.2rem; opacity: 0.35; transition: opacity 0.15s ease; }
.thread-msg:hover .thread-msg-actions,.thread-msg-actions:focus-within { opacity: 1; }
.thread-msg-actions .icon-button { width: 27px; height: 27px; }
.thread-msg-actions .icon-button.danger { color: var(--sp-danger); }
.thread-msg-deleted,.ticket-message-deleted { display: flex; align-items: center; gap: 0.45rem; padding: 0.65rem 0.75rem; border: 1px dashed var(--sp-border); border-radius: 5px; color: var(--sp-text-muted); background: var(--sp-surface); font-size: 0.72rem; font-style: italic; }
.ticket-message-edited { margin-left: 0.1rem; color: var(--sp-text-muted); font-size: 0.61rem; font-style: italic; }
.ticket-message-control-modal { border: 1px solid var(--sp-border); border-radius: 8px; color: var(--sp-text); background: var(--sp-surface); overflow: hidden; }
.ticket-message-control-modal .modal-header,.ticket-message-control-modal .modal-footer { border-color: var(--sp-border); }
.ticket-message-control-modal .modal-header { align-items: flex-start; }
.ticket-message-control-modal .modal-header h2 { margin: 0; font-size: 1rem; letter-spacing: 0; }
.ticket-message-control-modal .modal-header h2 i { margin-right: 0.35rem; color: var(--sp-primary); }
.ticket-message-control-modal .modal-header p { margin: 3px 0 0; color: var(--sp-text-muted); font-size: 0.68rem; }
.ticket-message-control-modal textarea { width: 100%; min-height: 280px; padding: 0.75rem; border: 1px solid var(--sp-input-border); border-radius: 5px; color: var(--sp-text); background: var(--sp-input-bg); resize: vertical; }
.ticket-message-control-error { min-height: 18px; margin: 0.5rem 0 0; color: var(--sp-danger); font-size: 0.7rem; }
.ticket-message-delete-warning { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 0.7rem; align-items: start; padding: 0.8rem; border: 1px solid rgba(245, 158, 11, 0.35); border-radius: 6px; color: var(--sp-text); background: var(--sp-warning-bg); }
.ticket-message-delete-warning i { display: grid; place-items: center; width: 34px; height: 34px; color: #f59e0b; font-size: 1.1rem; }
.ticket-message-delete-warning p { margin: 0; font-size: 0.75rem; line-height: 1.55; }
.ticket-detail-staff .thread-msg-attachments video { display: block; max-width: 100%; max-height: 360px; border-radius: 6px; }
.ticket-detail-staff .ticket-reply-card { margin-top: 0.75rem; border-radius: 8px; box-shadow: none; }
.ticket-detail-staff .ticket-reply-header { padding: 0.65rem 0.85rem; }
.ticket-detail-staff .ticket-reply-header h5 { font-size: 0.82rem; }
.ticket-detail-staff .ticket-reply-footer { padding: 0.65rem 0.85rem; }
.canned-response-menu { min-width: 300px; max-height: 360px; overflow-y: auto; }
.ticket-canned-picker { border: 1px solid var(--sp-border); border-radius: 8px; color: var(--sp-text); background: var(--sp-surface); overflow: hidden; }
.ticket-canned-picker .modal-header { align-items: flex-start; border-color: var(--sp-border); }
.ticket-canned-picker .modal-header h2 { margin: 0; font-size: 1rem; letter-spacing: 0; }
.ticket-canned-picker .modal-header h2 i { color: var(--sp-primary); }
.ticket-canned-picker .modal-header p { margin: 3px 0 0; color: var(--sp-text-muted); font-size: 0.68rem; }
.ticket-canned-toolbar { display: grid; grid-template-columns: minmax(220px, 1fr) 125px 170px; gap: 7px; padding: 9px 12px; border-bottom: 1px solid var(--sp-border); background: var(--sp-surface-alt); }
.ticket-canned-search { display: flex; align-items: center; gap: 7px; min-height: 34px; padding: 0 9px; border: 1px solid var(--sp-input-border); border-radius: 5px; color: var(--sp-text-muted); background: var(--sp-input-bg); }
.ticket-canned-search input { width: 100%; min-width: 0; border: 0; outline: 0; color: var(--sp-text); background: transparent; font-size: 0.75rem; }
.ticket-canned-toolbar select { min-width: 0; padding: 5px 8px; border: 1px solid var(--sp-input-border); border-radius: 5px; color: var(--sp-text); background: var(--sp-input-bg); font-size: 0.72rem; }
.ticket-canned-body { display: grid; grid-template-columns: minmax(260px, 0.85fr) minmax(0, 1.15fr); height: min(480px, 58vh); padding: 0; }
.ticket-canned-results { min-width: 0; overflow-y: auto; border-right: 1px solid var(--sp-border); }
.ticket-canned-result { display: flex; width: 100%; min-width: 0; flex-direction: column; gap: 3px; padding: 9px 11px; border: 0; border-bottom: 1px solid var(--sp-border); color: var(--sp-text); background: transparent; text-align: left; }
.ticket-canned-result:hover,.ticket-canned-result.active { background: var(--sp-surface-alt); }
.ticket-canned-result.active { box-shadow: inset 3px 0 var(--sp-primary); }
.ticket-canned-result>span:first-child { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 8px; }
.ticket-canned-result strong,.ticket-canned-result>span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ticket-canned-result strong { font-size: 0.73rem; }
.ticket-canned-result small { color: var(--sp-text-muted); font-size: 0.59rem; }
.ticket-canned-result>span:last-child { color: var(--sp-text-muted); font-size: 0.64rem; }
.ticket-canned-result>span:first-child small { padding: 2px 5px; border-radius: 4px; color: var(--sp-primary); background: var(--sp-badge-bg); }
.ticket-canned-loading { display: flex; min-height: 120px; align-items: center; justify-content: center; gap: 7px; padding: 20px; color: var(--sp-text-muted); font-size: 0.72rem; }
.ticket-canned-preview { min-width: 0; overflow-y: auto; padding: 17px; }
.ticket-canned-preview>header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--sp-border); }
.ticket-canned-preview>header strong { font-size: 0.85rem; }
.ticket-canned-preview>header span { color: var(--sp-text-muted); font-size: 0.61rem; white-space: nowrap; }
.ticket-canned-preview-content { padding-top: 12px; font-size: 0.76rem; line-height: 1.65; overflow-wrap: anywhere; }
.ticket-canned-preview-empty { display: flex; height: 100%; flex-direction: column; align-items: center; justify-content: center; gap: 7px; color: var(--sp-text-muted); font-size: 0.7rem; text-align: center; }
.ticket-canned-preview-empty i { font-size: 1.5rem; opacity: 0.55; }
.ticket-canned-picker .modal-footer { border-color: var(--sp-border); }
.ticket-canned-count { margin-left: auto; color: var(--sp-text-muted); font-size: 0.65rem; }
.ticket-file-tile { height: 100%; padding: 0.55rem; border: 1px solid var(--sp-border); border-radius: 6px; background: var(--sp-surface-alt); text-align: center; }
.ticket-file-tile img { width: 100%; height: 110px; border-radius: 5px; object-fit: cover; }

.ticket-staff-sidebar { min-width: 0; }
.ticket-staff-sidebar-stack { position: sticky; top: 74px; display: grid; gap: 0.55rem; max-height: calc(100vh - 90px); overflow-y: auto; padding-right: 0.2rem; scrollbar-width: thin; }
.ticket-detail-staff .sidebar-card { border-radius: 8px; box-shadow: none; animation: none; }
.ticket-detail-staff .sidebar-card-header { padding: 0.6rem 0.75rem; font-size: 0.74rem; }
.ticket-detail-staff .sidebar-card-body { padding: 0.7rem 0.75rem; }
.ticket-detail-staff .sidebar-detail-row { padding: 0.45rem 0; font-size: 0.72rem; }
.ticket-detail-staff .sidebar-detail-label { font-size: 0.67rem; }
.ticket-player-avatar { display: grid; place-items: center; width: 36px; height: 36px; flex: 0 0 36px; border-radius: 50%; color: #fff; background: var(--sp-primary); }
.ticket-player-stat { flex: 1; padding: 0.5rem; border: 1px solid var(--sp-border); border-radius: 5px; background: var(--sp-surface-alt); text-align: center; }
.ticket-player-stat small { font-size: 0.61rem; }
.ticket-player-history { max-height: 150px; overflow-y: auto; font-size: 0.68rem; }
.ticket-player-history a { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.35rem 0; border-bottom: 1px solid var(--sp-border); color: inherit; text-decoration: none; }
.ticket-player-history .badge { flex: 0 0 auto; font-size: 0.55rem; }
.ticket-priority-control { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.25rem; }
.ticket-priority-control button { display: flex; min-width: 0; flex-direction: column; align-items: center; gap: 0.25rem; padding: 0.45rem 0.2rem; border: 1px solid var(--sp-border); border-radius: 5px; color: var(--sp-text-muted); background: var(--sp-surface); font-size: 0.59rem; }
.ticket-priority-control button i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.ticket-priority-control button[value="normal"] { color: #38bdf8; }
.ticket-priority-control button[value="high"] { color: #f59e0b; }
.ticket-priority-control button[value="urgent"] { color: #ef4444; }
.ticket-priority-control button.active { border-color: currentColor; background: var(--sp-surface-alt); box-shadow: inset 0 0 0 1px currentColor; }
.ticket-side-action-form { flex: 1; min-width: 45%; }
.ticket-tag { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.25rem 0.45rem; border-radius: 5px; color: #fff; background: var(--tag-color); font-size: 0.66rem; }
.ticket-tag button { display: grid; place-items: center; width: 16px; height: 16px; border: 0; padding: 0; color: inherit; background: transparent; }
.ticket-watcher { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.25rem 0.4rem; border-radius: 5px; color: var(--sp-text-muted); background: var(--sp-surface-alt); font-size: 0.65rem; }

/* Private transcript list */
.archive-list { display: grid; }
.archive-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto auto; gap: 0.75rem; align-items: center; padding: 0.8rem 1rem; border-bottom: 1px solid var(--sp-border); }
.archive-row:last-child { border-bottom: 0; }
.archive-row-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 6px; color: var(--sp-primary); background: rgba(var(--sp-primary-rgb), 0.1); }
.archive-row-main { display: flex; min-width: 0; flex-direction: column; }
.archive-row-main strong { overflow: hidden; color: var(--sp-text); font-size: 0.76rem; text-overflow: ellipsis; white-space: nowrap; }
.archive-row-main span,
.archive-row time { color: var(--sp-text-muted); font-size: 0.64rem; }
.archive-row-actions { display: flex; gap: 0.3rem; }
.archive-row-actions form { margin: 0; }

@media (max-width: 1050px) {
  .ticket-staff-layout { grid-template-columns: minmax(0, 1fr) 292px; }
  .ticket-detail-layout { grid-template-columns: minmax(0, 1fr) 285px; }
}

@media (max-width: 900px) {
  .ticket-detail-layout,
  .ticket-staff-layout { grid-template-columns: 1fr; }
  .ticket-detail-sidebar,
  .ticket-staff-sidebar-stack { position: static; max-height: none; overflow: visible; }
  .ticket-detail-sidebar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ticket-detail-sidebar > :first-child,
  .ticket-private-link { grid-column: 1 / -1; }
  .ticket-summary-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ticket-summary-strip > div:nth-child(3) { border-left: 0; border-top: 1px solid var(--sp-border); }
  .ticket-summary-strip > div:nth-child(4) { border-top: 1px solid var(--sp-border); }
  .ticket-canned-body { grid-template-columns: minmax(220px, 0.9fr) minmax(0, 1.1fr); }
}

@media (max-width: 600px) {
  .ticket-detail-page { padding: 0.85rem 0.65rem 2rem; }
  .ticket-detail-header { flex-direction: column; padding-bottom: 0.85rem; }
  .ticket-detail-header h1 { font-size: 1.2rem; }
  .ticket-header-state { justify-content: flex-start; }
  .ticket-summary-strip { margin: 0.75rem 0; }
  .ticket-summary-strip > div { padding: 0.65rem; }
  .ticket-summary-strip strong { font-size: 0.7rem; }
  .ticket-panel-heading p,
  .ticket-live-label { display: none; }
  .ticket-message-list { padding: 0.45rem 0.65rem; }
  .ticket-message { grid-template-columns: 28px minmax(0, 1fr); gap: 0.5rem; }
  .ticket-message-avatar { width: 28px; height: 28px; }
  .ticket-message-content > header { flex-wrap: wrap; }
  .ticket-message-content > header time { width: 100%; margin-left: 0; }
  .ticket-message-files { grid-template-columns: 1fr; }
  .ticket-system-event { grid-template-columns: 20px minmax(0, 1fr); }
  .ticket-system-event time { grid-column: 2; }
  .ticket-composer footer { align-items: stretch; flex-direction: column; }
  .ticket-composer footer button { width: 100%; }
  .ticket-detail-sidebar { grid-template-columns: 1fr; }
  .ticket-detail-sidebar > * { grid-column: 1; }
  .ticket-attachment-manager { padding: 0.65rem; }
  .ticket-upload-picker small { white-space: normal; }
  .ticket-workspace-tabs { overflow-x: auto; flex-wrap: nowrap; }
  .ticket-workspace-tabs .nav-link { white-space: nowrap; }
  .ticket-detail-staff .thread-msg-avatar { display: none; }
  .thread-msg-header { align-items: flex-start; }
  .thread-msg-meta-actions { align-items: flex-end; flex-direction: column; }
  .thread-msg-meta-actions > span { align-items: flex-end; flex-direction: column; gap: 0; }
  .thread-msg-actions { opacity: 1; }
  .ticket-canned-toolbar { grid-template-columns: 1fr 1fr; }
  .ticket-canned-search { grid-column: 1 / -1; }
  .ticket-canned-body { grid-template-columns: 1fr; height: min(610px, 68vh); }
  .ticket-canned-results { max-height: 280px; border-right: 0; border-bottom: 1px solid var(--sp-border); }
  .ticket-canned-preview { min-height: 190px; padding: 12px; }
  .ticket-canned-picker .modal-footer { flex-wrap: wrap; }
  .ticket-canned-count { order: -1; width: 100%; margin-left: 0; }
  .ticket-canned-picker .modal-footer .btn { flex: 1; }
  .archive-row { grid-template-columns: 32px minmax(0, 1fr) auto; }
  .archive-row time { display: none; }
}