/* Shared Holly brand palette and wordmark for standalone platform pages. */
:root {
    --primary: #b8203d !important;
    --primary-light: #e58191 !important;
    --primary-dark: #8e1830 !important;
    --primary-color: #b8203d !important;
    --brand: #b8203d !important;
    --brand-soft: #f8e8eb !important;
    --outgoing: #b8203d !important;
    --accent: #c51f3a !important;
    --secondary: #d9384b !important;
    --danger: #a91832 !important;
    --danger-color: #a91832 !important;
    --success: #c51f3a !important;
    --success-color: #c51f3a !important;
    --error-color: #a91832 !important;
    --warning-bg: #fae9ec !important;
    --warning-text: #8e1830 !important;
    --green: #b8203d !important;
    --warning: #d9384b !important;
    --warning-color: #d9384b !important;
    --light: #fbf6f7 !important;
    --canvas: #fbf6f7 !important;
    --background: #fbf6f7 !important;
    --paper: #fff !important;
    --white: #fff !important;
    --dark: #342027 !important;
    --ink: #342027 !important;
    --text-color: #342027 !important;
    --gray: #816d74 !important;
    --muted: #816d74 !important;
    --text-light: #816d74 !important;
    --light-gray: #ecdde0 !important;
    --line: #ecdde0 !important;
    --border-color: #ecdde0 !important;
    --surface: #fff !important;
    --dark-bg: #35151f !important;
    --darker-bg: #210d13 !important;
}

.brand,
.logo,
.profile-brand,
.reels-brand,
.navbar-brand {
    display: inline-flex !important;
    align-items: center !important;
    width: 136px !important;
    height: 42px !important;
    flex: 0 0 auto;
    overflow: hidden;
    font-size: 0 !important;
    line-height: 0 !important;
    text-indent: 0 !important;
    color: transparent !important;
    text-decoration: none;
}

.brand::before,
.logo::before,
.profile-brand::before,
.reels-brand::before,
.navbar-brand::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: url("../images/holly-logo.svg") left center / contain no-repeat;
}

.logo img {
    display: none !important;
}

.message.success,
.success-message,
.feedback.success {
    background-color: #fae9ec !important;
    border-color: #e58191 !important;
    color: #8e1830 !important;
}

.action.voice:hover,
.button.secondary,
.group-icon,
.notification.unread,
.conversation-link.active,
.chat-call-button:hover {
    background-color: #f8e8eb !important;
    border-color: #e58191 !important;
    color: #8e1830 !important;
}

.online-dot,
.presence-dot,
.status-online {
    background-color: #d9384b !important;
}

.call-unavailable-page main > a {
    background-color: var(--primary) !important;
}

.call-unavailable-page {
    background: #fbf6f7 !important;
    color: #342027 !important;
}

#room-name-wrapper {
    background: var(--primary) !important;
}

#room-name-wrapper span#room-name,
#room-name-wrapper #user-count {
    color: #f4c1c9 !important;
}

.reconnect-callout,
.call-callout {
    border-left-color: var(--primary) !important;
    background-color: #fae9ec !important;
}

.reconnect-callout i,
.call-callout > i,
.call-callout .call-arrow {
    color: var(--primary) !important;
}

.feed-shortcut:hover,
.feed-shortcut:focus-visible,
.post-action:hover,
.post-action:focus-visible,
.reaction-trigger[aria-pressed="true"],
.reaction-count-trigger:hover,
.reaction-count-trigger:focus-visible {
    background-color: #f8e8eb !important;
    color: var(--primary) !important;
}

button[type="submit"],
.btn-primary,
.button-primary,
.post-btn,
.share-submit,
.send-comment-btn,
.send-button {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
}

:focus-visible {
    outline-color: var(--primary) !important;
}

.browser-notification-dialog {
    width: 420px;
    max-width: calc(100vw - 32px);
    box-sizing: border-box;
    padding: 0;
    border: 1px solid #ecdde0;
    border-radius: 10px;
    color: #342027;
    box-shadow: 0 18px 55px rgba(90, 18, 38, .25);
}

.browser-notification-dialog::backdrop {
    background: rgba(52, 32, 39, .48);
}

.browser-notification-panel {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 26px;
}

.browser-notification-icon {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 50%;
    background: #f8e8eb;
    color: #b8203d;
    font-size: 18px;
}

.browser-notification-panel h2 {
    margin: 16px 0 7px;
    font-size: 20px;
}

.browser-notification-panel p {
    margin: 0;
    color: #816d74;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.browser-notification-actions {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    margin-top: 22px;
}

.browser-notification-actions button {
    min-height: 40px;
    padding: 8px 13px;
    border: 1px solid #ecdde0;
    border-radius: 6px;
    background: #fff;
    color: #5e454d;
    font: inherit;
    font-weight: 650;
    cursor: pointer;
}

.browser-notification-actions .browser-notification-allow {
    border-color: #b8203d;
    background: #b8203d;
    color: #fff;
}

.browser-notification-actions .browser-notification-later {
    border-color: #ecdde0 !important;
    background: #fff !important;
    color: #5e454d !important;
}

.header {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    width: 100%;
    box-sizing: border-box;
    align-items: center;
    justify-content: space-between;
    padding: 10px max(15px, calc((100vw - 1320px) / 2));
    border-bottom: 1px solid var(--light-gray);
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 3px 14px rgba(65, 21, 35, .07);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

body.account-flow-page {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    background: var(--light);
    color: var(--dark);
}

body.account-flow-page > .account-flow-content {
    display: flex;
    width: min(440px, calc(100% - 32px));
    max-width: none;
    box-sizing: border-box;
    flex: 1 0 auto;
    flex-direction: column;
    justify-content: center;
    margin: 0 auto;
    padding: 28px 0;
}

body.account-flow-page .auth-card,
body.account-flow-page .account-flow-card {
    width: 100%;
    max-width: 400px;
    box-sizing: border-box;
    margin: 0 auto;
    border: 1px solid var(--light-gray);
    border-radius: 8px;
    background: var(--white);
    box-shadow: var(--shadow);
    text-align: left;
}

body.account-flow-page .auth-card { padding: 30px; }
body.account-flow-page .account-flow-card { padding: 30px; }

body.account-flow-page .auth-title,
body.account-flow-page .account-flow-card h1 { color: var(--dark); text-align: left; }
body.account-flow-page .account-flow-card p { color: var(--gray); }
body.account-flow-page .account-flow-card a,
body.account-flow-page .auth-link { color: var(--primary); }

@media (max-width: 480px) {
    body.account-flow-page > .account-flow-content { width: calc(100% - 28px); padding: 20px 0; }
    body.account-flow-page .auth-card,
    body.account-flow-page .account-flow-card { padding: 24px 20px; }
}

.header .logo {
    display: flex !important;
    align-items: center !important;
    width: 140px !important;
    height: auto !important;
    overflow: visible;
}

.header .logo::before { display: none; }
.header .logo img { display: block !important; width: 100%; height: auto; }
.header-actions { display: flex; align-items: center; gap: 15px; }

.search-btn,
.menu-btn {
    display: flex;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 7px;
    background: #faecef;
    color: var(--primary);
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.search-btn:hover,
.menu-btn:hover { background: #f5dfe4; color: var(--primary-dark); }
.search-btn:focus-visible,
.menu-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.header-messages-btn {
    position: relative;
    display: none;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--light-gray);
    color: var(--dark);
    text-decoration: none;
}

.header-messages-btn .notification-count {
    position: absolute;
    top: -3px;
    right: -4px;
    min-width: 17px;
    height: 17px;
    margin: 0;
    padding: 0 4px;
    font-size: 10px;
}

.header-profile-btn {
    display: none;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    overflow: hidden;
    border: 2px solid var(--light-gray);
    border-radius: 50%;
}

.header-profile-btn img { display: block; width: 100%; height: 100%; object-fit: cover; }

.search-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 60px;
    display: none;
    width: min(360px, calc(100vw - 30px));
    padding: 12px;
    border-radius: var(--border-radius);
    background: var(--white);
    box-shadow: var(--shadow);
}

.search-panel.show { display: block; }
.search-panel form { display: flex; gap: 8px; }
.search-panel input { min-width: 0; flex: 1; padding: 10px 12px; border: 1px solid var(--light-gray); border-radius: 20px; font-size: 15px; }
.search-panel button { width: 40px; border: 0; border-radius: 50%; background: var(--primary); color: var(--white); cursor: pointer; }

#menu-dropdown {
    position: fixed;
    top: 68px;
    right: max(15px, calc((100vw - 1320px) / 2));
    z-index: 100;
    display: none;
    width: 250px;
    padding: 6px;
    border: 1px solid var(--light-gray);
    border-radius: 9px;
    background: var(--white);
    box-shadow: 0 14px 36px rgba(65, 21, 35, .16);
}

#menu-dropdown.show { display: block; }
.menu-item { display: flex; min-height: 42px; align-items: center; gap: 11px; padding: 8px 10px; border-radius: 6px; color: var(--dark); text-decoration: none; transition: background-color .15s ease, color .15s ease; }
.menu-item:hover { background: #faecef; color: var(--primary); }
.menu-item i { width: 18px; color: var(--primary); text-align: center; }
.menu-item:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.menu-item-button { width: 100%; border: 0; background: transparent; font: inherit; text-align: left; cursor: pointer; }
.menu-divider { height: 1px; margin: 8px 0; background: var(--light-gray); }

.notification-count {
    display: inline-flex;
    min-width: 19px;
    height: 19px;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    padding: 0 5px;
    border-radius: 10px;
    background: var(--danger);
    color: var(--white);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

.notification-count[hidden] { display: none; }

.post-actions {
    display: flex;
    align-items: stretch;
    gap: 8px;
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px solid var(--light-gray);
}

.post-actions > .post-action { flex: 1 1 0; }
.post-action { display: flex; min-width: 0; height: 44px; align-items: center; justify-content: center; gap: 6px; margin: 0; padding: 0; border: 0; border-radius: 7px; background: rgba(96, 25, 44, .035); color: var(--gray); font: inherit; font-size: 15px; font-weight: 600; text-decoration: none; cursor: pointer; }
.post-action:hover,
.post-action:focus-visible { background: rgba(184, 32, 61, .09); color: var(--primary); }
.post-action.liked { color: var(--danger); }
.post-action .action-count { display: inline-block; color: inherit; font-size: 12px; font-weight: 700; line-height: 1; white-space: nowrap; }
.post-action.reaction-control { position: relative; overflow: visible; }

.top-supporters { margin-top: 8px; padding: 7px 9px; border-radius: 6px; background: #fffdf8; }
.top-supporters__list { gap: 5px; margin-top: 5px; }
.top-supporters__item { min-height: 27px; padding: 3px 7px 3px 4px; }

@media (max-width: 480px) {
    .header { min-height: 54px; padding: 8px 12px; }
    .header .logo { width: 112px !important; }
    .header-actions { gap: 7px; }
    .search-btn, .menu-btn { width: 40px; height: 40px; }
    .header-messages-btn { display: flex; }
    .header-profile-btn { display: block; }
    #menu-dropdown { top: 58px; right: 10px; left: auto; width: min(290px, calc(100vw - 20px)); max-height: calc(100dvh - 80px); overflow-y: auto; }
    .search-panel { right: 10px; left: 10px; width: auto; }
    .search-panel input { min-width: 0; flex: 1; }
    .search-panel button { flex: 0 0 42px; }
}