/* HyperCurio — the report-a-problem bubble.
 *
 * It sits on every logged-in screen, so it has to be reachable without ever being in the way.
 * Above the bottom navigation on a phone, out of the thumb's path, and it never covers the
 * primary action of the page underneath.
 */

.tk-fab {
  position: fixed; right: var(--hc-4); z-index: 40;
  /* Clear of the bottom nav on a phone, and of the home indicator. */
  bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: var(--hc-surface-2); color: var(--hc-text);
  border: 1px solid var(--hc-border);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .38);
}
.tk-fab:hover, .tk-fab:focus-visible { border-color: var(--hc-accent); color: var(--hc-accent); }
@media (min-width: 1024px) {
  /* No bottom nav at this width, so it can sit lower. */
  .tk-fab { bottom: var(--hc-5); }
}

.tk-panel {
  border: 0; padding: 0; color: var(--hc-text); background: var(--hc-surface-1);
  width: min(520px, 100%); max-width: 100%; max-height: 90dvh;
  margin: auto auto 0; border-radius: var(--hc-radius-card) var(--hc-radius-card) 0 0;
}
/* The display MUST be gated on [open]. A <dialog> is display:none when closed, from the UA
   stylesheet, and setting display on the element itself overrides that: close() then removes the
   open attribute and the panel stays on screen, so the close button looks broken. That was
   ticket 710, reported by Terry within the hour. */
.tk-panel[open] { display: flex; flex-direction: column; }
.tk-panel::backdrop { background: rgba(5, 8, 16, .7); }
@media (min-width: 700px) {
  .tk-panel { margin: auto; border-radius: var(--hc-radius-card); }
}

.tk-head {
  display: flex; align-items: center; gap: var(--hc-3);
  padding: var(--hc-2) var(--hc-3) 0 var(--hc-4);
  border-bottom: 1px solid var(--hc-border);
}
.tk-tabs { display: flex; gap: var(--hc-1); flex: 1; }
.tk-tab {
  min-height: 48px; padding: 0 var(--hc-3); background: none; border: 0;
  border-bottom: 2px solid transparent; color: var(--hc-text-muted);
  font: inherit; cursor: pointer;
}
.tk-tab.is-on { color: var(--hc-text); border-bottom-color: var(--hc-accent); }
.tk-x {
  min-width: 44px; min-height: 44px; background: none; border: 0;
  color: var(--hc-text-muted); font-size: 24px; line-height: 1; cursor: pointer;
}
.tk-x:hover { color: var(--hc-text); }

.tk-body { padding: var(--hc-4); overflow: auto; flex: 1; }
.tk-field { margin-bottom: var(--hc-4); }
.tk-field > label { display: block; font-size: 14px; color: var(--hc-text-muted); margin-bottom: var(--hc-2); }
.tk-hint { font-size: 13px; color: var(--hc-text-muted); margin: var(--hc-2) 0; }
.tk-note { display: block; font-size: 13px; color: var(--hc-text-muted); margin-top: var(--hc-2); }
.tk-empty { text-align: center; padding: var(--hc-6) var(--hc-3); color: var(--hc-text-muted); }
.tk-actions { display: flex; justify-content: flex-end; }
.tk-actions .hc-btn { width: auto; min-height: 48px; }

.tk-clip {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--hc-3);
  border: 1px dashed var(--hc-border); border-radius: var(--hc-radius-control); cursor: pointer;
}
.tk-clip:hover { border-color: var(--hc-accent); }
.tk-files { margin-left: var(--hc-3); font-size: 13px; color: var(--hc-text-muted); }

/* ---------------------------------------------------------------- my tickets */
.tk-search { display: flex; align-items: center; gap: var(--hc-3); margin-bottom: var(--hc-3); }
.tk-search .hc-input { flex: 1; min-height: 44px; }
.tk-count { font-size: 13px; color: var(--hc-text-muted); white-space: nowrap; }

.tk-item { border: 1px solid var(--hc-border); border-radius: var(--hc-radius-card); margin-bottom: var(--hc-2); overflow: hidden; }
.tk-item.is-confirmed { opacity: .78; }
.tk-item-head {
  width: 100%; display: grid; grid-template-columns: auto auto 1fr auto; gap: var(--hc-2);
  align-items: center; min-height: 52px; padding: var(--hc-2) var(--hc-3);
  background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.tk-item-head:hover { background: var(--hc-surface-2); }

/* The three states read differently at a glance, and never by colour alone: each carries its
   own word, because that is what somebody is scanning for on a regression pass. */
.tk-state {
  font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
  border: 1px solid var(--hc-border); border-radius: 999px; padding: 1px var(--hc-2);
  color: var(--hc-text-muted); white-space: nowrap;
}
.tk-state--open { border-color: var(--hc-accent); color: var(--hc-accent); }
.tk-state--fixed { border-color: var(--hc-good); color: var(--hc-good); }
.tk-state--confirmed { border-color: var(--hc-text-disabled); color: var(--hc-text-disabled); }

.tk-num { font-variant-numeric: tabular-nums; color: var(--hc-text-muted); font-size: 13px; }
.tk-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-replies { font-size: 12px; color: var(--hc-text-muted); }

.tk-item-body { padding: 0 var(--hc-3) var(--hc-3); border-top: 1px solid var(--hc-border); }
.tk-detail { margin: var(--hc-3) 0; font-size: 14px; }
.tk-detail b { display: block; font-size: 12px; color: var(--hc-text-muted); margin-bottom: var(--hc-1); }
.tk-detail a, .tk-msg a { color: var(--hc-assistant); }

.tk-thread { display: grid; gap: var(--hc-2); margin: var(--hc-3) 0; }
.tk-msg { padding: var(--hc-2) var(--hc-3); border-radius: var(--hc-radius-control); font-size: 14px; }
.tk-msg b { display: block; font-size: 12px; color: var(--hc-text-muted); margin-bottom: 2px; }
.tk-msg--you { background: var(--hc-surface-2); }
/* A reply from us is the one somebody came back to read, so it is the one that stands out. */
.tk-msg--blake { background: var(--hc-surface-2); border-left: 3px solid var(--hc-accent); }

.tk-reply { margin-top: var(--hc-3); }
.tk-reply-btns { display: flex; gap: var(--hc-2); margin-top: var(--hc-2); flex-wrap: wrap; }
.tk-sm { width: auto; min-height: 44px; padding: 0 var(--hc-3); font-size: 14px; }

.tk-fold {
  width: 100%; min-height: 48px; margin-top: var(--hc-3);
  background: none; border: 1px dashed var(--hc-border); border-radius: var(--hc-radius-control);
  color: var(--hc-text-muted); font: inherit; cursor: pointer;
}
.tk-fold:hover { border-color: var(--hc-accent); color: var(--hc-text); }

/* 721: the images attached to a ticket, as thumbnails that open full size. */
.tk-imgs { display: flex; flex-wrap: wrap; gap: var(--hc-2); margin-top: var(--hc-2); }
.tk-imgs a { display: block; width: 88px; height: 88px; border-radius: 8px; overflow: hidden; border: 1px solid var(--hc-border); }
.tk-imgs img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tk-detail div { overflow-wrap: anywhere; }

/* 757: on a desktop the panel can be moved by its header and resized from its corner. The backdrop
   is light so the page behind stays readable, which is the point of moving it. */
@media (min-width: 700px) {
  .tk-panel.tk-free { position: fixed; margin: 0; max-width: 96vw; max-height: 96dvh; min-width: 360px; min-height: 320px; resize: both; overflow: hidden; }
  .tk-panel.tk-free .tk-head { cursor: move; user-select: none; touch-action: none; }
  .tk-panel.tk-free .tk-body { flex: 1 1 auto; overflow-y: auto; }
  .tk-panel.tk-free::backdrop { background: rgba(5, 8, 16, .25); }
}
/* 758: the reply's own attach control. */
.tk-rattach { margin-top: var(--hc-2); }

/* 766: a PDF in the attached files, the same size as a screenshot tile */
.tk-imgs a.tk-pdf { display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 8px; text-decoration: none; color: var(--hc-text); background: var(--hc-surface-2); }
.tk-pdf b { font-size: 12px; letter-spacing: .06em; color: var(--hc-accent); }
.tk-pdf span { font-size: 11px; line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; word-break: break-all; }

/* 893: the heading over fixed-and-waiting tickets, matching the fold buttons under it. */
.tk-group { margin: var(--hc-2) 0; font-size: 13px; font-weight: 700; color: var(--hc-text-muted); }

/* 912/913: Ask, in the bubble */
.tk-ask { display: grid; gap: var(--hc-2); max-height: 50vh; overflow-y: auto; padding-bottom: var(--hc-2); }
.tk-askform { display: flex; gap: var(--hc-2); margin-top: var(--hc-3); }
.tk-askform .hc-input { flex: 1; min-width: 0; }

/* 935: thinking */
.tk-think { display: inline-flex; align-items: center; gap: var(--hc-2); color: var(--hc-text-muted); }
.tk-spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--hc-border); border-top-color: var(--hc-accent); animation: tk-spin .8s linear infinite; }
@keyframes tk-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .tk-spin { animation: none; border-color: var(--hc-accent); } }

/* 941: attached files, by name, each removable */
.tk-files { display: flex; flex-wrap: wrap; gap: 6px; margin: var(--hc-2) 0 0; }
.tk-chip { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 2px 4px 2px 10px; border: 1px solid var(--hc-border); border-radius: 999px; background: var(--hc-surface-2); font-size: 13px; color: var(--hc-text); }
.tk-chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.tk-chip-x { width: 28px; height: 28px; border: 0; border-radius: 50%; background: none; color: var(--hc-text-muted); font: inherit; font-size: 16px; cursor: pointer; }
.tk-chip-x:hover, .tk-chip-x:focus-visible { background: var(--hc-surface-1); color: var(--hc-text); }
.tk-chip-max { font-size: 12px; color: var(--hc-text-muted); align-self: center; }