/* messages.css — Messages: chat list, chat view, bubbles, receipts, swipe actions, keyboard-aware layout, chat good links.
   Moved out of the inline \3c style> in index.html (was lines 876–1684). */

/* ── Messages & Chat — all layout rules defined in messages block below ── */
/* .chat-list-container layout defined in messages block */

.chat-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 3rem 1rem;
  color: #bbb;
  text-align: center;
}

.chat-item {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
  /* border-bottom now lives on .chat-item-swipe-wrap so swipe actions don't bleed through */
  border-bottom: none;
  transition: background 0.15s;
  /* must be opaque so action buttons underneath are hidden until swiped */
  background: #ffffff;
}

.chat-item:hover, .chat-item.active {
  background: #eef1f9;
}

/* Custo Care — pinned support entry. Not wrapped in .chat-item-swipe-wrap
   (no delete/report actions exist for it), so it needs its own bottom
   border — the wrap normally supplies that for regular chat items. */
.chat-item-support {
  border-bottom: 1px solid #eee;
  background: #f7f9ff;
}
.chat-item-support:hover, .chat-item-support.active {
  background: #eef1f9;
}
.chat-item-support .chat-item-avatar img {
  background: #19378C;
  object-fit: contain;
  padding: 6px;
}

.chat-item-avatar img {
  width: 50px;
  height: 50px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
}

.chat-item-info {
  flex: 1;
  min-width: 0;
}

.chat-item-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 3px;
}

.chat-item-good {
  font-weight: 600;
  font-size: 14px;
  color: #2c3e50;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}

.chat-item-time {
  font-size: 11px;
  color: #aaa;
  flex-shrink: 0;
}

.chat-item-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chat-item-last {
  font-size: 13px;
  color: #888;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-item-party {
  font-size: 11px;
  color: #aaa;
  margin-top: 3px;
}

.chat-unread-badge {
  background: #e74c3c;
  color: white;
  font-size: 11px;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  flex-shrink: 0;
}

/* .chat-view, .chat-messages, .chat-input-area — defined in messages block below */

.chat-back-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: #19378C;
  display: flex;
}

/* .chat-messages — defined in messages block below */

.chat-loading {
  text-align: center;
  color: #aaa;
  font-size: 13px;
  padding: 2rem;
}

.chat-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 2rem 1rem;
  text-align: center;
}

.chat-intro-img {
  width: 80px;
  height: 80px;
  border-radius: 14px;
  object-fit: cover;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.chat-intro-name {
  font-weight: 600;
  font-size: 15px;
  color: #2c3e50;
}

.chat-intro-price {
  font-size: 14px;
  color: #27ae60;
  font-weight: 600;
}

.chat-intro-hint {
  font-size: 12px;
  color: #aaa;
  margin-top: 4px;
}

.chat-bubble-wrap {
  display: flex;
  flex-direction: column;
  max-width: 75%;
}

.chat-bubble-wrap.mine {
  align-self: flex-end;
  align-items: flex-end;
}

.chat-bubble-wrap.theirs {
  align-self: flex-start;
  align-items: flex-start;
}

/* ── Sale receipt — centred system bubble ── */
.chat-bubble-wrap.centre {
  align-self: center;
  align-items: center;
  max-width: 88%;
  width: 100%;
  margin: 10px 0;
}

.chat-receipt {
  width: 100%;
  max-width: 300px;
  background: #fff;
  border: 1.5px solid #d4edda;
  border-radius: 16px;
  padding: 14px 16px 12px;
  box-shadow: 0 2px 10px rgba(26,158,92,0.10);
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
}

.chat-receipt-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 800;
  color: #1a9e5c;
  border-bottom: 1px solid #eaf6ef;
  padding-bottom: 10px;
  margin-bottom: 10px;
}

.chat-receipt-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 13px;
  color: #555;
  margin-bottom: 5px;
}

.chat-receipt-row span:first-child {
  color: #999;
  font-weight: 500;
}

.chat-receipt-row span:last-child {
  font-weight: 600;
  color: #1a1a2e;
  text-align: right;
  max-width: 60%;
  word-break: break-word;
}

.chat-receipt-total {
  border-top: 1px dashed #dce8f0;
  padding-top: 7px;
  margin-top: 5px;
}

.chat-receipt-total span:last-child {
  color: #1a9e5c !important;
  font-size: 15px !important;
}

.chat-receipt-stamp {
  margin-top: 10px;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  color: #1a9e5c;
  background: #eaf6ef;
  border-radius: 6px;
  padding: 4px 8px;
  letter-spacing: 0.3px;
}

/* ── Swipe gesture wrapper ── */
.chat-item-swipe-wrap {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid #f0f0f0;
  background: #fff;
}

.chat-item-actions-bg {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 144px;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  pointer-events: none;
  /* Hidden until the row is actually being swiped.
     The layers were already stacked correctly — wrap clips, content sits
     on top with an opaque background — but the buttons were PAINTED at
     rest, so any one- or two-pixel mismatch between the row's height and
     its wrapper let a strip of red show through along the edge. That's
     the coloured line appearing between rows while scrolling, and no
     amount of z-index fixes it because the content simply isn't covering
     those pixels.
     Not rendering them at rest removes the whole class of problem: with
     nothing painted underneath, a gap shows the page, not a delete
     button. visibility rather than display so the flex sizing stays
     resolved and the reveal has nothing to lay out. */
  visibility: hidden;
}
.chat-item-swipe-wrap.actions-open .chat-item-actions-bg,
.chat-item-swipe-wrap.mk-swiping   .chat-item-actions-bg {
  visibility: visible;
}

.chat-item-swipe-wrap.actions-open .chat-item-actions-bg {
  pointer-events: all;
}

.chat-action-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: none;
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.3px;
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.12s;
}

.chat-action-btn:active { opacity: 0.78; }

.chat-action-btn .material-symbols-rounded {
  font-size: 24px !important;
  line-height: 1;
}

.chat-action-report { background: #f59e0b; }
.chat-action-delete  { background: #e74c3c; }

.chat-item-swipe-wrap .chat-item {
  position: relative;
  z-index: 1;
  will-change: transform;
  background: #ffffff;
  -webkit-tap-highlight-color: transparent;
}

.chat-bubble {
  padding: 10px 14px;
  border-radius: 18px;
  font-size: 14px;
  line-height: 1.4;
  word-break: break-word;
}

.bubble-mine {
  background: #19378C;
  color: white;
  border-bottom-right-radius: 4px;
}

.bubble-theirs {
  background: #fff;
  color: #2c3e50;
  border-bottom-left-radius: 4px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

.chat-bubble-time {
  font-size: 10px;
  color: #bbb;
  margin-top: 3px;
  padding: 0 4px;
}

/* ── Read receipt ticks ──
   These sit where the timestamp does on your OWN messages (incoming
   bubbles keep their time). Three states, set by messages.js:
     one grey check      — still only on this device (offline, or in flight)
     two grey checks     — the server has it
     two sky-blue checks — the other participant has read it
   A recipient with read receipts off never publishes the timestamp that
   turns these blue, so those threads simply rest at two grey — nothing to
   special-case here. Sky blue rather than the brand navy on purpose: the
   read state has to be legible at 14px against a white bubble at a
   glance, and navy-on-grey is too close a pair to tell apart quickly. */
.chat-receipt-line {
  display: flex;
  align-items: center;
  line-height: 1;
  min-height: 14px;
}
.chat-bubble-wrap.mine .chat-receipt-line { justify-content: flex-end; }

.mk-tick {
  font-size: 14px !important;
  color: #9aa3ad;
  line-height: 1;
  /* Material Symbols default to a heavier optical weight than a 14px
     glyph wants — thin it out so the tick reads as a quiet status mark
     rather than competing with the message text. */
  font-variation-settings: 'wght' 400, 'GRAD' 0, 'opsz' 20;
}
.mk-tick-delivered { color: #9aa3ad; }
.mk-tick-read      { color: #34B7F1; }
.mk-tick-pending   { color: #b9c0c8; }

/* .chat-input-area — defined in messages block below */

.chat-textarea {
  flex: 1;
  border: 1.5px solid #e0e0e0;
  border-radius: 20px;
  padding: 10px 14px;
  font-family: 'Inter', sans-serif;
  font-size: 16px; /* ≥16px prevents iOS Safari from zooming on focus */
  resize: none;
  outline: none;
  max-height: 120px;
  overflow-y: auto;
  transition: border-color 0.2s;
}

.chat-textarea:focus {
  border-color: #19378C;
}

.chat-send-btn {
  background: #19378C;
  color: white;
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
  flex-shrink: 0;
}

.chat-send-btn:hover {
  background: #2980b9;
  transform: scale(1.05);
}

/* ── Messages header ── */
.header-messages {
  display: flex;
  align-items: center;
  padding: 0 16px;
  padding-top: env(safe-area-inset-top, 0px);
  height: calc(56px + env(safe-area-inset-top, 0px));
  background: #fff;
  border-bottom: 1px solid #f0f0f0;
  gap: 12px;
  font-weight: 700;
  font-size: 17px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

.header-messages.hidden {
  display: none !important;
}

.header-messages .header-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ══════════════════════════════════════════════════════════════════
   MESSAGES + CHAT LAYOUT  —  viewport-correct, keyboard-aware
   ══════════════════════════════════════════════════════════════════

   DOM hierarchy:
     body  (height:100svh, flex column)
       .main  (flex:1, overflow:hidden)
         #messages  (position:absolute, fills .main)
           .header-messages  (position:fixed, top:0)
           .messages-layout  (fills #messages below header)
             .chat-list-panel
               .chat-list-header
               .chat-list-container   ← scrollable
             .chat-view.visible
               .chat-header
               .chat-messages         ← scrollable
               .chat-input-area

   Key rules:
   • body is sized by position:fixed + inset:0 ALONE — no height, no
     min-height, no dvh/svh. See the block in styles.css.
     An explicit height beats the bottom inset, and on iOS the fixed
     containing block is the LARGE viewport while dvh/svh report the
     small one — so the body ends up ~80-100px short and every screen
     stops above the bottom of the phone. This is the same warning the
     note below gives; it has been broken once already.
   • #messages fills .main with position:absolute.
   • .messages-layout sits below the fixed header using
     padding-top (NOT margin-top) so it doesn't collapse.
   • .chat-view is a normal flex column child — NO position:fixed,
     NO translateY. It fills the remaining height naturally.
   • On iOS, when the keyboard opens, the visual viewport shrinks.
     We update --vvh = visualViewport.height via JS. Then we set
     .chat-view height = calc(--vvh - --header-msg-h) directly in JS
     so iOS reflows correctly (iOS ignores dvh updates on fixed els).
   • On Android the layout viewport shrinks automatically so no JS
     height override is needed.
   ══════════════════════════════════════════════════════════════════ */

:root {
  --header-msg-h: calc(56px + env(safe-area-inset-top, 0px));
}

/* body is already position:fixed; inset:0 in styles.css —
   that locks it against keyboard-induced shifts on both iOS and Android.
   DO NOT add height/min-height here; it fights inset:0 and causes the
   page to jump when the keyboard opens. */

/* #messages: fill .main completely, start from top-0 */
#messages {
  padding: 0 !important;
  overflow: hidden !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
}

/* .messages-layout: sits below fixed header, fills rest of #messages */
#messages > .messages-layout {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  width: 100%;
  overflow: hidden;
  /* push content below the fixed .header-messages */
  padding-top: var(--header-msg-h);
  box-sizing: border-box;
}

/* ── Chat list panel ── */
.chat-list-panel {
  width: 100%;
  display: flex;
  flex-direction: column;
  border-right: 1px solid #f0f0f0;
  background: #fff;
  transition: transform 0.3s ease;
  overflow: hidden;
}

.chat-list-panel.chat-open {
  transform: translateX(-100%);
  position: absolute;
}

.chat-list-header {
  flex-shrink: 0;
  padding: 14px 16px;
  font-weight: 700;
  font-size: 16px;
  color: #2c3e50;
  border-bottom: 1px solid #f0f0f0;
}

.chat-list-container {
  flex: 1 1 0%;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* ── Chat view: fills its parent naturally ── */
.chat-view {
  display: none;
  flex-direction: column;
  width: 100%;
  /* height is set to fill parent — JS overrides on iOS when keyboard opens */
  height: 100%;
  background: #f8f9fa;
  overflow: hidden;
  flex-shrink: 0;
}

.chat-view.visible {
  display: flex;
}

/* On desktop: side-by-side layout */
@media (min-width: 640px) {
  .chat-list-panel {
    width: 320px;
    min-width: 280px;
    flex-shrink: 0;
  }
  .chat-list-panel.chat-open {
    transform: none;
    position: relative;
  }
  .chat-view {
    flex: 1;
    height: 100%;
  }
}

/* ── chat-view inner layout ── */
.chat-view-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 12px;
}

/* chat-messages: flex:1 — takes all space between header and input */
.chat-messages {
  flex: 1 1 0%;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* chat-input-area: pinned to bottom, never shrinks */
.chat-input-area {
  flex-shrink: 0;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 12px 14px;
  padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
  background: #fff;
  border-top: 1px solid #f0f0f0;
  position: relative;
}

/* ══ Touch + zoom lock scoped to #messages ══════════════════════════ */

/* Lock everything except input zones */
#messages,
#messages .messages-layout,
#messages .chat-list-panel,
#messages .chat-list-header,
#messages .chat-view,
#messages .chat-bubble-wrap,
#messages .chat-bubble,
#messages .chat-bubble-time,
#messages .chat-view-placeholder,
#messages .chat-loading,
#messages .chat-intro {
  touch-action: none;
  -ms-touch-action: none;
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
}
#messages .chat-input-area {
  touch-action: manipulation;
  overscroll-behavior: none;
}
#messages .chat-textarea {
  touch-action: manipulation;
  -webkit-user-select: text;
  user-select: text;
  font-size: 16px;
}
#messages .chat-send-btn {
  touch-action: manipulation;
}

/* Re-allow vertical scroll only in designated zones */
#messages .chat-messages,
#messages .chat-list-container {
  touch-action: pan-y;
  -ms-touch-action: pan-y;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* Textarea: text editable, no zoom (font≥16px prevents iOS zoom) */
#messages .chat-textarea {
  touch-action: pan-y;
  -ms-touch-action: pan-y;
  -webkit-user-select: text;
  user-select: text;
  font-size: 16px;
}

.chat-char-counter {
  position: absolute;
  bottom: 18px;
  right: 58px;
  font-size: 10px;
  color: #bbb;
  pointer-events: none;
}
.chat-char-counter.warn { color: #e67e22; }
.chat-char-counter.over { color: #e74c3c; font-weight: 700; }

/* ── Chat Good Link (tap to view item from chat) ── */
.chat-good-link {
  cursor: pointer;
  transition: opacity 0.15s;
}
.chat-good-link:hover { opacity: 0.8; }
.chat-intro.chat-good-link {
  border: 1.5px solid #e8f0fe;
  border-radius: 14px;
  padding: 1.5rem 1rem;
  margin: 0.5rem auto;
  max-width: 260px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(25,55,140,0.08);
}
.chat-intro.chat-good-link:hover {
  border-color: #19378C;
  opacity: 1;
  box-shadow: 0 4px 16px rgba(25,55,140,0.15);
}
.chat-intro-view-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #19378C;
  font-weight: 600;
  margin-top: 4px;
  padding: 4px 10px;
  border-radius: 20px;
  background: #eef1f9;
}