/* Ceramify chat — the thread, and the inbox that lists threads.
 *
 * Prefixed cf- because this loads beside two different stylesheets: the
 * storefront's styles.css and the dashboard's inline sheet. Neither piece owns a
 * page position — each fills whatever box it is mounted in — so the same
 * component fits a full page, a column beside orders, or a drawer.
 */
:root {
  --cf-ink: #2C2420;
  --cf-stone: #6B6056;
  --cf-mist: #736860;
  --cf-line: #EDE8DF;
  --cf-line-soft: #F0EBE3;
  --cf-field: #E5DED4;
  --cf-cream: #FAF7F2;
  --cf-warm: #FDF9F4;
  --cf-selected: #F6ECE3;
  --cf-clay: #A0582A;
  --cf-clay-deep: #874820;
  --cf-green: #2d6a4f;
  --cf-red: #C0392B;

  /* Colour roles. The light values are the old literals; the dark ones are in
     the :root[data-theme="dark"] block at the end of this sheet. */
  --cf-text: var(--cf-ink);
  --cf-avatar-text: #f0c29f;
  --cf-text-secondary: var(--cf-stone);
  --cf-accent-text: var(--cf-clay);
  --cf-accent-text-hover: var(--cf-clay-deep);
  --cf-text-muted: var(--cf-mist);
  --cf-danger: var(--cf-red);
  --cf-surface: #ffffff;
  --cf-surface-sunken: var(--cf-cream);
  --cf-bubble-bg: #f3eee7;
  --cf-bg: var(--cf-warm);
  --cf-row-hover-bg: #f8f1ea;
  --cf-row-is-on-bg: var(--cf-selected);
  --cf-border: var(--cf-line);
  --cf-file-icon-border: #c9bfb4;
  --cf-notice-border: #dcd2c6;
  --cf-inbox-search-border: var(--cf-field);
  --cf-row-border: var(--cf-line-soft);
  --cf-on-accent: #ffffff;
}

.cf-chat {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  background: var(--cf-surface);
  color: var(--cf-text);
  font-family: var(--font-sans);
  font-size: var(--fs-14);
  line-height: 1.5;
}

/* ── header ─────────────────────────────────────────── */
.cf-head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
  padding: 12px 16px;
  border-bottom: 1px solid var(--cf-border);
  background: var(--cf-surface);
}
.cf-head-id { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cf-avatar {
  flex: 0 0 auto;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--cf-ink);
  color: var(--cf-avatar-text);
  display: grid; place-items: center;
  font-weight: 800; font-size: var(--fs-13);
}
.cf-head-text { min-width: 0; }
.cf-title { display: block; font-size: var(--fs-15); font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cf-subtitle { display: block; color: var(--cf-text-secondary); font-size: var(--fs-12); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cf-head-extra { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.cf-head-extra:empty { display: none; }
.cf-head-btn {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--cf-border); border-radius: 999px;
  background: var(--cf-surface-sunken); color: var(--cf-text-secondary);
  font: inherit; font-size: var(--fs-12); font-weight: 700;
  padding: 5px 12px; cursor: pointer;
  text-decoration: none; white-space: nowrap;
}
.cf-head-btn:hover { border-color: var(--cf-accent-text); color: var(--cf-accent-text-hover); }
/* Only a narrow inbox needs a way back to the list. */
.cf-back {
  display: none;
  flex: 0 0 auto;
  width: 30px; height: 30px;
  border: 1.5px solid var(--cf-border); border-radius: 50%;
  background: var(--cf-surface); color: var(--cf-text-secondary);
  place-items: center;
  font: inherit; font-size: var(--fs-20); line-height: 1;
  cursor: pointer;
}
.cf-back:hover { border-color: var(--cf-accent-text); color: var(--cf-accent-text-hover); }

/* ── messages ───────────────────────────────────────── */
.cf-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.cf-messages { display: flex; flex-direction: column; gap: 11px; padding: 16px; }
.cf-empty { margin: 0; padding: 28px 16px; color: var(--cf-text-muted); text-align: center; }
.cf-empty.cf-error { color: var(--cf-danger); }
.cf-loading { display: flex; align-items: center; justify-content: center; gap: 9px; }
.cf-spinner {
  width: 15px; height: 15px; flex: none;
  border: 2px solid var(--cf-border); border-top-color: var(--cf-accent-text); border-radius: 50%;
  animation: cf-spin .8s linear infinite;
}
@keyframes cf-spin { to { transform: rotate(360deg); } }

.cf-earlier { display: flex; justify-content: center; padding: 12px 16px 0; }
.cf-earlier-btn {
  border: 1px solid var(--cf-border); border-radius: 999px;
  background: var(--cf-surface-sunken); color: var(--cf-text-secondary);
  font: inherit; font-size: var(--fs-12); font-weight: 600;
  padding: 6px 14px; cursor: pointer;
}
.cf-earlier-btn:hover { border-color: var(--cf-accent-text); color: var(--cf-accent-text-hover); }

.cf-day {
  align-self: center;
  color: var(--cf-text-muted);
  font-size: var(--fs-12); font-weight: 800;
  letter-spacing: .07em; text-transform: uppercase;
}

.cf-msg { display: grid; gap: 3px; max-width: 74%; }
.cf-theirs { align-self: flex-start; justify-items: start; }
.cf-mine { align-self: flex-end; justify-items: end; }
.cf-who { color: var(--cf-text-muted); font-size: var(--fs-12); }
.cf-bubble {
  padding: 9px 12px;
  border-radius: 14px;
  background: var(--cf-bubble-bg);
  overflow-wrap: anywhere;
}
.cf-theirs .cf-bubble { border-bottom-left-radius: 4px; }
.cf-mine .cf-bubble { background: var(--cf-clay-deep); color: var(--cf-on-accent); border-bottom-right-radius: 4px; }
.cf-state { color: var(--cf-text-muted); font-size: var(--fs-12); }
.cf-state.cf-failed { color: var(--cf-danger); }
.cf-retry {
  border: 0; background: none; padding: 0;
  color: var(--cf-danger); font: inherit; font-size: var(--fs-12); font-weight: 700;
  text-decoration: underline; cursor: pointer;
}

/* ── attachments ────────────────────────────────────── */
.cf-file {
  display: flex; align-items: center; gap: 10px;
  margin-top: 3px; padding: 8px 11px;
  border: 1px solid var(--cf-border); border-radius: 12px;
  background: var(--cf-surface-sunken); color: inherit; text-decoration: none;
  max-width: 100%;
}
a.cf-file:hover { border-color: var(--cf-accent-text); }
.cf-file-icon {
  flex: 0 0 auto; width: 24px; height: 30px;
  border: 1.5px solid var(--cf-file-icon-border); border-radius: 3px; background: var(--cf-surface);
}
.cf-file-text { min-width: 0; }
.cf-file-text b { display: block; font-size: var(--fs-13); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cf-file-text small { color: var(--cf-text-muted); font-size: var(--fs-12); }

/* ── automatic notices ──────────────────────────────── */
/* Deliberately unlike a person's message: nobody should reply to a robot. */
.cf-notice {
  align-self: stretch;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 12px;
  border: 1px dashed var(--cf-notice-border); border-radius: 10px;
  background: var(--cf-surface-sunken);
  color: var(--cf-text-secondary); font-size: var(--fs-12);
}
.cf-notice-kind {
  color: var(--cf-text-muted);
  font-size: var(--fs-12); font-weight: 800;
  letter-spacing: .07em; text-transform: uppercase;
}
.cf-notice-body { color: var(--cf-text); font-weight: 600; }
.cf-notice time { margin-left: auto; color: var(--cf-text-muted); font-size: var(--fs-12); }

/* ── composer ───────────────────────────────────────── */
/* The attach button, a one-line box and Send share one height, so they line up
   while the box is one line; bottom-aligned, they stay level with its last
   line as it grows. */
.cf-compose {
  --cf-control: 38px;
  flex: 0 0 auto;
  display: flex; align-items: flex-end; gap: 9px;
  padding: 11px 14px;
  border-top: 1px solid var(--cf-border);
  background: var(--cf-surface-sunken);
}
.cf-attach {
  flex: 0 0 auto;
  width: var(--cf-control); height: var(--cf-control);
  box-sizing: border-box;
  border: 1.5px solid var(--cf-border); border-radius: 50%;
  background: var(--cf-surface); color: var(--cf-text-secondary);
  display: grid; place-items: center; cursor: pointer;
}
.cf-attach:hover { border-color: var(--cf-accent-text); color: var(--cf-accent-text-hover); }
.cf-attach svg { width: 16px; height: 16px; }
.cf-input {
  flex: 1 1 auto; min-width: 0;
  box-sizing: border-box; min-height: var(--cf-control);
  border: 1.5px solid var(--cf-border); border-radius: calc(var(--cf-control) / 2);
  background: var(--cf-surface); color: var(--cf-text);
  font: inherit; line-height: 1.45;
  padding: 8px 14px;
  resize: none; max-height: 140px;
}
.cf-input:focus { border-color: var(--cf-accent-text); outline: none; }
.cf-send {
  flex: 0 0 auto;
  border: 0; border-radius: 999px;
  background: var(--cf-clay); color: var(--cf-on-accent);
  font: inherit; font-weight: 700; font-size: var(--fs-13);
  height: var(--cf-control); box-sizing: border-box;
  display: inline-flex; align-items: center;
  padding: 0 18px; cursor: pointer;
}
.cf-send:hover { background: var(--cf-clay-deep); }
.cf-attach:focus-visible, .cf-send:focus-visible, .cf-earlier-btn:focus-visible,
.cf-retry:focus-visible, .cf-head-btn:focus-visible, .cf-back:focus-visible {
  outline: 2px solid var(--cf-accent-text); outline-offset: 2px;
}

.cf-chat [hidden],
.cf-inbox [hidden] { display: none !important; }

.cf-locked {
  flex: 0 0 auto; margin: 0;
  padding: 12px 16px;
  border-top: 1px solid var(--cf-border);
  background: var(--cf-surface-sunken);
  color: var(--cf-text-secondary); font-size: var(--fs-12); line-height: 1.5;
}

/* ── inbox ──────────────────────────────────────────── */
/* Every conversation on the left, the open one on the right. */
.cf-inbox {
  display: grid;
  grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
  height: 100%;
  min-height: 0;
  border: 1px solid var(--cf-border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--cf-surface);
  color: var(--cf-text);
  font-family: var(--font-sans);
  font-size: var(--fs-14);
  line-height: 1.5;
}
.cf-inbox-list {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--cf-bg);
  border-right: 1px solid var(--cf-border);
}
.cf-inbox-head {
  flex: 0 0 auto;
  display: grid;
  gap: 10px;
  padding: 16px 14px 12px;
  border-bottom: 1px solid var(--cf-border);
}
.cf-inbox-back {
  justify-self: start;
  display: inline-flex; align-items: center; gap: 6px;
  margin: -2px 0 2px;
  padding: 0; border: 0; background: none;
  color: var(--cf-text-secondary);
  font: inherit; font-size: var(--fs-13); font-weight: 700;
  cursor: pointer;
}
.cf-inbox-back[hidden] { display: none; }
.cf-inbox-back:hover { color: var(--cf-accent-text-hover); }
.cf-inbox-back svg { width: 16px; height: 16px; flex: 0 0 auto; }
.cf-inbox-back:focus-visible { outline: 2px solid var(--cf-accent-text); outline-offset: 2px; border-radius: 4px; }
.cf-inbox-title {
  margin: 0;
  color: var(--cf-text);
  font-family: inherit; font-size: var(--fs-15); font-weight: 800;
  letter-spacing: -.01em; line-height: 1.2;
}
.cf-inbox-search {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--cf-inbox-search-border); border-radius: 999px;
  background: var(--cf-surface); color: var(--cf-text);
  font: inherit; font-size: var(--fs-13);
  padding: 7px 13px;
}
.cf-inbox-search:focus { outline: none; border-color: var(--cf-accent-text); }
.cf-inbox-rows { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }

.cf-row {
  display: grid;
  gap: 2px;
  width: 100%;
  box-sizing: border-box;
  padding: 11px 14px;
  border: 0;
  border-bottom: 1px solid var(--cf-row-border);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.cf-row:hover { background: var(--cf-row-hover-bg); }
.cf-row.is-on { background: var(--cf-row-is-on-bg); box-shadow: inset 3px 0 0 var(--cf-accent-text); }
.cf-row:focus-visible { outline: 2px solid var(--cf-accent-text); outline-offset: -2px; }
.cf-row-top,
.cf-row-bottom { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cf-row-title {
  flex: 1 1 auto; min-width: 0;
  font-size: var(--fs-13); font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cf-row-preview {
  flex: 1 1 auto; min-width: 0;
  color: var(--cf-text-secondary); font-size: var(--fs-12);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cf-row.is-unread .cf-row-preview { color: var(--cf-text); font-weight: 600; }
.cf-row-time { flex: 0 0 auto; color: var(--cf-text-muted); font-size: var(--fs-12); font-variant-numeric: tabular-nums; }
.cf-row-time:empty { display: none; }
.cf-count {
  flex: 0 0 auto;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  box-sizing: border-box;
  border-radius: 999px;
  background: var(--cf-clay); color: var(--cf-on-accent);
  font-size: var(--fs-12); font-weight: 700; line-height: 1;
  display: inline-grid; place-items: center;
  font-variant-numeric: tabular-nums;
}
.cf-row-tag {
  flex: 0 0 auto;
  border: 1px solid var(--cf-inbox-search-border); border-radius: 999px;
  padding: 1px 7px;
  color: var(--cf-text-muted);
  font-size: var(--fs-12); font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
}
/* A buyer without a contract reads quieter, but still legibly: the badge
   says why, so the text need not fade below 4.5:1. */
.cf-row.is-locked .cf-row-title { color: var(--cf-text-secondary); }
.cf-row.is-locked .cf-row-preview { color: var(--cf-text-muted); }

.cf-inbox-note {
  margin: 0;
  display: grid; justify-items: center; gap: 10px;
  padding: 24px 16px;
  color: var(--cf-text-muted); font-size: var(--fs-13); text-align: center;
}
.cf-inbox-note.cf-error { color: var(--cf-danger); }

.cf-inbox-thread { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.cf-inbox-chat { flex: 1 1 auto; min-height: 0; }
.cf-inbox-placeholder {
  flex: 1 1 auto;
  display: grid; place-content: center; justify-items: center; gap: 6px;
  padding: 32px;
  color: var(--cf-text-secondary); text-align: center;
}
.cf-inbox-placeholder b { color: var(--cf-text); font-size: var(--fs-15); }
.cf-inbox-placeholder span { max-width: 38ch; font-size: var(--fs-13); }
.cf-inbox-placeholder span:empty { display: none; }

/* One pane at a time: the list, or the conversation with a way back. */
@media (max-width: 760px) {
  .cf-inbox { grid-template-columns: minmax(0, 1fr); }
  .cf-inbox .cf-inbox-list { border-right: 0; }
  .cf-inbox .cf-inbox-thread { display: none; }
  .cf-inbox.is-thread-open .cf-inbox-list { display: none; }
  .cf-inbox.is-thread-open .cf-inbox-thread { display: flex; }
  .cf-inbox .cf-back { display: grid; }
  .cf-head-btn { padding: 5px 10px; }
}

/* Narrow enough to be a drawer or a phone: the same thread, tighter. */
@media (max-width: 420px) {
  .cf-msg { max-width: 88%; }
  .cf-messages { padding: 12px; gap: 9px; }
  .cf-compose { padding: 9px 11px; }
  .cf-send { padding: 0 14px; }
  .cf-head { padding: 10px 12px; gap: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .cf-chat *, .cf-inbox * { transition: none !important; }
  .cf-spinner { animation-duration: 2.4s; }
}

/* Dark theme. theme.js sets data-theme on <html> from the visitor's choice or,
   on Auto, the system setting. Only colour tokens change, plus the few rules
   after them that need more than a colour. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --cf-surface: #201B17;
  --cf-text: #EEE6DD;
  --cf-border: #3A322B;
  --cf-avatar-text: #F0C29F;
  --cf-text-secondary: #CBBFB3;
  --cf-surface-sunken: #251F1A;
  --cf-accent-text: #E8A274;
  --cf-accent-text-hover: #F2BC97;
  --cf-text-muted: #B1A497;
  --cf-danger: #F2978A;
  --cf-bubble-bg: #29241F;
  --cf-file-icon-border: #5E554E;
  --cf-notice-border: #524A43;
  --cf-bg: #171411;
  --cf-inbox-search-border: #4C433D;
  --cf-row-border: #443C36;
  --cf-row-hover-bg: #27221D;
  --cf-row-is-on-bg: #2A2420;
}