.screen:not(.active) { display: none; }
.screen {
  display: flex; flex-direction: column;
  height: calc(100vh - 56px - 64px);
  overflow-y: auto; padding-bottom: 20px;
}
#chat-screen {
  display: none; position: fixed; inset: 0; background-color: white;
  z-index: 50; flex-direction: column;
}
#login-screen {
  display: none; position: fixed; inset: 0; background-color: #f7f7f7;
  z-index: 100; justify-content: center; align-items: center;
}
#loading-screen {
  position: fixed; inset: 0; background-color: white; z-index: 200;
  display: flex; justify-content: center; align-items: center; flex-direction: column;
}
#tab-bar { position: fixed; bottom: 0; left: 0; right: 0; border-top: 1px solid #e5e7eb; z-index: 10; }
/* La testata (con il riquadro "Come funziona") sta sopra la barra del Saldo Karma (z-20) */
#app-header { position: sticky; top: 0; z-index: 30; }
#tab-bar .tab-item > div { position: relative; }
.unread-indicator { display: none; }

.modal-overlay {
  display: none; position: fixed; inset: 0; background-color: rgba(0, 0, 0, 0.6);
  z-index: 150; justify-content: center; align-items: center; padding: 1rem;
}
#lightbox { z-index: 300; background-color: rgba(0, 0, 0, 0.92); flex-direction: column; }
#lightbox img { max-width: 100%; max-height: 80%; object-fit: contain; }

.offer-thumb {
  width: 100%; height: 12rem; object-fit: cover; border-radius: .5rem;
  cursor: zoom-in; background: #f3f4f6; margin-bottom: .25rem;
}
.img-slot {
  position: relative; aspect-ratio: 1 / 1; border: 2px dashed #cbd5e1;
  border-radius: .75rem; overflow: hidden; background: #f8fafc;
}
.img-slot label {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 100%; height: 100%; cursor: pointer; color: #64748b; text-align: center; font-size: .75rem;
}
.img-slot img { width: 100%; height: 100%; object-fit: cover; }
.img-remove {
  position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 9999px;
  background: rgba(0,0,0,.65); color: #fff; font-size: 12px; line-height: 22px; text-align: center;
}
.field { margin-top: .25rem; display: block; width: 100%; padding: .5rem .75rem; border: 1px solid #d1d5db; border-radius: .375rem; background: #fff; }
#catalog-editor { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; }

/* ===== Selettore categoria ===== */
.cat-field {
  margin-top: .35rem; width: 100%; display: flex; align-items: center; gap: .75rem;
  padding: .7rem .85rem; background: #fff; border: 1px solid #d1d5db; border-radius: .75rem;
  text-align: left; transition: border-color .15s, box-shadow .15s;
}
.cat-field:hover { border-color: #16a34a; }
.cat-field:focus { outline: none; border-color: #16a34a; box-shadow: 0 0 0 3px rgba(22,163,74,.15); }
.cat-field-empty { border-style: dashed; }
.cat-emoji {
  flex: 0 0 2.25rem; height: 2.25rem; display: flex; align-items: center; justify-content: center;
  background: #f0fdf4; border-radius: .6rem; font-size: 1.15rem;
}
.cat-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cat-label { font-weight: 600; color: #111827; font-size: .95rem; line-height: 1.25; }
.cat-sub { color: #6b7280; font-size: .75rem; margin-top: .1rem; }
.cat-placeholder { color: #6b7280; font-size: .95rem; }
.cat-change { flex: 0 0 auto; color: #16a34a; font-size: .8rem; font-weight: 600; }

.cat-hint { font-size: .75rem; color: #6b7280; margin-bottom: .35rem; }
.cat-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.cat-chip {
  font-size: .8rem; padding: .35rem .7rem; border-radius: 9999px; background: #fff;
  border: 1px solid #d1d5db; color: #374151; transition: all .15s;
}
.cat-chip:hover { border-color: #16a34a; color: #15803d; }
.cat-chip-on { background: #16a34a; border-color: #16a34a; color: #fff; }
.cat-chip-on:hover { color: #fff; }

/* Pannello: dal basso su telefono, centrato su schermi grandi */
.sheet-overlay { align-items: flex-end; padding: 0; }
.sheet {
  width: 100%; max-width: 28rem; max-height: 85vh; display: flex; flex-direction: column;
  background: #fff; border-radius: 1rem 1rem 0 0; box-shadow: 0 -10px 30px rgba(0,0,0,.15);
  animation: sheet-up .2s ease-out;
}
@media (min-width: 640px) {
  .sheet-overlay { align-items: center; padding: 1rem; }
  .sheet { border-radius: 1rem; max-height: 80vh; }
}
@keyframes sheet-up { from { transform: translateY(24px); opacity: .6; } to { transform: none; opacity: 1; } }
.sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1rem .5rem; }
.sheet-head h3 { font-size: 1.1rem; font-weight: 700; color: #111827; }
.sheet-close { width: 2rem; height: 2rem; border-radius: 9999px; color: #6b7280; }
.sheet-close:hover { background: #f3f4f6; }
.sheet-search { padding: 0 1rem .75rem; border-bottom: 1px solid #f3f4f6; }
.sheet-search input {
  width: 100%; padding: .6rem .85rem; border: 1px solid #e5e7eb; border-radius: .6rem;
  background: #f9fafb; font-size: .9rem;
}
.sheet-search input:focus { outline: none; border-color: #16a34a; background: #fff; }
.sheet-list { overflow-y: auto; padding-bottom: 1rem; -webkit-overflow-scrolling: touch; }

.cat-group + .cat-group { margin-top: .25rem; }
.cat-group-last { border-top: 1px solid #e5e7eb; margin-top: .5rem; padding-top: .25rem; }
.cat-group-head {
  position: sticky; top: 0; z-index: 1; background: #f9fafb; color: #4b5563;
  font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: .5rem 1rem; border-bottom: 1px solid #f3f4f6;
}
.cat-row {
  width: 100%; display: flex; align-items: center; gap: .75rem; text-align: left;
  padding: .7rem 1rem; border-bottom: 1px solid #f3f4f6; background: #fff;
}
.cat-row:hover { background: #f0fdf4; }
.cat-row-label { flex: 1; color: #1f2937; font-size: .92rem; }
.cat-row-range { color: #9ca3af; font-size: .75rem; white-space: nowrap; }
.cat-row-check { width: 1rem; color: #16a34a; font-weight: 700; text-align: right; }
.cat-row-on { background: #f0fdf4; }
.cat-row-on .cat-row-label { color: #15803d; font-weight: 600; }
.cat-empty { padding: 1rem; color: #6b7280; font-size: .9rem; }
/* Il selettore non dipende dagli stili di base: azzera bordi e caratteri dei pulsanti */
.cat-field, .cat-chip, .cat-row, .sheet-close { font-family: inherit; cursor: pointer; -webkit-appearance: none; appearance: none; }
.cat-row { border: 0; border-bottom: 1px solid #f3f4f6; }
.sheet-close { border: 0; background: transparent; font-size: 1rem; }
.sheet, .sheet input, .cat-hint, .cat-group-head { font-family: inherit; }
body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }

/* ===== Chat ===== */
#chat-screen { background: #e5e7eb; justify-content: center; }
.chat-wrap {
  width: 100%; max-width: 28rem; height: 100%; display: flex; flex-direction: column;
  background: #f4f7f5; box-shadow: 0 0 24px rgba(0,0,0,.08);
}
.chat-head {
  display: flex; align-items: center; gap: .65rem; padding: .65rem .75rem;
  background: #fff; border-bottom: 1px solid #e5e7eb; position: sticky; top: 0; z-index: 2;
  padding-top: calc(.65rem + env(safe-area-inset-top));
}
.chat-back {
  width: 2.25rem; height: 2.25rem; display: flex; align-items: center; justify-content: center;
  border: 0; background: transparent; border-radius: 9999px; color: #374151; cursor: pointer;
}
.chat-back:hover { background: #f3f4f6; }
.chat-avatar {
  flex: 0 0 2.5rem; height: 2.5rem; border-radius: 9999px; background: #16a34a; color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.05rem;
}
.chat-head-text { min-width: 0; flex: 1; }
.chat-name { font-size: 1rem; font-weight: 700; color: #111827; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-offer { font-size: .78rem; color: #16a34a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.chat-messages { flex: 1; overflow-y: auto; padding: .75rem .9rem 1rem; display: flex; flex-direction: column; -webkit-overflow-scrolling: touch; }
.chat-day { display: flex; justify-content: center; margin: .9rem 0 .5rem; }
.chat-day span {
  font-size: .7rem; font-weight: 600; color: #4b5563; background: #fff; padding: .2rem .7rem;
  border-radius: 9999px; box-shadow: 0 1px 2px rgba(0,0,0,.06); text-transform: capitalize;
}
.msg-row { display: flex; margin-top: .55rem; }
.msg-row.msg-cont { margin-top: .15rem; }
.msg-me { justify-content: flex-end; }
.msg-them { justify-content: flex-start; }
.msg-bubble {
  max-width: 78%; padding: .5rem .75rem .35rem; border-radius: 1.1rem; position: relative;
  box-shadow: 0 1px 1.5px rgba(0,0,0,.08); display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0 .5rem;
}
.msg-me .msg-bubble { background: #16a34a; color: #fff; border-bottom-right-radius: .35rem; }
.msg-them .msg-bubble { background: #fff; color: #111827; border-bottom-left-radius: .35rem; }
.msg-me.msg-cont .msg-bubble { border-top-right-radius: .35rem; }
.msg-them.msg-cont .msg-bubble { border-top-left-radius: .35rem; }
.msg-text { font-size: .93rem; line-height: 1.35; white-space: pre-wrap; word-break: break-word; }
.msg-time { font-size: .66rem; margin-left: auto; padding-bottom: .1rem; opacity: .75; white-space: nowrap; }
.chat-empty { margin: auto; text-align: center; color: #6b7280; font-size: .85rem; max-width: 18rem; line-height: 1.5; }
.chat-empty-title { font-size: 1rem; font-weight: 700; color: #111827; margin-bottom: .35rem; }

.chat-composer {
  display: flex; align-items: center; gap: .5rem; padding: .6rem .75rem;
  background: #fff; border-top: 1px solid #e5e7eb;
  padding-bottom: calc(.6rem + env(safe-area-inset-bottom));
}
.chat-input {
  flex: 1; min-width: 0; padding: .65rem 1rem; border: 1px solid #e5e7eb; border-radius: 9999px;
  background: #f9fafb; font-size: .95rem; font-family: inherit;
}
.chat-input:focus { outline: none; border-color: #16a34a; background: #fff; }
.chat-send {
  flex: 0 0 2.75rem; height: 2.75rem; border-radius: 9999px; border: 0; cursor: pointer;
  background: #16a34a; color: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(22,163,74,.35);
}
.chat-send:hover { background: #15803d; }

/* ===== Foto: pulsanti fotocamera / galleria ===== */
.foto-actions { display: flex; gap: .5rem; margin-bottom: .6rem; }
.foto-btn {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .6rem .75rem; border-radius: .65rem; border: 1px solid #d1d5db; background: #fff;
  color: #374151; font-size: .88rem; font-weight: 600; cursor: pointer; user-select: none;
}
.foto-btn:hover { border-color: #16a34a; color: #15803d; }
.foto-btn-primary { background: #16a34a; border-color: #16a34a; color: #fff; }
.foto-btn-primary:hover { background: #15803d; color: #fff; }
.foto-btn .hidden, .foto-actions input[type=file] { display: none; }
.foto-loading { font-size: 1.4rem; color: #16a34a; animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: .3; } }
/* la colonna della chat sta al centro dello schermo, allineata all'app */
#chat-screen { flex-direction: row; justify-content: center; align-items: stretch; }
.img-slot input[type=file] { display: none; }

/* ===== Ricerca e filtri in home ===== */
.search-box { position: relative; display: flex; align-items: center; }
.search-icon { position: absolute; left: .85rem; color: #9ca3af; pointer-events: none; }
.search-box input {
  width: 100%; padding: .7rem 2.4rem .7rem 2.5rem; border: 1px solid #e5e7eb; border-radius: 9999px;
  background: #f9fafb; font-size: .95rem; font-family: inherit; -webkit-appearance: none; appearance: none;
}
.search-box input:focus { outline: none; border-color: #16a34a; background: #fff; box-shadow: 0 0 0 3px rgba(22,163,74,.12); }
.search-box input::-webkit-search-cancel-button { display: none; }
.search-clear { position: absolute; right: .55rem; width: 1.8rem; height: 1.8rem; border: 0; border-radius: 9999px; background: #e5e7eb; color: #4b5563; font-size: .75rem; cursor: pointer; }
.filter-chips { display: flex; gap: .4rem; overflow-x: auto; padding: .7rem 0 .2rem; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.filter-chips::-webkit-scrollbar { display: none; }
.filter-chip {
  flex: 0 0 auto; font-size: .8rem; padding: .35rem .75rem; border-radius: 9999px; white-space: nowrap;
  background: #fff; border: 1px solid #e5e7eb; color: #374151; cursor: pointer; font-family: inherit;
}
.filter-chip:hover { border-color: #16a34a; }
.filter-chip-on { background: #16a34a; border-color: #16a34a; color: #fff; }
.search-status { font-size: .75rem; color: #6b7280; margin-top: .35rem; min-height: 1rem; }
.offer-place { color: #15803d; }

.zone-banner {
  width: 100%; display: flex; align-items: center; gap: .5rem; text-align: left; margin-top: .6rem;
  padding: .65rem .8rem; border-radius: .75rem; background: #f0fdf4; border: 1px solid #bbf7d0;
  color: #166534; font-size: .85rem; cursor: pointer; font-family: inherit;
}
.zone-banner-go { margin-left: auto; font-size: 1.2rem; }
.zone-card { display: flex; align-items: center; justify-content: space-between; padding: .75rem; border: 1px solid #e5e7eb; border-radius: .75rem; background: #fff; text-align: left; }
.zone-change { font-size: .8rem; font-weight: 600; color: #16a34a; background: none; border: 0; cursor: pointer; }

/* finestra zona */
.zone-intro { padding: 0 1rem .75rem; font-size: .85rem; color: #4b5563; }
.zone-gps-wrap { padding: .6rem 1rem 0; }
.zone-gps {
  width: 100%; padding: .6rem; border-radius: .6rem; border: 1px dashed #16a34a; background: #f0fdf4;
  color: #15803d; font-size: .85rem; font-weight: 600; cursor: pointer; font-family: inherit;
}
.zone-msg { padding: .4rem 1rem 0; font-size: .8rem; color: #6b7280; min-height: 1.2rem; }
.zone-row {
  width: 100%; display: flex; flex-direction: column; align-items: flex-start; text-align: left;
  padding: .65rem 1rem; border: 0; border-bottom: 1px solid #f3f4f6; background: #fff; cursor: pointer; font-family: inherit;
}
.zone-row:hover { background: #f0fdf4; }
.zone-name { font-size: .95rem; font-weight: 600; color: #111827; }
.zone-detail { font-size: .75rem; color: #6b7280; }
.zone-credit { padding: .5rem 1rem 0; font-size: .68rem; color: #9ca3af; }
.zone-credit a { color: #6b7280; text-decoration: underline; }
.zone-later { margin: .5rem 1rem 1rem; padding: .55rem; border: 0; background: none; color: #6b7280; font-size: .85rem; cursor: pointer; font-family: inherit; }

/* "hidden" deve vincere sempre, anche sugli elementi a cui questo file assegna un display */
/* ===== Fotocamera integrata ===== */
.camera-modal { position: fixed; inset: 0; z-index: 80; background: #000; display: flex; align-items: center; justify-content: center; }
.camera-modal video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.camera-top { position: absolute; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center;
  padding: max(12px, env(safe-area-inset-top)) 16px 12px; }
.camera-bottom { position: absolute; bottom: 0; left: 0; right: 0; display: flex; justify-content: center;
  padding: 20px 16px max(28px, env(safe-area-inset-bottom)); }
.camera-round { width: 44px; height: 44px; border-radius: 50%; background: rgba(0,0,0,.45); color: #fff; font-size: 1.2rem;
  border: 1px solid rgba(255,255,255,.35); }
.camera-count { color: #fff; font-size: .85rem; background: rgba(0,0,0,.45); padding: .3rem .7rem; border-radius: 999px; }
.camera-shutter { width: 74px; height: 74px; border-radius: 50%; background: #fff; border: 5px solid #16a34a;
  box-shadow: 0 0 0 3px rgba(255,255,255,.6); transition: transform .1s; }
.camera-shutter:active { transform: scale(.92); }
.camera-shutter:disabled { opacity: .4; }
.camera-msg { position: absolute; left: 16px; right: 16px; top: 40%; color: #fff; text-align: center; font-size: .95rem; line-height: 1.4; }
.camera-preview { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.camera-side { flex: 1; display: flex; justify-content: flex-end; align-items: center; }
.camera-bottom { align-items: center; }
.camera-done { color: #fff; background: #16a34a; border: 0; border-radius: 999px; padding: .55rem 1.1rem; font-weight: 700; font-size: .95rem; }
.camera-panel { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.78); color: #fff; text-align: center;
  padding: 16px 16px max(22px, env(safe-area-inset-bottom)); }
.camera-panel-title { font-size: 1rem; font-weight: 600; margin-bottom: 12px; }
.camera-panel-row { display: flex; gap: 10px; justify-content: center; }
.camera-btn { flex: 1; max-width: 220px; min-height: 48px; border-radius: 12px; font-weight: 700; font-size: .95rem; padding: .6rem .8rem; }
.camera-btn-ok { background: #16a34a; color: #fff; border: 0; }
.camera-btn-ghost { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.7); }
.camera-btn:disabled { opacity: .5; }
.camera-thumbs { display: flex; gap: 8px; justify-content: center; margin-bottom: 10px; }
.camera-thumbs img, .camera-thumbs span { width: 56px; height: 56px; border-radius: 8px; object-fit: cover; }
.camera-thumbs span { border: 1.5px dashed rgba(255,255,255,.5); }
.camera-flash { animation: camflash .25s; }
@keyframes camflash { 0% { filter: brightness(2.5); } 100% { filter: none; } }

/* ===== Zona dell'annuncio ===== */
.offer-zone { margin-top: .4rem; font-size: .8rem; font-weight: 600; color: #166534; }
.offer-zone-km { font-weight: 500; color: #4b5563; }
.offer-zone-none { color: #9ca3af; font-weight: 500; }
.offer-zone-link { color: #6b7280; font-weight: 500; text-decoration: underline; background: none; border: 0; padding: 0; font-size: inherit; text-align: left; }
.publish-zone { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: 1rem; padding: .6rem .75rem;
  border-radius: .5rem; background: #f0fdf4; border: 1px solid #bbf7d0; font-size: .82rem; color: #166534; }
.publish-zone button { flex-shrink: 0; font-weight: 600; text-decoration: underline; color: #15803d; background: none; border: 0; }
.publish-zone.publish-zone-missing { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.publish-zone.publish-zone-missing button { color: #b45309; }

/* ===== Contatori caratteri (titolo / descrizione) ===== */
.text-count { text-align: right; font-size: .72rem; color: #9ca3af; margin-top: .2rem; }
.text-count.text-count-warn { color: #b45309; font-weight: 600; }

/* ===== Invito "Installa Rikeka" ===== */
.install-banner { display: flex; align-items: center; gap: .6rem; margin-top: .75rem; padding: .6rem .7rem; border-radius: 12px;
  background: #f0fdf4; border: 1px solid #bbf7d0; }
.install-icon { font-size: 1.3rem; }
.install-text { flex: 1; text-align: left; font-size: .82rem; color: #166534; line-height: 1.3; background: none; border: 0; padding: 0; }
.install-x { color: #6b7280; font-size: .9rem; padding: .2rem .4rem; background: none; border: 0; }
.install-steps { list-style: decimal; margin-left: 1.2rem; font-size: .9rem; color: #374151; }
.install-steps li { margin-bottom: .7rem; line-height: 1.4; }
.install-share { display: inline-block; width: 20px; height: 20px; vertical-align: -4px; color: #2563eb; margin-left: 2px; }
.install-hint { font-size: .78rem; color: #6b7280; }

/* ===== "Come funziona" in testata ===== */
.info-btn { width: 24px; height: 24px; margin-left: 8px; border-radius: 50%; border: 1.5px solid #cbd5e1; color: #64748b; background: #f8fafc;
  font-weight: 700; font-size: .8rem; line-height: 1; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.info-btn:hover, .info-btn[aria-expanded="true"] { background: #475569; border-color: #475569; color: #fff; }
.info-btn.info-new { animation: infopulse 1.8s ease-in-out 4; }
@keyframes infopulse { 0%,100% { box-shadow: 0 0 0 0 rgba(71,85,105,.4); } 50% { box-shadow: 0 0 0 7px rgba(71,85,105,0); } }
.info-pop { position: absolute; top: calc(100% - 6px); left: 12px; right: 12px; max-width: 360px; z-index: 60;
  background: #fff; border: 1px solid #bbf7d0; border-radius: 14px; padding: 14px 16px 10px;
  box-shadow: 0 12px 30px rgba(0,0,0,.18); font-size: .86rem; color: #374151; line-height: 1.45; }
.info-pop::before { content: ""; position: absolute; top: -7px; left: var(--freccia, 150px); width: 12px; height: 12px; background: #fff;
  border-left: 1px solid #bbf7d0; border-top: 1px solid #bbf7d0; transform: rotate(45deg); }
.info-pop p { margin: 0 0 .5rem; }
.info-pop ol { margin: 0 0 .5rem 1.1rem; padding: 0; list-style: decimal; }
.info-pop li { margin-bottom: .25rem; }
.info-title { font-weight: 700; color: #15803d; font-size: .95rem; }
.info-foot { color: #15803d; font-weight: 600; }
.info-bug { font-size: .78rem; color: #6b7280; margin-top: .25rem !important; }
.info-bug button { color: #374151; text-decoration: underline; background: none; border: 0; padding: 0; font-size: inherit; }
.info-close { display: block; margin-left: auto; font-size: .8rem; font-weight: 600; color: #16a34a; padding: .25rem .4rem; }

/* ===== Reputazione e giudizi ===== */
.rep { font-size: .72rem; color: #6b7280; font-weight: 500; white-space: nowrap; }
.chat-name .rep { font-size: .7rem; }
.rep-ok { color: #15803d; font-weight: 600; }
.rep-low { color: #b45309; font-weight: 600; }
.rep-new { color: #15803d; }
.fb-btn { display: flex; flex-direction: column; align-items: center; gap: .2rem; padding: .9rem .5rem; border-radius: .8rem;
  font-size: 1.6rem; font-weight: 600; border: 1.5px solid transparent; }
.fb-btn span { font-size: .85rem; }
.fb-pos { background: #dcfce7; color: #166534; border-color: #bbf7d0; }
.fb-pos:hover { background: #bbf7d0; }
.fb-neg { background: #fee2e2; color: #991b1b; border-color: #fecaca; }
.fb-neg:hover { background: #fecaca; }
.suspended-banner { margin-top: .6rem; padding: .6rem .75rem; border-radius: .6rem; background: #fef2f2; border: 1px solid #fecaca;
  color: #991b1b; font-size: .8rem; }
.adm-card { padding: .6rem .7rem; border-radius: .6rem; border: 1px solid #e5e7eb; background: #fff; font-size: .82rem; }
.adm-actions { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .45rem; }
.adm-btn { padding: .3rem .6rem; border-radius: .4rem; font-size: .75rem; font-weight: 600; border: 1px solid #d1d5db; background: #f9fafb; }
.adm-btn.ok { background: #16a34a; border-color: #16a34a; color: #fff; }
.adm-btn.warn { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }

/* ===== Segnalazioni e rimozioni ===== */
.report-options { display: flex; flex-direction: column; gap: .35rem; }
.report-options label { display: flex; align-items: center; gap: .55rem; padding: .55rem .7rem; border: 1px solid #e5e7eb;
  border-radius: .6rem; font-size: .88rem; color: #374151; cursor: pointer; }
.report-options label:has(input:checked) { border-color: #dc2626; background: #fef2f2; }
.report-options input { accent-color: #dc2626; }
.report-suspend { display: flex; align-items: center; gap: .5rem; margin-top: .6rem; font-size: .85rem; color: #991b1b; }
.admin-remove { margin-top: .5rem; width: 100%; padding: .45rem; border-radius: .5rem; font-size: .78rem; font-weight: 600;
  color: #fff; background: #374151; }
.admin-remove:hover { background: #111827; }

.hidden { display: none !important; }

/* ===== Annuncio in trattativa: leggibile, con barra gialla ===== */
.card-trattativa { border-left: 4px solid #f59e0b !important; background: #fffdf5 !important; }

/* ===== Riquadro scambio in cima alla chat ===== */
.chat-deal { padding: .7rem .9rem; border-bottom: 1px solid #e5e7eb; background: #fff; }
.deal-head { display: flex; align-items: baseline; gap: .5rem; min-width: 0; }
.deal-state { flex: 0 0 auto; font-size: .78rem; font-weight: 700; }
.deal-title { min-width: 0; font-size: .78rem; color: #6b7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.deal-text { font-size: .85rem; color: #374151; margin-top: .25rem; line-height: 1.35; }
.deal-actions { display: flex; gap: .5rem; margin-top: .55rem; flex-wrap: wrap; }
.deal-btn { flex: 1 1 auto; padding: .55rem .8rem; border-radius: .6rem; font-size: .85rem; font-weight: 600; cursor: pointer; font-family: inherit; border: 1px solid transparent; }
.deal-primary { background: #16a34a; color: #fff; }
.deal-primary:hover { background: #15803d; }
.deal-danger { background: #fff; color: #dc2626; border-color: #fecaca; }
.deal-ghost { background: #fff; color: #374151; border-color: #d1d5db; }
.deal-action { background: #f0fdf4; }
.deal-action .deal-state { color: #15803d; }
.deal-done { background: #ecfdf5; }
.deal-done .deal-state { color: #047857; }
.deal-off .deal-state, .deal-info .deal-state { color: #4b5563; }

/* messaggi automatici dello scambio */
.msg-system { display: flex; flex-direction: column; align-items: center; margin: .7rem 0 .2rem; }
.msg-system span:first-child {
  max-width: 85%; text-align: center; font-size: .78rem; color: #374151; background: #fef9c3;
  padding: .35rem .75rem; border-radius: .75rem; box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
.msg-system-time { font-size: .62rem; color: #9ca3af; margin-top: .15rem; }