/* ==========================================================================
   33procent Community  -  assets/community.css
   Scoped under .ur33-cm-root. Reuses the --ur33-* design tokens from
   shortcodes.css; component tokens are defined as --ur33-c-* on the root.
   Sections:
   1 tokens/root  2 topbar  3 layout/sidenav/rail  4 tabbar  5 feed/skeleton
   6 post card  7 goal card  8 media  9 like/burst  10 comments  11 composer
   12 profile  13 buddy  14 coaches  15 dm  16 notifications
   17 modals/sheets/toasts  18 empty/onboarding  19 utilities
   20 dark mode  21 reduced motion  22 responsive
   ========================================================================== */

/* 1. Tokens + root ------------------------------------------------------- */
.ur33-cm-root {
    --ur33-c-feed-w: 600px;
    --ur33-c-nav-w: 220px;
    --ur33-c-rail-w: 280px;
    --ur33-c-topbar-h: 56px;
    --ur33-c-tabbar-h: 56px;
    --ur33-c-card-bg: #ffffff;
    --ur33-c-bg: #f8fafc;
    --ur33-c-border: rgba(30, 41, 59, 0.1);
    --ur33-c-text: #334155;
    --ur33-c-muted: #64748b;
    --ur33-c-dark: #1a1b23;
    --ur33-c-bubble-other: #f1f5f9;
    --ur33-c-like: #ff6b35;
    --ur33-c-unread: rgba(255, 107, 53, 0.06);
    --ur33-c-tint: rgba(255, 107, 53, 0.08);
    --ur33-c-error: #dc2626;
    --ur33-c-success: #16a34a;
    --ur33-c-gradient: linear-gradient(135deg, #ff6b35 0%, #ffa726 100%);
    --ur33-c-radius: 16px;
    --ur33-c-radius-sm: 12px;
    --ur33-c-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.08);
    --ur33-c-font: inherit;

    position: relative;
    max-width: 1150px;
    margin: 0 auto;
    color: var(--ur33-c-text);
    font-family: var(--ur33-font, inherit);
    font-size: 15px;
    line-height: 1.5;
    /* NOTE: no transform/backdrop-filter here - fixed children must work. */
}
/* White viewport layer BEHIND all content but IN FRONT of the theme's dark
   html background, so short pages never show blue below the app. Exactly the
   same white as the theme body paints behind the content, otherwise the two
   surfaces meet with a visible seam. Theme backgrounds stay untouched. */
body.ur33-community-page::before {
    content: '';
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #ffffff;
    z-index: -1;
    pointer-events: none;
}
/* Desktop: hide the theme's page header (the big "Community" h1 + divider)
   above the app, and tighten the gap below the fixed top nav (theme default
   is padding-top 120px on .page-content; the nav itself is ~72px high).
   Mobile has its own stricter rules in the media query further down. */
body.ur33-community-page .page-header { display: none; }
body.ur33-community-page .page-content { padding-top: 92px; }
.ur33-cm-root *,
.ur33-cm-root *::before,
.ur33-cm-root *::after { box-sizing: border-box; }
.ur33-cm-root button { font-family: inherit; cursor: pointer; }
.ur33-cm-root img { max-width: 100%; display: block; margin: 0; }
.ur33-cm-root a { color: inherit; text-decoration: none; }
.ur33-cm-root ul { margin: 0; padding: 0; list-style: none; }
.ur33-cm-root :focus-visible { outline: 2px solid #ff6b35; outline-offset: 2px; border-radius: 4px; }

/* Shared small bits */
.ur33-cm-avatar {
    border-radius: 50%;
    object-fit: cover;
    background: var(--ur33-c-bubble-other);
    flex: none;
}
.ur33-cm-avatar-fallback {
    border-radius: 50%;
    background: var(--ur33-c-gradient);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    flex: none;
}
.ur33-cm-badge {
    position: absolute;
    top: -4px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--ur33-c-gradient);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}
.ur33-cm-coach-pill {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: var(--ur33-c-dark);
    color: #ffc46b;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 50px;
}
.ur33-cm-monk-pill {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: var(--ur33-c-tint);
    color: #c2410c;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 50px;
}
.ur33-cm-chip {
    display: inline-flex;
    align-items: center;
    background: var(--ur33-c-tint);
    color: #c2410c;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 50px;
}
.ur33-cm-chip.is-ghost {
    background: var(--ur33-c-bubble-other);
    color: var(--ur33-c-muted);
}
.ur33-cm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    background: var(--ur33-c-gradient);
    color: #fff;
    border: none;
    padding: 0.65rem 1.4rem;
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: 50px;
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out, opacity 0.2s;
    box-shadow: 0 4px 15px rgba(255, 107, 53, 0.35);
    line-height: 1.2;
}
.ur33-cm-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(255, 107, 53, 0.45); }
.ur33-cm-btn:disabled { opacity: 0.55; cursor: default; }
.ur33-cm-btn.is-ghost {
    background: transparent;
    color: var(--ur33-c-text);
    border: 2px solid var(--ur33-c-border);
    box-shadow: none;
}
.ur33-cm-btn.is-danger {
    background: var(--ur33-c-error);
    box-shadow: 0 4px 15px rgba(220, 38, 38, 0.3);
}
.ur33-cm-btn.is-small { padding: 0.45rem 1rem; font-size: 0.85rem; }
.ur33-cm-iconbtn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: none;
    background: transparent;
    color: var(--ur33-c-dark);
    border-radius: 50%;
    transition: background 0.2s;
}
.ur33-cm-iconbtn:hover { background: var(--ur33-c-bubble-other); }
.ur33-cm-spark {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 11px;
    font-weight: 700;
    color: #b45309;
    background: rgba(255, 193, 7, 0.18);
    padding: 2px 8px;
    border-radius: 50px;
    white-space: nowrap;
}

/* 2. Topbar --------------------------------------------------------------- */
.ur33-cm-topbar {
    position: sticky;
    top: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--ur33-c-topbar-h);
    padding: 0 14px;
    background: var(--ur33-c-card-bg);
    border: 1px solid var(--ur33-c-border);
    border-radius: 0 0 var(--ur33-c-radius) var(--ur33-c-radius);
    box-shadow: var(--ur33-c-shadow);
    margin-bottom: 16px;
}
body.admin-bar .ur33-cm-topbar { top: 32px; }
.ur33-cm-topbar-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 17px;
    color: var(--ur33-c-dark);
}
.ur33-cm-topbar-logo img { border-radius: 8px; }
.ur33-cm-topbar-actions { display: flex; align-items: center; gap: 4px; }
.ur33-cm-notif-dropdown {
    position: absolute;
    top: calc(var(--ur33-c-topbar-h) + 6px);
    right: 8px;
    width: 360px;
    max-width: calc(100vw - 24px);
    max-height: 480px;
    overflow-y: auto;
    background: var(--ur33-c-card-bg);
    border: 1px solid var(--ur33-c-border);
    border-radius: var(--ur33-c-radius);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15);
    z-index: 70;
}

/* 3. Layout, sidenav, rail ------------------------------------------------ */
.ur33-cm-layout {
    display: grid;
    grid-template-columns: var(--ur33-c-nav-w) minmax(0, 1fr) var(--ur33-c-rail-w);
    gap: 20px;
    align-items: start;
}
.ur33-cm-sidenav {
    position: sticky;
    top: calc(var(--ur33-c-topbar-h) + 16px);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
body.admin-bar .ur33-cm-sidenav { top: calc(var(--ur33-c-topbar-h) + 48px); }
.ur33-cm-sidenav-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border-radius: var(--ur33-c-radius-sm);
    font-weight: 600;
    color: var(--ur33-c-text);
    transition: background 0.2s;
}
.ur33-cm-sidenav-item:hover { background: var(--ur33-c-card-bg); }
.ur33-cm-sidenav-item.is-active { background: var(--ur33-c-card-bg); color: #e55a2b; box-shadow: var(--ur33-c-shadow); }
.ur33-cm-sidenav-item .ur33-cm-badge { position: static; margin-left: auto; }
.ur33-cm-newpost-btn {
    margin-top: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--ur33-c-gradient);
    color: #fff;
    border: none;
    padding: 12px;
    font-weight: 700;
    border-radius: 50px;
    box-shadow: 0 4px 15px rgba(255, 107, 53, 0.35);
    transition: transform 0.2s;
}
.ur33-cm-newpost-btn:hover { transform: translateY(-2px); }
.ur33-cm-main { min-width: 0; max-width: var(--ur33-c-feed-w); width: 100%; margin: 0 auto; }
.ur33-cm-rail {
    position: sticky;
    top: calc(var(--ur33-c-topbar-h) + 16px);
    display: flex;
    flex-direction: column;
    gap: 14px;
}
body.admin-bar .ur33-cm-rail { top: calc(var(--ur33-c-topbar-h) + 48px); }
.ur33-cm-rail-card {
    background: var(--ur33-c-card-bg);
    border: 1px solid var(--ur33-c-border);
    border-radius: var(--ur33-c-radius);
    padding: 16px;
    box-shadow: var(--ur33-c-shadow);
}
.ur33-cm-rail-card h4 { margin: 0 0 10px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--ur33-c-muted); }
.ur33-cm-rail-user { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.ur33-cm-rail-user .ur33-cm-chip { margin-left: auto; }
/* Statistieken + Mijn Profiel-link in het mini-profielkaartje. */
.ur33-cm-rail-stats { display: flex; justify-content: space-around; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--ur33-c-border); text-align: center; }
.ur33-cm-rail-stats b { display: block; font-size: 16px; color: var(--ur33-c-dark); }
.ur33-cm-rail-stats span { font-size: 11.5px; color: var(--ur33-c-muted); }
.ur33-cm-rail-profile-link { display: flex; justify-content: center; width: 100%; margin-top: 12px; text-decoration: none; box-sizing: border-box; }

/* 4. Mobile tab bar -------------------------------------------------------- */
.ur33-cm-tabbar {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 80;
    /* --ur33-c-sab is the safe-area inset frozen by community.js. Android
       browsers animate the live env() value while their chrome collapses
       during scrolling, which made the bar drift; the frozen value is stable. */
    height: calc(var(--ur33-c-tabbar-h) + var(--ur33-c-sab, env(safe-area-inset-bottom, 0px)));
    padding-bottom: var(--ur33-c-sab, env(safe-area-inset-bottom, 0px));
    background: var(--ur33-c-card-bg);
    border-top: 1px solid var(--ur33-c-border);
    justify-content: space-around;
    align-items: center;
    /* Own compositor layer: without it mobile browsers repaint the fixed bar
       a frame late while scrolling, so it drags a few pixels and snaps back. */
    transform: translateZ(0);
    backface-visibility: hidden;
}
.ur33-cm-tabbar-item {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 48px;
    color: var(--ur33-c-muted);
}
.ur33-cm-tabbar-item.is-active { color: #e55a2b; }
.ur33-cm-tabbar-compose {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-top: -18px;
    border: none;
    border-radius: 50%;
    background: var(--ur33-c-gradient);
    color: #fff;
    box-shadow: 0 6px 18px rgba(255, 107, 53, 0.45);
}

/* 5. Feed + skeletons ------------------------------------------------------ */
.ur33-cm-view { min-height: 200px; }

/* Per-life-area feed chips (Alles + 7 areas, routes #feed / #feed/<area>) */
.ur33-cm-area-chips {
    position: relative;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 2px 2px 4px;
    margin: 0 0 12px;
    scrollbar-width: none;
}
.ur33-cm-area-chips::-webkit-scrollbar { display: none; }
.ur33-cm-area-chip {
    flex: 0 0 auto;
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid var(--ur33-c-border);
    background: var(--ur33-c-card-bg);
    color: var(--ur33-c-text);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.ur33-cm-area-chip:hover { border-color: rgba(255, 107, 53, 0.5); }
.ur33-cm-area-chip.is-active {
    background: var(--ur33-c-gradient);
    border-color: transparent;
    color: #fff;
}
.ur33-cm-post-area {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--ur33-c-tint);
    color: #e55a2b;
    font-size: 11.5px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}
.ur33-cm-area-pick { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 2px; }
.ur33-cm-area-pick .ur33-cm-chip { cursor: pointer; border: 1px solid var(--ur33-c-border); background: var(--ur33-c-card-bg); }
.ur33-cm-area-pick .ur33-cm-chip.is-active { background: var(--ur33-c-gradient); color: #fff; border-color: transparent; }
.ur33-cm-area-pick-label { margin-top: 12px; font-size: 12px; font-weight: 700; color: var(--ur33-c-muted); }
.ur33-cm-feed { display: flex; flex-direction: column; gap: 16px; }
.ur33-cm-sentinel { height: 1px; }
.ur33-cm-newposts-pill {
    position: sticky;
    top: calc(var(--ur33-c-topbar-h) + 8px);
    z-index: 50;
    margin: 0 auto 10px;
    width: max-content;
    background: var(--ur33-c-gradient);
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    padding: 8px 18px;
    border-radius: 50px;
    box-shadow: 0 6px 18px rgba(255, 107, 53, 0.4);
    cursor: pointer;
}
.ur33-cm-endcap { text-align: center; color: var(--ur33-c-muted); padding: 24px 0 8px; font-size: 14px; }
.ur33-cm-endcap img { width: 44px; margin: 0 auto 8px; opacity: 0.8; }
.ur33-cm-skel {
    background: var(--ur33-c-card-bg);
    border: 1px solid var(--ur33-c-border);
    border-radius: var(--ur33-c-radius);
    padding: 16px;
}
.ur33-cm-skel-line, .ur33-cm-skel-circle, .ur33-cm-skel-rect {
    background: linear-gradient(90deg, #eef2f7 25%, #f7fafc 50%, #eef2f7 75%);
    background-size: 400px 100%;
    animation: ur33c-shimmer 1.4s infinite linear;
    border-radius: 8px;
}
.ur33-cm-skel-circle { width: 40px; height: 40px; border-radius: 50%; }
.ur33-cm-skel-line { height: 12px; margin: 8px 0; }
.ur33-cm-skel-rect { height: 220px; margin-top: 12px; }
@keyframes ur33c-shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } }

/* 6. Post card ------------------------------------------------------------- */
.ur33-cm-post {
    background: var(--ur33-c-card-bg);
    border: 1px solid var(--ur33-c-border);
    border-radius: var(--ur33-c-radius);
    box-shadow: var(--ur33-c-shadow);
    padding: 14px 16px;
    content-visibility: auto;
    contain-intrinsic-size: auto 420px;
}
.ur33-cm-post.is-buddy { border-left: 3px solid #ffa726; }
.ur33-cm-post.is-pending { opacity: 0.85; }
.ur33-cm-post.is-highlight { animation: ur33c-highlight 1.4s ease-out; }
@keyframes ur33c-highlight { 0% { box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.5); } 100% { box-shadow: var(--ur33-c-shadow); } }
.ur33-cm-post-header { display: flex; align-items: center; gap: 10px; }
.ur33-cm-post-name { font-weight: 700; color: var(--ur33-c-dark); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.ur33-cm-post-meta { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ur33-c-muted); }
.ur33-cm-post-menu { margin-left: auto; position: relative; }
.ur33-cm-menu-pop {
    position: absolute;
    right: 0;
    top: 40px;
    z-index: 30;
    background: var(--ur33-c-card-bg);
    border: 1px solid var(--ur33-c-border);
    border-radius: var(--ur33-c-radius-sm);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14);
    min-width: 180px;
    overflow: hidden;
}
.ur33-cm-menu-pop button {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 11px 14px;
    font-size: 14px;
    color: var(--ur33-c-text);
}
.ur33-cm-menu-pop button:hover { background: var(--ur33-c-bubble-other); }
.ur33-cm-menu-pop button.is-danger { color: var(--ur33-c-error); }
.ur33-cm-post-text { margin: 10px 0 4px; white-space: pre-wrap; word-wrap: break-word; }
.ur33-cm-post-text.is-clamped {
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ur33-cm-more-btn { background: none; border: none; color: var(--ur33-c-muted); font-weight: 600; padding: 0; font-size: 14px; }
.ur33-cm-pending-note {
    margin-top: 8px;
    font-size: 12.5px;
    color: #b45309;
    background: rgba(255, 193, 7, 0.15);
    border-radius: 8px;
    padding: 6px 10px;
}
.ur33-cm-post-actions { display: flex; align-items: center; gap: 4px; margin-top: 8px; }
.ur33-cm-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 44px;
    min-height: 40px;
    padding: 6px 10px;
    background: none;
    border: none;
    border-radius: 10px;
    color: var(--ur33-c-muted);
    font-weight: 600;
    font-size: 13.5px;
    transition: background 0.15s;
    touch-action: manipulation;
}
.ur33-cm-action-btn:hover { background: var(--ur33-c-bubble-other); }
.ur33-cm-like-line { font-size: 13.5px; font-weight: 600; color: var(--ur33-c-dark); margin: 2px 0 0; cursor: pointer; }

/* 7. Goal card -------------------------------------------------------------- */
.ur33-cm-goalcard {
    margin-top: 10px;
    border: 1px solid var(--ur33-c-border);
    border-radius: var(--ur33-c-radius-sm);
    overflow: hidden;
}
.ur33-cm-goalcard-head {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--ur33-c-tint);
    padding: 10px 14px;
}
.ur33-cm-goalcard-head img { width: 26px; height: 26px; border-radius: 6px; }
.ur33-cm-goalcard-title { font-weight: 700; font-size: 13.5px; color: var(--ur33-c-dark); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ur33-cm-goalcard-day {
    background: var(--ur33-c-gradient);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 50px;
    white-space: nowrap;
}
.ur33-cm-goalcard-body { padding: 12px 14px; }
.ur33-cm-goalcard-week { font-weight: 700; color: var(--ur33-c-dark); margin: 0 0 8px; font-size: 14.5px; }
.ur33-cm-progress {
    height: 7px;
    border-radius: 4px;
    background: var(--ur33-c-bubble-other);
    overflow: hidden;
    margin-bottom: 12px;
}
.ur33-cm-progress > span { display: block; height: 100%; background: var(--ur33-c-gradient); border-radius: 4px; transition: width 0.4s; }
.ur33-cm-goal-item { display: flex; align-items: flex-start; gap: 9px; padding: 4px 0; font-size: 14px; }
.ur33-cm-goal-dot {
    flex: none;
    width: 19px;
    height: 19px;
    margin-top: 1px;
    border-radius: 50%;
    border: 2px solid #ffb27a;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}
.ur33-cm-goal-dot.is-done { background: var(--ur33-c-gradient); border-color: transparent; }
.ur33-cm-goal-item.is-done span:last-child { color: var(--ur33-c-muted); text-decoration: line-through; }
.ur33-cm-goalcard-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ur33-cm-goal-more { font-size: 12.5px; color: var(--ur33-c-muted); padding-left: 28px; }

/* 8. Media ------------------------------------------------------------------ */
.ur33-cm-media { margin-top: 10px; border-radius: var(--ur33-c-radius-sm); overflow: hidden; position: relative; }
.ur33-cm-media-box { position: relative; width: 100%; background: var(--ur33-c-bubble-other); }
.ur33-cm-media-box img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.ur33-cm-media img.is-loading { opacity: 0; }
.ur33-cm-media img { transition: opacity 0.3s; }
.ur33-cm-video-play {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 64px;
    height: 64px;
    border: none;
    border-radius: 50%;
    background: var(--ur33-c-gradient);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
    z-index: 2;
}
.ur33-cm-media iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ur33-cm-linkcard {
    display: block;
    margin-top: 10px;
    border: 1px solid var(--ur33-c-border);
    border-radius: var(--ur33-c-radius-sm);
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
}
.ur33-cm-linkcard:hover { transform: translateY(-2px); box-shadow: var(--ur33-c-shadow); }
.ur33-cm-linkcard-meta { padding: 10px 14px; background: var(--ur33-c-bubble-other); }
.ur33-cm-linkcard-domain { font-size: 11px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: var(--ur33-c-muted); }
.ur33-cm-linkcard-title {
    font-weight: 700;
    color: var(--ur33-c-dark);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 14.5px;
}
.ur33-cm-linkcard-desc { font-size: 13px; color: var(--ur33-c-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ur33-cm-lightbox {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(10, 10, 14, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.ur33-cm-lightbox img { max-width: 100%; max-height: 92vh; border-radius: 10px; object-fit: contain; }
.ur33-cm-lightbox-close { position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; border: none; border-radius: 50%; background: rgba(255, 255, 255, 0.15); color: #fff; font-size: 24px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.ur33-cm-lightbox-close:hover { background: rgba(255, 255, 255, 0.3); }

/* 9. Like / burst ------------------------------------------------------------ */
.ur33-cm-like-btn.is-liked { color: var(--ur33-c-like); }
.ur33-cm-like-btn svg { transition: transform 0.15s; }
.ur33-cm-like-btn.is-burst svg { animation: ur33c-heart-pop 0.42s cubic-bezier(0.2, 1.6, 0.4, 1); }
@keyframes ur33c-heart-pop {
    0% { transform: scale(0); }
    55% { transform: scale(1.25); }
    75% { transform: scale(0.9); }
    100% { transform: scale(1); }
}
.ur33-cm-heart-particles { position: absolute; pointer-events: none; width: 0; height: 0; }
.ur33-cm-heart-particles span {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--ur33-c-like);
    animation: ur33c-heart-burst 0.55s ease-out forwards;
}
@keyframes ur33c-heart-burst {
    0% { transform: translate(0, 0) scale(1); opacity: 1; }
    100% { transform: translate(var(--dx), var(--dy)) scale(0.4); opacity: 0; }
}
.ur33-cm-bigheart {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 96px;
    height: 96px;
    color: #fff;
    filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.4));
    pointer-events: none;
    z-index: 5;
    animation: ur33c-bigheart 0.85s ease-out forwards;
}
@keyframes ur33c-bigheart {
    0% { transform: scale(0) rotate(var(--rot, 0deg)); opacity: 0; }
    25% { transform: scale(1.05) rotate(var(--rot, 0deg)); opacity: 1; }
    60% { transform: scale(1) rotate(var(--rot, 0deg)); opacity: 1; }
    100% { transform: scale(1) translateY(-26px) rotate(var(--rot, 0deg)); opacity: 0; }
}

/* 10. Comments ----------------------------------------------------------------- */
.ur33-cm-comments { margin-top: 8px; border-top: 1px solid var(--ur33-c-border); padding-top: 8px; }
.ur33-cm-comment { display: flex; gap: 9px; padding: 6px 0; }
.ur33-cm-comment.is-monk { background: var(--ur33-c-tint); border-radius: var(--ur33-c-radius-sm); padding: 9px; }
.ur33-cm-comment.is-sending { opacity: 0.55; }
.ur33-cm-comment.is-flash { animation: ur33c-highlight 1.4s ease-out; border-radius: 10px; }
.ur33-cm-comment-body { flex: 1; min-width: 0; }
.ur33-cm-comment-text { font-size: 14px; word-wrap: break-word; white-space: pre-wrap; }
.ur33-cm-comment-text b { color: var(--ur33-c-dark); margin-right: 5px; }
.ur33-cm-comment-meta { display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--ur33-c-muted); margin-top: 2px; }
.ur33-cm-comment-meta button { background: none; border: none; padding: 2px 0; font-size: 12px; font-weight: 700; color: var(--ur33-c-muted); }
.ur33-cm-comment-meta button.is-liked { color: var(--ur33-c-like); }
.ur33-cm-replies { margin-left: 40px; border-left: 2px solid var(--ur33-c-border); padding-left: 10px; }
/* Formulier-basis (2026-07): elk tekstachtig invoerveld, textarea en select
   in de community-app krijgt dezelfde nette omranding, ongeacht type of het
   in een .ur33-cm-field zit. :where() houdt de specificiteit op (0,1,0) en de
   regel staat VOOR de specifieke veld-/composer-/DM-/zoekstijlen, zodat die
   altijd winnen. Geen vaste breedte: inline rijen (zoekbalk, datumblok)
   blijven zo naast elkaar staan; de breedte komt uit de context. */
.ur33-cm-root :where(
    input[type="text"], input[type="url"], input[type="email"], input[type="search"],
    input[type="tel"], input[type="password"], input[type="number"], input[type="date"],
    input[type="time"], input[type="datetime-local"], input[type="month"], input[type="week"],
    textarea, select
) {
    box-sizing: border-box;
    max-width: 100%;
    border: 1px solid var(--ur33-c-border);
    border-radius: 10px;
    padding: 10px 12px;
    font: inherit;
    font-size: 14px;
    background: var(--ur33-c-bg);
    color: var(--ur33-c-text);
    transition: border-color 0.15s;
}
.ur33-cm-root :where(
    input[type="text"], input[type="url"], input[type="email"], input[type="search"],
    input[type="tel"], input[type="password"], input[type="number"], input[type="date"],
    input[type="time"], input[type="datetime-local"], input[type="month"], input[type="week"],
    textarea, select
):focus {
    outline: none;
    border-color: #ffa726;
}
.ur33-cm-root :where(input, textarea)::placeholder { color: var(--ur33-c-muted); opacity: 1; }

.ur33-cm-comment-input-row { display: flex; align-items: flex-end; gap: 9px; margin-top: 8px; }
.ur33-cm-comment-input {
    flex: 1;
    border: 1px solid var(--ur33-c-border);
    border-radius: 18px;
    padding: 9px 14px;
    font: inherit;
    font-size: 14px;
    resize: none;
    /* Ruimte om comfortabel te typen; autoGrow (JS) groeit mee tot 200px. */
    min-height: 44px;
    max-height: 200px;
    background: var(--ur33-c-bg);
    color: var(--ur33-c-text);
}
.ur33-cm-comment-input:focus { outline: none; border-color: #ffa726; }
.ur33-cm-reply-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--ur33-c-tint);
    color: #c2410c;
    font-size: 12px;
    font-weight: 700;
    border-radius: 50px;
    padding: 3px 10px;
    margin-bottom: 6px;
}
.ur33-cm-reply-chip button { background: none; border: none; color: inherit; padding: 0; display: flex; }
.ur33-cm-load-comments { background: none; border: none; color: var(--ur33-c-muted); font-weight: 600; font-size: 13.5px; padding: 6px 0; }

/* 11. Composer -------------------------------------------------------------------- */
.ur33-cm-composer { display: flex; flex-direction: column; max-height: 86vh; }
.ur33-cm-composer-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--ur33-c-border); }
.ur33-cm-composer-head h3 { margin: 0; font-size: 16.5px; color: var(--ur33-c-dark); }
.ur33-cm-composer-body { overflow-y: auto; padding: 12px 2px; }
.ur33-cm-audience { display: inline-flex; background: var(--ur33-c-bubble-other); border-radius: 50px; padding: 3px; margin: 4px 0 10px; }
.ur33-cm-audience button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: none;
    background: transparent;
    color: var(--ur33-c-muted);
    font-size: 13px;
    font-weight: 700;
    padding: 7px 14px;
    border-radius: 50px;
}
.ur33-cm-audience button.is-active { background: var(--ur33-c-card-bg); color: #e55a2b; box-shadow: var(--ur33-c-shadow); }
.ur33-cm-audience button:disabled { opacity: 0.45; }
.ur33-cm-composer-text {
    width: 100%;
    min-height: 88px;
    border: none;
    padding: 0; /* borderloos veld: geen basispadding overnemen */
    resize: none;
    font: inherit;
    font-size: 16px;
    color: var(--ur33-c-text);
    background: transparent;
}
.ur33-cm-composer-text:focus { outline: none; }
.ur33-cm-counter { text-align: right; font-size: 12px; color: var(--ur33-c-muted); }
.ur33-cm-counter.is-over { color: var(--ur33-c-error); font-weight: 700; }
.ur33-cm-attach-row { display: flex; align-items: center; gap: 6px; border-top: 1px solid var(--ur33-c-border); padding-top: 10px; }
.ur33-cm-attach-row .ur33-cm-iconbtn { color: #e55a2b; }
.ur33-cm-attach-preview { position: relative; margin: 10px 0; border-radius: var(--ur33-c-radius-sm); overflow: hidden; }
.ur33-cm-attach-preview img { max-height: 260px; width: 100%; object-fit: cover; }
.ur33-cm-attach-remove {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: rgba(15, 18, 25, 0.7);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ur33-cm-url-input {
    width: 100%;
    border: 1px solid var(--ur33-c-border);
    border-radius: 10px;
    padding: 9px 12px;
    font: inherit;
    font-size: 14px;
    margin: 8px 0;
    background: var(--ur33-c-bg);
    color: var(--ur33-c-text);
}
.ur33-cm-composer-foot { display: flex; align-items: center; gap: 10px; padding-top: 12px; border-top: 1px solid var(--ur33-c-border); }
.ur33-cm-composer-foot .ur33-cm-btn { margin-left: auto; }
.ur33-cm-caption-btn { display: inline-flex; align-items: center; gap: 6px; border: none; background: var(--ur33-c-tint); color: #c2410c; padding: 8px 14px; border-radius: 50px; font-weight: 700; font-size: 13px; }
.ur33-cm-caption-options { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; }
.ur33-cm-caption-option {
    text-align: left;
    border: 1px solid var(--ur33-c-border);
    border-radius: var(--ur33-c-radius-sm);
    background: var(--ur33-c-bg);
    color: var(--ur33-c-text);
    padding: 10px 12px;
    font-size: 14px;
}
.ur33-cm-caption-option:hover { border-color: #ffa726; }

/* 12. Profile ----------------------------------------------------------------------- */
.ur33-cm-profile-card {
    background: var(--ur33-c-card-bg);
    border: 1px solid var(--ur33-c-border);
    border-radius: var(--ur33-c-radius);
    box-shadow: var(--ur33-c-shadow);
    padding: 22px;
    text-align: center;
    margin-bottom: 16px;
}
.ur33-cm-profile-avatar { position: relative; width: 96px; margin: 0 auto 10px; }
.ur33-cm-profile-avatar .ur33-cm-avatar, .ur33-cm-profile-avatar .ur33-cm-avatar-fallback { width: 96px; height: 96px; font-size: 34px; }
.ur33-cm-avatar-edit {
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 34px;
    height: 34px;
    border: 2px solid var(--ur33-c-card-bg);
    border-radius: 50%;
    background: var(--ur33-c-gradient);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ur33-cm-profile-name { font-size: 19px; font-weight: 800; color: var(--ur33-c-dark); display: inline-flex; align-items: center; gap: 8px; }
.ur33-cm-profile-bio { color: var(--ur33-c-muted); margin: 6px auto 10px; max-width: 420px; white-space: pre-wrap; }
.ur33-cm-profile-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-bottom: 12px; }
.ur33-cm-focus-line { color: var(--ur33-c-muted); font-size: 14px; margin: 6px auto 12px; max-width: 470px; line-height: 1.7; }
.ur33-cm-focus-line .ur33-cm-focus-1 { font-size: 1.3em; font-weight: 800; color: #e55a2b; }
.ur33-cm-focus-line .ur33-cm-focus-2 { font-size: 1.05em; font-weight: 700; color: #e55a2b; }
.ur33-cm-focus-line .ur33-cm-focus-3 { font-size: 0.88em; font-weight: 600; color: #e55a2b; }
.ur33-cm-profile-photos { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 10px auto 4px; max-width: 470px; }
/* .ur33-cm-root scope beats the theme's .page-content-wrapper img margin/height rule. */
.ur33-cm-root .ur33-cm-profile-photos img { width: 76px; height: 76px; margin: 0; object-fit: cover; display: block; border-radius: 10px; background: rgba(100, 116, 139, 0.12); cursor: zoom-in; }
/* Compact variant in the quick profile modal. */
.ur33-cm-profile-photos.is-pop { justify-content: flex-start; margin: 10px 0 4px; }
.ur33-cm-root .ur33-cm-profile-photos.is-pop img { width: 60px; height: 60px; }
.ur33-cm-profile-stats { display: flex; justify-content: center; gap: 26px; margin: 12px 0; }
.ur33-cm-profile-stats b { display: block; font-size: 18px; color: var(--ur33-c-dark); }
.ur33-cm-profile-stats span { font-size: 12.5px; color: var(--ur33-c-muted); }
.ur33-cm-profile-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

/* Quick profile modal (tap on a profile picture) */
.ur33-cm-profile-pop-head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.ur33-cm-profile-pop-name { font-size: 17px; font-weight: 700; color: var(--ur33-c-dark); display: inline-flex; align-items: center; gap: 6px; }
.ur33-cm-profile-pop-stats { font-size: 12.5px; color: var(--ur33-c-muted); margin-top: 3px; }
.ur33-cm-profile-pop-bio { margin: 0 0 8px; font-size: 14px; line-height: 1.55; white-space: pre-wrap; }
.ur33-cm-profile-pop .ur33-cm-focus-line { margin: 6px 0 0; max-width: none; }
.ur33-cm-profile-pop-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.ur33-cm-settings { display: flex; flex-direction: column; gap: 2px; }
.ur33-cm-setting-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px 2px; border-bottom: 1px solid var(--ur33-c-border); }
.ur33-cm-setting-row:last-child { border-bottom: none; }
.ur33-cm-setting-info { flex: 1; }
.ur33-cm-setting-info b { display: block; color: var(--ur33-c-dark); font-size: 14.5px; }
.ur33-cm-setting-info span { font-size: 13px; color: var(--ur33-c-muted); }
.ur33-cm-switch { position: relative; width: 46px; height: 26px; flex: none; }
.ur33-cm-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.ur33-cm-switch i {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50px;
    background: #d3dce6;
    transition: background 0.2s;
    pointer-events: none;
}
.ur33-cm-switch i::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    transition: transform 0.2s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.ur33-cm-switch input:checked + i { background: #ff8b4d; }
.ur33-cm-switch input:checked + i::after { transform: translateX(20px); }
.ur33-cm-field { margin-bottom: 12px; }
.ur33-cm-field label { display: block; font-size: 13px; font-weight: 700; color: var(--ur33-c-dark); margin-bottom: 5px; }
.ur33-cm-field input[type="text"], .ur33-cm-field input[type="url"], .ur33-cm-field input[type="email"],
.ur33-cm-field input[type="number"], .ur33-cm-field input[type="tel"], .ur33-cm-field input[type="search"],
.ur33-cm-field input[type="password"], .ur33-cm-field input[type="date"], .ur33-cm-field input[type="time"],
.ur33-cm-field input[type="datetime-local"], .ur33-cm-field textarea, .ur33-cm-field select {
    width: 100%;
    border: 1px solid var(--ur33-c-border);
    border-radius: 10px;
    padding: 10px 12px;
    font: inherit;
    font-size: 14px;
    background: var(--ur33-c-bg);
    color: var(--ur33-c-text);
}
.ur33-cm-privacy-box {
    background: var(--ur33-c-tint);
    border-radius: var(--ur33-c-radius-sm);
    padding: 12px 14px;
    font-size: 13.5px;
    color: #9a3412;
    margin: 10px 0;
}

/* 13. Buddy --------------------------------------------------------------------------- */
.ur33-cm-hero {
    background: var(--ur33-c-card-bg);
    border: 1px solid var(--ur33-c-border);
    border-radius: var(--ur33-c-radius);
    box-shadow: var(--ur33-c-shadow);
    padding: 26px 22px;
    text-align: center;
    margin-bottom: 16px;
}
.ur33-cm-hero img.ur33-cm-hero-monk { width: 84px; margin: 0 auto 10px; }
.ur33-cm-hero h2 { margin: 0 0 8px; color: var(--ur33-c-dark); font-size: 21px; }
.ur33-cm-hero p { color: var(--ur33-c-muted); max-width: 430px; margin: 0 auto 8px; }
.ur33-cm-hero-bullets { text-align: left; max-width: 380px; margin: 12px auto; display: flex; flex-direction: column; gap: 8px; }
.ur33-cm-hero-bullets div { display: flex; gap: 9px; align-items: flex-start; font-size: 14px; }
.ur33-cm-hero-bullets svg { color: #e55a2b; flex: none; margin-top: 2px; }
.ur33-cm-proposal-stack { position: relative; margin-bottom: 16px; }
.ur33-cm-proposal-card {
    background: var(--ur33-c-card-bg);
    border: 1px solid var(--ur33-c-border);
    border-radius: var(--ur33-c-radius);
    box-shadow: var(--ur33-c-shadow);
    padding: 24px 20px;
    text-align: center;
}
.ur33-cm-proposal-card .ur33-cm-avatar, .ur33-cm-proposal-card .ur33-cm-avatar-fallback { width: 84px; height: 84px; font-size: 30px; margin: 0 auto 10px; }
.ur33-cm-proposal-score { font-size: 12px; font-weight: 800; color: #e55a2b; letter-spacing: 0.5px; text-transform: uppercase; }
.ur33-cm-proposal-name { font-size: 19px; font-weight: 800; color: var(--ur33-c-dark); margin: 2px 0 8px; }
.ur33-cm-monk-quote {
    display: flex;
    gap: 10px;
    text-align: left;
    background: var(--ur33-c-tint);
    border-radius: var(--ur33-c-radius-sm);
    padding: 12px;
    margin: 12px 0;
    font-size: 14px;
}
.ur33-cm-monk-quote img { width: 30px; height: 30px; border-radius: 8px; flex: none; }
.ur33-cm-proposal-actions { display: flex; gap: 10px; justify-content: center; margin-top: 14px; }
.ur33-cm-buddy-home-head { display: flex; align-items: center; gap: 14px; }
.ur33-cm-avatar-pair { display: flex; }
.ur33-cm-avatar-pair > * { width: 56px; height: 56px; border: 3px solid var(--ur33-c-card-bg); }
.ur33-cm-avatar-pair > *:last-child { margin-left: -16px; }
.ur33-cm-week-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 12px; }
.ur33-cm-week-side { background: var(--ur33-c-bg); border-radius: var(--ur33-c-radius-sm); padding: 12px; }
.ur33-cm-week-side b { display: block; font-size: 13px; color: var(--ur33-c-dark); margin-bottom: 6px; }
.ur33-cm-week-side small { color: var(--ur33-c-muted); }
.ur33-cm-confetti { position: fixed; inset: 0; pointer-events: none; z-index: 300; overflow: hidden; }
.ur33-cm-confetti span {
    position: absolute;
    top: -12px;
    width: 9px;
    height: 14px;
    border-radius: 2px;
    animation: ur33c-confetti 1.9s ease-in forwards;
}
@keyframes ur33c-confetti {
    0% { transform: translateY(0) rotate(0); opacity: 1; }
    100% { transform: translateY(105vh) rotate(660deg); opacity: 0.6; }
}

/* 14. Coaches ----------------------------------------------------------------------------- */
.ur33-cm-coach-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ur33-cm-coach-card {
    background: var(--ur33-c-card-bg);
    border: 1px solid var(--ur33-c-border);
    border-radius: var(--ur33-c-radius);
    box-shadow: var(--ur33-c-shadow);
    padding: 18px;
    text-align: center;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}
.ur33-cm-coach-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12); }
.ur33-cm-coach-card .ur33-cm-avatar, .ur33-cm-coach-card .ur33-cm-avatar-fallback { width: 64px; height: 64px; font-size: 24px; margin: 0 auto 8px; }
.ur33-cm-coach-headline { font-size: 13px; color: var(--ur33-c-muted); margin: 4px 0 8px; min-height: 32px; }
.ur33-cm-area-filter { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.ur33-cm-area-filter button {
    border: 1px solid var(--ur33-c-border);
    background: var(--ur33-c-card-bg);
    color: var(--ur33-c-muted);
    border-radius: 50px;
    padding: 6px 13px;
    font-size: 12.5px;
    font-weight: 700;
}
.ur33-cm-area-filter button.is-active { background: var(--ur33-c-gradient); color: #fff; border-color: transparent; }
.ur33-cm-service {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid var(--ur33-c-border);
    border-radius: var(--ur33-c-radius-sm);
    padding: 13px 14px;
    margin-bottom: 10px;
    background: var(--ur33-c-card-bg);
}
.ur33-cm-service-info { flex: 1; min-width: 0; }
.ur33-cm-service-info b { color: var(--ur33-c-dark); display: block; }
.ur33-cm-service-info span { font-size: 13px; color: var(--ur33-c-muted); }
.ur33-cm-guard-note {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    background: rgba(255, 193, 7, 0.14);
    color: #92600a;
    border-radius: var(--ur33-c-radius-sm);
    padding: 10px 12px;
    font-size: 13px;
    margin-bottom: 10px;
}

/* 15. DM ------------------------------------------------------------------------------------ */
/* The hidden attribute must always win over component display rules. */
.ur33-cm-root [hidden] { display: none !important; }

/* On the DM route the main column breaks out of the 600px feed width and
   the rail disappears, Instagram-style split view. The layout override is
   desktop-only: on smaller screens the responsive grids must win. */
.ur33-cm-root.is-route-dm .ur33-cm-main { max-width: none; }
.ur33-cm-root.is-route-dm .ur33-cm-rail { display: none; }
@media (min-width: 1025px) {
    .ur33-cm-root.is-route-dm .ur33-cm-layout { grid-template-columns: var(--ur33-c-nav-w) minmax(0, 1fr); }
}

.ur33-cm-dm-wrap {
    display: grid;
    grid-template-columns: minmax(230px, 320px) minmax(0, 1fr);
    gap: 0;
    background: var(--ur33-c-card-bg);
    border: 1px solid var(--ur33-c-border);
    border-radius: var(--ur33-c-radius);
    box-shadow: var(--ur33-c-shadow);
    overflow: hidden;
    height: calc(100vh - var(--ur33-c-topbar-h) - 150px);
    height: calc(100dvh - var(--ur33-c-topbar-h) - 150px);
    min-height: 420px;
    max-height: 820px;
}
.ur33-cm-dm-list { border-right: 1px solid var(--ur33-c-border); overflow-y: auto; min-height: 0; }
.ur33-cm-dm-list-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 14px 8px; font-weight: 800; color: var(--ur33-c-dark); }
.ur33-cm-dm-item { position: relative; display: flex; align-items: center; gap: 11px; padding: 11px 14px; cursor: pointer; transition: background 0.15s; }
.ur33-cm-dm-item:hover { background: var(--ur33-c-bg); }
.ur33-cm-dm-item-menu-btn {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: none;
    background: transparent;
    color: var(--ur33-c-muted);
    border-radius: 50%;
}
.ur33-cm-dm-item-menu-btn:hover { background: var(--ur33-c-bubble-other); color: var(--ur33-c-dark); }
.ur33-cm-dm-item-menu-btn svg { transform: rotate(90deg); }
.ur33-cm-dm-item .ur33-cm-menu-pop { top: 44px; right: 10px; }
.ur33-cm-pin-flag { font-size: 11px; color: #e55a2b; }
.ur33-cm-dm-item.is-active { background: var(--ur33-c-unread); }
.ur33-cm-dm-item-main { flex: 1; min-width: 0; }
.ur33-cm-dm-item-name { font-weight: 700; color: var(--ur33-c-dark); font-size: 14.5px; display: flex; align-items: center; gap: 6px; }
.ur33-cm-dm-item-prev { font-size: 13px; color: var(--ur33-c-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ur33-cm-dm-item.is-unread .ur33-cm-dm-item-prev { color: var(--ur33-c-dark); font-weight: 600; }
.ur33-cm-dm-item-side { text-align: right; font-size: 11.5px; color: var(--ur33-c-muted); flex: none; }
.ur33-cm-dm-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--ur33-c-gradient); margin-top: 4px; }
.ur33-cm-dm-thread { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.ur33-cm-dm-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--ur33-c-border); }
.ur33-cm-dm-head b { color: var(--ur33-c-dark); display: flex; align-items: center; gap: 7px; }
.ur33-cm-dm-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 14px; -webkit-overflow-scrolling: touch; }
.ur33-cm-day-sep { text-align: center; font-size: 11.5px; font-weight: 700; color: var(--ur33-c-muted); margin: 14px 0 8px; text-transform: uppercase; letter-spacing: 0.4px; }
.ur33-cm-msg { display: flex; margin: 2px 0; }
.ur33-cm-msg.is-own { justify-content: flex-end; }
.ur33-cm-bubble {
    max-width: 75%;
    padding: 9px 13px;
    border-radius: 16px;
    font-size: 14.5px;
    white-space: pre-wrap;
    word-wrap: break-word;
    background: var(--ur33-c-bubble-other);
    color: var(--ur33-c-text);
    border-bottom-left-radius: 6px;
}
.ur33-cm-msg.is-own .ur33-cm-bubble {
    background: var(--ur33-c-gradient);
    color: #fff;
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 6px;
}
.ur33-cm-bubble img { border-radius: 10px; max-width: 240px; margin-top: 4px; cursor: pointer; }
.ur33-cm-msg-time { font-size: 11px; color: var(--ur33-c-muted); margin: 3px 6px 8px; }
.ur33-cm-msg.is-own + .ur33-cm-msg-time { text-align: right; }
.ur33-cm-msg.is-failed .ur33-cm-bubble { outline: 2px solid var(--ur33-c-error); cursor: pointer; }
.ur33-cm-dm-composer { display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--ur33-c-border); }
.ur33-cm-dm-composer textarea {
    flex: 1;
    border: 1px solid var(--ur33-c-border);
    border-radius: 18px;
    padding: 10px 14px;
    font: inherit;
    font-size: 14.5px;
    resize: none;
    max-height: 120px;
    background: var(--ur33-c-bg);
    color: var(--ur33-c-text);
}
.ur33-cm-dm-composer textarea:focus { outline: none; border-color: #ffa726; }
.ur33-cm-dm-send {
    width: 42px;
    height: 42px;
    flex: none;
    border: none;
    border-radius: 50%;
    background: var(--ur33-c-gradient);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ur33-cm-newmsg-pill {
    position: absolute;
    bottom: 74px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--ur33-c-dark);
    color: #fff;
    font-size: 12.5px;
    font-weight: 700;
    border: none;
    border-radius: 50px;
    padding: 7px 14px;
    z-index: 5;
}

/* 16. Notifications ---------------------------------------------------------------------------- */
.ur33-cm-notif-group { padding: 12px 14px 4px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.4px; color: var(--ur33-c-muted); }
.ur33-cm-notif-item { display: flex; align-items: center; gap: 11px; padding: 11px 14px; cursor: pointer; transition: background 0.15s; }
.ur33-cm-notif-item:hover { background: var(--ur33-c-bg); }
.ur33-cm-notif-item.is-unread { background: var(--ur33-c-unread); }
.ur33-cm-notif-text { flex: 1; min-width: 0; font-size: 14px; }
.ur33-cm-notif-text b { color: var(--ur33-c-dark); }
.ur33-cm-notif-text small { display: block; color: var(--ur33-c-muted); }
.ur33-cm-notif-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--ur33-c-border); font-weight: 800; color: var(--ur33-c-dark); }
.ur33-cm-notif-head button { background: none; border: none; color: #e55a2b; font-weight: 700; font-size: 13px; }
/* Browsermeldingen aan/uit in de bel-dropdown en het meldingenpaneel. */
.ur33-cm-notif-webrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--ur33-c-border); }
.ur33-cm-notif-webrow-text b { display: block; font-size: 13.5px; color: var(--ur33-c-dark); }
.ur33-cm-notif-webrow-text span { display: block; font-size: 12px; color: var(--ur33-c-muted); line-height: 1.4; }
.ur33-cm-panel {
    background: var(--ur33-c-card-bg);
    border: 1px solid var(--ur33-c-border);
    border-radius: var(--ur33-c-radius);
    box-shadow: var(--ur33-c-shadow);
    overflow: hidden;
    margin-bottom: 16px;
}
.ur33-cm-panel-pad { padding: 16px; }

/* 17. Modals, sheets, toasts ---------------------------------------------------------------------- */
.ur33-cm-overlay {
    position: fixed;
    inset: 0;
    z-index: 150;
    background: rgba(12, 14, 20, 0.66);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    animation: ur33c-fade-in 0.18s ease-out;
}
@keyframes ur33c-fade-in { from { opacity: 0; } to { opacity: 1; } }
.ur33-cm-modal {
    background: var(--ur33-c-card-bg);
    border-radius: var(--ur33-c-radius);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.3);
    width: 560px;
    max-width: 100%;
    max-height: 88vh;
    overflow-y: auto;
    padding: 18px;
}
.ur33-cm-modal.is-narrow { width: 420px; }
.ur33-cm-modal-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.ur33-cm-modal-title h3 { margin: 0; font-size: 17px; color: var(--ur33-c-dark); }
.ur33-cm-modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; }
.ur33-cm-sheet-handle { width: 40px; height: 4px; border-radius: 2px; background: var(--ur33-c-border); margin: 0 auto 12px; display: none; }
.ur33-cm-toast-wrap {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 24px;
    z-index: 250;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    pointer-events: none;
}
.ur33-cm-toast {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--ur33-c-dark);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    padding: 11px 18px;
    border-radius: 50px;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.3);
    animation: ur33c-toast-in 0.25s ease-out;
    pointer-events: auto;
    max-width: min(90vw, 480px);
}
.ur33-cm-toast.is-error { background: var(--ur33-c-error); }
.ur33-cm-toast.is-success { background: var(--ur33-c-success); }
@keyframes ur33c-toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.ur33-cm-spinner {
    width: 18px;
    height: 18px;
    border: 2.5px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: ur33c-spin 0.7s linear infinite;
    display: inline-block;
}
.ur33-cm-spinner.is-dark { border-color: rgba(0, 0, 0, 0.15); border-top-color: #e55a2b; }
@keyframes ur33c-spin { to { transform: rotate(360deg); } }

/* 18. Empty states + onboarding --------------------------------------------------------------------- */
.ur33-cm-empty { text-align: center; padding: 38px 20px; color: var(--ur33-c-muted); }
.ur33-cm-empty img { width: 64px; margin: 0 auto 12px; opacity: 0.9; }
.ur33-cm-empty h3 { color: var(--ur33-c-dark); margin: 0 0 6px; }
.ur33-cm-empty p { margin: 0 0 14px; }
.ur33-cm-onboard { text-align: center; padding: 8px 4px; }
.ur33-cm-onboard img { width: 110px; margin: 0 auto 14px; }
.ur33-cm-onboard h3 { margin: 0 0 8px; font-size: 20px; color: var(--ur33-c-dark); }
.ur33-cm-onboard p { color: var(--ur33-c-muted); max-width: 380px; margin: 0 auto; }
.ur33-cm-onboard-dots { display: flex; gap: 7px; justify-content: center; margin: 18px 0 14px; }
.ur33-cm-onboard-dots span { width: 8px; height: 8px; border-radius: 50%; background: var(--ur33-c-border); }
.ur33-cm-onboard-dots span.is-active { background: #e55a2b; }

/* 19. Utilities ---------------------------------------------------------------------------------------- */
.ur33-cm-hidden { display: none !important; }
.ur33-cm-row { display: flex; align-items: center; gap: 10px; }
.ur33-cm-grow { flex: 1; min-width: 0; }
.ur33-cm-center { text-align: center; }
.ur33-cm-mt { margin-top: 14px; }
.ur33-cm-muted { color: var(--ur33-c-muted); font-size: 13.5px; }
.ur33-cm-divider { border: none; border-top: 1px solid var(--ur33-c-border); margin: 14px 0; }
/* Sectiekoppen krijgen een horizontale divider erboven zodat elke sectie
   visueel afgebakend is (op alle community-pagina's). De EERSTE kop in een
   view is de paginatitel: groter en zonder streep erboven. */
.ur33-cm-section-title { font-size: 16px; font-weight: 800; color: var(--ur33-c-dark); margin: 20px 0 14px; padding-top: 18px; border-top: 1px solid var(--ur33-c-border); display: flex; align-items: center; gap: 10px; }
.ur33-cm-view > .ur33-cm-section-title:first-child,
.ur33-cm-view > div:first-child > .ur33-cm-section-title:first-child {
    font-size: 20px; margin-top: 4px; padding-top: 0; border-top: 0;
}
.ur33-cm-back-btn { background: none; border: none; color: var(--ur33-c-dark); display: inline-flex; padding: 6px; border-radius: 50%; }
.ur33-cm-back-btn:hover { background: var(--ur33-c-bubble-other); }

/* 20. Dark mode ------------------------------------------------------------------------------------------ */
@media (prefers-color-scheme: dark) {
    .ur33-cm-root {
        --ur33-c-card-bg: #1d2129;
        --ur33-c-bg: #14171d;
        --ur33-c-border: rgba(255, 255, 255, 0.1);
        --ur33-c-text: #d3dae3;
        --ur33-c-muted: #8b96a5;
        --ur33-c-dark: #f1f5f9;
        --ur33-c-bubble-other: #2a303b;
        --ur33-c-unread: rgba(255, 107, 53, 0.12);
        --ur33-c-tint: rgba(255, 107, 53, 0.14);
        --ur33-c-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
    }
    .ur33-cm-skel-line, .ur33-cm-skel-circle, .ur33-cm-skel-rect {
        background: linear-gradient(90deg, #262c36 25%, #303744 50%, #262c36 75%);
        background-size: 400px 100%;
    }
    .ur33-cm-monk-quote, .ur33-cm-privacy-box { color: #ffb78a; }
    .ur33-cm-chip { color: #ffb78a; }
    .ur33-cm-caption-btn { color: #ffb78a; }
}

/* 21. Reduced motion ---------------------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .ur33-cm-root *, .ur33-cm-root *::before, .ur33-cm-root *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* 22. Responsive --------------------------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .ur33-cm-layout { grid-template-columns: 72px minmax(0, 1fr); }
    .ur33-cm-rail { display: none; }
    .ur33-cm-sidenav-item span:not(.ur33-cm-badge) { display: none; }
    .ur33-cm-sidenav-item { justify-content: center; }
    .ur33-cm-newpost-btn span { display: none; }
}
@media (max-width: 768px) {
    /* Mobile: only the community app is visible. Theme chrome and WordPress
       controls are hidden (same approach as the mobile carrousel view). */
    body.ur33-community-page .nav,
    body.ur33-community-page .footer,
    body.ur33-community-page .page-header { display: none !important; }
    body.ur33-community-page .page-content { padding: 0 !important; min-height: 0 !important; }
    body.ur33-community-page .page-container { padding: 0 !important; max-width: none !important; }
    body.ur33-community-page #wpadminbar { display: none !important; }
    /* Undo the admin-bar offset WP forces on <html> (html[lang] outranks
       core's plain html selector, both !important). */
    html[lang] { margin-top: 0 !important; }
    body.admin-bar .ur33-cm-topbar { top: 0; }
    body.ur33-community-page .ur33-cm-root { padding: 0 4px; }
    /* No horizontal pan: accidental overflow lets touch devices drift the
       visual viewport sideways, which visibly drags fixed elements (tab bar)
       along with the scroll gesture. */
    body.ur33-community-page { overflow-x: hidden; }

    .ur33-cm-root { font-size: 14.5px; }
    .ur33-cm-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .ur33-cm-sidenav { display: none; }
    .ur33-cm-tabbar { display: flex; }
    .ur33-cm-main { max-width: none; padding-bottom: calc(var(--ur33-c-tabbar-h) + var(--ur33-c-sab, env(safe-area-inset-bottom, 0px)) + 18px); }
    .ur33-cm-topbar { border-radius: 0; margin: 0 -10px 12px; }
    /* Berichten zit op mobiel in de tabbar; verberg het dubbele DM-icoon in de topbar. */
    .ur33-cm-topbar-actions a[href="#dm"] { display: none; }
    .ur33-cm-coach-grid { grid-template-columns: 1fr; }
    .ur33-cm-week-compare { grid-template-columns: 1fr; }
    .ur33-cm-dm-wrap { grid-template-columns: 1fr; height: auto; min-height: 0; max-height: none; border-radius: var(--ur33-c-radius); }
    .ur33-cm-dm-wrap.is-thread-open .ur33-cm-dm-list { display: none; }
    .ur33-cm-dm-wrap:not(.is-thread-open) .ur33-cm-dm-thread { display: none; }
    .ur33-cm-dm-thread { position: fixed; inset: 0; z-index: 120; background: var(--ur33-c-card-bg); height: 100dvh; }
    .ur33-cm-dm-thread .ur33-cm-dm-head { padding-top: max(10px, env(safe-area-inset-top, 0px)); }
    .ur33-cm-dm-composer { padding-bottom: max(10px, env(safe-area-inset-bottom, 0px)); }
    .ur33-cm-overlay { padding: 0; align-items: flex-end; }
    .ur33-cm-modal { width: 100%; max-height: 94dvh; border-radius: var(--ur33-c-radius) var(--ur33-c-radius) 0 0; animation: ur33c-sheet-up 0.26s ease-out; }
    .ur33-cm-modal.is-narrow { width: 100%; }
    .ur33-cm-sheet-handle { display: block; }
    .ur33-cm-toast-wrap { bottom: calc(var(--ur33-c-tabbar-h) + var(--ur33-c-sab, env(safe-area-inset-bottom, 0px)) + 14px); }
    .ur33-cm-notif-dropdown { position: fixed; top: auto; right: 8px; left: 8px; width: auto; }
}
@keyframes ur33c-sheet-up { from { transform: translateY(40px); opacity: 0.6; } to { transform: translateY(0); opacity: 1; } }
@media (max-width: 480px) {
    .ur33-cm-post { padding: 12px; border-radius: var(--ur33-c-radius-sm); }
    .ur33-cm-profile-stats { gap: 18px; }
}

/* ------------------------------------------------------------------ */
/* Bookings (agenda)                                                   */
/* ------------------------------------------------------------------ */
.ur33-cm-status-pill {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    background: var(--ur33-c-bubble-other);
    color: var(--ur33-c-muted);
    align-self: flex-start;
}
.ur33-cm-status-pill.is-wait { background: rgba(255, 167, 38, 0.15); color: #b45309; }
.ur33-cm-status-pill.is-ok { background: rgba(22, 163, 74, 0.12); color: var(--ur33-c-success); }
.ur33-cm-status-pill.is-done { background: var(--ur33-c-tint); color: var(--ur33-c-like); }
.ur33-cm-status-pill.is-off { background: var(--ur33-c-bubble-other); color: var(--ur33-c-muted); }

.ur33-cm-booking-card { margin-bottom: 12px; }

/* Sessievoortgang van een pakkettraject: afgerond (groen) + gepland (oranje)
   binnen een grijze balk die het totaal voorstelt. */
.ur33-cm-progress { display: flex; height: 6px; border-radius: 4px; background: var(--ur33-c-border); overflow: hidden; margin: 8px 0 2px; }
.ur33-cm-progress span { height: 100%; display: block; }
.ur33-cm-progress-done { background: var(--ur33-c-success, #16a34a); }
.ur33-cm-progress-planned { background: #ff8b4d; }

/* Klikbare kaart: subtiele hover-lift (zoals de coachkaarten). */
.ur33-cm-card-link { cursor: pointer; transition: box-shadow 0.15s, transform 0.15s; }
.ur33-cm-card-link:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.10); }
.ur33-cm-booking-accept { margin-top: 12px; border-top: 1px solid var(--ur33-c-border); padding-top: 10px; }
.ur33-cm-booking-accept input[type="text"],
.ur33-cm-booking-accept input[type="url"] { width: 100%; box-sizing: border-box; }

.ur33-cm-daystrip {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
}
.ur33-cm-daystrip button { flex: 0 0 auto; }
.ur33-cm-slot-wrap { margin: 8px 0 4px; }

.ur33-cm-avail-list { margin-bottom: 12px; }
.ur33-cm-avail-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 0;
    border-bottom: 1px solid var(--ur33-c-border);
}
.ur33-cm-avail-row:last-child { border-bottom: 0; }
.ur33-cm-avail-day {
    flex: 0 0 84px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ur33-c-dark);
}

/* ------------------------------------------------------------------ */
/* Coach directory search + matching + find members                    */
/* ------------------------------------------------------------------ */
.ur33-cm-coach-search {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--ur33-c-card-bg);
    border: 1px solid var(--ur33-c-border);
    border-radius: 999px;
    padding: 8px 14px;
    margin-bottom: 10px;
    color: var(--ur33-c-muted);
}
.ur33-cm-coach-search input {
    flex: 1;
    border: 0;
    outline: none;
    padding: 0; /* borderloos veld in de pill: geen basispadding overnemen */
    background: transparent;
    font: inherit;
    color: var(--ur33-c-text);
}
.ur33-cm-cat-filter { margin-top: -4px; }
.ur33-cm-match-hero { margin-bottom: 14px; }
.ur33-cm-match-hero .ur33-cm-coach-grid { margin-top: 12px; }
.ur33-cm-coach-cta {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    margin-bottom: 14px;
    background: var(--ur33-c-tint);
    border: 1px solid var(--ur33-c-border);
    border-radius: var(--ur33-c-radius);
}
.ur33-cm-coach-cta-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ur33-cm-coach-cta-text b { color: var(--ur33-c-dark); font-size: 15px; }
.ur33-cm-coach-cta-text span { font-size: 13px; }
.ur33-cm-coach-cta .ur33-cm-btn { margin-left: auto; flex-shrink: 0; }
@media (max-width: 600px) {
    .ur33-cm-coach-cta { flex-direction: column; align-items: stretch; }
    .ur33-cm-coach-cta .ur33-cm-btn { margin-left: 0; }
}
.ur33-cm-member-card { margin-bottom: 12px; }

/* ------------------------------------------------------------------ */
/* Deel-flow: intentiekeuze, verhaalknop, fotogrid en carrousel       */
/* ------------------------------------------------------------------ */
.ur33-cm-intent-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    text-align: left;
    border: 1px solid var(--ur33-c-border);
    background: var(--ur33-c-bg);
    border-radius: var(--ur33-c-radius-sm);
    padding: 14px;
    margin-top: 10px;
}
.ur33-cm-intent-btn:hover { border-color: #ffa726; }
.ur33-cm-intent-ico { font-size: 24px; line-height: 1; }
.ur33-cm-intent-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ur33-cm-intent-text b { color: var(--ur33-c-dark); font-size: 15px; }
.ur33-cm-intent-text span { color: var(--ur33-c-muted); font-size: 13px; }
.ur33-cm-story-left { font-weight: 600; font-size: 12px; opacity: 0.8; }
.ur33-cm-attach-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--ur33-c-border);
    background: var(--ur33-c-bg);
    color: #e55a2b;
    font-weight: 700;
    font-size: 13px;
    padding: 7px 12px;
    border-radius: 50px;
    white-space: nowrap;
}
.ur33-cm-attach-grid { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; }
.ur33-cm-attach-grid:empty { margin: 0; }
.ur33-cm-attach-thumb {
    position: relative;
    width: 84px;
    height: 84px;
    border-radius: 10px;
    overflow: hidden;
    background: var(--ur33-c-bubble-other);
    display: flex;
    align-items: center;
    justify-content: center;
}
.ur33-cm-attach-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ur33-cm-attach-thumb .ur33-cm-attach-remove { top: 4px; right: 4px; width: 24px; height: 24px; }
.ur33-cm-carousel-track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.ur33-cm-carousel-track::-webkit-scrollbar { display: none; }
.ur33-cm-carousel-slide { flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; }
.ur33-cm-carousel-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 6px;
    display: flex;
    justify-content: center;
    gap: 3px;
    z-index: 2;
}
.ur33-cm-carousel-dot {
    width: 16px;
    height: 16px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    position: relative;
}
.ur33-cm-carousel-dot::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.55);
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.35);
}
.ur33-cm-carousel-dot.is-active::after { background: #fff; }
.ur33-cm-carousel-counter {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    background: rgba(15, 18, 25, 0.65);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 999px;
    pointer-events: none;
}
.ur33-cm-goalcard-help {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--ur33-c-tint);
    color: #c2410c;
    font-weight: 700;
    font-size: 12.5px;
    padding: 4px 10px;
    border-radius: 999px;
    margin-bottom: 8px;
}
/* Attach-rij mag wrappen zodat de twee fotoknoppen op smalle telefoons
   niet overlopen; iconknoppen behouden hun vaste maat. */
.ur33-cm-attach-row { flex-wrap: wrap; }
.ur33-cm-attach-row .ur33-cm-iconbtn { flex-shrink: 0; }
/* Taakkiezer in de deel-composer: aanvinken welke taken op de kaart komen. */
.ur33-cm-taskpick-row {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 5px 0;
    font-size: 14px;
    color: var(--ur33-c-text);
    cursor: pointer;
}
.ur33-cm-taskpick-row input {
    margin-top: 3px;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    accent-color: #e55a2b;
}
@media (prefers-color-scheme: dark) {
    .ur33-cm-goalcard-help { color: #ffb78a; }
    .ur33-cm-attach-btn { color: #ffb78a; }
}

/* == UX-verbeteringen 2026-07-31 =========================================== */

/* Scheiding voor de destructieve actie onderin het post-menu. */
.ur33-cm-menu-sep {
    height: 1px;
    margin: 4px 0;
    background: var(--ur33-c-border);
}

/* Bookmark-knop op de postkaart: gevuld = bewaard. */
.ur33-cm-save-btn.is-saved { color: #e55a2b; }

/* Fade rechts op de chips-balk zolang er meer chips buiten beeld staan
   (JS zet .has-overflow zolang je niet aan het einde bent gescrold). */
.ur33-cm-area-chips.has-overflow {
    -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent);
    mask-image: linear-gradient(90deg, #000 88%, transparent);
}

/* Placeholder in het lege DM-rechterpaneel (desktop). */
.ur33-cm-dm-empty-pane {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    height: 100%;
    min-height: 320px;
    color: var(--ur33-c-muted);
    font-size: 14px;
    text-align: center;
    padding: 24px;
}

/* Permanente alleen-lezen banner (i.p.v. alleen een verdwijnende toast). */
.ur33-cm-suspended-banner {
    background: #fff3e6;
    border: 1px solid #ffa726;
    color: #7a3c00;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 14px;
    margin: 0 0 12px;
}

/* Meer-menu (mobiele navigatie): lijst met bestemmingen in een modal. */
.ur33-cm-more-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 10px;
    border: 0;
    background: none;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    color: var(--ur33-c-text);
    border-radius: 10px;
    cursor: pointer;
    text-align: left;
}
.ur33-cm-more-item:hover { background: var(--ur33-c-bg); }
.ur33-cm-more-item svg { color: #e55a2b; flex-shrink: 0; }

/* Kopje boven de fotogalerij op het profiel. */
.ur33-cm-profile-photos-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ur33-c-muted);
    margin: 14px 0 6px;
}

@media (prefers-color-scheme: dark) {
    .ur33-cm-suspended-banner { background: #3a2a18; color: #ffb78a; }
}

/* "Alle meldingen bekijken" onderin de desktop-dropdown. */
.ur33-cm-notif-viewall {
    display: block;
    width: 100%;
    padding: 11px;
    border: 0;
    border-top: 1px solid var(--ur33-c-border);
    background: none;
    font: inherit;
    font-size: 13.5px;
    font-weight: 700;
    color: #e55a2b;
    cursor: pointer;
}
.ur33-cm-notif-viewall:hover { background: var(--ur33-c-bg); }

/* Composer: inklapbaar "Meer opties"-blok. */
.ur33-cm-options-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 6px 0 2px;
}
.ur33-cm-options-toggle {
    border: 0;
    background: none;
    padding: 4px 0;
    font: inherit;
    font-size: 13.5px;
    font-weight: 700;
    color: #e55a2b;
    cursor: pointer;
}
.ur33-cm-options-summary {
    font-size: 12.5px;
    color: var(--ur33-c-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ur33-cm-options-wrap { margin-top: 4px; }

/* Tabbalk in Coach-beheer. */
.ur33-cm-panel-tabs { margin: 2px 0 14px; }

/* Mislukt DM-bericht: tik om opnieuw te verzenden. */
.ur33-cm-msg-retry {
    border: 1px dashed var(--ur33-c-error, #c0392b);
    background: none;
    color: var(--ur33-c-error, #c0392b);
    border-radius: 14px;
    padding: 8px 12px;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

/* De Meer-knop in de tabbar is een <button>; zonder reset krijgt die
   native browser-chrome naast de randloze anchor-tabs. */
button.ur33-cm-tabbar-item {
    border: 0;
    background: none;
    padding: 0;
    appearance: none;
    -webkit-appearance: none;
}