/* ================================================================
   CYBE HUB — Cyberspace
   Fully neumorphic, theme-aware (obeys [data-theme="dark"|"light"]
   via the theme's existing --bg / --neu-in / --neu-out tokens).
   Inset neumorphic is the default resting state for every surface.
   ================================================================ */

.cybe-cs, .cybe-cs * { box-sizing: border-box; font-family: var(--font-body, 'Inter', sans-serif); }
.cybe-cs { max-width: 720px; margin: 0 auto; padding: 8px 0 40px; color: var(--text); }

/* ── Topbar (centered hero) ── */
.cybe-cs-topbar { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; background: var(--bg); box-shadow: var(--neu-in); border-radius: var(--radius, 16px); padding: 24px 24px 22px; margin-bottom: 18px; border: 1px solid rgba(0,0,255,0.10); }
.cybe-cs-topbar-corner { position: absolute; top: 16px; left: 16px; }
.cybe-cs-topbar-corner-right { position: absolute; top: 16px; right: 16px; }
.cybe-cs-hero-logo { display: block; margin: 0 auto 10px; max-height: 48px; max-width: 140px; object-fit: contain; }
.cybe-cs-heading { display: flex; flex-direction: column; align-items: center; }
.cybe-cs-heading h2 { font-family: var(--font-display, serif); font-size: 22px; font-weight: 700; margin: 0 0 2px; color: var(--text); text-align: center; }
.cybe-cs-anim-pulse { color: var(--blue, #0000ff) !important; animation: cybe-cs-heading-pulse 2.4s ease-in-out infinite; }
@keyframes cybe-cs-heading-pulse {
    0%, 100% { text-shadow: 0 0 6px rgba(0,0,255,.45), 0 0 14px rgba(0,0,255,.25); }
    50%      { text-shadow: 0 0 16px #fff, 0 0 32px var(--blue, #0000ff), 0 0 54px rgba(0,0,255,.55); }
}
.cybe-cs-anim-light {
    position: relative;
    color: var(--blue, #0000ff) !important;
    background: linear-gradient(100deg, var(--blue, #0000ff) 40%, #fff 50%, var(--blue, #0000ff) 60%);
    background-size: 220% 100%;
    background-position: 100% 0;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: cybe-cs-heading-light 3.2s ease-in-out infinite;
}
@keyframes cybe-cs-heading-light {
    0%   { background-position: 140% 0; }
    50%  { background-position: -40% 0; }
    100% { background-position: -40% 0; }
}
.cybe-cs-anim-none { color: var(--blue, #0000ff) !important; }
@media (prefers-reduced-motion: reduce) { .cybe-cs-anim-pulse, .cybe-cs-anim-light { animation: none; } }
.cybe-cs-heading p { font-size: 12px; color: var(--text-muted, #888aaa); margin: 0; text-align: center; }
.cybe-cs-topbar-actions { display: flex; align-items: center; gap: 10px; position: relative; }

/* ── Cyberspace ad banner (hero) ── */
.cybe-cs-ads { width: 100%; max-width: 480px; margin: 4px auto 2px; border-radius: var(--radius-sm, 12px); overflow: hidden; background: var(--bg); box-shadow: var(--neu-in); }
.cybe-cs-ads-track { display: flex; transition: transform .5s ease; }
.cybe-cs-ads-slide { flex: 0 0 100%; }
.cybe-cs-ads-slide img { width: 100%; height: 160px; object-fit: cover; display: block; }
.cybe-cs-ads-dots { display: flex; justify-content: center; gap: 6px; padding: 8px 0; }
.cybe-cs-ads-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(0,0,255,.22); transition: background .25s, transform .25s; }
.cybe-cs-ads-dot.is-active { background: var(--blue, #0000ff); transform: scale(1.25); }
@media (max-width: 480px) { .cybe-cs-ads-slide img { height: 130px; } }

/* ── CYBE SERVICES toggle ── */
.cybe-cs-services-toggle-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--blue, #0000ff); color: #fff; border: none; border-radius: 50px; padding: 10px 22px; font-size: 12px; font-weight: 700; letter-spacing: .08em; cursor: pointer; box-shadow: 0 4px 16px var(--blue-glow, rgba(0,0,255,.3)); transition: opacity .2s, transform .2s, box-shadow .2s; }
.cybe-cs-services-toggle-btn:hover { opacity: .9; }
.cybe-cs-services-toggle-btn[aria-expanded="true"] { box-shadow: var(--neu-in); background: var(--bg); color: var(--blue); }
.cybe-cs-services-toggle-icon { font-size: 14px; }

/* ── CYBE SERVICES reveal panel — compact, animations reduced ──
   Reuses the theme's .services-strip-grid / .service-card markup but scoped
   and restyled to fit inline inside the Cyberspace feed. */
.cybe-cs-services-panel { margin-bottom: 18px; overflow: hidden; max-height: 0; opacity: 0; transition: max-height .35s ease, opacity .25s ease; }
.cybe-cs-services-panel.is-open { max-height: 4000px; opacity: 1; }
.cybe-cs-services-panel[hidden] { display: none; }
.cybe-cs-services-scope { background: var(--surface, var(--bg)); box-shadow: var(--neu-out); border-radius: var(--radius, 16px); border: 1px solid rgba(0,0,255,0.14); padding: 20px; }
.cybe-cs-services-scope .services-strip { padding: 0; }
.cybe-cs-services-scope .sec-eyebrow { display: none; }
.cybe-cs-services-scope .sec-title { font-size: 18px; margin-bottom: 6px; text-align: center; }
.cybe-cs-services-scope .sec-desc { font-size: 12.5px; margin: 0 auto 18px; text-align: center; max-width: 440px; }
.cybe-cs-services-scope .services-strip-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-top: 0; }
.cybe-cs-services-scope .service-card { padding: 14px 12px; border-radius: var(--radius-sm, 12px); transition: none; }
.cybe-cs-services-scope .service-card:hover { transform: none; box-shadow: var(--neu-out); }
.cybe-cs-services-scope .service-thumb { height: 80px; margin-bottom: 10px; }
.cybe-cs-services-scope .service-name { font-size: 13.5px; margin-bottom: 4px; }
.cybe-cs-services-scope .service-desc { font-size: 11px; line-height: 1.45; }
.cybe-cs-services-scope .cybe-msg-btn { margin-top: 10px; padding: 7px 14px; font-size: 9.5px; animation: none; }
.cybe-cs-services-scope .cybe-msg-btn:hover { box-shadow: none; }
/* Kill the TikTok-card decorative sweep/corner animations inside this scope */
.cybe-cs-services-scope .tt-line-h,
.cybe-cs-services-scope .tt-corner-tl,
.cybe-cs-services-scope .tt-corner-br,
.cybe-cs-services-scope .tt-edge-left,
.cybe-cs-services-scope .tt-edge-right { display: none !important; animation: none !important; }
@media (max-width: 480px) {
    .cybe-cs-services-scope .services-strip-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Buttons ── */
.cybe-cs-btn { display: inline-flex; align-items: center; gap: 6px; background: var(--blue, #0000ff); color: #fff !important; border: none; border-radius: 50px; padding: 10px 20px; font-size: 13px; font-weight: 700; cursor: pointer; box-shadow: 0 4px 16px var(--blue-glow, rgba(0,0,255,.3)); transition: opacity .2s, transform .2s; text-decoration: none; }
.cybe-cs-btn:hover { opacity: .88; transform: translateY(-1px); color: #fff !important; }
.cybe-cs-btn-full { width: 100%; justify-content: center; margin-top: 6px; }
.cybe-cs-icon-btn { background: var(--bg); box-shadow: var(--neu-in); border: none; border-radius: 50%; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text); font-size: 16px; transition: box-shadow .2s; flex-shrink: 0; }
.cybe-cs-icon-btn:hover { box-shadow: var(--neu-deep, var(--neu-in)); }
.cybe-cs-bell { position: relative; }
.cybe-cs-badge { position: absolute; top: -2px; right: -2px; background: #ef4444; color: #fff; font-size: 10px; font-weight: 700; min-width: 17px; height: 17px; border-radius: 50%; display: flex; align-items: center; justify-content: center; padding: 0 3px; }

/* ── Notification panel (inline block, pushes layout down — not an overlay) ── */
.cybe-cs-notif-panel { width: 100%; background: var(--surface, var(--bg)); box-shadow: var(--neu-in); border-radius: var(--radius-sm, 12px); border: 1px solid rgba(0,0,255,0.14); overflow: hidden; margin-bottom: 18px; }
.cybe-cs-notif-panel[hidden] { display: none; }
.cybe-cs-notif-panel-head { padding: 14px 16px; font-size: 13px; box-shadow: var(--neu-in); }
.cybe-cs-notif-list { max-height: 360px; overflow-y: auto; }
.cybe-cs-notif { display: flex; gap: 10px; padding: 12px 16px; border-bottom: 1px solid rgba(0,0,255,0.06); }
.cybe-cs-notif-unread { background: rgba(0,0,255,0.05); }
.cybe-cs-notif-icon { font-size: 16px; flex-shrink: 0; }
.cybe-cs-notif-body p { font-size: 13px; margin: 0; color: var(--text); line-height: 1.4; }
.cybe-cs-notif-body span { font-size: 11px; color: var(--text-muted, #888aaa); }

/* ── Filters ── */
.cybe-cs-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.cybe-cs-filters input, .cybe-cs-filters select { background: var(--bg); box-shadow: var(--neu-in); border: none; outline: none; border-radius: 50px; padding: 10px 16px; font-size: 13px; color: var(--text); flex: 1 1 140px; min-width: 0; }
.cybe-cs-filters input:focus, .cybe-cs-filters select:focus { box-shadow: var(--neu-in), 0 0 0 2px var(--blue-dim, rgba(0,0,255,.15)); }
.cybe-cs-tab-link { background: var(--bg); box-shadow: var(--neu-in); border: none; border-radius: 50px; padding: 10px 18px; font-size: 12px; font-weight: 700; color: var(--blue); cursor: pointer; flex-shrink: 0; }

/* ── Feed & Cards (inset neumorphic — pressed-in look) ── */
.cybe-cs-feed { display: flex; flex-direction: column; gap: 18px; }
.cybe-cs-card { background: var(--bg); box-shadow: var(--neu-in); border-radius: var(--radius, 16px); border: 1px solid rgba(0,0,255,0.10); padding: 18px 20px; transition: box-shadow .3s; }
.cybe-cs-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.cybe-cs-head-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.cybe-cs-share-wrap { position: relative; }
.cybe-cs-share-menu { position: absolute; top: 46px; right: 0; z-index: 30; min-width: 170px; background: var(--bg); box-shadow: var(--neu-out); border-radius: 12px; padding: 6px; display: flex; flex-direction: column; gap: 4px; }
.cybe-cs-share-menu[hidden] { display: none !important; }
.cybe-cs-share-option { display: flex; align-items: center; gap: 8px; background: transparent; border: none; text-align: left; padding: 8px 10px; border-radius: 8px; font-size: 13px; color: var(--text); cursor: pointer; transition: box-shadow .15s; }
.cybe-cs-share-option:hover { box-shadow: var(--neu-in); }
.cybe-cs-share-option-icon { font-size: 14px; flex-shrink: 0; width: 16px; text-align: center; }
.cybe-cs-avatar { position: relative; width: 42px; height: 42px; border-radius: 50%; background: var(--bg); box-shadow: var(--neu-in), inset 0 0 0 1px rgba(0,0,255,.12); border: none; flex-shrink: 0; box-sizing: border-box; }
.cybe-cs-avatar::before { content: ''; position: absolute; inset: 6px; border-radius: 50%; background-image: var(--cybe-avatar-img); background-size: cover; background-position: center; background-color: var(--bg); }
.cybe-cs-avatar-sm { width: 30px; height: 30px; }
.cybe-cs-avatar-sm::before { inset: 4px; }
.cybe-cs-card-head-meta { flex: 1; min-width: 0; }
.cybe-cs-card-head-meta strong { display: block; font-size: 14px; font-weight: 700; color: var(--text); }
.cybe-cs-card-head-meta span { font-size: 11px; color: var(--text-muted, #888aaa); }
.cybe-cs-pill { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 4px 10px; border-radius: 50px; flex-shrink: 0; }
.cybe-cs-pill-pending { background: rgba(234,179,8,.15); color: #eab308; }
.cybe-cs-pill-rejected { background: rgba(239,68,68,.15); color: #ef4444; }
.cybe-cs-pill-pinned { background: rgba(0,0,255,.14); color: #4b5cff; }
.cybe-cs-pin-ribbon { position: absolute; top: 8px; left: 8px; z-index: 2; font-size: 10px; font-weight: 700; letter-spacing: .03em; padding: 3px 9px; border-radius: 50px; background: rgba(0,0,255,.85); color: #fff; }
.cybe-cs-home-card { position: relative; }

.cybe-cs-content { font-size: 14px; line-height: 1.6; margin: 0 0 12px; white-space: pre-wrap; color: var(--text); }
.cybe-cs-image { border-radius: var(--radius-sm, 12px); overflow: hidden; box-shadow: var(--neu-in); margin-bottom: 12px; background: var(--bg); transition: height .3s ease; }
.cybe-cs-image img { width: 100%; height: auto; max-height: 640px; object-fit: contain; display: block; }
.cybe-cs-reject-reason { font-size: 12px; color: #ef4444; margin: 0 0 10px; }

.cybe-cs-embed { border-radius: var(--radius-sm, 12px); overflow: hidden; margin-bottom: 12px; box-shadow: var(--neu-in); }
.cybe-cs-embed-ratio { position: relative; padding-top: 56.25%; }
.cybe-cs-embed-ratio iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.cybe-cs-embed-tiktok { display: flex; justify-content: center; padding: 8px; }
.cybe-cs-linkcard { display: flex; align-items: center; gap: 10px; padding: 12px 16px; text-decoration: none; color: var(--blue) !important; }
.cybe-cs-linkcard-icon { font-size: 16px; }
.cybe-cs-linkcard-host { font-size: 13px; font-weight: 600; }

.cybe-cs-card-foot { display: flex; align-items: center; gap: 10px; padding-top: 10px; background: none; border: none; box-shadow: none; }
.cybe-cs-foot-slot { flex: 1; display: flex; align-items: center; justify-content: center; background: none; border: none; box-shadow: none; }
.cybe-cs-action { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--text-muted, #888aaa); padding: 4px; }
.cybe-cs-action:hover { color: var(--blue); }
.cybe-cs-action-icon { font-size: 15px; }

/* ── Circular post-action buttons: Reaction / Comment / Stats — inset by
   default, flip to outset while active/pressed, and back to inset on release ── */
.cybe-cs-circle-btn { width: 40px; height: 40px; border-radius: 50%; background: var(--bg); box-shadow: var(--neu-in); border: 1px solid rgba(0,0,255,0.06); display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; transition: box-shadow .2s, transform .15s, color .2s; color: var(--text-muted, #888aaa); }
.cybe-cs-circle-btn:hover { box-shadow: var(--neu-in), 0 0 10px var(--blue-glow); color: var(--blue); transform: translateY(-1px); }
.cybe-cs-circle-btn:active, .cybe-cs-circle-btn.is-active { box-shadow: var(--neu-deep, var(--neu-in)); color: var(--blue); transform: translateY(0); }
.cybe-cs-circle-icon { font-size: 15px; line-height: 1; }
.cybe-cs-like-btn.is-liked .cybe-cs-circle-icon { color: #ef4444; }
.cybe-cs-like-btn.is-liked { color: #ef4444; }

.cybe-cs-stats-panel { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; padding: 12px 14px; background: var(--bg); box-shadow: var(--neu-in); border-radius: var(--radius-sm); }
.cybe-cs-stats-panel[hidden] { display: none; }
.cybe-cs-stats-panel-item { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--text-muted, #888aaa); }
.cybe-cs-stats-panel-item .cybe-cs-action-icon { font-size: 14px; }
.cybe-cs-stats-panel-item .cybe-cs-like-count,
.cybe-cs-stats-panel-item .cybe-cs-comment-count { color: var(--text); font-weight: 700; }
.cybe-cs-stats-biz { flex-basis: 100%; margin-top: 6px; padding-top: 10px; border-top: 1px solid rgba(0,0,255,0.08); display: flex; flex-direction: column; gap: 6px; }
.cybe-cs-stats-biz-heading { font-family: var(--font-display, serif); font-size: 13px; font-weight: 700; letter-spacing: .04em; color: var(--text); margin: 0 0 2px; }
.cybe-cs-stats-biz-logo { width: 100%; }
.cybe-cs-stats-biz-logo img { max-width: 140px; max-height: 60px; object-fit: contain; border-radius: var(--radius-sm, 10px); background: var(--bg); box-shadow: var(--neu-in); padding: 6px; box-sizing: border-box; display: block; }
.cybe-cs-stats-biz-cat { display: inline-block; align-self: flex-start; background: var(--blue-dim, rgba(0,0,255,.12)); color: var(--blue); font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 3px 10px; border-radius: 20px; }
.cybe-cs-stats-biz-empty { font-size: 12px; color: var(--text-muted, #888aaa); font-style: italic; margin: 2px 0 0; }
.cybe-cs-stats-biz-desc { font-size: 12.5px; color: var(--text); line-height: 1.5; margin: 0; }
.cybe-cs-stats-biz-phone { font-size: 12px; color: var(--text-muted, #888aaa); font-weight: 600; }
.cybe-cs-stats-biz-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.cybe-cs-stats-biz-link { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; color: var(--blue); background: var(--bg); box-shadow: var(--neu-flat, var(--neu-in)); padding: 6px 12px; border-radius: 20px; text-decoration: none; transition: box-shadow .2s, transform .15s; }
.cybe-cs-stats-biz-link:hover { box-shadow: var(--neu-out); transform: translateY(-1px); color: var(--blue); }
.cybe-cs-like-btn.is-liked { color: #ef4444; }

.cybe-cs-comments { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(0,0,255,0.08); }
.cybe-cs-comments-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; max-height: 320px; overflow-y: auto; }
.cybe-cs-comment { display: flex; gap: 10px; align-items: flex-start; }
.cybe-cs-comment-body { flex: 1; background: var(--surface, var(--bg)); box-shadow: var(--neu-in); border-radius: var(--radius-sm, 12px); padding: 8px 12px; }
.cybe-cs-comment-body strong { font-size: 12px; color: var(--text); display: block; }
.cybe-cs-comment-body p { font-size: 13px; margin: 2px 0; color: var(--text); }
.cybe-cs-comment-time { font-size: 10px; color: var(--text-muted, #888aaa); }
.cybe-cs-comment-actions { display: flex; align-items: center; gap: 12px; margin-top: 2px; }
.cybe-cs-comment-reply-btn { background: none; border: none; padding: 0; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--blue); cursor: pointer; }
.cybe-cs-comment-reply-btn:hover { opacity: .75; }
.cybe-cs-replies { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; padding-left: 18px; border-left: 2px solid rgba(0,0,255,0.12); }
.cybe-cs-replies:empty { display: none; }
.cybe-cs-comment-reply .cybe-cs-comment-body { background: var(--bg); }
.cybe-cs-comment-form, .cybe-cs-reply-form { display: flex; gap: 8px; }
.cybe-cs-reply-form { margin-top: 10px; padding-left: 18px; }
.cybe-cs-comment-form input, .cybe-cs-reply-form input { flex: 1; background: var(--bg); box-shadow: var(--neu-in); border: none; outline: none; border-radius: 50px; padding: 10px 16px; font-size: 13px; color: var(--text); }

.cybe-cs-empty { text-align: center; font-size: 13px; color: var(--text-muted, #888aaa); padding: 40px 0; }
.cybe-cs-loadmore { display: block; margin: 20px auto 0; background: var(--bg); box-shadow: var(--neu-in); border: none; border-radius: 50px; padding: 10px 26px; font-size: 12px; font-weight: 700; color: var(--blue); cursor: pointer; }

/* ── Composer modal (raised, sits above the sunken page) ── */
.cybe-cs-modal { position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,10,0.6); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; padding: 20px; }
.cybe-cs-modal[hidden] { display: none !important; }
.cybe-cs-modal-inner { width: 100%; max-width: 480px; max-height: 88vh; overflow-y: auto; background: var(--surface, var(--bg)); box-shadow: none; border-radius: var(--radius, 16px); border: 1px solid rgba(0,0,255,0.16); padding: 22px 24px 26px; }
.cybe-cs-modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.cybe-cs-modal-head strong { font-size: 16px; font-family: var(--font-display, serif); }
.cybe-cs-field-label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted, #888aaa); margin: 14px 0 6px; }
.cybe-cs-modal-inner input[type=text], .cybe-cs-modal-inner input[type=url], .cybe-cs-modal-inner textarea, .cybe-cs-modal-inner select { width: 100%; background: var(--bg); box-shadow: var(--neu-in); border: none; outline: none; border-radius: var(--radius-sm, 12px); padding: 11px 14px; font-size: 14px; color: var(--text); resize: vertical; }
.cybe-cs-modal-inner input:focus, .cybe-cs-modal-inner textarea:focus, .cybe-cs-modal-inner select:focus { box-shadow: var(--neu-in), 0 0 0 2px var(--blue-dim, rgba(0,0,255,.15)); }

/* ── Inline composer — a "free space" embedded in the page, not a popup ── */
.cybe-cs-composer-inline { background: var(--surface, var(--bg)); box-shadow: var(--neu-out); border-radius: var(--radius, 16px); border: 1px solid rgba(0,0,255,0.16); padding: 16px 20px; margin-bottom: 20px; }
.cybe-cs-composer-teaser { display: flex; align-items: center; gap: 12px; width: 100%; background: none; border: none; cursor: pointer; padding: 4px 0; text-align: left; }
.cybe-cs-composer-teaser[hidden] { display: none; }
.cybe-cs-composer-teaser-text { flex: 1; background: var(--bg); box-shadow: var(--neu-in); border-radius: 50px; padding: 11px 18px; font-size: 14px; color: var(--text-muted, #888aaa); }
.cybe-cs-composer-teaser:hover .cybe-cs-composer-teaser-text { color: var(--blue); }
.cybe-cs-composer-inline-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.cybe-cs-composer-inline-head[hidden] { display: none; }
.cybe-cs-composer-inline-head strong { font-size: 16px; font-family: var(--font-display, serif); }
#cybe-cs-composer-form[hidden] { display: none; }
#cybe-cs-composer-form input[type=text], #cybe-cs-composer-form input[type=url], #cybe-cs-composer-form input[type=tel], #cybe-cs-composer-form textarea, #cybe-cs-composer-form select { width: 100%; background: var(--bg); box-shadow: var(--neu-in); border: none; outline: none; border-radius: var(--radius-sm, 12px); padding: 11px 14px; font-size: 14px; color: var(--text); resize: vertical; }
#cybe-cs-composer-form input:focus, #cybe-cs-composer-form textarea:focus, #cybe-cs-composer-form select:focus { box-shadow: var(--neu-in), 0 0 0 2px var(--blue-dim, rgba(0,0,255,.15)); }
.cybe-cs-char-count { display: block; text-align: right; font-size: 11px; color: var(--text-muted, #888aaa); margin-top: 4px; }
.cybe-cs-image-preview { margin-top: 10px; border-radius: var(--radius-sm, 12px); overflow: hidden; box-shadow: var(--neu-in); }
.cybe-cs-image-preview img { width: 100%; height: auto; max-height: 320px; object-fit: contain; background: var(--bg); display: block; }
.cybe-cs-composer-note { font-size: 12px; color: var(--text-muted, #888aaa); margin: 14px 0 4px; line-height: 1.5; }

.chub-verified-badge{color:var(--blue);vertical-align:-2px;margin-left:3px;flex-shrink:0;}
.cybe-cs-avatar-btn { padding: 0; margin: 0; border: none; -webkit-appearance: none; appearance: none; font: inherit; cursor: pointer; transition: box-shadow .2s, transform .15s; }
.cybe-cs-avatar-btn:hover { box-shadow: var(--neu-deep, var(--neu-in)); transform: translateY(-1px); }

/* ── Multi-photo gallery: native horizontal swipe (scroll-snap) + dots ── */
.cybe-cs-gallery { position: relative; background: var(--bg); }
.cybe-cs-gallery-track { display: flex; align-items: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; }
.cybe-cs-gallery-track::-webkit-scrollbar { display: none; }
.cybe-cs-gallery-slide { flex: 0 0 100%; scroll-snap-align: center; cursor: pointer; }
.cybe-cs-gallery-slide img { width: 100%; height: auto; max-height: 640px; object-fit: contain; display: block; background: var(--bg); }
.cybe-cs-gallery-dots { position: absolute; bottom: 10px; left: 0; right: 0; display: flex; justify-content: center; gap: 6px; pointer-events: none; }
.cybe-cs-gallery-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.5); transition: background .2s, transform .2s; }
.cybe-cs-gallery-dot.is-active { background: var(--blue, #0000ff); transform: scale(1.3); }

/* ── Composer photo thumbnail grid (inset neumorphic tiles) ── */
.cybe-cs-image-preview { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 4px; }
.cybe-cs-image-thumb { position: relative; width: 64px; height: 64px; border-radius: var(--radius-sm, 10px); overflow: hidden; box-shadow: var(--neu-in); flex-shrink: 0; }
.cybe-cs-image-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cybe-cs-image-thumb-loading { display: flex; align-items: center; justify-content: center; background: var(--bg); }
.cybe-cs-image-spin { width: 18px; height: 18px; border: 2px solid var(--blue-dim, rgba(0,0,255,.2)); border-top-color: var(--blue); border-radius: 50%; animation: cybeCsSpin .7s linear infinite; }
@keyframes cybeCsSpin { to { transform: rotate(360deg); } }
.cybe-cs-image-remove { position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; border-radius: 50%; background: rgba(0,0,10,.65); color: #fff; border: none; font-size: 10px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.cybe-cs-image-remove:hover { background: #ef4444; }
.cybe-cs-image-count { font-size: 11px; color: var(--text-muted, #888aaa); margin-left: 2px; }

/* ── Fullscreen photo lightbox ── */
.cybe-cs-lightbox { position: fixed; inset: 0; z-index: 10000; background: rgba(0,0,10,.92); display: flex; align-items: center; justify-content: center; }
.cybe-cs-lightbox[hidden] { display: none !important; }
.cybe-cs-lightbox img { max-width: 92vw; max-height: 86vh; border-radius: var(--radius-sm, 12px); box-shadow: 0 0 60px rgba(0,0,255,.25); }
.cybe-cs-lightbox-close { position: absolute; top: 20px; right: 20px; }
.cybe-cs-lightbox-prev, .cybe-cs-lightbox-next { position: absolute; top: 50%; transform: translateY(-50%); font-size: 20px; }
.cybe-cs-lightbox-prev { left: 20px; }
.cybe-cs-lightbox-next { right: 20px; }
.cybe-cs-lightbox-count { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); font-family: var(--font-label,'Syne',sans-serif); font-size: 12px; color: #fff; background: rgba(255,255,255,.08); padding: 5px 14px; border-radius: 50px; }

/* ── Author public profile modal ── */
.cybe-cs-profile-modal-inner { max-width: 380px; text-align: center; }
/* Fix #1, #2, #3 — theme-aware inset shadow, larger size, shared frame token */
.cybe-cs-profile-photo {
    position: relative;
    width: clamp(92px, 14vw, 112px);
    height: clamp(92px, 14vw, 112px);
    border-radius: 50%;
    margin: 4px auto 16px;
    background: var(--bg);
    box-sizing: border-box;
    /* Fix #1 — use theme-aware variable, not hardcoded white */
    box-shadow: var(--neu-in);
    border: 1px solid rgba(0,0,255,.18);
}
.cybe-cs-profile-photo::before {
    content: '';
    position: absolute;
    inset: 9px;
    border-radius: 50%;
    background-image: var(--cybe-avatar-img);
    background-size: cover;
    background-position: center;
    background-color: var(--bg);
}
/* Fix #9 — verified badge color: #0000ff, single source of truth.
   The badge SVG uses a <circle fill="currentColor"> so CSS color drives the fill. */
.chub-verified-badge { color: #0000ff !important; }
.chub-verified-badge svg circle,
.chub-verified-badge svg path[fill="currentColor"],
.chub-verified-badge svg path:first-child { fill: currentColor; }
/* Global enforcement — every verified tick is blue */
:root { --chub-verified-color: #0000ff; }
.chub-verified-badge,.cybe-cs-verified,.cybe-forum-verified { color: var(--chub-verified-color) !important; }
.cybe-cs-profile-name { font-family: var(--font-display, serif); font-size: 20px; font-weight: 400; margin: 0 0 6px; color: var(--text); }
.cybe-cs-profile-category { display: inline-block; font-family: var(--font-label,'Syne',sans-serif); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; background: var(--blue-dim, rgba(0,0,255,.1)); color: var(--blue); padding: 4px 12px; border-radius: 50px; margin-bottom: 12px; }
.cybe-cs-profile-biz-name { font-size: 13px; font-weight: 700; color: var(--text); margin: 0 0 6px; }
.cybe-cs-profile-desc { font-size: 13px; color: var(--text-muted, #888aaa); line-height: 1.6; margin: 0 0 16px; }
.cybe-cs-profile-contacts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 16px; }
.cybe-cs-profile-contact { display: inline-flex; align-items: center; gap: 6px; background: var(--bg); box-shadow: var(--neu-in); border-radius: 50px; padding: 7px 14px; font-size: 12px; color: var(--text); text-decoration: none; }
.cybe-cs-profile-link:hover { color: var(--blue) !important; }
.cybe-cs-profile-joined { font-size: 11px; color: var(--text-muted, #888aaa); margin: 0; }

@media (max-width: 560px) {
    .cybe-cs-topbar-corner { top: 12px; left: 12px; }
    .cybe-cs-topbar-corner-right { top: 12px; right: 12px; }
}

/* ── Blog section below the Cyberspace feed ── */
.cybe-cs-blog-section { margin-top: 40px; padding-top: 32px; border-top: 1px solid rgba(0,0,255,0.1); }
.cybe-cs-blog-heading { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--text); margin: 0 0 20px; text-align: center; }

/* ══════════════════════════════════════════════════════════════════════════
   CYBERSPACE FORUM + FEATURED BUSINESSES + supporting hero tweaks
   ══════════════════════════════════════════════════════════════════════════ */

/* Cyberspace logo buttons — bell stays left, logo moves to right corner */
.cybe-cs-topbar-corner { display: flex; gap: 8px; }
.cybe-cs-topbar-corner-right { display: flex; gap: 8px; }
.cybe-cs-forum-logo-btn { position: relative; padding: 4px; overflow: visible; }
.cybe-cs-forum-logo-img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.cybe-cs-forum-logo-fallback { display: block; width: 100%; height: 100%; border-radius: 50%; background: var(--cs-accent, #2451ff); }

/* Forum glass button — logo image replaces the chat bubble emoji */
.cybe-cs-forum-glass-icon { display: inline-flex; align-items: center; justify-content: center; font-size: 14px; }
.cybe-cs-forum-glass-logo-img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; display: block; }
.cybe-cs-forum-glass-logo-fallback { display: block; width: 20px; height: 20px; border-radius: 50%; background: var(--cs-accent, #2451ff); }

.cybe-cs-forum-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cybe-cs-forum-head-left { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1; }
.cybe-cs-forum-modal-title { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cybe-cs-forum-modal-icon { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; flex: none; }

/* CYBE SERVICES button — logo icon in place of the emoji */
.cybe-cs-services-toggle-icon-img { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }

.cybe-cs-cta-row { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 4px; }

/* Featured Businesses strip */
.cybe-cs-featured { width: 100%; margin-top: 4px; }
.cybe-cs-featured-label { display: block; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--blue, #0000ff); margin-bottom: 10px; text-align: center; }
.cybe-cs-featured-track { display: flex; gap: 14px; overflow-x: auto; padding: 4px 2px 8px; scrollbar-width: none; }
.cybe-cs-featured-track::-webkit-scrollbar { display: none; }
.cybe-cs-featured-item { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; background: none; border: none; cursor: pointer; width: 76px; }
.cybe-cs-featured-logo { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; background: var(--bg); box-shadow: var(--neu-in); border: var(--neu-border-blue, 1px solid rgba(0,0,255,.2)); transition: box-shadow .2s, transform .2s; }
.cybe-cs-featured-item:hover .cybe-cs-featured-logo { box-shadow: var(--neu-deep); transform: translateY(-2px); }
.cybe-cs-featured-name { font-size: 10.5px; color: var(--text-muted, #888aaa); text-align: center; line-height: 1.25; max-width: 76px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Glassmorphic "CYBERSPACE FORUM" button with a moving light sweep ── */
.cybe-cs-forum-glass-btn {
    position: relative;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 24px;
    border-radius: 50px;
    background: rgba(255,255,255,0.07);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,0.20);
    color: #fff;
    font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    cursor: pointer;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,255,.25), inset 0 1px 0 rgba(255,255,255,.15);
    transition: transform .2s, box-shadow .2s, border-color .2s;
}
.cybe-cs-forum-glass-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(0,0,255,.4), inset 0 1px 0 rgba(255,255,255,.25); border-color: rgba(255,255,255,.35); }
.cybe-cs-forum-glass-icon { font-size: 14px; }
.cybe-cs-forum-glass-sweep {
    position: absolute; top: 0; left: -60%; width: 50%; height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,.35), transparent);
    transform: skewX(-20deg);
    animation: cybe-cs-forum-sweep 3.2s ease-in-out infinite;
    pointer-events: none;
}
@keyframes cybe-cs-forum-sweep { 0% { left: -60%; } 55%,100% { left: 130%; } }
[data-theme="light"] .cybe-cs-forum-glass-btn { background: rgba(0,0,255,0.06); color: var(--text); border-color: rgba(0,0,255,.18); }
@media (prefers-reduced-motion: reduce) { .cybe-cs-forum-glass-sweep { animation: none; display: none; } }

/* ── Forum modal — WhatsApp-style thread ── */
.cybe-cs-forum-modal-inner { display: flex; flex-direction: column; max-height: 82vh; padding: 0; overflow: hidden; }
.cybe-cs-forum-modal-inner .cybe-cs-modal-head { padding: 18px 20px; margin: 0; border-bottom: 1px solid rgba(0,0,255,.12); }
.cybe-cs-forum-thread { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; background: var(--bg); box-shadow: var(--neu-inner-deep, inset 3px 3px 8px rgba(0,0,0,.35)); }
.cybe-cs-forum-msg { display: flex; gap: 8px; max-width: 82%; align-items: flex-start; animation: cybeCsBubbleIn .28s cubic-bezier(.2,.8,.3,1) both; }
.cybe-cs-forum-msg.is-own { align-self: flex-end; flex-direction: row-reverse; }
.cybe-cs-forum-msg.is-other { align-self: flex-start; }
@keyframes cybeCsBubbleIn {
    from { opacity: 0; transform: translateY(8px) scale(.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
/* Fix #1,#3 — forum avatar: theme-aware inset shadow (no outer shadow), shared frame */
.cybe-cs-forum-avatar {
    width: 30px; height: 30px; border-radius: 50%;
    background-image: var(--cybe-avatar-img);
    background-size: cover; background-position: center;
    flex-shrink: 0; border: none; cursor: pointer;
    /* Fix #1 — inset only, theme-aware */
    box-shadow: var(--neu-in);
    /* Fix #8 — fallback bg if no avatar */
    background-color: var(--bg);
    position: relative; overflow: hidden;
}
/* Consecutive same-sender messages collapse: hide avatar + name, keep bubble spacing tight */
.cybe-cs-forum-msg.is-collapsed .cybe-cs-forum-avatar { visibility: hidden; }
.cybe-cs-forum-msg.is-collapsed .cybe-cs-forum-name { display: none; }
.cybe-cs-forum-msg.is-collapsed { margin-top: -4px; }
/* Fix #7 — shimmer for forum avatars while loading */
.cybe-cs-forum-avatar.is-loading::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, var(--neu-light, rgba(255,255,255,.1)), transparent);
    background-size: 200% 100%;
    animation: cybe-avatar-shimmer 1.4s ease-in-out infinite;
    border-radius: 50%;
}
@keyframes cybe-avatar-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
/* Fix #10 — inline verified pattern in forum messages */
.cybe-cs-forum-bubble .chub-verified-badge { display: inline-flex; vertical-align: -2px; margin-left: 2px; }
/* Forum verified badge color rules:
   - is-other (white/light bubble, left side) → blue (#0000ff) tick so visible on light bg
   - is-own   (blue bubble, right side)       → white (#ffffff) tick so visible on blue bg
   Global blue rule still applies everywhere outside the forum. */
.cybe-cs-forum-msg.is-other .chub-verified-badge,
.cybe-cs-forum-msg.is-other .cybe-cs-verified,
.cybe-cs-forum-msg.is-other .cybe-forum-verified { color: #0000ff !important; }
.cybe-cs-forum-msg.is-own .chub-verified-badge,
.cybe-cs-forum-msg.is-own .cybe-cs-verified,
.cybe-cs-forum-msg.is-own .cybe-forum-verified { color: #ffffff !important; }

/* Sender tags — FOREIGNER / STRANGER */
.cybe-cs-tag { display: inline-block; font-size: 8.5px; font-weight: 800; letter-spacing: .06em; padding: 2px 7px; border-radius: 8px; margin-left: 4px; vertical-align: 1px; }
.cybe-cs-tag-foreigner { background: var(--bg); color: #ff7a3d; box-shadow: var(--neu-in); }
.cybe-cs-tag-stranger  { background: var(--bg); color: #a259ff; box-shadow: var(--neu-in); }

/* ── Date separators ── */
.cybe-cs-forum-date-sep {
    align-self: center;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .08em;
    color: var(--text-sub, #8888aa);
    padding: 4px 14px;
    border-radius: 20px;
    background: var(--bg);
    box-shadow: var(--neu-in);
    margin: 6px auto;
    pointer-events: none;
    user-select: none;
}

.cybe-cs-forum-msg-col { display: flex; flex-direction: column; min-width: 0; }
.cybe-cs-forum-msg.is-own .cybe-cs-forum-msg-col { align-items: flex-end; }
.cybe-cs-forum-msg.is-other .cybe-cs-forum-msg-col { align-items: flex-start; }
.cybe-cs-forum-bubble-wrap { position: relative; }

.cybe-cs-forum-bubble { position: relative; padding: 8px 12px 18px; border-radius: 14px; font-size: 13.5px; line-height: 1.5; background: var(--bg); color: var(--text); box-shadow: var(--neu-in); }
.cybe-cs-forum-msg.is-own .cybe-cs-forum-bubble { background: var(--blue, #0000ff); color: #fff; border-bottom-right-radius: 4px; box-shadow: var(--neu-in); }
.cybe-cs-forum-msg.is-other .cybe-cs-forum-bubble { border-bottom-left-radius: 4px; }
.cybe-cs-forum-name { display: block; font-size: 11px; font-weight: 700; color: var(--blue, #0000ff); margin-bottom: 2px; }
.cybe-cs-forum-msg.is-own .cybe-cs-forum-name { color: var(--blue, #0000ff); }
.cybe-cs-forum-text { display: block; white-space: pre-wrap; word-break: break-word; }
.cybe-cs-forum-time { position: absolute; right: 12px; bottom: 4px; font-size: 9.5px; opacity: .6; }
.cybe-cs-forum-msg.is-own .cybe-cs-forum-time { color: rgba(255,255,255,.75); opacity: 1; }
.cybe-cs-forum-del { position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; background: var(--bg); color: var(--text); box-shadow: var(--neu-in); border: none; font-size: 10px; line-height: 1; cursor: pointer; display: none; align-items: center; justify-content: center; }
.cybe-cs-forum-msg:hover .cybe-cs-forum-del { display: flex; }

/* ── Reply preview (quoted block inside the composed bubble) ── */
.cybe-cs-reply-preview {
    display: flex; flex-direction: column; gap: 1px;
    background: rgba(0,0,0,.12);
    border-left: 3px solid var(--blue, #0000ff);
    border-radius: 6px;
    padding: 4px 8px;
    margin-bottom: 6px;
    font-size: 11.5px;
    cursor: pointer;
    max-width: 100%;
}
.cybe-cs-forum-msg.is-own .cybe-cs-reply-preview { background: rgba(255,255,255,.16); border-left-color: #fff; }
.cybe-cs-reply-preview-name { font-weight: 700; color: var(--blue, #0000ff); }
.cybe-cs-forum-msg.is-own .cybe-cs-reply-preview-name { color: #fff; }
.cybe-cs-reply-preview-text { opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cybe-cs-reply-preview-gone { font-style: italic; opacity: .6; padding: 4px 8px; margin-bottom: 6px; font-size: 11px; }

/* ── Message hover/tap actions (react + reply icons) ── */
.cybe-cs-msg-actions {
    display: flex; gap: 4px; margin-top: 3px;
    opacity: 0; transform: translateY(-2px);
    transition: opacity .15s ease, transform .15s ease;
    pointer-events: none;
}
.cybe-cs-forum-msg:hover .cybe-cs-msg-actions,
.cybe-cs-forum-msg.is-actions-visible .cybe-cs-msg-actions {
    opacity: 1; transform: translateY(0); pointer-events: auto;
}
.cybe-cs-msg-action-btn {
    width: 24px; height: 24px; border-radius: 50%;
    background: var(--bg); box-shadow: var(--neu-in);
    border: none; font-size: 12px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: var(--text); transition: box-shadow .15s ease, transform .1s ease;
}
.cybe-cs-msg-action-btn:active { transform: scale(.9); box-shadow: var(--neu-inner-deep, var(--neu-in)); }

/* ── Reactions ── */
.cybe-cs-reactions-slot:empty { display: none; }
.cybe-cs-reactions-bar { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.cybe-cs-reaction-pill {
    display: inline-flex; align-items: center; gap: 3px;
    background: var(--bg); box-shadow: var(--neu-in);
    border: none; border-radius: 12px;
    padding: 2px 8px; font-size: 11.5px; color: var(--text);
    cursor: pointer; transition: box-shadow .15s ease, transform .12s ease;
    animation: cybeCsReactionPop .22s cubic-bezier(.34,1.56,.64,1) both;
}
.cybe-cs-reaction-pill span { font-size: 10px; font-weight: 700; opacity: .75; }
.cybe-cs-reaction-pill.is-mine { box-shadow: var(--neu-inner-deep, var(--neu-in)); }
.cybe-cs-reaction-pill.is-mine span { color: var(--blue, #0000ff); opacity: 1; }
.cybe-cs-reaction-pill:active { transform: scale(.92); }
@keyframes cybeCsReactionPop {
    0%   { opacity: 0; transform: scale(.5); }
    70%  { transform: scale(1.12); }
    100% { opacity: 1; transform: scale(1); }
}

/* ── Reaction picker popover ── */
.cybe-cs-reaction-picker {
    position: absolute; z-index: 60;
    display: flex; gap: 4px; padding: 6px 8px;
    background: var(--bg); box-shadow: var(--neu-in);
    border-radius: 22px;
    animation: cybeCsPickerIn .16s cubic-bezier(.2,.8,.3,1) both;
}
@keyframes cybeCsPickerIn {
    from { opacity: 0; transform: translateY(4px) scale(.92); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.cybe-cs-reaction-picker button {
    background: none; border: none; font-size: 19px; line-height: 1;
    cursor: pointer; padding: 3px; border-radius: 50%;
    transition: transform .12s ease, box-shadow .12s ease;
}
.cybe-cs-reaction-picker button:hover { transform: scale(1.25); box-shadow: var(--neu-in); }

/* ── Reply composer bar (above the input, shown while replying) ── */
.cybe-cs-reply-bar {
    display: none;
    align-items: center; gap: 8px;
    padding: 8px 14px;
    background: var(--bg); box-shadow: var(--neu-in);
    margin: 0 16px 8px;
    border-radius: 10px;
    font-size: 12px;
}
.cybe-cs-reply-bar.is-active { display: flex; }
.cybe-cs-reply-bar-content { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; border-left: 3px solid var(--blue, #0000ff); padding-left: 8px; }
.cybe-cs-reply-bar-name { font-weight: 700; color: var(--blue, #0000ff); }
.cybe-cs-reply-bar-text { opacity: .75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cybe-cs-reply-bar-cancel {
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--bg); box-shadow: var(--neu-in);
    border: none; font-size: 11px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: var(--text); flex-shrink: 0;
}

.cybe-cs-forum-form { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid rgba(0,0,255,.12); background: var(--bg); }
.cybe-cs-forum-form textarea { flex: 1; resize: none; height: 40px; max-height: 40px; overflow-x: auto; overflow-y: hidden; white-space: pre; background: var(--bg); box-shadow: var(--neu-in); border: none; outline: none; border-radius: 20px; padding: 10px 16px; font-size: 13.5px; color: var(--text); font-family: inherit; line-height: 1.3; }
.cybe-cs-forum-send-btn { width: 40px; height: 40px; border-radius: 50%; background: var(--bg); color: var(--blue, #0000ff); box-shadow: var(--neu-in); border: none; font-size: 15px; cursor: pointer; flex-shrink: 0; }
.cybe-cs-forum-send-btn:active { box-shadow: var(--neu-inner-deep, var(--neu-in)); }
.cybe-cs-forum-login-notice { padding: 16px; text-align: center; }

/* Jump-to-message highlight flash (triggered by tapping a quoted reply preview) */
.cybe-cs-msg-flash .cybe-cs-forum-bubble { animation: cybeCsFlash .9s ease; }
@keyframes cybeCsFlash {
    0%, 100% { box-shadow: var(--neu-in); }
    30% { box-shadow: var(--neu-in), 0 0 0 2px var(--blue, #0000ff); }
}
.cybe-cs-forum-msg.is-own .cybe-cs-msg-flash .cybe-cs-forum-bubble,
.cybe-cs-msg-flash.is-own .cybe-cs-forum-bubble { animation: cybeCsFlashOwn .9s ease; }
@keyframes cybeCsFlashOwn {
    0%, 100% { box-shadow: var(--neu-in); }
    30% { box-shadow: var(--neu-in), 0 0 0 2px #fff; }
}

/* ══════════════════════════════════════════════════════════════════════════
   FORUM WINDOW — docked (view-only) + fullscreen (full access)
   Minimize state removed. Scroll locked on page in both open states.
   ══════════════════════════════════════════════════════════════════════════ */
.cybe-cs-forum-window {
    position: fixed; z-index: 9500;
    background: var(--bg);
    box-shadow: var(--neu-deep, inset 4.4px 4.4px 6.4px rgba(0,0,0,.4), inset -4.4px -4.4px 6.4px rgba(255,255,255,.06));
    border: 1px solid rgba(0,0,255,0.14);
    border-radius: var(--radius, 16px);
    overflow: hidden;
    transition: opacity .28s ease, transform .28s ease, width .28s ease, height .28s ease, right .28s ease, bottom .28s ease, top .28s ease, left .28s ease, border-radius .28s ease;
    opacity: 1; transform: scale(1);
}
.cybe-cs-forum-window[hidden] { display: none !important; }
.cybe-cs-forum-window.is-animating { opacity: 0; transform: scale(.94); }

/* Scroll lock — prevent page scroll in any open state (docked or fullscreen) */
body.cybe-cs-forum-body-open { overflow: hidden !important; }

/* Docked (default) — fixed-size floating panel, view-only */
.cybe-cs-forum-window[data-state="docked"] { right: 20px; bottom: 20px; width: min(380px, 92vw); height: min(560px, 78vh); }
.cybe-cs-forum-window[data-state="docked"] .cybe-cs-forum-sidebar { transform: translateX(-100%); }

/* Fullscreen — viewport takeover, but leaves the site navbar visible above it
   (--cybe-navbar-h is measured at runtime in JS; falls back to 0 if no fixed
   header is detected so this never breaks sites without one). */
.cybe-cs-forum-window[data-state="fullscreen"] { top: var(--cybe-navbar-h, 0px); right: 0; bottom: 0; left: 0; width: 100vw; height: calc(100vh - var(--cybe-navbar-h, 0px)); border-radius: 0; border: none; }
.cybe-cs-forum-window[data-state="fullscreen"] .cybe-cs-forum-exit-fs { display: flex; }

/* ── Visibility helpers: fs-only hidden in docked, docked-only hidden in fullscreen ── */
.cybe-cs-forum-window[data-state="docked"] .cybe-cs-fs-only { display: none !important; }
.cybe-cs-forum-window[data-state="fullscreen"] .cybe-cs-docked-only { display: none !important; }

/* View-only CTA bar (docked only) */
.cybe-cs-forum-viewonly-cta {
    padding: 10px 16px;
    border-top: 1px solid rgba(0,0,255,.10);
    background: var(--surface, var(--bg));
    flex-shrink: 0;
}
.cybe-cs-forum-open-fully-btn {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; padding: 11px 18px;
    background: var(--blue, #0000ff); color: #fff;
    border: none; border-radius: var(--radius-sm, 10px);
    font-family: var(--font-label, sans-serif); font-size: 12px; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase; cursor: pointer;
    box-shadow: 0 2px 12px var(--blue-glow, rgba(0,0,255,.35));
    transition: opacity .2s, transform .2s;
}
.cybe-cs-forum-open-fully-btn:hover { opacity: .88; transform: translateY(-1px); }

.cybe-cs-forum-shell { display: flex; width: 100%; height: 100%; position: relative; overflow: hidden; }
.cybe-cs-forum-main { display: flex; flex-direction: column; flex: 1; min-width: 0; height: 100%; width: 100%; }

/* Sidebar — sliding overlay drawer on ALL states (mobile & desktop) */
.cybe-cs-forum-sidebar-backdrop { display: none; position: absolute; inset: 0; z-index: 10; background: rgba(0,0,0,0.45); }
.cybe-cs-forum-sidebar-backdrop.is-open { display: block; }
.cybe-cs-forum-sidebar {
    display: flex; flex-direction: column;
    position: absolute; top: 0; left: 0; bottom: 0; z-index: 11;
    width: 220px; flex-shrink: 0;
    background: var(--bg); box-shadow: var(--neu-in); padding: 18px 14px; gap: 4px; overflow-y: auto;
    transform: translateX(-100%);
    transition: transform .28s ease;
    will-change: transform;
}
.cybe-cs-forum-sidebar.is-open { transform: translateX(0); }
@media (min-width: 641px) { .cybe-cs-forum-sidebar { width: 260px; } }
.cybe-cs-forum-sidebar-head { display: flex; align-items: center; justify-content: space-between; font-family: var(--font-display, serif); font-size: 17px; margin-bottom: 14px; color: var(--text); }
.cybe-cs-forum-sidebar-close { margin-left: auto; flex-shrink: 0; }
.cybe-cs-forum-sidebar-group-label { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted, #888aaa); margin: 14px 0 6px; display: flex; align-items: center; justify-content: space-between; }
.cybe-cs-sidebar-more-link { font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: lowercase; color: var(--blue, #3345ee); text-decoration: none; opacity: .75; transition: opacity .15s; padding: 1px 5px; border-radius: 4px; background: rgba(51,69,238,.1); }
.cybe-cs-sidebar-more-link:hover { opacity: 1; text-decoration: none; }
.cybe-cs-sidebar-loc-stranger { opacity: .85 !important; font-size: 12px; font-style: italic; }
.cybe-cs-forum-channel { display: block; width: 100%; text-align: left; background: var(--bg); box-shadow: var(--neu-in); border: none; border-radius: var(--radius-sm, 10px); padding: 9px 12px; font-size: 13px; color: var(--text); cursor: pointer; margin-bottom: 4px; transition: box-shadow .2s; text-decoration: none; box-sizing: border-box; }
a.cybe-cs-forum-channel { color: var(--text); }
a.cybe-cs-forum-channel:hover, a.cybe-cs-forum-channel:visited { color: var(--text); text-decoration: none; }
.cybe-cs-forum-channel:hover:not(:disabled) { box-shadow: var(--neu-deep); }
.cybe-cs-forum-channel.is-active { box-shadow: var(--neu-deep); color: var(--blue); font-weight: 700; }
a.cybe-cs-forum-channel.is-active { color: var(--blue); }
.cybe-cs-forum-channel:disabled { opacity: .45; cursor: default; }

/* Coming-soon inline tag */
.cybe-cs-soon-tag {
  font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  background: var(--blue, #3345ee); color: #fff;
  border-radius: 4px; padding: 1px 5px; margin-left: 5px;
  vertical-align: middle; opacity: .75;
}

/* Location items — slightly muted but not as faded as other disabled */
.cybe-cs-sidebar-loc { opacity: .7 !important; font-size: 12px; }

/* Newsfeed item — distinct active look */
.cybe-cs-sidebar-newsfeed { font-weight: 700; }

/* Support button — slightly warm tint */
.cybe-cs-sidebar-support { color: var(--blue, #3345ee); font-weight: 600; }
.cybe-cs-sidebar-support:hover { box-shadow: var(--neu-deep); }

/* Sidebar head title */
.cybe-cs-forum-sidebar-head strong { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }

/* Sidebar toggle (hamburger) in forum header */
.cybe-cs-forum-sidebar-toggle { font-size: 17px; letter-spacing: 0; }

/* Header — draggable-looking bar with window controls */
.cybe-cs-forum-window .cybe-cs-forum-modal-head { padding: 14px 16px; margin: 0; background: var(--bg); box-shadow: var(--neu-in); flex-shrink: 0; }
.cybe-cs-forum-modal-title { position: relative; }
.cybe-cs-forum-controls { display: flex; gap: 6px; }
.cybe-cs-forum-ctrl { width: 30px; height: 30px; border-radius: 50%; background: var(--bg); box-shadow: var(--neu-in); border: none; color: var(--text); font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: box-shadow .2s; flex-shrink: 0; }
.cybe-cs-forum-ctrl:hover { box-shadow: var(--neu-deep); color: var(--blue); }
.cybe-cs-forum-window-badge { position: static; margin-left: 4px; }

.cybe-cs-forum-exit-fs { display: none; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: 10px; background: var(--bg); box-shadow: var(--neu-in); border: none; border-top: 1px solid rgba(0,0,255,.12); color: var(--text-muted, #888aaa); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; flex-shrink: 0; }
.cybe-cs-forum-exit-fs:hover { color: var(--blue); }

@media (max-width: 640px) {
    .cybe-cs-forum-window[data-state="docked"] { right: 10px; bottom: 10px; left: 10px; width: auto; }
}

/* ══════════════════════════════════════════════════════════════════════════
   VIEW PROFILE — fullscreen page (not a modal)
   ══════════════════════════════════════════════════════════════════════════ */
.cybe-cs-profile-page { position: fixed; inset: 0; z-index: 9700; background: var(--bg); overflow: hidden; }
.cybe-cs-profile-page[hidden] { display: none !important; }
.cybe-cs-profile-page-scroll { position: absolute; inset: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.cybe-cs-profile-page-close { position: fixed; top: 16px; right: 16px; z-index: 20; background: rgba(0,0,10,.4); backdrop-filter: blur(6px); color: #fff; box-shadow: none; }
.cybe-cs-profile-page-body[hidden] { display: none; }
.cybe-cs-profile-page .cybe-cs-empty { padding: 60px 20px; text-align: center; color: var(--text-muted, #888aaa); }

/* Sticky mini-header, appears once scrolled past the cover */
.cybe-cs-profile-sticky { position: fixed; top: 0; left: 0; right: 0; z-index: 15; display: flex; align-items: center; gap: 10px; padding: 10px 60px 10px 16px; background: var(--surface, var(--bg)); box-shadow: var(--neu-flat, 0 2px 10px rgba(0,0,0,.2)); transform: translateY(-100%); transition: transform .25s ease; }
.cybe-cs-profile-sticky.is-visible { transform: translateY(0); }
.cybe-cs-profile-sticky-photo { width: 32px; height: 32px; border-radius: 50%; background-size: cover; background-position: center; background-color: var(--bg); box-shadow: var(--neu-in); flex-shrink: 0; }
.cybe-cs-profile-sticky-name { font-size: 14px; color: var(--text); font-family: var(--font-display, serif); }

/* Cover */
.cybe-cs-pv-cover { position: relative; width: 100%; height: 34vh; min-height: 190px; max-height: 320px; background: var(--surface); overflow: hidden; cursor: pointer; }
.cybe-cs-pv-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cybe-cs-pv-cover-prompt { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,20,.45); color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-align: center; padding: 20px; }

/* Overlapping circular profile photo */
.cybe-cs-pv-identity { position: relative; padding: 0 24px; margin-top: -54px; text-align: center; }
/* Fix #1,#2,#3,#4 — pv hero avatar: inset shadow, larger size, blue ring */
.cybe-cs-pv-avatar {
    width: clamp(108px, 16vw, 128px);
    height: clamp(108px, 16vw, 128px);
    border-radius: 50%;
    margin: 0 auto 12px;
    background-size: cover;
    background-position: center;
    background-color: var(--bg);
    /* Fix #1 — inset only, theme-aware, no outer shadow */
    box-shadow: var(--neu-in);
    /* Fix #4 — thin blue ring on hero photo only */
    outline: 2px solid rgba(0,0,255, 0.5);
    outline-offset: 3px;
    cursor: pointer;
}
.cybe-cs-pv-name { font-family: var(--font-display, serif); font-size: 22px; font-weight: 700; color: var(--text); margin: 0 0 4px; }
.cybe-cs-pv-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 14px 0 4px; }

/* Personal info block */
.cybe-cs-pv-personal { max-width: 640px; margin: 0 auto; padding: 6px 24px 24px; text-align: center; }
.cybe-cs-pv-bio { font-size: 13.5px; color: var(--text-muted, #888aaa); line-height: 1.7; margin-top: 10px; }
.cybe-cs-pv-joined { font-size: 11px; color: var(--text-muted, #888aaa); margin-top: 10px; }

/* Neumorphic divider */
.cybe-cs-pv-divider { max-width: 640px; margin: 8px auto 24px; height: 8px; border-radius: 8px; background: var(--bg); box-shadow: var(--neu-in); }

/* Business block */
.cybe-cs-pv-business { max-width: 720px; margin: 0 auto; padding: 0 24px 60px; }
.cybe-cs-pv-biz-head { text-align: center; margin-bottom: 18px; }
.cybe-cs-pv-biz-name { font-family: var(--font-display, serif); font-size: 20px; font-weight: 700; color: var(--text); margin: 0 0 6px; }
.cybe-cs-pv-biz-desc { font-size: 13.5px; color: var(--text-muted, #888aaa); line-height: 1.7; max-width: 520px; margin: 10px auto 0; }

.cybe-cs-pv-tabs { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 16px; scrollbar-width: none; }
.cybe-cs-pv-tabs::-webkit-scrollbar { display: none; }
.cybe-cs-pv-tab { flex-shrink: 0; background: var(--bg); box-shadow: var(--neu-in); border: none; border-radius: 50px; padding: 9px 18px; font-size: 12.5px; font-weight: 700; color: var(--text-muted, #888aaa); cursor: pointer; transition: box-shadow .2s, color .2s; }
.cybe-cs-pv-tab.is-active { box-shadow: var(--neu-deep); color: var(--blue); }
.cybe-cs-pv-tabpanel { background: var(--bg); box-shadow: var(--neu-in); border-radius: var(--radius, 16px); padding: 20px; }
.cybe-cs-pv-tabpanel[hidden] { display: none; }

.cybe-cs-pv-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cybe-cs-pv-info-item { display: flex; flex-direction: column; gap: 3px; }
.cybe-cs-pv-info-label { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted, #888aaa); }
.cybe-cs-pv-info-val { font-size: 13.5px; color: var(--text); }
.cybe-cs-pv-info-val a { color: var(--blue); }
.cybe-cs-pv-map-embed { grid-column: 1 / -1; margin-top: 6px; border-radius: var(--radius-sm, 12px); overflow: hidden; box-shadow: var(--neu-in); }
.cybe-cs-pv-map-embed a { display: block; padding: 12px; text-align: center; font-size: 12.5px; font-weight: 700; }

.cybe-cs-pv-services-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.cybe-cs-pv-services-list li { background: var(--surface, var(--bg)); box-shadow: var(--neu-out); border-radius: var(--radius-sm, 12px); padding: 12px 16px; font-size: 13.5px; color: var(--text); }

.cybe-cs-pv-gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cybe-cs-pv-gallery-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-sm, 10px); box-shadow: var(--neu-in); cursor: pointer; }

.cybe-cs-pv-reviews-placeholder { text-align: center; padding: 30px 10px; color: var(--text-muted, #888aaa); font-size: 13px; }

@media (max-width: 560px) {
    .cybe-cs-pv-info-grid { grid-template-columns: 1fr; }
}

/* ── Fullscreen image viewer (cover / profile photo) with pinch/double-tap zoom ── */
.cybe-cs-imgview { position: fixed; inset: 0; z-index: 10500; background: rgba(0,0,10,.94); display: flex; align-items: center; justify-content: center; overflow: hidden; touch-action: none; }
.cybe-cs-imgview[hidden] { display: none !important; }
.cybe-cs-imgview-close { position: absolute; top: 20px; right: 20px; z-index: 5; }
.cybe-cs-imgview-stage { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.cybe-cs-imgview-stage img { max-width: 94vw; max-height: 90vh; object-fit: contain; will-change: transform; transition: transform .12s ease-out; touch-action: none; user-select: none; -webkit-user-drag: none; }

/* ═══════════════════════════════════════════════════════════
   USER BUSINESS INFORMATION CARD — post stats panel redesign
═══════════════════════════════════════════════════════════ */
.cybe-cs-stats-panel-counts{display:flex;gap:16px;padding:10px 14px 0;flex-wrap:wrap;}
.cybe-cs-biz-card{background:var(--surface);border-radius:16px;border:var(--glass-border);box-shadow:var(--neu-out);padding:18px 16px 14px;margin:12px 0 4px;position:relative;overflow:hidden;}
.cybe-cs-biz-card::before{content:'';position:absolute;top:-40px;right:-40px;width:120px;height:120px;background:radial-gradient(circle,rgba(0,0,255,.07) 0%,transparent 70%);pointer-events:none;}
.cybe-cs-biz-card-header{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:4px;}
.cybe-cs-biz-card-title{font-family:var(--font-label);font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--text);}
.cybe-cs-biz-card-title span{color:var(--blue);}
.cybe-cs-biz-card-verified-badge{display:inline-flex;align-items:center;gap:5px;background:var(--bg);border:1px solid rgba(0,0,255,.22);border-radius:50px;padding:4px 10px;font-family:var(--font-label);font-size:9px;font-weight:700;letter-spacing:.1em;color:#0000ff;box-shadow:var(--neu-in);}
.cybe-cs-biz-card-divider{height:1px;background:linear-gradient(90deg,var(--blue),transparent);margin:8px 0 12px;opacity:.4;}
.cybe-cs-biz-card-body{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:start;margin-bottom:14px;}
.cybe-cs-biz-card-logo-wrap{position:relative;width:68px;height:68px;flex-shrink:0;}
.cybe-cs-biz-card-logo{width:68px;height:68px;border-radius:10px;object-fit:cover;box-shadow:var(--neu-out);border:1px solid rgba(0,0,255,.12);}
.cybe-cs-biz-card-logo-tick{position:absolute;bottom:-4px;right:-4px;width:20px;height:20px;background:var(--surface);border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 2px var(--surface);}
.cybe-cs-biz-card-mid{min-width:0;}
.cybe-cs-biz-card-cat{display:inline-block;font-family:var(--font-label);font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--blue);background:rgba(0,0,255,.08);border:1px solid rgba(0,0,255,.18);border-radius:50px;padding:3px 10px;margin-bottom:6px;}
.cybe-cs-biz-card-name{font-family:var(--font-display);font-size:16px;font-weight:600;color:var(--text);margin-bottom:4px;line-height:1.2;}
.cybe-cs-biz-card-desc{font-size:11px;color:var(--text-sub);line-height:1.5;margin-bottom:6px;}
.cybe-cs-biz-card-phone{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--blue);}
.cybe-cs-biz-card-phone a{color:var(--blue);}
.cybe-cs-biz-card-right{display:flex;flex-direction:column;gap:8px;min-width:100px;}
.cybe-cs-biz-card-meta-item{display:flex;align-items:flex-start;gap:6px;font-size:11px;color:var(--text-sub);}
.cybe-cs-biz-card-meta-item svg{flex-shrink:0;margin-top:2px;color:var(--blue);}
.cybe-cs-biz-card-meta-item div{display:flex;flex-direction:column;}
.cybe-cs-biz-card-meta-item strong{font-size:11px;font-weight:700;color:var(--text);display:block;}
.cybe-cs-biz-card-meta-item small{font-size:10px;color:var(--text-sub);}
.cybe-cs-biz-card-links{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.cybe-cs-biz-card-link{display:flex;align-items:center;gap:9px;background:var(--bg);border:var(--glass-border);border-radius:10px;padding:9px 11px;text-decoration:none;color:var(--text);box-shadow:var(--neu-in);transition:box-shadow .2s,color .2s;}
.cybe-cs-biz-card-link:hover{color:var(--blue);box-shadow:var(--neu-out);}
.cybe-cs-biz-card-link-icon{flex-shrink:0;color:var(--blue);}
.cybe-cs-biz-card-link-text{display:flex;flex-direction:column;}
.cybe-cs-biz-card-link-text strong{font-size:11px;font-weight:700;color:var(--blue);display:block;}
.cybe-cs-biz-card-link-text small{font-size:9px;color:var(--text-sub);}
@media (max-width:520px){
  .cybe-cs-biz-card-body{grid-template-columns:auto 1fr;gap:10px;}
  .cybe-cs-biz-card-right{display:none;}
  .cybe-cs-biz-card-links{grid-template-columns:1fr 1fr;}
}
.cybe-cs-comment-login-prompt{display:block;text-align:center;padding:10px 16px;margin:8px 0;font-size:12px;color:var(--blue);border:1px solid rgba(0,0,255,.2);border-radius:50px;background:rgba(0,0,255,.05);text-decoration:none;}
.cybe-cs-comment-login-prompt:hover{background:rgba(0,0,255,.1);}

/* ================================================================
   POST AS SELECTOR — inset neumorphic, compact, theme-aware
   ================================================================ */
.cybe-cs-post-as-wrap {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 10px;
}
.cybe-cs-post-as-wrap-inline {
    margin-bottom: 6px;
}
.cybe-cs-post-as-label {
    font-family: var(--font-label, 'Syne', sans-serif);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}
.cybe-cs-post-as-select {
    background: var(--bg);
    color: var(--text);
    border: 1px solid rgba(0,0,255,.18);
    border-radius: 50px;
    box-shadow: var(--neu-in);
    font-family: var(--font-label, 'Syne', sans-serif);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    padding: 4px 22px 4px 10px;
    cursor: pointer;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%230000ff'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 8px;
    transition: box-shadow .2s;
}
.cybe-cs-post-as-select:focus {
    box-shadow: var(--neu-in), 0 0 0 2px rgba(0,0,255,.25);
}
.cybe-cs-post-as-select-sm {
    font-size: 10px;
    padding: 3px 20px 3px 8px;
}

/* Comment/reply form layout with Post as */
.cybe-cs-comment-input-row {
    display: flex;
    gap: 6px;
    align-items: center;
}
.cybe-cs-comment-input-row input {
    flex: 1;
}

/* Forum form layout with Post as on top */
.cybe-cs-forum-form-top {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px 4px;
}
.cybe-cs-forum-form-row {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}
.cybe-cs-forum-form-row textarea {
    flex: 1;
}

/* ================================================================
   BUSINESS BADGE — inset neumorphic, blue, compact
   ================================================================ */
.cybe-cs-biz-badge {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-label, 'Syne', sans-serif);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #0000ff;
    background: var(--bg);
    border: 1px solid rgba(0,0,255,.28);
    border-radius: 4px;
    padding: 2px 5px;
    box-shadow: var(--neu-in);
    margin-left: 5px;
    vertical-align: middle;
    flex-shrink: 0;
    line-height: 1.4;
}

/* ══════════════════════════════════════════════════════════════════════════
   FORUM PAGE — [forum] shortcode full-page layout
   ══════════════════════════════════════════════════════════════════════════ */
/* The theme's global body{padding-top:68px} reserves space for the fixed
   .site-header — but header.php prints no .site-header at all on this page.
   Left unset, that reserved 68px becomes a blank gap above the forum header
   bar. body.cybe-forum-page (set in header.php) zeroes it back out so the
   forum header sits flush at the very top with no ghost space. */
body.cybe-forum-page { padding-top: 0 !important; }

.cybe-cs-forum-page {
    position: relative;
    width: 100%;
    height: 100svh;
    min-height: 500px;
    display: flex;
    flex-direction: column;
    background: var(--bg);
    /* App-style full-bleed page, not a floating card: no border, no
       radius, no drop shadow — those belonged to the docked widget. */
    overflow: hidden;
}
.cybe-cs-forum-page-shell {
    display: flex;
    flex: 1;
    overflow: hidden;
    height: 100%;
}
/* Back button — blue, pill-shaped */
.cybe-cs-forum-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 14px;
    background: #0000ff;
    color: #ffffff;
    border: none;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    cursor: pointer;
    transition: opacity .18s, transform .18s;
}
.cybe-cs-forum-back-btn:hover { opacity: .85; transform: translateX(-2px); }
/* On the forum page the sidebar toggle is always visible (no fs-only restriction) */
.cybe-cs-forum-page .cybe-cs-forum-sidebar-toggle { display: flex !important; }
/* Forum page form is always visible (not fs-only) */
.cybe-cs-forum-page .cybe-cs-forum-form { display: flex; }
/* The forum page login notice is always visible */
.cybe-cs-forum-page .cybe-cs-forum-login-notice { display: flex; justify-content: center; padding: 16px; }

/* Full-width app-style header bar — inset neumorphic, no outer/drop shadow,
   properly padded so drawer icon / title / Back button aren't cramped. */
.cybe-cs-forum-page .cybe-cs-forum-modal-head {
    flex-shrink: 0;
    width: 100%;
    padding: 14px 20px;
    background: var(--bg);
    box-shadow: var(--neu-deep);
    gap: 14px;
}
.cybe-cs-forum-page .cybe-cs-forum-head-left { gap: 10px; }
.cybe-cs-forum-page .cybe-cs-forum-modal-title { font-size: 16px; }
.cybe-cs-forum-page .cybe-cs-forum-modal-icon { width: 28px; height: 28px; }
.cybe-cs-forum-page .cybe-cs-forum-sidebar-toggle,
.cybe-cs-forum-page .cybe-cs-forum-back-btn { flex-shrink: 0; }

/* ── Sidebar hint text (e.g. "Admin only") ── */
.cybe-cs-sidebar-hint {
  font-size: 9px; font-weight: 600; letter-spacing: .04em;
  opacity: .6; margin-left: 5px; vertical-align: middle;
  text-transform: none;
}

/* ── Location items that are the user's own (home) — full opacity, clickable ── */
.cybe-cs-sidebar-loc-home { opacity: 1 !important; font-weight: 600; }

/* ── Create/topic buttons — enabled, no disabled fade ── */
.cybe-cs-sidebar-create-business,
.cybe-cs-sidebar-create-career,
.cybe-cs-sidebar-create-skill,
.cybe-cs-sidebar-create-topic,
.cybe-cs-sidebar-announcement { opacity: 1 !important; cursor: pointer; }

/* ══════════════════════════════════════════════════════════════════════
   CYBE HUB — Drawer Restructure (Part 1a)
══════════════════════════════════════════════════════════════════════ */

/* Sidebar scroll area — fills space between header and settings row */
.cybe-cs-forum-sidebar { display: flex; flex-direction: column; }
.cybe-cs-sidebar-scroll { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; padding-bottom: 8px; }

/* Settings row — always pinned at bottom */
.cybe-cs-sidebar-settings-row {
  flex-shrink: 0;
  padding: 10px 0 4px;
  border-top: 1px solid rgba(128,128,128,.15);
  margin-top: 4px;
}

/* Sub-labels inside LOCATION (COUNTRY / STATES / LGA) */
.cybe-cs-sidebar-sublabel {
  font-size: 9px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--blue, #3345ee);
  opacity: .7; margin: 10px 0 4px 2px;
}

/* Pinned (user's own) location/forum item */
.cybe-cs-sidebar-pinned {
  border-left: 3px solid var(--blue, #3345ee) !important;
  padding-left: 9px !important;
  font-weight: 700;
}

/* "You" badge on pinned sub-forum */
.cybe-cs-sidebar-own-badge {
  font-size: 9px; font-weight: 700; letter-spacing: .06em;
  background: var(--blue, #3345ee); color: #fff;
  border-radius: 4px; padding: 1px 5px; margin-left: 5px;
  vertical-align: middle;
}

/* Create-forum buttons */
.cybe-cs-sidebar-create-subforum { opacity: 1 !important; cursor: pointer; }

/* ── Channel Panel (slides over main thread) ── */
.cybe-cs-channel-panel {
  position: absolute; inset: 0; z-index: 20;
  background: var(--bg, #e8eaf0);
  display: flex; flex-direction: column;
  border-radius: inherit;
}
.cybe-cs-channel-panel[hidden] { display: none !important; }
.cybe-cs-channel-panel-head {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-bottom: 1px solid rgba(128,128,128,.15);
  flex-shrink: 0;
}
.cybe-cs-channel-panel-head strong { font-size: 14px; color: var(--text); }
.cybe-cs-channel-thread {
  flex: 1 1 auto; overflow-y: auto; padding: 10px 12px;
}
.cybe-cs-channel-compose {
  flex-shrink: 0; padding: 8px 12px;
  border-top: 1px solid rgba(128,128,128,.15);
}

/* ── Sub-forum creation modal ── */
/* ── Inline sub-forum create dropdown ── */
.cybe-cs-sf-create-wrap { position: relative; }
.cybe-cs-sf-create-drop {
  margin: 4px 0 6px;
  background: var(--bg, #e8eaf0);
  box-shadow: var(--neu-in, inset 3px 3px 7px rgba(0,0,0,.12), inset -3px -3px 7px rgba(255,255,255,.7));
  border-radius: 10px; padding: 10px 12px;
  display: flex; flex-direction: column; gap: 8px;
}
.cybe-cs-sf-create-drop[hidden] { display: none !important; }
.cybe-cs-sf-create-input {
  width: 100%; box-sizing: border-box;
  padding: 8px 11px; border: none; border-radius: 7px;
  background: var(--bg); box-shadow: var(--neu-in);
  font-size: 13px; color: var(--text); outline: none;
}
.cybe-cs-sf-create-btns { display: flex; gap: 8px; }
.cybe-cs-sf-create-btns .cybe-cs-btn { flex: 1; font-size: 12px; padding: 6px 10px; }
.cybe-cs-sf-create-cancel { font-size: 12px; }

/* Dark neumorphic overrides (uses existing --nm-* variables) */
[data-theme="dark"] .cybe-cs-sidebar-sublabel,
.dark-mode .cybe-cs-sidebar-sublabel { opacity: .85; }
[data-theme="dark"] .cybe-cs-sidebar-settings-row,
.dark-mode .cybe-cs-sidebar-settings-row { border-color: rgba(255,255,255,.1); }
[data-theme="dark"] .cybe-cs-channel-panel-head,
.dark-mode .cybe-cs-channel-panel-head { border-color: rgba(255,255,255,.1); }

/* ── Settings dropdown ── */
.cybe-cs-settings-chevron { font-size: 10px; margin-left: auto; transition: transform .2s; }
.cybe-cs-settings-dropdown {
  margin-top: 6px; padding: 10px 12px; border-radius: 10px;
  background: var(--bg, #1a1a2e); box-shadow: inset 2px 2px 6px rgba(0,0,0,.35), inset -2px -2px 6px rgba(255,255,255,.04);
}
.cybe-cs-settings-dropdown[hidden] { display: none !important; }
.cybe-cs-settings-row {
  display: flex; align-items: center; gap: 10px; cursor: pointer; user-select: none;
}
.cybe-cs-settings-label { font-size: 12px; color: var(--text-muted, #a0a0c0); flex: 1; }
.cybe-cs-settings-hint { font-size: 11px; color: var(--text-muted, #a0a0c0); margin: 6px 0 0; opacity: .7; }

/* Toggle switch */
.cybe-cs-toggle-track {
  position: relative; width: 36px; height: 20px; border-radius: 999px; flex-shrink: 0;
  box-shadow: inset 2px 2px 5px rgba(0,0,0,.4), inset -1px -1px 4px rgba(255,255,255,.05);
  background: rgba(255,255,255,.06); transition: background .25s;
}
.cybe-cs-toggle-track.is-on { background: rgba(56,139,253,.55); box-shadow: inset 2px 2px 5px rgba(0,0,0,.3), inset -1px -1px 4px rgba(255,255,255,.08), 0 0 8px rgba(56,139,253,.5); }
.cybe-cs-toggle-thumb {
  position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%;
  background: rgba(255,255,255,.5); transition: transform .25s, background .25s;
}
.cybe-cs-toggle-track.is-on .cybe-cs-toggle-thumb { transform: translateX(16px); background: #fff; }

/* ── Blue Light Glassmorphism theme ── */
.cybe-cs-glass-active {
  background: rgba(14, 40, 90, 0.55) !important;
  backdrop-filter: blur(22px) saturate(160%) brightness(1.1) !important;
  -webkit-backdrop-filter: blur(22px) saturate(160%) brightness(1.1) !important;
  border: 1px solid rgba(100, 160, 255, 0.22) !important;
  box-shadow:
    0 0 0 1px rgba(56, 139, 253, 0.15),
    inset 0 1px 0 rgba(255,255,255,.08),
    0 8px 40px rgba(10, 30, 80, 0.6),
    0 0 60px rgba(56, 139, 253, 0.12) !important;
}
/* Blue glass overlay pseudo-element for ambient light glow */
#cybe-cs-forum-window.cybe-cs-glass-active::before {
  content: '';
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0;
  background: linear-gradient(135deg, rgba(56,139,253,.08) 0%, rgba(100,200,255,.04) 50%, rgba(30,60,180,.06) 100%);
}
#cybe-cs-forum-window.cybe-cs-glass-active > * { position: relative; z-index: 1; }

/* Sidebar glass */
#cybe-cs-forum-sidebar.cybe-cs-glass-active {
  background: rgba(10, 28, 70, 0.6) !important;
  border-right: 1px solid rgba(100, 160, 255, 0.18) !important;
}

/* Thread area glass */
#cybe-cs-forum-thread.cybe-cs-glass-active {
  background: transparent !important;
}

/* Forum page root glass */
#cybe-cs-forum-page-root.cybe-cs-glass-active {
  background: rgba(14, 40, 90, 0.55) !important;
  backdrop-filter: blur(22px) saturate(160%) brightness(1.1) !important;
  -webkit-backdrop-filter: blur(22px) saturate(160%) brightness(1.1) !important;
  border: 1px solid rgba(100, 160, 255, 0.22) !important;
  box-shadow: 0 0 0 1px rgba(56,139,253,.15), inset 0 1px 0 rgba(255,255,255,.08), 0 8px 40px rgba(10,30,80,.6) !important;
}

/* ── Custom verified tick image badges ── */
.chub-verified-img { display: inline-block; flex-shrink: 0; vertical-align: -2px; }
/* Shimmer on load — hidden once loaded */
.chub-verified-badge, .chub-admin-badge { display: inline-flex; align-items: center; vertical-align: middle; }
.chub-admin-badge { margin-left: 3px; }
.chub-admin-img { display: inline-block; flex-shrink: 0; vertical-align: -2px; }