/* XkroX visual system — ONE set of tokens for consumer + manager.
   Principles: restrained, editorial, black / ivory / warm neutral, large
   whitespace, strong type, few simultaneous controls, no decorative
   gradients, imagery carries richness. Display type for names/titles;
   neutral UI type for controls, prices, metadata. */
:root {
  --xk-ink: #14120d;
  --xk-ink-2: #6b665a;
  --xk-ink-3: #9a9484;
  --xk-ivory: #faf8f3;
  --xk-paper: #f1ede3;
  --xk-line: #e4dfd2;
  --xk-white: #ffffff;
  --xk-alert: #9b2c1f;
  --xk-ok: #2f5d3a;
  --xk-display: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --xk-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Helvetica, Arial, sans-serif;
}
.xk-display { font-family: var(--xk-display); font-weight: 500; letter-spacing: -.01em; }

/* ── Messaging thread (shared by consumer + manager) ─────────────── */
.xkm-thread { display: flex; flex-direction: column; min-height: 0; height: 100%; font-family: var(--xk-ui); color: var(--xk-ink); }
.xkm-list { flex: 1; min-height: 240px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 8px 2px 14px; }
.xkm-empty { margin: auto; color: var(--xk-ink-3); font-size: 14px; }
.xkm-msg { max-width: 78%; padding: 10px 14px; border-radius: 16px; font-size: 14.5px; line-height: 1.45; }
.xkm-msg.mine { align-self: flex-end; background: var(--xk-ink); color: var(--xk-ivory); border-bottom-right-radius: 4px; }
.xkm-msg.theirs { align-self: flex-start; background: var(--xk-paper); border-bottom-left-radius: 4px; }
.xkm-msg.pending { opacity: .6; }
.xkm-msg.failed { outline: 1px solid var(--xk-alert); }
.xkm-msg-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.xkm-msg-time { font-size: 11px; opacity: .65; margin-top: 4px; }
.xkm-msg-ctx { font-size: 11.5px; opacity: .7; margin-bottom: 4px; }
.xkm-status { min-height: 16px; font-size: 12.5px; color: var(--xk-alert); }
.xkm-ctx { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--xk-ink-2); padding: 4px 0; }
.xkm-ctx-x { border: none; background: none; font-size: 16px; cursor: pointer; color: var(--xk-ink-2); }
.xkm-composer { display: flex; gap: 10px; align-items: flex-end; border-top: 1px solid var(--xk-line); padding-top: 12px; }
.xkm-input { flex: 1; resize: none; border: 1px solid var(--xk-line); border-radius: 12px; padding: 11px 14px; font: inherit; font-size: 15px; background: var(--xk-white); color: var(--xk-ink); max-height: 140px; }
.xkm-input:focus { outline: none; border-color: var(--xk-ink); }
.xkm-send { border: none; background: var(--xk-ink); color: var(--xk-ivory); border-radius: 12px; padding: 11px 20px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.xkm-send:disabled { opacity: .5; cursor: default; }
.xkm-note { font-size: 11.5px; color: var(--xk-ink-3); padding-top: 8px; }

/* Conversation rows */
.xkm-rows { display: flex; flex-direction: column; }
.xkm-row { display: flex; align-items: baseline; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--xk-line); cursor: pointer; background: none; border-left: 0; border-right: 0; border-top: 0; text-align: left; width: 100%; font-family: var(--xk-ui); color: var(--xk-ink); }
.xkm-row:hover .xkm-row-name { text-decoration: underline; }
.xkm-row-main { flex: 1; min-width: 0; }
.xkm-row-name { font-family: var(--xk-ui); font-size: 15px; font-weight: 650; }
.xkm-row-prev { font-size: 13.5px; color: var(--xk-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.xkm-row-time { font-size: 12px; color: var(--xk-ink-3); white-space: nowrap; }
.xkm-row-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--xk-ink); flex: none; align-self: center; }
.xkm-group { font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--xk-ink-3); margin: 26px 0 0; }

/* ── ONE neutral no-image fallback (never a fake photo) ──────────────────
   Quiet paper tile with a small line glyph for the category when known.
   Used by Explore, Ask, storefront cards, the item modal, profile menu. */
:root {
  --xk-ph-generic: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b8b2a2' stroke-width='1' stroke-linecap='round'><path d='M6 6l12 12M18 6L6 18'/></svg>");
  --xk-ph-restaurant: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b8b2a2' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'><path d='M7 3v8M5 3v5a2 2 0 0 0 4 0V3M7 11v10M17 3c-2 1.5-3 4-3 7h3v11'/></svg>");
  --xk-ph-clinic: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b8b2a2' stroke-width='1' stroke-linecap='round'><path d='M12 5v14M5 12h14'/></svg>");
  --xk-ph-retail: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b8b2a2' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'><path d='M5 8h14l-1 12H6zM9 8V6a3 3 0 0 1 6 0v2'/></svg>");
  --xk-ph-img: var(--xk-ph-generic);
}
[data-cat="restaurant"], body[data-vertical="restaurant"] { --xk-ph-img: var(--xk-ph-restaurant); }
[data-cat="clinic"], body[data-vertical="clinic"] { --xk-ph-img: var(--xk-ph-clinic); }
[data-cat="retail"], body[data-vertical="retail"] { --xk-ph-img: var(--xk-ph-retail); }
.xk-ph.xk-ph, .pp-menu-thumb:empty, body.cs-business .bp-card-media.bp-ph:not(.bp-ph-generating) {
  background-color: var(--xk-paper); background-image: var(--xk-ph-img); background-repeat: no-repeat;
  background-position: center; background-size: 34px;
}
body.cs-business .bp-ph-mark, body.cs-business .bp-detail-media .bp-ph { font-size: 0 !important; color: transparent; }
body.cs-business .bp-detail-media:has(> .bp-ph) { background: var(--xk-paper) var(--xk-ph-img) center / 44px no-repeat; }

/* ═══ Messaging v2 — speakers, AI, badges, merchant inbox ═══ */
.xkm-speaker { font-size: 11px; font-weight: 600; letter-spacing: .02em; opacity: .7; margin-bottom: 3px; }
.xkm-msg.ai { align-self: flex-start; background: var(--xk-white); border: 1px solid var(--xk-line); border-bottom-left-radius: 4px; }
.xkm-msg.ai .xkm-speaker { opacity: .85; }
.xkm-badge { background: var(--xk-ink); color: var(--xk-ivory); border-radius: 999px; font-size: 11px; font-weight: 600; min-width: 18px; height: 18px; padding: 0 5px; display: inline-grid; place-items: center; flex: none; }
.xkm-row-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; }
.xkm-row-prev.unread { color: var(--xk-ink); font-weight: 600; }
#csNav button[data-tab="messages"].has-unread .ic, #csNav button[data-tab="messages"].has-unread .lb { position: relative; }
#csNav button[data-tab="messages"].has-unread .lb::after { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--xk-ink); margin-left: 5px; vertical-align: middle; }

/* merchant inbox */
.xki { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 0; border: 1px solid var(--xk-line); border-radius: 8px; background: var(--xk-white); height: calc(100dvh - 150px); min-height: 460px; overflow: hidden; }
.xki-list { display: flex; flex-direction: column; border-right: 1px solid var(--xk-line); min-height: 0; background: var(--xk-ivory); }
.xki-list-head { padding: 14px 16px 10px; }
.xki-list-head h1 { margin: 0 0 10px; }
.xki-search { width: 100%; border: 1px solid var(--xk-line); border-radius: 8px; padding: 9px 12px; font: inherit; font-size: 14px; background: var(--xk-white); outline: none; }
.xki-search:focus { border-color: var(--xk-ink); }
.xki-rows { overflow-y: auto; flex: 1; padding: 0 6px 10px; }
.xki-note { padding: 14px 12px; font-size: 13.5px; color: var(--xk-ink-2); }
.xki-row { display: flex; gap: 12px; width: 100%; text-align: left; padding: 11px 10px; border: none; background: none; border-radius: 10px; cursor: pointer; font: inherit; color: var(--xk-ink); }
.xki-row:hover, .xki-row.active { background: var(--xk-paper); }
.xki-av { width: 40px; height: 40px; border-radius: 50%; background: var(--xk-ink); color: var(--xk-ivory); display: grid; place-items: center; font-weight: 600; flex: none; }
.xki-av.lg { width: 38px; height: 38px; font-size: 15px; }
.xki-row-main { flex: 1; min-width: 0; }
.xki-row-top, .xki-row-bottom { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.xki-row-name { font-size: 14.5px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xki-row-time { font-size: 11.5px; color: var(--xk-ink-3); flex: none; }
.xki-row-prev { font-size: 13px; color: var(--xk-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xki-row-prev.unread { color: var(--xk-ink); font-weight: 600; }
.xki-row-state { font-size: 11.5px; color: var(--xk-ink-3); margin-top: 2px; }
.xki-row-state.warn, .xki-head-state.warn { color: var(--xk-alert); font-weight: 600; }
.xki-thread { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.xki-thread-in { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.xki-empty { margin: auto; color: var(--xk-ink-3); font-size: 15px; }
.xki-thread-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--xk-line); }
.xki-back { display: none; border: none; background: none; font-size: 22px; cursor: pointer; padding: 0 4px; color: var(--xk-ink); }
.xki-head-id { min-width: 0; flex: 1; }
.xki-head-name { font-size: 16px; font-weight: 650; }
.xki-head-state { font-size: 12.5px; color: var(--xk-ink-2); }
.xki-controls { position: relative; margin-left: auto; flex: none; }
.xki-handling-btn { border: 1px solid var(--xk-line); background: var(--xk-white, #fff); font: inherit; font-size: 13px; font-weight: 600; color: var(--xk-ink); border-radius: 6px; cursor: pointer; padding: 6px 10px; min-height: 36px; }
.xki-menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; min-width: 210px; background: var(--xk-white, #fff); border: 1px solid var(--xk-line); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.12); padding: 4px; display: flex; flex-direction: column; }
.xki-menu button { border: none; background: none; text-align: left; font: inherit; font-size: 14px; color: var(--xk-ink); padding: 10px 12px; border-radius: 6px; cursor: pointer; min-height: 40px; }
.xki-menu button:hover, .xki-menu button:focus-visible { background: var(--xk-ivory); }
.xki-menu button[aria-checked="true"]::after { content: "✓"; float: right; }
.xki-menu[x-cloak] { display: none; }
.xki-origin { padding: 8px 16px; font-size: 12.5px; color: var(--xk-ink-2); background: var(--xk-ivory); border-bottom: 1px solid var(--xk-line); }
.xki-thread-body { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 0 16px 10px; }
.xki-suggest { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; margin-bottom: 8px; background: var(--xk-ivory); border: 1px solid var(--xk-line); border-radius: 8px; font-size: 13px; }
.xki-suggest[hidden] { display: none; }
.xki-suggest button { border: 1px solid var(--xk-ink); background: none; border-radius: 4px; padding: 5px 10px; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; flex: none; }
@media (max-width: 899px) {
  .xki { grid-template-columns: minmax(0, 1fr); height: calc(100dvh - 170px); border-radius: 0; border-left: 0; border-right: 0; }
  .xki-hide-sm { display: none; }
  .xki-back { display: inline-block; }
  .xki-thread-head { flex-wrap: nowrap; padding: 10px 12px; gap: 8px; }
}

.xki-list, .xki-thread, .xki-row-main { min-width: 0; }

.xkm-note { margin: 8px auto 4px; max-width: 92%; text-align: center; font-size: 12px; line-height: 1.4; color: var(--xk-ink-2); }