/* ==========================================================================
   collab.css — Collaborative Search + Data Trust Badge Styles
   Self-contained. Uses CSS variables from styles.css.
   ========================================================================== */

/* ── Data Trust Badges (shared by chat cards + listing detail) ── */

.dt-card-badges{
  display:flex; flex-wrap:wrap; gap:5px; align-items:center;
  margin-top:6px;
}

.dt-status-pill{
  display:inline-flex; align-items:center;
  padding:2px 8px; border-radius:10px;
  font-size:11px; font-weight:600; line-height:1.4;
  white-space:nowrap;
}
.dt-status-pill.dt-green{ background:rgba(18,183,106,.12); color:#0d9456; }
.dt-status-pill.dt-amber{ background:rgba(247,144,9,.12); color:#c27400; }
.dt-status-pill.dt-red{ background:rgba(240,68,56,.12); color:#c0362c; }
.dt-status-pill.dt-gray{ background:rgba(107,114,128,.12); color:#6b7280; }

.dt-status-pill-lg{
  padding:4px 12px; font-size:13px; border-radius:12px;
}

.dt-dom-badge{
  display:inline-flex; align-items:center;
  padding:2px 7px; border-radius:8px;
  font-size:10px; font-weight:600; line-height:1.3;
}
.dt-dom-badge.dt-green{ background:rgba(18,183,106,.10); color:#0d9456; }
.dt-dom-badge.dt-amber{ background:rgba(247,144,9,.10); color:#c27400; }
.dt-dom-badge.dt-red{ background:rgba(240,68,56,.10); color:#c0362c; }

.dt-dom-badge-lg{
  display:inline-flex; align-items:center; gap:4px;
  padding:4px 10px; border-radius:10px;
  font-size:12px; line-height:1.3;
}
.dt-dom-badge-lg.dt-green{ background:rgba(18,183,106,.10); color:#0d9456; }
.dt-dom-badge-lg.dt-amber{ background:rgba(247,144,9,.10); color:#c27400; }
.dt-dom-badge-lg.dt-red{ background:rgba(240,68,56,.10); color:#c0362c; }
.dt-dom-badge-lg strong{ font-weight:700; }

.dt-freshness{
  font-size:10px; color:var(--text-muted,#888); white-space:nowrap;
}

.dt-detail-badges{
  display:flex; flex-wrap:wrap; gap:8px; align-items:center;
  padding:12px 0; margin-top:4px;
}

.dt-provenance{
  display:inline-flex; align-items:center; gap:4px;
  font-size:11px; font-weight:500; padding:3px 8px;
  border-radius:8px;
}
.dt-provenance .dt-ico{
  width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2;
}
.dt-provenance-mls{ background:rgba(18,183,106,.10); color:#0d9456; }
.dt-provenance-fsbo{ background:rgba(247,144,9,.12); color:#c27400; }
.dt-provenance-ai{ background:rgba(107,114,128,.10); color:#6b7280; }

.dt-mls{
  font-size:11px; color:var(--text-muted,#888);
}

/* Save button on listing cards (chat + detail) */
.dt-save-btn{
  background:none; border:none; cursor:pointer;
  padding:4px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  transition:background .15s, transform .15s;
}
.dt-save-btn:hover{ background:rgba(240,68,56,.08); }
.dt-save-btn:active{ transform:scale(.9); }
.dt-save-btn svg{
  width:20px; height:20px; fill:none; stroke:var(--text-muted,#888);
  stroke-width:2; transition:fill .2s, stroke .2s;
}
.dt-save-btn.saved svg{
  fill:#f04438; stroke:#f04438;
}

/* ── Collab FAB (Floating Action Button) ── */

.collab-fab{
  position:fixed; bottom:90px; right:24px; z-index:998;
  width:52px; height:52px; border-radius:50%;
  background:var(--brand,#0f5fff); color:#fff;
  border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 16px rgba(15,95,255,.35);
  transition:transform .2s, box-shadow .2s;
}
.collab-fab:hover{ transform:scale(1.08); box-shadow:0 6px 24px rgba(15,95,255,.45); }
.collab-fab-ico{
  width:24px; height:24px; fill:none; stroke:#fff; stroke-width:2;
}
.collab-fab-badge{
  position:absolute; top:-4px; right:-4px;
  min-width:20px; height:20px; padding:0 5px;
  border-radius:10px; background:var(--red,#f04438);
  color:#fff; font-size:11px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  line-height:1;
}

/* ── Collab Panel ── */

.collab-backdrop{
  position:fixed; inset:0; z-index:1050;
  background:rgba(0,0,0,.35); opacity:0;
  pointer-events:none; transition:opacity .25s;
}
.collab-backdrop.active{
  opacity:1; pointer-events:auto;
}

.collab-panel{
  position:fixed; top:0; right:0; bottom:0;
  width:420px; max-width:100vw; z-index:1051;
  background:var(--card,#fff);
  box-shadow:-8px 0 32px rgba(0,0,0,.15);
  display:flex; flex-direction:column;
  transform:translateX(100%);
  transition:transform .3s cubic-bezier(.4,0,.2,1);
}
.collab-panel.open{
  transform:translateX(0);
}

/* Header */
.collab-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px 12px; border-bottom:1px solid var(--border,#eee);
}
.collab-title{
  font-family:'DM Serif Display',serif; font-size:20px; color:var(--text,#111);
}
.collab-close{
  background:none; border:none; cursor:pointer; padding:6px; border-radius:8px;
  transition:background .15s;
}
.collab-close:hover{ background:rgba(0,0,0,.06); }
.collab-close svg{
  width:20px; height:20px; stroke:var(--text-muted,#666); stroke-width:2.5; fill:none;
}

/* Partner Switcher */
.collab-partner-switcher{
  display:flex; gap:4px; padding:10px 20px;
  border-bottom:1px solid var(--border,#eee);
}
.collab-partner-btn{
  flex:1; display:flex; align-items:center; justify-content:center; gap:6px;
  padding:8px 12px; border:1.5px solid var(--border,#ddd);
  border-radius:10px; background:transparent; cursor:pointer;
  font-size:13px; font-weight:500; color:var(--text-muted,#666);
  transition:all .2s;
}
.collab-partner-btn.active{
  border-color:var(--brand,#0f5fff); background:rgba(15,95,255,.06);
  color:var(--brand,#0f5fff); font-weight:600;
}
.collab-partner-dot{
  width:8px; height:8px; border-radius:50%; flex-shrink:0;
}
.dot-a{ background:#0f5fff; }
.dot-b{ background:#7c3aed; }
.collab-partner-name{
  outline:none; min-width:40px;
}
.collab-partner-name:focus{
  border-bottom:1px dashed var(--brand,#0f5fff);
}

/* Tabs */
.collab-tabs{
  display:flex; border-bottom:1px solid var(--border,#eee);
}
.collab-tab{
  flex:1; padding:10px 8px; border:none; background:none;
  font-size:13px; font-weight:500; color:var(--text-muted,#888);
  cursor:pointer; border-bottom:2px solid transparent;
  transition:all .2s;
}
.collab-tab.active{
  color:var(--brand,#0f5fff); border-bottom-color:var(--brand,#0f5fff);
  font-weight:600;
}
.collab-tab:hover:not(.active){
  color:var(--text,#333); background:rgba(0,0,0,.02);
}

/* Body */
.collab-body{
  flex:1; overflow-y:auto; padding:16px 20px;
  -webkit-overflow-scrolling:touch;
}

/* Empty state */
.collab-empty{
  text-align:center; padding:40px 20px; color:var(--text-muted,#888);
}
.collab-empty-ico{
  width:48px; height:48px; fill:none; stroke:var(--text-muted,#ccc);
  stroke-width:1.5; margin-bottom:12px;
}
.collab-empty-title{ font-size:15px; font-weight:600; margin-bottom:6px; color:var(--text,#333); }
.collab-empty-hint{ font-size:13px; line-height:1.5; }

/* ── Saved Cards ── */

.collab-cards{ display:flex; flex-direction:column; gap:12px; }

.collab-card{
  display:flex; gap:8px;
  background:var(--card,#fff);
  border:1px solid var(--border,#eee);
  border-radius:12px; padding:12px;
  transition:box-shadow .2s, transform .15s;
  position:relative;
}
.collab-card:hover{ box-shadow:0 2px 12px rgba(0,0,0,.08); }
.collab-card.dragging{
  opacity:.5; box-shadow:0 8px 24px rgba(0,0,0,.15);
}
.collab-card.drag-over{
  border-color:var(--brand,#0f5fff);
  box-shadow:0 0 0 2px rgba(15,95,255,.2);
}
.collab-card-placeholder{
  border:2px dashed var(--border,#ccc); border-radius:12px;
  background:rgba(15,95,255,.04);
}

/* Drag grip */
.collab-card-grip{
  display:flex; flex-direction:column; align-items:center;
  gap:2px; padding:4px 2px; cursor:grab; flex-shrink:0;
  user-select:none; -webkit-user-select:none;
}
.collab-card-grip:active{ cursor:grabbing; }
.collab-rank-num{
  font-size:12px; font-weight:700; color:var(--brand,#0f5fff);
  background:rgba(15,95,255,.08); border-radius:6px;
  width:22px; height:22px; display:flex; align-items:center;
  justify-content:center; line-height:1;
}
.collab-grip-ico{
  width:14px; height:14px; fill:var(--text-muted,#aaa);
}

/* Card body */
.collab-card-body{ flex:1; min-width:0; }
a.collab-card-top{ display:flex; gap:10px; margin-bottom:8px; text-decoration:none; color:inherit; }
.collab-card-img{
  width:72px; height:54px; border-radius:8px;
  object-fit:cover; flex-shrink:0;
}
.collab-card-info{ flex:1; min-width:0; }
.collab-card-price{ font-size:15px; font-weight:700; color:var(--text,#111); }
.collab-card-details{ font-size:12px; color:var(--text-muted,#666); margin-top:2px; }
.collab-card-addr{
  font-size:12px; color:var(--text-muted,#888); margin-top:2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* Reactions */
.collab-reactions{
  display:flex; gap:6px; align-items:center; margin-bottom:8px;
}
.collab-react-btn{
  display:flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:50%;
  border:1.5px solid var(--border,#ddd); background:transparent;
  cursor:pointer; transition:all .2s;
}
.collab-react-btn svg{
  width:16px; height:16px; fill:none; stroke:var(--text-muted,#999);
  stroke-width:2; transition:all .2s;
}
.collab-react-btn:hover{ border-color:var(--text-muted,#999); }

.react-love.active{
  border-color:#f04438; background:rgba(240,68,56,.08);
}
.react-love.active svg{ fill:#f04438; stroke:#f04438; }

.react-maybe.active{
  border-color:#f79009; background:rgba(247,144,9,.08);
}
.react-maybe.active svg{ stroke:#f79009; fill:rgba(247,144,9,.15); }

.react-pass.active{
  border-color:#6b7280; background:rgba(107,114,128,.08);
}
.react-pass.active svg{ stroke:#6b7280; }

.collab-other-reaction{
  font-size:14px; margin-left:4px; opacity:.7;
}

/* Notes */
.collab-note-wrap{ position:relative; margin-bottom:4px; }
.collab-note-input{
  width:100%; border:1px solid var(--border,#ddd);
  border-radius:8px; padding:6px 8px; font-size:12px;
  resize:none; height:36px; line-height:1.4;
  font-family:'DM Sans',sans-serif;
  color:var(--text,#333); background:transparent;
  transition:border-color .2s;
}
.collab-note-input:focus{
  outline:none; border-color:var(--brand,#0f5fff);
}
.collab-note-counter{
  position:absolute; bottom:4px; right:8px;
  font-size:10px; color:var(--text-muted,#aaa);
}

/* Remove button */
.collab-remove-btn{
  position:absolute; top:8px; right:8px;
  background:none; border:none; cursor:pointer; padding:4px;
  border-radius:6px; opacity:.4; transition:opacity .2s, background .15s;
}
.collab-remove-btn:hover{ opacity:1; background:rgba(240,68,56,.08); }
.collab-remove-btn svg{
  width:14px; height:14px; fill:none; stroke:var(--red,#e74c3c); stroke-width:2;
}

/* ── Rankings Tab ── */

.collab-compare-table{
  display:flex; flex-direction:column; gap:0;
  border:1px solid var(--border,#eee); border-radius:12px;
  overflow:hidden;
}
.collab-compare-header{
  display:grid; grid-template-columns:1fr 60px 60px 50px;
  background:rgba(0,0,0,.03); padding:8px 12px;
  font-size:11px; font-weight:600; color:var(--text-muted,#888);
  text-transform:uppercase; letter-spacing:.3px;
}
.collab-compare-row{
  display:grid; grid-template-columns:1fr 60px 60px 50px;
  align-items:center; padding:10px 12px;
  border-top:1px solid var(--border,#eee);
  transition:background .15s;
}
.collab-compare-row.match-green{ background:rgba(18,183,106,.04); }
.collab-compare-row.match-amber{ background:rgba(247,144,9,.03); }
.collab-compare-row.match-red{ background:rgba(240,68,56,.03); }

.collab-compare-cell{ font-size:13px; }
.cell-rank{ text-align:center; font-weight:600; }
.cell-match{ text-align:center; }

.collab-mini-card{ display:flex; gap:8px; align-items:center; }
.collab-mini-img{
  width:40px; height:30px; border-radius:6px; object-fit:cover; flex-shrink:0;
}
.collab-mini-price{ font-size:13px; font-weight:600; color:var(--text,#111); }
.collab-mini-addr{
  font-size:11px; color:var(--text-muted,#888);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:140px;
}

.match-ico{ width:18px; height:18px; fill:none; stroke-width:2.5; }
.match-ico-green{ stroke:#12b76a; }
.match-ico-amber{ stroke:#f79009; }
.match-ico-red{ stroke:#f04438; }

/* ── Consensus Tab ── */

.collab-consensus{ display:flex; flex-direction:column; gap:12px; }
.collab-consensus-title{
  font-family:'DM Serif Display',serif; font-size:17px;
  color:var(--text,#111); margin-bottom:4px;
}
.collab-consensus-card{
  display:flex; gap:12px;
  background:rgba(18,183,106,.04); border:1px solid rgba(18,183,106,.15);
  border-radius:12px; padding:12px;
}
.collab-consensus-img{
  width:80px; height:60px; border-radius:8px; object-fit:cover; flex-shrink:0;
}
.collab-consensus-info{ flex:1; min-width:0; }
.collab-consensus-notes{ margin-top:6px; display:flex; flex-direction:column; gap:4px; }
.collab-consensus-note{
  display:flex; align-items:start; gap:6px;
  font-size:12px; color:var(--text-muted,#666);
}

/* ── Co-Buyer Lead Form ── */

.collab-cobuyer-form{
  margin-top:20px; padding:20px;
  background:rgba(15,95,255,.03); border:1px solid rgba(15,95,255,.12);
  border-radius:14px;
}
.collab-cobuyer-title{
  font-family:'DM Serif Display',serif; font-size:17px;
  color:var(--text,#111); margin-bottom:4px;
}
.collab-cobuyer-sub{
  font-size:13px; color:var(--text-muted,#666); margin-bottom:16px;
}
.collab-cobuyer-section{ margin-bottom:14px; }
.collab-cobuyer-label{
  display:flex; align-items:center; gap:6px;
  font-size:13px; font-weight:600; color:var(--text,#222);
  margin-bottom:8px;
}
.collab-cobuyer-row{ display:flex; gap:8px; margin-bottom:8px; }
.collab-cobuyer-row .collab-input{ flex:1; margin-bottom:0; }

.collab-input{
  width:100%; padding:9px 12px; border:1px solid var(--border,#ddd);
  border-radius:10px; font-size:14px; font-family:'DM Sans',sans-serif;
  color:var(--text,#333); background:var(--card,#fff);
  transition:border-color .2s;
  margin-bottom:8px;
}
.collab-input:focus{
  outline:none; border-color:var(--brand,#0f5fff);
  box-shadow:0 0 0 3px rgba(15,95,255,.1);
}

.collab-cobuyer-submit{
  width:100%; padding:12px; border:none; border-radius:12px;
  background:var(--brand,#0f5fff); color:#fff;
  font-size:15px; font-weight:600; cursor:pointer;
  font-family:'DM Sans',sans-serif;
  transition:background .2s;
}
.collab-cobuyer-submit:hover{ background:#0d4ed4; }

.collab-cobuyer-status{
  text-align:center; font-size:13px; margin-top:8px;
  min-height:20px;
}
.collab-cobuyer-status.success{ color:var(--green,#12b76a); }
.collab-cobuyer-status.error{ color:var(--red,#f04438); }

/* ── Footer (Share) ── */

.collab-footer{
  padding:12px 20px; border-top:1px solid var(--border,#eee);
}
.collab-share-btn{
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; padding:10px; border:1.5px solid var(--brand,#0f5fff);
  border-radius:12px; background:transparent;
  color:var(--brand,#0f5fff); font-size:14px; font-weight:600;
  cursor:pointer; font-family:'DM Sans',sans-serif;
  transition:all .2s;
}
.collab-share-btn:hover{
  background:rgba(15,95,255,.06);
}
.collab-share-btn svg{
  width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2;
}

/* ── Toast ── */

.collab-toast{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--text,#111); color:#fff;
  padding:10px 20px; border-radius:10px;
  font-size:13px; font-weight:500;
  opacity:0; transition:opacity .25s, transform .25s;
  z-index:9999;
}
.collab-toast.show{
  opacity:1; transform:translateX(-50%) translateY(0);
}

/* ── Floating heart on listing detail gallery ── */

.listing-save-heart{
  position:absolute; top:12px; right:12px; z-index:10;
  width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,.9); border:none;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 8px rgba(0,0,0,.15);
  backdrop-filter:blur(6px);
  transition:transform .2s, background .15s;
}
.listing-save-heart:hover{ transform:scale(1.1); background:rgba(255,255,255,.95); }
.listing-save-heart:active{ transform:scale(.9); }
.listing-save-heart svg{
  width:22px; height:22px; fill:none; stroke:#666; stroke-width:2;
  transition:fill .25s, stroke .25s;
}
.listing-save-heart.saved svg{
  fill:#f04438; stroke:#f04438;
}
/* CTA save button saved state */
.listing-cta-btn.saved{
  border-color:#f04438; color:#f04438;
}
.listing-cta-btn.saved svg{ fill:#f04438; stroke:#f04438; }

/* Ensure gallery containers are position:relative for absolute heart */
.listing-gallery-grid,
.listing-gallery-single,
.listing-gallery-carousel{ position:relative; }

[data-theme="dark"] .listing-save-heart{
  background:rgba(0,0,0,.6); box-shadow:0 2px 8px rgba(0,0,0,.4);
}
[data-theme="dark"] .listing-save-heart svg{ stroke:#ccc; }
[data-theme="dark"] .listing-save-heart.saved svg{ fill:#f04438; stroke:#f04438; }

/* ── Save button on chat listing cards ── */

.chat-listing-card{
  position:relative;
}
.chat-listing-save{
  position:absolute; top:6px; right:6px;
  width:30px; height:30px; border-radius:50%;
  background:rgba(255,255,255,.85); border:none;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:background .15s, transform .15s; z-index:2;
  backdrop-filter:blur(4px);
}
.chat-listing-save:hover{ background:rgba(255,255,255,.95); transform:scale(1.1); }
.chat-listing-save:active{ transform:scale(.9); }
.chat-listing-save svg{
  width:16px; height:16px; fill:none; stroke:#666; stroke-width:2;
  transition:fill .2s, stroke .2s;
}
.chat-listing-save.saved svg{
  fill:#f04438; stroke:#f04438;
}

/* ── Dark Mode ── */

[data-theme="dark"] .dt-status-pill.dt-green{ background:rgba(18,183,106,.18); color:#34d399; }
[data-theme="dark"] .dt-status-pill.dt-amber{ background:rgba(247,144,9,.18); color:#fbbf24; }
[data-theme="dark"] .dt-status-pill.dt-red{ background:rgba(240,68,56,.18); color:#fb7185; }
[data-theme="dark"] .dt-status-pill.dt-gray{ background:rgba(156,163,175,.18); color:#9ca3af; }

[data-theme="dark"] .dt-dom-badge.dt-green{ background:rgba(18,183,106,.15); color:#34d399; }
[data-theme="dark"] .dt-dom-badge.dt-amber{ background:rgba(247,144,9,.15); color:#fbbf24; }
[data-theme="dark"] .dt-dom-badge.dt-red{ background:rgba(240,68,56,.15); color:#fb7185; }
[data-theme="dark"] .dt-dom-badge-lg.dt-green{ background:rgba(18,183,106,.15); color:#34d399; }
[data-theme="dark"] .dt-dom-badge-lg.dt-amber{ background:rgba(247,144,9,.15); color:#fbbf24; }
[data-theme="dark"] .dt-dom-badge-lg.dt-red{ background:rgba(240,68,56,.15); color:#fb7185; }

[data-theme="dark"] .dt-provenance-mls{ background:rgba(18,183,106,.15); color:#34d399; }
[data-theme="dark"] .dt-provenance-fsbo{ background:rgba(247,144,9,.15); color:#fbbf24; }
[data-theme="dark"] .dt-provenance-ai{ background:rgba(156,163,175,.15); color:#9ca3af; }

[data-theme="dark"] .collab-panel{ background:var(--card,#1a1a2e); }
[data-theme="dark"] .collab-card{ background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.08); }
[data-theme="dark"] .collab-card:hover{ box-shadow:0 2px 12px rgba(0,0,0,.3); }
[data-theme="dark"] .collab-note-input{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.1); color:#e5e7eb; }
[data-theme="dark"] .collab-input{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.1); color:#e5e7eb; }
[data-theme="dark"] .collab-partner-btn{ border-color:rgba(255,255,255,.1); color:#9ca3af; }
[data-theme="dark"] .collab-partner-btn.active{ background:rgba(15,95,255,.12); }
[data-theme="dark"] .collab-compare-header{ background:rgba(255,255,255,.04); }
[data-theme="dark"] .collab-compare-table{ border-color:rgba(255,255,255,.08); }
[data-theme="dark"] .collab-compare-row{ border-color:rgba(255,255,255,.06); }
[data-theme="dark"] .collab-consensus-card{ background:rgba(18,183,106,.06); border-color:rgba(18,183,106,.15); }
[data-theme="dark"] .collab-cobuyer-form{ background:rgba(15,95,255,.06); border-color:rgba(15,95,255,.15); }
[data-theme="dark"] .collab-close svg{ stroke:#9ca3af; }
[data-theme="dark"] .collab-close:hover{ background:rgba(255,255,255,.06); }
[data-theme="dark"] .collab-tab:hover:not(.active){ background:rgba(255,255,255,.03); }
[data-theme="dark"] .chat-listing-save{ background:rgba(0,0,0,.6); }
[data-theme="dark"] .chat-listing-save svg{ stroke:#ccc; }
[data-theme="dark"] .collab-toast{ background:#e5e7eb; color:#111; }

/* ── Responsive ── */

@media(max-width:768px){
  .collab-panel{
    width:100vw;
  }
  .collab-fab{
    bottom:80px; right:16px;
    width:46px; height:46px;
  }
  .collab-fab-ico{ width:20px; height:20px; }
  .collab-fab-badge{ min-width:18px; height:18px; font-size:10px; }

  .collab-body{ padding:12px 16px; }
  .collab-header{ padding:14px 16px 10px; }
  .collab-footer{ padding:10px 16px; }

  .collab-compare-header,
  .collab-compare-row{
    grid-template-columns:1fr 50px 50px 40px;
    padding:8px;
  }
  .collab-mini-addr{ max-width:100px; }

  .listing-save-heart{
    width:40px; height:40px; top:10px; right:10px;
  }
  .listing-save-heart svg{ width:20px; height:20px; }
}

@media(max-width:480px){
  .collab-card{ padding:10px; gap:6px; }
  .collab-card-img{ width:60px; height:45px; border-radius:6px; }
  .collab-card-price{ font-size:14px; }
  .collab-card-details{ font-size:11px; }
  .collab-card-addr{ font-size:11px; }
  .collab-react-btn{ width:30px; height:30px; }
  .collab-react-btn svg{ width:14px; height:14px; }
  .collab-rank-num{ width:20px; height:20px; font-size:11px; }
  .collab-grip-ico{ width:12px; height:12px; }
  .collab-note-input{ font-size:11px; height:32px; }
  .collab-cobuyer-row{ flex-direction:column; gap:0; }
  .collab-partner-btn{ padding:6px 8px; font-size:12px; }
  .collab-tab{ font-size:12px; padding:8px 4px; }
  .collab-consensus-img{ width:64px; height:48px; }

  .collab-fab{ bottom:78px; right:12px; width:42px; height:42px; }
  .collab-fab-ico{ width:18px; height:18px; }
}