/* ---------- Suggest a correction ---------- */
.edit-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.edit-chip {
  border: none;
  background: var(--brand-tint);
  color: var(--brand-text);
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  border-radius: 999px;
  padding: 6px 12px;
  cursor: pointer;
}
.edit-add { display: flex; gap: 8px; }
.edit-add input { flex: 1; min-width: 0; }
.pin-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.kind-options { border: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.kind-options legend { padding: 0; margin-bottom: 6px; font-size: 13px; }
.kind-options .suggest-check { align-items: flex-start; }
.correction-lines { margin: 6px 0; padding-left: 18px; font-size: 13px; }

footer {
  text-align: center;
  color: var(--text-muted);
  font-size: 12px;
  padding: 20px 16px 84px;
}

footer a { color: var(--brand-text); }

/* ---------- Suggest form / review screen ---------- */

.suggest-screen {
  max-width: 560px;
  margin: 0 auto;
  padding: 16px 16px 32px;
}

.suggest-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 16px;
}

.suggest-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
}

.message-thread {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
}

.message-bubble {
  max-width: 80%;
  padding: 10px 12px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
}
.message-bubble p { margin: 0 0 4px; white-space: pre-wrap; }
.message-bubble.mine { align-self: flex-end; background: var(--brand-tint); }
.message-bubble.theirs { align-self: flex-start; background: var(--surface); }

/* Plain select (the confirm dialog's choice field). The old #/messages toolbar rules were removed with the Messages redesign (css/messages-page.css). */
.list-sort {
  font-family: inherit;
  font-size: 13px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
}

/* Avatar used by the pop-up chat widget and the Report a price chips (conversationAvatarHtml in js/messages.js). */
.message-avatar {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  overflow: hidden;
}
.message-avatar svg { width: 20px; height: 20px; }
.message-avatar-initials { background: var(--brand); color: var(--on-brand); font-weight: 700; font-size: 14px; }

.row-menu { position: absolute; top: 8px; right: 8px; }
/* The Store page's title-row overflow menu (renderStore()'s headerBlockHtml) sits inline in normal flow
   instead of pinned to a card's corner — same button/dropdown, just not absolutely positioned itself. */
.row-menu-inline { position: relative; top: auto; right: auto; }
.row-menu-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}
.row-menu-btn:hover { background: var(--surface-2); }
.row-menu-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 190px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 20;
}
.row-menu-dropdown button,
.row-menu-dropdown a {
  display: block;
  text-align: left;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  border: none;
  background: none;
  font: inherit;
  font-size: 13px;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.row-menu-dropdown button:hover,
.row-menu-dropdown a:hover { background: var(--surface-2); }
.row-menu-dropdown button.danger { color: var(--danger-text); }
.row-menu-dropdown button:disabled { color: var(--text-muted); cursor: not-allowed; }
.row-menu-dropdown button:disabled:hover { background: none; }

/* Save + the "⋯" overflow menu, pushed to the far right of the Store page's title row (detail-title-row,
   flex-wrap) instead of sitting in the lower button row. */
.title-row-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}

/* Overrides .card-meta's flex layout (which anonymous-flex-items the rating button and its surrounding
   text separately, wrapping them onto their own lines/columns instead of as one flowing line) — this is
   a single joined "rating · hours · market · area, city" string, so it should just wrap like a normal
   line of text. */
.store-meta-line { display: block; }

.suggest-field input[type="text"],
.suggest-field select,
.suggest-field textarea {
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
}

.suggest-field textarea { resize: vertical; }

.suggest-check-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 4px;
}

.suggest-check {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 400;
}

.review-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px;
  margin-bottom: 10px;
  font-size: 13px;
}

.review-card summary {
  cursor: pointer;
  color: var(--brand-text);
  font-size: 12px;
  margin-top: 6px;
}

/* A plain sub-line, not a shaded bubble — "Owner" label + its reply text, same unshaded pattern as
   other label+detail sub-lines in the app (e.g. the directions panel's hub/landmark lines). */
.review-owner-reply {
  margin-top: 10px;
  padding-left: 10px;
  border-left: 2px solid var(--brand-tint);
}

.reviews-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* Compact single-line filter/sort bar (loadReviewsSection/renderReviewsBody) — plain text links with
   slash separators for the rating bucket, native <select>s for date range and sort, instead of the big
   chip/toggle-button rows those controls used before. Scoped to this bar, not .chip/.toggle-btn, which
   other filter UIs in the app still use. */
.review-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin: 10px 0 12px;
  font-size: 13px;
}

.review-filter-group { display: flex; align-items: center; gap: 6px; }
.review-filter-sep { color: var(--text-muted); }
.review-filter-btn {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: 13px;
  color: var(--text-muted);
  cursor: pointer;
}
.review-filter-btn.active { color: var(--brand-text); font-weight: 600; }

.review-select-group { display: flex; align-items: center; gap: 8px; }
.review-select {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  padding: 5px 10px;
}

.review-edit-form {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
}

.review-json {
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px;
  font-size: 11px;
  margin-top: 6px;
}

/* Mall ribbon: a corner tab on a mall's card in every view */
.card.has-ribbon, .rv-row, .rv-tile { position: relative; }
.card.has-ribbon { overflow: hidden; padding-top: 34px; }
.rv-tile { overflow: hidden; }
.mall-ribbon {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  padding: 2px 10px 3px 8px;
  background: #b45309;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.3;
  border-radius: 0 0 var(--radius-sm) 0;
  pointer-events: none;
}
.card.has-ribbon { border-top-left-radius: var(--radius-lg); }

.kind-select {
  margin-left: auto;
  margin-right: 8px;
  padding: 5px 8px;
  font: inherit;
  font-size: 13px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.result-row .view-toggle { margin-left: 0; }