/* ===========================================================================
   userbackend.css — Consumer (buyer/seller) dashboard skin.

   The user dashboard is the ONE console that deliberately keeps the public
   site chrome (global-header + footer) instead of the stripped portal bar the
   admin and agent consoles wear — a buyer moving between their saved homes and
   the public listings shouldn't cross a visual seam. So it does NOT import the
   admin shell (adminbackend.css); it has its own left-rail + content-pane
   layout built on the shared design tokens from style.css.

   This sheet is the dashboard's single source of truth for look. It mirrors the
   role agentbackend.css plays for the agent portal: one dedicated file that owns
   every `.ud-*` (dashboard), `.uw-*` (welcome landing), `.msg-*` (inbox) and
   `.res-*` (resources) component. It was factored OUT of the big shared app.css
   so the dashboard's styling lives in one place and can evolve without touching
   the 267 KB public app sheet.

   HOW IT'S LOADED — the page front-matter lists both, app.css first:

       css: app.css, userbackend.css

   app.css still provides the shared profile-form system the Account panel uses
   (`.form-section-title` / `.form-group-sys` / `.field-hint` / `.input-sys` /
   `.grid-2`); this sheet, linked after it, owns everything else and wins on any
   overlap. Every selector here is dashboard-only (verified: no other page uses
   `.ud-*` / `.uw-*` / `.msg-wrap` / `.res-tab`), so nothing bleeds outward.
   =========================================================================== */

/* ───────────────────────────────────────────────────────────────────────────
   0. Token fill
   The dashboard loads only style.css + app.css. app.css ships a radius scale
   (--radius-sm/md/lg) and most colour tokens, but a handful the admin/agent
   consoles rely on live only in adminbackend.css / portal.css / forms.css,
   which this page does NOT load — so `var(--radius-xl)`, `var(--brand-ring)`
   etc. were resolving to their initial value (square corners, no focus ring).
   Because userbackend.css is scoped to this one page, defining them here fills
   the gap without leaking to the rest of the site. Values track the admin skin.
   ─────────────────────────────────────────────────────────────────────────── */
:root {
    --radius:        12px;
    --radius-xl:     22px;
    --text-strong:   var(--ink, #14161a);
    --brand-ring:    rgba(219, 37, 43, 0.22);
    --danger-border: #f6c9c9;
    --text-on-dark:  #ffffff;
}

/* ───────────────────────────────────────────────────────────────────────────
   1. App shell — fixed left rail + content pane
   The rail stays put; only the right pane changes. The grid is anchored, so it
   never shifts or resizes between tabs OR between window sizes.
   ─────────────────────────────────────────────────────────────────────────── */
.ud-shell {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 0;
    align-items: start;
    padding-top: var(--header-h);   /* clear the fixed global header */
}
.ud-side {
    position: sticky;
    top: var(--header-h);
    height: calc(100vh - var(--header-h));
    overflow-y: auto;
    background: var(--surface);
    border-right: 1px solid var(--bg-muted);
    padding: 2rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.ud-side-id { padding: 0 0.5rem 1.25rem; margin-bottom: 0.75rem; border-bottom: 1px solid var(--bg-muted); }
.ud-side-name { font-size: 1.1rem; font-weight: 700; color: var(--text); margin-top: 0.3rem; word-break: break-word; }
.ud-side-signout {
    margin-top: auto; display: block; text-decoration: none;
    padding: 0.7rem 0.85rem; border-radius: var(--radius-sm);
    font-size: 0.92rem; font-weight: 600; color: var(--danger);
    transition: background 0.15s;
}
.ud-side-signout:hover { background: var(--danger-tint); }

.ud-main {
    min-height: calc(100vh - var(--header-h));
    padding: 2.75rem 3rem 4rem;
    box-sizing: border-box;
}
.ud-header { margin-bottom: 2rem; }
.ud-eyebrow { font-size: 0.78rem; font-weight: 700; letter-spacing: 1.2px; color: var(--brand); text-transform: uppercase; margin-bottom: 0.6rem; }
.ud-title { font-size: 2.1rem; font-weight: 700; letter-spacing: -1px; color: var(--text); margin: 0 0 0.45rem; }
.ud-subtitle { color: var(--text-secondary); font-size: 1.05rem; margin: 0; }

/* Sidebar tabs — vertical nav items in the rail. */
/* Matches the admin sidebar's .side-link: lighter weight + smaller text. */
.ud-tab {
    display: flex; align-items: center; gap: 11px;
    width: 100%; text-align: left;
    background: none; border: 0; border-radius: 12px;
    padding: 9px 12px; font-family: inherit;
    font: 500 13.5px/1.2 var(--font); color: var(--text); opacity: .82;
    cursor: pointer; transition: background .12s ease, opacity .12s ease, color .12s ease;
}
.ud-tab:hover { background: var(--bg-subtle); color: var(--text); opacity: 1; }
.ud-tab svg { width: 18px; height: 18px; opacity: .68; flex: none; }
.ud-tab.active { background: var(--brand-tint); color: var(--brand); font-weight: 700; }

/* Unread badge on a sidebar tab. */
.ud-badge {
    margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--brand); color: var(--text-on-brand); border-radius: 10px;
    font-size: 0.72rem; font-weight: 700; line-height: 1;
}

.ud-panel { display: none; }
.ud-panel.active { display: block; }

/* ───────────────────────────────────────────────────────────────────────────
   2. Welcome landing (uw-*)
   Red is reserved for one thing per screen — the single "next step". Every
   other card stays neutral so that one accent actually means something.
   ─────────────────────────────────────────────────────────────────────────── */
.uw-sec { margin: 0 0 2.75rem; }
.uw-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: 0 0 1rem; }
.uw-sec-head h2 { font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; margin: 0; }
.uw-sec-head a { font-size: .85rem; font-weight: 700; color: var(--text-muted); text-decoration: none; }
.uw-sec-head a:hover { color: var(--brand); }

/* Next step — the single accented element on the page. */
.uw-next {
    display: flex; align-items: center; gap: 1.15rem; padding: 1.35rem 1.5rem;
    border: 1px solid var(--border); border-left: 3px solid var(--brand);
    border-radius: 14px; background: var(--surface); text-decoration: none; color: inherit;
    margin-bottom: 2.75rem; transition: box-shadow .15s, transform .15s;
}
.uw-next:hover { box-shadow: 0 12px 30px -18px rgba(16,24,40,.45); transform: translateY(-1px); }
.uw-next .k { font-size: .68rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--brand); }
.uw-next .t { font-size: 1.12rem; font-weight: 700; letter-spacing: -.02em; margin: .15rem 0 .1rem; }
.uw-next .d { font-size: .9rem; color: var(--text-secondary); line-height: 1.55; }
.uw-next .go { margin-left: auto; flex: none; color: var(--text-faint); }

/* Homes — photography carries the row. */
.uw-homes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(212px, 100%), 1fr)); gap: 1.1rem; }
.uw-home { text-decoration: none; color: inherit; display: block; min-width: 0; }
.uw-home .ph { aspect-ratio: 4/3; border-radius: 12px; background: var(--bg-muted) center/cover; overflow: hidden; position: relative; }
.uw-home .ph::after { content: ''; position: absolute; inset: 0; border-radius: 12px; box-shadow: inset 0 0 0 1px rgba(16,24,40,.07); }
.uw-home:hover .ph { box-shadow: 0 14px 30px -18px rgba(16,24,40,.5); }
.uw-home .p { font-size: 1rem; font-weight: 700; letter-spacing: -.02em; margin: .6rem 0 .1rem; }
.uw-home .a { font-size: .85rem; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uw-home .m { font-size: .8rem; color: var(--text-faint); margin-top: .15rem; }

.uw-searches { display: grid; gap: .6rem; }
.uw-search {
    display: flex; align-items: center; gap: .9rem; padding: .85rem 1.1rem;
    border: 1px solid var(--border); border-radius: 12px; background: var(--surface);
    text-decoration: none; color: inherit;
}
.uw-search:hover { border-color: var(--border-strong); }
.uw-search .n { font-weight: 700; font-size: .94rem; }
.uw-search .c { font-size: .82rem; color: var(--text-muted); }
.uw-search .go { margin-left: auto; color: var(--text-faint); font-size: .82rem; font-weight: 700; }

/* Tools are a utility rail, not the main event — one line each. */
.uw-tools { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(228px, 100%), 1fr)); gap: .6rem; }
.uw-tool {
    display: flex; align-items: center; gap: .7rem; padding: .8rem .95rem;
    border: 1px solid var(--border); border-radius: 11px; background: var(--surface);
    text-decoration: none; color: inherit; font-size: .9rem; font-weight: 600; min-width: 0;
}
.uw-tool:hover { border-color: var(--border-strong); background: var(--bg-subtle); }
.uw-tool svg { flex: none; color: var(--text-faint); }
.uw-tool:hover svg { color: var(--brand); }
.uw-tool span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* First run: one clear invitation, not a scoreboard of zeroes. */
.uw-empty { border: 1px dashed var(--border-strong); border-radius: 14px; padding: 2.25rem 1.75rem; text-align: center; background: var(--surface); }
.uw-empty h3 { font-size: 1.15rem; font-weight: 700; letter-spacing: -.02em; margin: 0 0 .4rem; }
.uw-empty p { color: var(--text-secondary); line-height: 1.6; margin: 0 auto 1.4rem; max-width: 46ch; font-size: .94rem; }
.uw-empty a { display: inline-block; background: var(--brand); color: var(--text-on-brand); text-decoration: none; font-weight: 700; font-size: .92rem; padding: .75rem 1.5rem; border-radius: 999px; }
.uw-empty a:hover { background: var(--brand-hover); }

/* "Worth reading" article cards. No cover image → no image block: the pink
   gradient fallback read as a broken image rather than a design choice. */
.ud-articles { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.ud-article {
    display: flex; flex-direction: column;
    background: var(--surface); border: 1px solid var(--bg-muted); border-radius: var(--radius-lg);
    overflow: hidden; text-decoration: none; color: inherit;
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.ud-article:hover { transform: translateY(-3px); border-color: var(--brand); box-shadow: 0 14px 30px rgba(16,24,40,0.08); }
.ud-article .thumb { height: 160px; background: var(--bg-muted); background-size: cover; background-position: center; }
.ud-article .thumb[data-noimg] { display: none; }
.ud-article .body { padding: 1rem 1.15rem 1.2rem; flex: 1; display: flex; flex-direction: column; gap: 0.4rem; }
.ud-article .tag { font-size: 0.66rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--brand); }
.ud-article h4 { font-size: 0.98rem; font-weight: 700; color: var(--text); margin: 0; letter-spacing: -0.2px; line-height: 1.3; }
.ud-article p { font-size: 0.85rem; color: var(--text-secondary); line-height: 1.5; margin: 0; flex: 1; }
.ud-article .meta { font-size: 0.74rem; color: var(--text-faint); margin-top: 0.15rem; }

/* ───────────────────────────────────────────────────────────────────────────
   3. Cards, buttons, notes, shared form controls (ud-*)
   ─────────────────────────────────────────────────────────────────────────── */
.ud-card {
    background: var(--surface); border: 1px solid var(--bg-muted); border-radius: var(--radius-xl);
    padding: 2.25rem 2.25rem 2.5rem; box-shadow: 0 2px 10px rgba(16,24,40,0.04);
}
.ud-card + .ud-card { margin-top: 1.5rem; }
.ud-card h2 { font-size: 1.2rem; font-weight: 700; letter-spacing: -0.3px; margin: 0 0 0.45rem; }
.ud-card p.ud-lead { color: var(--text-muted); font-size: 0.95rem; line-height: 1.6; margin: 0 0 1.75rem; }
/* Header row inside a card: title left, action(s) right. */
.ud-card-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.ud-card-head h2 { margin: 0; }
.ud-scroll-x { overflow-x: auto; margin-top: 0.5rem; }

/* Account settings forms (Profile + Password panels).
   These use the `.form-section-title` / `.form-group-sys` / `.field-hint` /
   `.input-sys` / `.grid-2` class system — the SAME names the admin/agent
   profile editors use, but those live in adminbackend.css / forms.css, which
   this page does NOT load. So the styling is defined here, scoped to `.ud-card`
   so it only affects the dashboard, and matched to the rest of this sheet. */
.ud-card .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem 1.25rem; }
.ud-card .form-section-title {
    font-size: 0.92rem; font-weight: 700; color: var(--text); letter-spacing: -0.01em;
    margin: 1.75rem 0 1rem; padding-bottom: 0.55rem; border-bottom: 1px solid var(--bg-muted);
}
.ud-card .form-section-title:first-child { margin-top: 0.25rem; }
.ud-card .form-group-sys { display: flex; flex-direction: column; margin-bottom: 1.15rem; min-width: 0; }
.ud-card .form-group-sys label {
    font-weight: 700; font-size: 0.85rem; color: var(--text-strong); margin-bottom: 0.2rem;
}
.ud-card .field-hint {
    font-size: 0.8rem; color: var(--text-muted); line-height: 1.45; margin: 0 0 0.5rem;
}
.ud-card .input-sys {
    width: 100%; box-sizing: border-box; font-family: inherit; font-size: 0.93rem;
    padding: 0.65rem 0.8rem; border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--surface); color: var(--text); outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.ud-card .input-sys:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ring); }
.ud-card .input-sys::placeholder { color: var(--text-faint); }
.ud-card textarea.input-sys { resize: vertical; min-height: 82px; }

.ud-actions { display: flex; gap: 0.6rem; align-items: center; margin-top: 0.5rem; flex-wrap: wrap; }
.ud-btn {
    padding: 0.7rem 1.35rem; border-radius: var(--radius); font-weight: 700; font-size: 0.9rem;
    font-family: inherit; cursor: pointer; border: 1px solid transparent;
    transition: opacity 0.15s, background 0.15s;
}
/* Anchors styled as buttons (My-home CTAs, empty-state links). */
a.ud-btn { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.ud-btn-primary { background: var(--brand); color: var(--text-on-brand); }
.ud-btn-primary:hover { background: var(--brand-hover); }
.ud-btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }
.ud-btn-link {
    background: none; color: var(--danger); border: none;
    font-weight: 600; font-size: 0.9rem; cursor: pointer;
    padding: 0.7rem 0.5rem; margin-left: auto;
}

/* Secondary / ghost button, sibling to .ud-btn-primary. */
.ud-btn-ghost {
    padding: 0.7rem 1.2rem; border-radius: var(--radius); font: inherit; font-weight: 700; font-size: 0.9rem;
    background: var(--surface); border: 1px solid var(--border); color: var(--text-strong); cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.ud-btn-ghost:hover { border-color: var(--brand); color: var(--brand); }
/* Ghost button used destructively (Remove). */
.ud-btn-ghost.danger { color: var(--danger); }
.ud-btn-ghost.danger:hover { border-color: var(--danger); color: var(--danger); background: var(--danger-tint); }

.ud-note {
    padding: 0.75rem 1rem; border-radius: var(--radius-sm); font-size: 0.88rem;
    margin-top: 0.75rem; display: none;
}
.ud-note.show, .ud-note.ok, .ud-note.err { display: block; }
.ud-note.ok  { background: var(--success-tint); color: var(--success); border: 1px solid #c6f6d5; }
.ud-note.err { background: var(--danger-tint); color: var(--danger); border: 1px solid var(--danger-border); }

/* Sub-heading inside a card (Documents, posted searches, maintenance…). */
.ud-subhead { font-size: 1.05rem; font-weight: 700; color: var(--text); margin: 1.75rem 0 0.7rem; display: flex; align-items: center; gap: 0.5rem; }
.ud-subhead svg { color: var(--brand); flex-shrink: 0; }

/* Inline mini-loading text (list containers before data arrives). */
.ud-loading { color: var(--text-faint); font-size: 0.9rem; padding: 0.5rem 0; }

/* Shared form controls (wallet / post-a-search / alerts). */
.ud-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.15rem 1rem; max-width: 660px; }
.ud-form-grid .full { grid-column: 1 / -1; }
.ud-label { display: block; font-weight: 600; font-size: 0.8rem; letter-spacing: .01em; color: var(--text-strong); margin-bottom: 0.4rem; }
.ud-input, .ud-select, .ud-textarea {
    width: 100%; box-sizing: border-box;
    padding: 0.72rem 0.9rem; border: 1px solid var(--border); border-radius: 10px;
    font: inherit; font-size: 0.92rem; color: var(--text); background: var(--bg-subtle);
    outline: none; transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.ud-input::placeholder, .ud-textarea::placeholder { color: var(--text-faint); }
.ud-input:hover, .ud-select:hover, .ud-textarea:hover { border-color: var(--border-strong); }
.ud-input:focus, .ud-select:focus, .ud-textarea:focus { border-color: var(--brand); background: var(--surface); box-shadow: 0 0 0 3px var(--brand-ring); }
.ud-textarea { resize: vertical; min-height: 64px; }
.ud-textarea.full { grid-column: 1 / -1; }

/* Kill the native number spinners — they made the money/income fields look raw. */
.ud-input[type=number] { -moz-appearance: textfield; appearance: textfield; }
.ud-input[type=number]::-webkit-outer-spin-button,
.ud-input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Custom select chevron in place of the native double-arrow (theme-aware). */
.ud-select {
    appearance: none; -webkit-appearance: none; -moz-appearance: none; cursor: pointer;
    padding-right: 2.4rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 0.85rem center; background-size: 16px;
}
:root[data-theme="dark"] .ud-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

/* Money fields — a leading $ so budgets/income read as currency, not raw numbers.
   Wrap the <input> in <span class="ud-money"> in the markup. */
.ud-money { position: relative; display: block; }
.ud-money::before {
    content: "$"; position: absolute; left: 0.9rem; top: 50%; transform: translateY(-50%);
    color: var(--text-muted); font-size: 0.92rem; font-weight: 600; pointer-events: none;
}
.ud-money .ud-input { padding-left: 1.75rem; }
/* Inline field row (the "add a document / task" input + button strips). */
.ud-inline-add { display: flex; gap: 0.5rem; margin-top: 0.6rem; flex-wrap: wrap; }
.ud-inline-add .ud-input { flex: 1; min-width: 150px; width: auto; }
/* Compact filter grid (price-alert criteria row). */
.ud-filter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.7rem; margin: 0.5rem 0 1rem; }

/* Generic centered empty state: icon + heading + helper + optional CTA. */
.ud-empty {
    display: flex; flex-direction: column; align-items: center; gap: 0.45rem;
    text-align: center; padding: 2.75rem 1.5rem;
    background: var(--bg-subtle); border: 1px dashed var(--border); border-radius: var(--radius-md);
    grid-column: 1 / -1;
}
.ud-empty-ic {
    display: inline-flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; border-radius: 50%;
    background: var(--brand-tint); color: var(--brand); margin-bottom: 0.35rem;
}
.ud-empty h4 { font-size: 1.02rem; font-weight: 700; color: var(--text); margin: 0; }
.ud-empty p { font-size: 0.9rem; color: var(--text-muted); margin: 0; max-width: 400px; line-height: 1.55; }
.ud-empty .ud-btn { margin-top: 0.8rem; text-decoration: none; }

/* ───────────────────────────────────────────────────────────────────────────
   4. Submissions list (ud-lead-*)
   Each submission is its own bordered row-card so a single entry still reads
   as an intentional item instead of floating in the card's whitespace.
   ─────────────────────────────────────────────────────────────────────────── */
.ud-leads-state {
    color: var(--text-muted); font-size: 0.92rem;
    padding: 2.5rem 1.5rem; text-align: center;
    background: var(--bg-subtle); border: 1px dashed var(--border); border-radius: var(--radius-md);
    grid-column: 1 / -1;
}
.ud-leads-state.err { color: var(--danger); border-color: var(--danger-border); background: var(--danger-tint); }
/* Inline error line for a list container that failed to load. */
.ud-error { color: var(--danger); font-size: 0.9rem; padding: 0.5rem 0; }
.ud-leads-list { display: flex; flex-direction: column; gap: 0.85rem; }
.ud-lead-item {
    display: flex; align-items: flex-start; gap: 1rem;
    padding: 1.25rem 1.4rem;
    background: var(--bg-subtle); border: 1px solid var(--bg-muted); border-radius: var(--radius-md);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.ud-lead-item:hover { border-color: var(--border-strong); box-shadow: 0 4px 14px rgba(16,24,40,0.05); }
.ud-lead-main { flex: 1; min-width: 0; }
.ud-lead-top { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.ud-lead-type {
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase;
    color: var(--brand); background: var(--brand-tint); padding: 0.2rem 0.55rem; border-radius: 5px;
}
.ud-lead-status {
    font-size: 0.72rem; font-weight: 700; text-transform: capitalize;
    padding: 0.2rem 0.55rem; border-radius: 5px;
    background: #f1f5f9; color: #475569;
}
/* Pill colours cover every lead_status_type enum value. */
.ud-lead-status.new         { background: #fef9c3; color: #854d0e; }
.ud-lead-status.unassigned  { background: #f1f5f9; color: #64748b; }
.ud-lead-status.assigned    { background: #ffe0e1; color: #a33034; }
.ud-lead-status.contacted   { background: #fedbdc; color: #af1e23; }
.ud-lead-status.in_progress { background: #ffedd5; color: #9a3412; }
.ud-lead-status.closed      { background: #dcfce7; color: var(--success); }
.ud-lead-status.archived    { background: #f1f5f9; color: #94a3b8; }
.ud-lead-date { font-size: 0.8rem; color: var(--text-faint); margin-left: auto; }
.ud-lead-detail { font-size: 0.92rem; color: var(--text); font-weight: 600; margin: 0 0 0.15rem; }
.ud-lead-note { font-size: 0.86rem; color: var(--text-muted); line-height: 1.5; margin: 0.25rem 0 0; white-space: pre-line; }
.ud-lead-agent { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.85rem; padding-top: 0.85rem; border-top: 1px solid var(--bg-muted); flex-wrap: wrap; }
.ud-la-ava { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; background: var(--brand-tint); }
.ud-la-init { display: grid; place-items: center; color: var(--brand); font-weight: 700; }
.ud-la-id { min-width: 0; }
.ud-la-role { font-size: 0.8rem; color: var(--text-muted); }
.ud-la-name { font-weight: 700; color: var(--text); }
.ud-la-name .brk { font-weight: 500; color: var(--text-muted); }
.ud-la-cta { margin-left: auto; display: flex; gap: 0.4rem; flex-wrap: wrap; }
.ud-la-btn { border: 1px solid var(--border); background: var(--surface); border-radius: var(--radius-sm); padding: 0.4rem 0.8rem; font: inherit; font-size: 0.82rem; font-weight: 700; color: var(--text-strong); cursor: pointer; text-decoration: none; transition: border-color 0.15s, color 0.15s; }
.ud-la-btn.ghost { color: var(--danger); }
.ud-la-btn:hover { border-color: var(--brand); color: var(--brand); }
.ud-la-msg { font-size: 0.85rem; color: var(--success); font-weight: 600; margin-left: auto; }
.ud-la-msg.err { color: #9a3412; }

/* ───────────────────────────────────────────────────────────────────────────
   5. Property / open-house / listing cards (ud-prop-*)
   Shared card shell for Saved properties and Saved open houses.
   ─────────────────────────────────────────────────────────────────────────── */
.ud-grid { display: grid; gap: 1rem; margin-top: 0.5rem; }
.ud-grid--saved { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.ud-grid--oh    { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.ud-grid--viewed { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 0.8rem; }

.ud-prop {
    border: 1px solid var(--bg-muted); border-radius: 12px; overflow: hidden;
    background: var(--surface); display: flex; flex-direction: column;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.ud-prop:hover { border-color: var(--border-strong); box-shadow: 0 10px 26px -18px rgba(16,24,40,0.45); }
.ud-prop-media { position: relative; height: 130px; background: var(--bg-muted); }
.ud-prop-media.tall { aspect-ratio: 4/3; height: auto; }
.ud-prop-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ud-prop-media .fill { display: block; width: 100%; height: 100%; background: var(--bg-muted) center/cover; }
.ud-prop-badge {
    position: absolute; top: 0.6rem; left: 0.6rem;
    color: var(--text-on-brand); font-size: 0.68rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.4px; padding: 0.2rem 0.55rem; border-radius: 99px;
    background: #1a202c;
}
.ud-prop-badge.live { background: #2f855a; }
.ud-prop-link { display: block; text-decoration: none; color: inherit; }
.ud-prop-body { padding: 0.8rem 0.9rem; flex: 1; display: flex; flex-direction: column; gap: 0.25rem; }
.ud-prop-price { font-weight: 700; color: var(--text); }
.ud-prop-title { font-weight: 700; font-size: 0.92rem; line-height: 1.25; color: var(--text); }
.ud-prop-sub { font-size: 0.8rem; color: var(--text-secondary); }
.ud-prop-when { font-size: 0.82rem; font-weight: 700; color: var(--brand); margin-top: 0.15rem; }
.ud-prop-agent { font-size: 0.74rem; color: var(--text-faint); }
.ud-prop-host { font-size: 0.76rem; color: var(--text-faint); }
.ud-prop-foot { display: flex; gap: 0.4rem; padding: 0 0.85rem 0.75rem; margin-top: auto; }
.ud-prop-foot.tight { margin-top: 0.5rem; padding: 0 0.9rem 0.8rem; }

/* Small remove / secondary action buttons inside cards. */
.ud-mini {
    border: 1px solid var(--border); background: var(--surface); border-radius: 7px;
    padding: 0.4rem 0.7rem; font: inherit; font-size: 0.8rem; font-weight: 600;
    color: var(--text-strong); cursor: pointer; text-decoration: none;
    display: inline-flex; align-items: center; justify-content: center; gap: 0.3rem;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.ud-mini:hover { border-color: var(--brand); color: var(--brand); }
.ud-mini.grow { flex: 1; text-align: center; }
.ud-mini.danger { color: var(--danger); }
.ud-mini.danger:hover { border-color: var(--danger); color: var(--danger); background: var(--danger-tint); }

/* Recently-viewed mini card. */
.ud-viewed-card { text-decoration: none; color: inherit; border: 1px solid var(--bg-muted); border-radius: 10px; overflow: hidden; display: block; transition: border-color 0.15s; }
.ud-viewed-card:hover { border-color: var(--border-strong); }
.ud-viewed-card .ph { height: 90px; background: var(--bg-muted) center/cover; }
.ud-viewed-card .bd { padding: 0.5rem 0.6rem; }
.ud-viewed-card .t { font-weight: 700; font-size: 0.82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); }
.ud-viewed-card .s { font-size: 0.75rem; color: var(--text-muted); }

/* Compare table. */
.ud-compare-table { border-collapse: collapse; min-width: 100%; font-size: 0.88rem; }
.ud-compare-table th { text-align: left; padding: 0.6rem; border-bottom: 2px solid var(--bg-muted); min-width: 130px; }
.ud-compare-table th.lbl { min-width: 0; }
.ud-compare-table th a { color: var(--brand); text-decoration: none; font-weight: 700; }
.ud-compare-table td { padding: 0.55rem 0.6rem; border-bottom: 1px solid var(--bg-subtle); font-weight: 600; color: var(--text); }
.ud-compare-table td.lbl { color: var(--text-muted); font-weight: 700; }

/* ───────────────────────────────────────────────────────────────────────────
   6. Deal rooms (ud-deal-*), alerts (ud-alert-*), posted searches (ud-need-*)
   ─────────────────────────────────────────────────────────────────────────── */
.ud-rows { margin-top: 1rem; display: grid; gap: 0.7rem; }

.ud-deal {
    display: block; text-decoration: none; color: inherit;
    border: 1px solid var(--bg-muted); border-radius: 12px; padding: 1rem 1.2rem;
    transition: box-shadow .15s, border-color .15s;
}
.ud-deal:hover { border-color: var(--border-strong); box-shadow: 0 6px 18px rgba(0,0,0,0.08); }
.ud-deal-top { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; }
.ud-deal-addr { font-weight: 700; color: var(--text); }
.ud-deal-stage { background: var(--brand-tint); color: var(--brand); font-size: 0.7rem; font-weight: 700; padding: 0.15rem 0.5rem; border-radius: 5px; text-transform: uppercase; }
.ud-deal-steps { margin-left: auto; font-size: 0.8rem; color: var(--text-faint); font-weight: 700; }
.ud-deal-with { font-size: 0.85rem; color: var(--text-muted); margin-top: 0.25rem; }
.ud-deal-bar { height: 6px; background: var(--bg-muted); border-radius: 99px; margin-top: 0.6rem; overflow: hidden; }
.ud-deal-bar i { display: block; height: 100%; background: var(--brand); border-radius: 99px; }

.ud-list-h { font-size: 1.05rem; font-weight: 700; margin: 0 0 0.5rem; color: var(--text); }
.ud-row {
    display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
    border: 1px solid var(--bg-muted); border-radius: 10px; padding: 0.75rem 0.9rem;
    background: var(--surface);
}
.ud-row-main { min-width: 0; flex: 1; }
.ud-row-title { font-weight: 700; color: var(--text); }
.ud-row-sub { font-size: 0.8rem; color: var(--text-muted); }
.ud-row .spacer { margin-left: auto; }
.ud-need-count { margin-left: auto; font-weight: 700; color: var(--brand); font-size: 0.85rem; }
.ud-need-status { font-size: 0.82rem; color: var(--text-muted); }

/* ───────────────────────────────────────────────────────────────────────────
   7. My home (ud-home-*)
   ─────────────────────────────────────────────────────────────────────────── */
.ud-home-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.ud-home-addr { font-weight: 700; font-size: 1.15rem; color: var(--text); }
.ud-home-where { color: var(--text-muted); font-size: 0.9rem; }
.ud-home-stats {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1rem;
    margin: 1.25rem 0; padding: 1.25rem; background: var(--bg-subtle); border-radius: 12px;
}
.ud-home-stat .lbl { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-faint); font-weight: 700; }
.ud-home-stat .num { font-size: 1.5rem; font-weight: 700; color: var(--text); }
.ud-home-stat .num.brand { color: var(--brand); }
.ud-home-stat .num small { font-size: 0.9rem; }
.ud-home-fine { font-size: 0.75rem; color: var(--text-faint); margin: -0.5rem 0 1rem; }
.ud-home-signal {
    display: flex; gap: 0.8rem; align-items: flex-start;
    border: 1px solid var(--bg-muted); border-radius: 12px; padding: 1rem 1.15rem; margin-bottom: 0.7rem;
}
.ud-home-signal .ic { display: inline-flex; flex: none; color: var(--brand); }
.ud-home-signal .t { font-weight: 700; color: var(--text); }
.ud-home-signal .d { font-size: 0.9rem; color: var(--text-secondary); margin-top: 0.15rem; line-height: 1.5; }
.ud-home-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 1.25rem; }
.ud-home-sec { margin-top: 1.75rem; border-top: 1px solid var(--bg-muted); padding-top: 1.5rem; }
.ud-home-sec:first-of-type { margin-top: 2rem; }
.ud-home-sec h3 { font-size: 1.15rem; font-weight: 700; margin: 0 0 0.75rem; display: flex; align-items: center; gap: 0.5rem; color: var(--text); }
.ud-home-sec h3 svg { color: var(--brand); flex: none; }

/* Home form (add / edit a home). */
.ud-home-form { max-width: 640px; }
.ud-home-form .fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; }
.ud-home-form .full { grid-column: 1 / -1; }
.ud-field label { font-weight: 700; font-size: 0.82rem; color: var(--text-strong); }
.ud-field input {
    width: 100%; box-sizing: border-box; padding: 0.55rem 0.7rem;
    border: 1px solid var(--border); border-radius: 8px; font: inherit; margin-top: 0.25rem;
    background: var(--surface); color: var(--text); outline: none; transition: border-color 0.15s, box-shadow 0.15s;
}
.ud-field input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ring); }
/* Always-visible inline note beside a save button (home form). */
.ud-inline-note { margin-left: 0.6rem; font-size: 0.85rem; color: var(--text-muted); }

/* Document / task rows (wallet docs, home docs, maintenance tasks). */
.ud-docrow { display: flex; align-items: center; gap: 0.6rem; padding: 0.35rem 0; }
.ud-docrow .ic { display: inline-flex; flex-shrink: 0; color: var(--text-muted); }
.ud-docrow a, .ud-docrow .nm { color: var(--text-strong); font-weight: 600; text-decoration: none; }
.ud-docrow a:hover { text-decoration: underline; }
.ud-docrow input[type="checkbox"] { width: 17px; height: 17px; flex: none; accent-color: var(--brand); }
.ud-docrow .done { text-decoration: line-through; color: var(--text-faint); }
.ud-docrow .cat { font-size: 0.72rem; color: var(--text-faint); }
.ud-x { margin-left: auto; background: none; border: none; color: var(--border-strong); cursor: pointer; font-size: 1.1rem; line-height: 1; padding: 0 0.2rem; }
.ud-x:hover { color: var(--danger); }
.ud-muted { color: var(--text-faint); font-size: 0.88rem; }

/* Pro chips (Need a hand? categories). */
.ud-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ud-chip {
    border: 1px solid var(--border); background: var(--surface); border-radius: 999px;
    padding: 0.45rem 0.95rem; font-weight: 700; font-size: 0.85rem; cursor: pointer;
    color: var(--text-strong); text-transform: capitalize; transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.ud-chip:hover { border-color: var(--brand); color: var(--brand); }
.ud-chip.done { background: #dcfce7; color: var(--success); border-color: transparent; }

/* ───────────────────────────────────────────────────────────────────────────
   8. Resources panel (res-*)
   ─────────────────────────────────────────────────────────────────────────── */
.res-tabs { display: flex; gap: .5rem; flex-wrap: wrap; margin: 1.2rem 0 1.6rem; border-bottom: 1px solid var(--border); padding-bottom: .9rem; }
.res-tab {
    background: none; border: 1px solid var(--border); border-radius: 999px;
    padding: .5rem 1.1rem; font: inherit; font-size: .9rem; font-weight: 700;
    color: var(--text-secondary); cursor: pointer; transition: all .15s;
}
.res-tab:hover { border-color: var(--brand); color: var(--brand); }
.res-tab.active { background: var(--brand); border-color: var(--brand); color: var(--text-on-brand); }
.res-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }
.res-item { border: 1px solid var(--border); border-radius: 14px; padding: 1.25rem 1.35rem; background: var(--surface); display: flex; flex-direction: column; }
.res-item h4 { margin: 0 0 .35rem; font-size: 1rem; font-weight: 700; color: var(--text); }
.res-item p { margin: 0 0 1rem; font-size: .9rem; line-height: 1.6; color: var(--text-secondary); flex: 1; }
.res-item a { align-self: flex-start; font-weight: 700; font-size: .88rem; color: var(--brand); text-decoration: none; }
.res-item a:hover { text-decoration: underline; }
.res-note { background: var(--bg-subtle); border-radius: 12px; padding: 1rem 1.2rem; font-size: .9rem; line-height: 1.65; color: var(--text-secondary); margin-bottom: 1.3rem; }

/* ───────────────────────────────────────────────────────────────────────────
   9. Messages — two-pane inbox (msg-*)
   ─────────────────────────────────────────────────────────────────────────── */
.msg-wrap { display: grid; grid-template-columns: 300px 1fr; min-height: 520px; }
.msg-list { border-right: 1px solid var(--bg-muted); min-width: 0; display: flex; flex-direction: column; }
.msg-list-head { padding: 1rem 1.2rem; font-weight: 700; color: var(--text); border-bottom: 1px solid var(--bg-muted); font-size: 0.95rem; }
#msg-threads { overflow-y: auto; flex: 1; }
.msg-empty { padding: 1.5rem 1.2rem; color: var(--text-faint); font-size: 0.9rem; }
.msg-item { display: flex; gap: 0.75rem; align-items: center; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--bg-muted); padding: 0.9rem 1.2rem; cursor: pointer; font-family: inherit; transition: background 0.12s; }
.msg-item:hover { background: var(--bg-subtle); }
.msg-item.active { background: var(--brand-tint); }
.msg-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: var(--bg-muted); flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--text-secondary); }
.msg-item-main { min-width: 0; flex: 1; }
.msg-item-name { font-weight: 700; color: var(--text); font-size: 0.92rem; display: flex; align-items: center; gap: 0.4rem; }
.msg-item-preview { color: var(--text-faint); font-size: 0.82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 0.15rem; }
.msg-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--brand); flex-shrink: 0; }
.msg-thread { display: flex; flex-direction: column; min-width: 0; }
.msg-thread-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.8rem; color: var(--text-faint); text-align: center; padding: 2rem; }
.msg-thread-empty-ic { font-size: 2.5rem; color: var(--text-faint); }
.msg-thread-head { padding: 1rem 1.4rem; border-bottom: 1px solid var(--bg-muted); font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 0.7rem; }
.msg-thread-head a { color: var(--brand); font-size: 0.82rem; font-weight: 700; text-decoration: none; margin-left: auto; }
.msg-thread-body { flex: 1; overflow-y: auto; padding: 1.4rem; display: flex; flex-direction: column; gap: 0.7rem; background: var(--bg-subtle); min-height: 320px; max-height: 52vh; }
.msg-bubble { max-width: 76%; padding: 0.65rem 0.9rem; border-radius: 14px; font-size: 0.93rem; line-height: 1.45; white-space: pre-wrap; word-wrap: break-word; }
.msg-bubble.them { align-self: flex-start; background: var(--surface); border: 1px solid var(--bg-muted); color: var(--text); border-bottom-left-radius: 4px; }
.msg-bubble.me { align-self: flex-end; background: var(--brand); color: var(--text-on-brand); border-bottom-right-radius: 4px; }
.msg-time { font-size: 0.68rem; color: var(--text-faint); margin-top: 0.25rem; }
.msg-bubble.me .msg-time { color: rgba(255,255,255,0.75); text-align: right; }
.msg-compose { display: flex; gap: 0.6rem; padding: 0.9rem 1.2rem; border-top: 1px solid var(--bg-muted); align-items: flex-end; }
.msg-compose textarea { flex: 1; resize: none; border: 1px solid var(--bg-muted); border-radius: 12px; padding: 0.65rem 0.9rem; font-family: inherit; font-size: 0.93rem; max-height: 120px; background: var(--surface); color: var(--text); }
.msg-compose textarea:focus { outline: none; border-color: var(--brand); }

/* ───────────────────────────────────────────────────────────────────────────
   10. Responsive
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .ud-shell { grid-template-columns: 220px minmax(0, 1fr); }
    .ud-main { padding: 2.25rem 2rem 3.5rem; }
}
@media (max-width: 900px) {
    .ud-shell { grid-template-columns: 1fr; }
    .ud-side {
        position: sticky; top: var(--header-h); height: auto; z-index: 20;
        flex-direction: row; align-items: center; gap: 0.4rem;
        overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch;
        border-right: 0; border-bottom: 1px solid var(--bg-muted); padding: 0.7rem 1rem;
    }
    .ud-side-id { display: none; }
    .ud-side-signout { margin-top: 0; margin-left: auto; flex-shrink: 0; padding: 0.55rem 0.9rem; }
    .ud-tab { width: auto; flex-shrink: 0; white-space: nowrap; padding: 0.55rem 0.9rem; }
    .ud-main { padding: 1.75rem 1.25rem 3rem; min-height: 0; }
}
@media (max-width: 720px) {
    .msg-wrap { grid-template-columns: 1fr; }
    .msg-list { border-right: 0; border-bottom: 1px solid var(--bg-muted); max-height: 240px; }
    .msg-wrap.thread-open .msg-list { display: none; }
    .msg-wrap:not(.thread-open) .msg-thread { display: none; }
}
@media (max-width: 600px) {
    .ud-title { font-size: 1.6rem; }
    .ud-card .grid-2 { grid-template-columns: 1fr; gap: 0; }
    .ud-card { padding: 1.5rem; }
    .ud-lead-date { margin-left: 0; width: 100%; }
    .ud-form-grid { grid-template-columns: 1fr; }
    .ud-home-form .fields { grid-template-columns: 1fr; }
}