/* The app's one stylesheet (Chainlit takes a single custom_css, set in frontend/app.py). Colors come from Chainlit's
   theme variables, so light and dark mode follow the app.

   Completions while typing (frontend/public/suggest.js). */

.ts-complete {
  position: fixed;
  z-index: 60;
  display: none;
  flex-direction: column;
  padding: 4px;
  max-height: min(420px, 60vh);
  overflow-y: auto;
  border: 1px solid hsl(var(--border));
  border-radius: 12px;
  background: hsl(var(--popover, var(--background)));
  color: hsl(var(--popover-foreground, var(--foreground)));
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.12);
  font-size: 15px;
}
.ts-complete.ts-open { display: flex; }

/* Day heading in the list of past questions. */
.ts-group {
  padding: 10px 12px 4px;
  color: hsl(var(--muted-foreground));
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.ts-item {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
}
.ts-item.ts-selected { background: hsl(var(--accent)); }
.ts-text { white-space: nowrap; }
.ts-hint {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: right;
  color: hsl(var(--muted-foreground));
  font-size: 14px;
}

/* Chainlit's own 👍/👎 under every assistant message. Chainlit 2.12 shows them whenever chat history is on and has
   no setting to turn them off; nothing reads those votes, and they were easy to confuse with Accept/Reject on the
   recommended tickets (#26). The class names come from Chainlit's frontend: check them after upgrading Chainlit. */
.positive-feedback-on,
.positive-feedback-off,
.negative-feedback-on,
.negative-feedback-off {
  display: none !important;
}

/* The button under an answer that reopens the side panel (PanelButton.jsx): quiet, so the answer stays in front. */
.ts-panel-button {
  gap: 6px;
  color: hsl(var(--muted-foreground));
  font-weight: 500;
}
.ts-panel-button:hover { color: hsl(var(--foreground)); }

/* Recommended tickets in the side panel (RecommendationList.jsx). */
.ts-recs {
  display: flex;
  flex-direction: column;
  border: 1px solid hsl(var(--border));
  border-radius: 10px;
  overflow: hidden;
}
.ts-recs-title {
  padding: 8px 12px;
  color: hsl(var(--muted-foreground));
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid hsl(var(--border));
}
.ts-rec {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
}
.ts-rec + .ts-rec { border-top: 1px solid hsl(var(--border)); }
.ts-rec-vote {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  color: hsl(var(--muted-foreground));
  font-size: 13px;
}

/* A ticket id that opens the ticket modal (TicketModal.jsx with trigger "link"). */
.ts-ticket-link {
  padding: 0;
  border: 0;
  background: none;
  color: hsl(var(--primary));
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.ts-ticket-link:hover { text-decoration: underline; }