/*
 * Styles for the parts added while finishing the app:
 * toasts, online dot, floating buttons, chat bubbles extras (quotes, reactions,
 * voice notes, previews), quick add, native ad cards, settings, feeds.
 */

/* ---- toasts ---- */
.llyne-toast {
    position: fixed; top: 1em; left: 50%; transform: translate(-50%, -150%);
    z-index: 2147483000; max-width: 90vw; min-width: 240px; text-align: center !important;
    transition: transform .3s ease; box-shadow: 0 .5em 1em rgba(0, 0, 0, .15);
}
.llyne-toast.show { transform: translate(-50%, 0); }

.online-dot { display: inline-block; width: .6em; height: .6em; border-radius: 50%; background: var(--green); }

/* ---- floating "new community" button (chats tab) ---- */
.llyne-fab {
    position: fixed; right: calc(50% - 270px); bottom: 5.5em; z-index: 20;
    width: 3.5em; height: 3.5em; border-radius: 50%; border: 0;
    background: var(--dark); color: #fff; box-shadow: 0 .4em 1em rgba(0, 0, 0, .3);
}

.member-picker { max-height: 12em; overflow-y: auto; }
.mini-avatar { width: 1.6em; height: 1.6em; border-radius: 50%; background-size: cover; background-position: center; margin-right: .4em; }
.unread-count { background-color: var(--secondary); color: #fff; border-radius: .5em; }

/* ---- profile card ---- */
.share-box .btn { padding: .1em .35em; }
.zee { cursor: pointer; }
.chat-presence { font-size: x-small; color: var(--gray); }

/* ---- connections modal ---- */
.suggestion, .search-result { position: relative; }
.suggestion-why { position: absolute; left: 3.8em; bottom: .1em; font-size: x-small; }
#qr-reader { margin: 0 auto; width: 15em; max-width: 100%; }
#qr-reader video { border-radius: .5em; }

/* ---- chat ---- */
.chat-scroll { display: flex; flex-direction: column; }          /* newest messages sit at the bottom */
.chat-scroll .messages { margin-top: auto; }
.chat-bottom-space { min-height: 6em; flex-shrink: 0; }
.msg-row { margin: 0; display: flow-root; width: 100%; }
.message-wrap.flash .message { box-shadow: 0 0 0 .2em var(--warning); }
.message .quoted {
    display: block; border-left: .25em solid var(--gray); background: rgba(255, 255, 255, .35);
    padding: .25em .5em; margin-bottom: .35em; border-radius: .25em; font-size: smaller;
}
.message .media { margin-bottom: .25em; }
.message .media .video { position: absolute; inset: 0; background: url(/img/play.png) center / 3em no-repeat; }
.message .voicenote { display: flex; min-width: 220px; }
.reactions { margin-top: .25em; }
.reaction { display: inline-block; background: rgba(255, 255, 255, .6); border-radius: 1em; padding: 0 .4em; margin-right: .2em; font-size: small; cursor: pointer; }
.reaction.mine { background: #fff; box-shadow: 0 0 0 1px var(--info); }
.react-picker {
    position: absolute; bottom: 100%; z-index: 1000; background: #fff; border-radius: 2em;
    padding: .2em .5em; box-shadow: 0 .3em .8em rgba(0, 0, 0, .25); white-space: nowrap;
}
.message-wrap:not(.other) .react-picker { right: 0; }
.react-picker span { font-size: 1.4em; padding: 0 .15em; cursor: pointer; }
.message-actions .options a { margin-right: .4em; }
div.message-wrap .row .message-actions .options { width: auto; }
.reply-quoted.fixed-bottom { bottom: 4em; margin-bottom: 0 !important; }

/* composer */
.llyne-chatbox { align-items: center; }
.llyne-chatbox .image-preview { position: absolute; bottom: 100%; left: 0; height: 6em; pointer-events: none; display: flex; }
.preview-item { position: relative; width: 25%; height: 100%; display: inline-block; background-size: cover; background-position: center; pointer-events: auto; border-radius: .25em; }
.preview-item.preview-doc { background-size: contain; background-repeat: no-repeat; background-color: #fff; }
.preview-item .name { position: absolute; bottom: 3px; left: 0; right: 0; background: rgba(0, 0, 0, .5); color: #fff; font-size: 10px; padding: 2px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.preview-item .progress-bar { position: absolute; bottom: 0; left: 0; height: 3px; background: #4CAF50; width: 0; }
.preview-item.uploaded .progress-bar { background: var(--info); }
.preview-item .remove-btn { position: absolute; top: 2px; right: 2px; background: rgba(0, 0, 0, .5); color: #fff; border: none; border-radius: 50%; width: 20px; height: 20px; font-size: 12px; line-height: 1; cursor: pointer; }
.vn-recorder { display: flex; align-items: center; flex: 1; }
.vn-recorder .vnTimer { font-weight: bold; margin: 0 .5em; }
.vn-scope { height: 2.5em; width: 100%; }
.vn-ready { flex: 1; align-self: center; }
.attach-label { margin: .5em; cursor: pointer; }

/* ---- feeds ---- */
.feed-grid { margin: 0 auto; }
.feed-grid::after { content: ''; display: block; clear: both; }
.post-item.unseen { border-color: transparent !important; }
.post-item .post-menu { position: absolute; right: .4em; top: .4em; z-index: 3; }
.post-item .post-content { position: relative; }
.new-posts-pill {
    position: sticky; top: 4.5em; z-index: 15; margin: .5em auto; width: max-content;
    background: var(--dark); color: #fff; border-radius: 2em; padding: .3em 1em; font-size: small;
}
.compose-thumb { width: 100px; }
.compose-thumb img { width: 100%; height: 100px; object-fit: cover; }
.compose-thumb .delete-media { top: 0; right: 0; }
.compose-play { top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 2em; color: #fff; }

/* ---- native ad cards: same box as a post, clearly labelled ---- */
.post-item.ad-item { background: linear-gradient(180deg, rgba(215, 189, 135, .18), transparent); }
.ad-item .ad-head { display: flex; justify-content: space-between; align-items: center; font-size: small; margin-bottom: .35em; }
.ad-item .ad-advertiser { font-weight: bold; color: var(--dark); }
.ad-item .ad-label {
    font-size: x-small; text-transform: uppercase; letter-spacing: .05em;
    border: 1px solid var(--gray); border-radius: .3em; padding: 0 .35em; color: var(--gray);
}
.ad-item .ad-media img { width: 100%; border-radius: .35em; display: block; aspect-ratio: 1 / 1; object-fit: cover; }
.ad-item .ad-title { font-weight: bold; margin-top: .35em; }
.ad-item .ad-body { font-size: small; color: #444; }
.ad-item .ad-cta { margin-top: .4em; width: 100%; text-align: center !important; }
.ad-adsense { min-height: 220px; }        /* reserve room so the grid doesn't jump when the ad fills */

/* ---- settings / admin ---- */
.cropper-box { margin: .75em auto; max-width: 320px; }
.cropper-box > div { max-height: 320px; }
.settings-page .finesse { display: flex; }
.ads-admin table { font-size: small; }
.ads-admin td, .ads-admin th { text-align: left !important; vertical-align: middle !important; }

/* messages loaded into the profile modal */
#profileModal .modal-content { min-height: 10em; }
.fab-wrap { position: fixed; right: calc(50% - 270px); bottom: 5.5em; z-index: 20; }
.fab-wrap .llyne-fab { position: static; }
@media (max-width: 570px) { .fab-wrap { right: 1em; } }
.profile-close { position: absolute; left: .6em; top: .3em; z-index: 5; }