/* ---------------------------------------------------------------------------
 * THEMING RULE FOR ALL FUTURE WORK
 *
 * Never hardcode a colour (no #fff, #eee, etc.) in component styles — always
 * use one of the variables below. They are redefined in the dark palette near
 * the bottom of this file, so anything built on them follows light/dark mode
 * automatically.
 *
 *   --color-bg          page background          --color-surface   cards/panels
 *   --color-fg          body text                --color-muted     secondary text
 *   --color-border      borders/dividers         --color-hover     hover background
 *   --color-primary     accent (links/buttons)   --color-primary-fg  text ON accent
 *   --color-selected    selected row background  --color-danger    errors/destructive
 *   --flash-*           alert colours            --pill-*          badge colours
 *   --cropper-*         avatar crop popup        --map-grid-bg     map placeholder
 *
 * Text placed on --color-primary must use --color-primary-fg (not white), or it
 * becomes unreadable in dark mode where the accent is light.
 * ------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   Prototype public stylesheet.
   Intentionally simple. The whole design will be replaced later.
   Uses CSS variables so theming / dark mode is easy to add.
--------------------------------------------------------------------------- */
:root {
    --color-bg: #ffffff;
    --color-fg: #1f2430;
    --color-muted: #6b7280;
    --color-primary: #2563eb;
    --color-primary-fg: #ffffff;
    --color-border: #e5e7eb;
    --color-surface: #f8fafc;
    --radius: 8px;
    --max-width: 1100px;
    --sidebar-width: 220px;
    --font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    /* Theme-aware extras (light values) */
    --color-hover: #eef2f7;
    --color-selected: #e0e7ff;
    --color-danger: #b91c1c;
    --map-grid-bg: #eef2f7;

    --pill-pin-bg: #fef3c7;  --pill-pin-fg: #92400e;  --pill-pin-border: #fde68a;
    --pill-lock-bg: #e5e7eb; --pill-lock-fg: #374151; --pill-lock-border: #d1d5db;

    --flash-ok-bg: #ecfdf5;  --flash-ok-border: #a7f3d0;  --flash-ok-fg: #065f46;
    --flash-err-bg: #fef2f2; --flash-err-border: #fecaca; --flash-err-fg: #991b1b;
    --flash-info-bg: #eff6ff;--flash-info-border: #bfdbfe;--flash-info-fg: #1e40af;

    --cropper-bg: #ffffff;   --cropper-fg: #1f2430;
    --cropper-stage: #eef2f7;--cropper-border: rgba(0,0,0,.14);
    --cropper-btn-bg: #f8fafc; --cropper-btn-fg: #1f2430;
    --cropper-muted: #6b7280;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--font);
    color: var(--color-fg);
    background: var(--color-bg);
    line-height: 1.5;
}

a { color: var(--color-primary); }

img { max-width: 100%; height: auto; display: block; }

.visually-hidden,
.skip-link {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
}
.skip-link:focus {
    position: static; width: auto; height: auto;
    padding: .5rem; background: var(--color-primary); color: var(--color-primary-fg);
}

/* Header ------------------------------------------------------------------ */
.site-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--color-border);
    position: sticky; top: 0; background: var(--color-bg); z-index: 10;
}
.brand { display: flex; align-items: center; gap: .5rem; font-weight: 700; text-decoration: none; color: var(--color-fg); }
.header-search { margin-left: auto; display: flex; gap: .25rem; }
.header-search input { padding: .4rem .6rem; border: 1px solid var(--color-border); border-radius: var(--radius); }
.nav-toggle {
    display: block;
    background: none; border: 0; cursor: pointer;
    width: 26px; height: 26px; padding: 0;
    flex-shrink: 0;
}
.hamburger {
    position: relative;
    display: block;
    width: 22px; height: 16px;
    margin: 0 auto;
}
.hamburger-bar {
    position: absolute;
    left: 0;
    width: 100%; height: 2px;
    border-radius: 2px;
    background: var(--color-fg);
    transition: transform .25s ease, opacity .2s ease, top .25s ease;
}
.hamburger-bar:nth-child(1) { top: 0; }
.hamburger-bar:nth-child(2) { top: 7px; }
.hamburger-bar:nth-child(3) { top: 14px; }
/* Morph into an X once the sidebar is open — driven entirely by the
   aria-expanded attribute main.js already toggles, no extra JS needed. */
.nav-toggle[aria-expanded="true"] .hamburger-bar:nth-child(1) { top: 7px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .hamburger-bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .hamburger-bar:nth-child(3) { top: 7px; transform: rotate(-45deg); }

/* Layout ------------------------------------------------------------------ */
.layout { display: flex; max-width: var(--max-width); margin: 0 auto; }
/* The sidebar is a collapsible drawer at every screen size — closed by
   default, opened by the hamburger toggle in the header. Fixed positioning
   takes it out of the flex flow entirely, so .content naturally fills the
   space when it's closed, and the drawer overlays on top when it's open. */
.sidebar {
    position: fixed; left: 0; top: 56px; bottom: 0;
    width: 240px;
    background: var(--color-bg);
    border-right: 1px solid var(--color-border);
    padding: 1rem;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform .25s ease;
    box-shadow: 2px 0 16px rgba(0, 0, 0, .25);
    z-index: 20;
}
.sidebar.open { transform: translateX(0); }
.sidebar ul { list-style: none; margin: 0; padding: 0; }
.sidebar a {
    display: block; padding: .5rem .6rem; border-radius: var(--radius);
    text-decoration: none; color: var(--color-fg);
}
.sidebar a:hover, .sidebar a.active { background: var(--color-surface); color: var(--color-primary); }
.content { flex: 1; padding: 1.5rem; min-width: 0; }

/* Components -------------------------------------------------------------- */
.btn {
    display: inline-block; padding: .5rem .9rem; border-radius: var(--radius);
    border: 1px solid var(--color-border); background: var(--color-surface);
    color: var(--color-fg); text-decoration: none; cursor: pointer; font-size: .95rem;
}
.btn:hover { background: var(--color-hover); }
.btn--primary { background: var(--color-primary); color: var(--color-primary-fg); border-color: var(--color-primary); }
.btn--primary:hover { filter: brightness(.95); }
.btn--small { padding: .3rem .6rem; font-size: .85rem; }
.btn--danger { color: #b91c1c; border-color: #fecaca; background: #fef2f2; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

.muted { color: var(--color-muted); font-size: .9rem; }

.flash { padding: .6rem .9rem; border-radius: var(--radius); margin-bottom: 1rem; border: 1px solid; }
.flash--success { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.flash--error   { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.flash--info    { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; }

/* Hero -------------------------------------------------------------------- */
.hero { display: flex; gap: 2rem; align-items: center; flex-wrap: wrap; margin-bottom: 2rem; }
.hero-text { flex: 1 1 300px; }
.hero-media { flex: 1 1 300px; }
.hero h1 { margin-top: 0; }

.home-search { margin: 1.5rem 0; }
.home-search form { display: flex; gap: .5rem; }
.home-search input { flex: 1; padding: .6rem; border: 1px solid var(--color-border); border-radius: var(--radius); }

/* Grids ------------------------------------------------------------------- */
.card-grid, .product-grid {
    display: grid; gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    margin: 1rem 0 2rem;
}
.card, .product-card {
    border: 1px solid var(--color-border); border-radius: var(--radius);
    padding: 1rem; background: var(--color-surface);
}
.card img, .product-card img { border-radius: var(--radius); margin-bottom: .5rem; }
.product-card .price { font-weight: 700; color: var(--color-primary); }

/* Map --------------------------------------------------------------------- */
.map-embed {
    border: 1px dashed var(--color-border); border-radius: var(--radius);
    background: var(--color-surface); min-height: 260px;
    display: flex; align-items: center; justify-content: center; text-align: center;
}
.map-embed--large { min-height: 480px; }
.map-placeholder p { margin: .25rem 0; }
.map-page { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.map-controls { flex: 1 1 220px; }
.map-page .map-embed { flex: 3 1 400px; }
.map-legend ul { list-style: none; padding: 0; }
.marker { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: .4rem; }
.marker--shop { background: #2563eb; } .marker--event { background: #db2777; } .marker--poi { background: #16a34a; }

/* Shop toolbar ------------------------------------------------------------ */
.shop-toolbar { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.shop-toolbar input, .shop-toolbar select { padding: .45rem; border: 1px solid var(--color-border); border-radius: var(--radius); }

.pagination { display: flex; gap: .3rem; margin: 1rem 0; }
.pagination a, .pagination span { padding: .3rem .6rem; border: 1px solid var(--color-border); border-radius: var(--radius); text-decoration: none; }
.pagination .active { background: var(--color-primary); color: var(--color-primary-fg); border-color: var(--color-primary); }

/* Forms ------------------------------------------------------------------- */
.form { max-width: 640px; }
.form--narrow { max-width: 380px; }
.field { margin-bottom: 1rem; }
.field label { display: block; margin-bottom: .3rem; font-weight: 600; }
.field input, .field textarea, .field select {
    width: 100%; padding: .55rem; border: 1px solid var(--color-border); border-radius: var(--radius); font: inherit;
}
.field--checkbox label { font-weight: 400; display: flex; align-items: center; gap: .5rem; }
.field .error, .error { color: var(--color-danger); font-size: .85rem; }
.form-inline { display: flex; gap: .5rem; margin-bottom: 1rem; }

/* Account ----------------------------------------------------------------- */
.account-card { display: flex; gap: 1rem; align-items: center; border: 1px solid var(--color-border); border-radius: var(--radius); padding: 1rem; }
.avatar { width: 72px; height: 72px; border-radius: 50%; }
.account-nav { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 1rem; }

.update-list { list-style: none; padding: 0; }
.update-list li { border-bottom: 1px solid var(--color-border); padding: .75rem 0; }
.search-results { list-style: none; padding: 0; }
.search-results li { border-bottom: 1px solid var(--color-border); padding: .6rem 0; }
.tag { font-size: .75rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 999px; padding: 0 .5rem; }

/* Footer ------------------------------------------------------------------ */
.site-footer { border-top: 1px solid var(--color-border); margin-top: 2rem; padding: 1.5rem 1rem; }
.footer-inner { max-width: var(--max-width); margin: 0 auto; }
.social { list-style: none; display: flex; gap: 1rem; padding: 0; }

/* Responsive -------------------------------------------------------------- */
@media (max-width: 720px) {
    .header-search { display: none; }
}

/* Account menu (header top-right) ---------------------------------------- */
.account { margin-left: 1rem; position: relative; }
.account-login { white-space: nowrap; }
.account-toggle {
    display: flex; align-items: center; gap: .5rem;
    background: none; border: 1px solid var(--color-border); border-radius: 999px;
    padding: .25rem .6rem .25rem .3rem; cursor: pointer; font: inherit; color: var(--color-fg);
}
.account-toggle:hover { background: var(--color-surface); }
.account-avatar { border-radius: 50%; display: block; }
.account-name { font-size: .9rem; font-weight: 600; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-caret { font-size: .7rem; color: var(--color-muted); }
.account-menu {
    position: absolute; right: 0; top: calc(100% + .4rem);
    background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius);
    list-style: none; margin: 0; padding: .3rem; min-width: 190px; z-index: 30;
    box-shadow: 0 6px 20px rgba(0,0,0,.08);
}
.account-menu[hidden] { display: none; }
.account-menu a { display: block; padding: .5rem .6rem; border-radius: var(--radius); text-decoration: none; color: var(--color-fg); font-size: .9rem; }
.account-menu a:hover { background: var(--color-surface); color: var(--color-primary); }
.account-menu hr { border: 0; border-top: 1px solid var(--color-border); margin: .3rem 0; }

@media (max-width: 720px) {
    .account-name { display: none; }
}

/* Subscription pricing cards --------------------------------------------- */
.pricing-grid {
    display: grid; gap: 1rem; margin: 1.5rem 0;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    align-items: start;
}
.plan-card {
    border: 1px solid var(--color-border); border-radius: var(--radius);
    padding: 1.5rem; background: var(--color-bg); display: flex; flex-direction: column;
}
.plan-card--featured { border: 2px solid var(--color-primary); }
.plan-badge {
    align-self: flex-start; background: var(--color-primary); color: var(--color-primary-fg);
    font-size: .7rem; border-radius: 999px; padding: .15rem .6rem; margin-bottom: .6rem;
}
.plan-name { margin: 0 0 .3rem; }
.plan-price { font-size: 1.9rem; font-weight: 700; }
.plan-price small { font-size: .9rem; font-weight: 400; color: var(--color-muted); }
.plan-benefits { list-style: none; padding: 0; margin: 1rem 0; flex: 1; }
.plan-benefits li { padding: .35rem 0; border-bottom: 1px solid var(--color-border); font-size: .92rem; }
.plan-benefits li::before { content: "✓"; color: var(--color-primary); margin-right: .5rem; }

/* Interactive map placeholder with POIs ---------------------------------- */
.map-canvas {
    position: relative; width: 100%; min-height: 480px; border-radius: var(--radius);
    border: 1px solid var(--color-border); overflow: hidden;
    background:
        linear-gradient(0deg, rgba(0,0,0,.04) 1px, transparent 1px) 0 0 / 40px 40px,
        linear-gradient(90deg, rgba(0,0,0,.04) 1px, transparent 1px) 0 0 / 40px 40px,
        #eef2f7;
}
.map-canvas .poi-marker {
    position: absolute; transform: translate(-50%, -100%);
    background: none; border: 0; cursor: pointer; padding: 0; width: 28px; height: 36px;
}
.map-canvas .poi-marker img { width: 28px; height: 36px; pointer-events: none; }
.map-canvas .poi-popup {
    position: absolute; transform: translate(-50%, -100%);
    background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius);
    padding: .75rem; width: 220px; box-shadow: 0 6px 20px rgba(0,0,0,.12); z-index: 5;
}
.map-canvas .poi-popup h3 { margin: 0 0 .3rem; font-size: .95rem; }
.map-canvas .poi-popup p { margin: 0; font-size: .82rem; color: var(--color-muted); }
.map-canvas .poi-popup .close { position: absolute; top: .3rem; right: .5rem; cursor: pointer; border: 0; background: none; font-size: 1rem; color: var(--color-muted); }
.map-empty { padding: 2rem; text-align: center; color: var(--color-muted); }

/* Map page layout tweaks for the new canvas + POI list -------------------- */
.map-page .map-canvas { flex: 2 1 400px; }
.poi-list { margin-top: 1rem; }
.poi-list ul { list-style: none; padding: 0; margin: .5rem 0 0; display: flex; flex-direction: column; gap: .35rem; }
.poi-jump { text-align: left; }

/* ==========================================================================
   FORUM
   ========================================================================== */

.forum-head { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.forum-head h1 { margin: 0; flex: 1; }

/* Breadcrumb: Forum » Pet training » Chihuahua */
.breadcrumb { font-size: .9rem; margin-bottom: .75rem; color: var(--color-muted); }
.breadcrumb a { color: var(--color-primary); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb span { margin: 0 .15rem; }

/* Category index */
.forum-cat { margin-bottom: 1.5rem; }
.forum-cat h2 { margin-bottom: .25rem; }
.subcat-list { list-style: none; padding: 0; margin: .5rem 0 0; }
.subcat-list li {
    border: 1px solid var(--color-border); border-radius: var(--radius);
    padding: .7rem .9rem; margin-bottom: .5rem; background: var(--color-surface);
}
.subcat-list li a { font-weight: 600; text-decoration: none; }
.subcat-list li p { margin: .2rem 0 0; }

/* Thread lists */
.thread-list { list-style: none; padding: 0; }
.thread-list li {
    border-bottom: 1px solid var(--color-border);
    padding: .7rem 0; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
}
.thread-list li a { font-weight: 600; text-decoration: none; }
.thread-list li .muted { flex-basis: 100%; }

/* Pinned / locked pills */
.pill { font-size: .7rem; border-radius: 999px; padding: .1rem .5rem; font-weight: 600; }
.pill--pin  { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }
.pill--lock { background: #e5e7eb; color: #374151; border: 1px solid #d1d5db; }

/* Thread header + tags (mockup: title left, tag pills right) */
.thread-head { display: flex; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.thread-head h1 { margin: 0 0 .5rem; flex: 1 1 300px; }
.thread-tags { display: flex; gap: .35rem; flex-wrap: wrap; padding-top: .4rem; }

.thread-meta {
    display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
    border-bottom: 2px solid var(--color-primary); padding-bottom: .5rem; margin-bottom: 1rem;
}
.sort-form { margin-left: auto; display: flex; align-items: center; gap: .4rem; font-size: .85rem; }
.sort-form select { padding: .3rem; border: 1px solid var(--color-border); border-radius: var(--radius); font-size: .85rem; }

/* Posts: author card on the left, body on the right (as in the mockup) */
.post {
    display: flex; gap: 1.25rem; padding: 1rem 0;
    border-bottom: 1px solid var(--color-border); flex-wrap: wrap;
}
.post-author { flex: 0 0 150px; }
.post-author .author-name { display: flex; align-items: center; gap: .4rem; margin-bottom: .5rem; }
.author-avatar { width: 88px; height: 88px; border-radius: 50%; background: var(--color-surface); }
.post-author p { margin: .15rem 0; }

/* Online / offline dot */
.presence { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.presence--on  { background: #16a34a; box-shadow: 0 0 0 2px var(--color-bg); }  /* green = online */
.presence--off { background: var(--color-muted); box-shadow: 0 0 0 2px var(--color-bg); }  /* grey = offline */

.post-body { flex: 1 1 300px; min-width: 0; }
.post-date { font-size: .85rem; margin-bottom: .5rem; }
.post-text { line-height: 1.6; }
.post-actions { display: flex; align-items: center; gap: .75rem; margin-top: .75rem; justify-content: flex-end; }
.report-form { display: inline; }
.link-danger {
    background: none; border: 0; color: var(--color-danger); cursor: pointer;
    font: inherit; font-size: .85rem; padding: 0; text-decoration: none;
}
.link-danger:hover { text-decoration: underline; }

/* Tag picker on the new-thread form */
.tag-picker { display: flex; flex-wrap: wrap; gap: .5rem; }
.tag-choice {
    display: inline-flex; align-items: center; gap: .3rem;
    border: 1px solid var(--color-border); border-radius: 999px;
    padding: .25rem .7rem; font-size: .85rem; cursor: pointer; background: var(--color-surface);
}
.tag-choice input { margin: 0; }

@media (max-width: 720px) {
    .post-author { flex-basis: 100%; display: flex; align-items: center; gap: .75rem; }
    .author-avatar { width: 48px; height: 48px; }
    .post-author p { margin: 0; font-size: .8rem; }
}

/* Tag directory (cloud) + clickable tag pills */
a.tag { text-decoration: none; cursor: pointer; }
a.tag:hover { background: var(--color-primary); color: var(--color-primary-fg); border-color: var(--color-primary); }
.tag-cloud { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0; }
.tag-cloud-item {
    display: inline-flex; align-items: center; gap: .4rem;
    border: 1px solid var(--color-border); border-radius: 999px;
    padding: .35rem .8rem; text-decoration: none; color: var(--color-fg);
    background: var(--color-surface); font-size: .9rem;
}
.tag-cloud-item:hover { border-color: var(--color-primary); color: var(--color-primary); }
.tag-count {
    background: var(--color-primary); color: var(--color-primary-fg); border-radius: 999px;
    font-size: .72rem; padding: 0 .45rem; min-width: 1.2rem; text-align: center;
}

/* ==========================================================================
   FRIENDS + MESSAGING
   ========================================================================== */

.account-badge {
    background: #dc2626; color: #fff; border-radius: 999px;
    font-size: .7rem; padding: 0 .4rem; margin-left: .2rem; font-weight: 700;
}

/* People lists (friends, requests, search results) */
.people-list { list-style: none; padding: 0; margin: .5rem 0 1.5rem; }
.people-list li {
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    border: 1px solid var(--color-border); border-radius: var(--radius);
    padding: .6rem .9rem; margin-bottom: .5rem; background: var(--color-surface);
}

/* Inbox */
.convo-list { list-style: none; padding: 0; }
.convo-list li { border-bottom: 1px solid var(--color-border); }
.convo-list li a { display: block; padding: .8rem .3rem; text-decoration: none; color: var(--color-fg); }
.convo-list li a:hover { background: var(--color-surface); }
.convo-title { font-weight: 600; display: flex; align-items: center; gap: .4rem; }
.convo-snippet { display: block; margin-top: .1rem; }
.convo--unread .convo-title { font-weight: 800; }
.dot-unread { width: 9px; height: 9px; border-radius: 50%; background: var(--color-primary); display: inline-block; }

/* Group-create checklist */
.check-list { display: flex; flex-direction: column; gap: .35rem; }
.check-item { display: flex; align-items: center; gap: .5rem; }

/* Conversation layout: chat on the left, group sidebar on the right */
.chat-wrap { display: flex; gap: 1.25rem; flex-wrap: wrap; align-items: flex-start; }
.chat-main { flex: 2 1 380px; min-width: 0; display: flex; flex-direction: column; }
.chat-side { flex: 1 1 220px; border: 1px solid var(--color-border); border-radius: var(--radius); padding: 1rem; background: var(--color-surface); }

.chat-log {
    border: 1px solid var(--color-border); border-radius: var(--radius);
    padding: 1rem; height: 460px; overflow-y: auto; background: var(--color-bg);
    display: flex; flex-direction: column; gap: .6rem;
}
.chat-empty { margin: auto; }

.msg { max-width: 80%; align-self: flex-start; }
.msg--mine { align-self: flex-end; text-align: right; }
.msg-meta { font-size: .78rem; margin-bottom: .15rem; }
.msg-body {
    display: inline-block; padding: .5rem .75rem; border-radius: 12px;
    background: var(--color-surface); border: 1px solid var(--color-border);
    text-align: left; word-wrap: break-word; overflow-wrap: anywhere;
}
.msg--mine .msg-body { background: var(--color-primary); color: var(--color-primary-fg); border-color: var(--color-primary); }

/* Read-receipt ticks (sent DMs/group messages only — shown next to the
   timestamp in .msg-meta for messages the current user sent). Telegram-style:
   one tick = sent, two grey ticks = delivered/unread, two accent ticks = read. */
.msg-status {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    margin-left: .3rem;
    color: var(--color-muted);
    vertical-align: middle;
    line-height: 0;
    white-space: nowrap;
}
.msg-status svg { width: 14px; height: 10px; display: inline-block; flex-shrink: 0; }
.msg-status .tick-2 { margin-left: -7px; } /* overlap the two check marks like Telegram */
.msg-status--sent .tick-2 { display: none; }
.msg-status--read { color: var(--color-primary); }

.chat-send { display: flex; gap: .5rem; margin-top: .75rem; }
.chat-send textarea { flex: 1; padding: .55rem; border: 1px solid var(--color-border); border-radius: var(--radius); font: inherit; resize: vertical; }

.member-list { list-style: none; padding: 0; margin: 0 0 1rem; }
.member-list li { display: flex; align-items: center; gap: .4rem; padding: .35rem 0; border-bottom: 1px solid var(--color-border); }
.chat-side-actions { margin-top: 1rem; display: flex; flex-direction: column; gap: .5rem; }
.chat-side .form-inline { flex-wrap: wrap; }
.chat-side select { padding: .4rem; border: 1px solid var(--color-border); border-radius: var(--radius); max-width: 100%; }

@media (max-width: 720px) {
    .chat-side { flex-basis: 100%; }
    .msg { max-width: 92%; }
}

/* ==========================================================================
   ATTACHMENTS (forum + chat): images, content-warning blur, GIF picker
   ========================================================================== */
.attachments { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; }
.attachment { position: relative; display: inline-block; max-width: 100%; }
.attachment img {
    max-width: 280px; max-height: 280px; border-radius: var(--radius);
    border: 1px solid var(--color-border); display: block; object-fit: cover;
}
.attachment--chat img { max-width: 220px; max-height: 220px; }

/* Content-warning / spoiler: blur the image, frame it in a bold rounded
   border using the theme's own accent colour, and overlay a reveal button.
   The border lives on the CONTAINER, not the blurred <img> itself — a CSS
   blur filter blurs everything about the element it's applied to, border
   included, so a thick blur radius (22px) would otherwise smear a thin
   border into invisibility. */
.attachment--cw {
    border: 3px solid var(--color-primary);
    border-radius: 16px;
    overflow: hidden;
}
.attachment--cw img {
    filter: blur(22px);
}
.attachment--cw .cw-reveal {
    position: absolute; inset: 0; margin: auto; height: fit-content; width: fit-content;
    max-width: 90%; background: rgba(0,0,0,.7); color: #fff; border: 0; border-radius: var(--radius);
    padding: .5rem .8rem; cursor: pointer; font-size: .8rem; line-height: 1.3;
}
.attachment--cw.attachment--revealed {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}
.attachment--cw.attachment--revealed img { filter: none; }
.attachment--cw.attachment--revealed .cw-reveal { display: none; }

/* Chat send box additions */
.chat-send-row { display: flex; align-items: center; gap: .6rem; margin-top: .4rem; flex-wrap: wrap; }
.chat-attach { cursor: pointer; font-size: 1.2rem; border: 1px solid var(--color-border); border-radius: var(--radius); padding: .15rem .5rem; }
.chat-spoiler { font-size: .85rem; display: inline-flex; align-items: center; gap: .3rem; color: var(--color-muted); }
.chat-attach-name { font-size: .8rem; margin-top: .3rem; }
.chat-send-row .btn--primary { margin-left: auto; }

/* Tenor GIF picker */
.gif-picker { border: 1px solid var(--color-border); border-radius: var(--radius); padding: .6rem; margin-top: .5rem; background: var(--color-surface); }
.gif-search { display: flex; gap: .4rem; margin-bottom: .5rem; }
.gif-search input { flex: 1; padding: .4rem; border: 1px solid var(--color-border); border-radius: var(--radius); }
.gif-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: .4rem; max-height: 260px; overflow-y: auto; }
.gif-thumb { width: 100%; height: 90px; object-fit: cover; border-radius: var(--radius); cursor: pointer; border: 1px solid var(--color-border); }
.gif-thumb:hover { border-color: var(--color-primary); }

/* Public profile page + clickable usernames */
.user-link { color: var(--color-primary); text-decoration: none; }
.user-link:hover { text-decoration: underline; }
.profile-card {
    display: flex; gap: 1.25rem; align-items: center; flex-wrap: wrap;
    border: 1px solid var(--color-border); border-radius: var(--radius);
    padding: 1.25rem; background: var(--color-surface); max-width: 560px;
}
.profile-avatar { width: 96px; height: 96px; border-radius: 50%; background: var(--color-surface); }
.profile-info h1 { margin: 0 0 .3rem; display: flex; align-items: center; gap: .5rem; }
.profile-actions { margin-top: .8rem; display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }

/* ==========================================================================
   MESSAGES — two-pane inbox (conversation list + open chat)
   ========================================================================== */
.inbox {
    display: flex;
    gap: 1rem;
    align-items: stretch;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
    min-height: 520px;
}

/* Left: conversation list */
.inbox-list {
    flex: 0 0 270px;
    border-right: 1px solid var(--color-border);
    padding: .75rem;
    background: var(--color-surface);
    overflow-y: auto;
    max-height: 70vh;
}
.inbox-list-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.inbox-list-head h1 { font-size: 1.25rem; margin: 0; flex: 1; }
.inbox-newgroup { margin-bottom: .75rem; padding: .5rem .6rem; }
.inbox-newgroup summary { cursor: pointer; font-weight: 600; font-size: .9rem; }
.inbox-newgroup .field { margin-bottom: .6rem; }

/* Conversation rows */
.inbox .convo-list { margin: 0; padding: 0; list-style: none; }
.inbox .convo-list li { border-bottom: 1px solid var(--color-border); }
.inbox .convo-list a {
    display: block; padding: .6rem .5rem; text-decoration: none; color: var(--color-fg);
    border-radius: var(--radius);
}
.inbox .convo-list a:hover { background: var(--color-hover); }
.convo--active > a { background: var(--color-selected); }
.convo--active > a .convo-title { color: var(--color-primary); }
.convo-title { display: flex; align-items: center; gap: .35rem; font-weight: 600; font-size: .92rem; }
.convo-snippet { display: block; font-size: .8rem; margin-top: .15rem; }

/* Right: the open chat */
.inbox-chat { flex: 1; padding: .75rem 1rem; min-width: 0; }
.inbox-chat .chat-wrap { margin: 0; }
.inbox-chat .forum-head h2 { margin: 0 0 .5rem; font-size: 1.1rem; }
.inbox-empty {
    display: flex; align-items: center; justify-content: center;
    height: 100%; min-height: 320px; text-align: center;
}

/* Stack the panes on small screens */
@media (max-width: 780px) {
    .inbox { flex-direction: column; min-height: 0; }
    .inbox-list {
        flex: 1 1 auto; max-height: 260px;
        border-right: 0; border-bottom: 1px solid var(--color-border);
    }
}

/* Profile pictures ------------------------------------------------------- */
/* object-fit keeps non-square uploads from stretching */
.account-avatar,
.avatar,
.profile-avatar,
.author-avatar,
.avatar-preview { object-fit: cover; background: var(--color-surface); }

.avatar-edit { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.avatar-preview {
    width: 88px; height: 88px; border-radius: 50%;
    border: 1px solid var(--color-border); display: block;
}
.label-like { display: block; margin-bottom: .3rem; font-weight: 600; }
.avatar-edit p { margin: .3rem 0 0; }

/* ==========================================================================
   AVATAR CROPPER (popup) — follows the active light/dark theme
   ========================================================================== */
.cropper {
    position: fixed; inset: 0; z-index: 200;
    background: rgba(0, 0, 0, .6);
    display: none; align-items: center; justify-content: center; padding: 1rem;
}
.cropper.is-open { display: flex; }
body.cropper-open { overflow: hidden; }

.cropper-box {
    background: var(--cropper-bg); color: var(--cropper-fg);
    border-radius: 12px; width: 100%; max-width: 420px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .45); overflow: hidden;
}
.cropper-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1rem 1.1rem; border-bottom: 1px solid var(--cropper-border);
}
.cropper-head h2 { margin: 0; font-size: 1.15rem; color: var(--cropper-fg); }
.cropper-x {
    background: none; border: 0; color: var(--cropper-muted);
    font-size: 1.5rem; line-height: 1; cursor: pointer; padding: 0 .2rem;
}
.cropper-x:hover { color: var(--cropper-fg); }

/* Stage: canvas with a circular cut-out guide over it */
.cropper-stage {
    position: relative; margin: 1rem auto; width: 300px; height: 300px;
    background: var(--cropper-stage); border-radius: 8px; overflow: hidden;
}
.cropper-canvas { display: block; cursor: grab; touch-action: none; }
.cropper-canvas:active { cursor: grabbing; }
.cropper-ring {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    border-radius: 50%; border: 3px solid #fff; pointer-events: none;
    /* the huge spread dims everything outside the circle */
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, .55);
}

.cropper-controls {
    display: flex; align-items: center; gap: .7rem;
    padding: 0 1.4rem 1rem; justify-content: center;
}
.cropper-ico { color: var(--cropper-muted); font-size: 1.15rem; }
.cropper-ico--sm { font-size: .8rem; }
.cropper-zoom { flex: 1; max-width: 190px; accent-color: var(--color-primary); cursor: pointer; }
.cropper-rotate {
    background: none; border: 1px solid var(--cropper-border); color: var(--cropper-fg);
    border-radius: 6px; width: 32px; height: 32px; cursor: pointer;
    font-size: 1.05rem; line-height: 1; margin-left: .4rem;
}
.cropper-rotate:hover { background: var(--color-hover); }

.cropper-foot {
    display: flex; align-items: center; justify-content: space-between;
    padding: .9rem 1.1rem; border-top: 1px solid var(--cropper-border);
}
.cropper-foot-right { display: flex; gap: .5rem; }
.cropper-reset {
    background: none; border: 0; color: var(--color-primary);
    cursor: pointer; font: inherit; padding: 0;
}
.cropper-reset:hover { text-decoration: underline; }
.cropper-foot .btn {
    background: var(--cropper-btn-bg); color: var(--cropper-btn-fg);
    border-color: var(--cropper-border);
}
.cropper-foot .btn:hover { filter: brightness(1.08); }
.cropper-foot .btn--primary {
    background: var(--color-primary); border-color: var(--color-primary); color: #fff;
}

/* Keep the canvas at its native size (scaling it would desync dragging);
   shrink the surrounding padding instead so it still fits small screens. */
@media (max-width: 420px) {
    .cropper { padding: .5rem; }
    .cropper-controls { padding: 0 .8rem 1rem; }
}

/* ==========================================================================
   THEME SUPPORT (light / dark / auto)
   ========================================================================== */

/* These rules now read from variables so they flip with the theme. */
.btn:hover { background: var(--color-hover); }
.sidebar a:hover, .sidebar a.active { background: var(--color-hover); }
.inbox .convo-list a:hover { background: var(--color-hover); }
.convo--active > a { background: var(--color-selected); }
.pill--pin  { background: var(--pill-pin-bg);  color: var(--pill-pin-fg);  border: 1px solid var(--pill-pin-border); }
.pill--lock { background: var(--pill-lock-bg); color: var(--pill-lock-fg); border: 1px solid var(--pill-lock-border); }
.flash--success { background: var(--flash-ok-bg);   border-color: var(--flash-ok-border);   color: var(--flash-ok-fg); }
.flash--error   { background: var(--flash-err-bg);  border-color: var(--flash-err-border);  color: var(--flash-err-fg); }
.flash--info    { background: var(--flash-info-bg); border-color: var(--flash-info-border); color: var(--flash-info-fg); }
.map-canvas {
    background:
        linear-gradient(0deg, rgba(128,128,128,.14) 1px, transparent 1px) 0 0 / 40px 40px,
        linear-gradient(90deg, rgba(128,128,128,.14) 1px, transparent 1px) 0 0 / 40px 40px,
        var(--map-grid-bg);
}
.account-menu, .cropper-box { color-scheme: light dark; }

/* Theme switch button in the header */
.theme-toggle {
    background: none; border: 1px solid var(--color-border); border-radius: 999px;
    width: 34px; height: 34px; cursor: pointer; font-size: 1rem; line-height: 1;
    color: var(--color-fg); flex-shrink: 0;
}
.theme-toggle:hover { background: var(--color-hover); }

/* ---------------------------------------------------------------------------
 * DARK MODE THEME
 *
 * One dark theme (gray background, matching the logo's charcoal texture,
 * with a pink accent) — previously one of 3 selectable palettes; Ocean and
 * Amethyst were removed as site-wide options. Those colour pairs live on as
 * per-DM message bubble themes instead — see the messaging section below.
 *
 * Status colours (pill badges, flash messages) are broken out separately
 * here since they're shared with light mode's equivalents conceptually —
 * green/red/blue/gold mean "success/error/info/pinned" regardless of theme.
 * ------------------------------------------------------------------------- */
[data-theme="dark"],
[data-theme="auto"] {
    --pill-pin-bg: #3f2d12;  --pill-pin-fg: #fcd34d;  --pill-pin-border: #55401b;
    --pill-lock-bg: #262b36; --pill-lock-fg: #cbd5e1; --pill-lock-border: #39404f;

    --flash-ok-bg: #0f2a20;  --flash-ok-border: #1c5540;  --flash-ok-fg: #6ee7b7;
    --flash-err-bg: #2c1416; --flash-err-border: #5f2126; --flash-err-fg: #fca5a5;
    --flash-info-bg: #121e33;--flash-info-border: #1e3a68;--flash-info-fg: #93c5fd;
}

[data-theme="dark"] {
    --color-bg: #1a1a1d;
    --color-fg: #f1eef0;
    --color-muted: #a8a3ab;
    --color-primary: #ec6ea3;
    --color-primary-fg: #1a1418;
    --color-border: #38383d;
    --color-surface: #232327;

    --color-hover: #2c2c30;
    --color-selected: #3a2b34;
    --color-danger: #ff6b6b;
    --map-grid-bg: #232327;

    --cropper-bg: #232327;   --cropper-fg: #f1eef0;
    --cropper-stage: #2c2c30;--cropper-border: rgba(255,255,255,.14);
    --cropper-btn-bg: #38383d; --cropper-btn-fg: #f1eef0;
    --cropper-muted: #a8a3ab;
}
@media (prefers-color-scheme: dark) {
    [data-theme="auto"] {
        --color-bg: #1a1a1d;
        --color-fg: #f1eef0;
        --color-muted: #a8a3ab;
        --color-primary: #ec6ea3;
        --color-primary-fg: #1a1418;
        --color-border: #38383d;
        --color-surface: #232327;

        --color-hover: #2c2c30;
        --color-selected: #3a2b34;
        --color-danger: #ff6b6b;
        --map-grid-bg: #232327;

        --cropper-bg: #232327;   --cropper-fg: #f1eef0;
        --cropper-stage: #2c2c30;--cropper-border: rgba(255,255,255,.14);
        --cropper-btn-bg: #38383d; --cropper-btn-fg: #f1eef0;
        --cropper-muted: #a8a3ab;
    }
}

/* Form controls and scrollbars follow the theme too */
[data-theme="dark"] { color-scheme: dark; }
[data-theme="light"] { color-scheme: light; }
@media (prefers-color-scheme: dark) { [data-theme="auto"] { color-scheme: dark; } }

/* Text outline in the dark theme's pink accent colour — text stays
   --color-fg (white-ish), just gets a thin ring of the accent around it.
   Reads var(--color-primary) directly rather than hardcoding the colour.
   Untouched in light mode.

   Scoped to headings only (h1–h3), not the whole page: on small/thin text
   (body copy, button labels, form fields) the coloured stroke visually
   overwhelms the white fill and just reads as solid colour — headings are
   bold/large enough for the outline to actually read as an outline. */
[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3 {
    -webkit-text-stroke: 0.8px var(--color-primary);
}
@media (prefers-color-scheme: dark) {
    [data-theme="auto"] h1, [data-theme="auto"] h2, [data-theme="auto"] h3 {
        -webkit-text-stroke: 0.8px var(--color-primary);
    }
}

/* Shop / homepage "nothing here yet" message (replaces fake placeholder cards) */
.shop-empty {
    padding: 3rem 1rem;
    text-align: center;
    color: var(--color-muted);
}
.shop-empty p { margin: .25rem 0; }

/* Small tag badges shown on product cards */
.product-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    margin: .4rem 0;
}

/* Admin > Products: tag checkboxes on the create/edit form, and the tag list
   in "Manage tags" */
.tag-check {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin: .2rem .8rem .2rem 0;
    font-weight: 400;
}
.tag-list { list-style: none; padding: 0; margin: .75rem 0 0; }
.tag-list li {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem 0;
    border-bottom: 1px solid var(--color-border);
}

/* Homepage footer (Explore / Account / Company / Keep In Touch columns) */
.home-footer {
    margin-top: 3rem;
    padding: 2.5rem 0 1.5rem;
    border-top: 1px solid var(--color-border);
}
.footer-columns {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}
@media (max-width: 800px) {
    .footer-columns { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .footer-columns { grid-template-columns: 1fr; }
}
.footer-col h3 {
    font-size: .95rem;
    margin: 0 0 .75rem;
}
.footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.footer-col li { margin-bottom: .5rem; }
.footer-col a { color: var(--color-muted); }
.footer-col a:hover { color: var(--color-fg); }

.footer-signup {
    display: flex;
    gap: .4rem;
    margin-bottom: .4rem;
}
.footer-signup input {
    flex: 1;
    min-width: 0;
}
.footer-signup-note { font-size: .78rem; margin: 0 0 1rem; }

.social-links {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
}
.social-links a { color: var(--color-muted); }
.social-links a:hover { color: var(--color-fg); }

.footer-app h4 {
    font-size: .85rem;
    margin: 0 0 .5rem;
}
.footer-app .btn { margin-right: .4rem; }

.footer-legal {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 2rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--color-border);
    font-size: .85rem;
}
.footer-legal a { color: var(--color-muted); }
.footer-legal a:hover { color: var(--color-fg); }

/* ==========================================================================
   ABOUT US INTRO WIDGET — one-time homepage overlay for new members

   A bounded card floats over the blurred page (not edge-to-edge). Inside it,
   a tinted inner panel holds the scrolling slides — its background uses
   color-mix() to blend the active theme's --color-primary into --color-surface,
   so dark mode gets a dusty-pink panel and light mode a soft blue one — all
   from this one rule, no per-theme duplication needed.
   ========================================================================== */
.about-intro {
    position: fixed; inset: 0;
    z-index: 250;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: rgba(0, 0, 0, .45);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}
.about-intro-skip {
    position: fixed; top: 1rem; right: 1rem;
    z-index: 251;
    padding: .5rem 1rem;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-fg);
    cursor: pointer;
    font-size: .9rem;
}
.about-intro-skip:hover { background: var(--color-hover); }

/* Outer "window" — neutral, translucent, just chrome around the tinted panel. */
.about-intro-card {
    position: relative;
    width: min(1000px, 100%);
    height: min(640px, 100%);
    padding: 20px;
    border-radius: 22px;
    background: color-mix(in srgb, var(--color-bg) 85%, transparent);
    border: 1px solid var(--color-border);
    box-shadow: 0 24px 64px rgba(0, 0, 0, .35);
}

/* Inner tinted panel — this is what actually scrolls between slides. */
.about-intro-slides {
    position: absolute; inset: 20px;
    border-radius: 14px;
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
    background: color-mix(in srgb, var(--color-primary) 20%, var(--color-surface));
}
.about-slide {
    min-height: 100%;
    scroll-snap-align: start;
    display: flex;
    align-items: flex-end;
    gap: clamp(1rem, 4vw, 2.5rem);
    padding: clamp(1.5rem, 4vw, 3rem);
}
.about-slide-text {
    flex: 1 1 55%;
    align-self: center;
    opacity: 0;
    transform: translateX(-40px);
    transition: opacity .6s ease, transform .6s ease;
}
.about-slide-text h2 { margin-top: 0; }
.about-slide-media {
    flex: 1 1 40%;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    opacity: 0;
    transform: translateX(40px);
    transition: opacity .6s ease, transform .6s ease;
}
.about-slide-media img { max-width: 100%; max-height: 100%; }
.about-slide.is-active .about-slide-text,
.about-slide.is-active .about-slide-media,
.about-page-slide.is-active .about-slide-text,
.about-page-slide.is-active .about-slide-media {
    opacity: 1;
    transform: none;
}

/* Full-page About Us layout (/about.php) — same tinted-panel look and same
   .about-slide-text/.about-slide-media styling as the homepage widget, just
   sized to fill the page and scrolled normally rather than in a small card. */
.about-page {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin: 1.5rem 0;
}
.about-page-slide {
    display: flex;
    align-items: center;
    gap: clamp(1.5rem, 5vw, 4rem);
    min-height: 70vh;
    padding: clamp(2rem, 5vw, 3.5rem);
    border-radius: 20px;
    background: color-mix(in srgb, var(--color-primary) 20%, var(--color-surface));
}
.about-page-slide .about-slide-text { flex: 1 1 55%; }
.about-page-slide .about-slide-media {
    flex: 1 1 40%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}
.about-page-slide .about-slide-media img { max-width: 100%; max-height: 60vh; }

@media (max-width: 720px) {
    .about-page-slide {
        flex-direction: column;
        text-align: center;
        min-height: auto;
    }
}

@media (max-width: 720px) {
    .about-intro { padding: 1rem; }
    .about-intro-card { padding: 12px; }
    .about-intro-slides { inset: 12px; }
    .about-slide {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 1rem;
        overflow-y: auto;
    }
    .about-slide-media { height: auto; max-height: 40vh; }
    .about-slide-text { transform: translateY(-30px); }
    .about-slide-media { transform: translateY(30px); }
}

/* ==========================================================================
   THEME-SPECIFIC CONTENT (logo, About Us slide groups)

   For "Auto" mode, the server can't know a visitor's actual device
   preference at render time — only the CSS media query can, live in the
   browser. So rather than guess server-side, both variants are always
   rendered and toggled purely by CSS, the same way the colour themes already
   work. Extend this same pattern to anything else that needs a separate
   light/dark version.
   ========================================================================== */

/* Header brand logo */
.brand-logo--dark { display: none; }
[data-theme="dark"] .brand-logo--dark { display: inline-block; }
[data-theme="dark"] .brand-logo--light { display: none; }
@media (prefers-color-scheme: dark) {
    [data-theme="auto"] .brand-logo--dark { display: inline-block; }
    [data-theme="auto"] .brand-logo--light { display: none; }
}

/* Homepage hero image */
.hero-img--dark { display: none; }
[data-theme="dark"] .hero-img--dark { display: inline-block; }
[data-theme="dark"] .hero-img--light { display: none; }
@media (prefers-color-scheme: dark) {
    [data-theme="auto"] .hero-img--dark { display: inline-block; }
    [data-theme="auto"] .hero-img--light { display: none; }
}

/* About Us — whole slide groups. Each slide belongs to either the dark or
   light theme (set in Admin > About Us Slides); both groups render, only
   the matching one displays. Uses `display: block` as the "shown" value —
   both the widget's slides container and the full-page's slide wrapper are
   block-level, so this is safe for either context. */
.theme-slides.theme-slides--dark { display: none; }
[data-theme="dark"] .theme-slides.theme-slides--dark { display: block; }
[data-theme="dark"] .theme-slides.theme-slides--light { display: none; }
@media (prefers-color-scheme: dark) {
    [data-theme="auto"] .theme-slides.theme-slides--dark { display: block; }
    [data-theme="auto"] .theme-slides.theme-slides--light { display: none; }
}

/* Long-press multi-select for deleting your own chat messages */
.chat-log.is-selecting .msg--mine {
    -webkit-user-select: none;
    user-select: none;
}
.msg--selected .msg-body,
.msg--selected .attachment {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}
.chat-selection-bar {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem .75rem;
    margin-bottom: .5rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}
.chat-selection-count { flex: 1; font-size: .85rem; color: var(--color-muted); }

/* ==========================================================================
   PET FAMILY SURVEY — required, one-time, shown right after About Us
   ========================================================================== */
.pet-survey {
    position: fixed; inset: 0;
    z-index: 260;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    overflow-y: auto;
    background: var(--color-bg);
}
.pet-survey-card {
    max-width: 900px;
    width: 100%;
    text-align: center;
    margin: auto;
}
.pet-survey-heading {
    margin: 0 0 2rem;
    font-size: 1.8rem;
}
.pet-survey-grid {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 1.5rem;
    padding-bottom: .5rem;
    margin-bottom: 2rem;
    scroll-snap-type: x proximity;
}
.pet-family-card {
    flex: 0 0 120px;
    scroll-snap-align: start;
    background: none;
    border: 0;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    padding: 0;
    color: var(--color-fg);
    font: inherit;
}
.pet-family-thumb {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    overflow: hidden;
    background: var(--color-surface);
    border: 3px solid transparent;
    transition: border-color .15s ease, transform .15s ease;
}
.pet-family-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pet-family-thumb-fallback {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%; font-size: 2.5rem;
}
.pet-family-card:hover .pet-family-thumb { transform: scale(1.04); }
.pet-family-card.is-selected .pet-family-thumb { border-color: var(--color-primary); }
.pet-family-check {
    position: absolute; top: 6px; right: 6px;
    width: 24px; height: 24px;
    border-radius: 999px;
    background: var(--color-primary);
    color: var(--color-primary-fg);
    display: flex; align-items: center; justify-content: center;
    font-size: .85rem;
    opacity: 0;
    transform: scale(.6);
    transition: opacity .15s ease, transform .15s ease;
}
.pet-family-card.is-selected .pet-family-check { opacity: 1; transform: scale(1); }
.pet-family-name { font-size: .9rem; }
.pet-survey-error { margin-bottom: 1rem; }
.pet-survey-continue-btn:disabled { opacity: .5; cursor: not-allowed; }

@media (max-width: 480px) {
    .pet-family-card { flex-basis: 90px; }
    .pet-survey-grid { gap: 1rem; }
}