/* Shared chat surface, used by the embedded widget and the hosted page. */

.chat {
  --accent: #635bff;
  --accent-ink: #fff;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  background: var(--surface-sunken);
  overflow: hidden;
}

.chat-head {
  flex: none;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px 16px;
  color: var(--accent-ink);
  background: var(--accent);
  background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.16), rgba(0, 0, 0, 0.08));
}
.chat-head-mark {
  width: 34px; height: 34px; border-radius: 10px; flex: none;
  background: rgba(255, 255, 255, 0.2);
  display: grid; place-items: center;
  font-weight: 640; font-size: 14px;
  overflow: hidden;
}
.chat-head-mark img { width: 100%; height: 100%; object-fit: cover; }
.chat-head b { font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; display: block; }
.chat-head small { font-size: 11.5px; opacity: 0.82; display: flex; align-items: center; gap: 5px; }
.chat-head .live-dot { width: 6px; height: 6px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 2px rgba(74, 222, 128, 0.3); }
.chat-head-actions { margin-left: auto; display: flex; gap: 4px; }
.chat-icon-btn {
  width: 28px; height: 28px; border: 0; border-radius: 7px;
  background: rgba(255, 255, 255, 0.14); color: inherit;
  display: grid; place-items: center; cursor: pointer;
  transition: background 160ms ease;
}
.chat-icon-btn:hover { background: rgba(255, 255, 255, 0.26); }

.chat-log {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 14px 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scroll-behavior: smooth;
}

/* Nothing animates or glides on the first paint: it is already where it belongs. */
.chat-log.is-initial { scroll-behavior: auto; }
.chat-log.is-initial .cm { animation: none; }

.cm { display: flex; flex-direction: column; max-width: 84%; animation: cmIn 300ms cubic-bezier(.22,1,.36,1) both; }
@keyframes cmIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.cm-in { align-self: flex-start; }
.cm-out { align-self: flex-end; }

.cm-bubble {
  padding: 10px 13px;
  border-radius: 15px;
  font-size: 14px;
  line-height: 1.52;
  overflow-wrap: anywhere;
}
.cm-in .cm-bubble {
  background: #fff; color: var(--ink);
  border-bottom-left-radius: 5px;
  box-shadow: 0 1px 2px rgba(10, 37, 64, 0.06), inset 0 0 0 1px var(--line-soft);
}
.cm-out .cm-bubble {
  background: var(--accent); color: var(--accent-ink);
  border-bottom-right-radius: 5px;
  box-shadow: 0 1px 3px rgba(10, 37, 64, 0.15);
}
.cm-bubble p { margin: 0 0 7px; }
.cm-bubble p:last-child { margin-bottom: 0; }
.cm-bubble ul { margin: 6px 0; padding-left: 17px; }
.cm-bubble li { margin: 3px 0; }
.cm-bubble code { background: rgba(10, 37, 64, 0.07); padding: 1px 5px; border-radius: 4px; font-size: 12.5px; }
.cm-out .cm-bubble code { background: rgba(255, 255, 255, 0.22); }
.cm-bubble a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.cm-in .cm-bubble a { color: var(--accent); }

.cm-meta { font-size: 11px; color: var(--faint); margin: 4px 3px 0; display: flex; align-items: center; gap: 5px; }
.cm-out .cm-meta { justify-content: flex-end; }
.cm-author { font-weight: 600; color: var(--ink); font-size: 12px; margin: 0 3px 3px; }

.cm-note {
  align-self: center; max-width: 88%; text-align: center;
  font-size: 11.5px; color: var(--muted);
  display: flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.75);
  box-shadow: inset 0 0 0 1px var(--line-soft);
}

.typing { display: flex; gap: 3px; padding: 12px 14px; align-items: center; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--faint); animation: blink 1.3s infinite; }
.typing i:nth-child(2) { animation-delay: 0.18s; }
.typing i:nth-child(3) { animation-delay: 0.36s; }
@keyframes blink { 0%, 60%, 100% { opacity: 0.25; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-2px); } }

.chat-actions { display: flex; flex-wrap: wrap; gap: 7px; padding: 4px 14px 10px; }
.chat-actions:empty { display: none; }

/* Shown when no channel is connected: the honest version of a dead button. */
.chat-notice {
  width: 100%;
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line-soft);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
}
.chat-notice a { color: var(--accent); font-weight: 560; overflow-wrap: anywhere; }
.chip-btn {
  height: 30px; padding: 0 12px; border: 0; border-radius: 999px;
  background: #fff; color: var(--accent);
  font-size: 12.5px; font-weight: 560; cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--line), 0 1px 2px rgba(10, 37, 64, 0.05);
  transition: box-shadow 160ms ease, background 160ms ease;
}
.chip-btn:hover { box-shadow: inset 0 0 0 1px var(--accent); }
.chip-btn[disabled] { opacity: 0.5; pointer-events: none; }
/* The one answer we expect most: filled, so the pair is not two grey twins. */
.chip-btn.chip-primary {
  background: var(--accent); color: var(--accent-ink);
  box-shadow: 0 1px 2px rgba(10, 37, 64, 0.12);
}
.chip-btn.chip-primary:hover { filter: brightness(0.94); box-shadow: 0 1px 2px rgba(10, 37, 64, 0.12); }

.chat-foot { flex: none; background: #fff; border-top: 1px solid var(--line-soft); padding: 10px 12px; }
/*
 * The composer, and the one rule that keeps it straight.
 *
 * Everything on this row is the same height as the closed textarea, so on a
 * single line the three of them sit level with equal air above and below, and
 * when the text grows the buttons stay at the bottom where a thumb expects
 * them. It replaces a set of one-off nudges that only agreed with each other
 * at one font size.
 */
.chat-input-row {
  display: flex; align-items: flex-end; gap: 6px;
  border-radius: 12px; padding: 6px 6px 6px 8px;
  box-shadow: inset 0 0 0 1px var(--line);
  transition: box-shadow 160ms ease;
  background: #fff;
}
.chat-input-row:focus-within { box-shadow: inset 0 0 0 1px var(--accent), 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.chat-input-row textarea {
  flex: 1; border: 0; outline: 0; resize: none; background: none; display: block;
  font-size: 14px; line-height: 1.5; padding: 7px 2px; max-height: 120px; min-height: 34px;
}
.chat-send {
  width: 34px; height: 34px; flex: none; border: 0; border-radius: 9px;
  background: var(--accent); color: var(--accent-ink);
  display: grid; place-items: center; cursor: pointer;
  transition: opacity 160ms ease, transform 160ms ease;
}
.chat-send:hover { filter: brightness(0.92); }
.chat-send[disabled] { opacity: 0.35; pointer-events: none; }

.chat-brand {
  text-align: center; font-size: 11px; color: var(--faint);
  padding: 7px 0 2px;
}
.chat-brand a { color: var(--muted); font-weight: 560; }

.chat-error {
  margin: 0 14px 6px; padding: 8px 11px; border-radius: 8px;
  background: var(--red-wash); color: #9e1638; font-size: 12.5px;
}

/*
 * What to ask, before anyone has typed anything.
 *
 * An empty chat asks a person to put their problem into words from nothing.
 * Four questions the help center can already answer are a shorter way in, and
 * they show what this assistant actually knows.
 */
.chat-intro {
  font-size: 13.5px; line-height: 1.55; color: var(--muted);
  margin: 0 2px 14px; max-width: 46ch;
}
.chat-suggest { display: grid; gap: 7px; margin: 6px 0 2px; }
.chat-suggest-title {
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em;
  text-transform: uppercase; color: var(--faint); margin-left: 2px;
}
.chat-suggest-item {
  text-align: left; cursor: pointer;
  border: 0; border-radius: 12px; padding: 10px 13px;
  background: #fff; color: var(--ink);
  font-size: 13.5px; line-height: 1.45;
  box-shadow: inset 0 0 0 1px var(--line-soft), 0 1px 2px rgba(10, 37, 64, 0.04);
  transition: box-shadow 150ms ease;
}
.chat-suggest-item:hover { box-shadow: inset 0 0 0 1px var(--accent); }
.chat-suggest-link {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  color: var(--accent); text-decoration: none; font-weight: 560;
}

/*
 * Everything asked at the end of a conversation sits in one card: the question,
 * the two answers, the stars, the follow-up. Loose pills floating over the
 * thread read as debris, and this reads as one last step.
 */
.chat-ask {
  width: 100%;
  display: grid; gap: 9px;
  padding: 12px;
  border-radius: 14px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--line-soft), 0 1px 3px rgba(10, 37, 64, 0.05);
}
.chat-ask-title {
  font-size: 13px; font-weight: 600; color: var(--ink);
  text-align: center; line-height: 1.4;
}
.chat-ask-row { display: flex; align-items: center; gap: 8px; }
.chat-ask-row > * { flex: 1; }
.chat-ask-row .chip-btn { height: 34px; }
/* A way out, not a second button competing with the answer. */
.chat-ask-row .chat-skip { flex: 0 0 auto; margin: 0; padding: 0 6px; }

.rating { display: flex; gap: 6px; }
.rating button {
  flex: 1; height: 38px; border: 0; border-radius: 10px; cursor: pointer;
  background: var(--surface-sunken); font-size: 19px; line-height: 1;
  box-shadow: inset 0 0 0 1px transparent;
  transition: background 140ms ease, box-shadow 140ms ease;
}
.rating button:hover { background: #fff; box-shadow: inset 0 0 0 1px var(--accent); }
.rating-scale {
  display: flex; justify-content: space-between;
  font-size: 10.5px; color: var(--faint); padding: 0 2px;
}

/* Pre-chat form, shown when an email is required. */
.prechat { padding: 18px 16px; display: grid; gap: 14px; }
.prechat h3 { font-size: 16px; }
.prechat p { font-size: 13.5px; color: var(--muted); }

/* Attaching a photo or a short video. */
.chat-attach {
  width: 34px; height: 34px; flex: none;
  border: 0; border-radius: 9px; background: none; color: var(--muted);
  display: grid; place-items: center; cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}
.chat-attach:hover { background: rgba(10, 37, 64, 0.06); color: var(--ink); }

.chat-tray { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 2px 8px; }
.chat-chip {
  display: inline-flex; align-items: center; gap: 6px;
  max-width: 100%; padding: 5px 6px 5px 9px; border-radius: 999px;
  background: var(--surface-sunken); box-shadow: inset 0 0 0 1px var(--line);
  font-size: 12px; color: var(--ink);
}
.chat-chip-name { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-chip button {
  width: 18px; height: 18px; flex: none; border: 0; border-radius: 999px;
  background: rgba(10, 37, 64, 0.08); color: var(--muted);
  font-size: 13px; line-height: 1; cursor: pointer;
}
.chat-chip button:hover { background: rgba(10, 37, 64, 0.16); color: var(--ink); }

.cm-file {
  display: block; margin-top: 8px; max-width: 100%;
  border-radius: 10px; background: rgba(10, 37, 64, 0.05);
}
.cm-out .cm-file { background: rgba(255, 255, 255, 0.18); }

/* One open question after a rating, then out of the way. */
.chat-feedback-input {
  width: 100%;
  border: 0; outline: 0;
  padding: 9px 12px;
  border-radius: 10px;
  background: var(--surface-sunken);
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: 13.5px;
}
.chat-feedback-input:focus { box-shadow: inset 0 0 0 1px var(--accent); }
.chat-skip {
  display: block;
  margin: 0 auto;
  border: 0; background: none; cursor: pointer;
  font-size: 12px; color: var(--faint);
}
.chat-skip:hover { color: var(--muted); }

/* --------------------------------------------- the conversation and the rest

   Two tabs, and only once there is a second conversation to go back to. A tab
   bar over an empty history promises content that is not there. */
.chat-tabs {
  display: flex;
  gap: 2px;
  padding: 8px 10px 0;
  flex: 0 0 auto;
}
.chat-tab {
  flex: 1;
  padding: 7px 10px;
  border: 0;
  border-radius: 8px;
  background: none;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--chat-muted, #6b7280);
  cursor: pointer;
}
.chat-tab:hover { background: rgb(15 18 30 / 4%); }
.chat-tab.is-active {
  background: rgb(15 18 30 / 6%);
  color: var(--chat-ink, #101828);
  font-weight: 600;
}

.chat-history {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.chat-history-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 12px;
  border: 0;
  border-radius: 10px;
  background: none;
  text-align: left;
  font: inherit;
  cursor: pointer;
}
.chat-history-row:hover { background: rgb(15 18 30 / 4%); }
.chat-history-row.is-current { background: rgb(15 18 30 / 6%); }
.chat-history-row .grow { flex: 1; min-width: 0; }
.chat-history-row b {
  display: block;
  font-size: 13.5px;
  font-weight: 560;
  color: var(--chat-ink, #101828);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-history-row small {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: var(--chat-muted, #6b7280);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-history-row time {
  font-size: 11.5px;
  color: var(--chat-faint, #98a2b3);
  white-space: nowrap;
}
.chat-history-empty {
  margin: auto;
  font-size: 13px;
  color: var(--chat-muted, #6b7280);
}

/*
 * On a phone the panel already fills the screen, so the button that makes it
 * bigger has nothing left to do: it would swap one full screen for another
 * and cost a tap to find out. It goes.
 */
@media (max-width: 560px) {
  .chat-expand { display: none; }
}

/* ------------------------------------------------------- the bigger panel

   The host page dims itself and gives the iframe room. All this has to do is
   stop the conversation from spreading across the whole of it: a line of text
   960px wide is harder to read than the same line at 380, not easier. The
   column stays a column, centred, and the extra room goes to the margins and
   to anything that genuinely wants it, like a screenshot. */
.chat.is-expanded .chat-log,
.chat.is-expanded .chat-history,
.chat.is-expanded .chat-foot > .chat-input-row,
.chat.is-expanded .chat-actions,
.chat.is-expanded .chat-tabs {
  max-width: 720px;
  margin-inline: auto;
  width: 100%;
}
.chat.is-expanded .cm { max-width: 74%; }
.chat.is-expanded .cm-file { max-height: 420px; width: auto; }
.chat.is-expanded .chat-head { padding-inline: max(16px, calc((100% - 720px) / 2)); }

/* ------------------------------------------------ moving along the switch

   The conversation and the history sit side by side in the same row of
   pills, so moving between them slides the way the eye already expects:
   towards a pill on the right, the new view comes from the right. The chat
   carries its own copy of this rather than borrowing the hosted page's,
   because the widget has the same two views and no page underneath it. */
@keyframes chat-from-right { from { transform: translateX(26px); opacity: 0.55; } }
@keyframes chat-from-left { from { transform: translateX(-26px); opacity: 0.55; } }
.chat-slide-right { animation: chat-from-right 220ms cubic-bezier(0.22, 0.61, 0.36, 1) both; }
.chat-slide-left { animation: chat-from-left 220ms cubic-bezier(0.22, 0.61, 0.36, 1) both; }
@media (prefers-reduced-motion: reduce) {
  .chat-slide-right, .chat-slide-left { animation: none; }
}

/* Waiting for the list, which is not the same as the list being empty. */
.chat-history-loading { display: grid; place-items: center; padding: 40px 0; }
.chat-spinner {
  width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid rgb(15 18 30 / 12%);
  border-top-color: var(--accent);
  animation: chat-spin 620ms linear infinite;
}
@keyframes chat-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .chat-spinner { animation-duration: 2s; } }

/* Same reason as the fields in base.css: under 16px, iOS zooms the page
   around the box the moment it is tapped, and never zooms back. */
@media (pointer: coarse) {
  .chat-input-row textarea { font-size: 16px; }
}

/* The one step before a handoff: a sentence and two doors, not a warning. */
.chat-handoff {
  width: 100%;
  padding: 11px 13px;
  border-radius: 12px;
  background: var(--surface-sunken, #f6f9fc);
  box-shadow: inset 0 0 0 1px var(--line, #e3e8ee);
}
.chat-handoff p {
  margin: 0 0 9px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted, #6b7c93);
}
.chat-handoff-row { display: flex; flex-wrap: wrap; gap: 7px; }
/* The second choice is still a choice, just not the one being suggested. */
.chip-btn.is-quiet { background: none; box-shadow: inset 0 0 0 1px var(--line, #e3e8ee); }

/* An address offered inside the handoff block is a link, not a button that
   submits something, so it needs the button's shape without its semantics. */
a.chip-btn { text-decoration: none; display: inline-flex; align-items: center; }