/*
 * "Contact seller" opens the *real* /chat page (same URL as the menu bar's
 * "Chat" link) in this, over the item page, rather than re-implementing a
 * mini chat — an <iframe>, not a fetched fragment, so the embedded page
 * behaves in every way like visiting it directly (quick replies, the item
 * card, block/report, blocked-conversation banner, ...). The listing stays
 * mounted underneath; the X just hides this overlay, bringing it back.
 */
.second_shelf-item-chat-overlay {
  align-items: center;
  background: rgba(23,25,29,0.5);
  backdrop-filter: blur(2px);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 40px 16px 16px;
  position: fixed;
  z-index: 120;
}

.second_shelf-item-chat-overlay[hidden] {
  display: none;
}

.second_shelf-item-chat-box {
  height: min(760px, 92vh);
  position: relative;
  width: min(1040px, 96vw);
}

/*
 * Plain, invisible window — the rounded/bordered/shadowed "card" look
 * comes from .chat-page itself inside it (see body.chat-page-embed
 * below), same as it has on the real page reached via the menu icon.
 * Framing the iframe *too* would nest one rounded box inside another.
 */
.second_shelf-item-chat-frame {
  background: transparent;
  border: 0;
  display: block;
  height: 100%;
  width: 100%;
}

.second_shelf-item-chat-close {
  align-items: center;
  background: #fff;
  border: 0;
  border-radius: 50%;
  box-shadow: 0 8px 20px rgba(23,25,29,0.3);
  color: var(--book-ink);
  cursor: pointer;
  display: flex;
  font-size: 15px;
  height: 36px;
  justify-content: center;
  position: absolute;
  right: -14px;
  top: -14px;
  width: 36px;
  z-index: 1;
}

.second_shelf-item-chat-close:hover {
  background: var(--book-teal);
  color: #fff;
}

.chat-page {
  background: var(--book-panel);
  border: 1px solid rgba(255,255,255,0.7);
  border-radius: 20px;
  box-shadow: var(--book-shadow);
  display: flex;
  height: calc(100vh - 160px);
  min-height: 520px;
  overflow: hidden;
}

/*
 * body.chat-page-embed — set by chat.php when loaded with &embed=1 (the
 * item.php overlay's iframe). Hides every bit of site chrome around
 * .chat-page (topbar, category rail, footer, decorative background
 * layers) and lets it fill the iframe edge to edge, so what's inside the
 * overlay is *just the chat widget* — not the whole site shrunk down.
 */
body.chat-page-embed .app-topbar,
body.chat-page-embed .wrapper-flash,
body.chat-page-embed #category-rail,
body.chat-page-embed footer,
body.chat-page-embed .page-bg-corner-patch,
body.chat-page-embed .page-bg-accent,
body.chat-page-embed .page-bg-gap-strip,
body.chat-page-embed .right-edge-strip {
  display: none;
}

/*
 * Transparent, not var(--book-bg) — with a solid page background here,
 * the iframe (a plain rectangle, unlike .chat-page's own rounded corners)
 * showed up as a visible box of its own around the rounded chat card.
 * Transparent lets the modal's dark backdrop show through everywhere
 * except .chat-page itself, so only the rounded card is visible.
 */
body.chat-page-embed {
  background: transparent;
}

body.chat-page-embed section {
  padding-top: 0;
}

body.chat-page-embed .wrapper#content {
  box-sizing: border-box;
  margin: 0;
  max-width: 100%;
  padding: 20px;
  width: 100%;
}

body.chat-page-embed .second-shelf-layout {
  gap: 0;
  grid-template-columns: 1fr;
}

/* Keeps .chat-page's own border/border-radius/box-shadow from the base
   rule above — just resized to fit the iframe now that the 160px of
   topbar it normally leaves room for isn't there. */
body.chat-page-embed .chat-page {
  /* The base .chat-page rule's background (var(--book-panel), only 78%
     opaque) is fine sitting on the page's own solid background — but
     here, with the embed body transparent so only .chat-page's rounded
     card shows over the dark modal backdrop, that translucency let the
     backdrop tint straight through it. Solid here instead. */
  background: #fff;
  height: calc(100vh - 40px);
  min-height: 0;
}

/*
 * The confirm/report dialogs (footer.php — also present inside the iframe
 * document itself, chrome hidden but the page is otherwise unchanged) use
 * position:fixed; inset:0 for their own dark backdrop — relative to the
 * *iframe's* viewport, not the real one, so blocking/reporting someone
 * from in here painted a second, hard-edged rectangle of its own right at
 * the iframe's bounds, on top of the item.php overlay's own backdrop
 * behind it. Dropped here — the outer backdrop alone is enough; the
 * dialog box itself (not this rule) stays fully visible and centered.
 */
body.chat-page-embed .second_shelf-confirm-modal {
  background: transparent;
  backdrop-filter: none;
}

.chat-list-pane {
  border-right: 1px solid var(--book-line);
  display: flex;
  flex-direction: column;
  width: 340px;
}

.chat-list-head {
  border-bottom: 1px solid var(--book-line);
  padding: 22px 20px 16px;
}

.chat-list-head h1 {
  font-size: 24px;
  font-weight: 900;
  margin: 0 0 14px;
}

.chat-search {
  align-items: center;
  background: #fff;
  border: 1px solid var(--book-line);
  border-radius: 10px;
  color: var(--book-muted);
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  padding: 8px 12px;
}

.chat-search input {
  background: transparent;
  border: 0;
  color: var(--book-ink);
  flex: 1;
  font-family: inherit;
  font-size: 14px;
  outline: none;
}

.chat-tabs {
  display: flex;
  gap: 18px;
}

.chat-tabs a {
  color: var(--book-muted);
  font-size: 13px;
  font-weight: 800;
  padding-bottom: 8px;
}

.chat-tabs a.active {
  border-bottom: 2px solid var(--book-teal);
  color: var(--book-ink);
}

.chat-tab-archived i {
  font-size: 11px;
  margin-right: 3px;
}

/* Same "past tense" muted treatment sold books get elsewhere in the
   theme (.my-book-card.is-sold) — an archived thread reads as tucked
   away, not gone. */
.chat-conversation-item.is-archived .chat-avatar img {
  filter: grayscale(0.5);
  opacity: 0.75;
}

.chat-conversation-item.is-archived .chat-name,
.chat-conversation-item.is-archived .chat-preview {
  color: var(--book-muted);
}

.chat-conversation-list {
  list-style: none;
  margin: 0;
  overflow-y: auto;
  padding: 8px;
}

.chat-conversation-item {
  border-radius: 12px;
  overflow: hidden;
  position: relative;
}

.chat-context-trigger {
  align-items: center;
  border-radius: 12px;
  display: flex;
  gap: 12px;
  padding: 10px 8px;
}

/*
 * Right-click (contextmenu) on .chat-context-trigger opens this as a
 * small floating menu next to the cursor (see chat.js) — there's no
 * visible button, the row itself is the only trigger, same as a native
 * desktop app's right-click menu. position: fixed so it can float
 * anywhere over the page regardless of which row it belongs to or how
 * far down the (scrollable) list that row sits.
 */
.chat-context-menu {
  background: var(--book-panel-strong);
  border: 1px solid var(--book-line);
  border-radius: 14px;
  box-shadow: var(--book-shadow);
  display: none;
  flex-direction: column;
  min-width: 220px;
  overflow: hidden;
  padding: 6px;
  position: fixed;
  transform: scale(0.96);
  transform-origin: top left;
  transition: transform 0.12s ease, opacity 0.12s ease;
  opacity: 0;
  z-index: 30;
}

.chat-conversation-item.context-open .chat-context-menu {
  display: flex;
  opacity: 1;
  transform: scale(1);
}

.chat-context-menu button {
  align-items: center;
  background: none;
  border: 0;
  border-radius: 9px;
  color: var(--book-ink);
  display: flex;
  font-size: 14px;
  font-weight: 700;
  gap: 12px;
  padding: 11px 12px;
  text-align: left;
  width: 100%;
}

.chat-context-menu button:hover {
  background: var(--book-line);
}

.chat-context-menu button i {
  color: var(--book-muted);
  text-align: center;
  width: 16px;
}

.chat-context-menu-danger {
  color: var(--book-danger) !important;
}

.chat-context-menu-danger i {
  color: var(--book-danger) !important;
}

.chat-context-menu form + form {
  border-top: 1px solid var(--book-line);
  margin-top: 4px;
  padding-top: 4px;
}

.chat-conversation-item a:hover,
.chat-conversation-item.active a {
  background: rgba(224,219,214,0.6);
}

.chat-avatar {
  flex-shrink: 0;
  height: 44px;
  position: relative;
  width: 44px;
}

.chat-avatar img {
  border: 2px solid rgba(255,255,255,0.9);
  border-radius: 50%;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.chat-online-dot {
  background: #37b24d;
  border: 2px solid #fff;
  border-radius: 50%;
  bottom: -1px;
  height: 12px;
  position: absolute;
  right: -1px;
  width: 12px;
}

.chat-row-main {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.chat-row-top {
  display: flex;
  gap: 8px;
  justify-content: space-between;
}

.chat-name {
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-time {
  color: var(--book-muted);
  flex-shrink: 0;
  font-size: 12px;
}

.chat-preview {
  color: var(--book-muted);
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-conversation-item.unread .chat-name,
.chat-conversation-item.unread .chat-preview {
  color: var(--book-ink);
  font-weight: 800;
}

.chat-blocked-dot {
  background: var(--book-error);
  border: 2px solid #fff;
  border-radius: 50%;
  bottom: -1px;
  color: #fff;
  font-size: 7px;
  align-items: center;
  display: flex;
  justify-content: center;
  height: 14px;
  position: absolute;
  right: -1px;
  width: 14px;
}

.chat-blocked-tag {
  align-items: center;
  background: rgba(192,57,43,0.1);
  border-radius: 999px;
  color: var(--book-error);
  display: inline-flex;
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 800;
  gap: 4px;
  margin-left: 6px;
  padding: 2px 7px;
  text-transform: uppercase;
  vertical-align: middle;
}

.chat-conversation-item.is-blocked .chat-avatar img {
  filter: grayscale(0.6);
  opacity: 0.7;
}

.chat-unread-badge {
  align-items: center;
  background: var(--book-teal);
  border-radius: 999px;
  color: #fff;
  display: flex;
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 900;
  height: 20px;
  justify-content: center;
  min-width: 20px;
  padding: 0 6px;
}

.chat-empty-list,
.chat-empty-thread {
  align-items: center;
  color: var(--book-muted);
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 12px;
  justify-content: center;
  padding: 32px;
  text-align: center;
}

.chat-empty-list i,
.chat-empty-thread i {
  color: var(--book-line);
  font-size: 40px;
}

.chat-thread-pane {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.chat-thread-header {
  align-items: center;
  border-bottom: 1px solid var(--book-line);
  display: flex;
  gap: 14px;
  padding: 16px 22px;
}

.chat-back {
  color: var(--book-ink);
  display: none;
  font-size: 18px;
}

.chat-avatar-lg {
  border: 2px solid rgba(255,255,255,0.9);
  border-radius: 50%;
  height: 48px;
  object-fit: cover;
  width: 48px;
}

.chat-thread-name {
  font-weight: 900;
}

.chat-view-profile {
  color: var(--book-teal);
  font-size: 13px;
  font-weight: 700;
}

.chat-item-card {
  align-items: center;
  background: var(--book-panel-strong);
  border: 1px solid var(--book-line);
  border-radius: 16px;
  box-shadow: var(--book-shadow);
  display: flex;
  gap: 14px;
  margin: 16px 22px 0;
  padding: 12px;
}

.chat-item-card img {
  border-radius: 10px;
  height: 52px;
  background-color: #f1ede7;
  object-fit: contain;
  width: 52px;
}

.chat-item-info {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.chat-item-title {
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-item-price {
  color: var(--book-teal);
  font-weight: 900;
}

.chat-item-card i {
  color: var(--book-muted);
}

/*
 * Reuses .public-profile-blocked-banner's look (profile.css) — same
 * situation, same visual language — with a bit less side margin to sit
 * flush with the thread pane's own padding instead of that page's wider
 * card.
 */
.chat-blocked-banner {
  margin: 14px 22px 0;
  width: auto;
}

.chat-input-blocked {
  align-items: center;
  color: var(--book-muted);
  display: flex;
  font-size: 13px;
  font-weight: 700;
  gap: 10px;
  justify-content: center;
}

.chat-input-blocked i {
  color: var(--book-error);
}

.chat-messages {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  padding: 22px;
}

.chat-bubble-row {
  align-items: flex-end;
  display: flex;
  gap: 8px;
}

.chat-bubble-row.mine {
  justify-content: flex-end;
}

.chat-bubble-avatar {
  border-radius: 50%;
  height: 28px;
  object-fit: cover;
  width: 28px;
}

.chat-bubble {
  border-radius: 18px 18px 18px 4px;
  box-shadow: 0 2px 8px rgba(40,36,31,0.06);
  line-height: 1.45;
  max-width: 60%;
  overflow-wrap: break-word;
  padding: 11px 16px;
  word-break: break-word;
}

.chat-bubble-row.theirs .chat-bubble {
  background: var(--book-panel-strong);
  color: var(--book-ink);
}

.chat-bubble-row.mine .chat-bubble {
  background: var(--book-teal);
  border-radius: 18px 18px 4px 18px;
  box-shadow: 0 4px 12px rgba(30,105,104,0.25);
  color: #fff;
}

/*
 * WhatsApp-style timestamp: floated right at the very end of the bubble's
 * text content, so it tucks in beside the last line when there's room and
 * drops to its own line when there isn't — same wrap behavior as WhatsApp,
 * achieved for free by float instead of any layout logic.
 */
.chat-bubble-time {
  float: right;
  font-size: 11px;
  font-weight: 600;
  margin: 6px 0 -2px 10px;
}

.chat-bubble-row.theirs .chat-bubble-time {
  color: var(--book-muted);
}

.chat-bubble-row.mine .chat-bubble-time {
  color: rgba(255,255,255,0.75);
}

/*
 * Date divider: a centered pill above the first message of each calendar
 * day, WhatsApp-style, so individual bubbles only need a clock time and
 * never repeat the full date.
 */
.chat-date-divider {
  display: flex;
  justify-content: center;
  margin: 4px 0;
}

.chat-date-divider span {
  background: var(--book-panel);
  border-radius: 999px;
  color: var(--book-muted);
  font-size: 12px;
  font-weight: 700;
  padding: 5px 14px;
}

.chat-quick-replies {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 22px 12px;
}

.chat-chip {
  background: transparent;
  border: 1px solid var(--book-line);
  border-radius: 999px;
  color: var(--book-ink);
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  min-height: 32px;
  padding: 0 14px;
}

.chat-chip:hover {
  background: rgba(224,219,214,0.6);
}

.chat-input-bar {
  align-items: center;
  border-top: 1px solid var(--book-line);
  display: flex;
  padding: 16px 22px;
}

.chat-input-field {
  align-items: center;
  background: #fff;
  border: 1px solid var(--book-line);
  border-radius: 24px;
  display: flex;
  flex: 1;
  gap: 4px;
  padding: 6px 6px 6px 18px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.chat-input-field:focus-within {
  border-color: var(--book-teal);
  box-shadow: 0 0 0 3px rgba(30,105,104,0.12);
}

.chat-input-field textarea {
  background: transparent;
  border: 0;
  border-radius: 0;
  flex: 1;
  font-family: inherit;
  font-size: 14px;
  margin: 0;
  max-height: 120px;
  min-height: 24px;
  outline: none;
  padding: 7px 0;
  resize: none;
}

.chat-send-btn {
  align-items: center;
  background: var(--book-teal);
  border: 0;
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  display: flex;
  flex-shrink: 0;
  font-size: 14px;
  gap: 0;
  height: 36px;
  justify-content: center;
  min-height: 0;
  min-width: 0;
  padding: 0;
  transition: background 0.15s ease, transform 0.1s ease;
  width: 36px;
}

.chat-send-btn i {
  line-height: 1;
}

.chat-send-btn:hover {
  background: #17514f;
}

.chat-send-btn:active {
  transform: scale(0.92);
}

/*
 * Rate-limit cooldown inside a chat composer (1:1 chat, item-page chat
 * overlay and book club chat) — see second_shelf_render_chat_cooldown().
 * A warm strip above the input with a flipping hourglass, the remaining
 * time and a bar that drains along its bottom edge; the send button greys
 * out until it's over. Typing stays possible so nothing is lost.
 */
.chat-input-bar {
  flex-wrap: wrap;
}

.chat-cooldown {
  align-items: center;
  animation: chat-cooldown-in 0.25s ease;
  background: linear-gradient(90deg, rgba(215,111,53,0.14), rgba(215,111,53,0.05));
  border: 1px solid rgba(215,111,53,0.28);
  border-radius: 14px;
  color: var(--book-ink);
  display: flex;
  flex-basis: 100%;
  font-size: 13px;
  font-weight: 700;
  gap: 10px;
  margin-bottom: 10px;
  overflow: hidden;
  padding: 9px 14px 11px 10px;
  position: relative;
}

.chat-cooldown[hidden] {
  display: none;
}

.chat-cooldown-icon {
  align-items: center;
  background: var(--book-orange);
  border-radius: 50%;
  color: #fff;
  display: flex;
  flex-shrink: 0;
  font-size: 12px;
  height: 28px;
  justify-content: center;
  width: 28px;
}

.chat-cooldown-icon i {
  animation: chat-cooldown-flip 2s ease-in-out infinite;
}

.chat-cooldown-text strong {
  color: var(--book-orange);
  font-variant-numeric: tabular-nums;
}

.chat-cooldown-bar {
  background: rgba(215,111,53,0.15);
  bottom: 0;
  height: 3px;
  left: 0;
  position: absolute;
  right: 0;
}

.chat-cooldown-bar span {
  background: var(--book-orange);
  display: block;
  height: 100%;
  transition: width 0.25s linear;
  width: 100%;
}

.chat-input-bar.is-cooling .chat-send-btn,
.chat-input-bar.is-cooling .chat-send-btn:hover {
  background: var(--book-line);
  color: var(--book-muted);
  cursor: not-allowed;
}

@keyframes chat-cooldown-flip {
  0%, 40% { transform: rotate(0deg); }
  50%, 90% { transform: rotate(180deg); }
  100% { transform: rotate(360deg); }
}

@keyframes chat-cooldown-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/*
 * Fixed chat pages — the 1:1 chat (body.chat-page-body, also inside the
 * item-page overlay iframe) and the book club chat (body.has-club-chat).
 * Like a chat app: the page itself never scrolls, only the message list
 * and conversation list inside the chat box do, and reaching the end of
 * one of them doesn't drag the page along (overscroll-behavior). The box's
 * height is fitted to the visible area by second_shelf_fit_chat() in
 * global.js.
 */
html:has(body.chat-page-body),
html:has(body.has-club-chat),
body.chat-page-body,
body.has-club-chat {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

body.chat-page-body footer,
body.has-club-chat footer {
  display: none;
}

.chat-messages,
.chat-conversation-list,
.bookclub-mod-pane,
.bookclub-panel-pane,
.bookclub-mention-picker-list {
  overscroll-behavior: contain;
}


/* While the chat is open over a book page, the app's bottom bar steps away —
   it would sit on top of the chat and anything opened in it. */
body:has(.second_shelf-item-chat-overlay:not([hidden])) .bottom-nav {
  display: none;
}

/* The swap picker is open in the chat: the page around it dims as much as
   the chat itself (brightness 0.55, see swap.css), so there's no frame. */
.second_shelf-item-chat-overlay {
  transition: background 0.2s ease;
}

html.swap-picker-open-inside .second_shelf-item-chat-overlay {
  background: rgba(23,25,29,0.725);
}

html.swap-picker-open-inside .second_shelf-item-chat-close {
  opacity: 0;
  pointer-events: none;
}

/* The official Second Shelf account: a quiet teal shield by the name and a
   thin ring around the picture (official-helpers.php). */
.official-badge {
  color: var(--book-teal);
  display: inline-flex;
  font-size: 0.78em;
  margin-left: 5px;
  opacity: 0.85;
  vertical-align: 0.05em;
}

.chat-conversation-item .chat-avatar.is-official img,
.chat-thread-header .chat-avatar-lg.is-official {
  border: 2px solid rgba(30,105,104,0.55);
}