:root {
  --brand: #00a884;
  --brand-dark: #008069;
  --panel-dark: #111b21;
  --panel-dark-2: #202c33;
  --bubble-out-light: #d9fdd3;
  --bubble-out-dark: #005c4b;
  --bubble-in-light: #ffffff;
  --bubble-in-dark: #202c33;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { font-family: -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.2); border-radius: 3px; }
.dark ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); }

.bubble-out { background: var(--bubble-out-light); border-radius: 10px 2px 10px 10px; }
.dark .bubble-out { background: var(--bubble-out-dark); }
.bubble-in { background: var(--bubble-in-light); border-radius: 2px 10px 10px 10px; }
.dark .bubble-in { background: var(--bubble-in-dark); }

.chat-bg {
  background-color: #efeae2;
  background-image: radial-gradient(circle at 25px 25px, rgba(0,0,0,0.03) 2%, transparent 0%),
                     radial-gradient(circle at 75px 75px, rgba(0,0,0,0.03) 2%, transparent 0%);
  background-size: 100px 100px;
}
.dark .chat-bg { background-color: #0b141a; }

.tick-read { color: #53bdeb; }

textarea.autoexpand {
  resize: none;
  max-height: 120px;
  overflow-y: auto;
}

.avatar-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
}

/* Mobile: single-column push navigation between chat list and chat window.
   Desktop (md+) always shows both panes side by side regardless of this class
   — Tailwind's `md:flex` on chat-window-pane and the absence of any md rule
   here for chat-list-pane already guarantee that, this only applies <768px. */
@media (max-width: 767px) {
  #layout.conversation-open .chat-list-pane { display: none; }
}

/* Sosmed feed: pull-to-refresh. #postFeed is dragged down with a live
   transform while the user's finger tracks it; the indicator sits just
   above it and is revealed through the gap that opens up. */
#postFeed {
  overscroll-behavior-y: contain;
  touch-action: pan-y;
  transition: transform 0.25s ease;
}
.pull-refresh-indicator {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand);
  opacity: 0;
  transform: translateY(-100%);
  transition: transform 0.25s ease, opacity 0.25s ease;
  pointer-events: none;
}
.pull-refresh-indicator.spinning svg { animation: pull-refresh-spin 0.7s linear infinite; }
#refreshFeedBtn svg.spin-once { animation: pull-refresh-spin 0.7s linear infinite; }

@keyframes pull-refresh-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ---------------------------------------------------------------------
   Market: product cards. Plain CSS on purpose (not Tailwind utilities) —
   the photo box and the text/button content below it are two completely
   separate classes with no shared styling, so one can never bleed into or
   cover the other. The square uses `aspect-ratio` (not the old
   padding-top:100% hack) because grid/flex track sizing resolves it
   correctly for items whose height is otherwise content-driven — the
   padding-based trick could under-size a card's grid row and let the next
   row visually overlap it.
   --------------------------------------------------------------------- */
.market-card {
  display: flex;
  flex-direction: column;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
  background: #ffffff;
}
.dark .market-card { border-color: #1f2937; background: #202c33; }

.market-card-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #f3f4f6;
}
.dark .market-card-photo { background: #1f2937; }
.market-card-photo img,
.market-card-photo-placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.market-card-photo img { object-fit: cover; }
.market-card-photo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #d1d5db;
}
.dark .market-card-photo-placeholder { color: #4b5563; }

.market-card-body {
  padding: 10px 10px 4px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.market-card-name {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  color: inherit;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.market-card-price {
  font-size: 14px;
  font-weight: 700;
  color: var(--brand);
}
.market-card-seller {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: #6b7280;
  overflow: hidden;
}
.dark .market-card-seller { color: #9ca3af; }
.market-card-seller img {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  object-fit: cover;
  background: #d1d5db;
  flex-shrink: 0;
}
.market-card-seller span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.market-card-category-badge {
  align-self: flex-start;
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 999px;
  background: #f3f4f6;
  color: #6b7280;
}
.dark .market-card-category-badge { background: #1f2937; color: #9ca3af; }

.market-card-cart-btn,
.market-card-owned {
  margin-top: 6px;
  padding: 7px 0;
  text-align: center;
  font-size: 12px;
  border-top: 1px solid #e5e7eb;
}
.dark .market-card-cart-btn,
.dark .market-card-owned { border-color: #1f2937; }
.market-card-cart-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-weight: 500;
  color: var(--brand);
  background: transparent;
  width: 100%;
}
.market-card-cart-btn:hover { background: #f9fafb; }
.dark .market-card-cart-btn:hover { background: rgba(255,255,255,0.04); }
.market-card-owned { color: #9ca3af; }
.dark .market-card-owned { color: #6b7280; }

.market-card-actions {
  display: flex;
  border-top: 1px solid #e5e7eb;
  margin-top: 6px;
}
.dark .market-card-actions { border-color: #1f2937; }
.market-card-actions button {
  flex: 1;
  padding: 7px 0;
  font-size: 12px;
  background: transparent;
}
.market-card-actions .edit-item-btn {
  color: #6b7280;
  border-right: 1px solid #e5e7eb;
}
.dark .market-card-actions .edit-item-btn { color: #9ca3af; border-color: #1f2937; }
.market-card-actions .delete-item-btn { color: #ef4444; }
.market-card-actions button:hover { background: #f9fafb; }
.dark .market-card-actions button:hover { background: rgba(255,255,255,0.04); }