/* Rich-display blocks.
 *
 * IMPORTANT: every rule is scoped under #chatyx-widget-root and marked
 * !important. The widget ships a global reset
 *   #chatyx-widget-root, #chatyx-widget-root * { font-size: inherit;
 *   color: inherit; background: transparent; margin/padding: 0; ... !important }
 * whose `*` selector (specificity 1,0,0 + !important) otherwise wins over
 * low-specificity .cyx-block-* rules and neutralises the card's font-size
 * (it falls back to the 16px browser default), colours, background and
 * padding. Scoping under the id (specificity 1,1,0) + !important lets these
 * rules win without weakening the protective reset.
 *
 * Card surfaces are an explicit light surface with dark text so they read
 * like a product card in both light and dark widget themes. Body text
 * (the description) matches the conversation bubble: 13px / line-height 1.5. */

#chatyx-widget-root .cyx-block {
  margin-top: 8px !important; font-family: inherit !important;
}
#chatyx-widget-root .message-row.message-blocks-row {
  align-items: flex-start !important; margin-top: -4px !important;
}
#chatyx-widget-root .message-row.message-blocks-row .avatar {
  visibility: hidden !important;
}
#chatyx-widget-root .message-blocks-container {
  flex: 1 1 auto !important; min-width: 0 !important; max-width: 100% !important;
}
#chatyx-widget-root .cyx-block-table-scroller {
  overflow-x: auto !important; border-radius: 8px !important; border: 1px solid rgba(0, 0, 0, 0.08) !important; background: #ffffff !important;
}
#chatyx-widget-root .cyx-block-table-el {
  border-collapse: collapse !important; width: 100% !important; font-size: 13px !important; color: #1f2937 !important;
}
#chatyx-widget-root .cyx-block-table-el th,
#chatyx-widget-root .cyx-block-table-el td {
  text-align: left !important; padding: 8px 10px !important; border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
}
#chatyx-widget-root .cyx-block-table-el thead th {
  background: rgba(0, 0, 0, 0.04) !important; font-weight: 600 !important; color: #111827 !important;
}
#chatyx-widget-root .cyx-block-links-list {
  list-style: none !important; padding: 0 !important; margin: 0 !important; display: flex !important; flex-direction: column !important; gap: 6px !important;
}
#chatyx-widget-root .cyx-block-links-link {
  color: var(--chatyx-primary, #7b40f1) !important; text-decoration: none !important; font-weight: 500 !important;
}
#chatyx-widget-root .cyx-block-links-link:hover {
  text-decoration: underline !important;
}
#chatyx-widget-root .cyx-block-gallery {
  display: grid !important; gap: 6px !important;
}
#chatyx-widget-root .cyx-block-gallery--grid-4 {
  grid-template-columns: repeat(4, 1fr) !important;
}
#chatyx-widget-root .cyx-block-gallery--list {
  grid-template-columns: 1fr !important;
}
#chatyx-widget-root .cyx-block-gallery-cell {
  aspect-ratio: 1 / 1 !important; overflow: hidden !important; border-radius: 6px !important;
}
#chatyx-widget-root .cyx-block-gallery-img {
  width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important;
}
#chatyx-widget-root .cyx-block-property-carousel {
  position: relative !important; border-radius: 12px !important; background: #ffffff !important; color: #1f2937 !important; padding: 8px !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14) !important;
}
#chatyx-widget-root .cyx-block-pc-track-container {
  position: relative !important; overflow: hidden !important; border-radius: 8px !important;
}
#chatyx-widget-root .cyx-block-pc-track {
  display: flex !important; transition: transform 0.3s ease-out !important; will-change: transform !important;
}
#chatyx-widget-root .cyx-block-pc-slide {
  flex: 0 0 100% !important; min-width: 0 !important;
}
#chatyx-widget-root .cyx-block-pc-card {
  display: flex !important; flex-direction: column !important;
}
#chatyx-widget-root .cyx-block-pc-image-area {
  position: relative !important; width: 100% !important; aspect-ratio: 4 / 3 !important; background: rgba(0, 0, 0, 0.05) !important; overflow: hidden !important;
}
#chatyx-widget-root .cyx-block-pc-image {
  width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important;
}
#chatyx-widget-root .cyx-block-pc-image-placeholder {
  display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; font-size: 32px !important;
}
#chatyx-widget-root .cyx-block-pc-body {
  padding: 10px 12px 12px !important; display: flex !important; flex-direction: column !important; gap: 6px !important;
}
#chatyx-widget-root .cyx-block-pc-title {
  font-weight: 600 !important; font-size: 14px !important; color: #111827 !important;
}
#chatyx-widget-root .cyx-block-pc-meta {
  font-size: 12px !important; color: #6b7280 !important;
}
#chatyx-widget-root .cyx-block-pc-description {
  font-size: 13px !important; line-height: 1.5 !important; color: #374151 !important;
}
#chatyx-widget-root .cyx-block-pc-features {
  list-style: none !important; padding: 0 !important; margin: 4px 0 0 !important; display: flex !important; flex-wrap: wrap !important; gap: 4px !important;
}
#chatyx-widget-root .cyx-block-pc-features li {
  font-size: 11px !important; background: #f3f4f6 !important; color: #374151 !important; padding: 2px 8px !important; border-radius: 12px !important;
}
#chatyx-widget-root .cyx-block-pc-link {
  align-self: flex-start !important; margin-top: 6px !important; color: var(--chatyx-primary, #7b40f1) !important; font-weight: 500 !important; text-decoration: none !important; font-size: 13px !important;
}
#chatyx-widget-root .cyx-block-pc-link:hover {
  text-decoration: underline !important;
}
#chatyx-widget-root .cyx-block-pc-indicators {
  display: flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; margin: 0 !important;
}
#chatyx-widget-root .cyx-block-pc-indicator {
  width: 6px !important; height: 6px !important; border-radius: 50% !important; border: none !important; padding: 0 !important; background: rgba(0, 0, 0, 0.2) !important; cursor: pointer !important;
}
#chatyx-widget-root .cyx-block-pc-indicator.is-active {
  background: var(--chatyx-primary, #7b40f1) !important; width: 16px !important; border-radius: 4px !important;
}
#chatyx-widget-root .cyx-block-pc-mini {
  position: relative !important; width: 100% !important; height: 100% !important; overflow: hidden !important;
}
#chatyx-widget-root .cyx-block-pc-mini-strip {
  display: flex !important; height: 100% !important; transition: transform 0.25s ease-out !important;
}
#chatyx-widget-root .cyx-block-pc-mini-img {
  flex: 0 0 100% !important; min-width: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important;
}

/* --- Per-photo arrows (inside a card's image) ----------------------- */
/* Round white buttons with a dark chevron, revealed on hover (desktop) and
 * kept subtly visible on touch devices where there is no hover. */
#chatyx-widget-root .cyx-block-pc-mini-nav {
  position: absolute !important; top: 50% !important;
  transform: translateY(-50%) !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  width: 30px !important; height: 30px !important; padding: 0 !important;
  border: none !important; border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.92) !important; color: #1f2937 !important;
  font-size: 18px !important; line-height: 1 !important; cursor: pointer !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.28) !important;
  opacity: 0 !important; z-index: 2 !important;
  transition: opacity 0.18s ease, background 0.18s ease, transform 0.18s ease !important;
}
#chatyx-widget-root .cyx-block-pc-mini-nav--prev { left: 8px !important; right: auto !important; }
#chatyx-widget-root .cyx-block-pc-mini-nav--next { right: 8px !important; left: auto !important; }
#chatyx-widget-root .cyx-block-pc-mini:hover .cyx-block-pc-mini-nav { opacity: 1 !important; }
#chatyx-widget-root .cyx-block-pc-mini-nav:hover {
  background: #ffffff !important; transform: translateY(-50%) scale(1.08) !important;
}
#chatyx-widget-root .cyx-block-pc-mini-nav:active {
  transform: translateY(-50%) scale(0.96) !important;
}
@media (hover: none) {
  #chatyx-widget-root .cyx-block-pc-mini-nav {
    opacity: 0.9 !important; width: 28px !important; height: 28px !important;
  }
}
/* Photo counter badge (per-card image strip). */
#chatyx-widget-root .cyx-block-pc-mini-count {
  position: absolute !important; top: 8px !important; right: 8px !important;
  padding: 3px 8px !important; border-radius: 999px !important;
  background: rgba(17, 24, 39, 0.66) !important; color: #ffffff !important;
  font-size: 11px !important; font-weight: 600 !important; line-height: 1 !important;
  letter-spacing: 0.2px !important; z-index: 2 !important; pointer-events: none !important;
}

/* --- Between-properties navigation: a bottom control bar ------------- */
/* Page arrows flank the dot indicators BELOW the card, so they never
 * overlap the per-photo arrows that live on the image. */
#chatyx-widget-root .cyx-block-pc-controls {
  display: flex !important; align-items: center !important; justify-content: center !important;
  gap: 10px !important; margin-top: 8px !important;
}
#chatyx-widget-root .cyx-block-pc-pagenav {
  display: flex !important; align-items: center !important; justify-content: center !important;
  width: 26px !important; height: 26px !important; padding: 0 !important;
  border: none !important; border-radius: 50% !important;
  background: rgba(0, 0, 0, 0.06) !important; color: #1f2937 !important;
  font-size: 16px !important; line-height: 1 !important; cursor: pointer !important;
  transition: background 0.15s ease !important;
}
#chatyx-widget-root .cyx-block-pc-pagenav:hover { background: rgba(0, 0, 0, 0.12) !important; }
#chatyx-widget-root .cyx-block-pc-pagenav:disabled { opacity: 0.3 !important; cursor: not-allowed !important; }