/* Tickets — modern/colorful styling.
   Loaded from base.html for authed users so the topbar button + create-ticket
   modal are styled on every page; the index/detail templates also load this
   directly (idempotent, but explicit on those pages). */

:root {
  --urg-urgent:    #ef4444;
  --urg-urgent-bg: #fee2e2;
  --urg-medium:    #f59e0b;
  --urg-medium-bg: #fef3c7;
  --urg-low:       #14b8a6;
  --urg-low-bg:    #ccfbf1;

  --st-open:       #3b82f6;
  --st-open-bg:    #dbeafe;
  --st-closed:     #6b7280;
  --st-closed-bg:  #e5e7eb;

  --prog-base:     #10b981;
  --prog-edge:     #34d399;

  --cat-bug:           #fee2e2;
  --cat-feature:       #e0e7ff;
  --cat-data-question: #dbeafe;
  --cat-account:       #fef3c7;
  --cat-other:         #f3f4f6;

  /* phase-2: ticket-by-email inbox palette */
  --inbox-pending:    #06b6d4;
  --inbox-pending-bg: #cffafe;
  --inbox-promoted:   #10b981;
  --inbox-dismissed:  #94a3b8;
}

[x-cloak] { display: none !important; }

/* ---------- Topbar pill ---------- */
.topbar-create-ticket {
  background: linear-gradient(135deg, #10b981, #06b6d4);
  color: #fff;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  letter-spacing: 0.01em;
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.35);
  transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease;
}
.topbar-create-ticket:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(16, 185, 129, 0.45);
  filter: brightness(1.05);
}
.topbar-create-ticket:active { transform: translateY(0); }

/* ---------- Create-ticket modal ---------- */
.ct-modal-bg {
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center;
  z-index: 2000;
}
.ct-modal-card {
  background: #fff;
  border-radius: 14px;
  width: min(720px, 94vw);
  max-height: 90vh;
  overflow: auto;
  box-shadow: 0 24px 48px rgba(0,0,0,0.25);
  padding: 0;
}
.ct-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.5rem;
  background: linear-gradient(135deg, #10b981, #06b6d4);
  color: #fff;
  border-radius: 14px 14px 0 0;
}
.ct-modal-header h2 { margin: 0; font-size: 1.15rem; font-weight: 700; }
.ct-close {
  background: rgba(255,255,255,0.2); color: #fff; border: 0;
  width: 2rem; height: 2rem; border-radius: 999px; cursor: pointer;
  font-size: 1.1rem; line-height: 1;
}
.ct-close:hover { background: rgba(255,255,255,0.35); }

.ct-form { padding: 1rem 1.5rem 1.4rem; display: flex; flex-direction: column; gap: 0.85rem; }
.ct-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.85rem; }
.ct-row .ct-field { min-width: 0; }
@media (max-width: 720px) { .ct-row { grid-template-columns: 1fr; } }

.ct-field { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.ct-label { font-size: 0.78rem; font-weight: 600; color: #475569; }
.ct-req   { color: #ef4444; }
.ct-form input[type=text],
.ct-form input[type=date],
.ct-form input[type=number],
.ct-form select,
.ct-form textarea {
  border: 1px solid #cbd5e1;
  border-radius: 7px;
  padding: 0.45rem 0.6rem;
  font: inherit;
  background: #fff;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.ct-form input:focus,
.ct-form select:focus,
.ct-form textarea:focus {
  outline: none;
  border-color: #10b981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18);
}
.ct-form textarea { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.85rem; }
.ct-hint { color: #64748b; font-size: 0.75rem; margin-top: 0.15rem; }

.ct-context-row {
  display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center;
  background: #f1f5f9; padding: 0.5rem 0.7rem; border-radius: 8px;
}
.ct-context-label { font-size: 0.78rem; color: #475569; font-weight: 600; }
.ct-chip {
  display: inline-flex; align-items: center; gap: 0.3rem;
  background: #fff; border: 1px solid #cbd5e1;
  padding: 0.18rem 0.4rem 0.18rem 0.55rem;
  border-radius: 999px; font-size: 0.78rem;
}
.ct-chip-key { color: #64748b; font-size: 0.7rem; }
.ct-chip-val { color: #1e293b; font-weight: 600; }
.ct-chip-x {
  background: transparent; border: 0; cursor: pointer;
  color: #94a3b8; font-size: 0.95rem; line-height: 1;
  padding: 0 0.2rem;
}
.ct-chip-x:hover { color: #ef4444; }

.ct-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.ct-urg, .ct-tk, .ct-dow, .ct-dom {
  background: #f3f4f6; border: 1px solid transparent;
  padding: 0.3rem 0.7rem; border-radius: 999px;
  cursor: pointer; font: inherit; font-size: 0.78rem;
  transition: background 120ms ease, transform 80ms ease;
}
.ct-urg:hover, .ct-tk:hover, .ct-dow:hover, .ct-dom:hover { transform: translateY(-1px); }
.ct-urg-urgent.ct-urg-on { background: var(--urg-urgent-bg); color: var(--urg-urgent); border-color: var(--urg-urgent); font-weight: 600; }
.ct-urg-medium.ct-urg-on { background: var(--urg-medium-bg); color: var(--urg-medium); border-color: var(--urg-medium); font-weight: 600; }
.ct-urg-low.ct-urg-on    { background: var(--urg-low-bg);    color: var(--urg-low);    border-color: var(--urg-low);    font-weight: 600; }
.ct-tk-on  { background: #e0e7ff; color: #3730a3; border-color: #6366f1; font-weight: 600; }
.ct-dow, .ct-dom { width: 2rem; padding: 0.3rem 0; text-align: center; }
.ct-dow-on, .ct-dom-on { background: #d1fae5; color: #065f46; border-color: #10b981; font-weight: 700; }
.ct-dom-grid {
  display: grid; grid-template-columns: repeat(8, minmax(0,1fr));
  gap: 0.25rem;
}
.ct-dom { width: auto; }
.ct-dom-end { grid-column: span 2; width: auto; }

.ct-advanced { background: #f8fafc; border-radius: 10px; padding: 0.4rem 0.85rem; }
.ct-advanced > summary { cursor: pointer; font-weight: 600; color: #475569; padding: 0.4rem 0; }
.ct-advanced-body { display: flex; flex-direction: column; gap: 0.7rem; padding: 0.5rem 0; }
.ct-cooldown { display: flex; align-items: center; gap: 0.5rem; }

.ct-actions { display: flex; gap: 0.5rem; justify-content: flex-end; margin-top: 0.4rem; }
.ct-btn {
  border: 0; border-radius: 8px; padding: 0.55rem 1.1rem;
  font: inherit; font-weight: 600; cursor: pointer;
  transition: transform 80ms ease, box-shadow 120ms ease, filter 120ms ease;
}
.ct-btn-cancel { background: #e5e7eb; color: #374151; }
.ct-btn-cancel:hover { background: #d1d5db; }
.ct-btn-submit {
  background: linear-gradient(135deg, #10b981, #06b6d4);
  color: #fff;
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.35);
}
.ct-btn-submit:hover { transform: translateY(-1px); filter: brightness(1.05); }
.ct-btn-submit:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.ct-error { color: #ef4444; font-size: 0.85rem; margin: 0.2rem 0 0; }

/* ---------- Phase 4: Screenshot button + preview ---------- */
.ct-attach-row {
  display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap;
}
.ct-attach-row > input[type=file] { flex: 1; min-width: 12rem; }
.ct-screenshot-btn {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
  border: 0;
  padding: 0.4rem 0.85rem;
  border-radius: 8px;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(99, 102, 241, 0.3);
  transition: transform 80ms ease, filter 120ms ease;
}
.ct-screenshot-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  filter: brightness(1.05);
}
.ct-screenshot-btn:disabled { opacity: 0.6; cursor: wait; transform: none; }

.ct-screenshot-preview {
  margin-top: 0.5rem;
  padding: 0.5rem;
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
  background: #f8fafc;
}
.ct-screenshot-preview img {
  max-width: 100%;
  max-height: 25.5rem;
  display: block;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  background: #fff;
}
.ct-screenshot-actions {
  display: flex; gap: 0.4rem; align-items: center;
  margin-top: 0.4rem; flex-wrap: wrap;
}
.ct-screenshot-actions .muted { flex: 1; min-width: 12rem; }

/* Busy banner shown while the server-side Playwright capture runs.
   Sits at the top of the modal between the gradient header and the
   form so the user can see the work is in flight even if their eye
   isn't on the disabled-state button. ~3-5s render. */
.ct-busy-banner {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  background: linear-gradient(135deg, #ede9fe, #e0e7ff);
  border-bottom: 1px solid #c7d2fe;
  padding: 0.6rem 1.5rem;
  color: #3730a3;
  font-size: 0.88rem;
  font-weight: 600;
}
.ct-busy-text { flex: 1; }
.ct-busy-spinner {
  display: inline-block;
  width: 1.05rem;
  height: 1.05rem;
  border: 2px solid #c7d2fe;
  border-top-color: #6366f1;
  border-radius: 50%;
  animation: ct-busy-spin 0.7s linear infinite;
  flex-shrink: 0;
}
@keyframes ct-busy-spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ---------- Shared chip / pill styles (index + detail) ---------- */
.urg, .cat, .status, .badge-recurring, .pgc {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border: 1px solid transparent;
}
.urg-urgent { background: var(--urg-urgent-bg); color: var(--urg-urgent); border-color: var(--urg-urgent); }
.urg-medium { background: var(--urg-medium-bg); color: var(--urg-medium); border-color: var(--urg-medium); }
.urg-low    { background: var(--urg-low-bg);    color: var(--urg-low);    border-color: var(--urg-low); }
.status-open    { background: var(--st-open-bg);   color: var(--st-open);   border-color: var(--st-open); }
.status-closed  { background: var(--st-closed-bg); color: var(--st-closed); border-color: var(--st-closed); }
.cat-bug             { background: var(--cat-bug);           color: #991b1b; }
.cat-feature_request { background: var(--cat-feature);       color: #3730a3; }
.cat-data_question   { background: var(--cat-data-question); color: #1e40af; }
.cat-account         { background: var(--cat-account);       color: #92400e; }
.cat-other           { background: var(--cat-other);         color: #374151; }
.badge-recurring     { background: #ede9fe;                  color: #5b21b6; border-color: #a78bfa; }
.pgc { background: #ecfdf5; color: #065f46; border-color: #6ee7b7; }

/* ---------- Sparkle progress bar (CSS-only) ---------- */
.progress {
  position: relative;
  height: 8px;
  border-radius: 999px;
  background: #e5e7eb;
  overflow: hidden;
}
.progress > .progress-fill {
  position: absolute; inset: 0 auto 0 0;
  width: var(--pct, 0%);
  background: linear-gradient(90deg, var(--prog-edge), var(--prog-base));
  border-radius: inherit;
  transition: width 320ms cubic-bezier(.2,.8,.2,1);
}
/* Per-percentage fill colors — same palette as the stepper buttons so
   the bar visually agrees with the active step. The sparkle-sweep
   animation (::after) stays unchanged and still rides on top. */
.progress > .progress-fill-25  { background: linear-gradient(90deg, #fdba74, #f97316); }
.progress > .progress-fill-50  { background: linear-gradient(90deg, #fcd34d, #f59e0b); }
.progress > .progress-fill-75  { background: linear-gradient(90deg, #bef264, #65a30d); }
.progress > .progress-fill-100 { background: linear-gradient(90deg, #34d399, #047857); }
.progress > .progress-fill::after {
  content: "";
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(
      120deg,
      transparent 0 12px,
      rgba(255,255,255,0.55) 12px 18px,
      transparent 18px 30px
    );
  mix-blend-mode: screen;
  animation: sparkle-sweep 2.4s linear infinite;
  pointer-events: none;
}
@keyframes sparkle-sweep {
  0%   { transform: translateX(-30%); }
  100% { transform: translateX( 30%); }
}

/* ---------- Tickets index page ---------- */
.tickets-page { padding: 1rem 1.5rem 2rem; max-width: 1320px; margin: 0 auto; }
.tickets-header { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.tickets-header h1 { margin: 0 0 0.6rem; }
.tickets-views { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.tv {
  background: #fff; border: 1px solid #e2e8f0; color: #475569;
  padding: 0.35rem 0.85rem; border-radius: 999px;
  text-decoration: none; font-size: 0.85rem; font-weight: 600;
  transition: background 120ms ease;
}
.tv:hover { background: #f1f5f9; }
.tv-on {
  background: linear-gradient(135deg, #10b981, #06b6d4);
  color: #fff; border-color: transparent;
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.35);
}
/* Refresh button — matches the .tv pill shape but as a <button> with
   left-margin to visually separate from the view tabs. Subtle hover
   so it feels active without competing with the colored active tab. */
.tv-refresh {
  margin-left: 0.5rem;
  cursor: pointer;
  font-family: inherit;
}
.tv-refresh:hover { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }

.tickets-body { display: grid; grid-template-columns: 260px 1fr; gap: 1.2rem; margin-top: 1rem; }
@media (max-width: 920px) { .tickets-body { grid-template-columns: 1fr; } }

.tickets-rail { display: flex; flex-direction: column; gap: 0.85rem; }
.tickets-filter {
  background: #fff; border-radius: 10px; padding: 0.85rem;
  display: flex; flex-direction: column; gap: 0.7rem;
  border: 1px solid #e2e8f0;
}
.trf { display: flex; flex-direction: column; gap: 0.3rem; }
.trf > span, .trf > legend { font-size: 0.78rem; font-weight: 700; color: #475569; }
.trf > input, .trf > select, .trf > textarea {
  border: 1px solid #cbd5e1; border-radius: 7px; padding: 0.4rem 0.55rem; font: inherit;
}
.trf-chip { display: flex; align-items: center; gap: 0.4rem; cursor: pointer; }
.trf-chip input { margin: 0; }
.trf-apply {
  background: linear-gradient(135deg, #10b981, #06b6d4); color: #fff;
  border: 0; border-radius: 8px; padding: 0.5rem 0.9rem;
  font: inherit; font-weight: 600; cursor: pointer;
}
.trf-clear { font-size: 0.8rem; color: #64748b; text-align: center; }
.tickets-rail-link { text-align: center; }
.trl { color: #475569; text-decoration: none; font-size: 0.85rem; }
.trl:hover { text-decoration: underline; }

.tickets-list { display: flex; flex-direction: column; gap: 0.6rem; }
.tickets-empty {
  background: #fff; border: 1px dashed #cbd5e1; border-radius: 10px;
  padding: 2rem 1rem; text-align: center;
}

.ticket-card {
  position: relative;
  display: block;
  background: #fff;
  border-radius: 12px;
  padding: 0;
  text-decoration: none; color: inherit;
  border: 1px solid #e2e8f0;
  overflow: hidden;
  transition: transform 120ms ease, box-shadow 120ms ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.ticket-card:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0,0,0,0.08); }
.ticket-card-inner { padding: 0.85rem 1rem 0.85rem 1.1rem; display: flex; flex-direction: column; gap: 0.55rem; }
.ticket-stripe {
  position: absolute; inset: 0 auto 0 0; width: 4px;
}
.ticket-urgent .ticket-stripe { background: var(--urg-urgent); }
.ticket-medium .ticket-stripe { background: var(--urg-medium); }
.ticket-low    .ticket-stripe { background: var(--urg-low); }
.ticket-closed .ticket-card-inner { opacity: 0.66; }

.ticket-row1 { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.ticket-id { color: #64748b; font-family: ui-monospace, monospace; font-size: 0.85rem; }
.ticket-title { font-weight: 600; flex: 1; min-width: 8rem; }
.ticket-row2 { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; font-size: 0.85rem; color: #475569; }
.who { display: inline-flex; align-items: center; gap: 0.3rem; }
.who-arrow { color: #94a3b8; }
.who-name { font-weight: 600; color: #1e293b; }
.who-unassigned { font-style: italic; color: #94a3b8; }
.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.6rem; height: 1.6rem; border-radius: 999px;
  font-size: 0.7rem; font-weight: 700; color: #1c2c40;
  border: 1px solid rgba(0,0,0,0.05);
}
.ticket-ctx {
  background: #f1f5f9; padding: 0.15rem 0.5rem; border-radius: 6px;
  display: inline-flex; align-items: center; gap: 0.25rem;
  font-size: 0.78rem; color: #475569;
}
.ticket-ctx .dot { color: #94a3b8; }
.due { color: #b91c1c; font-weight: 600; font-size: 0.78rem; }
.postponed { color: #6366f1; font-weight: 600; font-size: 0.78rem; }
.ticket-progress { display: flex; align-items: center; gap: 0.6rem; }
.ticket-progress .progress { flex: 1; }
.progress-pct { font-size: 0.78rem; color: #475569; min-width: 2.6rem; text-align: right; }

/* ---------- Detail page ---------- */
.ticket-detail { padding: 1rem 1.5rem 2rem; max-width: 1100px; margin: 0 auto; }
.td-header { background: #fff; border-radius: 12px; padding: 1rem 1.2rem; box-shadow: 0 1px 3px rgba(0,0,0,0.05); border: 1px solid #e2e8f0; }
.td-title-line { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; }
.td-back { color: #475569; text-decoration: none; font-size: 0.85rem; }
.td-back:hover { text-decoration: underline; }
.td-id { color: #64748b; font-family: ui-monospace, monospace; }
.td-title { margin: 0; font-size: 1.4rem; }
.td-pill-row { display: flex; gap: 0.4rem; margin-top: 0.5rem; flex-wrap: wrap; }
.td-people { color: #475569; font-size: 0.9rem; margin-top: 0.4rem; display: flex; gap: 1rem; }
.td-context {
  background: #f1f5f9; padding: 0.5rem 0.7rem; border-radius: 8px;
  margin-top: 0.6rem; font-size: 0.85rem; color: #475569;
  display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap;
}
.td-context-label { font-weight: 600; color: #1e293b; }
.td-context-link { margin-left: auto; color: #0e7490; text-decoration: none; font-weight: 600; }
.td-context-link:hover { text-decoration: underline; }
.td-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.7rem; align-items: center; }
.td-btn {
  background: #f3f4f6; color: #1e293b; border: 1px solid #cbd5e1;
  padding: 0.35rem 0.8rem; border-radius: 8px;
  font: inherit; font-size: 0.85rem; cursor: pointer;
  transition: background 120ms ease, transform 80ms ease;
}
.td-btn:hover { background: #e2e8f0; transform: translateY(-1px); }
.td-btn-tiny { padding: 0.22rem 0.55rem; font-size: 0.78rem; }
.td-btn-close { background: #fee2e2; color: #991b1b; border-color: #fca5a5; font-weight: 600; }
.td-btn-close:hover { background: #fecaca; }
.td-btn-reopen { background: #dbeafe; color: #1e40af; border-color: #93c5fd; font-weight: 600; }
.td-btn-sub { background: #d1fae5; color: #065f46; border-color: #6ee7b7; font-weight: 600; }
.td-btn-submit {
  background: linear-gradient(135deg, #10b981, #06b6d4); color: #fff;
  border: 0; padding: 0.45rem 1rem; font-weight: 600;
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.3);
}
.td-btn-submit:hover { filter: brightness(1.05); }
.td-channels label { display: inline-flex; align-items: center; gap: 0.2rem; font-size: 0.85rem; }
.td-date-inline { width: 8.5rem; }
.td-dates { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; margin-top: 0.7rem; color: #64748b; font-size: 0.85rem; }
.td-dates .dot { color: #cbd5e1; }
.td-dates-form { display: flex; gap: 0.4rem; align-items: center; }
.td-dates-form label { display: inline-flex; align-items: center; gap: 0.2rem; font-size: 0.78rem; color: #475569; }
.td-dates-form input[type=date] { width: 8.5rem; padding: 0.18rem 0.4rem; border: 1px solid #cbd5e1; border-radius: 6px; }
.td-dates-label { font-weight: 600; color: #475569; font-size: 0.78rem; margin-right: 0.2rem; }

.td-progress-block { background: #fff; border-radius: 12px; padding: 1rem 1.2rem; margin-top: 1rem; box-shadow: 0 1px 3px rgba(0,0,0,0.05); border: 1px solid #e2e8f0; }
.td-progress-stepper { display: flex; gap: 0.4rem; margin-bottom: 0.7rem; flex-wrap: wrap; }
.pgs {
  background: #f3f4f6; color: #475569; border: 1px solid #cbd5e1;
  padding: 0.35rem 0.85rem; border-radius: 999px;
  font: inherit; font-weight: 600; cursor: pointer;
  transition: transform 80ms ease, background 120ms ease;
}
.pgs:hover { transform: translateY(-1px); }
.pgs-on {
  color: #fff; border-color: transparent;
  /* Default — overridden per-percentage by .pgs-on-N below. */
  background: linear-gradient(135deg, var(--prog-edge), var(--prog-base));
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.35);
}
/* Traffic-light gradient by percent — picked up by the active stepper
   button + applied to the progress bar fill below. Color stops chosen
   so the eye reads "barely started → almost there → done" at a glance:
     0   neutral grey (no real progress yet)
     25  orange (started)
     50  amber (halfway)
     75  lime (close)
     100 emerald (done) */
.pgs-on.pgs-on-0 {
  background: linear-gradient(135deg, #cbd5e1, #94a3b8);
  color: #1e293b;
  box-shadow: 0 2px 6px rgba(100, 116, 139, 0.25);
}
.pgs-on.pgs-on-25 {
  background: linear-gradient(135deg, #fdba74, #f97316);
  box-shadow: 0 2px 6px rgba(249, 115, 22, 0.35);
}
.pgs-on.pgs-on-50 {
  background: linear-gradient(135deg, #fcd34d, #f59e0b);
  box-shadow: 0 2px 6px rgba(245, 158, 11, 0.35);
}
.pgs-on.pgs-on-75 {
  background: linear-gradient(135deg, #bef264, #65a30d);
  box-shadow: 0 2px 6px rgba(101, 163, 13, 0.35);
}
.pgs-on.pgs-on-100 {
  background: linear-gradient(135deg, #34d399, #047857);
  box-shadow: 0 2px 6px rgba(4, 120, 87, 0.40);
}
.td-progress-bar { height: 12px; }
.td-100-nudge { color: #065f46; font-weight: 600; margin-top: 0.6rem; display: flex; gap: 0.6rem; align-items: center; }

/* Soft section tints — break up the wall of white so the three main
   blocks (Description / Attachments / Conversation) are visually
   distinct at a glance. Each gradient stays gentle enough that the
   body text still reads naturally on top. */
.td-description {
  background: linear-gradient(135deg, #fefce8, #fef9c3);
  border: 1px solid #fde68a;
  border-radius: 12px; padding: 1rem 1.2rem; margin-top: 1rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.td-description h3 { margin: 0 0 0.5rem; font-size: 1rem; }
.td-description pre { white-space: pre-wrap; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.88rem; margin: 0; color: #1e293b; }

.td-conversation {
  background: linear-gradient(135deg, #eff6ff, #dbeafe);
  border: 1px solid #bfdbfe;
  border-radius: 12px; padding: 1rem 1.2rem; margin-top: 1rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.td-conversation h3 { margin: 0 0 0.5rem; font-size: 1rem; }
.td-thread { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; flex-direction: column; gap: 0.6rem; }
.thread-item { display: flex; }
.bubble {
  background: linear-gradient(135deg, #f0fdfa, #ecfdf5);
  border: 1px solid #a7f3d0;
  border-radius: 12px;
  padding: 0.6rem 0.85rem;
  max-width: 80%;
}
.bubble-head { display: flex; gap: 0.5rem; align-items: baseline; margin-bottom: 0.25rem; }
.bubble-author { font-weight: 700; color: #065f46; }
.bubble-time { color: #64748b; font-size: 0.75rem; }
.bubble-body { white-space: pre-wrap; color: #1e293b; }
.event-pill {
  background: #f8fafc;
  border-radius: 999px;
  padding: 0.3rem 0.85rem;
  font-size: 0.85rem;
  color: #475569;
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
  border: 1px solid #e2e8f0;
}
.event-time { color: #94a3b8; font-size: 0.78rem; margin-left: auto; }

.td-composer { display: flex; flex-direction: column; gap: 0.4rem; border-top: 1px solid #e2e8f0; padding-top: 0.85rem; }
.td-composer textarea,
.td-reply-composer textarea {
  border: 1px solid #cbd5e1; border-radius: 8px; padding: 0.55rem 0.7rem;
  font: inherit; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.85rem;
  resize: vertical; min-height: 4rem; width: 100%; box-sizing: border-box;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.td-composer textarea:focus,
.td-reply-composer textarea:focus { outline: none; border-color: #10b981; box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18); }
.td-composer-row { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.td-also-close { font-size: 0.85rem; color: #475569; display: inline-flex; align-items: center; gap: 0.3rem; }

/* Email-reply composer — distinct from the internal Comment composer
   so the operator doesn't accidentally fire a real email when they
   meant to leave an internal note. Soft amber tint mirrors the "this
   leaves the building" warning convention. */
.td-reply-composer {
  margin-top: 1rem;
  padding: 0.75rem 0.9rem;
  background: linear-gradient(135deg, #fffbeb, #fef3c7);
  border: 1px solid #fde68a;
  border-radius: 8px;
  display: flex; flex-direction: column; gap: 0.45rem;
}
.td-reply-title { margin: 0; font-size: 0.95rem; color: #78350f; }
.td-reply-meta  { margin: 0; }
.td-reply-meta code { background: rgba(0,0,0,0.05); padding: 0 0.25rem; border-radius: 3px; }

/* Bubble variant for an outbound reply — matches the comment bubble
   shape but tinted blue, with a recipient address in the header. */
.bubble-reply {
  background: linear-gradient(135deg, #eff6ff, #dbeafe);
  border-color: #bfdbfe;
}
.bubble-reply .bubble-author { color: #1e3a8a; }
.bubble-recipient { margin-left: 0.4rem; }
.bubble-recipient code { background: rgba(0,0,0,0.04); padding: 0 0.25rem; border-radius: 3px; }

/* ---------- Confetti ---------- */
.td-confetti {
  position: fixed; pointer-events: none;
  inset: 0;
  z-index: 1500;
}
.cf {
  position: absolute;
  left: 50%; top: 40%;
  width: 9px; height: 14px;
  border-radius: 2px;
  background: linear-gradient(135deg, #10b981, #06b6d4);
  transform: rotate(0deg);
  animation: confetti-burst var(--cf-dur, 1100ms) ease-out forwards;
}
.cf-1  { background: linear-gradient(135deg, #ef4444, #f59e0b); }
.cf-2  { background: linear-gradient(135deg, #6366f1, #ec4899); }
.cf-3  { background: linear-gradient(135deg, #10b981, #06b6d4); }
.cf-4  { background: linear-gradient(135deg, #f59e0b, #f43f5e); }
.cf-5  { background: linear-gradient(135deg, #14b8a6, #3b82f6); }
.cf-6  { background: linear-gradient(135deg, #a78bfa, #f472b6); }
.cf-7  { background: linear-gradient(135deg, #fb923c, #fbbf24); }
.cf-8  { background: linear-gradient(135deg, #34d399, #60a5fa); }
.cf-9  { background: linear-gradient(135deg, #f472b6, #c084fc); }
.cf-10 { background: linear-gradient(135deg, #2dd4bf, #818cf8); }
.cf-11 { background: linear-gradient(135deg, #fde047, #f87171); }
.cf-12 { background: linear-gradient(135deg, #facc15, #fb7185); }
.cf-13 { background: linear-gradient(135deg, #4ade80, #22d3ee); }
.cf-14 { background: linear-gradient(135deg, #38bdf8, #a78bfa); }
.cf-15 { background: linear-gradient(135deg, #f472b6, #fb7185); }
.cf-16 { background: linear-gradient(135deg, #fcd34d, #fb923c); }
@keyframes confetti-burst {
  0%   { transform: translate(0,0) rotate(0deg); opacity: 1; }
  100% {
    transform:
      translate(calc(cos(var(--cf-angle)) * var(--cf-dist)),
                calc(sin(var(--cf-angle)) * var(--cf-dist) + 80px))
      rotate(720deg);
    opacity: 0;
  }
}

/* ---------- Recurring rules page ---------- */
.rec-page { padding: 1rem 1.5rem 2rem; max-width: 1200px; margin: 0 auto; }
.rec-header { display: flex; align-items: baseline; justify-content: space-between; }
.rec-empty { background: #fff; border: 1px dashed #cbd5e1; border-radius: 10px; padding: 1.5rem; text-align: center; }
.rec-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.05); border: 1px solid #e2e8f0; }
.rec-table th, .rec-table td { padding: 0.6rem 0.85rem; text-align: left; vertical-align: top; border-bottom: 1px solid #f1f5f9; }
.rec-table th { background: #f8fafc; font-size: 0.78rem; color: #475569; }
.rec-row-meta { display: flex; gap: 0.3rem; margin-top: 0.3rem; }
.rec-row-actions { display: flex; gap: 0.4rem; }
.rec-row-inactive { opacity: 0.65; }
.rec-create { margin-top: 1.5rem; background: #fff; border-radius: 12px; padding: 0.6rem 1rem; border: 1px solid #e2e8f0; }
.rec-create > summary { cursor: pointer; font-weight: 600; padding: 0.4rem 0; }
.rec-form { display: flex; flex-direction: column; gap: 0.7rem; padding: 0.6rem 0; }

/* ---------- Phase 2: Attachments on the detail page ---------- */
.td-attachments {
  background: linear-gradient(135deg, #f0fdf4, #dcfce7);
  border: 1px solid #bbf7d0;
  border-radius: 12px; padding: 1rem 1.2rem; margin-top: 1rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.td-attachments h3 { margin: 0 0 0.6rem; font-size: 1rem; }
.tatt-row {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.6rem 0.85rem;
  border: 1px solid #e2e8f0; border-radius: 10px;
  background: #fff;
}
.tatt-row + .tatt-row { margin-top: 0.4rem; }
.tatt-email { background: linear-gradient(135deg, #f0fdfa, #ecfdf5); border-color: #a7f3d0; }
.tatt-icon { font-size: 1.2rem; line-height: 1; }
.tatt-body { flex: 1; min-width: 0; }
.tatt-title { font-size: 0.92rem; }
.tatt-title .muted { color: #64748b; font-weight: normal; }
.tatt-meta { font-size: 0.78rem; color: #64748b; margin-top: 0.15rem; }
.tatt-actions { display: flex; gap: 0.3rem; flex-shrink: 0; }

.tatt-upload { margin-top: 0.85rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.tatt-upload input[type=file] { font: inherit; font-size: 0.85rem; }

/* ---------- Phase 2: AI confidence note in the modal ---------- */
.ct-ai-note {
  background: linear-gradient(135deg, #ecfdf5, #cffafe);
  border-bottom: 1px solid #a7f3d0;
  padding: 0.5rem 1.5rem;
  font-size: 0.85rem;
  color: #064e3b;
}

/* ---------- Phase 2: Email-source card in the create-ticket modal ---------- */
.ct-email-source {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  background: linear-gradient(135deg, #f0fdfa, #e0f2fe);
  border-bottom: 1px solid #a7f3d0;
  padding: 0.7rem 1.5rem;
  color: #064e3b;
  font-size: 0.85rem;
}
.ct-email-source-icon { font-size: 1.4rem; line-height: 1; padding-top: 0.1rem; }
.ct-email-source-body { flex: 1; min-width: 0; }
.ct-email-source-meta { font-size: 0.78rem; color: #0e7490; margin-top: 0.2rem; }
.ct-email-source-meta code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: rgba(255,255,255,0.6); padding: 0 0.25rem; border-radius: 4px;
}
.ct-email-preview { margin-top: 0.5rem; }
.ct-email-preview > summary {
  cursor: pointer;
  font-weight: 600;
  color: #0e7490;
  padding: 0.25rem 0;
  user-select: none;
}
.ct-email-preview-body {
  background: rgba(255,255,255,0.7);
  border: 1px solid #a7f3d0;
  border-radius: 8px;
  padding: 0.6rem 0.85rem;
  margin-top: 0.35rem;
  display: flex; flex-direction: column; gap: 0.25rem;
}
.ct-email-preview-line { color: #1e293b; font-size: 0.82rem; }
.ct-email-preview-line.muted { color: #64748b; font-size: 0.75rem; }
.ct-email-preview-line strong { color: #0e7490; font-weight: 600; }
.ct-email-preview-section { margin-top: 0.4rem; }
.ct-email-preview-section h5 {
  margin: 0 0 0.25rem; font-size: 0.78rem; color: #0e7490; font-weight: 700;
}
.ct-email-preview-section .muted { color: #64748b; font-weight: normal; }
.ct-email-primary {
  white-space: pre-wrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.78rem;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  border-radius: 6px;
  padding: 0.5rem 0.65rem;
  margin: 0;
  color: #1e293b;
  max-height: 14rem;
  overflow-y: auto;
}
.ct-email-quoted-wrap { margin-top: 0.4rem; }
.ct-email-quoted-wrap > summary {
  cursor: pointer; font-size: 0.78rem; color: #475569; padding: 0.2rem 0;
}
.ct-email-quoted {
  white-space: pre-wrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.74rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 0.5rem 0.65rem;
  margin: 0.25rem 0 0;
  color: #475569;
  border-left: 3px solid #cbd5e1;
  max-height: 18rem;
  overflow-y: auto;
}

/* ---------- Phase 2: Inbox triage page ---------- */
.inbox-page { padding: 1rem 1.5rem 2rem; max-width: 1400px; margin: 0 auto; }
.inbox-blurb { margin: 0.4rem 0 1rem; }
.inbox-body { display: grid; grid-template-columns: 360px 1fr; gap: 1.2rem; }
@media (max-width: 980px) { .inbox-body { grid-template-columns: 1fr; } }

.inbox-list { display: flex; flex-direction: column; gap: 0.4rem; max-height: 70vh; overflow-y: auto; padding-right: 0.3rem; }
.inbox-empty {
  background: #fff; border: 1px dashed #cbd5e1; border-radius: 10px;
  padding: 1.5rem; text-align: center; color: #64748b;
}
.inbox-row {
  display: block;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-left: 4px solid var(--inbox-pending);
  border-radius: 10px;
  padding: 0.6rem 0.85rem;
  text-decoration: none; color: inherit;
  transition: transform 80ms ease, box-shadow 120ms ease;
}
.inbox-row:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0,0,0,0.06); }
.inbox-row-promoted   { border-left-color: var(--inbox-promoted); opacity: 0.75; }
.inbox-row-dismissed  { border-left-color: var(--inbox-dismissed); opacity: 0.66; }
.inbox-row-rejected   { border-left-color: #f97316; opacity: 0.75; }
.inbox-row-reason     { color: #c2410c; font-style: italic; margin-left: 0.3rem; }

/* Banner that explains the rejection inside the viewer pane. Soft
   orange to match the "rejected" sidebar tint without being alarming
   — these aren't errors, they're "weren't routable, please review". */
.inbox-rejected-banner {
  margin-top: 0.85rem;
  padding: 0.55rem 0.8rem;
  background: linear-gradient(135deg, #fff7ed, #ffedd5);
  border: 1px solid #fed7aa;
  border-left: 4px solid #f97316;
  border-radius: 6px;
  font-size: 0.9rem;
  color: #7c2d12;
  line-height: 1.45;
}
.inbox-rejected-banner em { font-style: normal; font-weight: 600; }

/* Reused error pill for the rejected-status badge in the viewer. */
.status-error {
  background: #fee2e2; color: #991b1b;
  padding: 0.15rem 0.5rem; border-radius: 999px;
  font-size: 0.82rem; font-weight: 600;
}
.inbox-row-active {
  background: linear-gradient(135deg, #f0fdfa, #ecfdf5);
  border-color: var(--inbox-pending); box-shadow: 0 0 0 2px rgba(6,182,212,0.25);
}
.inbox-row-from { font-weight: 600; font-size: 0.88rem; color: #1e293b; }
.inbox-row-subject { font-size: 0.85rem; color: #334155; margin-top: 0.15rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inbox-row-snippet { font-size: 0.78rem; color: #64748b; margin-top: 0.2rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.inbox-row-meta { display: flex; gap: 0.5rem; align-items: center; margin-top: 0.3rem; font-size: 0.74rem; }

.inbox-viewer { background: #fff; border-radius: 12px; padding: 1rem 1.2rem; border: 1px solid #e2e8f0; box-shadow: 0 1px 3px rgba(0,0,0,0.05); min-height: 60vh; }
.inbox-viewer-head { border-bottom: 1px solid #e2e8f0; padding-bottom: 0.7rem; margin-bottom: 0.85rem; }
.ivh-line { font-size: 0.9rem; padding: 0.1rem 0; }
.inbox-viewer-actions { margin-top: 0.6rem; display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; }
.inbox-dismiss-prompt { margin-top: 0.5rem; display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; }
.inbox-dismiss-prompt input[type=text] {
  flex: 1; min-width: 12rem;
  border: 1px solid #cbd5e1; border-radius: 7px; padding: 0.35rem 0.55rem; font: inherit;
}
.inbox-tip { font-size: 0.85rem; }
.inbox-tip code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; background: #f1f5f9; padding: 0 0.3rem; border-radius: 4px; }

/* Pre-promote attachment preview — soft green panel mirroring the
   post-promote attachments card so the operator sees continuity
   between "what's coming" and "what landed". */
.inbox-attachments {
  margin-top: 0.85rem;
  padding: 0.5rem 0.7rem;
  background: linear-gradient(135deg, #f0fdf4, #ecfdf5);
  border: 1px solid #bbf7d0;
  border-radius: 6px;
}
.inbox-attachments h4 {
  margin: 0 0 0.4rem;
  font-size: 0.92rem;
  color: #14532d;
}
.inbox-attachment-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.inbox-attachment-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 0.86rem;
}
.inbox-attachment-list .ia-name {
  font-weight: 600;
  color: #0f172a;
}

.inbox-body-block { margin-top: 0.85rem; }
.inbox-body-block h4 { margin: 0 0 0.4rem; font-size: 0.92rem; }
.inbox-body-block .muted { color: #64748b; font-weight: normal; font-size: 0.78rem; }
.inbox-primary {
  white-space: pre-wrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85rem;
  background: linear-gradient(135deg, #f0fdfa, #ecfdf5);
  border: 1px solid #a7f3d0;
  border-radius: 8px;
  padding: 0.7rem 0.85rem;
  margin: 0;
  color: #1e293b;
}
.inbox-thread { margin-top: 0.85rem; }
.inbox-thread > summary { cursor: pointer; font-weight: 600; color: #475569; padding: 0.4rem 0; }
.inbox-quoted {
  white-space: pre-wrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.78rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 0.7rem 0.85rem;
  margin: 0.4rem 0 0;
  color: #475569;
  border-left: 3px solid #cbd5e1;
}

/* Cyan tile color used by the dashboard "Ticket by Email" card. The
   .health-cyan name slots into the existing tile naming scheme
   (.health-red / .health-orange / .health-green) used by dashboard.html. */
.health-cyan { color: #0e7490; background: #cffafe; border-color: #67e8f9; }

/* ---------- Phase 3: DCR (Data Change Request) section ---------- */
.td-dcr-block {
  background: #fff; border-radius: 12px; padding: 1rem 1.2rem;
  margin-top: 1rem; box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  border: 1px solid #e2e8f0;
}
.td-dcr-block h3 { margin: 0 0 0.6rem; font-size: 1rem; }
.td-dcr-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.6rem; }

.dcr-stepper {
  list-style: none; padding: 0; margin: 0;
  display: flex; gap: 0.5rem; align-items: center;
}
.dcr-stepper li {
  display: flex; align-items: center; gap: 0.45rem;
  padding: 0.35rem 0.85rem 0.35rem 0.45rem;
  border-radius: 999px;
  background: #f3f4f6; color: #94a3b8;
  border: 1px solid transparent;
  font-size: 0.85rem;
}
.dcr-stepper li + li::before {
  content: ""; width: 1.5rem; height: 2px; background: #cbd5e1;
  display: inline-block; margin-right: 0.45rem;
}
.dcr-dot {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.5rem; height: 1.5rem; border-radius: 50%;
  background: #cbd5e1; color: #fff; font-weight: 700; font-size: 0.78rem;
}
.dcr-step-active        { background: #dbeafe; color: #1e40af; }
.dcr-step-active .dcr-dot { background: #3b82f6; }
.dcr-step-complete      { background: #d1fae5; color: #065f46; }
.dcr-step-complete .dcr-dot { background: #10b981; font-size: 0; }
.dcr-step-complete .dcr-dot::after { content: "✓"; font-size: 0.88rem; }
.dcr-step-locked .dcr-dot { background: #e2e8f0; color: #cbd5e1; }
.dcr-step-time { color: #64748b; font-size: 0.78rem; }

.dcr-step-panel { margin-top: 0.85rem; }
.dcr-step-panel + .dcr-step-panel { margin-top: 1.2rem; padding-top: 1rem; border-top: 1px dashed #e2e8f0; }
.dcr-step-done  { color: #475569; font-size: 0.88rem; }
.dcr-step-done a { color: #0e7490; text-decoration: none; }
.dcr-step-done a:hover { text-decoration: underline; }

.dcr-field { display: flex; flex-direction: column; gap: 0.25rem; margin-bottom: 0.7rem; }
.dcr-label { font-size: 0.78rem; font-weight: 600; color: #475569; }
.dcr-field textarea, .dcr-field input[type=text], .dcr-field input[type=email] {
  border: 1px solid #cbd5e1; border-radius: 7px; padding: 0.45rem 0.6rem; font: inherit;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.dcr-field textarea { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.85rem; resize: vertical; }
.dcr-field input:focus, .dcr-field textarea:focus {
  outline: none; border-color: #10b981; box-shadow: 0 0 0 3px rgba(16,185,129,0.18);
}

.dcr-rows { margin: 0.6rem 0 0.85rem; }
.dcr-rows table { width: 100%; border-collapse: collapse; font-size: 0.78rem; }
.dcr-rows th, .dcr-rows td { padding: 0.3rem 0.4rem; text-align: left; border-bottom: 1px solid #f1f5f9; vertical-align: top; }
.dcr-rows th { color: #475569; font-weight: 700; background: #f8fafc; position: sticky; top: 0; }
.dcr-rows input { width: 100%; border: 1px solid #e2e8f0; border-radius: 5px; padding: 0.18rem 0.35rem; font: inherit; font-size: 0.78rem; background: #fff; }
.dcr-rows input:focus { outline: none; border-color: #10b981; box-shadow: 0 0 0 2px rgba(16,185,129,0.15); }
.dcr-row-x {
  background: transparent; border: 0; cursor: pointer;
  color: #94a3b8; font-size: 1.1rem; line-height: 1; padding: 0 0.3rem;
}
.dcr-row-x:hover { color: #ef4444; }
.dcr-rows .muted { color: #94a3b8; font-style: italic; padding: 0.5rem; text-align: center; }

.dcr-preview-wrap { margin-top: 0.7rem; }
.dcr-preview-wrap > summary { cursor: pointer; font-weight: 600; color: #475569; padding: 0.3rem 0; }
.dcr-preview { width: 100%; min-height: 28rem; border: 1px solid #e2e8f0; border-radius: 8px; background: #fff; }

.dcr-send-row { display: flex; gap: 0.7rem; align-items: flex-end; margin-top: 0.85rem; flex-wrap: wrap; }
.dcr-send-row .dcr-field { flex: 1; min-width: 14rem; margin-bottom: 0; }

.dcr-gate {
  margin-top: 1rem; padding: 0.55rem 0.85rem; border-radius: 8px;
  font-size: 0.85rem; font-weight: 600;
}
.dcr-gate-blocked { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }
.dcr-gate-clear   { background: #d1fae5; color: #065f46; border: 1px solid #a7f3d0; }

.ct-checkbox { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.88rem; }
.ct-checkbox input { margin: 0; }

/* Disabled close-button styling — when DCR is pending, the button stays
   visible but greyed out so the user understands "this exists but is
   gated" rather than "wait, where's close?" */
.td-btn[disabled] {
  opacity: 0.55; cursor: not-allowed; transform: none;
}

/* ─────────────────────────────────────────────────────────────────────────
   Send-to row — under the ticket description on the detail page. Four
   grey pills (Query / Report / Chart / Monitor) with the AI-suggested one
   ringed in a rotating pastel rainbow outline.

   The rainbow is a conic-gradient on a ::before pseudo, slightly inflated
   beyond the pill so the gradient shows as a 2px ring rather than under
   the text. @keyframes spins the gradient. The rest is calm grey so the
   highlighted pill draws the eye without three other pills competing.
   ───────────────────────────────────────────────────────────────────── */
.td-sendto {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
  margin: 0.6rem 0 1rem;
}
.td-sendto-label {
  color: #64748b; margin-right: 0.25rem;
}
.td-sendto-pill {
  position: relative;
  display: inline-flex; align-items: center;
  padding: 0.32rem 0.85rem;
  border-radius: 999px;
  background: #f1f5f9;
  color: #475569;
  font-size: 0.84rem;
  font-weight: 500;
  text-decoration: none;
  border: 1px solid #e2e8f0;
  transition: background 120ms ease, color 120ms ease;
}
.td-sendto-pill:hover {
  background: #e2e8f0;
  color: #1e293b;
}
.td-sendto-pill > span {
  position: relative;
  z-index: 1;
}

/* Placeholder pill (Archive Request) — visible in the row but
   visibly inert: dimmer text, no hover lift, default cursor. Drops
   the "coming soon" hint as a tooltip via the [title] attribute. */
.td-sendto-pill-placeholder {
  background: #f8fafc;
  color: #94a3b8;
  cursor: default;
  font-style: italic;
}
.td-sendto-pill-placeholder:hover {
  background: #f8fafc;
  color: #94a3b8;
}

/* Highlighted pill — rotating pastel rainbow outline. The ::before sits
   just outside the pill border (top/left/right/bottom: -2px) and carries
   the conic gradient; we mask the inner area so only a 2px ring is
   visible, then animate the rotation. Falls back gracefully on browsers
   without -webkit-mask: the gradient just fills the space behind the
   pill (still legible — the pill's own background sits above it). */
.td-sendto-pill-on {
  background: #ffffff;
  color: #1e293b;
  border-color: transparent;
}
/* Animate the conic-gradient's start angle via a custom property so
   the COLORS revolve through a STATIONARY ring instead of the whole
   ring transform-rotating around the pill (which made the outline
   wobble visually). @property registers --grad-angle as an animatable
   <angle>; the keyframe just bumps it from 0 to 360. The pseudo-
   element itself never moves — the gradient inside it does. */
@property --td-grad-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
.td-sendto-pill-on::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  --td-grad-angle: 0deg;
  background: conic-gradient(
    from var(--td-grad-angle),
    #fda4af, #fcd34d, #86efac, #67e8f9, #c4b5fd, #f9a8d4, #fda4af
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  padding: 2px;
  animation: td-sendto-spin 6s linear infinite;
  z-index: 0;
}
@keyframes td-sendto-spin {
  to { --td-grad-angle: 360deg; }
}
@media (prefers-reduced-motion: reduce) {
  .td-sendto-pill-on::before { animation: none; }
}

/* Admin-only re-suggest button — sits at the end of the Send-to row, no
   visual weight unless hovered. The contract is "never recompute on its
   own"; this button is the explicit escape hatch for an obviously-wrong
   cached suggestion. */
.td-sendto-admin {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 0.4rem;
}
.td-sendto-debug {
  color: #1e293b;
  background: #fde68a;
  border: 1px solid #f59e0b;
  padding: 0.2rem 0.6rem;
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  /* Override the <small>-element default of ~0.83em + author-defined
     `small { font-size: 0.78rem }` so the badge text is actually
     legible. line-height + display: inline-block also force the box
     to grow with content rather than collapsing inside the flex row. */
  font-size: 0.85rem !important;
  line-height: 1.3 !important;
  font-weight: 700;
  white-space: nowrap;
  display: inline-block;
}

.td-sendto-resuggest {
  background: transparent;
  border: 1px solid #e2e8f0;
  color: #94a3b8;
  width: 1.85rem; height: 1.85rem;
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: 0.95rem;
  transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}
.td-sendto-resuggest:hover:not([disabled]) {
  color: #1e293b;
  border-color: #cbd5e1;
  background: #f1f5f9;
}
.td-sendto-resuggest[disabled] {
  opacity: 0.55; cursor: progress;
}