/* /discord-bots/tickets (tkp-). Loaded after builtin_services.css (pa-
   tokens, hero type, buttons, mock window bar, closing band) and
   all_in_one.css (aio- sections, fact tiles, perks, steps, plans, FAQ,
   related links), both unchanged. Only what is new to this page lives here. */

.tkp { --tkp-ok: #34d399; --tkp-warn: #f6c453; --tkp-bad: #f87171; --tkp-blurple: #5865f2; --tkp-grey: #4e5058; --tkp-green: #248046; --tkp-red: #da373c; }

.tkp-k { font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--yb-muted); }
.tkp-hash { color: var(--yb-muted); font-weight: 700; margin-right: 0.2rem; }
.tkp-av { width: 24px; height: 24px; flex: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 0.64rem; font-weight: 700; color: #fff; background: hsl(var(--h, 220), 62%, 52%); }

/* Discord's button colours, the same in both themes as in the app. */
.tkp-btn { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.74rem; font-weight: 500; line-height: 1; color: #fff; border-radius: 4px; padding: 0.44rem 0.72rem; white-space: nowrap; }
.tkp-btn-primary { background: var(--tkp-blurple); }
.tkp-btn-secondary { background: var(--tkp-grey); }
.tkp-btn-success { background: var(--tkp-green); }
.tkp-btn-danger { background: var(--tkp-red); }
.tkp-btn-sm { font-size: 0.66rem; padding: 0.3rem 0.55rem; }
.tkp-btn-row { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.5rem; }

/* A Discord window: channel header, one bot message, an embed. */
.tkp-win { margin: 0; background: var(--yb-void); border: 1px solid var(--yb-border); border-radius: 12px; overflow: hidden; box-shadow: 0 22px 60px rgba(0,0,0,0.28); min-width: 0; }
.tkp-chan { display: flex; align-items: center; font-weight: 600; font-size: 0.84rem; color: var(--yb-text); padding: 0.55rem 0.85rem; border-bottom: 1px solid var(--yb-border); background: var(--yb-overlay-soft); }
.tkp-dm { font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--yb-muted); font-weight: 400; }
.tkp-msg { padding: 0.7rem 0.85rem 0.85rem; min-width: 0; }
.tkp-msg-head { display: flex; align-items: center; gap: 0.45rem; font-size: 0.84rem; margin-bottom: 0.45rem; }
.tkp-msg-head b { font-weight: 600; color: var(--yb-text); }
.tkp-msg-av { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--yb-depth); border: 1px solid var(--yb-gold-dim); overflow: hidden; flex: none; }
.tkp-msg-av img { width: 76%; height: auto; display: block; }
.tkp-embed { border-left: 4px solid var(--yb-border2); background: var(--yb-depth); border-radius: 4px; padding: 0.55rem 0.8rem 0.6rem; display: grid; gap: 0.42rem; }
.tkp-embed-blurple { border-left-color: var(--tkp-blurple); }
.tkp-embed-title { font-weight: 700; font-size: 0.9rem; color: var(--yb-text); }
.tkp-embed-desc { font-size: 0.76rem; line-height: 1.5; color: var(--yb-muted); }
.tkp-embed-desc b { color: var(--yb-text); }
.tkp-embed-foot { font-size: 0.62rem; color: var(--yb-muted2); }
.tkp-ef-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.4rem; }
.tkp-ef { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.tkp-ef-k { font-size: 0.68rem; font-weight: 700; color: var(--yb-text); }
.tkp-ef-v { font-size: 0.74rem; line-height: 1.4; color: var(--yb-muted); overflow-wrap: anywhere; }
.tkp-due { color: var(--yb-text); text-decoration: underline dotted; text-underline-offset: 2px; }

/* ---- Hero stage: the panel, the ticket it opened and the agent ---- */
.tkp-stage { position: relative; margin: 0; justify-self: end; width: 100%; max-width: 540px; padding-top: 96px; }
.tkp-bot { position: absolute; top: -40px; right: -24px; width: 250px; height: auto; z-index: 0; pointer-events: none; filter: drop-shadow(0 18px 30px rgba(0,0,0,0.42)); }
.tkp-panel { position: relative; z-index: 1; width: 72%; }
.tkp-panel .tkp-btn { font-size: 0.68rem; padding: 0.4rem 0.55rem; }
.tkp-panel .tkp-btn-row { flex-wrap: nowrap; }
.tkp-ticket { position: relative; z-index: 2; width: 74%; margin: -14px 0 0 auto; border-color: var(--yb-gold-dim); box-shadow: 0 0 0 1px rgba(59,130,246,0.1), 0 20px 50px rgba(37,99,235,0.22); }
.tkp-ticket .tkp-embed { gap: 0.36rem; }

/* ---- 01 Panels: the three layouts and the category menu ---- */
.tkp-doors { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1.1rem; align-items: start; margin-bottom: 1.2rem; }
.tkp-layouts { display: grid; gap: 0.7rem; }
.tkp-layout { display: flex; gap: 0.9rem; align-items: flex-start; background: var(--yb-abyss); border: 1px solid var(--yb-border); border-radius: 12px; padding: 0.95rem 1.05rem; }
.tkp-layout .aio-h3 { margin-bottom: 0.25rem; }
.tkp-layout-x { font-size: 0.87rem; line-height: 1.55; color: var(--yb-muted); margin: 0; }
.tkp-menu-fig { margin: 0; background: var(--yb-void); border: 1px solid var(--yb-border2); border-radius: 12px; padding: 1rem 1rem 0.9rem; box-shadow: 0 22px 60px rgba(0,0,0,0.24); }
.tkp-menu-crumb { display: flex; gap: 0.35rem; margin-bottom: 0.55rem; }
.tkp-menu-crumb span { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--yb-cyan); background: var(--yb-cyan-bg); border: 1px solid var(--yb-cyan-dim); border-radius: 4px; padding: 1px 7px; }
.tkp-select { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; font-size: 0.84rem; color: var(--yb-muted); background: var(--yb-depth); border: 1px solid var(--tkp-blurple); border-radius: 6px 6px 0 0; padding: 0.55rem 0.7rem; }
.tkp-select svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transform: rotate(180deg); }
.tkp-options { list-style: none; margin: 0; padding: 0.25rem; border: 1px solid var(--yb-border2); border-top: 0; border-radius: 0 0 6px 6px; background: var(--yb-abyss); display: grid; gap: 1px; }
.tkp-options li { display: flex; flex-direction: column; gap: 0.1rem; padding: 0.45rem 0.6rem; border-radius: 4px; }
.tkp-options b { font-size: 0.84rem; font-weight: 600; color: var(--yb-text); }
.tkp-options span { font-size: 0.74rem; color: var(--yb-muted); }
.tkp-opt-on { background: var(--yb-overlay-soft); }
.tkp-menu-note { font-size: 0.8rem; line-height: 1.5; color: var(--yb-muted); margin-top: 0.75rem; }

/* ---- Cards ---- */
.tkp-cards { display: grid; gap: 0.8rem; }
.tkp-cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tkp-cards-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tkp-card { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; background: var(--yb-abyss); border: 1px solid var(--yb-border); border-radius: 12px; padding: 1rem 1.05rem 1.1rem; }
.tkp-card-ic { width: 34px; height: 34px; flex: none; border-radius: 9px; display: flex; align-items: center; justify-content: center; background: var(--yb-cyan-bg); border: 1px solid var(--yb-cyan-dim); color: var(--yb-cyan); margin-bottom: 0.2rem; }
.tkp-card-ic svg { width: 17px; height: 17px; }
.tkp-card-t { font-family: var(--disp); font-weight: 600; font-size: 1rem; line-height: 1.25; color: var(--yb-text); }
.tkp-card-x { font-size: 0.86rem; line-height: 1.56; color: var(--yb-muted); }

/* ---- 02 The intake form as a Discord pop-up ---- */
.tkp-split { align-items: start; }
.tkp-modal { margin: 0; background: var(--yb-void); border: 1px solid var(--yb-border2); border-radius: 12px; overflow: hidden; box-shadow: 0 22px 60px rgba(0,0,0,0.3); min-width: 0; }
.tkp-modal-head { display: flex; align-items: center; gap: 0.55rem; padding: 0.85rem 1rem; }
.tkp-modal-head b { font-family: var(--disp); font-size: 1.05rem; color: var(--yb-text); }
.tkp-modal-av { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--yb-depth); border: 1px solid var(--yb-gold-dim); overflow: hidden; flex: none; }
.tkp-modal-av img { width: 76%; height: auto; display: block; }
.tkp-modal-x { margin-left: auto; font-size: 1.2rem; color: var(--yb-muted2); line-height: 1; }
.tkp-modal-body { padding: 0 1rem 0.9rem; display: grid; gap: 0.8rem; }
.tkp-field { display: grid; gap: 0.35rem; }
.tkp-field-k { display: flex; align-items: baseline; gap: 0.5rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: var(--yb-text); }
.tkp-field-k em { font-style: normal; font-weight: 500; text-transform: none; letter-spacing: 0; font-size: 0.68rem; color: var(--yb-cyan); }
.tkp-field-v { font-size: 0.84rem; color: var(--yb-text); background: var(--yb-depth); border: 1px solid var(--yb-border); border-radius: 4px; padding: 0.5rem 0.65rem; }
.tkp-field-paragraph { min-height: 4.2em; line-height: 1.45; }
.tkp-modal-foot { display: flex; align-items: center; justify-content: flex-end; gap: 0.9rem; padding: 0.75rem 1rem; background: var(--yb-overlay-soft); border-top: 1px solid var(--yb-border); }
.tkp-link { font-size: 0.8rem; color: var(--yb-text); }
.tkp-modal-foot .tkp-btn { padding: 0.55rem 1.1rem; font-size: 0.8rem; }
.tkp-chips-block { display: grid; gap: 0.9rem; margin-top: 1.4rem; background: var(--yb-abyss); border: 1px solid var(--yb-border); border-radius: 12px; padding: 1rem 1.1rem 1.05rem; }
.tkp-chips-row { display: grid; gap: 0.5rem; }
.tkp-chips-h { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--yb-cyan); }
.tkp-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.tkp-chips li { font-size: 0.82rem; color: var(--yb-text); background: var(--yb-cyan-bg); border: 1px solid var(--yb-cyan-dim); border-radius: 6px; padding: 0.24rem 0.6rem; }
.tkp-chips-soft li { background: var(--yb-overlay-soft); border-color: var(--yb-border2); }

/* ---- 03 Team, SLA and statuses ---- */
.tkp-route { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.8rem; margin-bottom: 1.2rem; align-items: stretch; }
.tkp-panelcard { margin: 0; display: flex; flex-direction: column; gap: 0.6rem; background: var(--yb-void); border: 1px solid var(--yb-border2); border-radius: 12px; padding: 1rem 1.05rem 1.05rem; min-width: 0; }
.tkp-pc-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
.tkp-pc-head b { font-family: var(--disp); font-size: 1rem; color: var(--yb-text); }
.tkp-pc-head-2 { margin-top: 0.3rem; }
.tkp-modes { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.tkp-mode { font-size: 0.72rem; color: var(--yb-muted); border: 1px solid var(--yb-border2); border-radius: 999px; padding: 0.18rem 0.6rem; }
.tkp-mode-on { color: #fff; background: var(--tkp-blurple); border-color: var(--tkp-blurple); }
.tkp-members { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.tkp-members li { display: flex; align-items: center; gap: 0.5rem; font-size: 0.86rem; color: var(--yb-text); padding: 0.3rem 0.4rem; border-radius: 6px; background: var(--yb-overlay-soft); }
.tkp-load { margin-left: auto; font-family: var(--mono); font-size: 0.62rem; color: var(--yb-muted); }
.tkp-pc-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: auto; border-top: 1px dashed rgba(96,128,210,0.2); padding-top: 0.6rem; }
.tkp-role { font-size: 0.8rem; font-weight: 600; color: #a5b4fc; background: rgba(99,102,241,0.14); border-radius: 4px; padding: 0.12rem 0.45rem; }
.tkp-sla { margin: 0; display: grid; gap: 0.4rem; }
.tkp-sla > div { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; padding: 0.45rem 0.55rem; border-radius: 6px; background: var(--yb-overlay-soft); }
.tkp-sla dt { font-size: 0.82rem; color: var(--yb-muted); }
.tkp-sla dd { margin: 0; font-weight: 600; font-size: 0.86rem; color: var(--yb-text); }
.tkp-pc-note { font-size: 0.8rem; line-height: 1.5; color: var(--yb-muted); margin: auto 0 0; }
.tkp-status-list, .tkp-prio-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.3rem; }
.tkp-status-list li, .tkp-prio-list li { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.74rem; color: var(--yb-text); background: var(--yb-overlay-soft); border: 1px solid var(--yb-border); border-radius: 6px; padding: 0.2rem 0.5rem; }

/* ---- 04 The web queue ---- */
.tkp-queue { margin-bottom: 1rem; }
.tkp-table-wrap { overflow-x: auto; }
.tkp-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.tkp-table th, .tkp-table td { text-align: left; padding: 0.6rem 0.8rem; border-bottom: 1px solid var(--yb-border); white-space: nowrap; color: var(--yb-text); }
.tkp-table thead th { font-family: var(--mono); font-size: 0.56rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--yb-muted); background: var(--yb-overlay-soft); }
.tkp-table tbody tr:last-child td { border-bottom: 0; }
.tkp-num { color: var(--yb-muted); font-family: var(--mono); font-size: 0.74rem; }
.tkp-title-cell b { font-weight: 600; }
.tkp-cat { display: inline-block; font-size: 0.64rem; font-weight: 600; color: #a3b4ff; background: rgba(88,101,242,0.14); padding: 1px 6px; border-radius: 6px; margin-left: 0.4rem; }
.tkp-badge { display: inline-block; font-size: 0.66rem; font-weight: 600; border-radius: 999px; padding: 0.14rem 0.55rem; border: 1px solid var(--yb-border2); color: var(--yb-muted); }
.tkp-badge-open { color: var(--tkp-ok); border-color: rgba(52,211,153,0.45); background: rgba(52,211,153,0.1); }
.tkp-badge-claimed { color: #c4b5fd; border-color: rgba(167,139,250,0.45); background: rgba(167,139,250,0.1); }
.tkp-badge-awaiting_staff { color: var(--tkp-warn); border-color: rgba(246,196,83,0.45); background: rgba(246,196,83,0.1); }
.tkp-badge-awaiting_user { color: var(--yb-cyan); border-color: var(--yb-cyan-dim); background: var(--yb-cyan-bg); }
.tkp-badge-low { color: var(--tkp-ok); }
.tkp-badge-normal { color: #93a5ff; }
.tkp-badge-high { color: var(--tkp-warn); }
.tkp-badge-urgent { color: var(--tkp-bad); border-color: rgba(248,113,113,0.45); background: rgba(248,113,113,0.08); }
.tkp-last { color: var(--yb-muted) !important; font-size: 0.76rem; }
.tkp-sla-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--yb-border2); margin-right: 0.45rem; vertical-align: middle; }
.tkp-sla-soon td:first-child { box-shadow: inset 3px 0 0 var(--tkp-warn); }
.tkp-sla-soon .tkp-sla-dot { background: var(--tkp-warn); }
.tkp-sla-breached td:first-child { box-shadow: inset 3px 0 0 var(--tkp-bad); }
.tkp-sla-breached .tkp-sla-dot { background: var(--tkp-bad); }
.tkp-sla-breached .tkp-last { color: var(--tkp-bad) !important; }
.tkp-cmds { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.6rem; margin-bottom: 1.2rem; }
.tkp-cmd { display: flex; flex-direction: column; gap: 0.25rem; background: var(--yb-abyss); border: 1px solid var(--yb-border); border-radius: 10px; padding: 0.75rem 0.9rem; min-width: 0; }
.tkp-cmd code { font-family: var(--mono); font-size: 0.86rem; color: var(--yb-cyan); }
.tkp-cmd b { font-size: 0.8rem; color: var(--yb-text); }
.tkp-cmd span { font-size: 0.8rem; line-height: 1.45; color: var(--yb-muted); }

/* ---- 05 Transcript and rating ---- */
.tkp-record { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 1.1rem; align-items: start; margin-bottom: 1.2rem; }
.tkp-tx { list-style: none; margin: 0; padding: 0.8rem 1rem 0.3rem; display: grid; gap: 0.8rem; }
.tkp-tx li { display: flex; gap: 0.65rem; align-items: flex-start; }
.tkp-tx-head { display: flex; align-items: center; gap: 0.45rem; font-size: 0.84rem; }
.tkp-tx-head b { color: var(--yb-text); font-weight: 600; }
.tkp-tx-t { font-size: 0.66rem; color: var(--yb-muted2); }
.tkp-tx p { margin: 0.15rem 0 0; font-size: 0.84rem; line-height: 1.45; color: var(--yb-muted); }
.tkp-tx-meta { display: flex; flex-wrap: wrap; gap: 0.35rem; padding: 0.7rem 1rem 0.85rem; border-top: 1px dashed rgba(96,128,210,0.2); margin-top: 0.6rem; }
.tkp-tx-meta span { font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--yb-muted); border: 1px solid var(--yb-border2); border-radius: 4px; padding: 2px 7px; }

/* ---- 06 Reuse ---- */
.tkp-reuse { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.8rem; margin-top: 1rem; }
.tkp-reuse-col { display: grid; gap: 0.55rem; align-content: start; background: var(--yb-abyss); border: 1px solid var(--yb-border); border-radius: 12px; padding: 1rem 1.1rem 1.05rem; }
.tkp-code { justify-self: start; font-family: var(--mono); font-size: 1.05rem; letter-spacing: 0.08em; color: var(--yb-text); background: var(--yb-depth); border: 1px dashed var(--yb-gold-dim); border-radius: 6px; padding: 0.4rem 0.8rem; }
.tkp-reuse-x { font-size: 0.85rem; line-height: 1.55; color: var(--yb-muted); margin: 0; }

/* ---- Closing band ---- */
.tkp-close .aio-close-art { max-width: 340px; }

/* ---- Light theme ---- */
[data-theme="light"] .tkp { --tkp-ok: #0f9f6e; --tkp-warn: #b7791f; --tkp-bad: #d63c3c; }
[data-theme="light"] .tkp-win, [data-theme="light"] .tkp-modal, [data-theme="light"] .tkp-menu-fig { box-shadow: 0 16px 40px rgba(30,41,80,0.12); }
[data-theme="light"] .tkp-ticket { box-shadow: 0 0 0 1px rgba(37,99,235,0.08), 0 14px 34px rgba(37,99,235,0.14); }
[data-theme="light"] .tkp-bot { filter: drop-shadow(0 14px 22px rgba(20,30,60,0.22)); }
[data-theme="light"] .tkp-btn-secondary { background: #6d6f78; }
[data-theme="light"] .tkp-cat { color: #4338ca; background: rgba(88,101,242,0.1); }
[data-theme="light"] .tkp-role { color: #4338ca; background: rgba(99,102,241,0.12); }
[data-theme="light"] .tkp-badge-claimed { color: #6d28d9; }
[data-theme="light"] .tkp-badge-normal { color: #4f46e5; }
[data-theme="light"] .tkp-chips-h { color: var(--yb-gold); }

/* ---- Responsive ---- */
@media (max-width: 1100px) {
  .tkp-cards-4, .tkp-cmds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .tkp-stage { justify-self: center; max-width: 560px; }
  .tkp-doors, .tkp-record, .tkp-route { grid-template-columns: 1fr; }
  .tkp-cards-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  /* Mono labels: legible floor on a phone, nothing below ~10px. */
  .tkp-k, .tkp-dm, .tkp-chips-h, .tkp-table thead th, .tkp-tx-meta span, .tkp-menu-crumb span, .tkp-load { font-size: 0.64rem; }
}
@media (max-width: 560px) {
  .tkp-stage { padding-top: 150px; }
  .tkp-bot { width: 200px; top: -16px; right: -6px; }
  .tkp-panel { width: 92%; }
  .tkp-ticket { width: 96%; margin-top: 12px; }
  .tkp-panel .tkp-btn-row { flex-wrap: wrap; }
  .tkp-cards-3, .tkp-cards-4, .tkp-cmds, .tkp-reuse { grid-template-columns: 1fr; }
  .tkp-ef-row { grid-template-columns: 1fr 1fr; }
  .tkp-table th, .tkp-table td { padding: 0.5rem 0.55rem; }
}