/* ─── WYSIWYG Editor ─── */

kpdd-editor {
  display: block;
}

.kpdd-editor {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  position: relative; /* anchor for dropdown */
  /* No overflow:hidden — dropdown must escape */
}

/* ─── Toolbar ─── */
.kpdd-editor-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: var(--space-xs) var(--space-sm);
  background: var(--color-bg-alt);
  border-bottom: 1px solid var(--color-border);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.kpdd-editor-toolbar button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-muted);
  cursor: pointer;
  font-size: 16px;
  transition: all 0.15s;
}

.kpdd-editor-toolbar button:hover {
  background: var(--color-bg);
  color: var(--color-body);
}

.kpdd-editor-toolbar button.active {
  background: var(--color-primary);
  color: white;
}

.kpdd-editor-toolbar .toolbar-sep {
  width: 1px;
  background: var(--color-border);
  margin: 4px 4px;
}

/* ─── Content Area ─── */
.kpdd-editor-content {
  min-height: 300px;
  max-height: 600px;
  overflow-y: auto;
  padding: var(--space-md);
  font-size: var(--font-size-base);
  line-height: 1.6;
  outline: none;
  background: var(--color-bg);
  color: var(--color-body);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.kpdd-editor-content:focus {
  outline: 2px solid var(--color-primary, #1a365d);
  outline-offset: -2px;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.kpdd-editor-content h2,
.kpdd-editor-content h3 {
  margin: 1em 0 0.5em;
}

.kpdd-editor-content p {
  margin: 0 0 1em;
}

/* base.css resets list-style globally for navigational <ul>s. Bring it
   back inside the editor so insertUnorderedList / insertOrderedList
   render visible bullets / numbers as the user types. The rendered
   public output uses .cms-content (defined in base.css) for the same
   scoped restoration. */
.kpdd-editor-content ul,
.kpdd-editor-content ol {
  margin: 0 0 1em;
  padding-left: 1.5em;
}
.kpdd-editor-content ul { list-style: disc outside; }
.kpdd-editor-content ol { list-style: decimal outside; }
.kpdd-editor-content li { margin: 0.25em 0; }

.kpdd-editor-content a {
  color: var(--color-primary);
  text-decoration: underline;
}

.kpdd-editor-content a[data-entity-type] {
  background: rgba(59, 130, 246, 0.1);
  padding: 1px 4px;
  border-radius: 3px;
  text-decoration: none;
  font-weight: 500;
}

.kpdd-editor-content blockquote {
  border-left: 3px solid var(--color-primary);
  padding-left: var(--space-md);
  margin: 1em 0;
  color: var(--color-muted);
}

.kpdd-editor-content code {
  background: var(--color-bg-alt);
  padding: 2px 6px;
  border-radius: 3px;
  font-family: monospace;
  font-size: 0.9em;
}

.kpdd-editor-content pre {
  background: var(--color-bg-alt);
  padding: var(--space-md);
  border-radius: var(--radius-md);
  overflow-x: auto;
  margin: 1em 0;
}

.kpdd-editor-content pre code {
  background: none;
  padding: 0;
}

.kpdd-editor-content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}

.kpdd-editor-content hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 1.5em 0;
}

/* ─── Ghost Text (inline completion) ─── */
.mention-ghost {
  color: var(--color-muted, #9ca3af);
  pointer-events: none;
  user-select: none;
  font-style: normal;
  opacity: 0.6;
}

/* ─── Mention Dropdown ─── */
.kpdd-editor-mention-dropdown {
  position: absolute;
  z-index: 1000;
  background: var(--color-bg, #fff);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 24px rgba(0,0,0,0.14), 0 2px 6px rgba(0,0,0,0.08);
  max-height: 420px;
  overflow-y: auto;
  min-width: 420px;
  max-width: 520px;
  padding: var(--space-2xs) 0;
  overscroll-behavior: contain;
}

/* Per-suggestion preview cards in the @-mention picker dropdown.
   Photo/icon medallion · label/sub stack · right-rail meta.
   Scoped to .kpdd-editor-mention-dropdown so these styles do NOT leak
   into MentionService's published output (which reuses .mention-card
   as a block-level wrapper for resolved listings/reviews — see
   src/services/MentionService.js). */
.kpdd-editor-mention-dropdown .mention-card {
  padding: var(--space-sm) var(--space-md);
  cursor: pointer;
  display: grid;
  grid-template-columns: 48px 1fr auto;
  align-items: center;
  gap: var(--space-md);
  transition: background 0.08s;
  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 50%, transparent);
}
.kpdd-editor-mention-dropdown .mention-card:last-child { border-bottom: 0; }
.kpdd-editor-mention-dropdown .mention-card:hover,
.kpdd-editor-mention-dropdown .mention-card.active {
  background: var(--color-bg-alt, #f0f4f8);
}
.kpdd-editor-mention-dropdown .mention-card.active {
  box-shadow: inset 3px 0 0 var(--color-primary, #1a365d);
}

/* Visual: square photo OR colored medallion with icon */
.mention-card-photo {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md, 6px);
  object-fit: cover;
  background: var(--color-bg-alt);
  flex-shrink: 0;
}
.mention-card-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md, 6px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
  background: rgba(59,130,246,0.1);
  color: var(--color-primary, #1a365d);
}
.mention-card-icon--agent      { background: rgba(34,197,94,0.12);  color: #166534; }
.mention-card-icon--team       { background: rgba(20,184,166,0.12); color: #115e59; }
.mention-card-icon--listing    { background: rgba(139,92,246,0.12); color: #5b21b6; }
.mention-card-icon--property   { background: rgba(99,102,241,0.12); color: #3730a3; }
.mention-card-icon--community  { background: rgba(234,179,8,0.12);  color: #854d0e; }
.mention-card-icon--office     { background: rgba(100,116,139,0.12); color: #334155; }
.mention-card-icon--blog       { background: rgba(236,72,153,0.12); color: #9d174d; }
.mention-card-icon--page       { background: rgba(236,72,153,0.08); color: #be185d; }
.mention-card-icon--stat       { background: rgba(14,165,233,0.12); color: #075985; }
.mention-card-icon--savedFilter{ background: rgba(245,158,11,0.14); color: #92400e; }
.mention-card-icon--flipbook   { background: rgba(217,70,239,0.12); color: #86198f; }
.mention-card-icon--reviews    { background: rgba(249,115,22,0.12); color: #9a3412; }
.mention-card-icon--department { background: rgba(99,102,241,0.10); color: #3730a3; }
.mention-card-icon--vendor     { background: rgba(20,184,166,0.10); color: #115e59; }
.mention-card-icon--lender     { background: rgba(13,148,136,0.10); color: #115e59; }
.mention-card-icon--poi        { background: rgba(139,92,246,0.10); color: #5b21b6; }

.mention-card-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mention-card-label {
  font-weight: 600;
  font-size: var(--font-size-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mention-card-sub {
  font-size: var(--font-size-xs);
  color: var(--color-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mention-card-rail {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex-shrink: 0;
  text-align: right;
}
.mention-card-meta {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-heading, #0f172a);
  font-variant-numeric: tabular-nums;
}
.mention-card-badge {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--color-bg-alt);
  color: var(--color-muted);
}
.mention-card-badge--listing { background: rgba(139,92,246,0.12); color: #5b21b6; }
.mention-card-type {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-muted);
  opacity: 0.75;
}

.mention-status {
  padding: var(--space-md);
  color: var(--color-muted);
  font-size: var(--font-size-sm);
  text-align: center;
}

/* ─── Published mention blocks (rendered by MentionService into CMS pages) ─── */
/* These are NOT the dropdown cards above — they're the inline content blocks
   (saved-filter listings, reviews rail, listing/agent embeds) that get
   rendered when MentionService.resolve() expands @-tokens in page bodies.
   Block-level wrappers with proper page spacing. */
.mention-card--saved-filter,
.mention-card--reviews,
.mention-card--inline {
  display: block;
  margin: var(--space-lg) 0;
}

.mention-saved-filter-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--space-md);
  gap: var(--space-md);
  flex-wrap: wrap;
}
.mention-saved-filter-head h3 {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
}
.mention-saved-filter-foot {
  margin-top: var(--space-md);
  text-align: center;
}

/* Tab hint at bottom of dropdown */
.kpdd-editor-mention-dropdown::after {
  content: 'Tab to accept · ↑↓ to navigate · Esc to dismiss';
  display: block;
  padding: var(--space-xs) var(--space-md);
  font-size: 10px;
  color: var(--color-muted);
  border-top: 1px solid var(--color-border);
  text-align: center;
  opacity: 0.7;
}

/* Screen-reader only */
.kpdd-editor-mention-dropdown .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ─── Mention Placeholders (in editor) ─── */
/*
 * In-editor preview for block-style mentions. Mirrors the dropdown card
 * (photo / icon medallion + label + sub + meta rail) so the author sees
 * the same visual they're picking. The chrome (× remove button) is
 * stripped at save time — only the data-attrs survive to the server.
 */
.mention-placeholder {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(160px, 1fr) auto;
  align-items: center;
  gap: var(--space-sm);
  margin: var(--space-sm) 0;
  padding: 8px 32px 8px 10px; /* extra right pad → room for × */
  width: fit-content;
  max-width: 480px;
  background: var(--color-bg, #fff);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-primary, #1a365d);
  border-radius: var(--radius-md);
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  user-select: none;
  font-size: var(--font-size-sm);
}

/* Type-color the left accent bar so authors can scan a doc and see what's
   what at a glance. */
.mention-placeholder--agent      { border-left-color: #16a34a; }
.mention-placeholder--team       { border-left-color: #14b8a6; }
.mention-placeholder--listing    { border-left-color: #8b5cf6; }
.mention-placeholder--property   { border-left-color: #6366f1; }
.mention-placeholder--community  { border-left-color: #eab308; }
.mention-placeholder--stat       { border-left-color: #0ea5e9; }
.mention-placeholder--savedFilter{ border-left-color: #f59e0b; }
.mention-placeholder--flipbook   { border-left-color: #d946ef; }
.mention-placeholder--reviews    { border-left-color: #f97316; }

.mention-placeholder-photo {
  width: 44px; height: 44px;
  border-radius: var(--radius-md, 6px);
  object-fit: cover;
  background: var(--color-bg-alt);
}
.mention-placeholder-icon {
  width: 44px; height: 44px;
  border-radius: var(--radius-md, 6px);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
  background: rgba(59,130,246,0.1);
  color: var(--color-primary, #1a365d);
}
.mention-placeholder-icon--agent      { background: rgba(34,197,94,0.12);  color: #166534; }
.mention-placeholder-icon--team       { background: rgba(20,184,166,0.12); color: #115e59; }
.mention-placeholder-icon--listing    { background: rgba(139,92,246,0.12); color: #5b21b6; }
.mention-placeholder-icon--property   { background: rgba(99,102,241,0.12); color: #3730a3; }
.mention-placeholder-icon--community  { background: rgba(234,179,8,0.12);  color: #854d0e; }
.mention-placeholder-icon--office     { background: rgba(100,116,139,0.12); color: #334155; }
.mention-placeholder-icon--stat       { background: rgba(14,165,233,0.12); color: #075985; }
.mention-placeholder-icon--savedFilter{ background: rgba(245,158,11,0.14); color: #92400e; }
.mention-placeholder-icon--flipbook   { background: rgba(217,70,239,0.12); color: #86198f; }
.mention-placeholder-icon--reviews    { background: rgba(249,115,22,0.12); color: #9a3412; }

.mention-placeholder-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mention-placeholder-label {
  font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mention-placeholder-sub {
  font-size: var(--font-size-xs);
  color: var(--color-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.mention-placeholder-rail {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  text-align: right;
}
.mention-placeholder-meta {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--color-heading, #0f172a);
}
.mention-placeholder-badge {
  font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em;
  padding: 1px 6px; border-radius: 999px;
  background: var(--color-bg-alt); color: var(--color-muted);
}
.mention-placeholder-type {
  font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--color-muted); opacity: 0.75;
  font-family: ui-monospace, Menlo, monospace;
}

/* Legacy mention-chip styles — kept so old saved CMS pages still look
   reasonable until the next save round-trips them through the new shell. */
.mention-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-2xs) var(--space-sm);
  border-radius: 999px;
  font-size: var(--font-size-sm);
  font-weight: 500;
  background: rgba(59, 130, 246, 0.12);
  color: var(--color-primary, #1a365d);
}
.mention-chip--agent { background: rgba(34, 197, 94, 0.12); color: #166534; }
.mention-chip--team { background: rgba(20, 184, 166, 0.12); color: #115e59; }
.mention-chip--listing { background: rgba(139, 92, 246, 0.12); color: #5b21b6; }
.mention-chip--property { background: rgba(99, 102, 241, 0.12); color: #3730a3; }
.mention-chip--community { background: rgba(234, 179, 8, 0.12); color: #854d0e; }

.mention-remove {
  position: absolute;
  top: 4px; right: 4px;
  width: 22px; height: 22px;
  border: none;
  background: transparent;
  border-radius: 50%;
  cursor: pointer;
  font-size: 14px;
  color: var(--color-muted);
  padding: 0;
  line-height: 1;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transition: opacity 0.12s, background 0.12s, color 0.12s;
}
.mention-placeholder:hover .mention-remove,
.mention-remove:focus { opacity: 1; }
.mention-remove:hover { background: rgba(220,53,69,0.12); color: var(--color-danger, #dc3545); }

/* Saved-state shell — invisible in the editor, replaced by the public
   server-rendered card on the live page. */
kpdd-mention { display: none; }

/*
 * Inline mentions — stat / savedFilter / page / blog / etc. Render as a
 * compact inline-flex chip-card with an icon, the label, an optional
 * meta value, and a hover-only × remove button. Designed to flow with
 * surrounding text like a styled token.
 */
.mention-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 4px 2px 8px;
  margin: 0 2px;
  background: var(--color-bg, #fff);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-primary, #1a365d);
  border-radius: 4px;
  font-size: 0.875em;
  line-height: 1.3;
  font-weight: 500;
  color: var(--color-text);
  vertical-align: baseline;
  user-select: none;
  white-space: nowrap;
  max-width: 100%;
}
.mention-inline--stat        { border-left-color: #0ea5e9; }
.mention-inline--savedFilter { border-left-color: #f59e0b; }
.mention-inline--page        { border-left-color: #be185d; }
.mention-inline--blog        { border-left-color: #9d174d; }
.mention-inline--office      { border-left-color: #334155; }
.mention-inline--department  { border-left-color: #3730a3; }
.mention-inline--vendor      { border-left-color: #115e59; }
.mention-inline--lender      { border-left-color: #115e59; }
.mention-inline--poi         { border-left-color: #5b21b6; }

.mention-inline-icon {
  font-size: 0.85em;
  opacity: 0.7;
  flex-shrink: 0;
}
.mention-inline-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mention-inline-meta {
  font-weight: 700;
  color: var(--color-heading, #0f172a);
  font-variant-numeric: tabular-nums;
  font-size: 0.95em;
  padding-left: 2px;
}
.mention-inline .mention-remove {
  position: static;
  width: 16px; height: 16px;
  background: transparent;
  border: 0;
  border-radius: 50%;
  font-size: 12px;
  line-height: 1;
  color: var(--color-muted);
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 0 2px;
  opacity: 0;
  transition: opacity 0.12s, background 0.12s, color 0.12s;
}
.mention-inline:hover .mention-remove,
.mention-inline:focus-within .mention-remove { opacity: 1; }
.mention-inline .mention-remove:hover {
  background: rgba(220,53,69,0.12);
  color: var(--color-danger, #dc3545);
}

/* ─── Rendered Mention Cards (public pages) ─── */
/* Small single-entity embeds (one agent, one listing, one team, one
   property, one community) — designed as inline 340–400px cards in
   prose. Wider variants (saved-filter listing grids, reviews rails,
   inline blocks) are full-width and explicitly opt out below. */
.mention-card {
  margin: var(--space-lg) 0;
  max-width: 340px;
}
.mention-card--listing {
  max-width: 360px;
}
.mention-card--team {
  max-width: 400px;
}

/* Wide variants — opt out of the small-card max-width so they fill
   their container (e.g. a section is the parent). MentionService
   emits these for @savedFilter, @reviews, @inline, and the agent-
   roster variants (@officeRoster, @specialty). */
.mention-card--saved-filter,
.mention-card--reviews,
.mention-card--inline,
.mention-card--office-roster,
.mention-card--specialty {
  max-width: none;
}
.mention-team-card {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.2s;
}
.mention-team-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.mention-team-photo {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-md);
  object-fit: cover;
}
.mention-team-name { font-weight: var(--font-weight-semibold); }
.mention-team-meta { font-size: var(--font-size-sm); color: var(--color-muted); }

.mention-community-link,
.mention-property-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  transition: background 0.15s;
}
.mention-community-link:hover,
.mention-property-link:hover {
  background: var(--color-bg-gray);
}
.mention-unresolved {
  display: inline-block;
  padding: 2px 8px;
  background: rgba(220, 53, 69, 0.1);
  color: var(--color-danger, #dc3545);
  border-radius: 3px;
  font-size: var(--font-size-sm);
}