/*
 * CIRCLES - visual theme (loaded LAST, after bootstrap/style/media/llyne.css).
 *
 * Brand: the CIRCLES mark (24 nodes joined through the centre - everyone
 * connected through one circle) on a "Liquid Glass" product design:
 * translucent, blurred, light-catching surfaces floating over a soft blue
 * mesh, with one accent gradient (Circle Blue -> Aqua) for actions and your
 * own chat bubbles. Part 1 sets layout and components, part 2 (bottom of the
 * file) applies the glass materials. Only presentation lives here.
 */

:root {
    --accent: #3b5bff;          /* Circle Blue */
    --accent-2: #22c3ee;        /* Aqua */
    --accent-grad: linear-gradient(135deg, #3b5bff 0%, #2f86f5 55%, #22c3ee 100%);
    --brand: #3b5bff;
    --brand-soft: #e7edff;
    --brand-ink: #ffffff;       /* text on the accent */
    --ink: #0b1220;
    --muted: #5d6779;
    --line: rgba(15, 23, 42, .08);
    --bg: #eef2f9;
    --card: rgba(255, 255, 255, .64);
    --mine: #3b5bff;            /* my chat bubbles */
    --mine-ink: #ffffff;
    --theirs: rgba(255, 255, 255, .78);
    --glass: rgba(255, 255, 255, .58);
    --glass-strong: rgba(255, 255, 255, .78);
    --glass-edge: rgba(255, 255, 255, .75);
    --glass-blur: saturate(180%) blur(22px);
    --glass-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), inset 0 -1px 0 rgba(255, 255, 255, .25), 0 10px 30px rgba(17, 32, 84, .10);
    --radius: 14px;
    --shadow: 0 1px 2px rgba(17, 24, 39, .06), 0 4px 14px rgba(17, 24, 39, .06);
    --app-w: 600px;
    --bar-h: 58px;
    --nav-h: 62px;
}

/* ---------- base ---------- */
html, body { background: var(--bg) !important; }
body {
    max-width: var(--app-w); border: 0 !important; overflow-x: hidden; overflow-y: auto;
    color: var(--ink); padding: 0 !important; box-shadow: 0 0 0 1px var(--line);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased; min-height: 100vh;
}
* { text-align: left; border-color: var(--line) !important; }
.text-center, .text-center * { text-align: center !important; }
pre, pre.caption-content { font-family: inherit !important; font-size: inherit; color: inherit; }
a { color: inherit !important; }
a:hover { text-decoration: none; }
textarea, input[type=text], input[type=email], input[type=password], input[type=search], input[type=date], select, .form-control {
    background: #fff !important; border: 1px solid var(--line) !important; border-radius: 10px !important; color: var(--ink);
}
.form-control:focus, textarea:focus { border-color: var(--brand) !important; box-shadow: 0 0 0 3px rgba(59, 91, 255, .2) !important; }
.btn { border-radius: 10px; }
.btn-primary { background: var(--brand) !important; border-color: var(--brand) !important; color: var(--brand-ink) !important; font-weight: 600; }
.btn-primary:hover { filter: brightness(.95); }
.btn-secondary { background: #ece7dc !important; border-color: #ece7dc !important; color: var(--ink) !important; }
i.badge {
    background: #e5484d !important; color: #fff !important; font-style: normal; font-size: 10px !important;
    min-width: 17px; height: 17px; line-height: 17px; padding: 0 4px !important; border-radius: 9px; top: 4px; margin-left: -6px;
}
hr { border-color: var(--line); }

/* ---------- app bar ---------- */
header#top {
    height: var(--bar-h); padding: 0 16px !important; align-items: center;
    background: rgba(255, 255, 255, .55) !important; backdrop-filter: saturate(180%) blur(22px);
    border-bottom: 0 !important; box-shadow: 0 1px 0 rgba(0, 0, 0, .06);
}
header#top > h4 { background: transparent !important; margin: 0; font-weight: 800; letter-spacing: .02em; font-size: 1.25rem; color: var(--brand-ink); }
header#top > a {
    width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, .35); padding: 0 !important; color: var(--brand-ink) !important;
}

/* ---------- bottom tab bar ---------- */
footer#bottom { max-width: var(--app-w); height: var(--nav-h); border-top: 1px solid var(--line) !important; background: rgba(255, 255, 255, .96) !important; backdrop-filter: blur(8px); }
footer#bottom > #nav, footer#bottom > #nav > .nav, footer#bottom > #nav > .nav * { background: transparent !important; }
footer#bottom > div { height: 100%; align-items: stretch; }
footer#bottom > div a {
    display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    font-size: 1.15rem; color: #9aa0a6 !important; cursor: pointer; position: relative; padding: 0 !important;
}
footer#bottom > div a small { font-size: 11px; font-weight: 600; }
footer#bottom > div a.active { color: var(--brand-ink) !important; }
footer#bottom > div a.active::before { content: ''; position: absolute; top: 0; left: 30%; right: 30%; height: 3px; border-radius: 0 0 3px 3px; background: var(--brand); }
footer#bottom i.badge { position: absolute; top: 6px; left: 54%; }

/* ---------- page sections ---------- */
#home, #target-area > div { padding: 12px 14px calc(var(--nav-h) + 20px) !important; }
#home > header h4, #posts > h1, #chats > h1 { font-size: 1.6rem; font-weight: 800; margin: 6px 0 12px; text-transform: capitalize; padding: 0; }
#chats > hr, #home > hr { display: none; }
#home > br { display: none; }
#home .profile.profile_right { position: absolute; right: 14px; top: calc(var(--bar-h) + 14px); }

/* avatars + names */
.profile .small_photo > img, .profile-open .large_photo, .privatePostImage, .mini-avatar {
    background-color: #e9e4da !important; border: 2px solid #fff !important; box-shadow: 0 0 0 1px var(--line);
}
.profile .small_photo > span { font-weight: 600; text-shadow: none !important; }
.profile .small_photo > span small { font-size: .85rem; }

/* ---------- composer (home) ---------- */
#postForm { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px; margin-top: 18px; }
#postForm fieldset > textarea { border: 0 !important; background: transparent !important; resize: none; font-size: 1rem; padding: 6px !important; box-shadow: none !important; }
#postForm label[for=file] { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--brand-soft); color: var(--brand-ink); }
#postSetup { padding: 0 !important; gap: 6px; }
#postSetup select { padding: 6px 8px; }
#sendPost { border-radius: 999px !important; font-weight: 700; }
#sendPost:not(:disabled) { background: var(--brand) !important; color: var(--brand-ink) !important; }
.personal_posts { position: static !important; margin: 18px auto; text-align: center; }
.personal_posts a { display: inline-flex; gap: 8px; align-items: center; padding: 8px 16px; border-radius: 999px; background: var(--card); box-shadow: var(--shadow); font-weight: 600; }

/* ---------- segmented tabs (posts: friends | communities) ---------- */
.all-posts > div:first-of-type > ul {
    display: flex; width: 100%; margin: 0 0 14px; padding: 4px; gap: 4px;
    background: #ebe6dc; border-radius: 12px;
}
.all-posts > div:first-of-type > ul > li.postClass {
    flex: 1 1 50%; text-align: center !important; padding: 9px 0; border-radius: 9px; cursor: pointer;
    font-weight: 700; text-transform: capitalize; color: var(--muted); display: block !important; transition: background .15s;
}
.all-posts > div:first-of-type > ul > li.postClass.active { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .1); }

/* ---------- feed cards (masonry: 2 columns with a gap) ---------- */
.feed-grid, .posts, .comm_posts, .Personalposts { margin: 0 -5px !important; }
.post-item {
    width: calc(50% - 10px) !important; margin: 5px !important; padding: 10px !important;
    background: var(--card); border: 0 !important; border-radius: var(--radius); box-shadow: var(--shadow);
}
.post-item.unseen { box-shadow: 0 0 0 2px var(--brand), var(--shadow); }
.post-item .caption { display: block; margin: 8px 2px 4px; font-size: .92rem; line-height: 1.35; }
.post-item.text-only .caption { font-size: 1.05rem; font-weight: 500; }
.post-item .outer { margin-top: 6px; }
.post-item .media { border-radius: 10px !important; overflow: hidden; }
.post-footer { color: var(--muted); padding: 8px 2px 0 !important; font-size: 11px !important; }
@media (max-width: 360px) { .post-item { width: calc(100% - 10px) !important; } }

/* sponsored cards stay native but clearly labelled */
.post-item.ad-item { background: linear-gradient(180deg, #fffaf0, #fff) !important; }

/* ---------- chats list ---------- */
div#chats > ul { gap: 2px; }
div#chats > ul > li { background: var(--card); border-radius: 12px; padding: 4px 6px; align-items: center; box-shadow: 0 1px 1px rgba(0, 0, 0, .03); }
div#chats > ul > li.unopened-message { background: #fffaf0; }
div#chats > ul > li > div.profile { margin: 0 !important; }
div#chats > ul > li .chat-link { border: 0 !important; padding: 10px 4px !important; position: relative; min-height: 58px; }
div#chats > ul > li .chat-name { color: var(--ink) !important; font-weight: 700; font-size: .98rem; }
div#chats > ul > li .chat-text { color: var(--muted); font-size: .88rem; padding-right: 70px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
div#chats > ul > li .chat-link .time { font-size: 11px; padding: 12px 6px !important; justify-content: space-between !important; align-items: flex-end; }
div#chats > ul > li .unread-count { background: var(--brand) !important; color: var(--brand-ink) !important; border-radius: 999px !important; min-width: 20px; padding: 0 6px !important; font-weight: 700; }
.profile.image-only img { width: 48px !important; height: 48px !important; }

.llyne-fab { background: var(--brand) !important; color: var(--brand-ink) !important; width: 56px !important; height: 56px !important; font-size: 1.25rem; }
.fab-wrap { bottom: calc(var(--nav-h) + 16px) !important; }

/* ---------- modals ---------- */
.modal-content { border: 0; border-radius: 18px; box-shadow: 0 20px 50px rgba(0, 0, 0, .18); overflow: hidden; }
.modal-header, .modal-footer { border-color: var(--line) !important; }
.profile-open .modal-content { overflow: visible; }
.profile-open .modal-header { background: linear-gradient(135deg, var(--brand-soft), #fff); border-radius: 18px 18px 0 0; }
.profile-open .holder > img, .profile-open .holder > a { box-shadow: 0 6px 18px rgba(0, 0, 0, .15); }
.profile-open .name { font-size: 1.2rem; font-weight: 800; justify-content: center; }
.finesse { background: #fff; border-radius: 12px !important; }
div.inside { border-radius: 12px !important; background: #fff; }
.actionkeys > a { color: #fff !important; justify-content: center; }
#llyne_connect .modal-footer > nav > ul > li.active { color: var(--ink) !important; }

/* ---------- full-screen panels (chat, post, settings) ---------- */
.wide-open .fancybox-slide { padding: 0 !important; }
.wide-open .fancybox-slide::before { display: none !important; }   /* fancybox centers with a 100%-high pseudo element; full-height panels don't need it */
.wide-open .fancybox-slide > .fancybox-content { vertical-align: top; }
.wide-open .fancybox-content {
    width: 100% !important; max-width: var(--app-w); height: 100% !important; padding: 0 !important;
    margin: 0 auto !important; background: var(--bg) !important; overflow: hidden;
}
.wide-open .fancybox-bg { background: rgba(0, 0, 0, .45); }
div.open { width: 100% !important; height: 100% !important; cursor: default !important; }
div.open > header {
    height: var(--bar-h); align-items: center; padding: 0 6px; width: 100% !important; max-width: none !important;
    background: #fff !important; border: 0 !important; box-shadow: 0 1px 0 var(--line) !important;
}
div.wide-open header, div.wide-open header > a > button, header > div.dropdown *, header > div.dropdown > a { background-color: transparent !important; border: 0 !important; }
div.open > header button { height: 40px !important; width: 40px; margin: 0 !important; border-radius: 50%; align-items: center; justify-content: center; color: var(--ink) !important; }
.open header button > div.menu { width: 18px; height: 3px !important; margin: 2px 0 !important; background: var(--ink) !important; flex: none; }
div.open > header .profile_center .small_photo > img { width: 34px; height: 34px; }
div.open > header .profile_center .small_photo { flex-direction: row !important; align-items: center; gap: 8px; }
div.open > header .profile_center .small_photo span small { font-size: .95rem; font-weight: 700; }
.chat-presence { margin-top: -2px; }
.settings-page > .body, .post-page { overflow-y: auto; height: 100%; }
.settings-page > .body { height: calc(100% - var(--bar-h)); padding-bottom: 40px; }
div.division { font-family: inherit !important; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px !important; margin: 14px 12px !important; width: auto; }

/* ---------- chat: header / scrolling messages / composer, like a messaging app ---------- */
.chat-wrapper { display: flex !important; flex-direction: column; height: 100% !important; position: relative; padding: 0 !important; }
.chat-wrapper > header { flex: none; position: relative !important; z-index: 5; }
.chat-wrapper .page-content-wrapper.chat-scroll {
    position: relative !important; flex: 1 1 auto; min-height: 0; height: auto !important; top: auto;
    padding: 10px 12px 8px !important; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    justify-content: flex-start !important;   /* flex-end would push old messages above the scroll origin (unscrollable); .messages uses margin-top:auto instead */
    background: #efe9df !important; background-image: none !important;
}
.chat-bottom-space { min-height: 4px !important; }
.chat-wrapper .llyne-chatbox, .chat-wrapper .reply-quoted {
    position: relative !important; left: auto; right: auto; bottom: auto !important; flex: none; width: 100% !important; max-width: none !important;
}
.llyne-chatbox {
    max-height: none !important; display: flex; align-items: flex-end !important; gap: 6px; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)) !important;
    background: #fff !important; border-top: 1px solid var(--line) !important; margin: 0 !important;
}
.llyne-chatbox pre { margin: 6px auto !important; color: var(--muted); text-align: center; }
.llyne-chatbox textarea.chat-textarea {
    flex: 1 1 auto; max-width: none !important; min-height: 42px; border-radius: 22px !important; padding: 10px 16px !important;
    resize: none; margin: 0 !important; background: #f4f1eb !important; border: 0 !important; line-height: 1.35;
}
.llyne-chatbox .attach-label { width: 42px; height: 42px; margin: 0 !important; border-radius: 50%; display: inline-flex !important; align-items: center; justify-content: center; color: var(--muted); }
.llyne-chatbox .formButtons { margin: 0 !important; display: flex; gap: 6px; }
.llyne-chatbox .formButtons button {
    width: 42px !important; height: 42px !important; border-radius: 50% !important; margin: 0 !important; padding: 0 !important;
    display: inline-flex; align-items: center; justify-content: center; line-height: 1 !important; border: 0 !important; color: var(--brand-ink) !important;
}
.llyne-chatbox .formButtons .btn-primary { background: var(--brand) !important; }
.llyne-chatbox .image-preview { bottom: calc(100% + 6px) !important; left: 10px !important; gap: 6px; width: auto !important; }
.llyne-chatbox .preview-item { width: 72px !important; height: 72px; border-radius: 10px; box-shadow: var(--shadow); }
.reply-quoted.collapse.show, .reply-quoted.collapsing { display: block; }
.chat-wrapper .reply-quoted {
    margin: 0 !important; border-radius: 0 !important; background: #faf7f1 !important; border-left: 4px solid var(--brand) !important;
    padding: 8px 40px 8px 12px !important; border-top: 1px solid var(--line) !important;
}
.emojiPickerIcon { border-radius: 50%; }

/* "new messages" jump button */
.jump-latest {
    position: absolute; right: 14px; bottom: 82px; z-index: 6; width: 40px; height: 40px; border-radius: 50%;
    background: #fff; box-shadow: var(--shadow); display: none; align-items: center; justify-content: center; cursor: pointer; border: 0;
}
.jump-latest.show { display: flex; }
.jump-latest .count { position: absolute; top: -6px; right: -4px; background: var(--brand); color: var(--brand-ink); font-size: 10px; font-weight: 700; border-radius: 9px; padding: 0 5px; }

/* day chips */
.chat-scroll small.day, div.content > small.day {
    position: sticky; top: 4px; z-index: 2; display: table; margin: 10px auto !important; width: auto !important;
    background: rgba(255, 255, 255, .9) !important; color: var(--muted) !important; box-shadow: 0 1px 2px rgba(0, 0, 0, .08) !important;
    padding: 4px 12px !important; border-radius: 999px !important; font-size: 11px !important; font-weight: 700; text-transform: capitalize;
}

/* bubbles */
.msg-row { padding: 1px 0; }
div.message-wrap { display: flex !important; flex-direction: column; float: right; max-width: 80% !important; margin: 2px 0 !important; }
div.message-wrap.other { float: left; }
div.message-wrap > .row { flex-direction: column; flex-wrap: nowrap; }
div.message {
    background: var(--mine) !important; color: var(--mine-ink) !important; border-radius: 16px 16px 4px 16px !important;
    padding: 7px 10px !important; box-shadow: 0 1px 1px rgba(0, 0, 0, .08); word-break: break-word; min-width: 64px;
}
div.message.other { background: var(--theirs) !important; color: var(--ink) !important; border-radius: 16px 16px 16px 4px !important; }
div.message .other-user-icon { border: 0 !important; color: var(--accent); font-size: 12px; font-weight: 700; margin-bottom: 2px; }
div.message .media { width: 260px !important; max-width: 100% !important; min-width: 0 !important; border-radius: 12px !important; height: auto !important; max-height: none !important; }
div.message .attachment { width: auto !important; background: rgba(0, 0, 0, .08) !important; color: inherit !important; opacity: 1 !important; border-radius: 10px; }
div.message .quoted { background: rgba(0, 0, 0, .06) !important; border-left-color: rgba(0, 0, 0, .35) !important; color: inherit; }
div.message-wrap .message-actions { display: flex !important; align-items: center; justify-content: flex-end; gap: 8px; width: auto !important; padding: 0 4px; }
div.message-wrap.other .message-actions { justify-content: flex-start; flex-direction: row-reverse; }
div.message-wrap .message-actions > .options {
    position: static !important; margin: 0 !important; opacity: 0; transition: opacity .15s; display: flex; gap: 10px; width: auto !important;
}
div.message-wrap:hover .message-actions > .options, div.message-wrap.show-actions .message-actions > .options { opacity: 1; }
@media (hover: none) { div.message-wrap .message-actions > .options { opacity: .55; } }
div.message-wrap .message-actions > .options a { color: var(--muted) !important; margin: 0 !important; }
div.message-wrap .message-actions > .status { font-size: 11px; color: var(--muted); }
div.message-wrap .message-actions > .status > p { text-indent: 0 !important; }
div.message-wrap .message-actions > .status svg, div.message-wrap .message-actions > .status i { margin: 0 0 0 4px !important; float: none !important; }
.message .voicenote { min-width: 230px; align-items: center; }
.message .voicenote .play-btn { width: 36px; height: 36px; border-radius: 50%; background: rgba(0, 0, 0, .12); display: flex; align-items: center; justify-content: center; cursor: pointer; flex: none; padding: 0; }
.message .voicenote .progress-timeline { height: 4px !important; background: rgba(0, 0, 0, .15); border-radius: 2px; cursor: pointer; margin-top: 6px; padding: 0; }
.message .voicenote .progress-inner { height: 100%; border-radius: 2px; }
.message .voicenote .timeline { height: auto !important; }
.message .voicenote .audio-warp { display: flex; flex-direction: column; align-items: center; font-size: 11px; }
.reactions .reaction { box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }

/* side menu */
.sidebar-wrapper { background: #1d1f24 !important; top: 0; }
.sidebar-nav li a { color: #d1d5db !important; }

/* empty states */
p.empty { font-family: inherit !important; color: var(--muted) !important; background: rgba(255, 255, 255, .7); padding: 14px 18px; border-radius: 14px; margin: auto !important; text-align: center !important; }

/* toasts on top of fancybox too */
.llyne-toast { border-radius: 12px; border: 0; font-weight: 600; }

/* buttons hidden by the composer script (inline display:none) must stay hidden */
.llyne-chatbox [style*="display: none"] { display: none !important; }
.llyne-chatbox { position: relative; }
.llyne-chatbox textarea.chat-textarea { padding-left: 46px !important; }
.llyne-chatbox .emojiPickerIcon { position: absolute !important; right: auto; margin: 0 !important; }

/* chat list rows: the text column may shrink so times never get pushed out */
div#chats > ul > li .chat-link { flex: 1 1 auto; min-width: 0; width: auto !important; }

/* login / sign-up tabs */
#loginModal .nav-link { color: var(--muted) !important; font-weight: 600; border-bottom: 2px solid transparent; }
#loginModal .nav-link.active { color: var(--ink) !important; border-bottom-color: var(--brand); }

/* connections modal */
#llyne_connect .modal-dialog { max-width: 560px; }
#llyne_connect .connect_body { background: var(--bg); }
#llyne_connect .modal-footer { padding: 6px !important; background: #fff; }
#llyne_connect .modal-footer > nav { width: 100%; }
#llyne_connect .modal-footer > nav > ul { display: flex !important; width: 100%; margin: 0; padding: 4px; gap: 4px; background: #ebe6dc; border-radius: 12px; }
#llyne_connect .modal-footer > nav > ul > li {
    flex: 1 1 25%; display: flex !important; flex-direction: column; align-items: center; justify-content: center; text-align: center !important;
    padding: 6px 2px !important; margin: 0 !important; border: 0 !important; border-radius: 9px; cursor: pointer; font-size: 12px; font-weight: 700;
    color: var(--muted) !important; background: transparent !important; height: auto !important; text-transform: capitalize; opacity: 1 !important;
}
#llyne_connect .modal-footer > nav > ul > li > span, #llyne_connect .modal-footer > nav > ul > li > i, #llyne_connect .modal-footer > nav > ul > li > svg { display: none !important; }
#llyne_connect .modal-footer > nav > ul > li > span:first-child { display: block !important; }
#llyne_connect .modal-footer > nav > ul > li > small { font-size: 11px; font-weight: 700; color: var(--accent); position: static !important; }
#llyne_connect .modal-footer > nav > ul > li.active { background: #fff !important; color: var(--ink) !important; box-shadow: 0 1px 3px rgba(0, 0, 0, .1); }
#llyne_connect #search_div label h4 { font-size: 1.1rem; font-weight: 800; }
#llyne_connect .quickAdd h4 { font-size: 1.1rem; font-weight: 800; padding: 0; }
#qr-reader:empty { display: none; }
.req_time { display: block; text-align: center !important; color: var(--muted); font-size: 12px !important; font-weight: 700; margin: 8px 0 4px; }

/* profile card: close (left), share tools under it, menu (right) */
.profile-open .modal-header small.position-absolute { top: 2.4em; left: 1em; font-size: 11px !important; color: var(--muted); }
.profile-open .modal-dialog { margin-top: 5.5rem; }
/* Quick Add flows under the search box (it used to be pinned to the bottom half) */
div.quickAdd { position: static !important; height: auto !important; overflow: visible !important; padding: 0 !important; }
i.badge { pointer-events: none; }
.menu-btn { width: 36px; height: 36px; border-radius: 50%; color: var(--ink) !important; }

/* ---------- settings rows with iOS-style switches ---------- */
.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.setting-row:last-child { border-bottom: 0; }
.setting-row > label:first-child { margin: 0; flex: 1; cursor: pointer; }
.switch { position: relative; width: 46px; height: 28px; flex: none; margin: 0; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; display: inline !important; }
.switch span { position: absolute; inset: 0; background: #d8d3c8; border-radius: 28px; transition: background .2s; cursor: pointer; }
.switch span::before { content: ''; position: absolute; width: 22px; height: 22px; left: 3px; top: 3px; background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .2s; }
.switch input:checked + span { background: var(--brand); }
.switch input:checked + span::before { transform: translateX(18px); }
.switch input:disabled + span { opacity: .5; cursor: not-allowed; }

/* push nudge on the Chats tab */
.push-nudge { display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 14px; box-shadow: var(--shadow); padding: 10px 12px; margin-bottom: 12px; }
.push-nudge > i, .push-nudge > svg { color: var(--brand); font-size: 1.3rem; }
.push-nudge > div { flex: 1; }
.push-nudge small { display: block; color: var(--muted); }

/* typing indicator in the chat header */
.chat-presence.typing { color: var(--accent) !important; font-weight: 700; }

/* chat menu: mute options */
.sidebar-nav li.sidebar-sub { padding: 6px 1em 10px 1.4em; color: #9ca3af; font-size: .9em; line-height: 1.2; }
.sidebar-nav li.sidebar-sub > span { display: block; margin-bottom: 8px; }
.sidebar-nav li.sidebar-sub a { display: inline-block !important; padding: 4px 11px !important; margin: 0 4px 4px 0; border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .22); color: #e5e7eb !important; text-decoration: none !important; white-space: nowrap; line-height: 1.3 !important; }
.sidebar-nav li.sidebar-sub a:hover { background: rgba(255, 255, 255, .12); }

.danger-zone { border: 1px solid rgba(229, 72, 77, .35) !important; border-radius: 14px; padding: 14px; background: rgba(229, 72, 77, .04); }
.danger-zone b { color: #c2272d; }


/* =====================================================================
 * Part 2 - Liquid Glass materials
 * ===================================================================== */

/* the soft "mesh" the glass floats over (fixed, so surfaces refract colour while scrolling) */
html, body {
    background:
        radial-gradient(60% 40% at 10% 0%, rgba(122, 162, 255, .45) 0%, transparent 70%),
        radial-gradient(50% 40% at 100% 30%, rgba(34, 195, 238, .30) 0%, transparent 70%),
        radial-gradient(60% 50% at 30% 100%, rgba(124, 92, 255, .22) 0%, transparent 70%),
        #eef2f9 !important;
    background-attachment: fixed !important;
}
body { box-shadow: none; }

/* shared glass surface */
header#top, footer#bottom, #postForm, .post-item, div#chats > ul > li, .division, .modal-content, .push-nudge,
.personal_posts a, div.open > header, .llyne-chatbox, .all-posts > div:first-of-type > ul, .finesse, div.inside,
#llyne_connect .modal-footer > nav > ul, .new-posts-pill, .jump-latest, .chat-scroll small.day {
    background: var(--glass) !important;
    -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-edge) !important;
    box-shadow: var(--glass-shadow) !important;
}

/* app bar: brand mark + wordmark */
header#top { background: rgba(255, 255, 255, .55) !important; border-width: 0 0 1px !important; border-radius: 0; }
header#top > h4 { display: flex; align-items: center; gap: 10px; color: var(--ink) !important; font-weight: 800; letter-spacing: .26em; font-size: 1.05rem; }
header#top > h4 img { width: 30px; height: 30px; }
header#top > a { background: rgba(255, 255, 255, .6) !important; color: var(--ink) !important; border: 1px solid var(--glass-edge); box-shadow: var(--glass-shadow); }

/* floating glass tab bar */
footer#bottom {
    left: 12px !important; right: 12px !important; bottom: calc(10px + env(safe-area-inset-bottom)) !important;
    width: auto !important; max-width: calc(var(--app-w) - 24px); margin: 0 auto; border-radius: 26px !important; overflow: hidden;
    background: rgba(255, 255, 255, .6) !important;
}
footer#bottom > div a { color: #7b8496 !important; }
footer#bottom > div a.active { color: var(--accent) !important; }
footer#bottom > div a.active::before { left: 18%; right: 18%; top: 6px; bottom: 6px; height: auto; border-radius: 18px; background: rgba(59, 91, 255, .12); z-index: -1; }
#home, #target-area > div { padding-bottom: calc(var(--nav-h) + 40px) !important; }

/* buttons */
.btn-primary, #sendPost:not(:disabled), .llyne-chatbox .formButtons .btn-primary, .llyne-fab, .actionkeys > a.bg-primary, .actionkeys > a.bg-success {
    background: var(--accent-grad) !important; border: 0 !important; color: #fff !important;
    box-shadow: 0 6px 18px rgba(59, 91, 255, .35), inset 0 1px 0 rgba(255, 255, 255, .35) !important;
}
.btn-primary { border-radius: 999px; }
.btn-secondary, #sendPost:disabled { background: rgba(255, 255, 255, .7) !important; color: var(--ink) !important; border: 1px solid var(--glass-edge) !important; }
.llyne-chatbox .formButtons .btn-secondary { background: rgba(15, 23, 42, .06) !important; color: var(--ink) !important; }
.form-control, textarea, input[type=text], input[type=email], input[type=password], input[type=search], input[type=date], select {
    background: rgba(255, 255, 255, .7) !important; border: 1px solid rgba(255, 255, 255, .9) !important;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, .06) !important;
}
.form-control:focus, textarea:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 3px rgba(59, 91, 255, .2) !important; }
#postForm label[for=file] { background: rgba(59, 91, 255, .12); color: var(--accent); }
.switch input:checked + span { background: var(--accent-grad); }
i.badge { background: linear-gradient(135deg, #ff5a7a, #ff2d55) !important; }

/* segmented control */
.all-posts > div:first-of-type > ul { background: rgba(255, 255, 255, .45) !important; border-radius: 14px; }
.all-posts > div:first-of-type > ul > li.postClass.active { background: #fff; color: var(--accent); box-shadow: 0 2px 8px rgba(17, 32, 84, .12); }
#llyne_connect .modal-footer > nav > ul { background: rgba(255, 255, 255, .45) !important; }
#llyne_connect .modal-footer > nav > ul > li.active { background: #fff !important; color: var(--accent) !important; }
#llyne_connect .modal-footer > nav > ul > li > small { color: var(--accent); }
#llyne_connect .connect_body { background: transparent; }

/* feed cards */
.post-item { border-radius: 20px !important; }
.post-item.unseen { box-shadow: 0 0 0 2px rgba(59, 91, 255, .55), var(--glass-shadow) !important; }
.post-item.ad-item { background: linear-gradient(180deg, rgba(231, 237, 255, .8), rgba(255, 255, 255, .6)) !important; }
.ad-item .ad-cta { border-radius: 999px; }

/* chats list */
div#chats > ul { gap: 8px; }
div#chats > ul > li { border-radius: 18px; }
div#chats > ul > li.unopened-message { background: rgba(231, 237, 255, .85) !important; }
div#chats > ul > li .unread-count { background: var(--accent-grad) !important; color: #fff !important; }
.llyne-fab { border-radius: 20px !important; }

/* modals */
.modal-backdrop.show { opacity: .25; }
.modal-content { background: rgba(255, 255, 255, .78) !important; border-radius: 26px !important; }
.profile-open .modal-header { background: linear-gradient(135deg, rgba(122, 162, 255, .35), rgba(34, 195, 238, .18)) !important; border-radius: 26px 26px 0 0; }
.login-brand { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: -4px 0 14px; }
.login-brand img { width: 64px; height: 64px; filter: drop-shadow(0 8px 18px rgba(59, 91, 255, .25)); }
.login-brand b { letter-spacing: .3em; font-size: 1.1rem; }
.login-brand small { color: var(--muted); }
#loginModal .nav-link.active { border-bottom-color: var(--accent); }

/* panels (chat, post, settings) */
.wide-open .fancybox-content { background: transparent !important; }
.wide-open .fancybox-bg { background: #eef2f9; opacity: 1 !important; }
div.open > header { border-radius: 0 !important; border-width: 0 0 1px !important; background: rgba(255, 255, 255, .62) !important; }
.chat-wrapper .page-content-wrapper.chat-scroll {
    background:
        radial-gradient(50% 35% at 0% 10%, rgba(122, 162, 255, .35), transparent 70%),
        radial-gradient(45% 35% at 100% 70%, rgba(34, 195, 238, .25), transparent 70%),
        #eef2f9 !important;
}
.llyne-chatbox { border-radius: 0 !important; border-width: 1px 0 0 !important; background: rgba(255, 255, 255, .62) !important; }
.llyne-chatbox textarea.chat-textarea { background: rgba(255, 255, 255, .85) !important; border: 1px solid rgba(255, 255, 255, .95) !important; }
div.message { background: var(--accent-grad) !important; color: #fff !important; box-shadow: 0 4px 14px rgba(59, 91, 255, .25), inset 0 1px 0 rgba(255, 255, 255, .3) !important; border-radius: 20px 20px 6px 20px !important; }
div.message.other {
    background: rgba(255, 255, 255, .78) !important; color: var(--ink) !important; border-radius: 20px 20px 20px 6px !important;
    -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
    border: 1px solid rgba(255, 255, 255, .9); box-shadow: var(--glass-shadow) !important;
}
div.message a { color: inherit !important; }
div.message .quoted { background: rgba(255, 255, 255, .22) !important; border-left-color: rgba(255, 255, 255, .8) !important; }
div.message.other .quoted { background: rgba(59, 91, 255, .08) !important; border-left-color: var(--accent) !important; }
div.message .other-user-icon { color: var(--accent); }
.chat-presence.typing { color: var(--accent) !important; }
.chat-scroll small.day { border-radius: 999px !important; }
.sidebar-wrapper { background: rgba(11, 18, 32, .82) !important; -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); }
.settings-page > .body, .post-page { background: transparent; }
.reply-quoted { border-left-color: var(--accent) !important; }
.danger-zone { background: rgba(255, 255, 255, .5); }

/* fallback when the browser has no backdrop-filter: solid, still readable */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    header#top, footer#bottom, #postForm, .post-item, div#chats > ul > li, .division, .modal-content, .llyne-chatbox, div.open > header { background: rgba(255, 255, 255, .95) !important; }
}
/* respect "reduce transparency" style preferences */
@media (prefers-reduced-transparency: reduce) {
    header#top, footer#bottom, .modal-content, .llyne-chatbox, div.open > header { -webkit-backdrop-filter: none; backdrop-filter: none; background: #fff !important; }
}
.emojiPickerIcon { background: transparent !important; box-shadow: none !important; opacity: .7; }
.post-item, .post-item.unseen { border-color: transparent !important; }


/* =====================================================================
 * Part 3 - Eye comfort
 *   - dark theme (Auto follows the device, or pick Light / Dark in Settings)
 *   - no pure white text on pure black: soft ink-blue surfaces, ~87% white text
 *   - "warmer colours": an amber layer that cuts blue light (always / at night)
 * ===================================================================== */
html[data-theme="dark"] {
    color-scheme: dark;
    --ink: #e6e9f2;
    --muted: #9aa3b8;
    --line: rgba(255, 255, 255, .08);
    --bg: #0d1322;
    --card: rgba(30, 38, 60, .62);
    --theirs: rgba(38, 47, 72, .78);
    --glass: rgba(26, 34, 54, .58);
    --glass-strong: rgba(30, 38, 60, .82);
    --glass-edge: rgba(255, 255, 255, .10);
    --glass-blur: saturate(160%) blur(22px);
    --glass-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 10px 30px rgba(0, 0, 0, .35);
    --accent-grad: linear-gradient(135deg, #3f5be0 0%, #2f78d8 55%, #1fa6c8 100%);   /* slightly calmer at night */
}
html[data-theme="dark"], html[data-theme="dark"] body {
    background:
        radial-gradient(60% 40% at 10% 0%, rgba(63, 91, 224, .28) 0%, transparent 70%),
        radial-gradient(50% 40% at 100% 30%, rgba(31, 166, 200, .16) 0%, transparent 70%),
        radial-gradient(60% 50% at 30% 100%, rgba(124, 92, 255, .14) 0%, transparent 70%),
        #0d1322 !important;
    background-attachment: fixed !important;
}
html[data-theme="dark"] body, html[data-theme="dark"] .modal-content, html[data-theme="dark"] .dropdown-menu { color: var(--ink); }
html[data-theme="dark"] header#top, html[data-theme="dark"] footer#bottom, html[data-theme="dark"] div.open > header,
html[data-theme="dark"] .llyne-chatbox { background: rgba(18, 25, 42, .72) !important; }
html[data-theme="dark"] .modal-content { background: rgba(22, 30, 50, .9) !important; }
html[data-theme="dark"] .dropdown-menu { background: #1a2238; border-color: var(--line) !important; }
html[data-theme="dark"] .dropdown-item { color: var(--ink) !important; }
html[data-theme="dark"] .dropdown-item:hover { background: rgba(255, 255, 255, .06); }
html[data-theme="dark"] header#top > a, html[data-theme="dark"] .menu-btn, html[data-theme="dark"] .close { color: var(--ink) !important; text-shadow: none; }
html[data-theme="dark"] header#top > a { background: rgba(255, 255, 255, .06) !important; }
html[data-theme="dark"] header#top > h4 img, html[data-theme="dark"] .login-brand img { filter: invert(1) hue-rotate(180deg) brightness(1.1); }
html[data-theme="dark"] .form-control, html[data-theme="dark"] textarea, html[data-theme="dark"] input[type=text], html[data-theme="dark"] input[type=email],
html[data-theme="dark"] input[type=password], html[data-theme="dark"] input[type=search], html[data-theme="dark"] input[type=date], html[data-theme="dark"] select {
    background: rgba(255, 255, 255, .06) !important; border-color: rgba(255, 255, 255, .10) !important; color: var(--ink) !important;
}
html[data-theme="dark"] .form-control::placeholder, html[data-theme="dark"] textarea::placeholder { color: #7d869b; }
html[data-theme="dark"] .llyne-chatbox textarea.chat-textarea { background: rgba(255, 255, 255, .07) !important; border-color: rgba(255, 255, 255, .08) !important; }
html[data-theme="dark"] .chat-wrapper .page-content-wrapper.chat-scroll, html[data-theme="dark"] .wide-open .fancybox-bg {
    background:
        radial-gradient(50% 35% at 0% 10%, rgba(63, 91, 224, .22), transparent 70%),
        radial-gradient(45% 35% at 100% 70%, rgba(31, 166, 200, .14), transparent 70%),
        #0d1322 !important;
}
html[data-theme="dark"] div.message.other { background: var(--theirs) !important; color: var(--ink) !important; border-color: rgba(255, 255, 255, .06); }
html[data-theme="dark"] .all-posts > div:first-of-type > ul, html[data-theme="dark"] #llyne_connect .modal-footer > nav > ul { background: rgba(255, 255, 255, .06) !important; }
html[data-theme="dark"] .all-posts > div:first-of-type > ul > li.postClass.active,
html[data-theme="dark"] #llyne_connect .modal-footer > nav > ul > li.active,
html[data-theme="dark"] .segmented button.active { background: rgba(255, 255, 255, .12) !important; color: #fff !important; box-shadow: none; }
html[data-theme="dark"] div#chats > ul > li.unopened-message { background: rgba(63, 91, 224, .18) !important; }
html[data-theme="dark"] .post-item.ad-item { background: linear-gradient(180deg, rgba(63, 91, 224, .16), rgba(26, 34, 54, .6)) !important; }
html[data-theme="dark"] .ad-item .ad-advertiser, html[data-theme="dark"] .ad-item .ad-body { color: var(--ink); }
html[data-theme="dark"] .btn-secondary, html[data-theme="dark"] #sendPost:disabled, html[data-theme="dark"] .btn-outline-dark { background: rgba(255, 255, 255, .07) !important; color: var(--ink) !important; border-color: rgba(255, 255, 255, .12) !important; }
html[data-theme="dark"] .chat-scroll small.day, html[data-theme="dark"] .jump-latest, html[data-theme="dark"] .new-posts-pill { background: rgba(26, 34, 54, .85) !important; color: var(--muted) !important; }
html[data-theme="dark"] .text-muted { color: var(--muted) !important; }
html[data-theme="dark"] .profile-open .modal-header { background: linear-gradient(135deg, rgba(63, 91, 224, .28), rgba(31, 166, 200, .12)) !important; }
html[data-theme="dark"] .alert-info { background: rgba(31, 166, 200, .15); color: #bfe9f5; border-color: rgba(31, 166, 200, .3); }
html[data-theme="dark"] .switch span { background: #3a4460; }
html[data-theme="dark"] i.badge { background: linear-gradient(135deg, #e0587a, #d93a5c) !important; }
html[data-theme="dark"] .profile .small_photo > img, html[data-theme="dark"] .profile-open .large_photo, html[data-theme="dark"] .privatePostImage { border-color: #1a2238 !important; }

/* warmer colours: amber layer that removes part of the blue light */
html.warm body::after {
    content: ''; position: fixed; inset: 0; z-index: 2147483646; pointer-events: none;
    background: rgba(255, 176, 100, .18); mix-blend-mode: multiply;   /* trims ~11% of blue, keeps colours natural */
}
html[data-theme="dark"].warm body::after { background: rgba(255, 160, 80, .26); }

/* segmented buttons (Settings) */
.segmented { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: rgba(255, 255, 255, .45); border: 1px solid var(--glass-edge); }
.segmented button { flex: 1; border: 0; background: transparent; border-radius: 9px; padding: 7px 0; font-weight: 700; color: var(--muted); text-align: center; }
.segmented button.active { background: #fff; color: var(--accent); box-shadow: 0 2px 8px rgba(17, 32, 84, .12); }

/* community creation: invite picker is a tidy scrollable list */
.member-picker { text-align: left; max-height: 230px; overflow-y: auto; border: 1px solid var(--line); border-radius: 12px; padding: 4px; margin-top: 6px; }
.member-picker label { justify-content: flex-start; gap: 8px; margin: 0 !important; padding: 7px 8px; border-radius: 9px; cursor: pointer; font-size: .92rem; }
.member-picker label:hover { background: rgba(59, 91, 255, .07); }
.member-picker input { margin: 0 !important; accent-color: var(--accent); }

/* dark theme: names / links that inherited near-black colours */
html[data-theme="dark"] .small_photo, html[data-theme="dark"] .small_photo span, html[data-theme="dark"] .small_photo small,
html[data-theme="dark"] .profile-chip, html[data-theme="dark"] .post-item a, html[data-theme="dark"] header a { color: var(--ink); }

/* composer: attachment tray floats as one glass strip above the input; text is left-aligned like every messenger */
.llyne-chatbox [data-caption] { text-align: left !important; padding-left: 16px !important; }
.llyne-chatbox .image-preview:empty { display: none !important; }
.llyne-chatbox .image-preview { right: 10px !important; padding: 6px; border-radius: 16px; height: auto !important;
    background: var(--glass-strong); border: 1px solid var(--glass-edge); box-shadow: var(--glass-shadow);
    -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
.llyne-chatbox .preview-item .remove-btn { width: 22px !important; height: 22px !important; min-width: 0 !important; padding: 0 !important;
    border-radius: 50% !important; background: rgba(0, 0, 0, .55) !important; color: #fff !important; box-shadow: none !important;
    font-size: 12px !important; line-height: 22px !important; display: flex; align-items: center; justify-content: center; }
.llyne-chatbox .preview-item .name { bottom: 0; border-radius: 0 0 10px 10px; }

/* voice notes: duration and size sit apart, controls line up */
.message .voicenote .audio-holder { display: flex; align-items: center; gap: 10px; padding: 0 0 0 4px; }
.message .voicenote .timeline { flex: 1; padding: 0 !important; max-width: none; }
.message .voicenote .mini-info { display: flex !important; justify-content: space-between; gap: 10px; padding: 4px 0 0 !important; font-size: 11px; opacity: .75; }
.message .voicenote .mini-info .float-right { float: none !important; }
.message .voicenote .vn-speed { margin: 0 0 4px !important; padding: 1px 8px !important; border-radius: 999px !important; font-size: 11px; }
.message .voicenote .progress-inner { background: var(--accent) !important; }
/* a deleted message never keeps the bright "mine" gradient */
.message-wrap .message.deleted, .message-wrap .message:has(> .fa-ban) { background: transparent !important; color: var(--muted) !important; box-shadow: none !important; border: 1px dashed var(--line) !important; }

/* ---- Sign in with Google / Apple (login modal) ---------------------------------
   Google: white (dark grey in dark mode) with the G mark; Apple: black (white in dark mode),
   as both companies' button guidelines ask. */
.social-signin { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.btn-social { display: flex; align-items: center; justify-content: center; gap: 10px; height: 46px; border-radius: 999px;
    font-weight: 600; font-size: .98rem; text-decoration: none !important; transition: transform .12s ease, box-shadow .12s ease; }
.btn-social:active { transform: scale(.98); }
.btn-social i { font-size: 1.15rem; }
.btn-google { background: #fff; color: #1f1f1f !important; border: 1px solid #dadce0; box-shadow: 0 1px 2px rgba(60, 64, 67, .15); }
.btn-google svg, .btn-google i { color: #1f1f1f; }
html[data-theme="dark"] .btn-google svg, html[data-theme="dark"] .btn-google i { color: #e3e3e3; }
.btn-google:hover { box-shadow: 0 2px 6px rgba(60, 64, 67, .2); }
.btn-apple { background: #000; color: #fff !important; border: 1px solid #000; }
html[data-theme="dark"] .btn-apple { background: #fff; color: #000 !important; border-color: #fff; }
html[data-theme="dark"] .btn-google { background: #131314; color: #e3e3e3 !important; border-color: #8e918f; }
.or-line { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: .8rem; margin-top: 4px; }
.or-line::before, .or-line::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.keep-signed { display: flex; align-items: center; gap: 6px; color: var(--muted); cursor: pointer; }
.keep-signed input { accent-color: var(--accent); }
.provider-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: var(--glass); border: 1px solid var(--glass-edge); font-size: .85rem; font-weight: 600; }

/* Settings > Sign-in & devices */
.signin-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.signin-row:last-child { border-bottom: 0; }
.signin-row .ico { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--glass); border: 1px solid var(--glass-edge); flex: none; }
.signin-row .grow { flex: 1; min-width: 0; line-height: 1.25; }
.signin-row .grow small { display: block; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.signin-row .tag-current { font-size: .7rem; font-weight: 700; color: #14866d; background: rgba(20, 134, 109, .12); border-radius: 999px; padding: 1px 8px; margin-left: 6px; }
.text-warning-strong{color:#a15c07;font-weight:600}html[data-theme="dark"] .text-warning-strong{color:#f5b454}

/* login modal: solid enough that the page behind never reads through */
#loginModal .modal-content { background: var(--glass-strong) !important; }
#loginModal .modal-content { background: color-mix(in srgb, var(--bg) 92%, transparent) !important; }

/* ---- Community posts (Posts > Communities) ------------------------------------ */
.community-strip { display: flex; gap: 10px; overflow-x: auto; padding: 4px 12px 12px; scrollbar-width: none; }
.community-strip::-webkit-scrollbar { display: none; }
.community-tile { flex: none; width: 74px; display: flex; flex-direction: column; align-items: center; gap: 5px; text-decoration: none !important; color: var(--ink) !important; }
.community-tile img { width: 56px; height: 56px; border-radius: 18px; object-fit: cover; border: 2px solid transparent;
    background: linear-gradient(var(--bg), var(--bg)) padding-box, linear-gradient(135deg, #3b5bff, #22c3ee) border-box; box-shadow: var(--glass-shadow); }
.community-tile span { font-size: .72rem; font-weight: 600; max-width: 74px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.community-empty { margin: 8px 14px; padding: 22px 16px; border-radius: 20px; background: var(--glass); border: 1px solid var(--glass-edge);
    -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
.community-empty > i { font-size: 1.6rem; color: var(--accent); display: block; margin-bottom: 8px; }
.community-suggest { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; text-align: left; }
/* community badge on a post card */
.postGroupId { display: block; margin: 0 0 6px; }
.postGroupId .profile { display: inline-flex !important; align-items: center; gap: 6px; padding: 2px 10px 2px 8px; border-radius: 999px;
    background: rgba(59, 91, 255, .08); color: var(--accent); font-size: .75rem; font-weight: 700; max-width: 100%; }
.postGroupId .profile .small_photo { flex-direction: row !important; align-items: center; gap: 5px; }
.postGroupId .profile .small_photo > img { width: 18px !important; height: 18px !important; border-radius: 6px !important; border: 0 !important; }
.postGroupId .profile .small_photo > span small { font-size: .75rem; color: var(--accent); }
html[data-theme="dark"] .postGroupId .profile { background: rgba(110, 140, 255, .16); }
/* composer "Post to" */
.post-to { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--muted); font-weight: 600; }
.post-to select { border: 1px solid var(--glass-edge); background: var(--glass); color: var(--ink); border-radius: 999px; padding: 4px 12px; font-weight: 600; max-width: 180px; }

/* ---- Install the app (PWA) ------------------------------------------------------ */
.install-banner { position: fixed; left: 12px; right: 12px; bottom: calc(86px + env(safe-area-inset-bottom)); z-index: 1060;
    display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 20px;
    background: var(--glass-strong); border: 1px solid var(--glass-edge); box-shadow: var(--glass-shadow);
    -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); animation: circlesRise .35s ease both; max-width: 520px; margin: 0 auto; }
.install-banner img { width: 40px; height: 40px; border-radius: 11px; flex: none; }
.install-banner > div { flex: 1; line-height: 1.2; min-width: 0; }
.install-banner small { display: block; color: var(--muted); font-size: .76rem; }
.install-banner .close { font-size: 1.4rem; opacity: .5; padding: 0 4px; background: none !important; box-shadow: none !important; }
.install-guide { position: fixed; inset: 0; z-index: 1070; background: rgba(10, 16, 34, .45); display: flex; align-items: flex-end; justify-content: center; }
.install-guide .sheet { width: 100%; max-width: 480px; padding: 22px 22px calc(22px + env(safe-area-inset-bottom)); border-radius: 26px 26px 0 0; text-align: center;
    background: var(--glass-strong); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); animation: circlesRise .3s ease both; }
.install-guide img { width: 56px; height: 56px; border-radius: 14px; margin-bottom: 8px; }
.install-guide ol { text-align: left; margin: 12px auto 18px; max-width: 290px; padding-left: 20px; } .install-guide li { margin: 6px 0; }
@keyframes circlesRise { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.community-strip { justify-content: flex-start; }
.postGroupId .profile a.small_photo { display: inline-flex !important; flex-direction: row !important; align-items: center !important; gap: 5px; margin: 0 !important; }
.postGroupId .profile a.small_photo > span { margin: 0 !important; padding: 0 !important; position: static !important; }
.postGroupId .profile svg { flex: none; }
.community-badge { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; margin: 0 0 6px; padding: 3px 10px 3px 3px; border-radius: 999px;
    background: rgba(59, 91, 255, .08); color: var(--accent) !important; font-size: .74rem; font-weight: 700; text-decoration: none !important; cursor: pointer; }
.community-badge img { width: 20px; height: 20px; border-radius: 7px; object-fit: cover; flex: none; }
.community-badge span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
html[data-theme="dark"] .community-badge { background: rgba(110, 140, 255, .16); color: #aebdff !important; }
.llyne-chatbox .image-preview { background: color-mix(in srgb, var(--bg) 94%, transparent) !important; }