/**
 * Project layer on top of the vendored Metronic bundle (assets/css/styles.css).
 *
 * Everything here is expressed with Metronic's semantic tokens (--primary,
 * --border, --muted-foreground, ...) so light/dark mode and RTL keep working.
 *
 * Load order matters: this file must come after styles.css.
 *
 * Sections:
 *   1. Typography      - Persian/Latin font selection and digit handling
 *   2. Utility fill    - utilities the prebuilt Tailwind bundle does not ship
 *   3. Data tables     - Livewire table extras (filter row, synced scrollbar)
 *   4. Chat            - conversation timelines
 *   5. File manager    - knowledge-base file cards
 *   6. Editor          - markdown editor
 *   7. Toasts          - Livewire notification stack
 */

/* ---------------------------------------------------------------- 1. Typography */

:root {
  --kt-admin-font-latin: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --kt-admin-font-persian: "Vazirmatn FD", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-sans: var(--kt-admin-font-latin);
}

html[lang="fa"] {
  --font-sans: var(--kt-admin-font-persian);
}

/* Identifiers, timestamps and other machine values stay left-to-right and in
   Latin digits even inside a Persian right-to-left page. */
.kt-ltr {
  direction: ltr;
  unicode-bidi: isolate;
  text-align: start;
}

.kt-latin-digits {
  font-feature-settings: normal;
  font-variant-numeric: lining-nums tabular-nums;
  font-family: var(--kt-admin-font-latin);
}

.kt-persian-digits,
.text-mono.kt-persian-digits,
.kt-badge.kt-persian-digits {
  font-family: var(--kt-admin-font-persian);
  font-feature-settings: normal;
  font-variant-numeric: normal;
}

/* Vazirmatn FD renders Latin digits as Persian glyphs; LTR form controls keep
   English digits for passwords, captchas, IDs, and other machine values. */
html[lang="fa"] .kt-input.kt-ltr,
html[lang="fa"] .kt-input.kt-ltr > input,
html[lang="fa"] input.kt-input.kt-ltr,
html[lang="fa"] .kt-input.kt-latin-digits,
html[lang="fa"] .kt-input.kt-latin-digits > input,
html[lang="fa"] input.kt-input.kt-latin-digits,
html[lang="fa"] .kt-select.kt-ltr,
html[lang="fa"] .kt-select.kt-latin-digits {
  font-feature-settings: normal;
  font-variant-numeric: lining-nums tabular-nums;
  font-family: var(--kt-admin-font-latin);
}

/* ---------------------------------------------------------------- 2. Utility fill */

/* The theme's Tailwind output only contains utilities its own demos used, so a
   handful of standard ones are absent. They are reproduced verbatim here. */

.grid-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.font-bold {
  --tw-font-weight: 700;
  font-weight: 700;
}

.bg-accent {
  background-color: var(--accent);
}

.whitespace-pre-wrap {
  white-space: pre-wrap;
}

.break-words {
  overflow-wrap: break-word;
}

.mt-auto {
  margin-top: auto;
}

.max-w-\[920px\] {
  max-width: 920px;
}

@media (width >= 64rem) {
  .lg\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Metronic's markup uses these two as semantic hooks but ships no rules for
   them, so the text styling is supplied here. */
.kt-form-hint {
  font-size: var(--text-xs);
  line-height: 1.6;
  color: var(--muted-foreground);
}

.kt-checkbox-label {
  font-size: var(--text-2sm);
  font-weight: 500;
  color: var(--foreground);
}

/* ---------------------------------------------------------------- 3. Data tables */

/* A second scrollbar above wide tables, kept in sync with the table wrapper by
   the layout script. Both scrollers are siblings inside .kt-card-table. */
.kt-table-scrollbar-top {
  overflow-x: auto;
  overflow-y: hidden;
}

.kt-table-scrollbar-top > div {
  height: 1px;
}

/* Per-column filter inputs live in a second header row. */
.kt-table thead tr.kt-table-filter-row th {
  padding-top: 0;
  padding-bottom: 0.625rem;
  vertical-align: top;
  background-color: var(--muted);
}

.kt-table-filter-row .kt-input,
.kt-table-filter-row .kt-select {
  min-width: 6rem;
  font-weight: 400;
}

/* Number cells use .kt-ltr, which flips logical inline borders in RTL tables
   and drops the shared edge with the next RTL column (e.g. تعداد کاربر | وضعیت).
   Keep the visible grid line on the cell's physical start edge instead. */
.kt-table-border td.kt-ltr,
.kt-table-border th.kt-ltr {
  border-inline-end-width: 0;
  border-inline-start: 1px solid var(--border);
}

.kt-table-border td.kt-ltr:last-child,
.kt-table-border th.kt-ltr:last-child {
  border-inline-start-width: 0;
}

/* Long free-text cells: clamp to a single line, reveal the rest on hover. */
.kt-text-preview {
  display: block;
  max-width: 22rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kt-text-preview-hover:hover .kt-text-preview,
.kt-text-preview-hover.kt-text-preview:hover {
  max-width: none;
  overflow: visible;
  white-space: normal;
}

.kt-text-preview-lg {
  max-width: 36rem;
}

/* ---------------------------------------------------------------- 4. Chat */

.kt-chat-timeline {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  max-height: 32rem;
  overflow-y: auto;
  padding: 1.25rem;
  background-color: #e6ebee;
  border-radius: var(--radius);
}

/* Small screens: the sidebar stacks above the chat panel (see index.blade.php),
   so the timeline needs to shrink and messages need to use the narrower width
   instead of the 42rem desktop cap. */
@media (width < 64rem) {
  .kt-chat-timeline {
    max-height: 22rem;
    padding: 0.875rem;
    gap: 1rem;
  }

  .kt-chat-message {
    max-width: 100%;
  }
}

@media (width < 30rem) {
  .kt-chat-bubble {
    padding: 0.625rem 0.75rem;
    padding-bottom: 1.375rem;
  }

  .kt-chat-avatar {
    width: 1.75rem;
    height: 1.75rem;
  }
}

html.dark .kt-chat-timeline {
  background-color: #0e1621;
}

.kt-chat-message {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 0.375rem;
  max-width: 42rem;
}

.kt-chat-message-question {
  align-self: flex-start;
}

.kt-chat-message-answer {
  align-self: flex-end;
}

/* Row of avatar + bubble/meta, Telegram-style. Question messages keep the
   avatar at the outer-right edge (default row order in RTL); answer messages
   reverse it so the avatar sits at the outer-left edge instead. */
.kt-chat-row {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
}

.kt-chat-message-answer .kt-chat-row {
  flex-direction: row-reverse;
}

.kt-chat-avatar {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-2xs);
  font-weight: 600;
  line-height: 1;
  color: #fff;
}

.kt-chat-message-question .kt-chat-avatar {
  background: linear-gradient(135deg, #34b7f1, #1e88e5);
}

.kt-chat-message-answer .kt-chat-avatar {
  background: linear-gradient(135deg, #7c4dff, #536dfe);
  font-size: 1rem;
}

.kt-chat-content {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  min-width: 0;
}

.kt-chat-message-question .kt-chat-content {
  align-items: flex-start;
}

.kt-chat-message-answer .kt-chat-content {
  align-items: flex-end;
}

.kt-chat-bubble {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.75rem 0.875rem;
  padding-bottom: 1.5rem;
  font-size: var(--text-2sm);
  line-height: 1.7;
  overflow-wrap: break-word;
  background-color: var(--background);
  color: var(--foreground);
  direction: rtl;
  text-align: justify;
  text-align-last: right;
}

.kt-chat-message-answer .kt-chat-bubble {
  border-color: color-mix(in oklab, var(--primary) 25%, transparent);
  background-color: color-mix(in oklab, var(--primary) 8%, transparent);
}

/* Timestamp: for a question bubble (a direct child of .kt-chat-bubble, with no
   bottom row) it's pinned to the bottom-left corner, Telegram-style; for an
   answer bubble it instead sits inline inside .kt-chat-bottom-row alongside
   the ticket-assistant badges/action, so it stays in normal flex flow there. */
.kt-chat-time {
  font-size: 0.65rem;
  line-height: 1;
  color: var(--muted-foreground);
}

.kt-chat-bubble > .kt-chat-time {
  position: absolute;
  bottom: 0.4rem;
  left: 0.625rem;
}

/* Centered day pill shown once per calendar day, between message groups. */
.kt-chat-day-separator {
  display: flex;
  justify-content: center;
  margin: 0.25rem 0;
}

.kt-chat-day-separator span {
  background-color: color-mix(in oklab, var(--foreground) 8%, transparent);
  color: var(--muted-foreground);
  font-size: var(--text-2xs);
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
}

/* Speech-bubble tail, pointing toward the avatar on each side. */
.kt-chat-bubble::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 0;
  height: 0;
  border-style: solid;
}

.kt-chat-message-question .kt-chat-bubble::after {
  right: -7px;
  border-width: 0 0 8px 8px;
  border-color: transparent transparent transparent var(--background);
}

.kt-chat-message-answer .kt-chat-bubble::after {
  left: -7px;
  border-width: 0 8px 8px 0;
  border-color: transparent color-mix(in oklab, var(--primary) 8%, transparent) transparent transparent;
}

/* Bottom row of the answer bubble: ticket-assistant badges/action on one side,
   the timestamp on the other -- both on the same line. */
.kt-chat-bottom-row {
  margin-top: 0.625rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.kt-chat-bottom-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.375rem;
}

/* "Escalate to ticket assistant" action -- always visible inside the bubble now
   (previously a hover-only floating button). */
.kt-chat-bubble-actions {
  margin: 0;
  display: inline-flex;
}

.kt-chat-hover-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  white-space: nowrap;
  border: 1px solid color-mix(in oklab, var(--primary) 35%, transparent);
  border-radius: 9999px;
  padding: 0.3rem 0.75rem;
  font-size: var(--text-2xs);
  background-color: var(--card);
  color: var(--primary);
  cursor: pointer;
}

.kt-chat-hover-btn:hover {
  background-color: var(--primary);
  color: var(--primary-foreground);
}

/* Panel of badges/progress bars shown inside the answer bubble, below the text. */
.kt-chat-inline-meta {
  margin-top: 0.625rem;
  padding-top: 0.625rem;
  border-top: 1px dashed color-mix(in oklab, var(--foreground) 15%, transparent);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  direction: rtl;
}

.kt-chat-inline-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.kt-chat-progress {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.kt-chat-progress-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--text-2xs);
  color: var(--muted-foreground);
}

.kt-chat-progress-track {
  height: 0.375rem;
  border-radius: 9999px;
  background-color: color-mix(in oklab, var(--foreground) 10%, transparent);
  overflow: hidden;
}

.kt-chat-progress-fill {
  height: 100%;
  border-radius: 9999px;
  background-color: var(--primary);
}

.kt-chat-progress-fill-alt {
  background-color: #22c55e;
}

.kt-chat-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--text-2xs);
  color: var(--muted-foreground);
}

/* ---------------------------------------------------------------- 5. File manager */

.kt-file-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
  background-color: var(--card);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.kt-file-card:hover {
  border-color: color-mix(in oklab, var(--primary) 40%, transparent);
  box-shadow: 0 4px 12px color-mix(in oklab, var(--foreground) 6%, transparent);
}

.kt-file-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius);
  font-size: 1.125rem;
  color: var(--primary);
  background-color: color-mix(in oklab, var(--primary) 10%, transparent);
}

.kt-file-icon-pdf {
  color: var(--destructive);
  background-color: color-mix(in oklab, var(--destructive) 10%, transparent);
}

/* A file name may be a long path with no break opportunities. */
.kt-file-name {
  font-size: var(--text-2sm);
  font-weight: 500;
  color: var(--mono);
  overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------- 6. Editor */

.kt-md-editor-textarea {
  width: 100%;
  min-height: 28rem;
  border: 1px solid var(--input);
  border-radius: var(--radius);
  padding: 0.875rem 1rem;
  direction: ltr;
  text-align: left;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--text-2sm);
  line-height: 1.75;
  color: var(--foreground);
  background-color: var(--background);
  outline: none;
  resize: vertical;
}

.kt-md-editor-textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 15%, transparent);
}

/* ---------------------------------------------------------------- 7. Toasts */

.kt-toast-stack {
  position: fixed;
  inset-block-end: 1.25rem;
  inset-inline-end: 1.25rem;
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  pointer-events: none;
}

.kt-toast-stack .kt-alert {
  pointer-events: auto;
  min-width: 18rem;
  max-width: 26rem;
  box-shadow: 0 8px 24px color-mix(in oklab, var(--foreground) 12%, transparent);
  animation: kt-toast-in 0.2s ease-out;
}

@keyframes kt-toast-in {
  from {
    opacity: 0;
    transform: translateY(0.5rem);
  }
}