/**
 * The support chat bubble and panel — `public/js/supportChat.js`.
 *
 * A separate stylesheet, per docs/build/CONTRACT.md §2a: `app.css` is 2,400
 * lines and shared by every branch in this wave, so new rules go here and
 * `index.html` gains one extra `<link>` rather than a hundred lines landing
 * in a file four other people are also editing this week.
 *
 * Reuses the existing `--token` custom properties from `app.css` throughout,
 * and the existing `.btn`/`.btn-primary`/`.btn-ghost`/`.btn-icon` classes for
 * both buttons that are plain buttons — the circular bubble is the one
 * control here with no existing analogue, so it is the one with its own
 * rules from scratch, including its own focus ring, copied from `app.css`'s
 * `.btn:focus-visible` rule since it cannot wear that class itself (a 56px
 * circle sharing `.btn`'s fixed 36px height would just be `.btn` fighting
 * its own component).
 */

.support-widget {
  position: fixed;
  right: 20px;
  bottom: 20px;
  /* One above the toast host (app.css: z-index 60) — a toast and the bubble
     can be on screen at the same moment and the bubble must stay clickable
     under it, not the other way round. Nothing here needs to beat a
     <dialog>'s top layer; the browser already puts a modal above both. */
  z-index: 65;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}

.support-bubble {
  width: 52px;
  height: 52px;
  border: 0;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-fg);
  font-size: 22px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-popover);
  position: relative;
  transition: background-color 100ms, transform 100ms;
}
.support-bubble:hover { background: var(--accent-hover); transform: scale(1.05); }
.support-bubble:active { background: var(--accent-active); }
.support-bubble:focus-visible {
  outline: none;
  box-shadow: var(--shadow-popover), 0 0 0 2px var(--bg), 0 0 0 3.5px var(--fg);
}
@media (prefers-reduced-motion: reduce) {
  .support-bubble:hover { transform: none; }
}

.support-dot {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--danger);
  border: 2px solid var(--bg);
}

.support-panel {
  width: min(340px, calc(100vw - 40px));
  max-height: min(480px, calc(100vh - 100px));
  display: flex;
  flex-direction: column;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-popover);
  overflow: hidden;
}

.support-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 8px 10px 16px;
  border-bottom: 1px solid var(--border);
  flex: 0 0 auto;
}
.support-panel-title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}

.support-messages {
  flex: 1 1 auto;
  min-height: 160px;
  overflow-y: auto;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.support-msg { display: flex; flex-direction: column; gap: 2px; max-width: 88%; }
.support-msg.is-support { align-self: flex-start; align-items: flex-start; }
.support-msg.is-mine { align-self: flex-end; align-items: flex-end; }

.support-msg-author {
  font-size: 11px;
  color: var(--fg-subtle);
}

.support-msg-body {
  margin: 0;
  padding: 8px 12px;
  border-radius: var(--radius);
  font-size: 13px;
  line-height: 1.4;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}
.support-msg.is-support .support-msg-body { background: var(--a100); color: var(--fg); }
.support-msg.is-mine .support-msg-body { background: var(--accent); color: var(--accent-fg); }
/* The optimistic bubble, before the server has confirmed it landed. Faded,
   not spinner-and-fanfare — it is gone within a request's round trip. */
.support-msg.is-pending { opacity: 0.6; }

.support-error {
  margin: 0 16px 8px;
  padding: 8px 10px;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--danger) 12%, transparent);
  color: var(--danger);
  font-size: 12px;
}

.support-form {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--border);
}

.support-input {
  flex: 1 1 auto;
  min-height: 36px;
  max-height: 96px;
  resize: none;
  padding: 8px 10px;
  border: 1px solid var(--a200);
  border-radius: var(--radius);
  background: transparent;
  color: var(--fg);
  font-family: inherit;
  font-size: 13px;
  line-height: 1.4;
  transition: border-color 100ms;
}
.support-input:hover { border-color: var(--a300); }
.support-input:focus-visible {
  outline: none;
  border-color: var(--fg);
  box-shadow: 0 0 0 0.5px var(--fg);
}

.support-send { flex: 0 0 auto; }

@media (max-width: 480px) {
  .support-widget { right: 12px; bottom: 12px; }
}

/* ------------------------------------------------------------------------ */
/* the admin inbox — public/js/adminSupport.js, rendered on /admin          */
/* ------------------------------------------------------------------------ */

/*
 * `/admin` never loads `app.css` — it is a deliberately separate document
 * (see `admin.css`'s own header) — so every rule below is written against
 * `admin.css`'s own custom properties (`--panel`, `--text`, `--muted`, ...),
 * not the ones used above. The two files do not share a token vocabulary; a
 * rule here that reached for `--bg-raised` or `--fg` would resolve to
 * nothing on this page. The `.support-*` rules above never render here (this
 * stylesheet is also loaded by the studio page, where the reverse is true),
 * so the two halves of this file can each speak the dialect of the page they
 * actually appear on.
 */

.support-admin-layout {
  display: grid;
  grid-template-columns: minmax(180px, 240px) 1fr;
  gap: 16px;
  min-height: 320px;
}

.support-admin-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
  max-height: 420px;
  border-right: 1px solid var(--border);
  padding-right: 12px;
}

.support-admin-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  position: relative;
}
.support-admin-row:hover { border-color: var(--border-strong); }
.support-admin-row.is-active { background: var(--bg); border-color: var(--accent); }

.support-admin-row-email {
  font-size: 13px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.support-admin-row-meta { font-size: 11px; color: var(--muted); }

.support-admin-row-dot {
  position: absolute;
  top: 8px;
  right: 8px;
  min-width: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-text);
  font-size: 10px;
  font-weight: 700;
  text-align: center;
  line-height: 16px;
}

.support-admin-conversation {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.support-admin-placeholder {
  align-items: center;
  justify-content: center;
  color: var(--muted);
  text-align: center;
  padding: 32px 16px;
}

.support-admin-messages {
  flex: 1 1 auto;
  min-height: 200px;
  max-height: 320px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 8px;
}

.support-admin-msg { display: flex; flex-direction: column; gap: 2px; max-width: 80%; }
.support-admin-msg.is-user { align-self: flex-start; }
.support-admin-msg.is-bot { align-self: flex-start; }
.support-admin-msg.is-admin { align-self: flex-end; align-items: flex-end; }

.support-admin-msg-author {
  font-size: 11px;
  color: var(--muted);
  text-transform: capitalize;
}

.support-admin-msg-body {
  margin: 0;
  padding: 8px 12px;
  border-radius: var(--radius);
  font-size: 13px;
  line-height: 1.4;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  border: 1px solid var(--border);
}
.support-admin-msg.is-admin .support-admin-msg-body { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }

.support-admin-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.support-admin-input {
  min-height: 60px;
  resize: vertical;
  padding: 8px 10px;
  font: inherit;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
}

.support-admin-form .primary { align-self: flex-end; }

@media (max-width: 640px) {
  .support-admin-layout { grid-template-columns: 1fr; }
  .support-admin-list {
    flex-direction: row;
    max-height: none;
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding-right: 0;
    padding-bottom: 8px;
    overflow-x: auto;
  }
  .support-admin-row { min-width: 160px; }
}