/* components.css */

/* Post cards */
.post-list { padding: 10px 14px; display: flex; flex-direction: column; gap: 8px; }
.post-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-l); padding: 14px; display: flex; flex-direction: column; gap: 10px; transition: border-color 0.14s; animation: fadeIn 0.18s ease; }
.post-card:hover { border-color: var(--border2); }
.post-card__header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.post-type { font-size: 0.67rem; font-family: var(--fm); font-weight: 500; padding: 3px 9px; border-radius: var(--r-p); text-transform: uppercase; letter-spacing: 0.08em; border: 1px solid; }
.type--sell   { background: rgba(245,158,11,.12); color: var(--sell);   border-color: rgba(245,158,11,.28); }
.type--buy    { background: rgba(59,130,246,.12);  color: var(--buy);    border-color: rgba(59,130,246,.28); }
.type--lend   { background: rgba(34,197,94,.12);   color: var(--lend);   border-color: rgba(34,197,94,.28); }
.type--borrow { background: rgba(168,85,247,.12);  color: var(--borrow); border-color: rgba(168,85,247,.28); }

.post-distance { margin-left: auto; font-size: 0.7rem; font-family: var(--fm); color: var(--dim); }
.post-text  { font-size: 0.9rem; line-height: 1.55; }
.post-price { font-size: 0.85rem; font-family: var(--fm); color: var(--accent); margin-top: 2px; }
.post-image { width: 100%; max-height: 200px; object-fit: contain; border-radius: var(--r-m); border: 1px solid var(--border); }
.post-card__footer { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; border-top: 1px solid var(--border); padding-top: 10px; }
.post-author { font-size: 0.75rem; font-family: var(--fm); color: var(--muted); }
.post-expiry { font-size: 0.7rem; font-family: var(--fm); color: var(--dim); margin-left: auto; }
.post-msg-btn { margin-left: auto; }
.post-owner-actions { display: flex; gap: 8px; flex-wrap: wrap; width: 100%; }

/* Feed filters */
.feed-filters { display: flex; gap: 7px; padding: 8px 14px; overflow-x: auto; scrollbar-width: none; }
.feed-filters::-webkit-scrollbar { display: none; }
.filter-btn { flex-shrink: 0; padding: 6px 12px; border-radius: var(--r-p); font-size: 0.77rem; font-family: var(--fm); border: 1px solid var(--border2); color: var(--muted); background: transparent; cursor: pointer; transition: all 0.12s; white-space: nowrap; }
.filter-btn:hover { color: var(--text); border-color: var(--muted); }
.filter-btn--active { border-color: var(--accent); color: var(--accent); background: var(--accent-s); }

.type-selector { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.type-btn { padding: 10px; border-radius: var(--r-m); font-size: 0.8rem; font-family: var(--fm); border: 1px solid var(--border2); color: var(--muted); background: transparent; cursor: pointer; transition: all 0.12s; text-transform: uppercase; letter-spacing: 0.06em; }
.type-btn--sell:hover,  .type-btn--sell.type-btn--active   { border-color: var(--sell);   color: var(--sell);   background: rgba(245,158,11,.09); }
.type-btn--buy:hover,   .type-btn--buy.type-btn--active    { border-color: var(--buy);    color: var(--buy);    background: rgba(59,130,246,.09); }
.type-btn--lend:hover,  .type-btn--lend.type-btn--active   { border-color: var(--lend);   color: var(--lend);   background: rgba(34,197,94,.09); }
.type-btn--borrow:hover,.type-btn--borrow.type-btn--active { border-color: var(--borrow); color: var(--borrow); background: rgba(168,85,247,.09); }

/* Location display in settings */
.settings-location-display {
  font-size: 0.75rem;
  color: var(--muted);
  font-family: var(--fm);
  margin-top: 6px;
  min-height: 1em;
}
.install-tip {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  background: var(--surface2);
  border-bottom: 1px solid var(--border2);
  box-shadow: 0 2px 16px rgba(0,0,0,.14);
  padding: calc(env(safe-area-inset-top, 0px) + 10px) 14px 10px;
  animation: install-tip-in 0.3s cubic-bezier(.22,1,.36,1);
}
@keyframes install-tip-in {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}
.install-tip__inner {
  display: flex; align-items: center; gap: 12px; max-width: 480px; margin: 0 auto;
}
.install-tip__text { flex: 1; line-height: 1.35; }
.install-tip__title { display: block; font-size: 0.82rem; font-weight: 700; color: var(--text); margin-bottom: 2px; }
.install-tip__body  { font-size: 0.78rem; color: var(--muted); }
.install-tip__body strong { color: var(--text); font-weight: 600; }
.install-tip__close {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--border2);
  color: var(--muted); display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background 0.15s, color 0.15s;
}
.install-tip__close:hover { background: var(--surface2); color: var(--text); }
/* Offset page content so banner doesn't overlap */
body:has(.install-tip) #app { padding-top: calc(env(safe-area-inset-top, 0px) + 70px); }

/* Chat list with rep */

.chat-list { display: flex; flex-direction: column; }
.chat-item { display: flex; gap: 12px; padding: 13px 14px; border-bottom: 1px solid var(--border); transition: background 0.1s; cursor: pointer; }
.chat-item:hover { background: var(--surface); }
.chat-item__avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--surface2); border: 1px solid var(--border2); display: flex; align-items: center; justify-content: center; font-family: var(--fm); font-size: 0.75rem; color: var(--muted); flex-shrink: 0; }
.chat-item__body   { flex: 1; min-width: 0; }
.chat-item__header { display: flex; align-items: baseline; gap: 8px; margin-bottom: 2px; }
.chat-item__name   { font-size: 0.87rem; font-weight: 600; font-family: var(--fm); }
.chat-item__time   { font-size: 0.68rem; color: var(--dim); font-family: var(--fm); margin-left: auto; }
.chat-item__preview{ font-size: 0.82rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-profile-link { cursor: pointer; background: none; border: none; padding: 0; font: inherit; color: inherit; }
.chat-profile-link:hover { color: var(--accent); }

/* Chat detail */
.chat-detail-page { display: flex; flex-direction: column; height: calc(100dvh - var(--safe-t) - var(--head-h)); }
.chat-messages { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 8px; scroll-behavior: smooth; min-height: 0; }
.chat-bubble-wrap { display: flex; }
.chat-bubble-wrap--mine { justify-content: flex-end; }
.chat-bubble { max-width: 76%; padding: 9px 13px; border-radius: var(--r-l); }
.chat-bubble--mine   { background: var(--accent); color: #fff; border-radius: var(--r-l) var(--r-l) var(--r-s) var(--r-l); }
.chat-bubble--theirs { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--r-l) var(--r-l) var(--r-l) var(--r-s); }
.chat-bubble__text { font-size: 0.88rem; line-height: 1.5; word-break: break-word; }
.chat-bubble__time  { font-size: 0.62rem; font-family: var(--fm); opacity: 0.55; display: block; margin-top: 3px; text-align: right; }
.chat-composer { flex-shrink: 0; padding: 10px 14px; padding-bottom: calc(10px + var(--safe-b) + var(--nav-h)); border-top: 1px solid var(--border); background: var(--bg); display: flex; gap: 8px; align-items: flex-end; }
@supports (backdrop-filter: blur(1px)) {
  .chat-composer { background: rgba(13,13,13,0.94); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
  [data-theme="light"] .chat-composer { background: rgba(250,250,248,0.94); }
}
.chat-input { height: 40px; min-height: 40px; max-height: 110px; }
.chat-user-actions { display: flex; gap: 6px; }

/* Profile */
.profile-card { margin: 12px 14px; padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-l); display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.profile-stat { display: flex; flex-direction: column; gap: 3px; }
.profile-stat__label { font-size: 0.68rem; font-family: var(--fm); color: var(--muted); text-transform: uppercase; letter-spacing: 0.07em; }
.profile-stat__value { font-size: 1rem; font-weight: 600; }
.profile-rep-tabs { display: flex; gap: 8px; margin-left: auto; }
.rep-tab { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 14px; border-radius: var(--r-m); border: 1px solid var(--border); background: var(--surface2); }
.rep-tab--pos { border-color: rgba(34,197,94,.3); background: rgba(34,197,94,.08); }
.rep-tab--neg { border-color: rgba(239,68,68,.3); background: rgba(239,68,68,.08); }
.rep-tab__count { font-size: 1rem; font-weight: 700; font-family: var(--fm); }
.rep-tab--pos .rep-tab__count { color: var(--lend); }
.rep-tab--neg .rep-tab__count { color: #ef4444; }
.rep-tab__label { font-size: 0.75rem; }
.vote-actions { padding: 0 14px 14px; display: flex; gap: 10px; }
.profile-posts-section { padding: 14px; }

/* Settings */
.settings-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.settings-section { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-l); padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.settings-section--pro { border-color: rgba(232,130,12,.35); background: rgba(232,130,12,.05); }

.pro-perks { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pro-perks li { font-size: 0.9rem; color: var(--text); display: flex; align-items: center; gap: 8px; }

.pro-buy-wrap { display: flex; justify-content: center; }

.settings-section-title { font-size: 0.68rem; font-family: var(--fm); text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); }
.settings-row { display: flex; flex-direction: column; gap: 7px; }
.settings-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.settings-toggle-label { font-size: 0.88rem; }
.settings-unit { font-size: 0.875rem; color: var(--muted); align-self: center; }
.settings-hint { font-size: 0.82rem; color: var(--muted); margin: 0; }
.pro-desc { font-size: 0.84rem; color: var(--muted); line-height: 1.55; }

/* Location gate */
.location-gate { position: fixed; inset: 0; background: rgba(0,0,0,0.7); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 200; }
.location-gate__card { width: 100%; max-width: 320px; background: var(--surface); border: 1px solid var(--border2); border-radius: var(--r-xl); padding: 22px; text-align: center; display: flex; flex-direction: column; gap: 10px; }
.location-gate__title { font-size: 1rem; font-weight: 600; }
.location-gate__text  { font-size: 0.86rem; color: var(--muted); }