/* =========================
   RESET & GENERAL
========================= */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background: #FFF9ED; color: #2E2E2E; line-height: 1.6; }
html, body { max-width: 100%; overflow-x: clip; }
html { scrollbar-gutter: stable; }
img, video { max-width: 100%; height: auto; }
button:disabled, [aria-disabled="true"] { cursor: wait; opacity: .62; }
.offline-page { min-height: 100dvh; display: grid; place-items: center; padding: max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)); background: #FFD43B; }
.offline-card { width: min(100%, 430px); margin: 0; padding: 32px 24px; border-radius: 20px; background: #FFF9ED; text-align: center; box-shadow: 0 12px 35px rgba(0,0,0,.14); }
.offline-icon { display: grid; place-items: center; width: 58px; height: 58px; margin: 0 auto 18px; border-radius: 50%; background: #FFD43B; color: #2E2E2E; font-size: 32px; font-weight: 900; }
.offline-card h1 { margin-bottom: 8px; font-size: clamp(24px, 7vw, 32px); }
.offline-card p { margin-bottom: 22px; color: #666; }
.offline-card button { min-width: 150px; min-height: 48px; background: #FFD43B; font-weight: 700; }

.install-guide-page { max-width: 760px; margin: 35px auto; padding: 0 20px 120px; }
.install-guide-heading { margin-bottom: 24px; text-align: center; }
.install-guide-heading h1 { margin-bottom: 6px; font-size: clamp(26px, 6vw, 36px); }
.install-guide-heading p { color: #6B6B6B; }
.install-guide-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.install-guide-card { padding: 20px 16px; border: 1px solid #F0E5C4; border-radius: 18px; background: white; box-shadow: 0 8px 20px rgba(0,0,0,.05); }
.install-guide-card h2 { margin: 8px 0 17px; font-size: 21px; }
.install-platform-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.install-platform-name { font-size: 13px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #806400; }
.install-platform-heading small { padding: 4px 8px; border-radius: 999px; background: #FFF2B8; color: #665000; font-weight: 750; }
.install-steps { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; counter-reset: install-step; }
.install-steps li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 9px; align-items: start; font-size: 14px; line-height: 1.45; }
.install-step-copy { min-width: 0; overflow-wrap: break-word; }
.install-steps li::before { counter-increment: install-step; content: counter(install-step); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #FFD54F; color: #2E2E2E; font-weight: 800; }
.install-button-name { color: #775D00; font-weight: 750; }
.pwa-install-banner { display: none; }

/* =========================
   LAYOUT CONTAINERS
========================= */
.main { max-width: 700px; margin: 35px auto; padding: 0 20px; }
main { max-width: 700px; margin: 35px auto; padding: 0 20px; }
.profile-page { max-width: 700px; margin: 35px auto; padding: 0 20px; }
.settings-page { max-width: 600px; margin: 35px auto; padding: 0 20px; }
.post-container { max-width: 700px; margin: 35px auto; padding: 20px; }
.friends-page { max-width: 700px; margin: 35px auto; padding: 0 20px; }

/* =========================
   HEADER
========================= */
.site-header { background: #FFD54F; padding: 18px 32px; box-shadow: 0 2px 10px rgba(0,0,0,.08); position: sticky; top: 0; z-index: 100; }
.site-header nav { display: flex; justify-content: space-between; align-items: center; }
.site-header a { text-decoration: none; color: #3B3B3B; font-size: 18px; font-weight: 600; transition: .2s; }
.site-header a:hover { color: #000; }
.nav-left, .nav-right { display: flex; align-items: center; gap: 20px; }

/* =========================
   FOOTER
========================= */
.site-footer { text-align: center; padding: 30px; color: #777; }
.contact-page { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 28px 14px; background: #FFF9E8; }
.contact-back { position: fixed; top: 20px; left: 20px; color: #66531A; font-weight: 700; text-decoration: none; }
.contact-card { width: min(620px, 100%); padding: 30px; border: 1px solid #E9DDBD; border-radius: 22px; background: white; box-shadow: 0 16px 44px rgba(77,58,0,.1); }
.contact-eyebrow { color: #9A7400; font-size: 12px; font-weight: 900; letter-spacing: .12em; }
.contact-card h1 { margin: 5px 0 8px; }
.contact-affiliates { padding-block: 22px; }
.contact-affiliates h1 { font-size: 22px; }
.contact-affiliate-list { margin-top: 14px; padding: 13px; border-radius: 12px; background: #FFF9E8; color: #8A7850; font-weight: 800; text-align: center; }
.contact-scope { padding: 11px 13px; border-radius: 10px; background: #FFF4CC; font-size: 13px; }
.contact-card form { display: grid; gap: 13px; margin-top: 20px; }
.contact-card label { display: grid; gap: 6px; font-weight: 750; }
.contact-card input, .contact-card select, .contact-card textarea { width: 100%; padding: 10px 11px; border: 1px solid #D9D1BF; border-radius: 10px; background: white; color: inherit; font: inherit; }
.contact-card textarea { resize: vertical; }
.contact-honeypot { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.contact-form-state { margin: 0; padding: 10px 12px; border-radius: 9px; font-weight: 700; }
.contact-form-state.success { background: #E6F6E9; color: #176B2C; }
.contact-form-state.error { background: #FDE8E8; color: #A51D1D; }
.contact-privacy { display: block; margin-top: 16px; color: #777; line-height: 1.45; }
body.dark-mode .contact-page { background: #202020; }
body.dark-mode .contact-card { background: #2b2b2b; border-color: #484848; }
body.dark-mode .contact-affiliate-list { background: #353535; color: #D9CFAF; }
body.dark-mode .contact-card input, body.dark-mode .contact-card select, body.dark-mode .contact-card textarea { background: #353535; border-color: #555; }
.alert-card:has(.alert-avatar) { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 11px; }
.alert-avatar { width: 42px; height: 42px; }
.alert-card-copy { min-width: 0; }
.profile-footer { margin-top: 50px; padding: 25px 0; display: flex; justify-content: center; gap: 25px; border-top: 1px solid #EFE5CC; }
.profile-footer a { text-decoration: none; color: #777; font-size: 14px; transition: .2s; }
.profile-footer a:hover { color: #D38A00; }

/* =========================
   BOTTOM NAV
========================= */
body.has-bottom-nav { padding-bottom: 110px; }
.bottom-nav { position: fixed; bottom: 30px; left: 0; right: 0; display: flex; justify-content: center; align-items: center; padding: 0 20px; background: transparent; border: none; box-shadow: none; z-index: 999; pointer-events: none; }
.bottom-nav-pill { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 999px; background: #FFD54F; box-shadow: 0 8px 20px rgba(0,0,0,.18); pointer-events: auto; }
.bottom-nav-item { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: #FFF4CC; text-decoration: none; color: #000; transition: .2s; flex-shrink: 0; }
.bottom-nav-item svg { width: 24px; height: 24px; }
.bottom-nav-item.active, .bottom-nav-item:hover { background: rgba(255,255,255,.55); }
.global-friends-shortcut { position: fixed; z-index: 990; top: max(14px, env(safe-area-inset-top)); right: max(14px, env(safe-area-inset-right)); display: grid; width: 46px; height: 46px; place-items: center; border: 1px solid #DFC45F; border-radius: 50%; background: #FFF4CC; color: #5F4C08; text-decoration: none; box-shadow: 0 5px 16px rgba(65,48,0,.16); transition: transform .15s ease, background .15s ease, box-shadow .15s ease; }
.global-friends-shortcut:hover { background: #FFD54F; box-shadow: 0 7px 20px rgba(65,48,0,.21); transform: translateY(-1px); }
.global-friends-shortcut svg { width: 23px; height: 23px; }
body.dark-mode .global-friends-shortcut { border-color: #746126; background: #3E3825; color: #F2D76B; box-shadow: 0 6px 18px rgba(0,0,0,.3); }
body.dark-mode .global-friends-shortcut:hover { background: #514826; }
body:has(.pwa-install-banner) .global-friends-shortcut { top: calc(54px + env(safe-area-inset-top)); }

/* =========================
   POST CARDS
========================= */
.post-card { position: relative; background: white; border-radius: 15px; padding: 14px; margin-bottom: 14px; border: 1px solid #F0E5C4; box-shadow: 0 5px 14px rgba(0,0,0,.045); transition: .2s; }
.post-card:hover { transform: translateY(-2px); }
.post-card.expanded { margin-bottom: 14px; }
.post-header { display: flex; align-items: center; gap: 9px; min-height: 38px; margin-bottom: 10px; }
.post-header .avatar { width: 38px; height: 38px; margin-right: 0; }
.post-meta { display: flex; flex-direction: column; }
.profile-link { text-decoration: none; }
.username { font-size: 15px; font-weight: 700; color: #2F2F2F; }
.username:hover { color: #D38A00; }
.timestamp { font-size: 11px; color: #8B8B8B; }
.post-link { text-decoration: none; }
.post-content { color: #3A3A3A; font-size: 15px; line-height: 1.45; margin-bottom: 10px; white-space: pre-wrap; overflow-wrap: break-word; word-break: normal; }
.post-title { margin-bottom: 7px; color: #000; font-size: 19px; }
.divider { height: 1px; background: #EFE5CC; margin: 10px 0; }
.post-image { display: block; width: 100%; height: 260px; margin: 9px 0; border-radius: 11px; object-fit: cover; background: #F3EFDF; }
.post-feed-image-wrap { position: relative; display: grid; width: 100%; height: 260px; margin: 9px 0; gap: 3px; overflow: hidden; border-radius: 11px; background: #F3EFDF; }
.post-feed-image-wrap.image-count-2, .post-feed-image-wrap.image-count-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.post-feed-image-wrap.image-count-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); }
.post-feed-image-wrap.image-count-3 .post-image-tile:first-child { grid-row: 1 / 3; }
.post-image-tile { position: relative; min-width: 0; min-height: 0; overflow: hidden; }
.post-feed-image-wrap .post-image { width: 100%; height: 100%; margin: 0; object-fit: cover; border-radius: 0; }
.post-image-more { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(20,20,20,.58); color: white; font-size: 25px; font-weight: 850; }
.feed-skeleton { display: grid; gap: 14px; }
.feed-skeleton > div { height: 190px; border-radius: 18px; background: linear-gradient(100deg,#F4EEDC 20%,#FFF9E9 38%,#F4EEDC 56%); background-size: 220% 100%; animation: bucka-skeleton 1.15s ease-in-out infinite; }
@keyframes bucka-skeleton { to { background-position-x: -220%; } }
body.dark-mode .feed-skeleton > div { background-image: linear-gradient(100deg,#303030 20%,#3B3B3B 38%,#303030 56%); }
.post-image-count, .post-gallery-count { position: absolute; right: 10px; top: 10px; padding: 4px 8px; border-radius: 999px; background: rgba(25,25,25,.76); color: white; font-size: 12px; font-weight: 800; }
.post-gallery { position: relative; display: grid; place-items: center; width: 100%; margin: 10px 0; overflow: hidden; border-radius: 12px; background: #F3EFDF; }
.post-gallery .post-image { display: block; width: 100%; height: auto; max-height: min(72vh, 820px); margin: 0; object-fit: contain; }
.post-gallery-nav { position: absolute; top: 50%; display: grid; place-items: center; width: 40px; height: 48px; transform: translateY(-50%); border: 0; border-radius: 10px; background: rgba(25,25,25,.62); color: white; cursor: pointer; font-size: 30px; }
.post-gallery-nav.previous { left: 9px; }
.post-gallery-nav.next { right: 9px; }
.post-stats { padding: 15px 0; border-top: 1px solid #EFE5CC; border-bottom: 1px solid #EFE5CC; color: #777; font-size: 14px; }
.post-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 15px; padding-top: 15px; border-top: 1px solid #EFE5CC; }
.like-count { font-size: 14px; font-weight: 600; color: #777; }
.like.liked { background: #ff6b6b; color: white; }

/* =========================
   BUTTONS
========================= */
.post-actions { display: flex; align-items: center; gap: 6px; }
.post-actions .btn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 34px; padding: 6px 9px; }
.post-action-count { font-size: 12px; font-weight: 750; }
.action-btn.reposted { background: #FFF0B1; color: #806100; }
.repost-count { font-size: 12px; font-weight: 750; }
.repost-attribution { display: flex; align-items: center; gap: 5px; margin: -2px 0 8px; color: #777; font-size: 12px; font-weight: 700; }
.repost-attribution svg { width: 15px; height: 15px; }
.repost-attribution a { color: inherit; }
.repost-commentary { display: block; margin: 2px 0 12px; color: inherit; text-decoration: none; }
.repost-commentary h2 { margin: 0 0 5px; font-size: 20px; }
.repost-commentary p { margin: 0; white-space: pre-wrap; }
.repost-original-card { padding: 12px; border: 1px solid #E7D9AE; border-radius: 14px; background: #FFFDF8; }
.composed-repost .repost-original-card .post-title { font-size: 17px; }
.repost-sheet-original { display: grid; gap: 7px; padding: 14px; border: 1px solid #E7D9AE; border-radius: 14px; background: #FFFDF8; }
.repost-sheet-original > span { color: #777; font-size: 12px; font-weight: 700; text-transform: uppercase; }
.repost-sheet-original p { margin: 0; white-space: pre-wrap; }
.repost-sheet-original p { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 4; }
.repost-sheet .content-edit-form textarea { min-height: 110px; max-height: 24dvh; }
.repost-destination-picker { position: relative; }
.repost-destination-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 48px;
    padding: 11px 44px 11px 14px;
    border: 1px solid #DCCFAE;
    border-radius: 12px;
    background-color: #FFFDF8;
    color: #403A2D;
    font: inherit;
    font-weight: 750;
    box-shadow: 0 2px 8px rgba(84, 62, 0, .05);
    cursor: pointer;
}
.repost-destination-trigger > svg { position: absolute; right: 14px; width: 20px; height: 20px; color: #806100; transition: transform .18s ease; }
.repost-destination-trigger[aria-expanded="true"] > svg { transform: rotate(180deg); }
.repost-destination-trigger:hover { border-color: #CBAE58; background-color: #FFF9E8; }
.repost-destination-trigger:focus-visible { outline: 0; border-color: #C69200; box-shadow: 0 0 0 3px rgba(255, 212, 59, .28); }
.repost-destination-menu { position: absolute; z-index: 20; top: calc(100% + 7px); left: 0; right: 0; max-height: min(310px, 42dvh); padding: 7px; overflow-y: auto; border: 1px solid #E1D4B2; border-radius: 14px; background: #FFFDF8; box-shadow: 0 14px 34px rgba(61,45,0,.18); touch-action: pan-y; }
.repost-destination-menu[hidden] { display: none; }
.repost-destination-option { display: grid; grid-template-columns: 42px minmax(0,1fr) 22px; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 6px 9px; border: 0; border-radius: 10px; background: transparent; color: #403A2D; text-align: left; cursor: pointer; }
.repost-destination-option:hover, .repost-destination-option.selected { background: #FFF0B1; }
.repost-destination-option > span:nth-child(2) { display: grid; gap: 2px; }
.repost-destination-option small { display: inline-flex; align-items: center; gap: 3px; color: #8A6A00; font-size: 10px; font-weight: 750; }
.repost-destination-option small svg { width: 11px; height: 11px; }
.repost-destination-option > svg { width: 18px; height: 18px; color: #B48700; opacity: 0; }
.repost-destination-option.selected > svg { opacity: 1; }
.repost-destination-icon { display: grid; width: 38px; height: 38px; place-items: center; overflow: hidden; border-radius: 50%; background: #F3E8C2; color: #725C13; }
.repost-destination-icon img { width: 100%; height: 100%; object-fit: cover; }
.repost-destination-icon svg { width: 19px; height: 19px; }
body.dark-mode .repost-destination-trigger { border-color: #5D553E; background-color: #333; color: #FFF; box-shadow: none; }
body.dark-mode .repost-destination-trigger:hover { border-color: #8D7832; background-color: #393629; }
body.dark-mode .repost-destination-trigger:focus-visible { border-color: #FFD43B; box-shadow: 0 0 0 3px rgba(255,212,59,.18); }
body.dark-mode .repost-destination-menu { border-color: #56503B; background: #2B2B2B; box-shadow: 0 14px 34px rgba(0,0,0,.42); }
body.dark-mode .repost-destination-option { color: #FFF; }
body.dark-mode .repost-destination-option:hover, body.dark-mode .repost-destination-option.selected { background: #494127; }
body.dark-mode .repost-destination-icon { background: #403A29; color: #FFD54F; }
.repost-remove { color: #C84444; background: white; border: 1px solid #E8B5B5; }
.repost-owner-controls { display: inline-flex; gap: 4px; margin-left: auto; }
.repost-owner-controls .post-top-icon { width: 30px; height: 30px; }
.repost-detail-avatar { width: 28px; height: 28px; flex: 0 0 28px; }
.btn { min-height: 40px; padding: 8px 14px; border: none; border-radius: 10px; background: #F3EEE2; color: #444; cursor: pointer; text-decoration: none; transition: .2s; font-size: 14px; font-weight: 600; }
.btn:hover { background: #FFD54F; color: black; }
.btn-primary, .btn-secondary, .btn-compact { display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 10px; cursor: pointer; text-decoration: none; transition: .2s; font-weight: 700; }
.btn-primary { min-height: 44px; padding: 10px 16px; background: #FFD43B; color: #2E2E2E; font-size: 15px; }
.btn-primary:hover { background: #F5C32C; }
.btn-secondary { min-height: 40px; padding: 8px 14px; background: #F3EEE2; color: #444; font-size: 14px; }
.btn-secondary:hover { background: #E9E1D1; }
.btn-compact { min-height: 32px; padding: 5px 10px; border-radius: 8px; background: #F3EEE2; color: #444; font-size: 12px; }
.btn-compact:hover { background: #FFE894; color: #2E2E2E; }
.action-link { display: inline-block; }
.small-btn { background: none; border: none; color: #C68A00; cursor: pointer; margin-right: 15px; }
.small-btn:hover { text-decoration: underline; }
.icon-btn { background: none; border: none; font-size: 24px; color: #000; cursor: pointer; padding: 4px 10px; border-radius: 8px; transition: .2s; }
.icon-btn:hover { background: #FFF4CC; color: #000; }
.theme-btn { background: none; border: none; font-size: 22px; cursor: pointer; }
.settings-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 8px 14px; border: none; border-radius: 10px; background: #F3EEE2; color: #444; cursor: pointer; font-size: 14px; font-weight: 600; transition: .2s; }
.settings-btn:hover { background: #FFD54F; color: black; }
.auth-btn, .danger-button { min-height: 44px; }
.auth-btn { background: #FFD43B; color: #2E2E2E; }
.post-top-controls { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.post-top-icon { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 7px; background: #F3EEE2; color: #555; cursor: pointer; }
.post-top-icon:hover { background: #E9E1D1; color: #111; }
.post-top-icon.danger { color: #B3261E; }
.post-top-icon.danger:hover { background: #FFE7E5; }
.post-top-icon svg { width: 17px; height: 17px; }
.post-expiry { position: static; padding: 2px 6px; border-radius: 6px; background: #FFF0F0; color: #C62828; font-size: 11px; font-weight: 800; line-height: 1.4; white-space: nowrap; }
.post-expiry:empty { display: none; }
.bucka { background: #FFD43B; color: #2E2E2E; }
.bucka.buckaed { background: #F3A6B7; color: #44252C; }
.btn svg, .settings-btn svg, .btn-primary svg, .btn-secondary svg, .btn-compact svg { width: 18px; height: 18px; flex: 0 0 18px; }
.cancel-btn { text-decoration: none; color: inherit; }
.upload-label { display: block; margin-bottom: 7px; font-weight: 600; }
.visually-hidden-file { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.image-upload-button { display: inline-flex; align-items: center; justify-content: center; margin-right: 9px; font-weight: 650; }
.image-upload-button svg, #comment-image-button svg, #comment-camera-button svg, #comment-send-button svg, #message-send-button svg { width: 20px; height: 20px; }
.selected-file-name { display: inline-block; max-width: 100%; color: #777; font-size: 14px; vertical-align: middle; overflow-wrap: anywhere; }

/* =========================
   COMMENTS
========================= */
.comments-section { background: white; border-radius: 15px; padding: 16px; border: 1px solid #F0E5C4; box-shadow: 0 5px 14px rgba(0,0,0,.045); }
.comments-heading { display: flex; align-items: center; justify-content: space-between; min-height: 32px; margin-bottom: 10px; }
.comments-heading h3 { margin: 0; font-size: 18px; }
.comments-heading > span { min-width: 26px; padding: 3px 8px; border-radius: 999px; background: #FFF0B1; color: #735800; font-size: 11px; font-weight: 800; text-align: center; }
.comment-input { display: flex; gap: 7px; margin-bottom: 12px; }
.comment-input input { flex: 1; padding: 12px; border-radius: 10px; border: 1px solid #DDD; outline: none; font-size: 15px; }
.comment-input input:focus { border-color: #FFD54F; }
.comment-input button { padding: 12px 20px; border: none; border-radius: 10px; background: #FFD54F; cursor: pointer; font-weight: 600; }
.comment-input button:hover { background: #F5C32C; }
.comment-composer { margin-bottom: 12px; padding: 9px; border: 1px solid #EEE5D4; border-radius: 13px; background: #FFFDF8; }
.comment-composer .comment-input { margin-bottom: 0; }
.comment-media-button { min-width: 46px; padding: 10px !important; font-size: 18px; }
.comment-media-preview { position: relative; width: fit-content; max-width: 100%; margin-bottom: 10px; padding: 6px; background: #FFFDF5; border: 1px solid #EFE5CC; border-radius: 13px; }
.comment-media-preview[hidden] { display: none; }
.comment-media-preview img { display: block; max-width: min(360px, 100%); max-height: 240px; object-fit: contain; border-radius: 9px; }
.comment-media-preview button { position: absolute; top: 9px; right: 9px; display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 50%; background: rgba(30,30,30,.78); color: white; cursor: pointer; font-size: 20px; }
.comment-upload-status { min-height: 20px; margin: 4px 0; color: #777; font-size: 13px; }
.comment-upload-status:empty { min-height: 0; }
.comment-composer { margin-bottom: 14px; padding: 0; border: 0; background: transparent; }
.comment-input { align-items: center; }
.comment-text-control { min-width: 0; display: flex; flex: 1; align-items: center; overflow: hidden; border: 1px solid #DDD; border-radius: 12px; background: #FFFDF8; }
.comment-text-control:focus-within { border-color: #D2A900; box-shadow: 0 0 0 2px rgba(255,213,79,.18); }
.comment-text-control input[type="text"] { min-width: 0; flex: 1; padding: 12px 6px 12px 12px; border: 0; border-radius: 0; background: transparent; color: inherit; outline: 0; }
.comment-text-control #comment-image-button, .comment-text-control #comment-camera-button { flex: 0 0 42px; width: 42px; min-width: 42px; height: 42px; min-height: 42px; padding: 0 !important; border: 0; background: transparent; color: #454545; }
.comment-text-control #comment-camera-button { margin-left: -4px; }
#comment-send-button { border-radius: 50%; color: #2E2E2E; }
.content-edit-form { width: min(620px, 100%); margin: 0 auto; }
.content-edit-form textarea { min-height: 210px; resize: vertical; }
body.dark-mode .comment-text-control { border-color: #555; background: #2B2B2B; }
body.dark-mode .comment-text-control #comment-image-button, body.dark-mode .comment-text-control #comment-camera-button { color: #E2E2E2; }
.comment-upload-status button { padding: 3px 7px; border: 0; border-radius: 6px; background: #FFD54F; cursor: pointer; }
.comment-media-frame { position: relative; width: fit-content; max-width: 100%; min-width: 160px; min-height: 80px; margin: 10px 0; overflow: hidden; border-radius: 12px; background: #FFF9E8; border: 1px solid #EFE5CC; }
.comment-media-image { display: block; max-width: min(440px, 100%); max-height: 420px; width: auto; height: auto; object-fit: contain; opacity: 0; transition: opacity .2s; }
.comment-media-frame.loaded .comment-media-image { opacity: 1; }
.comment-media-frame.loaded .comment-media-loading { display: none; }
.comment-media-loading, .comment-media-error { padding: 25px; color: #888; text-align: center; font-size: 13px; }
body.dark-mode .comment-media-preview, body.dark-mode .comment-media-frame { background: #333; border-color: #444; }
@media (max-width: 520px) {
    .comment-input { flex-wrap: wrap; }
    .comment-input input[type="text"] { flex-basis: calc(100% - 56px); }
    .comment-input #comment-send-button { flex: 1; }
}

.comments { margin-top: 8px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.comment-card { display: flex; align-items: flex-start; gap: 10px; padding: 12px 2px; border-bottom: 1px solid #EEE9DF; }
.comment-thread-node { position: relative; width: 100%; }
.comment-thread-node > .comment-card,
.comment-thread-node > .comment-composer { width: 100%; min-width: 280px; box-sizing: border-box; }
.comment-thread-node > .comment-children { width: calc(100% - 22px); margin-left: 22px; }
.comment-thread-node:not(.depth-0)::before { position: absolute; top: 0; bottom: 0; left: -12px; width: 2px; border-radius: 2px; background: #E5D8B6; content: ""; }
.comment-thread-node.thread-deep-hidden { display: none; }
.comment-deep-thread-toggle { display: inline-flex; width: max-content; margin-top: 8px; margin-right: 6px; }
.comment-deep-thread-toggle.hide { color: #777; }
.comment-thread-toggle { margin-top: 6px; padding: 4px 7px; border: 0; border-radius: 7px; background: transparent; color: #7A672E; cursor: pointer; font-size: 11px; font-weight: 800; }
.comment-thread-toggle:hover { background: #F5F0E2; }
.comment-deleted-label { color: #888; font-size: 12px; font-style: italic; font-weight: 700; }
.deleted-comment { min-height: 50px; opacity: .82; }
.comment-highlight { animation: comment-thread-highlight 1.8s ease; }
@keyframes comment-thread-highlight { 25% { background: #FFF0B8; box-shadow: 0 0 0 4px rgba(255,213,79,.28); } }

/* The post-detail view is one continuous surface instead of stacked cards. */
body.comment-detail-page { background: white; }
.comment-detail-page .post-container { padding: 0; overflow: hidden; background: white; }
.comment-detail-page #post-content-area > .post-card {
    margin: 0;
    padding: 20px 18px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
.comment-detail-page #post-content-area > .post-card:hover { transform: none; }
.comment-detail-page .comments-section {
    margin: 0;
    padding: 18px;
    border: 0;
    border-top: 1px solid #EEE5D4;
    border-radius: 0;
    box-shadow: none;
}
.comment-card:last-child { border-bottom: none; }
.comment-avatar { display: grid; place-items: center; width: 34px; height: 34px; overflow: hidden; border: 2px solid white; border-radius: 50%; background: #FFD54F; box-shadow: 0 1px 4px rgba(0,0,0,.1); flex-shrink: 0; font-size: 12px; font-weight: 800; }
.comment-avatar img { width: 100%; height: 100%; object-fit: cover; }
.comment-body { flex: 1; min-width: 0; }
.comment-meta { display: flex; align-items: center; gap: 6px; min-height: 28px; margin-bottom: 2px; }
.comment-user { color: #2F2F2F; font-size: 14px; font-weight: 800; text-decoration: none; }
.comment-time { color: #999; font-size: 11px; }
.comment-text { margin: 2px 0 0; color: #444; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.comment-owner-controls { display: inline-flex; gap: 4px; margin-left: auto; }
.comment-engagement { display: flex; align-items: center; gap: 6px; margin-top: 5px; }
.comment-bucka { display: inline-flex; align-items: center; gap: 5px; min-height: 30px; padding: 4px 8px; border: 0; border-radius: 8px; background: #F3EEE2; color: #666; cursor: pointer; }
.comment-reply-button { display: inline-flex; align-items: center; gap: 5px; min-height: 30px; padding: 4px 8px; border: 0; border-radius: 8px; background: transparent; color: #756A54; cursor: pointer; font-weight: 700; }
.comment-reply-button:hover { background: #F5F0E5; }
.comment-reply-button svg, .comment-reply-reference svg { width: 15px; height: 15px; }
.comment-reply-reference { display: flex; align-items: center; gap: 5px; margin-bottom: 3px; color: #877343; font-size: 11px; }
.comment-reply-compose { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; padding: 7px 10px; border-left: 3px solid #22A559; border-radius: 7px; background: #FFF8DE; }
.comment-reply-compose[hidden] { display: none; }
.comment-reply-compose > span { min-width: 0; display: grid; flex: 1; }
.comment-reply-compose small { color: #16813A; font-size: 10px; font-weight: 800; }
.comment-reply-compose strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.comment-reply-compose button { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #777; cursor: pointer; font-size: 20px; }
.comment-bucka svg { width: 16px; height: 16px; }
.comment-bucka.active { background: #F3A6B7; color: #44252C; }
.comment-secondary-actions { margin-top: 4px; }
.comment-user { font-weight: 600; color: #2F2F2F; }
.comment-time { font-size: 12px; color: #888; }
.comment-text { color: #444; line-height: 1.5; }

/* =========================
   CREATE POST
========================= */
.create-post-card { max-width: 620px; margin: 18px auto; width: calc(100% - 32px); padding: 22px; }
.create-post-user { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; }
.create-post-user .avatar { width: 44px; height: 44px; margin: 0; }
.create-post-user-info { display: flex; min-width: 0; flex-direction: column; gap: 1px; }
.create-post-user-info .username { font-weight: 750; }
.posting-destination-control { display: inline-flex; align-items: center; min-width: 0; color: #888; font-size: 13px; cursor: pointer; }
.posting-destination-control select { max-width: 230px; padding: 1px 3px; border: 0; background: transparent; color: #8A6100; font: inherit; font-weight: 750; cursor: pointer; }
.post-title-row { position: relative; margin-bottom: 8px; }
.post-title-row input { width: 100%; padding: 10px 70px 10px 12px; border: 1px solid #E4D9BB; border-radius: 11px; background: #FFFDF8; color: #2E2E2E; font: inherit; }
.post-title-row .compact-char-counter { position: absolute; top: 50%; right: 11px; transform: translateY(-50%); }
.post-body-composer { overflow: hidden; border: 1px solid #DED3B5; border-radius: 14px; background: white; }
.create-post-card .post-body-composer textarea { display: block; width: 100%; min-height: 165px; padding: 13px; border: 0; border-radius: 0; outline: 0; box-sizing: border-box; background: transparent; color: #2E2E2E; resize: vertical; font: inherit; }
.post-composer-footer { display: flex; align-items: center; justify-content: space-between; min-height: 45px; padding: 6px 9px; border-top: 1px solid #EFE5CC; }
.post-composer-tools { display: flex; align-items: center; gap: 5px; }
.composer-tool-button { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 9px; background: transparent; color: #6E5A1D; cursor: pointer; }
.composer-tool-button:hover { background: #FFF4CC; color: #2E2E2E; }
.composer-tool-button svg { width: 20px; height: 20px; }
.compact-char-counter { color: #999; font-size: 11px; font-weight: 650; }
.post-body-composer .image-preview { margin: 0; padding: 0 12px 10px; }
.post-body-composer .image-preview { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.create-image-preview-item { position: relative; display: block; aspect-ratio: 1; overflow: hidden; border-radius: 8px; background: #FFFDF8; }
.post-body-composer .image-preview img { width: 100%; height: 100%; border: 1px solid #EFE5CC; border-radius: 8px; object-fit: cover; background: #FFFDF8; }
.create-image-remove { position: absolute; top: 4px; right: 4px; display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: rgba(30,30,30,.78); color: white; font-size: 18px; line-height: 1; cursor: pointer; }
.post-poll { margin: 9px 0; }
.post-poll h3 { margin: 0 0 8px; font-size: 17px; }
.poll-voting-options { display: grid; gap: 6px; }
.poll-vote-option { position: relative; display: flex; align-items: center; justify-content: space-between; min-height: 38px; padding: 7px 10px; overflow: hidden; border: 1px solid #DED3B5; border-radius: 9px; background: #FFFDF8; color: #333; cursor: pointer; font: inherit; text-align: left; }
.poll-option-fill { position: absolute; inset: 0 auto 0 0; z-index: 0; background: #FFF0A8; transition: width .25s ease; }
.poll-option-label, .poll-option-result { position: relative; z-index: 1; }
.poll-option-label { font-weight: 700; }
.poll-option-result { margin-left: 8px; font-size: 12px; font-weight: 800; }
.poll-vote-option.selected { border-color: #C99B00; }
.post-poll.voted .poll-vote-option { cursor: default; }
.poll-total { display: block; margin-top: 6px; color: #777; }
.poll-composer { display: grid; gap: 10px; padding: 14px; border: 1px solid #DED3B5; border-radius: 14px; background: #FFFDF8; }
.poll-composer[hidden] { display: none; }
.poll-composer-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-weight: 800; }
.poll-composer-heading button { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 8px; background: #F3EEE2; cursor: pointer; font-size: 20px; }
.poll-composer > input, .poll-option-row input { width: 100%; box-sizing: border-box; padding: 10px 11px; border: 1px solid #DDD0AA; border-radius: 10px; background: white; color: #2E2E2E; font: inherit; }
.poll-option-row { display: grid; grid-template-columns: 84px minmax(0, 1fr); align-items: center; gap: 8px; color: #666; font-size: 13px; font-weight: 700; }
.poll-add-option { width: fit-content; padding: 5px 2px; border: 0; background: transparent; color: #806100; font: inherit; font-size: 13px; font-weight: 750; }
.create-post-card .profile-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.create-post-card .profile-actions .settings-btn { min-width: 42px; margin: 0; }
.create-post-card .profile-actions .cancel-btn { width: auto; }
#create-post-submit { width: 44px; height: 44px; padding: 0; }
#create-post-submit svg { width: 20px; height: 20px; }
.char-counter { margin-top: 8px; text-align: right; color: #777; font-size: 14px; font-weight: 500; }
.char-counter.warning { color: #E53935; }
.upload-info { display: block; margin-top: 6px; color: #777; }
.image-preview { margin-top: 15px; display: none; }
.image-preview img { width: 100%; max-height: 350px; object-fit: cover; border-radius: 12px; border: 2px solid #EFE5CC; }

/* =========================
   PROFILE PAGE
========================= */
.profile-card { background: white; border-radius: 18px; padding: 26px; margin-bottom: 30px; border: 1px solid #F0E5C4; box-shadow: 0 8px 20px rgba(0,0,0,.05); }
.profile-card-top { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; }
.profile-card-top .profile-pic { width: 72px; height: 72px; border-radius: 50%; background: #FFD54F; flex-shrink: 0; }
.profile-card-top .friend-button-container { display: flex; align-items: center; margin-left: auto; }
.profile-card-top .friend-button-container[hidden] { display: none; }
.profile-friend-action { gap: 7px; min-width: 44px; height: 44px; min-height: 44px; padding: 0 13px; border-radius: 999px; }
.profile-friend-action svg { width: 20px; height: 20px; }
.profile-chat-action { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #FFD43B; color: #2E2E2E; text-decoration: none; box-shadow: 0 3px 9px rgba(0,0,0,.09); }
.profile-chat-action:hover { background: #F5C32C; transform: translateY(-1px); }
.profile-chat-action svg { width: 21px; height: 21px; }
.profile-card.viewing-other-profile .profile-card-top { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.profile-card.viewing-other-profile .profile-identity { align-items: center; text-align: center; }
.profile-card.viewing-other-profile .friend-button-container { position: absolute; top: 0; right: 0; margin-left: 0; }
.profile-identity { display: flex; flex-direction: column; align-items: center; text-align: center; }
.profile-identity h2 { font-size: 22px; font-weight: 700; color: #2E2E2E; }
.profile-handle { font-size: 15px; color: #888; margin-top: 2px; }
.profile-bio { margin: 20px 0; padding: 16px; background: #FFFDF5; border-radius: 12px; border-left: 3px solid #FFD54F; }
.profile-bio p { font-size: 16px; color: #444; font-style: italic; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.profile-joined { color: #777; font-size: 13px; margin-top: 5px; }
.profile-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 18px 0; padding: 14px 0; border-top: 1px solid #F0E5C4; border-bottom: 1px solid #F0E5C4; text-align: center; }
.profile-stats div, .profile-stats a { display: flex; flex-direction: column; gap: 3px; color: inherit; text-decoration: none; }
.profile-stats strong { color: #2E2E2E; font-size: 18px; }
.profile-stats span { color: #777; font-size: 12px; }
.feed-sort { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin: 14px 0; }
.feed-sort label { color: #777; font-size: 13px; font-weight: 600; }
.feed-sort select { border: 1px solid #E7D8AF; border-radius: 10px; padding: 9px 12px; background: #FFFDF5; color: #333; font: inherit; }
body.dark-mode .profile-joined, body.dark-mode .profile-stats span, body.dark-mode .feed-sort label { color: #bbb; }
body.dark-mode .profile-stats { border-color: #444; }
body.dark-mode .profile-stats strong { color: white; }
body.dark-mode .feed-sort select { background: #333; color: white; border-color: #555; }
@media (max-width: 560px) { .profile-stats span { font-size: 11px; } .feed-sort { justify-content: space-between; } .feed-sort select { max-width: 65%; } }
.profile-details-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 22px; }
.profile-personalization-layout { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 14px; margin-bottom: 22px; }
.profile-personalization-column { display: grid; grid-template-rows: 1fr 1fr; gap: 14px; }
.profile-personalization-column .profile-detail { display: grid; align-content: center; min-height: 82px; }
.profile-featured-friends { min-height: 178px; padding: 14px; border: 1px solid #F5EFD6; border-radius: 12px; background: #FFFDF5; }
.profile-featured-friends-heading { display: flex; align-items: center; justify-content: space-between; color: #2E2E2E; text-decoration: none; }
.profile-featured-friends-heading > span { color: #777; font-weight: 700; }
.profile-featured-friends-list { display: grid; gap: 5px; margin-top: 10px; }
.profile-featured-friends-empty { align-self: center; margin: 20px 4px; color: #888; font-size: 13px; line-height: 1.45; }
.profile-featured-friend-row { display: flex; align-items: center; gap: 10px; min-height: 30px; padding: 3px 5px; border-radius: 8px; color: #333; text-decoration: none; font-weight: 600; }
.profile-featured-friend-row:hover { background: #FFF4CC; }
.profile-featured-friend-avatar { display: inline-block; width: 28px; height: 28px; flex: 0 0 28px; border-radius: 50%; background: #FFD54F center/cover no-repeat; object-fit: cover; }
.featured-friends-editor { margin: 20px 0; padding: 16px; border: 1px solid #F0E5C4; border-radius: 14px; background: #FFFDF5; }
.featured-friends-editor-heading { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.featured-friends-editor-heading h2 { font-size: 17px; }
.featured-friends-editor-heading p { margin-top: 3px; color: #777; font-size: 13px; }
#featured-friends-count { color: #8A6100; font-weight: 800; white-space: nowrap; }
#featured-friends-editor-list { display: grid; gap: 7px; }
.featured-friend-editor-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 42px; padding: 6px 8px; border-radius: 10px; background: white; }
.featured-friend-editor-identity { display: flex; align-items: center; gap: 9px; min-width: 0; }
.featured-friend-order-actions { display: flex; gap: 4px; }
.compact-icon-button { width: 30px; height: 30px; padding: 0; border: 0; border-radius: 8px; background: #F3EEE2; color: #444; cursor: pointer; font-weight: 800; }
.compact-icon-button:disabled { opacity: .35; cursor: default; }
.compact-icon-button.danger { color: #C62828; }
.featured-friend-add-label { display: block; margin: 13px 0 6px; font-size: 13px; font-weight: 700; }
.featured-friend-add-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.profile-detail { background: #FFFDF5; border-radius: 10px; padding: 14px; text-align: center; border: 1px solid #F5EFD6; }
.detail-label { display: block; font-size: 12px; color: #999; margin-bottom: 4px; text-transform: uppercase; letter-spacing: .5px; }
.detail-value { display: block; font-size: 15px; font-weight: 600; color: #2E2E2E; }
.edit-profile-btn { display: inline-block; margin-top: 16px; padding: 10px 18px; border-radius: 10px; background: #FFF4CC; color: #444; text-decoration: none; font-weight: 600; transition: .2s; border: none; cursor: pointer; }
.edit-profile-btn:hover { background: #FFD54F; color: black; }
.edit-profile-btn:has(svg) { display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; }
.edit-profile-btn svg { width: 18px; height: 18px; }
.edit-profile-input, .edit-profile-textarea { width: 100%; background: transparent; border: 1px solid #ccc; border-radius: 8px; padding: 8px; font-size: 1rem; }
.edit-profile-textarea { resize: vertical; min-height: 80px; }

/* =========================
   ACTIVITY SECTION
========================= */
.activity-section { background: white; border-radius: 18px; padding: 22px; border: 1px solid #F0E5C4; box-shadow: 0 8px 20px rgba(0,0,0,.05); }
.activity-title { font-size: 19px; margin-bottom: 16px; color: #2E2E2E; }
.tab-bar { display: flex; gap: 0; margin-bottom: 20px; border-bottom: 2px solid #F0E5C4; }
.tab { padding: 10px 24px; background: none; border: none; font-size: 15px; font-weight: 600; color: #999; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: .2s; }
.tab.active { color: #D38A00; border-bottom-color: #FFD54F; }
.tab:hover:not(.active) { color: #555; }
.tab-content.hidden { display: none; }
.activity-item { display: flex; align-items: flex-start; gap: 12px; padding: 16px 0; border-bottom: 1px solid #F3F3F3; transition: .2s; }
.activity-item:last-child { border-bottom: none; }
.activity-item:hover { background: #FFFDF5; border-radius: 12px; padding-left: 10px; padding-right: 10px; }
.activity-icon { font-size: 20px; flex-shrink: 0; }
.activity-body { flex: 1; }
.activity-meta { font-size: 13px; color: #999; margin-bottom: 4px; }
.activity-text { font-size: 15px; color: #3A3A3A; line-height: 1.5; }
.activity-image { margin-top: 10px; width: 100%; max-height: 250px; object-fit: cover; border-radius: 10px; }
.loading-text { color: #999; text-align: center; padding: 20px; }
.feed-load-sentinel, .feed-error { padding: 20px; color: #888; text-align: center; }
.feed-error .btn { margin-top: 10px; }

/* =========================
   SETTINGS PAGE
========================= */
.settings-title { font-size: 24px; font-weight: 700; color: #2E2E2E; margin-bottom: 24px; }
.settings-list { background: white; border-radius: 18px; overflow: hidden; border: 1px solid #F0E5C4; box-shadow: 0 8px 20px rgba(0,0,0,.05); }
.settings-row { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 18px 22px; border: none; border-bottom: 1px solid #F3F3F3; background: white; cursor: pointer; font-size: 16px; color: #2E2E2E; transition: .2s; text-decoration: none; color: inherit; }
.settings-row:last-child { border-bottom: none; }
.settings-row:hover { background: #FFFDF5; }
.settings-row-label { font-weight: 500; }
.settings-row-arrow { font-size: 22px; color: #CCC; }
.settings-row.danger .settings-row-label { color: #E53935; }
.settings-row.danger:hover { background: #FFEBEE; }
.settings-section-title { margin: 24px 5px 8px; color: #8A7850; font-size: 12px; text-transform: uppercase; letter-spacing: .1em; }
.settings-section-title:first-of-type { margin-top: 0; }
.danger-title { color: #C62828; }
.danger-list { border-color: #F2C8C8; }
.settings-form-card { margin-top: 24px; }
.current-setting { display: flex; flex-direction: column; margin-bottom: 22px; padding: 14px; border-radius: 12px; background: #FFF9E8; border: 1px solid #F0E5C4; }
.current-setting span { color: #888; font-size: 12px; }
.settings-form-message { min-height: 22px; margin-top: 12px; color: #C62828; font-size: 14px; }
.settings-form-message.success { color: #388E3C; }
.delete-step { display: none; }
.delete-step.active { display: block; }
.delete-step h1 { margin-bottom: 10px; }
.delete-step > p { margin-bottom: 18px; color: #666; }
.danger-icon { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 16px; border-radius: 50%; background: #FFEBEE; color: #C62828; font-size: 28px; font-weight: 800; }
.deletion-consequences { margin: 20px 0; padding: 16px; border-left: 4px solid #E53935; border-radius: 8px; background: #FFF5F5; color: #5F4242; }
.deletion-consequences p + p { margin-top: 10px; }
.danger-button { background: #E53935; color: white; }
.danger-button:hover { background: #C62828; color: white; }
.danger-button:disabled { background: #D8BABA; cursor: not-allowed; }
.final-delete-actions { display: flex; justify-content: flex-end; gap: 12px; }
body.dark-mode .current-setting { background: #333; border-color: #444; }
body.dark-mode .deletion-consequences { background: #3C2929; color: #F0CCCC; }

/* =========================
   ADMINISTRATION
========================= */
.admin-page { max-width: 1120px; margin: 30px auto; padding: 0 20px 100px; }
.admin-heading { display: flex; align-items: end; justify-content: space-between; gap: 16px; }
.admin-heading h1 { margin: 2px 0 0; }
.admin-eyebrow { color: #8a6800; font-size: 12px; font-weight: 900; letter-spacing: .12em; }
.admin-tabs { display: flex; gap: 7px; margin: 20px 0 26px; padding: 7px; overflow-x: auto; border-radius: 14px; background: #FFF4CC; scrollbar-width: thin; }
.admin-tabs button { padding: 9px 16px; border: 0; border-radius: 9px; background: transparent; cursor: pointer; font-weight: 700; }
.admin-tabs button.active { background: #FFD54F; }
.admin-stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; margin-bottom: 30px; }
.admin-stat-grid > div { display: flex; flex-direction: column; padding: 20px; border: 1px solid #F0E5C4; border-radius: 15px; background: white; box-shadow: 0 5px 15px rgba(0,0,0,.04); }
.admin-stat-grid strong { font-size: 30px; color: #A07100; }
.admin-metric-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; margin-bottom: 18px; }
.admin-metric-card, .admin-chart-card { padding: 20px; border: 1px solid #F0E5C4; border-radius: 16px; background: white; box-shadow: 0 5px 15px rgba(0,0,0,.04); }
.admin-metric-card h3, .admin-chart-card h3 { margin: 0; }
.admin-metric-card > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 18px; }
.admin-metric-card span { display: flex; min-width: 0; flex-direction: column; gap: 4px; color: #777; font-size: 12px; }
.admin-metric-card strong { color: #2C281F; font-size: 24px; }
.admin-chart-heading { display: flex; align-items: end; justify-content: space-between; gap: 18px; }
.admin-chart-heading p { margin: 5px 0 0; color: #777; }
.admin-chart-heading label { display: grid; flex: 0 0 150px; gap: 5px; color: #777; font-size: 12px; font-weight: 700; }
.admin-chart-heading select { min-height: 42px; padding: 8px 34px 8px 11px; border: 1px solid #D9D1BF; border-radius: 10px; background: #FFFDF5; color: #29251B; font: inherit; }
.admin-chart-legend { display: flex; flex-wrap: wrap; gap: 18px; margin: 20px 0 4px; color: #625D52; font-size: 13px; font-weight: 700; }
.admin-chart-legend span::before { display: inline-block; width: 11px; height: 11px; margin-right: 6px; border-radius: 50%; background: currentColor; content: ""; }
.admin-chart-legend .accounts { color: #3B82F6; }
.admin-chart-legend .posts { color: #D99A00; }
.admin-chart-legend .comments { color: #22A559; }
.admin-chart-wrap { width: 100%; height: 330px; overflow: hidden; }
#admin-growth-chart { display: block; width: 100%; height: 100%; }
.admin-report-card, .admin-user-card, .admin-content-card, .admin-group-card, .admin-action-row, .alert-card { display: flex; justify-content: space-between; align-items: center; gap: 15px; margin-top: 12px; padding: 16px; border: 1px solid #F0E5C4; border-radius: 14px; background: white; }
.admin-card-main { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 4px; }
.admin-card-main p { margin: 3px 0; overflow: hidden; text-overflow: ellipsis; }
.admin-card-kicker { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.admin-report-card p, .admin-action-row p { color: #666; }
.admin-badge, .suspended-label { width: fit-content; padding: 3px 7px; border-radius: 999px; background: #FFF0B1; color: #806100; font-size: 11px; font-weight: 800; }
.suspended-label { margin-top: 5px; background: #FFEBEE; color: #C62828; }
.admin-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.admin-section-heading h2, .admin-section-heading p { margin: 0; }
.admin-section-heading p { margin-top: 4px; color: #666; }
.admin-text-button { border: 0; background: transparent; color: #725600; cursor: pointer; font-weight: 800; }
.admin-search, .admin-filter-row { display: flex; gap: 10px; margin-bottom: 18px; }
.admin-search input, .admin-filter-row input { flex: 1; }
.admin-search input, .admin-filter-row input, .admin-filter-row select, .admin-dialog textarea, .admin-dialog select, .admin-dialog input { min-height: 40px; padding: 10px; border: 1px solid #DDD; border-radius: 10px; background: white; color: inherit; font: inherit; }
.admin-dialog textarea, .admin-dialog select, .admin-dialog input { width: 100%; }
.admin-row-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.admin-group-avatar { display: grid; width: 44px; height: 44px; flex: 0 0 44px; place-items: center; overflow: hidden; border-radius: 50%; background: #FFF4CC; color: #795d00; }
.admin-group-avatar img { width: 100%; height: 100%; object-fit: cover; }
.admin-action-row { align-items: flex-start; flex-direction: column; }
.admin-dialog { width: min(600px, calc(100% - 30px)); padding: 24px; border: 0; border-radius: 18px; box-shadow: 0 15px 45px rgba(0,0,0,.25); }
.admin-dialog::backdrop { background: rgba(0,0,0,.45); }
.dialog-close { float: right; border: 0; background: none; font-size: 25px; cursor: pointer; }
.admin-dialog label { display: block; margin-top: 15px; font-weight: 700; }
.admin-dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.admin-dialog-title { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.admin-dialog-title h2 { margin: 5px 0 0; }
.admin-detail-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; margin: 16px 0; }
.admin-detail-grid > span { display: flex; flex-direction: column; gap: 3px; padding: 11px; border-radius: 10px; background: #fff8df; color: #666; font-size: 12px; }
.admin-detail-grid strong { color: #222; font-size: 14px; }
.admin-member-list { display: flex; flex-direction: column; gap: 5px; }
.admin-member-list > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid #eee4c6; }
.admin-member-list > div > span:first-child { display: flex; flex-direction: column; }
.admin-empty { padding: 34px 18px; border: 1px dashed #dfd1aa; border-radius: 14px; color: #777; text-align: center; }
.danger-outline { border-color: #e2a5a5 !important; background: transparent !important; color: #a62626 !important; }
.reported-context { margin-top: 12px; padding: 14px; border-left: 3px solid #FFD54F; background: #FFF9E8; }
.alert-card { display: block; }
.alert-card.unread { border-left: 5px solid #FFD54F; background: #FFFDF5; }
.alert-card h2 { font-size: 17px; }
.alert-card time { color: #999; font-size: 12px; }
.profile-header-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 12px 0 4px; padding: 9px 9px 3px; overflow: visible; }
.profile-header-action { position: relative; overflow: visible; padding: 7px 10px; border-radius: 9px; background: #FFF4CC; color: #444; text-decoration: none; font-size: 13px; font-weight: 600; }
.profile-header-action.icon-only-action { width: 40px; min-width: 40px; min-height: 40px; padding: 0; display: inline-grid; place-items: center; flex: 0 0 40px; }
.profile-header-actions .profile-header-action.icon-only-action { width: 42px; min-width: 42px; height: 42px; min-height: 42px; margin: 0; padding: 0; box-sizing: border-box; }
.profile-header-action.icon-only-action svg { width: 18px; height: 18px; }
.profile-alert-action { position: relative; }
.profile-friends-link { position: relative; }
.alert-badge { position: absolute; z-index: 2; top: -7px; right: -7px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: #D93025; color: white; border: 2px solid white; font-size: 11px; font-weight: 800; line-height: 16px; text-align: center; }
.alerts-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.alert-day { margin: 24px 0 8px; color: #777; font-size: 14px; text-transform: uppercase; letter-spacing: .06em; }
.alert-card { cursor: pointer; }
.legal-page { max-width: 820px; margin: 35px auto; padding: 0 20px; }
.legal-page > a { color: #8A6100; text-decoration: none; }
.legal-card { margin-top: 16px; padding: 30px; border: 1px solid #F0E5C4; border-radius: 18px; background: white; box-shadow: 0 8px 20px rgba(0,0,0,.05); }
.legal-card h1 { margin-bottom: 18px; }
.legal-card h2 { margin: 24px 0 8px; font-size: 18px; }
.legal-card p { line-height: 1.65; color: #444; }
.legal-notice { padding: 14px; border-left: 4px solid #D38A00; background: #FFF8E1; }
.legal-links { display: flex; justify-content: center; gap: 8px; margin-top: 16px; font-size: 13px; }
body.dark-mode .profile-header-action { background: #444; color: white; }
body.dark-mode .alert-badge { border-color: #2b2b2b; }
.notification-center-intro { margin: 0 0 22px; color: #6f6a61; line-height: 1.55; }
.notification-preference-row { position: relative; cursor: pointer; }
.notification-preference-row > span:first-child { display: grid; gap: 3px; padding-right: 62px; }
.notification-preference-row strong { color: inherit; font-size: 14px; }
.notification-preference-row small { color: #817a6e; font-size: 11px; }
.notification-preference-row input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.notification-switch { position: absolute; right: 17px; width: 44px; height: 25px; border-radius: 999px; background: #c9c5bd; transition: background .18s ease; }
.notification-switch::after { position: absolute; top: 3px; left: 3px; width: 19px; height: 19px; border-radius: 50%; background: white; box-shadow: 0 1px 4px rgba(0,0,0,.2); content: ""; transition: transform .18s ease; }
.notification-preference-row input:checked + .notification-switch { background: #22A559; }
.notification-preference-row input:checked + .notification-switch::after { transform: translateX(19px); }
.notification-preference-row input:focus-visible + .notification-switch { outline: 3px solid rgba(34,165,89,.28); outline-offset: 2px; }
.push-master-row { position: relative; cursor: pointer; }
.push-master-row > span:first-child { padding-right: 62px; }
.push-master-row .push-master-switch { flex: 0 0 44px; }
.push-master-row.enabled .push-master-switch { background: #22A559; }
.push-master-row.enabled .push-master-switch::after { transform: translateX(19px); }
.push-master-row:focus-visible .push-master-switch { outline: 3px solid rgba(34,165,89,.28); outline-offset: 2px; }
.push-master-row:disabled .push-master-switch { opacity: .55; }
body.dark-mode .notification-center-intro, body.dark-mode .notification-preference-row small { color: #bbb; }
body.dark-mode .notification-switch { background: #666; }
body.dark-mode .legal-card { background: #2b2b2b; border-color: #444; }
body.dark-mode .legal-card p { color: #ddd; }
body.dark-mode .legal-notice { background: #3a3320; }
@media (max-width: 560px) { .profile-header-actions { justify-content: center; } .profile-header-action { text-align: center; padding-inline: 5px; font-size: 12px; } .profile-header-actions .profile-header-action.icon-only-action { flex: 0 0 44px; width: 44px; min-width: 44px; height: 44px; min-height: 44px; } .alerts-heading { align-items: flex-start; flex-direction: column; } .legal-card { padding: 20px; } }

/* SPOROČILA */
.messages-page { width: min(1180px, calc(100% - 32px)); height: calc(100vh - 145px); min-height: 540px; margin: 24px auto 110px; display: grid; grid-template-columns: 330px minmax(0, 1fr); overflow: hidden; border: 1px solid #E9DDBD; border-radius: 18px; background: white; box-shadow: 0 10px 30px rgba(0,0,0,.07); }
@media (min-width: 601px) {
    body:has(.messages-page) { background: #fff; }
    body.dark-mode:has(.messages-page) { background: #2b2b2b; }
}
.conversation-sidebar { min-width: 0; display: flex; flex-direction: column; border-right: 1px solid #E9DDBD; background: #FFFDF5; }
.conversation-sidebar-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px; border-bottom: 1px solid #E9DDBD; }
.conversation-sidebar-header h1 { font-size: 24px; }
.new-chat-group { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 0 12px; border: 0; border-radius: 999px; background: #B77900; color: #fff; font-weight: 800; text-decoration: none; cursor: pointer; }
.new-chat-group:hover { background: #956300; }
.new-chat-group { width: 40px; height: 40px; min-height: 40px; padding: 0; flex: 0 0 40px; }
.new-chat-group svg { width: 21px; height: 21px; }
body.dark-mode .new-chat-group { background: #8A640B; color: #fff; }
body.dark-mode .new-chat-group:hover { background: #A87908; }
.new-chat-menu-wrap { position: relative; flex: none; }
.new-chat-menu { position: absolute; z-index: 20; top: calc(100% + 9px); right: 0; width: 185px; padding: 6px; border: 1px solid #E9DDBD; border-radius: 13px; background: #fff; box-shadow: 0 12px 30px rgba(45,35,10,.18); }
.new-chat-menu[hidden] { display: none; }
.new-chat-menu button, .new-chat-menu a { display: flex; width: 100%; min-height: 42px; align-items: center; padding: 9px 12px; border: 0; border-radius: 9px; background: transparent; color: #29251B; font: inherit; font-weight: 700; text-align: left; text-decoration: none; cursor: pointer; }
.new-chat-menu button:hover, .new-chat-menu a:hover { background: #FFF2BD; }
body.dark-mode .new-chat-menu { border-color: #4A463B; background: #2B2B2B; }
body.dark-mode .new-chat-menu button, body.dark-mode .new-chat-menu a { color: #fff; }
body.dark-mode .new-chat-menu button:hover, body.dark-mode .new-chat-menu a:hover { background: #4A4122; }
.new-conversation-button { width: 100%; margin-top: 14px; padding: 10px 14px; border: 0; border-radius: 10px; background: #FFD54F; color: #222; font: inherit; font-weight: 700; cursor: pointer; }
.conversation-list { flex: 1; min-height: 0; overflow-y: auto; }
.conversation-row-shell { position: relative; border-bottom: 1px solid #F0E5C4; }
.conversation-row { width: 100%; display: grid; grid-template-columns: 46px minmax(0,1fr) auto; align-items: center; gap: 11px; padding: 14px 16px; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; }
    .conversation-row-shell:hover, .conversation-row-shell.active { background: #FFF4CC; }
.conversation-row-shell:has(.conversation-delete) .conversation-row { padding-right: 48px; }
.conversation-delete { position: absolute; right: 10px; bottom: 9px; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #A44747; cursor: pointer; }
.conversation-delete:hover { background: #FFE7E7; color: #8D2525; }
.conversation-delete svg { width: 16px; height: 16px; }
.conversation-avatar { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; flex: none; }
.avatar-fallback { display: inline-flex; align-items: center; justify-content: center; background: #FFD54F; color: #222; font-weight: 800; }
.conversation-row-copy { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.conversation-row-copy strong, .conversation-row-copy span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conversation-row-copy span { color: #777; font-size: 13px; }
.conversation-row-meta { align-self: stretch; display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: 4px; color: #999; font-size: 11px; }
.conversation-row-meta b, .nav-unread-badge { min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; background: #D93025; color: white; font-size: 10px; line-height: 19px; text-align: center; }
.conversation-list-empty { padding: 35px 20px; color: #777; text-align: center; }
.conversation-list-empty .btn { margin-top: 12px; }
.conversation-panel { min-width: 0; min-height: 0; background: white; }
.conversation-empty { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: #999; }
.conversation-empty span { font-size: 36px; }
.conversation-empty-icon { display: grid; place-items: center; width: 52px; height: 52px; }
.conversation-empty-icon svg { width: 44px; height: 44px; }
.conversation-view { height: 100%; min-height: 0; display: grid; grid-template-rows: auto minmax(0,1fr) auto auto auto auto; }
.conversation-empty[hidden], .conversation-view[hidden], .message-composer[hidden], .message-disabled[hidden], .message-send-state[hidden] { display: none !important; }
.conversation-header { min-height: 72px; display: flex; align-items: center; padding: 12px 20px; border-bottom: 1px solid #E9DDBD; }
.conversation-header a { display: flex; align-items: center; gap: 11px; color: #222; text-decoration: none; }
.conversation-header .conversation-avatar { width: 42px; height: 42px; }
.conversation-header a > span { display: grid; gap: 2px; }
.conversation-header a small { color: #777; font-size: 11px; }
.conversation-back { display: none; margin-right: 8px; border: 0; background: transparent; font-size: 22px; cursor: pointer; }
.message-history { min-height: 0; overflow-y: auto; padding: 22px; }
.chat-active-users { position: relative; min-height: 25px; margin: 0; padding: 5px 18px; border-top: 1px solid #F0E5C4; background: #FFFDF5; color: #16813A; font-size: 11px; font-weight: 700; line-height: 15px; text-align: center; }
.chat-active-users:not(:empty)::before { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: #22A559; content: ""; }
.chat-active-users:empty:not(.typing) { display: none; }
.chat-active-users.typing::after { position: absolute; left: 50%; bottom: calc(100% + 5px); z-index: 2; color: #16813A; content: attr(data-typing-label); font-size: 12px; font-style: italic; font-weight: 750; pointer-events: none; transform: translateX(-50%); white-space: nowrap; animation: bucka-typing-fade 1s ease-in-out infinite alternate; }
@keyframes bucka-typing-fade { from { opacity: .55; } to { opacity: 1; } }
.message-bubble-row { display: flex; margin: 8px 0; }
.message-bubble-row.mine { justify-content: flex-end; }
.message-bubble-row.theirs:has(.group-message-sender) { width: 100%; flex-direction: column; align-items: flex-start; }
.group-message-sender { display: flex; align-items: center; gap: 6px; margin: 0 0 3px 3px; color: #666; font-size: 11px; }
.group-message-avatar { width: 20px; height: 20px; }
.message-system { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 12px auto; color: #888; font-size: 12px; text-align: center; }
.message-system time { font-size: 10px; }
.chat-group-dialog { width: min(480px, calc(100% - 28px)); max-height: 82vh; padding: 0; border: 0; border-radius: 18px; background: white; }
.chat-group-dialog::backdrop { background: rgba(0,0,0,.45); }
.chat-group-dialog form { display: grid; gap: 14px; padding: 20px; }
.chat-group-dialog label { display: grid; gap: 6px; font-weight: 700; }
.chat-group-dialog input, .chat-group-dialog select { min-height: 42px; padding: 8px 10px; border: 1px solid #D9D1BF; border-radius: 10px; font: inherit; }
.chat-group-dialog fieldset { min-width: 0; max-height: 260px; overflow: auto; padding: 10px; border: 1px solid #E5DDCB; border-radius: 12px; }
.chat-group-friend-list, .chat-member-list { display: grid; gap: 7px; }
.chat-group-friend { grid-template-columns: auto 1fr auto; align-items: center; font-weight: 600 !important; }
.chat-group-friend .friend-avatar, .chat-member-row .friend-avatar { width: 38px; height: 38px; }
.chat-group-friend input { min-height: 0; }
.chat-group-info-head, .chat-member-row { display: flex; align-items: center; gap: 10px; }
.chat-group-info-head > div, .chat-member-row > span { display: grid; gap: 2px; }
.chat-group-info-head small, .chat-member-row small { color: #777; font-size: 11px; }
.chat-member-actions { display: flex !important; grid-auto-flow: column; gap: 5px; margin-left: auto; }
.chat-member-actions button, .group-leave, [data-rename-group] button { min-height: 34px; border: 0; border-radius: 9px; padding: 0 9px; cursor: pointer; }
.chat-member-actions .danger, .group-leave.danger { background: #FDE8E8; color: #B42318; }
body.dark-mode .chat-group-dialog { background: #2b2b2b; color: white; }
.message-bubble { width: fit-content; min-width: 44px; max-width: min(72%, 560px); padding: 10px 13px 7px; border-radius: 16px 16px 16px 4px; background: #F3EFDf; }
.message-bubble-row.mine .message-bubble { border-radius: 16px 16px 4px 16px; background: #FFD54F; color: #222; }
.message-bubble p { margin: 0; white-space: pre-wrap; overflow-wrap: break-word; word-break: normal; hyphens: none; }
.message-bubble time { display: block; margin-top: 4px; color: #777; font-size: 10px; text-align: right; }
.message-reply-reference { display: grid; width: 100%; margin-bottom: 7px; padding: 6px 8px; border: 0; border-left: 3px solid #22A559; border-radius: 6px; background: rgba(255,255,255,.58); color: inherit; text-align: left; cursor: pointer; }
.message-reply-reference small { color: #16813A; font-weight: 800; }
.message-reply-reference span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; opacity: .78; }
.message-reply-compose { display: flex; align-items: center; gap: 10px; padding: 8px 18px; border-top: 1px solid #E9DDBD; background: #FFF9E8; }
.message-reply-compose[hidden] { display: none; }
.message-reply-compose > span { min-width: 0; display: grid; flex: 1; }
.message-reply-compose small { color: #16813A; font-weight: 800; }
.message-reply-compose strong { overflow: hidden; color: #666; font-size: 12px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.message-reply-compose button { width: 30px; height: 30px; border: 0; border-radius: 50%; background: transparent; color: #777; font-size: 22px; cursor: pointer; }
.message-highlight .message-bubble { animation: message-highlight 1.2s ease; }
@keyframes message-highlight { 35% { box-shadow: 0 0 0 4px rgba(34,165,89,.35); } }
.shared-post-message { display: grid; gap: 3px; width: min(290px, 62vw); padding: 10px; border-radius: 11px; background: rgba(255,255,255,.72); color: #222; text-decoration: none; }
.shared-post-message small { color: #777; }
.shared-post-message span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.shared-post-message img { width: 100%; height: 105px; margin-top: 5px; border-radius: 8px; object-fit: cover; }
.chat-deska-invitation { display: grid; justify-items: start; gap: 5px; width: min(290px, 62vw); padding: 12px; border-radius: 12px; background: rgba(255,255,255,.76); color: #292929; }
.chat-deska-invitation-icon { display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 2px; border-radius: 50%; background: #FFD54F; }
.chat-deska-invitation-icon svg { width: 17px; height: 17px; }
.chat-deska-invitation small { color: #777; font-weight: 700; }
.chat-deska-invitation > a { color: #292929; font-size: 16px; font-weight: 800; text-decoration: none; }
.chat-deska-invitation-actions { display: grid; grid-template-columns: 1fr 1fr; width: 100%; gap: 7px; margin-top: 7px; }
.chat-deska-invitation-actions button { min-height: 34px; border: 0; border-radius: 8px; cursor: pointer; font-weight: 750; }
.chat-deska-invitation-actions button:first-child { background: #FFD54F; color: #292929; }
.chat-deska-invitation-actions button:last-child { background: #EEE9DE; color: #555; }
.chat-invitation-status { margin-top: 5px; color: #716000; font-size: 12px; }
body.dark-mode .chat-deska-invitation { background: rgba(30,30,30,.78); color: white; }
body.dark-mode .chat-deska-invitation > a { color: white; }
.share-sent-confirmation { min-height: 240px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 15px; padding: 32px; color: #218739; text-align: center; }
.share-sent-confirmation svg { width: 78px; height: 78px; stroke-width: 1.8; }
.share-sent-confirmation strong { color: #222; font-size: 27px; }
body.dark-mode .share-sent-confirmation strong { color: #fff; }
body.dark-mode .bucka-share-sheet, body.dark-mode .post-success-dialog { background: #2b2b2b; border-color: #494949; color: white; }
.action-confirmation-dialog { position: fixed; inset: 0; width: min(310px, calc(100% - 40px)); height: fit-content; margin: auto; padding: 0; border: 1px solid #D9E8DC; border-radius: 20px; background: white; }
.action-confirmation-dialog::backdrop { background: rgba(0,0,0,.42); }
.bucka-user-avatar { overflow: hidden; object-fit: cover; border-radius: 50%; flex: 0 0 auto; }
.bucka-user-avatar-fallback { display: inline-flex; align-items: center; justify-content: center; background: var(--avatar-color); color: #fff; font-weight: 800; line-height: 1; background-image: none !important; }
.bucka-deska-icon { overflow: hidden; flex: 0 0 auto; }
.bucka-deska-icon img { width: 100%; height: 100%; object-fit: cover; }
.bucka-system-dialog { position: fixed; inset: 0; width: min(390px, calc(100% - 32px)); height: fit-content; margin: auto; padding: 0; border: 0; border-radius: 20px; background: transparent; color: inherit; }
.bucka-system-dialog::backdrop { background: rgba(0,0,0,.48); backdrop-filter: blur(2px); }
dialog[data-bucka-no-keyboard="true"]:focus { outline: none; }
.bucka-dialog-panel { padding: 22px; border-radius: inherit; background: #fff; box-shadow: 0 20px 55px rgba(0,0,0,.24); }
.bucka-dialog-panel h2 { margin: 0 0 8px; font-size: 20px; }
.bucka-dialog-panel p { margin: 0 0 20px; color: #626262; line-height: 1.45; }
.bucka-dialog-actions { display: grid; gap: 8px; }
.bucka-dialog-actions button { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; border: 0; border-radius: 12px; background: #FFF4CC; color: #2e2e2e; font: inherit; font-weight: 750; cursor: pointer; }
.bucka-dialog-actions button.danger { background: #FDE8E8; color: #C62828; }
.bucka-dialog-actions button.confirm { background: #22A559; color: #fff; }
.bucka-dialog-actions button.confirm:hover { background: #198447; }
.bucka-dialog-actions button.quiet { border: 1px solid #E7E1D4; background: #fff; color: #666; }
.bucka-dialog-actions svg { width: 19px; height: 19px; }
.bucka-system-dialog.action-menu .bucka-dialog-actions button { justify-content: flex-start; }
body.dark-mode .bucka-dialog-panel { background: #2b2b2b; }
body.dark-mode .bucka-dialog-panel p { color: #c9c9c9; }
.action-confirmation-content { min-height: 240px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 15px; padding: 32px; color: #218739; text-align: center; }
.action-confirmation-content svg { width: 78px; height: 78px; stroke-width: 1.8; }
.action-confirmation-content strong { color: #222; font-size: 27px; }
.action-confirmation-dialog.bucka-confirmation { border-color: #E7A0B0; }
.action-confirmation-dialog.bucka-confirmation .action-confirmation-content { color: #D66F88; }
body.dark-mode .action-confirmation-dialog { background: #2b2b2b; border-color: #494949; }
body.dark-mode .action-confirmation-content strong { color: #fff; }
.empty-message-history { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #999; }
.message-composer { display: grid; grid-template-columns: minmax(0,1fr) 46px; gap: 9px; padding: 14px 18px; border-top: 1px solid #E9DDBD; background: #FFFDF5; }
.message-input-control { position: relative; min-width: 0; }
.message-composer textarea { width: 100%; resize: none; min-height: 44px; max-height: 120px; padding: 11px 48px 11px 13px; border: 1px solid #DDD0AA; border-radius: 13px; font: inherit; }
.message-composer button { border: 0; border-radius: 50%; background: #FFD54F; font-size: 20px; cursor: pointer; }
#message-image-button { position: absolute; right: 5px; top: 50%; display: grid; width: 36px; height: 36px; place-items: center; padding: 0; transform: translateY(-50%); background: transparent; color: #6E6346; }
#message-image-button svg { width: 21px; height: 21px; }
.message-image-preview { position: relative; grid-column: 1 / -1; width: 86px; height: 86px; overflow: visible; }
.message-image-preview img { width: 100%; height: 100%; object-fit: cover; border: 1px solid #D9C992; border-radius: 13px; }
.message-image-preview button { position: absolute; top: -7px; right: -7px; display: grid; width: 25px; height: 25px; place-items: center; padding: 0; background: #333; color: #fff; font-size: 17px; }
.message-image-frame { position: relative; display: grid; min-width: 160px; min-height: 110px; place-items: center; overflow: hidden; border-radius: 12px; background: rgba(0,0,0,.08); color: #777; font-size: 12px; }
.message-image-frame img { display: none; width: min(280px, 62vw); max-height: 340px; object-fit: cover; border-radius: inherit; }
.message-image-frame.loaded > span { display: none; }
.message-image-frame.loaded img { display: block; }
.message-disabled { margin: 0; padding: 14px 20px; border-top: 1px solid #E9DDBD; background: #FFF4CC; color: #6D5700; text-align: center; font-size: 13px; }
.message-send-state { padding: 9px 18px; background: #FFF0F0; color: #A32121; font-size: 13px; }
.message-send-state button { margin-left: 7px; border: 0; background: transparent; color: inherit; font-weight: 800; text-decoration: underline; cursor: pointer; }
.conversation-load-error { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: #777; }
.message-composer button:disabled { cursor: wait; opacity: .55; }
.load-older-messages { display: block; margin: 0 auto 14px; padding: 8px 13px; border: 0; border-radius: 999px; background: #FFF4CC; color: #6D5700; cursor: pointer; }
.new-conversation-dialog { width: min(430px, calc(100% - 30px)); max-height: 75vh; padding: 0; border: 1px solid #E9DDBD; border-radius: 16px; background: white; }
.new-conversation-dialog::backdrop { background: rgba(0,0,0,.38); }
.dialog-heading { display: flex; justify-content: space-between; align-items: center; padding: 18px 20px; }
.dialog-heading button { border: 0; background: transparent; font-size: 25px; cursor: pointer; }
.new-conversation-dialog > input { width: calc(100% - 40px); margin: 0 20px 12px; padding: 11px; border: 1px solid #DDD0AA; border-radius: 10px; }
#new-conversation-friends { max-height: 48vh; overflow-y: auto; }
.new-conversation-friend { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 20px; border: 0; border-top: 1px solid #F0E5C4; background: transparent; text-align: left; cursor: pointer; }
.new-conversation-friend:hover { background: #FFF4CC; }
.bucka-share-sheet { position: fixed; inset: auto 0 0; width: min(520px, 100%); max-height: 82vh; margin: 0 auto; padding: 0; border: 1px solid #E9DDBD; border-bottom: 0; border-radius: 18px 18px 0 0; background: white; }
.bucka-share-sheet::backdrop { background: rgba(0,0,0,.42); }
.bucka-share-sheet.share-sent, .post-success-dialog { position: fixed; inset: 0; width: min(310px, calc(100% - 40px)); height: fit-content; margin: auto; padding: 0; border: 1px solid #D9E8DC; border-radius: 20px; background: white; }
.post-success-dialog::backdrop { background: rgba(0,0,0,.42); }
.share-sheet-heading { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid #E9DDBD; }
.share-sheet-heading h2 { font-size: 19px; }
.share-sheet-heading button { border: 0; background: transparent; font-size: 25px; cursor: pointer; }
.bucka-share-sheet section { padding: 14px 18px; }
.bucka-share-sheet h3 { margin-bottom: 9px; color: #806100; font-size: 11px; letter-spacing: .08em; }
.bucka-share-sheet input { width: 100%; padding: 9px 11px; border: 1px solid #DDD0AA; border-radius: 10px; }
.share-friends { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; margin-top: 10px; }
.share-friend { min-width: 0; padding: 8px 4px; border: 0; border-radius: 10px; background: #FFFDF5; cursor: pointer; }
.share-friend-avatar { display: grid; place-items: center; width: 42px; height: 42px; margin: 0 auto 5px; overflow: hidden; border-radius: 50%; background: #FFD54F; font-weight: 800; }
.share-friend-avatar img { width: 100%; height: 100%; object-fit: cover; }
.share-friend > span:last-child { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.share-elsewhere { border-top: 1px solid #E9DDBD; }
.share-sheet-action { display: flex; align-items: center; gap: 9px; width: 100%; padding: 10px 4px; border: 0; background: transparent; cursor: pointer; text-align: left; }
.share-sheet-action svg { width: 19px; height: 19px; }
.nav-unread-badge { position: absolute; top: -5px; right: -5px; border: 2px solid #FFD54F; line-height: 15px; }
.bottom-nav-item { position: relative; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
body.dark-mode .messages-page, body.dark-mode .conversation-panel, body.dark-mode .new-conversation-dialog { background: #2b2b2b; border-color: #444; color: white; }
body.dark-mode .conversation-sidebar, body.dark-mode .message-composer { background: #333; border-color: #444; }
body.dark-mode .conversation-sidebar, body.dark-mode .conversation-row-shell, body.dark-mode .conversation-header, body.dark-mode .message-composer, body.dark-mode .new-conversation-friend { border-color: #444; }
body.dark-mode .conversation-row-shell:hover, body.dark-mode .conversation-row-shell.active, body.dark-mode .new-conversation-friend:hover { background: #51492e; }
body.dark-mode .conversation-header a { color: white; }
body.dark-mode .message-bubble { background: #444; }
body.dark-mode .message-bubble-row.mine .message-bubble { background: #FFD54F; color: #222; }
body.dark-mode .message-composer textarea, body.dark-mode .new-conversation-dialog > input { background: #222; color: white; border-color: #555; }
body.dark-mode .chat-active-users { border-color: #444; background: #333; color: #72D890; }
body.dark-mode .chat-active-users.typing::after { color: #72D890; }
body.dark-mode .message-reply-compose { border-color: #444; background: #333; }
body.dark-mode .message-reply-reference { background: rgba(0,0,0,.2); }

.pull-refresh-indicator { position: fixed; top: calc(env(safe-area-inset-top) + 6px); left: 50%; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #FFF4CC; color: #6D5700; box-shadow: 0 4px 14px rgba(0,0,0,.2); opacity: clamp(0, calc(var(--pull-distance, 0px) / 45px), 1); pointer-events: none; transform: translate(-50%, calc(-52px + var(--pull-distance, 0px))); transition: transform .18s ease, opacity .18s ease, background .18s ease; z-index: 2200; }
.pull-refresh-indicator svg { width: 21px; height: 21px; transform: rotate(var(--pull-rotation, 0deg)); }
.pull-refresh-indicator.ready { background: #FFD54F; }
.pull-refresh-indicator.refreshing svg { animation: pull-refresh-spin .7s linear infinite; }
@keyframes pull-refresh-spin { to { transform: rotate(360deg); } }
.mobile-page-swipe-preview { position: fixed; inset: 0; overflow: hidden; background: #fff; box-shadow: 0 0 28px rgba(0,0,0,.25); pointer-events: none; transition: none; z-index: 2100; }
.mobile-page-swipe-preview[data-direction="1"] { transform: translateX(100%); }
.mobile-page-swipe-preview[data-direction="-1"] { transform: translateX(-100%); }
.mobile-page-swipe-preview iframe { width: 100%; height: 100%; border: 0; background: #fff; pointer-events: none; }
.mobile-page-swipe-preview.returning, .mobile-page-swipe-preview.committing { transition: transform .17s ease-out; }
.mobile-page-swipe-preview.returning[data-direction="1"] { transform: translateX(100%) !important; }
.mobile-page-swipe-preview.returning[data-direction="-1"] { transform: translateX(-100%) !important; }
body.dark-mode .pull-refresh-indicator { background: #4A4122; color: #FFD54F; }
body.dark-mode .mobile-page-swipe-preview, body.dark-mode .mobile-page-swipe-preview iframe { background: #2b2b2b; }

@media (max-width: 720px) {
    html, body { overscroll-behavior-x: none; }
    .conversation-row { -webkit-tap-highlight-color: transparent; }
    .conversation-row-shell:hover, .conversation-row-shell.active { background: transparent !important; }
    body.dark-mode .conversation-row-shell:hover, body.dark-mode .conversation-row-shell.active { background: transparent !important; }
}
@media (max-width: 720px) {
    .messages-page { width: 100%; height: calc(100dvh - 95px); min-height: 0; margin: 0 0 95px; grid-template-columns: 1fr; border: 0; border-radius: 0; }
    .conversation-sidebar { border-right: 0; }
    .conversation-panel { display: none; }
    .messages-page.chat-open .conversation-sidebar { display: none; }
    .messages-page.chat-open .conversation-panel { display: block; height: 100%; }
    .conversation-back { display: inline-block; }
    .message-bubble { max-width: 82%; }
}

/* =========================================================
   MOBILE-FIRST APPLICATION SHELL
   ========================================================= */
@media (max-width: 1024px) {
    .groups-sidebar, .groups-sidebar.collapsed { width: 0; z-index: 1200; }
    .groups-panel, .groups-sidebar.collapsed .groups-panel { position: fixed; inset: 0 auto 0 0; width: min(88vw, 400px); height: 100dvh; padding: calc(20px + env(safe-area-inset-top)) 14px calc(100px + env(safe-area-inset-bottom)); border: 0; border-right: 1px solid #F0E5C4; opacity: 1; overflow-y: auto; pointer-events: auto; transform: translateX(0); transition: transform .25s ease; z-index: 2; }
    .groups-sidebar.collapsed .groups-panel { width: min(88vw, 400px); padding-left: 14px; padding-right: 14px; border-right-width: 1px; transform: translateX(-105%); }
    .groups-toggle, .groups-sidebar.collapsed .groups-toggle { position: fixed; top: calc(16px + env(safe-area-inset-top)); left: 10px; width: 42px; height: 88px; min-height: 88px; border: 1px solid #E0C45D; border-radius: 12px; background: #FFF4CC; color: #6E5700; box-shadow: 0 4px 13px rgba(0,0,0,.14); z-index: 4; }
    .groups-toggle-icon { display: grid; }
    .groups-toggle-label { display: none; }
    body.groups-drawer-open { overflow: hidden; touch-action: none; }
    body.groups-drawer-open .global-friends-shortcut { display: none !important; }
    .groups-drawer-backdrop { display: block; position: fixed; inset: 0; width: 100vw; height: 100dvh; border: 0; background: rgba(20,20,20,.48); opacity: 1; z-index: 1; }
    .groups-sidebar.collapsed .groups-drawer-backdrop { opacity: 0; pointer-events: none; }
    .groups-drawer-close { display: none; }
    .groups-heading { align-items: center; }
    body:not(.groups-rail-collapsed) .home-feed, body:not(.groups-rail-collapsed) main.main { transform: none; }
}

@media (max-width: 600px) {
    :root { --mobile-nav-height: 66px; }
    body { font-size: 16px; padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
    body.has-bottom-nav { padding-bottom: calc(var(--mobile-nav-height) + 18px); }
    .pwa-install-banner { position: fixed; top: 0; left: env(safe-area-inset-left); right: env(safe-area-inset-right); z-index: 1400; display: flex; align-items: center; justify-content: center; min-height: calc(42px + env(safe-area-inset-top)); padding: calc(9px + env(safe-area-inset-top)) 44px 9px 12px; border-bottom: 1px solid #DDB936; background: rgba(255,213,79,.97); box-shadow: 0 3px 12px rgba(0,0,0,.12); color: #2E2E2E; font-size: 13px; font-weight: 700; line-height: 1.3; text-align: center; text-decoration: none; }
    .install-guide-page { width: 100%; max-width: none; margin: 0; padding: calc(24px + env(safe-area-inset-top)) 10px calc(var(--mobile-nav-height) + 18px); }
    .install-guide-heading { margin-bottom: 18px; }
    .install-guide-heading p { font-size: 14px; }
    .install-guide-grid { grid-template-columns: 1fr; gap: 12px; }
    .install-guide-card { min-width: 0; padding: 18px 16px; border-radius: 14px; }
    .install-guide-card h2 { font-size: 18px; }
    .install-steps { gap: 14px; }
    .install-steps li { font-size: 14px; }
    .install-steps li::before { width: 26px; height: 26px; }
    main, .main, .home-feed, .profile-page, .settings-page, .post-container, .board-page, .admin-page { width: 100%; max-width: none; margin: 0 auto; padding: 18px 10px calc(var(--mobile-nav-height) + 18px); }
    .main:has(.search-title), .home-feed, .board-page { padding-top: calc(72px + env(safe-area-inset-top)); }
    .site-header { padding: calc(12px + env(safe-area-inset-top)) 14px 12px; }
    .site-header a { font-size: 16px; }

    .bottom-nav { bottom: 0; left: 0; right: 0; height: var(--mobile-nav-height); padding: 7px 8px 1px; background: rgba(255,213,79,.97); border-top: 1px solid #E1C45E; box-shadow: 0 -5px 20px rgba(0,0,0,.12); pointer-events: auto; }
    .bottom-nav-pill { width: min(100%, 500px); height: 58px; justify-content: space-around; gap: 2px; padding: 5px; border-radius: 0; background: transparent; box-shadow: none; }
    .bottom-nav-item { width: 48px; height: 48px; background: transparent; }
    .bottom-nav-item:nth-child(3) { width: 52px; height: 52px; margin-top: -14px; background: #2E2E2E; color: #FFD54F; box-shadow: 0 4px 12px rgba(0,0,0,.25); }
    .bottom-nav-item.active { background: rgba(255,255,255,.58); }
    .bottom-nav-item:nth-child(3).active { background: #111; color: #FFD54F; }

    .post-card, .profile-card, .activity-section, .comments-section, .settings-list { border-radius: 13px; box-shadow: none; }
    .post-card { margin-bottom: 10px; padding: 12px 11px; }
    .home-friend-recommendations { margin-bottom: 12px; padding: 14px 12px; border-radius: 13px; box-shadow: none; }
    .home-recommendation-grid { grid-template-columns: 1fr; gap: 7px; }
    .home-recommendation-row { padding: 9px 10px; }
    .home-recommendation-person strong { font-size: 14px; }
    .home-recommendation-add { min-height: 36px; padding: 7px 10px; font-size: 11px; }
    .search-discovery-section, .search-discovery-section.home-friend-recommendations { margin-bottom: 12px; padding: 14px 12px; border-radius: 13px; box-shadow: none; }
    .search-reconnect-row { gap: 8px; padding: 9px; }
    .search-reconnect-person small { font-size: 11px; }
    .search-message-button { min-height: 40px; display: inline-flex; align-items: center; }
    .post-card:hover, .activity-item:hover { transform: none; }
    .post-header { margin-bottom: 8px; }
    .post-header .avatar { width: 36px; height: 36px; margin-right: 8px; }
    .username { font-size: 15px; overflow-wrap: anywhere; }
    .post-title { font-size: 18px; line-height: 1.25; }
    .post-content { margin-bottom: 8px; overflow-wrap: anywhere; }
    .post-feed-image-wrap { width: calc(100% + 22px); height: 230px; margin-left: -11px; border-radius: 0; }
    .divider { margin: 8px 0; }
    .post-actions { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
    .post-actions .btn, .post-actions .action-link { min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 7px 10px; font-size: 13px; }
    .report-button { margin-left: auto; }

    .feed-search { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 7px; }
    .feed-search input, input, select, textarea { font-size: 16px; }
    .feed-search .btn { min-width: 52px; padding-inline: 10px; }
    .search-title { font-size: 25px; }
    .board-search-card { align-items: flex-start; padding: 12px; }
    .board-search-policy { white-space: normal; text-align: right; }

    .feed-sort { margin: 10px 2px 14px; }
    .feed-sort label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
    .feed-sort select { width: auto; max-width: 100%; min-height: 44px; padding: 8px 35px 8px 12px; }
    .destination-heading { align-items: flex-start; padding-inline: 4px; }

    .board-header { min-height: 0; padding: 18px 14px; border-radius: 13px 13px 0 0; }
    .board-hero-icon { width: 54px; height: 54px; font-size: 23px; }
    .board-hero-copy { min-width: 0; flex: 1; }
    .board-hero-copy h1 { overflow-wrap: anywhere; font-size: 23px; }
    .board-header-actions { width: 100%; display: flex; flex-wrap: wrap; justify-content: stretch; }
    .board-header-actions > * { flex: 1 1 auto; }
    .board-membership, .board-header-actions .btn { min-height: 44px; }
    .board-tabs { overflow-x: auto; scrollbar-width: none; }
    .board-tab { min-width: 92px; min-height: 46px; padding: 10px; }
    .board-info-card { border-radius: 0 0 13px 13px; }

    .comments-section { padding: 12px 10px; }
    .comment-detail-page .post-container { width: 100%; max-width: none; margin: 0; padding: 0 0 calc(var(--mobile-nav-height) + 18px); }
    .comment-detail-page #post-content-area > .post-card { margin: 0; padding: 14px 12px; border-radius: 0; }
    .comment-detail-page .comments-section { padding: 14px 12px; border-radius: 0; }
    .comment-card { gap: 9px; }
    .comment-body { min-width: 0; }
    .comment-text { overflow-wrap: anywhere; }
    .comment-composer { position: static; margin: 0 0 14px; padding: 0; background: transparent; border: 0; }
    .comment-input { flex-wrap: nowrap; gap: 6px; }
    .comment-input input[type="text"] { min-width: 0; flex: 1 1 auto; padding: 10px; font-size: 16px; }
    .comment-text-control input[type="text"] { flex-basis: auto; padding-right: 5px; }
    .comment-media-button, .comment-input button { min-width: 44px; min-height: 44px; padding: 7px !important; font-size: 0; }
    .comment-media-button { font-size: 18px; }
    #comment-send-button::after { content: none; }

    .create-post-card { width: 100%; min-height: calc(100dvh - var(--mobile-nav-height)); margin: 0; padding: 14px 12px; border: 0; border-radius: 0; }
    .create-post-user { margin-bottom: 11px; }
    .create-post-card .post-body-composer textarea { min-height: 29dvh; padding: 12px; border: 0; }
    .posting-destination-control select { max-width: 180px; font-size: 13px; }
    .poll-option-row { grid-template-columns: 74px minmax(0, 1fr); }
    .profile-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .profile-actions > * { width: 100%; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; margin: 0; }
    .profile-actions > .edit-profile-btn { width: 40px; }
    .profile-actions > .btn-primary { min-height: 44px; }

    .profile-card { padding: 17px 13px; margin-bottom: 12px; }
    .profile-card-top { align-items: flex-start; flex-wrap: wrap; justify-content: center; text-align: center; }
    .profile-card-top .profile-pic { width: 88px; height: 88px; order: 2; }
    .profile-identity { flex-basis: 100%; order: 3; align-items: center; }
    .profile-card.viewing-other-profile .profile-card-top { display: flex; flex-direction: column; align-items: center; text-align: center; }
    .profile-card.viewing-other-profile .profile-card-top .profile-pic { order: initial; }
    .profile-card.viewing-other-profile .friend-button-container { top: 0; right: 0; margin-left: 0; align-self: auto; }
    .profile-card.viewing-other-profile .profile-identity { align-items: center; text-align: center; }
    .profile-card.viewing-other-profile .profile-friend-action { min-height: 44px; }
    .profile-header-actions { order: 1; width: 100%; justify-content: center; overflow: visible; }
    .profile-header-action { min-width: 88px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
    .profile-bio { padding: 13px; }
    .profile-details-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
    .profile-personalization-layout { grid-template-columns: 1fr; gap: 8px; }
    .profile-personalization-column { gap: 8px; }
    .profile-featured-friends { min-height: 0; }
.profile-detail { min-width: 0; padding: 11px 7px; }
    .detail-value { overflow-wrap: anywhere; }
    .profile-stats { gap: 3px; }
    .profile-stats strong { font-size: 17px; }
    .profile-stats span { line-height: 1.25; overflow-wrap: anywhere; }
    .activity-section { padding: 15px 12px; }
    .tab-bar { overflow-x: auto; }
    .tab { flex: 1; min-width: 100px; min-height: 44px; padding: 8px; }

    .settings-page { padding-inline: 12px; }
    .settings-list { border-radius: 13px; }
    .settings-row { min-height: 54px; padding: 14px 16px; }
    .settings-form-card { width: 100%; margin-top: 10px; }
    .final-delete-actions { flex-direction: column-reverse; }
    .final-delete-actions > * { width: 100%; min-height: 44px; display: flex; align-items: center; justify-content: center; }

    .admin-page { padding-inline: 10px; }
    .admin-stat-grid { grid-template-columns: 1fr; }
    .admin-report-card, .admin-user-card, .admin-content-card, .admin-group-card { align-items: stretch; flex-direction: column; }
    .admin-report-card .btn, .admin-user-card .btn, .admin-content-card .btn, .admin-group-card .btn { min-height: 40px; }
    .admin-search, .admin-filter-row { flex-direction: column; }
    .admin-section-heading { align-items: start; }
    .admin-detail-grid { grid-template-columns: 1fr 1fr; }
    .admin-member-list > div { align-items: stretch; flex-direction: column; }
    .admin-dialog { max-height: calc(100dvh - 20px); overflow-y: auto; padding: 18px; }

    .alert-card { padding: 14px; overflow-wrap: anywhere; }
    .legal-page { margin: 0 auto; padding: 18px 10px calc(var(--mobile-nav-height) + 18px); }
    .legal-card { padding: 18px 14px; border-radius: 13px; }
}

@media (max-width: 350px) {
    .bottom-nav-item { width: 44px; height: 44px; }
    .post-actions .btn, .post-actions .action-link { padding-inline: 7px; font-size: 12px; }
    .profile-header-action { min-width: 82px; font-size: 11px; }
    .profile-stats span { font-size: 10px; }
    .board-search-card { display: grid; grid-template-columns: auto minmax(0,1fr); }
    .board-search-policy, .board-search-action { grid-column: 2; text-align: left; }
}

@media (min-width: 601px) and (max-width: 1024px) {
    .main, main, .home-feed, .profile-page, .settings-page, .post-container, .board-page { width: min(100%, 760px); padding-left: 22px; padding-right: 22px; }
    .bottom-nav { bottom: 18px; }
}
.suspension-banner { position: sticky; z-index: 1100; top: 0; display: flex; justify-content: center; gap: 12px; padding: 9px 15px; background: #C62828; color: white; font-size: 13px; }
body.dark-mode .admin-stat-grid > div, body.dark-mode .admin-report-card, body.dark-mode .admin-user-card, body.dark-mode .admin-content-card, body.dark-mode .admin-group-card, body.dark-mode .admin-action-row, body.dark-mode .alert-card, body.dark-mode .admin-dialog { background: #2b2b2b; border-color: #444; color: white; }
body.dark-mode .admin-metric-card, body.dark-mode .admin-chart-card { border-color: #444; background: #2B2B2B; color: white; }
body.dark-mode .admin-metric-card strong { color: white; }
body.dark-mode .admin-chart-heading p, body.dark-mode .admin-chart-heading label, body.dark-mode .admin-metric-card span { color: #B8B8B8; }
body.dark-mode .admin-chart-heading select { border-color: #555; background: #353535; color: white; }
body.dark-mode .admin-search input, body.dark-mode .admin-filter-row input, body.dark-mode .admin-filter-row select, body.dark-mode .admin-dialog textarea, body.dark-mode .admin-dialog select, body.dark-mode .admin-dialog input { border-color: #555; background: #222; }
body.dark-mode .admin-detail-grid > span { background: #222; color: #aaa; }
body.dark-mode .admin-detail-grid strong { color: white; }
body.dark-mode .reported-context { background: #333; }
@media (max-width: 650px) { .admin-stat-grid { grid-template-columns: 1fr; } .suspension-banner { flex-direction: column; } }
@media (max-width: 760px) { .admin-metric-grid { grid-template-columns: 1fr; } .admin-chart-heading { align-items: stretch; flex-direction: column; } .admin-chart-heading label { flex-basis: auto; } .admin-chart-wrap { height: 290px; } }

/* =========================
   AUTH FORMS
========================= */
.auth-card { max-width: 420px; margin: 40px auto; width: calc(100% - 32px); }
.auth-subtitle { text-align: center; margin: -8px 0 24px; color: #777; }
.auth-btn { width: 100%; margin-top: 16px; }
.auth-footer { margin-top: 24px; text-align: center; }
.auth-footer a { font-weight: 600; text-decoration: none; }
.auth-footer a:hover { text-decoration: underline; }
.form-group { margin-bottom: 18px; }
.form-group label { display: block; margin-bottom: 6px; font-weight: 600; }
.form-group input { width: 100%; box-sizing: border-box; border-radius: 12px; padding: 12px 14px; font-size: 1rem; }

/* =========================
   FRIENDS SYSTEM
========================= */
.friends-title { font-size: 28px; font-weight: 700; margin-bottom: 25px; }
.friends-section { background: white; border-radius: 18px; padding: 22px; margin-bottom: 25px; border: 1px solid #F0E5C4; box-shadow: 0 8px 20px rgba(0,0,0,.05); }
.friends-section h2 { font-size: 20px; margin-bottom: 18px; }
.friend-card, .friend-request-card, .friend-request { display: flex; align-items: center; justify-content: space-between; padding: 14px; border-bottom: 1px solid #F3F3F3; transition: .2s; background: white; border-radius: 16px; border: 1px solid #F0E5C4; margin-bottom: 15px; box-shadow: 0 5px 15px rgba(0,0,0,.05); }
.friend-card:last-child, .friend-request-card:last-child { border-bottom: none; }
.friend-card:hover, .friend-request-card:hover { background: #FFFDF5; border-radius: 12px; }
.friend-user { display: flex; align-items: center; gap: 14px; text-decoration: none; color: inherit; }
.friend-card a { display: flex; align-items: center; gap: 12px; }
.friend-avatar { width: 48px; height: 48px; border-radius: 50%; background: #FFD54F; object-fit: cover; flex-shrink: 0; }
.friend-name { font-weight: 700; font-size: 16px; font-size: 17px; color: #2E2E2E; }
.friend-actions, .friend-request-actions { display: flex; gap: 10px; align-items: center; }
.friend-btn, .friend-request-btn, .accept-friend-btn, .reject-friend-btn, .remove-friend-btn, .cancel-friend-btn { min-height: 40px; padding: 8px 14px; border: none; border-radius: 10px; background: #F3EEE2; color: #444; cursor: pointer; font-size: 14px; font-weight: 600; transition: .2s ease; }
.friend-btn:hover, .friend-request-btn:hover, .accept-friend-btn:hover, .reject-friend-btn:hover, .remove-friend-btn:hover, .cancel-friend-btn:hover { background: #FFD54F; color: black; transform: translateY(-1px); }
.accept-friend-btn { background: #FFF4CC; }
.reject-friend-btn, .cancel-friend-btn { background: #FFF4CC; }
.remove-friend-btn, .friend-btn.remove { background: #FFF4CC; }
.remove-friend-btn:hover, .friend-btn.remove:hover { background: #FFD54F; color: black; }
.friend-btn.remove { background: #ffdddd; color: #c62828; }
.friend-btn.remove:hover { background: #ff6b6b; color: white; }
.friends-empty { text-align: center; padding: 20px; color: #999; }
.friends-only-message { display: flex; align-items: center; gap: 14px; margin-top: 22px; padding: 16px 18px; background: #FFFDF5; border: 1px solid #F0E5C4; border-radius: 12px; }
.friends-only-icon { font-size: 24px; flex-shrink: 0; }
.friends-only-message strong { display: block; font-size: 16px; color: #2E2E2E; }
.friends-only-message p { margin: 2px 0 0; font-size: 14px; color: #888; }

/* =========================
   DELETE BUTTONS
========================= */
.delete-comment { margin-top: 10px; padding: 6px 14px; border: none; border-radius: 8px; background: #ff4d4d; color: white; font-size: 14px; font-weight: 600; cursor: pointer; transition: 0.2s ease; }
.delete-comment:hover { background: #d93636; transform: translateY(-1px); }
.delete-comment:active { transform: scale(0.97); }
.delete-post { margin-top: 10px; padding: 6px 14px; border: none; border-radius: 8px; background: #ff4d4d; color: white; font-size: 14px; font-weight: 600; cursor: pointer; transition: 0.2s ease; }
.delete-post:hover { background: #d93636; transform: translateY(-1px); }
.delete-post:active { transform: scale(0.97); }

/* =========================
   FEED SEARCH
========================= */
.feed-search { display: flex; gap: 10px; margin-bottom: 25px; }
.feed-search input { flex: 1; padding: 12px 15px; border: 1px solid #E5D9B8; border-radius: 12px; background: white; color: #2E2E2E; font-size: 15px; outline: none; }
.feed-search input:focus { border-color: #FFD54F; box-shadow: 0 0 0 3px rgba(255, 213, 79, 0.18); }
.feed-search button { white-space: nowrap; }
#search-results-container { margin-bottom: 25px; }

.home-friend-recommendations { margin-bottom: 25px; padding: 18px; border: 1px solid #F0E5C4; border-radius: 18px; background: white; box-shadow: 0 8px 20px rgba(0,0,0,.05); }
.home-friend-recommendations h2 { margin-bottom: 14px; font-size: 19px; }
.home-recommendation-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.home-recommendation-row { display: flex; align-items: center; gap: 7px; min-width: 0; padding: 9px; border: 1px solid #F0E5C4; border-radius: 12px; background: #FFFDF5; }
.home-recommendation-person { display: flex; align-items: center; gap: 7px; min-width: 0; flex: 1; color: inherit; text-decoration: none; }
.home-recommendation-person strong { min-width: 0; overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.home-recommendation-avatar { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%; background: #FFD54F; object-fit: cover; }
.home-recommendation-add { flex: 0 0 auto; padding: 6px 8px; border: 0; border-radius: 8px; background: #FFF4CC; color: #444; cursor: pointer; font-size: 11px; font-weight: 700; }
.home-recommendation-add, .accept-friend-btn, #friend-request-btn, .friend-btn { display: inline-flex; gap: 6px; align-items: center; justify-content: center; }
.home-recommendation-add svg, .accept-friend-btn svg, #friend-request-btn svg, .friend-btn svg { width: 16px; height: 16px; }
.home-recommendation-add:hover { background: #FFD54F; color: #000; }
.home-recommendation-add:disabled { cursor: default; opacity: .7; }
.relationship-partner-link { color: #B27500; font-weight: 700; text-decoration: none; }
.relationship-partner-link:hover { text-decoration: underline; }
.search-discovery-section { margin-bottom: 25px; padding: 18px; border: 1px solid #F0E5C4; border-radius: 18px; background: white; box-shadow: 0 8px 20px rgba(0,0,0,.05); }
.search-discovery-section.home-friend-recommendations { padding: 18px; }
.search-discovery-section h2 { margin-bottom: 14px; font-size: 19px; }
.search-reconnect-list, .search-activity-list { display: grid; gap: 9px; }
.search-reconnect-row { display: flex; align-items: center; gap: 12px; padding: 11px; border: 1px solid #F0E5C4; border-radius: 12px; background: #FFFDF5; }
.search-reconnect-person { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; color: inherit; text-decoration: none; }
.search-reconnect-person > span:last-child { display: grid; min-width: 0; }
.search-reconnect-person strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-reconnect-person small { color: #777; }
.search-message-button { flex: 0 0 auto; padding: 7px 11px; font-size: 13px; text-decoration: none; }
.search-activity-row { padding: 11px 12px; border-bottom: 1px solid #EFE5CC; }
.search-activity-row:last-child { border-bottom: 0; }
.search-activity-row p { margin: 0; }
.search-activity-row a { color: #9A6800; font-weight: 700; text-decoration: none; }
.search-activity-row a:hover { text-decoration: underline; }
.search-activity-row time { display: block; margin-top: 2px; color: #888; font-size: 13px; }

/* =========================
   DARK MODE
========================= */
body.dark-mode { background: #1f1f1f; color: white; }
body.dark-mode .post-card, body.dark-mode .comments-section, body.dark-mode .profile-card, body.dark-mode .activity-section, body.dark-mode .settings-list { background: #2b2b2b; border-color: #9A7A32; }
body.dark-mode .repost-original-card, body.dark-mode .repost-sheet-original { background: #242424; border-color: #665A34; }
body.dark-mode .comment-card { border-color: #444; }
body.dark-mode .comment-thread-node:not(.depth-0)::before { background: #5D543C; }
body.dark-mode .comment-thread-toggle { color: #D8C47E; }
body.dark-mode .comment-thread-toggle:hover { background: #39362C; }
body.dark-mode.comment-detail-page,
body.dark-mode.comment-detail-page .post-container { background: #2B2B2B; }
body.dark-mode.comment-detail-page .comments-section { border-top-color: #444; }
body.dark-mode .comment-deleted-label { color: #aaa; }
body.dark-mode .comment-reply-button { color: #D6CBAE; }
body.dark-mode .comment-reply-button:hover { background: #3A382F; }
body.dark-mode .comment-reply-reference { color: #D2BD7A; }
body.dark-mode .comment-reply-compose { background: #343127; border-left-color: #22A559; }
body.dark-mode .username, body.dark-mode .comment-user, body.dark-mode .profile-identity h2, body.dark-mode .detail-value, body.dark-mode .settings-title { color: white; }
body.dark-mode .post-content, body.dark-mode .comment-text, body.dark-mode .profile-bio p, body.dark-mode .activity-text { color: #ddd; }
body.dark-mode input, body.dark-mode textarea { background: #333; color: white; border: 1px solid #555; }
body.dark-mode input:focus { border-color: #FFD54F; }
body.dark-mode .btn, body.dark-mode .settings-btn, body.dark-mode .edit-profile-btn { background: #444; color: white; }
body.dark-mode .btn:hover, body.dark-mode .settings-btn:hover, body.dark-mode .edit-profile-btn:hover { background: #FFD54F; color: black; }
body.dark-mode .btn-primary, body.dark-mode .auth-btn, body.dark-mode .bucka { background: #FFD43B; color: #222; }
body.dark-mode .bucka.buckaed { background: #F3A6B7; color: #44252C; }
body.dark-mode .btn-secondary, body.dark-mode .btn-compact { background: #444; color: white; }
body.dark-mode .post-top-icon { background: #444; color: #EEE; }
body.dark-mode .post-top-icon:hover { background: #555; color: white; }
body.dark-mode .post-top-icon.danger { color: #FFAAA5; }
body.dark-mode .post-expiry { background: #4A2525; color: #FFB4AE; }
body.dark-mode .icon-btn { color: #FFD54F; }
body.dark-mode .icon-btn:hover { background: #444; color: white; }
body.dark-mode .profile-bio { background: #333; border-left-color: #FFD54F; }
body.dark-mode .profile-featured-friends, body.dark-mode .featured-friends-editor { background: #333; border-color: #555; }
body.dark-mode .profile-featured-friends-heading, body.dark-mode .profile-featured-friend-row { color: white; }
body.dark-mode .featured-friend-editor-row { background: #2b2b2b; }
body.dark-mode .profile-detail { background: #333; border-color: #444; }
body.dark-mode .tab-bar { border-bottom-color: #444; }
body.dark-mode .tab { color: #777; }
body.dark-mode .tab.active { color: #FFD54F; }
body.dark-mode .tab:hover:not(.active) { color: white; }
body.dark-mode .activity-meta { color: #888; }
body.dark-mode .activity-title { color: white; }
body.dark-mode .activity-item { border-bottom-color: #444; }
body.dark-mode .activity-item:hover { background: #333; }
body.dark-mode .activity-section { background: #2b2b2b; border-color: #444; }
body.dark-mode .loading-text { color: #777; }
body.dark-mode .bottom-nav-item { background: #FFF4CC; color: #000; }
body.dark-mode .bottom-nav-item.active, body.dark-mode .bottom-nav-item:hover { background: rgba(255,255,255,.55); color: #000; }
body.dark-mode .install-guide-card { background: #2B2B2B; border-color: #444; color: white; }
body.dark-mode .install-guide-heading p { color: #C7C7C7; }
body.dark-mode .install-platform-name, body.dark-mode .install-button-name { color: #F0D56F; }
body.dark-mode .install-platform-heading small { background: #49401E; color: #F0D56F; }
body.dark-mode .settings-row { background: #2b2b2b; color: white; border-bottom-color: #444; }
body.dark-mode .settings-row:hover { background: #333; }
body.dark-mode .settings-row-arrow { color: #666; }
body.dark-mode .auth-card { background: #1f1f1f; color: white; }
body.dark-mode .auth-subtitle { color: #b0b0b0; }
body.dark-mode .form-group label { color: white; }
body.dark-mode .form-group input { background: #2b2b2b; color: white; border: 1px solid #444; }
body.dark-mode .form-group input::placeholder { color: #999; }
body.dark-mode .auth-footer { color: white; }
body.dark-mode .auth-footer a { color: #66b3ff; }
body.dark-mode .auth-footer a:hover { color: #8ac8ff; }
body.dark-mode .upload-info { color: #b0b0b0; }
body.dark-mode .like.liked { background: #ff6b6b; color: white; }
body.dark-mode .like.liked:hover { background: #ff5252; color: white; }
body.dark-mode .create-post-card textarea { background: #2b2b2b; color: white; border-color: #444; }
body.dark-mode .post-title-row input, body.dark-mode .post-body-composer, body.dark-mode .poll-composer, body.dark-mode .poll-composer > input, body.dark-mode .poll-option-row input { background: #2b2b2b; color: white; border-color: #555; }
body.dark-mode .post-composer-footer { border-color: #444; }
body.dark-mode .posting-destination-control select { color: #FFD54F; }
body.dark-mode .post-title { color: #fff; }
body.dark-mode .edit-profile-input, body.dark-mode .edit-profile-textarea { background: #333; color: white; border: 1px solid #555; }
body.dark-mode .friends-section { background: #2b2b2b; border-color: #444; }
body.dark-mode .friend-card, body.dark-mode .friend-request-card, body.dark-mode .friend-request { background: #2B2B2B; border-color: #444; color: #F2F2F2; box-shadow: 0 5px 15px rgba(0,0,0,.22); }
body.dark-mode .friend-card:hover, body.dark-mode .friend-request-card:hover, body.dark-mode .friend-request:hover { background: #333; border-color: #5B533C; }
body.dark-mode .friend-name { color: white; }
body.dark-mode .friend-btn, body.dark-mode .friend-request-btn, body.dark-mode .accept-friend-btn, body.dark-mode .reject-friend-btn, body.dark-mode .remove-friend-btn, body.dark-mode .cancel-friend-btn { background: #444; color: white; }
body.dark-mode .friend-btn:hover, body.dark-mode .friend-request-btn:hover, body.dark-mode .accept-friend-btn:hover, body.dark-mode .reject-friend-btn:hover, body.dark-mode .remove-friend-btn:hover, body.dark-mode .cancel-friend-btn:hover { background: #FFD54F; color: black; }
body.dark-mode .friend-btn.remove { background: #5b2222; color: #ffaaaa; }
body.dark-mode .friend-btn.remove:hover { background: #ff6b6b; color: white; }
body.dark-mode .friends-only-message { background: #333; border-color: #444; }
body.dark-mode .friends-only-message strong { color: white; }
body.dark-mode .friends-only-message p { color: #aaa; }
body.dark-mode .friends-page [data-friend-panel] > div > p { color: #B8B8B8; }
body.dark-mode .friend-list-tabs .tab { background: transparent; }
body.dark-mode .friend-list-tabs .tab.active { color: #FFD54F; border-bottom-color: #FFD54F; }
body.dark-mode .friends-page .friend-user { color: #F2F2F2; }
body.dark-mode .feed-search input { background: #2b2b2b; color: white; border-color: #555; }
body.dark-mode .feed-search input::placeholder { color: #999; }
body.dark-mode .feed-search input:focus { border-color: #FFD54F; }
body.dark-mode .selected-file-name { color: #B0B0B0; }
body.dark-mode .home-friend-recommendations, body.dark-mode .home-recommendation-row { background: #2B2B2B; border-color: #444; }
body.dark-mode .home-recommendation-row { background: #333; }
body.dark-mode .home-recommendation-add { background: #444; color: white; }
body.dark-mode .home-recommendation-add:hover { background: #FFD54F; color: black; }
body.dark-mode .relationship-partner-link, body.dark-mode .search-activity-row a { color: #FFD54F; }
body.dark-mode .search-discovery-section, body.dark-mode .search-reconnect-row { background: #2B2B2B; border-color: #444; }
body.dark-mode .search-reconnect-row { background: #333; }
body.dark-mode .search-reconnect-person small { color: #BBB; }
body.dark-mode .search-activity-row { border-color: #444; }

/* =========================
   SEARCH USER RESULTS
========================= */

#search-results-container .friend-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px;
    margin-bottom: 15px;
    background: white;
    border: 1px solid #F0E5C4;
    border-radius: 16px;
    box-shadow: 0 5px 15px rgba(0,0,0,.05);
}

#search-results-container .friend-user {
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    color: inherit;
}

#search-results-container .friend-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #FFD54F;
    object-fit: cover;
    flex-shrink: 0;
}

#search-results-container .friend-name {
    font-weight: 700;
    font-size: 17px;
    color: #2E2E2E;
}

#search-results-container .friend-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}


/* =========================
   DARK MODE SEARCH RESULTS
========================= */

body.dark-mode #search-results-container .friend-card {
    background: #2b2b2b;
    border-color: #444;
    color: white;
}

body.dark-mode #search-results-container .friend-name {
    color: white;
}

body.dark-mode #search-results-container .friend-card:hover {
    background: #333;
}

body.dark-mode #search-results-container .friend-btn {
    background: #444;
    color: white;
}

body.dark-mode #search-results-container .friend-btn:hover {
    background: #FFD54F;
    color: black;
}

.profile-avatar-upload {
    position: relative;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    cursor: pointer;
    display: block;
    flex-shrink: 0;
    overflow: hidden;
}

.profile-avatar-upload .profile-pic {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #FFD54F;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.avatar-upload-overlay {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    opacity: 0;
    transition: opacity 0.2s;
}

.profile-avatar-upload:hover .avatar-upload-overlay {
    opacity: 1;
}

/* =========================
   EDIT PROFILE AVATAR
========================= */

.avatar-edit-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.avatar-edit-wrapper .profile-pic {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #FFD54F;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.avatar-change-btn {
    display: inline-block;
    padding: 7px 12px;
    border-radius: 8px;
    background: #FFF4CC;
    color: #444;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: .2s;
}

.avatar-change-btn:hover {
    background: #FFD54F;
    color: black;
}

.avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #FFD54F;
    margin-right: 14px;
    object-fit: cover;
    flex-shrink: 0;
}

.profile-friends-link {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: .2s;
}

.profile-friends-link:hover {
    background: #FFF4CC;
    border-color: #FFD54F;
    transform: translateY(-2px);
}

.profile-friends-link:hover .detail-value {
    color: #D38A00;
}

body.dark-mode .profile-friends-link {
    color: white;
}

body.dark-mode .profile-friends-link:hover {
    background: #444;
    border-color: #FFD54F;
}

body.dark-mode .profile-friends-link:hover .detail-value {
    color: #FFD54F;
}

/* =========================
   FIXED GROUPS RAIL
========================= */
.home-layout { width: 100%; }
.home-feed { max-width: 700px; margin: 35px auto; padding: 0 20px; }
.groups-sidebar { position: fixed; z-index: 800; top: 0; bottom: 0; left: 0; display: flex; align-items: flex-start; width: 340px; transition: width .25s ease; }
.groups-panel { width: 300px; height: 100vh; overflow-y: auto; padding: 24px 14px 130px; background: #fff; border: 1px solid #F0E5C4; border-left: 0; box-shadow: 7px 0 22px rgba(0,0,0,.07); scrollbar-width: thin; scrollbar-color: #E1C45E transparent; transition: opacity .18s ease, width .25s ease, padding .25s ease; }
.groups-toggle { width: 40px; min-height: 44px; margin-top: 24px; border: 1px solid #E0C45D; border-left: 0; border-radius: 0 11px 11px 0; background: #FFF4CC; color: #6E5700; cursor: pointer; display: flex; justify-content: center; align-items: center; font-weight: 700; box-shadow: 4px 2px 10px rgba(0,0,0,.08); }
.groups-toggle:hover { background: #F5C32C; }
.groups-toggle-label { display: none; }
.groups-toggle-icon { display: grid; place-items: center; line-height: 1; }
.groups-toggle-icon svg { width: 19px; height: 19px; }
.groups-sidebar.collapsed { width: 40px; }
.groups-sidebar.collapsed .groups-panel { width: 0; padding-left: 0; padding-right: 0; border-width: 0; opacity: 0; overflow: hidden; pointer-events: none; }
.groups-sidebar.collapsed .groups-toggle { border-left: 0; border-radius: 0 12px 12px 0; }
.groups-sidebar.collapsed .groups-toggle-icon { transform: none; }
.groups-drawer-close, .groups-drawer-backdrop { display: none; }
.groups-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; padding: 0 4px; }
.groups-heading h2 { font-size: 21px; line-height: 1.2; }
.groups-eyebrow { color: #A07100; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }
.groups-intro { margin: 0 4px 16px; color: #777; font-size: 12px; line-height: 1.4; }
.group-add-btn { width: 38px; height: 38px; border: 0; border-radius: 50%; background: #FFD54F; font-size: 25px; line-height: 1; cursor: pointer; }
.group-add-btn:hover { background: #F5C32C; }
.group-form { margin-bottom: 16px; padding: 14px; border-radius: 13px; background: #FFF9E8; border: 1px solid #F0E5C4; }
.group-form[hidden] { display: none; }
.group-form label:not(.group-privacy-option) { display: block; margin: 8px 0 4px; font-size: 13px; font-weight: 700; }
.group-form input:not([type="checkbox"]), .group-form textarea { width: 100%; padding: 9px 10px; border: 1px solid #DED3B5; border-radius: 8px; font: inherit; resize: vertical; }
.group-privacy-option { display: flex; align-items: flex-start; gap: 9px; margin: 12px 0; cursor: pointer; }
.group-privacy-option input { margin-top: 4px; }
.group-privacy-option span { display: flex; flex-direction: column; font-size: 13px; }
.group-privacy-option small { color: #777; }
.group-form-actions { display: flex; justify-content: flex-end; gap: 7px; }
.group-form-actions .btn { padding: 7px 11px; }
.group-create-btn { background: #FFD54F; }
.group-error { color: #C62828; font-size: 13px; margin-top: 8px; }
.groups-list { display: flex; flex-direction: column; gap: 4px; }
.group-card { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 6px; border: 0; border-radius: 10px; background: transparent; transition: background .18s ease; }
.group-card:hover { background: #FFF7D8; }
.group-card.active { background: rgba(255,212,59,.34); }
.group-row-link { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; color: inherit; text-decoration: none; }
.group-row-name { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 700; }
.group-row-lock { flex: 0 0 auto; font-size: 11px; opacity: .7; }
.group-row-lock svg, .inline-private-lock svg { width: 14px; height: 14px; }
.inline-private-lock { display: inline-grid; place-items: center; margin-left: 4px; vertical-align: -2px; }
.group-pin-button { display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 30px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: #999; cursor: pointer; }
.group-pin-button:hover, .group-pin-button.active { background: #FFF0B1; color: #806100; }
.group-pin-button svg { width: 15px; height: 15px; }
.group-avatar { display: grid; place-items: center; width: 36px; height: 36px; flex: 0 0 36px; border-radius: 50%; background: #FFD54F; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.12); font-weight: 800; }
.group-avatar svg { width: 18px; height: 18px; }
.group-avatar img, .board-hero-icon img, .post-group-icon img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.board-hero-icon svg { width: 38px; height: 38px; }
.post-group-icon svg { width: 14px; height: 14px; }
.group-privacy { display: flex; align-items: center; gap: 4px; }
.group-privacy svg { width: 12px; height: 12px; }
.group-card-title { min-width: 0; }
.group-card-title h3 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
.group-privacy { display: block; color: #777; font-size: 11px; }
.group-description { margin-top: 9px; color: #666; font-size: 13px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.group-card-footer { min-height: 25px; margin-top: 10px; display: flex; justify-content: space-between; align-items: center; color: #888; font-size: 12px; }
.group-action { min-height: 32px; padding: 5px 9px; border: 0; border-radius: 8px; background: #F3EEE2; cursor: pointer; font-size: 11px; font-weight: 700; }
.group-action.leave { background: #F4EFDf; color: #777; }
.group-owner-label { color: #A07100; font-weight: 700; }
.groups-empty, .groups-loading { padding: 28px 8px; color: #888; text-align: center; font-size: 14px; }
.groups-empty span { display: block; color: #D4A928; font-size: 34px; }

body.dark-mode .groups-panel { background: #2b2b2b; border-color: #444; }
body.dark-mode .group-form { background: #333; border-color: #494949; }
body.dark-mode .group-card { background: transparent; }
body.dark-mode .group-card:hover { background: #39372F; }
body.dark-mode .group-card.active { background: rgba(255,212,59,.2); }
body.dark-mode .group-card-title h3 { color: #fff; }
body.dark-mode .group-description, body.dark-mode .group-privacy, body.dark-mode .group-card-footer { color: #aaa; }
body.dark-mode .group-action { background: #444; color: #ddd; }
body.dark-mode .group-action.leave { background: #444; color: #ddd; }

.board-search-card { display: flex; align-items: center; gap: 13px; margin-bottom: 12px; padding: 15px; border: 1px solid #EFE5CC; border-radius: 16px; background: white; box-shadow: 0 5px 15px rgba(0,0,0,.05); }
.board-search-card.public { background: #FFF4CC; border-color: #F0D77E; }
.board-search-card.private { background: #FFFDF8; }
.board-search-copy { flex: 1; min-width: 0; }
.board-search-copy h3 { font-size: 17px; }
.board-search-copy p { margin-top: 4px; color: #666; font-size: 13px; line-height: 1.45; }
.board-search-policy { padding: 5px 9px; border-radius: 8px; background: #F3EEE0; color: #777; font-size: 12px; font-weight: 700; white-space: nowrap; }
.board-search-policy.joined { background: #FFE794; color: #735500; }
body.dark-mode .board-search-card { background: #303030; border-color: #444; }
body.dark-mode .board-search-card.public { background: #463E22; border-color: #746126; }
body.dark-mode .board-search-copy h3 { color: #fff; }
body.dark-mode .board-search-copy p { color: #bbb; }
body.dark-mode .board-search-policy { background: #444; color: #ddd; }

/* =========================
   OGLASNE DESKE CORE PAGES
========================= */
.group-card-title a { color: inherit; text-decoration: none; }
.group-card-title a:hover { color: #A07100; }
.group-avatar { color: #2E2E2E; text-decoration: none; }
.groups-main-link { display: flex; align-items: center; gap: 10px; min-height: 44px; margin: 0 0 16px; padding: 4px 6px; border-radius: 10px; color: inherit; text-decoration: none; background: transparent; }
.groups-main-link:hover { background: #FFF7D8; }
.groups-main-link.active { background: rgba(255,212,59,.34); }
.groups-section-label { margin: 16px 6px 8px; padding-top: 16px; border-top: 1px solid #EFE5CC; color: #777; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }
.groups-subsection-label { margin: 12px 6px 5px; color: #A07100; font-size: 12px; font-weight: 750; }
#pinned-groups, #owned-groups, #member-groups, #recent-groups, #suggested-groups { display: flex; flex-direction: column; gap: 4px; }
.groups-empty-inline { margin: 4px 7px 8px; color: #999; font-size: 12px; }
.groups-create-link { width: 100%; margin-top: 14px; justify-content: flex-start; background: transparent; color: #775B00; }
.groups-create-link:hover { background: #FFF7D8; }
.board-page { max-width: 780px; margin: 35px auto; padding: 0 20px; }
.board-header { position: relative; display: block; min-height: 0; padding: 21px 22px 19px; background: #FFFDF8; border: 1px solid #E9E1D2; border-radius: 18px 18px 0 0; }
.board-title-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.board-title-identity { display: flex; align-items: center; gap: 13px; min-width: 0; }
.board-title-identity h1 { min-width: 0; overflow-wrap: anywhere; font-size: 27px; line-height: 1.2; }
.board-hero-icon { display: grid; place-items: center; width: 56px; height: 56px; flex: 0 0 56px; border-radius: 50%; background: white; border: 2px solid #EFE7D7; box-shadow: 0 3px 9px rgba(0,0,0,.07); font-size: 25px; font-weight: 800; }
.board-hero-copy { flex: 1; min-width: 0; }
.board-header .board-hero-copy { margin-top: 13px; padding-left: 69px; }
.board-hero-copy > p:not(.groups-eyebrow) { color: #716D65; line-height: 1.45; }
.board-member-count { display: inline-block; margin-top: 7px; color: #847B69; font-size: 13px; font-weight: 700; }
.board-invite-only { padding: 8px 11px; border-radius: 9px; background: rgba(255,255,255,.65); color: #665614; font-size: 12px; font-weight: 700; }
.board-header-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.board-invite-friend { gap: 7px; }
.board-invite-friend svg { width: 18px; height: 18px; }
.board-invite-dialog { width: min(460px, calc(100% - 24px)); max-height: 78dvh; padding: 0 0 12px; border: 1px solid #E9DDBD; border-radius: 18px; background: white; }
.board-invite-dialog::backdrop { background: rgba(0,0,0,.42); }
.board-invite-dialog > input { width: calc(100% - 32px); margin: 0 16px 12px; padding: 10px 12px; border: 1px solid #DDD0AA; border-radius: 10px; font: inherit; }
.board-invite-list { max-height: 52dvh; overflow-y: auto; padding: 0 10px; }
.board-invite-row { display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 7px 8px; border-top: 1px solid #F0E5C4; }
.board-invite-row a { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; color: inherit; text-decoration: none; }
.board-invite-row strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-invite-row .share-friend-avatar { width: 38px; height: 38px; margin: 0; flex: 0 0 38px; }
.board-invite-row .btn-compact { display: inline-flex; align-items: center; gap: 5px; }
.board-invite-row .btn-compact svg { width: 15px; height: 15px; }
.deska-invitation-actions { display: flex; gap: 8px; margin-top: 12px; }
.deska-invitation-actions button { min-height: 38px; padding: 7px 12px; }
body.dark-mode .board-invite-dialog { background: #2b2b2b; border-color: #444; color: white; }
body.dark-mode .board-invite-dialog > input { background: #222; border-color: #555; color: white; }
body.dark-mode .board-invite-row { border-color: #444; }
.board-tabs { display: flex; gap: 4px; margin-bottom: 20px; padding: 7px 10px; background: #FFFDF8; border: 1px solid #E9E1D2; border-top: 0; border-radius: 0 0 18px 18px; }
.board-tab { padding: 9px 16px; border: 0; border-radius: 9px; background: transparent; color: #777; cursor: pointer; font-weight: 700; }
.board-tab:hover { background: #F4F0E8; color: #444; }
.board-tab.active { background: #FFF1B8; color: #6E5700; }
.board-info-card, .restricted-board { padding: 22px; background: #FFFDFB; border: 1px solid #E9E4DA; border-radius: 15px; box-shadow: 0 4px 12px rgba(0,0,0,.025); }
.board-info-card h2, .restricted-board h2 { margin-bottom: 12px; }
.board-info-card dl { display: grid; grid-template-columns: 100px 1fr; margin-top: 20px; gap: 8px; }
.board-info-card dt { color: #888; font-weight: 700; }
.restricted-board { text-align: center; color: #777; }
.restricted-board > span { font-size: 34px; }
.board-member-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid #F3F3F3; color: inherit; text-decoration: none; }
.post-group-source { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 13px; color: #8A6900; text-decoration: none; font-size: 13px; font-weight: 800; }
.post-group-icon { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #FFD54F; color: #333; font-size: 11px; }
.founder-title { display: inline-block; margin-left: 6px; padding: 2px 6px; border-radius: 999px; background: #FFF0B1; color: #896800; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.post-destination { width: 100%; padding: 12px 14px; border: 1px solid #DDD; border-radius: 12px; background: white; color: #2E2E2E; font: inherit; }
.destination-heading { display: flex; align-items: center; gap: 14px; margin-bottom: 25px; padding: 18px; border-radius: 18px; background: #FFF4CC; border: 1px solid #F0D77E; }
.board-search-card { color: inherit; text-decoration: none; }
.board-search-action { color: #A07100; font-size: 13px; font-weight: 800; white-space: nowrap; }
body.dark-mode .groups-main-link { background: transparent; }
body.dark-mode .groups-main-link:hover, body.dark-mode .groups-main-link.active { background: #464027; }
body.dark-mode .groups-create-link { color: #FFD54F; }
body.dark-mode .groups-section-label { border-top-color: #494949; }
body.dark-mode .board-tabs, body.dark-mode .board-info-card, body.dark-mode .restricted-board { background: #2b2b2b; border-color: #444; }
body.dark-mode .board-header { background: #30302E; border-color: #444; }
body.dark-mode .board-hero-copy > p:not(.groups-eyebrow), body.dark-mode .board-member-count { color: #DDD09B; }
body.dark-mode .post-destination { background: #333; color: white; border-color: #555; }
body.dark-mode .destination-heading { background: #463E22; border-color: #746126; }

.board-header-actions { position: static; display: flex; flex: 0 0 auto; flex-wrap: nowrap; gap: 7px; }
.board-header-icon { display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 1px solid #E3DAC8; border-radius: 50%; background: white; color: #514D45; cursor: pointer; box-shadow: 0 2px 7px rgba(0,0,0,.05); }
.board-header-icon:hover { background: #FFF4CC; border-color: #E0C45D; color: #604B00; }
.board-header-icon.leave { color: #A44747; }
.board-header-icon.leave:hover { background: #FFF0F0; border-color: #E6B8B8; color: #9F2727; }
.board-header-icon svg { width: 19px; height: 19px; }
.board-leave-dialog { width: min(390px, calc(100% - 28px)); padding: 0; border: 1px solid #E7D9D4; border-radius: 19px; background: white; }
.board-leave-dialog::backdrop { background: rgba(0,0,0,.44); }
.board-confirm-content { display: flex; flex-direction: column; align-items: center; padding: 28px 24px 23px; text-align: center; }
.board-confirm-content > svg { width: 42px; height: 42px; margin-bottom: 13px; color: #B44A4A; }
.board-confirm-content h2 { font-size: 21px; }
.board-confirm-content p { margin: 8px 0 22px; color: #777; line-height: 1.45; }
.board-confirm-actions { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.board-confirm-actions button { min-height: 42px; border-radius: 10px; }
.board-confirm-actions .danger-button { background: #C94E4E; color: white; }
.board-member-entry { display: flex; align-items: center; gap: 10px; border-bottom: 1px solid #EEE5D4; }
.board-member-entry .board-member-row { flex: 1; min-width: 0; border-bottom: 0; }
.member-plebiscite-button { margin-right: 10px; }
.board-plebiscites { display: grid; gap: 12px; margin-top: 16px; }
.board-activity { margin: 4px 0 12px; padding: 9px 14px; border: 1px solid #E7DCC4; border-radius: 12px; background: #FFFDF8; }
.board-activity p { margin: 5px 0; font-size: 13px; }
.board-activity small { color: #888; white-space: nowrap; }
.board-plebiscites > h2 { font-size: 19px; }
.plebiscite-card { padding: 16px; border: 1px solid #E7DCC4; border-radius: 14px; background: white; }
.plebiscite-label { color: #8A6B00; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.plebiscite-card h3 { margin: 5px 0 10px; }
.plebiscite-card p { margin: 7px 0; }
.plebiscite-counts { display: flex; gap: 22px; margin: 12px 0 6px; }
.plebiscite-card small { display: block; margin-top: 10px; color: #777; }
.plebiscite-decision { padding: 9px 11px; border-radius: 9px; background: #FFF4CC; }
.plebiscite-vote-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 13px; }
.plebiscite-vote-actions button { min-height: 40px; border: 0; border-radius: 10px; font-weight: 750; cursor: pointer; }
.plebiscite-vote-actions button:first-child { background: #FFD43B; color: #292929; }
.plebiscite-vote-actions button:last-child { background: #EEE9DE; color: #555; }
.plebiscite-my-vote { color: #6F5A00; font-weight: 700; }
.plebiscite-actions .buckaed { background: #F3A6B7; color: #44252C; }
.plebiscite-comments-dialog { width: min(520px,calc(100% - 24px)); max-height: 78vh; padding: 0; border: 1px solid #E9DDBD; border-radius: 18px; background: white; }
.plebiscite-comments-dialog::backdrop { background: rgba(0,0,0,.42); }
.plebiscite-comment-list { max-height: 52vh; overflow-y: auto; padding: 8px 18px; }
.plebiscite-comment-list p { display: grid; gap: 3px; padding: 10px 0; border-bottom: 1px solid #EEE5D4; }
.plebiscite-comments-dialog form { display: grid; grid-template-columns: 1fr 42px; gap: 8px; padding: 12px 18px; border-top: 1px solid #E9DDBD; }
.plebiscite-comments-dialog input { min-width: 0; padding: 10px; border: 1px solid #DDD0AA; border-radius: 10px; }
.plebiscite-comments-dialog form button { border: 0; border-radius: 50%; background: #FFD43B; }
.plebiscite-feed-card { cursor: pointer; }
.plebiscite-detail-page .plebiscite-feed-card { cursor: default; }
.plebiscite-detail-main { width: min(760px,calc(100% - 28px)); margin: 24px auto 120px; }
.plebiscite-detail-back { display: inline-flex; margin-bottom: 12px; color: #755B00; font-weight: 750; text-decoration: none; }
.plebiscite-detail-main .plebiscite-feed-card { padding: 20px; }
.plebiscite-detail-comments { margin-top: 16px; padding: 18px; border: 1px solid #E9DDBD; border-radius: 15px; background: white; }
.plebiscite-detail-comments h2 { margin-bottom: 10px; font-size: 19px; }
.plebiscite-detail-comment { padding: 12px 0; border-bottom: 1px solid #EEE5D4; }
.plebiscite-detail-comment-author { display: flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; }
.plebiscite-detail-comment-author .comment-avatar { display: grid; place-items: center; width: 32px; height: 32px; overflow: hidden; border-radius: 50%; background: #FFD43B; }
.plebiscite-detail-comment-author img { width: 100%; height: 100%; object-fit: cover; }
.plebiscite-detail-comment p { margin: 8px 0 4px 40px; white-space: pre-wrap; }
.plebiscite-detail-comment small { margin-left: 40px; color: #888; }
#plebiscite-detail-comment-form { margin-bottom: 12px; }
#plebiscite-detail-comment-form .comment-input { margin: 0; }
#plebiscite-detail-comment-form button { display: grid; place-items: center; width: 44px; min-width: 44px; padding: 0; }
#plebiscite-detail-comment-form button svg { width: 19px; height: 19px; }
body.dark-mode .plebiscite-detail-comments { background: #2b2b2b; border-color: #484848; }
body.dark-mode .comment-composer { background: transparent; border-color: transparent; }
body.dark-mode .comment-user, body.dark-mode .comment-text { color: #F3F3F3; }
@media (max-width:600px) { .plebiscite-detail-main { width:100%; margin:0 0 calc(var(--mobile-nav-height) + 12px); padding:12px; } .plebiscite-detail-comments { padding:14px; } }
.plebiscite-feed-card { overflow: hidden; border-color: #E9DDBD; }
.plebiscite-feed-card:hover { transform: none; }
.plebiscite-feed-header { display: flex; align-items: center; gap: 8px; min-width: 0; margin: 0 0 14px; }
.plebiscite-feed-header .post-group-source { min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plebiscite-feed-header .plebiscite-feed-icon { width: 30px; height: 30px; flex: 0 0 30px; }
.plebiscite-feed-header .plebiscite-feed-icon svg { width: 16px; height: 16px; }
.plebiscite-countdown { margin-left: auto; color: #B43A3A; font-size: 11px; font-weight: 850; white-space: nowrap; }
.plebiscite-feed-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #FFD43B; color: #3A3217; }
.plebiscite-feed-icon svg { width: 20px; height: 20px; }
.plebiscite-status { padding: 5px 8px; border-radius: 999px; background: #EEE9DE; color: #777; font-size: 11px; font-weight: 800; }
.plebiscite-status.active { background: #FFF0B1; color: #765A00; }
.plebiscite-target { display: flex; align-items: center; gap: 10px; margin: 4px 0 12px; padding: 9px 10px; border-radius: 11px; background: #FFF9E8; color: inherit; text-decoration: none; }
.plebiscite-target:hover { background: #FFF4CC; }
.plebiscite-target .group-avatar { width: 34px; height: 34px; flex-basis: 34px; }
.plebiscite-target-copy { display: flex; min-width: 0; align-items: baseline; gap: 5px; }
.plebiscite-target-copy small { margin: 0; color: #777; font-size: 11px; font-weight: 700; }
.plebiscite-target-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
@media (max-width: 420px) {
    .plebiscite-target-copy { flex-wrap: wrap; row-gap: 1px; }
}
.plebiscite-reason { display: grid; gap: 4px; padding: 11px 12px; border-radius: 10px; background: #F8F5EC; }
.plebiscite-reason strong { color: #777; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }
.plebiscite-progress { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; margin: 12px 0 4px; }
.plebiscite-progress.no-threshold { grid-template-columns: repeat(2,1fr); }
.plebiscite-progress > div { display: grid; gap: 2px; padding: 9px; border: 1px solid #EEE5D4; border-radius: 9px; text-align: center; }
.plebiscite-progress span { color: #777; font-size: 10px; font-weight: 750; text-transform: uppercase; }
.plebiscite-progress strong { font-size: 18px; }
.plebiscite-change-preview { display: grid; gap: 7px; margin: 10px 0; padding: 12px; border-radius: 11px; background: #F8F5EC; }
.plebiscite-change-preview > strong { color: #777; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; }
.plebiscite-change-preview p { margin: 0; line-height: 1.45; }
.plebiscite-change-preview img { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; border: 3px solid white; box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.board-change-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; padding-top: 14px; border-top: 1px solid #EEE5D4; }
.plebiscite-dialog input[type="file"] { width: 100%; padding: 10px; border: 1px solid #DDD0AA; border-radius: 10px; }
.plebiscite-dialog { width: min(470px, calc(100% - 28px)); padding: 0; border: 1px solid #E7DCC4; border-radius: 18px; background: white; }
.plebiscite-dialog::backdrop { background: rgba(0,0,0,.44); }
.plebiscite-dialog form { display: grid; gap: 11px; padding: 22px; }
.plebiscite-dialog textarea { min-height: 110px; resize: vertical; padding: 11px; border: 1px solid #DDD0AA; border-radius: 10px; font: inherit; }
.plebiscite-dialog-actions { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; margin-top: 5px; }
.plebiscite-dialog-actions button { min-height: 40px; }
body.dark-mode .plebiscite-card, body.dark-mode .plebiscite-dialog, body.dark-mode .board-activity { background: #2b2b2b; border-color: #484848; }
body.dark-mode .plebiscite-reason, body.dark-mode .plebiscite-progress > div { background: #34332F; border-color: #484848; }
body.dark-mode .plebiscite-change-preview { background: #34332F; }
body.dark-mode .plebiscite-target { background: #373526; }
body.dark-mode .plebiscite-target:hover { background: #444027; }
body.dark-mode .plebiscite-dialog textarea { background: #353535; color: white; border-color: #555; }
body.dark-mode .board-member-entry { border-color: #444; }
.board-page .feed-sort { margin: 8px 0 15px; padding: 0 2px; }
.board-page .feed-sort label { color: #8A8274; font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.board-page .feed-sort select { min-height: 38px; padding: 7px 34px 7px 13px; border: 1px solid #DDD5C7; border-radius: 999px; background-color: #FFFDF8; color: #514D45; font-size: 13px; font-weight: 700; box-shadow: 0 2px 7px rgba(0,0,0,.035); cursor: pointer; }
body.dark-mode .board-header-icon, body.dark-mode .board-leave-dialog { background: #353535; border-color: #4A4A4A; color: white; }
body.dark-mode .board-confirm-content p { color: #bbb; }

@media (max-width: 620px) {
    .board-page { padding: 0 12px; }
    .board-header { padding: 15px 13px 16px; }
    .board-title-bar { align-items: flex-start; gap: 8px; }
    .board-title-identity { gap: 9px; }
    .board-title-identity h1 { font-size: 21px; }
    .board-header .board-hero-copy { margin-top: 10px; padding-left: 0; }
    .board-header-actions { width: auto; }
    .board-header-actions > * { flex: 0 0 42px; }
    .board-hero-icon { width: 44px; height: 44px; flex-basis: 44px; font-size: 20px; }
    .board-tabs { overflow-x: auto; }
}

@media (min-width: 1380px) {
    body:not(.groups-rail-collapsed) .home-feed,
    body:not(.groups-rail-collapsed) main.main { transform: translateX(90px); }
    .home-feed, main.main { transition: transform .25s ease; }
}

@media (max-width: 1024px) {
    .groups-sidebar, .groups-sidebar.collapsed { width: 0; }
    .groups-panel, .groups-sidebar.collapsed .groups-panel { width: min(88vw, 400px, calc(100vw - 42px)); }
    .groups-sidebar.collapsed .groups-toggle { left: 0; border-left: 0; border-radius: 0 11px 11px 0; }
    body.groups-drawer-open .groups-toggle { left: min(88vw, 400px, calc(100vw - 42px)); border-left: 0; border-radius: 0 11px 11px 0; background: #fff; box-shadow: 5px 2px 10px rgba(0,0,0,.08); }
    body.dark-mode.groups-drawer-open .groups-toggle { background: #2b2b2b; border-color: #444; color: #FFD54F; }
}

@media (max-width: 520px) {
    .home-feed { margin-top: 20px; padding: 0 12px; }
    .groups-sidebar { width: calc(100vw - 18px); }
    .groups-panel { width: calc(100vw - 58px); }
    .groups-sidebar.collapsed { width: 40px; }
}

/* Final cascade guards for the mobile drawer and safe-area shell. */
@media (max-width: 1024px) {
    .groups-sidebar, .groups-sidebar.collapsed { width: 0; }
    .groups-panel, .groups-sidebar.collapsed .groups-panel { width: min(88vw, 400px, calc(100vw - 42px)); }
}
@media (max-width: 600px) {
    .home-feed { margin-top: 0; padding: calc(72px + env(safe-area-inset-top)) 10px calc(var(--mobile-nav-height) + 18px); }
    .board-page { padding: calc(72px + env(safe-area-inset-top)) 10px calc(var(--mobile-nav-height) + 18px); }
    .board-hero-icon { width: 54px; height: 54px; flex-basis: 54px; font-size: 23px; }
    body.dark-mode .comment-composer { background: transparent; border-color: transparent; }
}

/* Chat fills the viewport while its content stops exactly above navigation. */
html.messages-document {
    width: 100%;
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
}

body.messages-body,
body:has(.messages-page) {
    position: fixed;
    top: var(--chat-viewport-top, 0px);
    right: 0;
    bottom: auto;
    left: 0;
    width: 100%;
    height: var(--chat-viewport-height, 100dvh);
    overflow: hidden;
    overscroll-behavior: none;
}

body.has-bottom-nav:has(.messages-page) {
    padding-bottom: 0;
}

.messages-page {
    width: 100%;
    max-width: none;
    height: var(--chat-viewport-height, 100dvh);
    min-height: 0;
    margin: 0;
    padding: 0 0 104px;
    box-sizing: border-box;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.messages-page .conversation-sidebar,
.messages-page .conversation-panel {
    height: 100%;
    min-height: 0;
    overflow: hidden;
    overscroll-behavior: none;
}

.messages-page .conversation-list {
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
}

.messages-page .conversation-view {
    overflow: hidden;
    overscroll-behavior: none;
}

.messages-page .conversation-header,
.messages-page .chat-active-users,
.messages-page .message-reply-compose,
.messages-page .message-composer,
.messages-page .message-disabled,
.messages-page .message-send-state {
    overflow: hidden;
    overscroll-behavior: none;
    touch-action: none;
}

.messages-page .message-history {
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
    overflow-anchor: none;
}

.messages-page .message-composer textarea,
.messages-page .message-composer button,
.messages-page .conversation-header button,
.messages-page .conversation-header a {
    touch-action: manipulation;
}

.messages-page .message-composer textarea {
    overflow-y: hidden;
}

@media (min-width: 601px) and (max-width: 1024px) {
    .messages-page {
        padding-bottom: 90px;
    }
}

@media (max-width: 600px) {
    .messages-page {
        height: var(--chat-viewport-height, 100dvh);
        margin: 0;
        padding-bottom: var(--mobile-nav-height);
    }

    .message-composer {
        padding: 10px 12px;
    }

    html.chat-keyboard-open .bottom-nav,
    html.chat-keyboard-open .global-friends-shortcut,
    body:has(.messages-page #message-input:focus) .bottom-nav {
        display: none !important;
    }

    body:has(.messages-page #message-input:focus) .global-friends-shortcut { display: none !important; }

    html.chat-keyboard-open .messages-page,
    body:has(.messages-page #message-input:focus) .messages-page {
        padding-bottom: 0;
    }
}

@media (max-width: 720px) {
    body:has(.global-friends-shortcut) .conversation-sidebar-header,
    body:has(.global-friends-shortcut) .conversation-header { padding-right: 72px; }
}
body.auth-resolving .auth-card {
    visibility: hidden;
}

[data-auth-startup] {
    min-height: 100vh;
    display: grid;
    place-content: center;
    gap: 8px;
    padding: 24px;
    text-align: center;
}

[data-auth-startup] p {
    margin: 0;
}

[data-auth-startup] button {
    min-height: 44px;
    margin-top: 8px;
    padding: 0 18px;
    border: 0;
    border-radius: 12px;
    background: #FFD43B;
    color: inherit;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

@media (max-width: 600px) {
    .bucka-system-dialog.action-menu { inset: auto 0 0; width: 100%; max-width: 520px; margin: 0 auto; border-radius: 20px 20px 0 0; }
}

@media (max-width: 600px) and (display-mode: standalone) {
    :root { --mobile-nav-height: calc(66px + env(safe-area-inset-bottom)); }
    .bottom-nav { padding-right: max(8px, env(safe-area-inset-right)); padding-bottom: env(safe-area-inset-bottom); padding-left: max(8px, env(safe-area-inset-left)); }
}

@media (max-width: 600px) {
    html.pwa-standalone { --mobile-nav-height: calc(66px + env(safe-area-inset-bottom)); }
    html.pwa-standalone .bottom-nav { padding-right: max(8px, env(safe-area-inset-right)); padding-bottom: env(safe-area-inset-bottom); padding-left: max(8px, env(safe-area-inset-left)); }
}
.settings-row-with-detail > span:first-child { display: flex; flex-direction: column; align-items: flex-start; gap: .2rem; }
.settings-row-with-detail small { color: var(--muted-text, #687076); font-size: .78rem; font-weight: 500; }

/* Keep every shared identity image square and centered, including replaced
   <img> elements whose intrinsic mobile dimensions would otherwise leak in. */
.bucka-user-avatar,
.bucka-deska-icon,
.profile-pic,
.avatar,
.friend-avatar,
.comment-avatar,
.conversation-avatar,
.group-message-avatar,
.group-avatar,
.share-friend-avatar,
.home-recommendation-avatar,
.profile-featured-friend-avatar,
.admin-group-avatar {
    aspect-ratio: 1 / 1;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border-radius: 50%;
    border: 2px solid #D8CBA8;
    box-sizing: border-box;
    object-fit: contain;
    object-position: center;
    background-color: #F3EFDF;
}

body.dark-mode .bucka-user-avatar,
body.dark-mode .bucka-deska-icon,
body.dark-mode .profile-pic,
body.dark-mode .avatar,
body.dark-mode .friend-avatar,
body.dark-mode .comment-avatar,
body.dark-mode .conversation-avatar,
body.dark-mode .group-message-avatar,
body.dark-mode .group-avatar,
body.dark-mode .share-friend-avatar,
body.dark-mode .home-recommendation-avatar,
body.dark-mode .profile-featured-friend-avatar,
body.dark-mode .admin-group-avatar {
    border-color: #655F4E;
}

img.bucka-user-avatar {
    display: block;
}

.bucka-deska-icon img,
.group-avatar img,
.admin-group-avatar img,
.share-friend-avatar img,
.comment-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    background-color: #F3EFDF;
}

.bucka-deska-icon { display: grid; place-items: center; }
.bucka-user-avatar-fallback { text-align: center; }
.profile-pic { display: grid; place-items: center; }
/* User-selected identity images should remain fully visible inside their
   fixed square/circular frames instead of being zoomed and cropped. */
img.bucka-user-avatar,
.bucka-deska-icon img,
.group-avatar img,
.board-hero-icon img,
.post-group-icon img,
.admin-group-avatar img,
.conversation-avatar,
.profile-pic img,
.icon-image-picker-preview img {
    object-fit: contain !important;
    object-position: center;
    background-color: #F3EFDF;
}
body.dark-mode img.bucka-user-avatar,
body.dark-mode .bucka-deska-icon img,
body.dark-mode .group-avatar img,
body.dark-mode .board-hero-icon img,
body.dark-mode .post-group-icon img,
body.dark-mode .admin-group-avatar img,
body.dark-mode .conversation-avatar,
body.dark-mode .profile-pic img,
body.dark-mode .icon-image-picker-preview img { background-color: #353535; }
body:has(.fullscreen-image-viewer[open]) { overflow: hidden; }
.fullscreen-image-viewer { position: fixed; inset: 0; width: 100%; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; overflow: hidden; border: 0; background: #050505; color: #FFF; }
.fullscreen-image-viewer::backdrop { background: #050505; }
.image-viewer-stage { display: flex; width: 100%; height: 100%; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; touch-action: pan-x; }
.image-viewer-stage::-webkit-scrollbar { display: none; }
.image-viewer-slide { display: grid; min-width: 100%; height: 100%; flex: 0 0 100%; place-items: center; scroll-snap-align: center; scroll-snap-stop: always; }
.image-viewer-stage img { display: block; width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; object-position: center; user-select: none; -webkit-user-drag: none; }
.image-viewer-stage img.enter-right { animation: viewer-enter-right .18s ease-out; }
.image-viewer-stage img.enter-left { animation: viewer-enter-left .18s ease-out; }
@keyframes viewer-enter-right { from { opacity: .45; transform: translateX(30px); } }
@keyframes viewer-enter-left { from { opacity: .45; transform: translateX(-30px); } }
.image-viewer-close, .image-viewer-nav { position: fixed; z-index: 2; display: grid; width: 48px; height: 48px; place-items: center; border: 0; border-radius: 50%; background: rgba(28,28,28,.76); color: #FFF; backdrop-filter: blur(8px); cursor: pointer; }
.image-viewer-close { top: max(14px, env(safe-area-inset-top)); left: max(14px, env(safe-area-inset-left)); }
.image-viewer-close svg { width: 27px; height: 27px; }
.image-viewer-nav { top: 50%; transform: translateY(-50%); }
.image-viewer-nav.previous { left: max(12px, env(safe-area-inset-left)); }
.image-viewer-nav.next { right: max(12px, env(safe-area-inset-right)); }
.image-viewer-nav svg { width: 28px; height: 28px; }
.image-viewer-nav[hidden] { display: none; }
.image-viewer-counter { position: fixed; z-index: 2; top: max(18px, env(safe-area-inset-top)); left: 50%; min-height: 38px; padding: 8px 13px; transform: translateX(-50%); border-radius: 999px; background: rgba(28,28,28,.68); font-size: 14px; font-weight: 800; backdrop-filter: blur(8px); }
@media (max-width: 600px) { .image-viewer-nav { top: auto; bottom: max(18px, env(safe-area-inset-bottom)); transform: none; } }
@media (prefers-reduced-motion: reduce) { .image-viewer-stage img { animation: none !important; } }

/* Icon-only controls use their full button box as the alignment reference. */
#message-send-button,
#comment-send-button,
#comment-image-button,
#comment-camera-button,
#create-post-submit,
.post-top-icon,
.conversation-delete,
.conversation-back,
.bottom-nav-item,
.profile-chat-action,
.icon-only-action,
.compact-icon-button {
    display: inline-grid;
    place-items: center;
    padding: 0;
    line-height: 1;
}


button > svg,
.bottom-nav-item > svg,
.profile-chat-action > svg,
.icon-only-action > svg {
    display: block;
    margin: 0;
}

/* The paper-plane drawing is optically heavier on its right side. */
button > .lucide-send { transform: translateX(-1px); }

#message-send-button {
    width: 46px;
    height: 46px;
    align-self: center;
}

#comment-send-button,
#comment-image-button,
#comment-camera-button {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    align-self: center;
}
.comment-input #comment-send-button { width: 46px; height: 46px; flex: 0 0 46px; }

body:has(.content-edit-sheet[open]) { overflow: hidden; }
.content-edit-sheet .creation-sheet-panel { overscroll-behavior: none; will-change: transform; }
.content-edit-sheet .creation-sheet-scroll { overflow: hidden; overscroll-behavior: none; }
.content-edit-sheet .creation-sheet-panel, .content-edit-sheet .creation-sheet-scroll, .content-edit-sheet textarea { touch-action: none; }
.content-edit-sheet::backdrop { opacity: var(--sheet-backdrop-opacity, 1); transition: opacity .12s linear; }
.content-edit-sheet .content-edit-form { max-height: calc(100dvh - 70px - env(safe-area-inset-top)); overflow: hidden; }
.content-edit-sheet .content-edit-form textarea { max-height: min(38dvh, 320px); overflow: hidden; }

@media (max-width: 600px) {
    .conversation-header {
        background: #fff;
        border-bottom-color: #E9E9E9;
    }

    body.dark-mode .conversation-header {
        background: #2B2B2B;
        border-bottom-color: #444;
    }
}

/* Standalone mode gets one-third more navigation space while its controls
   retain the same touch-target size. */
@media (max-width: 600px) and (display-mode: standalone) {
    :root { --mobile-nav-height: calc(100px + env(safe-area-inset-bottom)); }
    .bottom-nav-pill { transform: translateY(-18px); }
}

@media (max-width: 600px) {
    html.pwa-standalone { --mobile-nav-height: calc(100px + env(safe-area-inset-bottom)); }
    html.pwa-standalone .bottom-nav-pill { transform: translateY(-18px); }
}

/* Dedicated creation pages */
.creation-page { width: min(720px, calc(100% - 32px)); margin: 28px auto 120px; }
.creation-card { padding: 26px; border: 1px solid #F0E5C4; border-radius: 18px; background: #fff; box-shadow: 0 8px 24px rgba(0,0,0,.06); }
.creation-heading { display: flex; align-items: center; gap: 13px; margin-bottom: 24px; }
.creation-heading .group-avatar { width: 46px; height: 46px; flex-basis: 46px; font-size: 24px; }
.creation-heading h1 { font-size: 25px; line-height: 1.2; }
.creation-heading p { margin-top: 3px; color: #777; font-size: 14px; }
.creation-form { display: grid; min-width: 0; gap: 9px; }
.creation-form > label:not(.group-privacy-option) { margin-top: 7px; font-weight: 750; }
.creation-form > label small { color: #777; font-weight: 500; }
.creation-form > input:not([type="checkbox"]), .creation-form > textarea { width: 100%; min-width: 0; max-width: 100%; min-height: 46px; box-sizing: border-box; padding: 11px 12px; overflow-x: hidden; border: 1px solid #DCCFAE; border-radius: 11px; outline: 0; background: #FFFDF8; background-clip: padding-box; color: inherit; caret-color: #9A7200; font: inherit; -webkit-appearance: none; appearance: none; }
.creation-form > textarea { min-height: 130px; resize: none; overflow-wrap: anywhere; }
.creation-form > input:not([type="checkbox"]):focus, .creation-form > textarea:focus { border-color: #C69200; box-shadow: inset 0 0 0 1px #C69200; }
.creation-form fieldset { min-width: 0; max-height: 44vh; margin-top: 8px; padding: 12px; overflow-y: auto; border: 1px solid #E5D9BB; border-radius: 13px; }
.creation-form legend { padding: 0 5px; font-weight: 750; }
.creation-friend-list { display: grid; gap: 5px; }
.creation-friend-row { display: grid; grid-template-columns: 48px minmax(0,1fr) auto; align-items: center; gap: 11px; min-height: 58px; padding: 5px 7px; border-radius: 10px; cursor: pointer; }
.creation-friend-row:hover { background: #FFF4CC; }
.creation-friend-row input { width: 21px; height: 21px; accent-color: #B77900; }
.creation-error { margin: 7px 0 0; padding: 10px 12px; border-radius: 10px; background: #FDE8E8; color: #A32121; font-weight: 650; }
.creation-error[hidden], .group-privacy-option[hidden] { display: none; }
.creation-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 14px; }
.creation-actions.single { grid-template-columns: 1fr; }
.icon-image-picker { position: relative; display: block; width: 88px; height: 88px; margin: 8px auto 15px; cursor: pointer; }
.icon-image-picker.compact { width: 72px; height: 72px; margin-block: 4px 14px; }
.icon-image-picker-preview { display: grid; width: 100%; height: 100%; place-items: center; overflow: hidden; border: 2px solid #E4D8B8; border-radius: 50%; background: #FFF4CC; color: #5E5129; }
.icon-image-picker-preview > *, .icon-image-picker-preview img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.icon-image-picker-preview svg { width: 42%; height: 42%; }
.icon-image-picker-plus { position: absolute; right: -2px; bottom: 2px; display: grid; width: 30px; height: 30px; place-items: center; border: 3px solid #FFFDF8; border-radius: 50%; background: #B77900; color: #fff; font-size: 22px; font-weight: 800; line-height: 1; box-shadow: 0 2px 7px rgba(0,0,0,.16); }
body.dark-mode .icon-image-picker-preview { border-color: #555; background: #3A3526; color: #E8DDAF; }
body.dark-mode .icon-image-picker-plus { border-color: #242424; background: #22A559; }
.creation-actions > * { min-height: 46px; }
body.dark-mode .creation-card { background: #2b2b2b; border-color: #484848; }
body.dark-mode .creation-heading p, body.dark-mode .creation-form > label small { color: #bbb; }
body.dark-mode .creation-form > input:not([type="checkbox"]), body.dark-mode .creation-form > textarea { background: #333; border-color: #555; color: #fff; }
body.dark-mode .creation-form fieldset { border-color: #555; }
body.dark-mode .creation-friend-row:hover { background: #3b3525; }

@media (max-width: 600px) {
    .creation-page { width: 100%; margin: 0; padding: 14px 10px calc(var(--mobile-nav-height) + 18px); }
    .creation-card { min-height: calc(100dvh - var(--mobile-nav-height) - 28px); padding: 18px 14px; border: 0; border-radius: 0; box-shadow: none; }
    .creation-form fieldset { max-height: none; }
}

/* Full-page creation sheets. Drag the handle down to dismiss. */
.creation-sheet { position: fixed; inset: 0; width: 100%; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; overflow: hidden; border: 0; background: transparent; color: inherit; }
.creation-sheet::backdrop { background: rgba(30,25,12,.34); backdrop-filter: blur(2px); }
.creation-sheet-panel { width: 100%; height: 100%; overflow: hidden; contain: paint; isolation: isolate; background: #FFFDF8; transition: transform .22s ease; }
.creation-sheet[open] .creation-sheet-panel { animation: creation-sheet-rise .25s ease-out; }
@keyframes creation-sheet-rise { from { transform: translateY(100%); } to { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .creation-sheet[open] .creation-sheet-panel { animation: none; } }
.creation-sheet-grabber { display: grid; place-items: center; height: calc(34px + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top); background: #FFF0B3; cursor: grab; touch-action: none; user-select: none; }
.creation-sheet-grabber:active { cursor: grabbing; }
.creation-sheet-grabber span { width: 48px; height: 5px; border-radius: 999px; background: #9A8336; }
.creation-sheet-scroll { position: relative; width: min(720px, 100%); height: calc(100% - 34px - env(safe-area-inset-top)); box-sizing: border-box; margin: 0 auto; padding: 18px 22px calc(var(--mobile-nav-height, 66px) + 22px); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
body.dark-mode .creation-sheet-panel { background: #242424; }
body.dark-mode .creation-sheet-grabber { background: #4A4122; }
body.dark-mode .creation-sheet-grabber span { background: #B9A45A; }
@media (max-width: 600px) { .creation-sheet-scroll { padding: 16px 14px calc(var(--mobile-nav-height) + 18px); } }

.bucka-onboarding { width: min(760px, calc(100% - 28px)); max-width: none; height: min(850px, calc(100dvh - 28px)); max-height: none; padding: 0; overflow: hidden; border: 0; border-radius: 24px; background: transparent; color: inherit; }
.bucka-onboarding::backdrop { background: rgba(28,24,14,.58); backdrop-filter: blur(4px); }
.bucka-onboarding-panel { display: grid; grid-template-rows: minmax(0, 1fr) 64px; width: 100%; height: 100%; overflow: hidden; border: 1px solid #E8DDBF; border-radius: 24px; background: #FFFDF8; box-shadow: 0 24px 70px rgba(35,27,5,.28); }
.bucka-onboarding-content { display: grid; min-height: 0; align-content: start; padding: clamp(25px, 5vh, 48px) clamp(18px, 5vw, 52px) 20px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
.bucka-onboarding-content > header { width: min(540px, 100%); margin: 0 auto 21px; text-align: center; }
.bucka-onboarding-content header h2 { margin: 4px 0 7px; font-size: clamp(25px, 4vw, 34px); line-height: 1.15; }
.bucka-onboarding-content header p { margin: 0; color: #716B5C; font-size: 15px; line-height: 1.5; }
.bucka-onboarding-kicker { color: #9A7200; font-size: 12px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.bucka-onboarding-footer { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; padding: 9px clamp(14px, 4vw, 30px) calc(9px + env(safe-area-inset-bottom)); border-top: 1px solid #E9DEC2; background: #FFF9E8; }
.bucka-onboarding-left, .bucka-onboarding-right { display: flex; align-items: center; gap: 8px; }
.bucka-onboarding-right { justify-content: flex-end; }
.bucka-onboarding-counter { min-width: 42px; color: #7A692E; text-align: center; font-size: 14px; }
.onboarding-primary, .onboarding-skip { min-height: 42px; padding: 9px 14px; border: 0; border-radius: 11px; cursor: pointer; font: inherit; font-size: 14px; font-weight: 800; }
.onboarding-primary { background: #FFD43B; color: #332B0A; box-shadow: 0 3px 9px rgba(154,114,0,.14); }
.onboarding-primary:disabled { opacity: .45; cursor: default; box-shadow: none; }
.onboarding-skip { background: transparent; color: #766A49; }
.first-friend-search { display: flex; align-items: center; gap: 8px; min-width: 0; margin-bottom: 12px; padding: 0 12px; border: 1px solid #DFD2AC; border-radius: 13px; background: white; color: #75662D; }
.first-friend-search:focus-within { border-color: #C69200; box-shadow: inset 0 0 0 1px #C69200; }
.first-friend-search svg { width: 19px; height: 19px; flex: 0 0 19px; }
.first-friend-search input { min-width: 0; width: 100%; height: 46px; padding: 0; border: 0; outline: 0; background: transparent; color: inherit; caret-color: #9A7200; font: inherit; }
.first-friend-results { display: grid; min-height: 92px; max-height: min(48dvh, 430px); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; border: 1px solid #EFE5CB; border-radius: 14px; background: white; }
.first-friend-row { display: flex; min-width: 0; align-items: center; gap: 9px; padding: 9px 10px; border-bottom: 1px solid #F1E9D5; }
.first-friend-row:last-child { border-bottom: 0; }
.first-friend-person { display: flex; min-width: 0; flex: 1; align-items: center; gap: 10px; color: inherit; }
.first-friend-row strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.first-friend-avatar { width: 42px; height: 42px; flex: 0 0 42px; }
.first-friend-row > button { display: inline-flex; min-height: 38px; padding: 7px 10px; align-items: center; gap: 5px; border: 0; border-radius: 10px; background: #FFD43B; color: #3D340E; font: inherit; font-size: 13px; font-weight: 750; cursor: pointer; }
.first-friend-row > button svg { width: 17px; height: 17px; }
.first-friend-row > button.sent { background: #DDF5E5; color: #176B36; }
.first-friend-empty { margin: auto; padding: 25px 15px; color: #777; text-align: center; }
.onboarding-deska-list { display: grid; width: min(590px, 100%); max-height: min(55dvh, 500px); margin: 0 auto; gap: 9px; overflow-y: auto; overscroll-behavior: contain; }
.onboarding-deska-row { display: grid; grid-template-columns: 50px minmax(0, 1fr) 24px; min-width: 0; align-items: center; gap: 11px; padding: 11px 13px; border: 1px solid #E5D8B5; border-radius: 15px; background: white; color: inherit; cursor: pointer; text-align: left; }
.onboarding-deska-row > span { display: grid; min-width: 0; gap: 2px; }
.onboarding-deska-row strong, .onboarding-deska-row small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.onboarding-deska-row small { color: #7B7567; }
.onboarding-deska-row > svg { width: 21px; opacity: 0; color: #177E3D; }
.onboarding-deska-row.selected { border-color: #D0A800; background: #FFF7D7; box-shadow: inset 0 0 0 1px #D0A800; }
.onboarding-deska-row.selected > svg { opacity: 1; }
.onboarding-deska-icon { width: 50px; height: 50px; }
.onboarding-feature-step { display: grid; width: min(530px, 100%); margin: auto; place-items: center; text-align: center; }
.onboarding-feature-step header { margin-top: 20px; }
.onboarding-feature-icon { display: grid; width: 94px; height: 94px; place-items: center; border-radius: 28px; background: #FFF0B3; color: #806200; box-shadow: 0 10px 30px rgba(128,98,0,.12); }
.onboarding-feature-icon svg { width: 45px; height: 45px; }
.onboarding-step-error { min-height: 20px; margin: 15px 0 0; color: #B42318; font-size: 13px; }
body.dark-mode .bucka-onboarding-panel, body.dark-mode .first-friend-results { border-color: #4F4A3E; background: #292929; }
body.dark-mode .bucka-onboarding-footer { border-color: #494333; background: #25231D; }
body.dark-mode .bucka-onboarding-content header p, body.dark-mode .first-friend-empty { color: #BBB; }
body.dark-mode .bucka-onboarding-kicker, body.dark-mode .bucka-onboarding-counter { color: #E0C45D; }
body.dark-mode .first-friend-search { border-color: #555; background: #333; color: #E8D479; }
body.dark-mode .first-friend-row { border-color: #444; }
body.dark-mode .first-friend-row > button.sent { background: #244F34; color: #AEE8C0; }
body.dark-mode .onboarding-deska-row { border-color: #505050; background: #333; }
body.dark-mode .onboarding-deska-row small { color: #BBB; }
body.dark-mode .onboarding-deska-row.selected { border-color: #D4B235; background: #443B1C; }
body.dark-mode .onboarding-feature-icon { background: #4A4122; color: #FFE27A; }
body.dark-mode .onboarding-skip { color: #C9C2AF; }

@media (max-width: 600px) {
    .bucka-onboarding { width: calc(100% - 12px); height: calc(100dvh - 12px); border-radius: 20px; }
    .bucka-onboarding-panel { grid-template-rows: minmax(0, 1fr) calc(62px + env(safe-area-inset-bottom)); border-radius: 20px; }
    .bucka-onboarding-content { padding: 25px 12px 14px; }
    .bucka-onboarding-content > header { margin-bottom: 16px; }
    .bucka-onboarding-footer { padding-inline: 9px; }
    .onboarding-primary, .onboarding-skip { padding-inline: 10px; font-size: 13px; }
    .first-friend-results { max-height: calc(100dvh - 285px - env(safe-area-inset-bottom)); }
    .onboarding-deska-list { max-height: calc(100dvh - 245px - env(safe-area-inset-bottom)); }
}

/* Full-page group settings sheet. */
#chat-group-info-content { display: grid; align-content: start; gap: 14px; width: min(620px, 100%); padding: 24px 22px calc(var(--mobile-nav-height, 66px) + 22px); }
#chat-group-info-content .icon-image-picker { margin-bottom: 4px; }
#chat-group-info-content [data-rename-group] { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 9px; padding: 14px; border: 1px solid #E8DEC5; border-radius: 14px; background: #fff; box-shadow: 0 4px 14px rgba(55,42,8,.05); }
#chat-group-info-content [data-rename-group] input, #chat-group-info-content select { width: 100%; min-width: 0; min-height: 44px; padding: 9px 11px; border: 1px solid #D9D1BF; border-radius: 10px; background: #FFFDF8; color: inherit; font: inherit; }
#chat-group-info-content [data-rename-group] button { min-height: 44px; padding-inline: 14px; background: #FFD54F; color: #302A1A; font-weight: 800; }
.chat-member-heading { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; padding: 0 4px; }
.chat-member-heading strong { font-size: 18px; }
.chat-member-heading small { display: grid; min-width: 27px; height: 27px; place-items: center; border-radius: 999px; background: #FFF0B3; color: #6A5718; font-weight: 800; }
#chat-group-info-content .chat-member-list { gap: 0; overflow: hidden; border: 1px solid #E8DEC5; border-radius: 14px; background: #fff; }
#chat-group-info-content .chat-member-row { min-width: 0; padding: 11px 12px; border-bottom: 1px solid #F0E8D4; }
#chat-group-info-content .chat-member-row:last-child { border-bottom: 0; }
#chat-group-info-content .chat-member-row > span:not(.chat-member-actions) { min-width: 0; }
#chat-group-info-content .chat-member-actions { flex-wrap: wrap; justify-content: flex-end; }
#chat-group-info-content .chat-add-member { display: grid; gap: 6px; font-weight: 750; }
#chat-group-info-content .group-leave { width: 100%; min-height: 46px; margin-top: 6px; font-weight: 800; }
body.dark-mode #chat-group-info-content [data-rename-group], body.dark-mode #chat-group-info-content .chat-member-list { border-color: #494949; background: #2F2F2F; }
body.dark-mode #chat-group-info-content [data-rename-group] input, body.dark-mode #chat-group-info-content select { border-color: #555; background: #242424; color: #fff; }
body.dark-mode .chat-member-heading small { background: #4A4122; color: #F0D978; }
@media (max-width: 520px) {
    #chat-group-info-content { gap: 12px; padding: 16px 14px calc(var(--mobile-nav-height) + 18px); }
    #chat-group-info-content [data-rename-group] { grid-template-columns: 1fr; }
    #chat-group-info-content .chat-member-row { align-items: flex-start; }
    #chat-group-info-content .chat-member-actions { max-width: 105px; }
}

/* Feed cards sit clearly above the warm page background, while keeping the
   vertical rhythm calm enough for long scrolling sessions. */
#posts-container > .post-card {
    margin-bottom: 18px;
    border: 1px solid #E3D3AA;
    border-radius: 17px;
    background: #FFF;
    box-shadow: 0 7px 22px rgba(78, 59, 13, .10), 0 1px 3px rgba(78, 59, 13, .08);
    content-visibility: auto;
    contain-intrinsic-size: auto 430px;
}
#posts-container > .post-card:hover {
    border-color: #D6BD76;
    box-shadow: 0 10px 26px rgba(78, 59, 13, .13), 0 2px 5px rgba(78, 59, 13, .08);
}
body.dark-mode #posts-container > .post-card {
    border-color: #5B5135;
    background: #2B2B2B;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .30), 0 1px 3px rgba(0, 0, 0, .28);
}
body.dark-mode #posts-container > .post-card:hover {
    border-color: #82703E;
    box-shadow: 0 11px 28px rgba(0, 0, 0, .38);
}

/* Feed browsing: stronger hierarchy, media-led cards and compact discovery. */
#posts-container > .post-card[data-card-href] { cursor: pointer; transform-origin: center; transition: transform .14s ease, background-color .14s ease, border-color .18s ease, box-shadow .18s ease; }
#posts-container > .post-card[data-card-href]:active { transform: scale(.992); background: #FFFCF3; }
#posts-container > .post-card .post-group-source { display: inline-flex; width: fit-content; align-items: center; gap: 6px; margin-bottom: 7px; padding: 4px 8px 4px 5px; border-radius: 999px; background: #FFF6D4; color: #765C08; font-size: 12px; font-weight: 800; text-decoration: none; }
#posts-container > .post-card .post-group-icon { width: 25px; height: 25px; flex: 0 0 25px; }
#posts-container > .post-card .post-header { margin-bottom: 7px; }
#posts-container > .post-card .username { font-size: 15px; font-weight: 820; }
#posts-container > .post-card .timestamp { color: #999; }
#posts-container > .post-card .post-link { display: block; color: inherit; }
#posts-container > .post-card .post-title { margin: 4px 0 6px; color: #211E17; font-size: clamp(20px, 2.4vw, 23px); font-weight: 850; line-height: 1.18; letter-spacing: -.015em; }
#posts-container > .post-card .post-content { margin: 0; color: #6C675C; font-size: 14px; line-height: 1.5; }
#posts-container > .post-card .feed-post-preview { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
#posts-container > .post-card .feed-post-preview.expanded { display: block; overflow: visible; }
.post-read-more { margin: 4px 0 0; padding: 2px 0; border: 0; background: transparent; color: #956B00; cursor: pointer; font: inherit; font-size: 13px; font-weight: 800; }
.post-read-more[hidden] { display: none; }
#posts-container > .post-card .post-feed-image-wrap { aspect-ratio: 16 / 10; height: auto; margin: 11px 0 9px; border-radius: 15px; }
#posts-container > .post-card .divider { margin: 9px 0 7px; }
#posts-container > .post-card .post-actions { opacity: .82; }
#posts-container > .post-card .post-actions:focus-within, #posts-container > .post-card:hover .post-actions { opacity: 1; }

.feed-discovery-strip { margin: 2px 0 18px; padding: 13px; border: 1px solid #E7D8AE; border-radius: 16px; background: #FFF9E8; box-shadow: 0 5px 16px rgba(78,59,13,.07); }
.feed-discovery-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; color: #5D4A0B; }
.feed-discovery-heading strong { font-size: 15px; }
.feed-discovery-heading span { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 50%; background: #FFD54F; color: #332B14; }
.feed-discovery-heading svg { width: 16px; height: 16px; }
.feed-discovery-items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.feed-discovery-item { display: grid; min-width: 0; gap: 3px; padding: 10px; border: 1px solid #E9DDBD; border-radius: 11px; background: #FFF; color: inherit; text-decoration: none; transition: transform .14s ease, background .14s ease; }
.feed-discovery-item:active { transform: scale(.98); }
.feed-discovery-item small { overflow: hidden; color: #967000; font-size: 10px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.feed-discovery-item strong { overflow: hidden; font-size: 13px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.feed-discovery-item span { color: #8A867D; font-size: 10px; }

.feed-skeleton { gap: 18px; }
.feed-skeleton-card { padding: 14px; border: 1px solid #E7DDBF; border-radius: 17px; background: #FFF; }
.feed-skeleton-head { display: flex; align-items: center; gap: 9px; }
.feed-skeleton-head > span { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 50%; }
.feed-skeleton-head > div { display: grid; width: min(180px, 48%); gap: 6px; }
.feed-skeleton-head i:first-child { height: 11px; }
.feed-skeleton-head i:last-child { width: 55%; height: 8px; }
.feed-skeleton-card > b { display: block; width: 68%; height: 20px; margin: 13px 0 9px; }
.feed-skeleton-card > em { display: block; aspect-ratio: 16 / 8; width: 100%; border-radius: 14px; }
.feed-skeleton-actions { display: flex; gap: 8px; margin-top: 11px; }
.feed-skeleton-actions i { width: 54px; height: 30px; border-radius: 9px; }
.feed-skeleton-card span, .feed-skeleton-card i, .feed-skeleton-card b, .feed-skeleton-card em { background: linear-gradient(100deg,#F4EEDC 20%,#FFF9E9 38%,#F4EEDC 56%); background-size: 220% 100%; animation: bucka-skeleton 1.15s ease-in-out infinite; }
body.dark-mode #posts-container > .post-card[data-card-href]:active { background: #302E28; }
body.dark-mode #posts-container > .post-card .post-group-source { background: #403A27; color: #F0D978; }
body.dark-mode #posts-container > .post-card .post-title { color: #FFF; }
body.dark-mode #posts-container > .post-card .post-content { color: #C9C7C1; }
body.dark-mode .post-read-more { color: #F0D978; }
body.dark-mode .feed-discovery-strip { border-color: #554B31; background: #302D24; }
body.dark-mode .feed-discovery-heading { color: #F0D978; }
body.dark-mode .feed-discovery-item { border-color: #4B4638; background: #292929; }
body.dark-mode .feed-discovery-item small { color: #F0D978; }
body.dark-mode .feed-skeleton-card { border-color: #4B4638; background: #2B2B2B; }
body.dark-mode .feed-skeleton-card span, body.dark-mode .feed-skeleton-card i, body.dark-mode .feed-skeleton-card b, body.dark-mode .feed-skeleton-card em { background-image: linear-gradient(100deg,#303030 20%,#3B3B3B 38%,#303030 56%); }
@media (max-width: 600px) {
    #posts-container > .post-card {
        margin-bottom: 14px;
        padding: 13px 12px;
        border-radius: 15px;
        box-shadow: 0 5px 16px rgba(78, 59, 13, .10), 0 1px 3px rgba(78, 59, 13, .07);
    }
    body.dark-mode #posts-container > .post-card { box-shadow: 0 6px 18px rgba(0, 0, 0, .30); }
    #posts-container > .post-card .post-feed-image-wrap { width: calc(100% + 16px); aspect-ratio: 4 / 3; margin-right: -8px; margin-left: -8px; border-radius: 13px; }
    #posts-container > .post-card .post-title { font-size: 20px; }
    .feed-discovery-strip { margin-bottom: 14px; padding: 12px; }
    .feed-discovery-items { display: flex; overflow-x: auto; padding-bottom: 2px; scroll-snap-type: x proximity; scrollbar-width: none; }
    .feed-discovery-items::-webkit-scrollbar { display: none; }
    .feed-discovery-item { min-width: min(72vw, 230px); scroll-snap-align: start; }
    .feed-skeleton-card { padding: 12px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; }
    .feed-skeleton > div { animation: none; }
}

/* Rich text is intentionally enabled for post tags/mentions and chat links. */
.bucka-text-tag, .bucka-text-link { position: relative; z-index: 1; color: #9A6800; font-weight: 750; text-decoration: none; }
.bucka-text-tag:hover, .bucka-text-link:hover { text-decoration: underline; }
.message-bubble .bucka-text-tag, .message-bubble .bucka-text-link { color: #126B8A; }
body.dark-mode .bucka-text-tag, body.dark-mode .bucka-text-link { color: #F0D978; }
body.dark-mode .message-bubble .bucka-text-tag, body.dark-mode .message-bubble .bucka-text-link { color: #8ED7F0; }

/* Custom create-post destination picker; avoids the platform-native select. */
.posting-destination-control { overflow: visible; }
.post-destination-picker { position: relative; min-width: 0; }
#post-destination-trigger { display: inline-flex; max-width: min(320px, 68vw); align-items: center; gap: 5px; padding: 3px 7px; border: 1px solid #E8D9AC; border-radius: 9px; background: #FFF9E8; color: #795D00; cursor: pointer; font: inherit; font-size: 13px; font-weight: 800; }
#post-destination-trigger span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#post-destination-trigger svg { width: 15px; height: 15px; flex: 0 0 15px; }
.post-destination-menu { position: absolute; z-index: 50; top: calc(100% + 7px); left: 0; width: min(330px, calc(100vw - 38px)); max-height: min(52vh, 390px); padding: 6px; overflow-y: auto; border: 1px solid #E4D5A9; border-radius: 13px; background: #FFF; box-shadow: 0 14px 35px rgba(51,40,10,.20); }
.post-destination-menu[hidden] { display: none; }
.post-destination-menu button { display: grid; width: 100%; grid-template-columns: 34px minmax(0,1fr) 18px; align-items: center; gap: 9px; min-height: 48px; padding: 7px 9px; border: 0; border-radius: 9px; background: transparent; color: #29251B; cursor: pointer; text-align: left; }
.post-destination-menu button:hover, .post-destination-menu button.selected { background: #FFF4CC; }
.post-destination-menu button > span:nth-child(2) { display: grid; min-width: 0; }
.post-destination-menu button strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.post-destination-menu button small { color: #8A8068; font-size: 10px; }
.post-destination-menu button > svg { visibility: hidden; width: 17px; height: 17px; color: #806100; }
.post-destination-menu button.selected > svg { visibility: visible; }
.post-destination-option-icon, .post-destination-icon { display: grid; width: 32px; height: 32px; place-items: center; overflow: hidden; border-radius: 50%; background: #FFF4CC; }
.post-destination-option-icon > svg { width: 17px; height: 17px; }
body.dark-mode #post-destination-trigger { border-color: #5A5137; background: #373329; color: #F0D978; }
body.dark-mode .post-destination-menu { border-color: #4D4737; background: #292929; }
body.dark-mode .post-destination-menu button { color: #FFF; }
body.dark-mode .post-destination-menu button:hover, body.dark-mode .post-destination-menu button.selected { background: #464027; }

/* Keep every profile information block centered consistently. */
.profile-card .profile-bio, .profile-card .profile-bio p,
.profile-card .profile-detail, .profile-card .profile-featured-friends-empty { text-align: center; }
.profile-card .profile-detail { justify-items: center; }
.profile-card .profile-featured-friends-heading { text-align: left; }

/* Forwarded messages retain their original content but are clearly labelled. */
.message-bubble { position: relative; }
.message-bubble.forwarded { padding-top: 25px; }
.message-forwarded-icon { position: absolute; top: 7px; right: 9px; display: grid; width: 18px; height: 18px; place-items: center; color: #746B57; opacity: .78; }
.message-forwarded-icon svg { width: 15px; height: 15px; }
body.dark-mode .message-forwarded-icon { color: #D4CDBE; }

/* On profile and chat pages, local actions sit beside the global friends shortcut. */
.profile-card.viewing-other-profile .profile-chat-action { position: fixed; z-index: 990; top: max(14px, env(safe-area-inset-top)); right: calc(max(14px, env(safe-area-inset-right)) + 58px); width: 46px; height: 46px; border: 1px solid #DFC45F; background: #FFF4CC; color: #5F4C08; box-shadow: 0 5px 16px rgba(65,48,0,.16); }
.profile-card.viewing-other-profile .profile-chat-action:hover { background: #FFD54F; }
body.dark-mode .profile-card.viewing-other-profile .profile-chat-action { border-color: #746126; background: #3E3825; color: #F2D76B; box-shadow: 0 6px 18px rgba(0,0,0,.3); }
body:has(.messages-page) .new-chat-menu-wrap { margin-right: 56px; }
body:has(.messages-page) .new-chat-group { width: 46px; height: 46px; min-height: 46px; border: 1px solid #DFC45F; background: #FFF4CC; color: #5F4C08; box-shadow: 0 5px 16px rgba(65,48,0,.16); }
body:has(.messages-page) .new-chat-group:hover { background: #FFD54F; }
body.dark-mode:has(.messages-page) .new-chat-group { border-color: #746126; background: #3E3825; color: #F2D76B; }

/* Shared circular crop tool for profile, deska and chat-group identity images. */
.bucka-image-cropper { width: min(430px, calc(100% - 24px)); max-width: none; padding: 0; overflow: visible; border: 0; border-radius: 20px; background: transparent; }
.bucka-image-cropper::backdrop { background: rgba(10,10,10,.66); backdrop-filter: blur(2px); }
.bucka-image-cropper-panel { padding: 18px; border: 1px solid #E4D6AF; border-radius: 20px; background: #FFF; color: #29251B; box-shadow: 0 20px 55px rgba(0,0,0,.28); text-align: center; }
.bucka-image-cropper-panel h2 { margin: 0 0 5px; font-size: 21px; }
.bucka-image-cropper-panel > p { margin: 0 0 14px; color: #777; font-size: 13px; }
.bucka-image-cropper-stage { position: relative; width: 100%; aspect-ratio: 1; overflow: hidden; border-radius: 15px; background: #171717; cursor: move; touch-action: none; user-select: none; }
.bucka-image-cropper-stage canvas { display: block; width: 100%; height: 100%; }
.bucka-image-crop-selection { position: absolute; border: 3px solid #FFF; border-radius: 50%; box-shadow: 0 0 0 999px rgba(0,0,0,.58), 0 0 0 1px rgba(0,0,0,.3) inset; pointer-events: none; }
.bucka-image-cropper-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 14px; }
.bucka-image-cropper-actions button { min-height: 44px; border: 1px solid #E5DDC8; border-radius: 11px; background: #FFF; color: #666; cursor: pointer; font: inherit; font-weight: 750; }
.bucka-image-cropper-actions button.confirm { border-color: #1D934A; background: #22A559; color: #FFF; }
body.dark-mode .bucka-image-cropper-panel { border-color: #4B473B; background: #292929; color: #FFF; }
body.dark-mode .bucka-image-cropper-panel > p { color: #BBB; }
body.dark-mode .bucka-image-cropper-actions button { border-color: #555; background: #383838; color: #DDD; }
body.dark-mode .bucka-image-cropper-actions button.confirm { border-color: #238F4A; background: #22A559; color: #FFF; }
@media (max-width: 600px) {
    .bucka-image-cropper { width: min(410px, calc(100% - 18px)); }
    .bucka-image-cropper-panel { padding: 14px; border-radius: 17px; }
}

/* Friend mention suggestions shared by post and message composers. */
.bucka-mention-suggestions { position: fixed; z-index: 4100; max-height: min(300px, 42dvh); padding: 6px; overflow-y: auto; border: 1px solid #E3D5AA; border-radius: 13px; background: #FFF; box-shadow: 0 14px 36px rgba(45,35,10,.22); }
.bucka-mention-suggestions button { display: flex; width: 100%; align-items: center; gap: 9px; min-height: 48px; padding: 7px 9px; border: 0; border-radius: 9px; background: transparent; color: #29251B; cursor: pointer; text-align: left; }
.bucka-mention-suggestions button:hover, .bucka-mention-suggestions button[aria-selected="true"] { background: #FFF4CC; }
.bucka-mention-avatar { width: 34px; height: 34px; flex: 0 0 34px; }
.bucka-mention-suggestions button > span { display: grid; min-width: 0; }
.bucka-mention-suggestions strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bucka-mention-suggestions small { color: #888; font-size: 10px; }
body.dark-mode .bucka-mention-suggestions { border-color: #514A36; background: #292929; }
body.dark-mode .bucka-mention-suggestions button { color: #FFF; }
body.dark-mode .bucka-mention-suggestions button:hover, body.dark-mode .bucka-mention-suggestions button[aria-selected="true"] { background: #464027; }

/* Final profile alignment guard for both profile displays and editing. */
.profile-card .profile-card-top { width: 100%; align-items: center !important; justify-content: center; text-align: center; }
.profile-card .profile-card-top .profile-pic, .profile-card .avatar-edit-wrapper { margin-right: auto; margin-left: auto; }
.profile-card .profile-identity { width: 100%; align-items: center; text-align: center; }
body:has(#edit-username) .profile-card-top { flex-direction: column; }
body:has(#edit-username) .profile-identity { max-width: 430px; }
body:has(#edit-username) #edit-username { text-align: center; }

/* Header shortcuts occupy one row immediately beside the global friends action. */
.profile-card.viewing-other-profile .profile-chat-action { right: max(68px, calc(54px + env(safe-area-inset-right))); }
body:has(.messages-page) .new-chat-menu-wrap { position: fixed; z-index: 990; top: max(14px, env(safe-area-inset-top)); right: max(68px, calc(54px + env(safe-area-inset-right))); margin: 0; }
body:has(.messages-page) .new-chat-menu { top: calc(100% + 8px); }

/* Group information opens directly from the group name or icon. */
.chat-group-info-identity { display: grid; justify-items: center; gap: 10px; text-align: center; }
.chat-group-info-identity [data-rename-group] { width: 100%; }
.chat-group-info-identity.readonly { grid-template-columns: auto minmax(0,1fr); justify-items: start; align-items: center; padding: 14px; border: 1px solid #E8DEC5; border-radius: 14px; background: #FFF; text-align: left; }
.chat-group-info-identity.readonly h2 { margin: 0; font-size: 20px; }
.chat-group-info-identity.readonly span { color: #777; font-size: 12px; }
.chat-group-info-icon { width: 72px; height: 72px; flex: 0 0 72px; }
#chat-group-info-content { overflow-y: auto !important; touch-action: pan-y; -webkit-overflow-scrolling: touch; }
#chat-group-info-content .chat-member-list { max-height: min(52dvh, 520px); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; }
body.dark-mode .chat-group-info-identity.readonly { border-color: #494949; background: #2F2F2F; }
body.dark-mode .chat-group-info-identity.readonly span { color: #BBB; }

/* Success feedback never blocks the next action or opens a full backdrop. */
.action-confirmation-dialog {
    inset: auto 16px calc(var(--mobile-nav-height, 66px) + 16px) 16px;
    width: min(390px, calc(100% - 32px));
    margin: 0 auto;
    border-radius: 14px;
    pointer-events: none;
    box-shadow: 0 10px 32px rgba(0, 0, 0, .22);
    animation: bucka-toast-in .16s ease-out;
    z-index: 2300;
}
.action-confirmation-content {
    min-height: 0;
    flex-direction: row;
    justify-content: flex-start;
    gap: 10px;
    padding: 12px 14px;
}
.action-confirmation-content svg { width: 25px; height: 25px; flex: 0 0 25px; }
.action-confirmation-content strong { font-size: 15px; line-height: 1.35; text-align: left; }
@keyframes bucka-toast-in { from { opacity: 0; transform: translateY(12px); } }