/* =========================================================
   Prop Connect — design tokens & shared styles
   Theme: vivid accent, minimalist surfaces, professional type
   ========================================================= */
:root {
  color-scheme: light;
  --surface-1:      #fcfcfb;
  --page-plane:      #f9f9f7;
  --text-primary:   #0b0b0b;
  --text-secondary: #52514e;
  --text-muted:     #898781;
  --border-hair:    rgba(11,11,11,0.10);
  --gridline:       #e1e0d9;

  /* Vivid indigo brand — one confident accent against a quiet neutral canvas */
  --brand:          #4f46e5;
  --brand-strong:   #3730a3;
  --brand-soft:     #eef2ff;
  --brand-ring:     rgba(79,70,229,0.35);
  --brand-ink:      #ffffff; /* text placed on top of --brand */

  --status-good:     #0ca30c;
  --status-warning:  #b3790f; /* darkened from #fab219 for light-surface text contrast */
  --status-serious:  #c85a2e; /* darkened from #ec835a for light-surface text contrast */
  --status-critical: #d03b3b;
  --status-info:     #2a78d6;

  /* Property type identity — fixed categorical hues, one per type, used as
     badge text color so the same type always reads the same everywhere. */
  --type-house:      #2a78d6; /* blue */
  --type-apartment:  #4a3aa7; /* violet */
  --type-condo:      #e34948; /* red */
  --type-land:       #008300; /* green */
  --type-commercial: #eb6834; /* orange */

  --radius-sm: .5rem;
  --radius-md: .65rem;
  --radius-lg: .9rem;
  --shadow-sm: 0 1px 2px rgba(11,11,11,.05);
  --shadow-md: 0 8px 24px rgba(17,17,17,.08);
}

@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --surface-1:      #1a1a19;
    --page-plane:      #0d0d0d;
    --text-primary:   #ffffff;
    --text-secondary: #c3c2b7;
    --text-muted:     #898781;
    --border-hair:    rgba(255,255,255,0.10);
    --gridline:       #2c2c2a;

    --brand:          #818cf8;
    --brand-strong:   #c7d2fe;
    --brand-soft:     #201c42;
    --brand-ring:     rgba(129,140,248,0.45);
    --brand-ink:      #0d0d0d;

    --status-good:     #0ca30c;
    --status-warning:  #fab219;
    --status-serious:  #ec835a;
    --status-critical: #e66767;
    --status-info:     #3987e5;

    --type-house:      #3987e5;
    --type-apartment:  #9085e9;
    --type-condo:      #e66767;
    --type-land:       #008300;
    --type-commercial: #d95926;

    --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
    --shadow-md: 0 8px 24px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --surface-1:      #1a1a19;
  --page-plane:      #0d0d0d;
  --text-primary:   #ffffff;
  --text-secondary: #c3c2b7;
  --text-muted:     #898781;
  --border-hair:    rgba(255,255,255,0.10);
  --gridline:       #2c2c2a;

  --brand:          #818cf8;
  --brand-strong:   #c7d2fe;
  --brand-soft:     #201c42;
  --brand-ring:     rgba(129,140,248,0.45);
  --brand-ink:      #0d0d0d;

  --status-good:     #0ca30c;
  --status-warning:  #fab219;
  --status-serious:  #ec835a;
  --status-critical: #e66767;
  --status-info:     #3987e5;

  --type-house:      #3987e5;
  --type-apartment:  #9085e9;
  --type-condo:      #e66767;
  --type-land:       #008300;
  --type-commercial: #d95926;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 8px 24px rgba(0,0,0,.5);
}

* { font-variant-numeric: proportional-nums; }

html { overflow-x: hidden; }

body {
  background: var(--page-plane);
  color: var(--text-primary);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  max-width: 100vw;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

main { flex: 1; }

a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-strong); }
/* Menus/nav/UI links show hover with color only, never an underline —
   underline is reserved for inline prose links (e.g. .rich-content a). */

h1, h2, h3, h4, h5, h6 { letter-spacing: -0.01em; }

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* ---------- Navbar (flat, minimal) ---------- */
.navbar {
  background: var(--brand);
  border-bottom: 1px solid var(--brand-strong);
  box-shadow: var(--shadow-sm);
}
.navbar .navbar-brand { letter-spacing: -0.01em; }
.navbar .nav-link { font-weight: 500; color: rgba(255,255,255,.85); }
.navbar .nav-link:hover { color: #fff; }
.btn-brand {
  background: #fff;
  color: var(--brand-strong);
  font-weight: 600;
  border: none;
  border-radius: var(--radius-sm);
}
.btn-brand:hover { background: var(--brand-soft); color: var(--brand-strong); }

/* ---------- Vivid primary action (the one saturated call-to-action) ---------- */
.btn-vivid {
  background: var(--brand);
  border: 1px solid var(--brand);
  color: var(--brand-ink);
  font-weight: 600;
  border-radius: var(--radius-sm);
}
.btn-vivid:hover, .btn-vivid:focus {
  background: var(--brand-strong);
  border-color: var(--brand-strong);
  color: var(--brand-ink);
}
.btn-vivid:disabled { opacity: .6; }

.btn-outline-secondary, .btn-outline-danger, .btn-outline-success {
  border-radius: var(--radius-sm);
}

/* ---------- Cards (hairline border, elevate only on hover) ---------- */
.card {
  background: var(--surface-1);
  border: 1px solid var(--border-hair);
  border-radius: var(--radius-lg);
  box-shadow: none;
}
.property-card { transition: transform .15s ease, box-shadow .15s ease; overflow: hidden; }
.property-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.property-card .card-img-top { height: 190px; object-fit: cover; background: var(--gridline); }
.property-price { color: var(--brand-strong); font-weight: 700; font-size: 1.15rem; }
.property-price-locked {
  color: var(--text-muted); font-weight: 600; font-size: .95rem;
  display: inline-flex; align-items: center;
}
.property-price-locked a { color: var(--text-muted); text-decoration: none; }
.property-price-locked a:hover { color: var(--brand); }

/* ---------- Visitor stats chart ---------- */
.visit-chart-wrap { position: relative; }
.visit-chart { width: 100%; height: auto; display: block; overflow: visible; }
.visit-chart-tick { font-size: 9px; fill: var(--text-muted); font-family: inherit; }
.visit-bar-group { cursor: pointer; }
.visit-bar-group path { transition: opacity .12s ease; }
.visit-bar-group:hover path { opacity: .75; }
.visit-chart-tooltip {
  position: absolute; pointer-events: none; opacity: 0; transition: opacity .1s ease;
  background: var(--text-primary); color: var(--surface-1);
  font-size: .75rem; font-weight: 600; padding: .3rem .55rem; border-radius: var(--radius-sm);
  white-space: nowrap; transform: translateY(-100%); z-index: 5;
}

/* ---------- Stat tiles ---------- */
.stat-tile {
  background: var(--surface-1);
  border: 1px solid var(--border-hair);
  border-radius: var(--radius-lg);
  padding: 1.15rem 1.25rem;
}
.stat-tile .stat-value { font-size: 1.9rem; font-weight: 800; line-height: 1; color: var(--text-primary); }
.stat-tile .stat-label { color: var(--text-secondary); font-size: .82rem; margin-top: .35rem; }
.stat-tile .stat-icon {
  width: 42px; height: 42px; border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  background: var(--brand-soft); color: var(--brand-strong); font-size: 1.15rem; flex-shrink: 0;
}

/* Color-coded variants — tinted background + matching value color, same
   soft-tint treatment as the badges (never a solid/saturated fill). */
.stat-tile-brand   { background: color-mix(in srgb, var(--brand) 12%, var(--surface-1)); border-color: color-mix(in srgb, var(--brand) 25%, transparent); }
.stat-tile-brand   .stat-value { color: var(--brand-strong); }
.stat-tile-info    { background: color-mix(in srgb, var(--status-info) 12%, var(--surface-1)); border-color: color-mix(in srgb, var(--status-info) 25%, transparent); }
.stat-tile-info    .stat-value { color: var(--status-info); }
.stat-tile-good    { background: color-mix(in srgb, var(--status-good) 12%, var(--surface-1)); border-color: color-mix(in srgb, var(--status-good) 25%, transparent); }
.stat-tile-good    .stat-value { color: var(--status-good); }
.stat-tile-warning { background: color-mix(in srgb, var(--status-warning) 14%, var(--surface-1)); border-color: color-mix(in srgb, var(--status-warning) 28%, transparent); }
.stat-tile-warning .stat-value { color: var(--status-warning); }

.stat-tile-brand   .stat-icon { background: color-mix(in srgb, var(--brand) 18%, transparent); color: var(--brand-strong); }
.stat-tile-info    .stat-icon { background: color-mix(in srgb, var(--status-info) 18%, transparent); color: var(--status-info); }
.stat-tile-good    .stat-icon { background: color-mix(in srgb, var(--status-good) 18%, transparent); color: var(--status-good); }
.stat-tile-warning .stat-icon { background: color-mix(in srgb, var(--status-warning) 20%, transparent); color: var(--status-warning); }

/* ---------- Badges (status, never color-alone: dot + text always present) ---------- */
.badge-success, .badge-warning, .badge-danger, .badge-info, .badge-secondary,
.badge-type-house, .badge-type-apartment, .badge-type-condo, .badge-type-land, .badge-type-commercial {
  font-weight: 600; font-size: .72rem; padding: .38em .7em .38em .55em; border-radius: 999px;
  letter-spacing: .01em;
  display: inline-flex; align-items: center; gap: .4em;
}
.badge-success::before, .badge-warning::before, .badge-danger::before, .badge-info::before,
.badge-type-house::before, .badge-type-apartment::before, .badge-type-condo::before, .badge-type-land::before, .badge-type-commercial::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0;
}
.badge-success { background: color-mix(in srgb, var(--status-good) 14%, transparent); color: var(--status-good); }
.badge-warning { background: color-mix(in srgb, var(--status-warning) 16%, transparent); color: var(--status-warning); }
.badge-danger  { background: color-mix(in srgb, var(--status-critical) 14%, transparent); color: var(--status-critical); }
.badge-info    { background: color-mix(in srgb, var(--status-info) 14%, transparent); color: var(--status-info); }
.badge-secondary { background: var(--gridline); color: var(--text-secondary); }

/* ---------- Property type identity (fixed color per type — see property_type_badge_class()) ---------- */
.badge-type-house      { background: color-mix(in srgb, var(--type-house) 14%, transparent); color: var(--type-house); }
.badge-type-apartment  { background: color-mix(in srgb, var(--type-apartment) 14%, transparent); color: var(--type-apartment); }
.badge-type-condo      { background: color-mix(in srgb, var(--type-condo) 14%, transparent); color: var(--type-condo); }
.badge-type-land       { background: color-mix(in srgb, var(--type-land) 14%, transparent); color: var(--type-land); }
.badge-type-commercial { background: color-mix(in srgb, var(--type-commercial) 14%, transparent); color: var(--type-commercial); }

/* ---------- Forms & misc ---------- */
.form-label { font-weight: 500; color: var(--text-secondary); font-size: .88rem; }
.form-control, .form-select {
  border-radius: var(--radius-sm);
  border-color: var(--border-hair);
  background: var(--surface-1);
  color: var(--text-primary);
}
.form-control:focus, .form-select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 .2rem var(--brand-ring);
}
.section-title { font-weight: 700; border-left: 3px solid var(--brand); padding-left: .6rem; }
.table thead th { color: var(--text-secondary); font-size: .76rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 600; border-bottom-width: 1px; border-color: var(--border-hair); }
.table > :not(caption) > * > * { background: transparent; color: var(--text-primary); border-color: var(--border-hair); }
.table-hover > tbody > tr:hover > * { background: var(--brand-soft); }

/* ---------- Hero (flat vivid block, no gradient) ---------- */
.hero {
  background: var(--brand);
  color: var(--brand-ink);
  border-radius: var(--radius-lg);
}
.hero .lead { color: rgba(255,255,255,.88); }

.footer { background: var(--surface-1); border-top: 1px solid var(--border-hair); color: var(--text-secondary); }

.role-card { border: 1px solid var(--border-hair); border-radius: var(--radius-md); cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.role-card:hover { border-color: var(--brand); }
.role-card.selected { border-color: var(--brand); background: var(--brand-soft); }

/* ---------- Admin sidebar active state (drives Bootstrap's list-group vars) ---------- */
.list-group-item.active-vivid {
  --bs-list-group-active-bg: var(--brand);
  --bs-list-group-active-border-color: var(--brand);
  color: var(--brand-ink);
  font-weight: 600;
}

/* ---------- Modals (match surfaces/tokens in dark mode) ---------- */
.modal-content { background: var(--surface-1); color: var(--text-primary); border: 1px solid var(--border-hair); border-radius: var(--radius-lg); }
.modal-header, .modal-footer { border-color: var(--border-hair); }

/* ---------- Property viewer ---------- */
.property-viewer-cover { height: 440px; object-fit: cover; display: block; }
@media (max-width: 767.98px) { .property-viewer-cover { height: 260px; } }

.property-viewer-tabs { border-bottom: 1px solid var(--border-hair); gap: .25rem; }
.property-viewer-tabs .nav-link {
  border: none; border-bottom: 2px solid transparent; border-radius: 0;
  color: var(--text-secondary); font-weight: 600; padding: .6rem .25rem; margin-right: 1.25rem;
}
.property-viewer-tabs .nav-link:hover { color: var(--text-primary); border-color: var(--border-hair); }
.property-viewer-tabs .nav-link.active { color: var(--brand); background: transparent; border-color: var(--brand); }

.property-toprow { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.property-toprow nav { min-width: 0; flex: 1 1 auto; overflow: hidden; }
.property-toprow .back-btn { flex: 0 0 auto; }

.property-breadcrumb { font-size: .85rem; min-width: 0; }
.property-breadcrumb .breadcrumb-item + .breadcrumb-item::before { color: var(--text-muted); }
.property-breadcrumb .breadcrumb-item.active { color: var(--text-muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.property-key-facts { display: flex; flex-wrap: wrap; gap: .75rem; }
.key-fact-card {
  display: flex; align-items: center; gap: .65rem;
  padding: .65rem .9rem; border: 1px solid var(--border-hair); border-radius: var(--radius-md);
  background: var(--brand-soft); flex: 1 1 150px; min-width: 0;
}
.key-fact-card i { font-size: 1.3rem; color: var(--brand); flex-shrink: 0; }
.key-fact-card div { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.key-fact-card strong { font-size: 1rem; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.key-fact-card span { font-size: .75rem; color: var(--text-secondary); }

.property-fact-list { display: flex; flex-direction: column; }
.property-fact-list > div {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .65rem 0; border-bottom: 1px solid var(--border-hair);
}
.property-fact-list > div:last-child { border-bottom: none; }
.property-fact-list dt { color: var(--text-secondary); font-weight: 500; margin: 0; }
.property-fact-list dd { color: var(--text-primary); font-weight: 600; margin: 0; text-align: right; }

.quick-contact-btn {
  width: 42px; height: 42px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-hair); color: var(--text-secondary);
  background: var(--surface-1); font-size: 1.05rem; transition: all .15s ease;
}
.quick-contact-btn:hover { color: var(--brand-ink); background: var(--brand); border-color: var(--brand); text-decoration: none; }

.gallery-tile {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  border-radius: var(--radius-md); cursor: pointer;
  box-shadow: var(--shadow-sm); transition: box-shadow .2s ease;
}
.gallery-tile:hover { box-shadow: var(--shadow-md); }
.gallery-thumb {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .35s ease;
}
.gallery-tile:hover .gallery-thumb { transform: scale(1.08); }
.gallery-tile-overlay {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0) 60%);
  color: #fff; font-size: 1.35rem; opacity: 0; transition: opacity .2s ease;
}
.gallery-tile:hover .gallery-tile-overlay { opacity: 1; }
.gallery-tile-badge {
  position: absolute; top: .4rem; left: .4rem;
  background: rgba(20,20,20,.72) !important; color: #fff !important;
}

/* Soft anti-save layer for buyers/guests — deters casual right-click/drag/long-press
   saving of listing photos. Not a hard security boundary (screenshots still work). */
.img-protected {
  -webkit-user-select: none; -moz-user-select: none; user-select: none;
  -webkit-user-drag: none; user-drag: none;
  -webkit-touch-callout: none;
}

/* ---------- Image viewer (lightbox: zoom / rotate / pan, fit to screen) ---------- */
#imgModal .modal-content { background: rgba(10,10,10,.96); position: relative; }
.image-viewer-stage {
  height: 100vh; height: 100dvh; width: 100%;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; touch-action: none; cursor: grab;
}
.image-viewer-stage.grabbing { cursor: grabbing; }
.image-viewer-img {
  max-width: 92vw; max-height: 92vh; max-height: 92dvh;
  width: auto; height: auto; object-fit: contain;
  user-select: none; transition: transform .12s ease; will-change: transform;
}
.image-viewer-close {
  position: absolute; top: 1rem; right: 1rem; z-index: 5;
  background-color: rgba(255,255,255,.9); border-radius: 50%; padding: .6rem;
  opacity: 1;
}
.image-viewer-toolbar {
  position: absolute; bottom: 1.25rem; left: 50%; transform: translateX(-50%);
  display: flex; gap: .4rem; background: rgba(20,20,20,.65);
  padding: .4rem; border-radius: 999px; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.viewer-btn {
  width: 38px; height: 38px; border-radius: 50%; border: none;
  background: rgba(255,255,255,.14); color: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s ease;
}
.viewer-btn:hover { background: rgba(255,255,255,.3); }

/* ---------- Rich text editor (property description) ---------- */
.rich-editor.ql-container {
  border-bottom-left-radius: var(--radius-sm); border-bottom-right-radius: var(--radius-sm);
  min-height: 160px; font-size: 1rem; background: var(--surface-1); color: var(--text-primary);
}
.ql-toolbar.ql-snow {
  border-top-left-radius: var(--radius-sm); border-top-right-radius: var(--radius-sm);
  background: var(--surface-1); border-color: var(--border-hair) !important;
}
.rich-editor.ql-container.ql-snow { border-color: var(--border-hair) !important; }
.ql-snow .ql-stroke { stroke: var(--text-secondary); }
.ql-snow .ql-fill { fill: var(--text-secondary); }
.ql-snow .ql-picker { color: var(--text-secondary); }
.ql-editor.ql-blank::before { color: var(--text-muted); font-style: normal; }

/* Rendered description output on the property page — mirror the editor's look */
.rich-content :first-child { margin-top: 0; }
.rich-content :last-child { margin-bottom: 0; }
.rich-content ul, .rich-content ol { padding-left: 1.4rem; }
.rich-content blockquote {
  border-left: 3px solid var(--brand); margin-left: 0; padding-left: 1rem; color: var(--text-secondary);
}
.rich-content a { text-decoration: underline; }
/* Indent levels set via Tab in the editor (Quill's ql-indent-N classes) */
.rich-content .ql-indent-1 { padding-left: 3em; }
.rich-content .ql-indent-2 { padding-left: 6em; }
.rich-content .ql-indent-3 { padding-left: 9em; }
.rich-content .ql-indent-4 { padding-left: 12em; }
.rich-content .ql-indent-5 { padding-left: 15em; }
.rich-content .ql-indent-6 { padding-left: 18em; }
.rich-content .ql-indent-7 { padding-left: 21em; }
.rich-content .ql-indent-8 { padding-left: 24em; }

.back-btn {
  border-radius: 999px; font-weight: 600; color: var(--text-secondary);
  border-color: var(--border-hair); background: var(--surface-1);
}
.back-btn:hover { color: var(--brand); border-color: var(--brand); background: var(--brand-soft); }

.demo-banner {
  background: var(--brand-strong); color: var(--brand-ink);
  text-align: center; font-size: .82rem; font-weight: 600;
  padding: .5rem 1rem;
}

.password-field { position: relative; }
.password-field .form-control { padding-right: 2.75rem; }
.password-field .toggle-password {
  position: absolute; top: 50%; right: .6rem; transform: translateY(-50%);
  background: none; border: none; padding: .25rem; line-height: 1;
  color: var(--text-muted);
}
.password-field .toggle-password:hover { color: var(--text-primary); }

/* ---------- FAQ chat bot widget ---------- */
.chatbot-root { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 1050; }

.chatbot-toggle {
  width: 56px; height: 56px; border-radius: 50%; border: none;
  background: var(--brand); color: var(--brand-ink); font-size: 1.4rem;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-md); cursor: pointer; transition: transform .15s ease, background .15s ease;
}
.chatbot-toggle:hover { background: var(--brand-strong); transform: scale(1.06); }
.chatbot-toggle-active { transform: scale(0.94); }

.chatbot-panel {
  position: absolute; right: 0; bottom: calc(100% + .75rem);
  width: min(360px, calc(100vw - 2.5rem));
  max-height: min(520px, calc(100vh - 7rem));
  background: var(--surface-1); border: 1px solid var(--border-hair); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md); display: flex; flex-direction: column; overflow: hidden;
}

.chatbot-header {
  background: var(--brand); color: var(--brand-ink);
  padding: .85rem 1rem; display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem;
  flex-shrink: 0;
}
.chatbot-header-title { font-weight: 700; font-size: .95rem; }
.chatbot-header-sub { font-size: .74rem; opacity: .85; margin-top: .1rem; }
.chatbot-close {
  background: none; border: none; color: var(--brand-ink); opacity: .85;
  width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.chatbot-close:hover { opacity: 1; background: rgba(255,255,255,.15); }

.chatbot-messages {
  flex: 1 1 auto; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: .6rem;
  min-height: 180px;
}
.chatbot-msg { display: flex; }
.chatbot-msg-bot { justify-content: flex-start; }
.chatbot-msg-user { justify-content: flex-end; }
.chatbot-bubble {
  max-width: 85%; padding: .55rem .8rem; border-radius: var(--radius-md); font-size: .85rem; line-height: 1.45;
}
.chatbot-msg-bot .chatbot-bubble { background: var(--gridline); color: var(--text-primary); border-bottom-left-radius: .2rem; }
.chatbot-msg-user .chatbot-bubble { background: var(--brand); color: var(--brand-ink); border-bottom-right-radius: .2rem; }
.chatbot-msg-link {
  display: inline-flex; align-items: center; gap: .3rem; margin-top: .45rem;
  font-weight: 600; font-size: .8rem; color: inherit; text-decoration: underline;
}

.chatbot-quick-replies {
  display: flex; flex-wrap: wrap; gap: .4rem; padding: 0 1rem .75rem; flex-shrink: 0;
}
.chatbot-chip {
  border: 1px solid var(--border-hair); background: var(--surface-1); color: var(--text-secondary);
  border-radius: 999px; padding: .35rem .7rem; font-size: .76rem; cursor: pointer; transition: all .15s ease;
}
.chatbot-chip:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }

.chatbot-input-row { display: flex; gap: .5rem; padding: .75rem 1rem; border-top: 1px solid var(--border-hair); flex-shrink: 0; }
.chatbot-input-row .form-control { flex: 1 1 auto; }
.chatbot-footnote { text-align: center; font-size: .68rem; color: var(--text-muted); padding-bottom: .6rem; flex-shrink: 0; }

@media (max-width: 480px) {
  .chatbot-root { right: .75rem; bottom: .75rem; }
  .chatbot-panel { width: calc(100vw - 1.5rem); }
}