/**
 * DropX Prime System — Light Theme Final Surface Overrides
 *
 * This layer is intentionally loaded AFTER legacy view/component styles.
 * It does not change structure or behavior; it repaints remaining legacy
 * dark surfaces so Light is a complete, independent visual theme.
 * No @import. No !important.
 */

body.light-mode {
    --dx-light-border: rgba(121, 91, 55, .20);
    --dx-light-border-soft: rgba(121, 91, 55, .12);
    --dx-light-surface: #eadfce;
    --dx-light-surface-2: #dfcfb8;
    --dx-light-surface-3: #d5c2a7;
    --dx-light-input: #e0d0ba;
    --dx-light-text: #33271d;
    --dx-light-muted: #6d5d4d;
}

/* -------------------------------------------------------------------------
   KNOWLEDGE BASE / SYSTEM NEWS
   ------------------------------------------------------------------------- */
body.light-mode .kb-header-panel,
body.light-mode .blog-admin-drawer {
    background: linear-gradient(145deg, #eee3d2 0%, #e1d1ba 100%);
    border-color: var(--dx-light-border);
    box-shadow: 0 14px 34px rgba(74, 55, 36, .14);
    color: var(--dx-light-text);
}

body.light-mode .kb-header-title,
body.light-mode .kb-card-title,
body.light-mode .kb-card-title a {
    color: var(--dx-light-text);
}

body.light-mode .kb-header-subtitle,
body.light-mode .kb-card-excerpt,
body.light-mode .kb-card-footer,
body.light-mode .blog-news-item-date {
    color: var(--dx-light-muted);
}

body.light-mode .kb-header-actions .search-input-container input {
    background: linear-gradient(180deg, #e3d4bf, #d6c3a8);
    border-color: var(--dx-light-border);
    color: var(--dx-light-text);
    box-shadow: inset 0 1px 3px rgba(74, 55, 36, .08);
}

body.light-mode .kb-article-card {
    background: linear-gradient(180deg, #f0e5d5 0%, #dfcfb9 100%);
    border-color: var(--dx-light-border);
    box-shadow: 0 12px 28px rgba(74, 55, 36, .12);
}

body.light-mode .kb-article-card:hover {
    border-color: rgba(149, 102, 28, .34);
    box-shadow: 0 16px 34px rgba(74, 55, 36, .17);
}

body.light-mode .kb-card-body {
    background: transparent;
}

body.light-mode .kb-card-footer {
    border-top-color: var(--dx-light-border-soft);
}

/* -------------------------------------------------------------------------
   PROFILE — QUICK ACCESS / MEDIA SURFACES
   ------------------------------------------------------------------------- */
body.light-mode .profile-quick-card,
body.light-mode .profile-sidebar-display .profile-section-card,
body.light-mode .profile-media-album-card,
body.light-mode .profile-media-category-card {
    background: linear-gradient(145deg, #eee2d1 0%, #ddccb5 100%);
    border-color: var(--dx-light-border);
    color: var(--dx-light-text);
    box-shadow: 0 14px 32px rgba(74, 55, 36, .13);
}

body.light-mode .profile-quick-title,
body.light-mode .profile-feed-heading h2,
body.light-mode .profile-media-album-head h3 {
    color: var(--dx-light-text);
}

body.light-mode .profile-quick-card a,
body.light-mode .profile-quick-card small,
body.light-mode .quick-friend-group label,
body.light-mode .profile-feed-heading > span,
body.light-mode .profile-media-album-head span,
body.light-mode .profile-media-empty {
    color: var(--dx-light-muted);
}

/* -------------------------------------------------------------------------
   PUBLISHER — LAUNCHER + FULL EDITOR MODAL
   ------------------------------------------------------------------------- */
body.light-mode .post-publisher-launcher {
    background:
        radial-gradient(circle at 88% 0%, rgba(149, 102, 28, .10), transparent 34%),
        linear-gradient(145deg, #5a4a3b 0%, #3f342b 100%);
    border-color: rgba(149, 102, 28, .34);
    color: #f5ead9;
    box-shadow: 0 14px 32px rgba(74, 55, 36, .18), inset 0 1px 0 rgba(255,244,226,.10);
}

body.light-mode .post-publisher-launcher .publisher-launcher-prompt {
    background: rgba(255, 247, 235, .10);
    border-color: rgba(255, 244, 226, .16);
    color: rgba(255, 246, 232, .82);
}

body.light-mode .post-publisher-launcher .publisher-launcher-icon {
    background: rgba(255, 247, 235, .08);
    color: #f0dfc5;
}

body.light-mode .post-publisher-modal-panel {
    background:
        radial-gradient(circle at 88% 0%, rgba(149,102,28,.10), transparent 32%),
        linear-gradient(145deg, #eee2d1 0%, #d9c5a9 100%);
    border-color: rgba(149,102,28,.34);
    box-shadow: 0 24px 64px rgba(62,45,29,.28), inset 0 1px 0 rgba(255,248,236,.55);
}

body.light-mode .post-publisher-modal-header {
    border-bottom-color: var(--dx-light-border-soft);
}

body.light-mode .post-publisher-modal-heading h2 {
    color: var(--dx-light-text);
}

body.light-mode .post-publisher-modal-close {
    background: rgba(255,247,235,.48);
    border-color: var(--dx-light-border);
    color: var(--dx-light-muted);
}

body.light-mode .post-publisher-modal-body .post-publisher-card {
    background: linear-gradient(145deg, #eadfce 0%, #dfcfb9 100%);
    border-color: var(--dx-light-border);
    color: var(--dx-light-text);
}

body.light-mode .post-publisher-modal-footer {
    border-top-color: var(--dx-light-border-soft);
    color: var(--dx-light-muted);
}

/* -------------------------------------------------------------------------
   POST CARDS — ensure the final social card repaint wins over legacy rules
   ------------------------------------------------------------------------- */
body.light-mode .post-card {
    background: linear-gradient(180deg, #fbf8f2 0%, #efe6d8 100%);
    border-color: rgba(121,91,55,.18);
    color: var(--dx-light-text);
    box-shadow: 0 10px 28px rgba(74,55,36,.12), inset 0 1px 0 rgba(255,248,236,.72);
}

body.light-mode .post-card .post-header {
    border-bottom-color: var(--dx-light-border-soft);
}

body.light-mode .post-card .post-actions-footer,
body.light-mode .post-card .post-reactions-bar,
body.light-mode .post-card .post-comments-section {
    background: rgba(255,248,238,.62);
    border-color: var(--dx-light-border-soft);
}

/* -------------------------------------------------------------------------
   GROUP VIEW — PINNED STRIP + EDITOR INPUTS
   ------------------------------------------------------------------------- */
body.light-mode .group-pinned-section {
    background: linear-gradient(145deg, #eadfce 0%, #d9c6aa 100%);
    border-color: var(--dx-light-border);
    box-shadow: 0 12px 28px rgba(74,55,36,.12);
}

body.light-mode .group-pinned-card {
    background: rgba(255,248,237,.52);
    border-color: var(--dx-light-border-soft);
}

body.light-mode .group-pinned-card:hover {
    background: rgba(255,248,237,.78);
    border-color: rgba(149,102,28,.34);
}

body.light-mode .group-pinned-card-image,
body.light-mode .group-pinned-card-image-empty {
    background: #d0bda2;
    border-color: var(--dx-light-border-soft);
}

body.light-mode .group-pinned-card-content,
body.light-mode .group-pinned-author,
body.light-mode .group-pinned-title {
    color: var(--dx-light-text);
}

body.light-mode .group-pinned-card-meta,
body.light-mode .group-pinned-card-footer {
    color: var(--dx-light-muted);
    border-color: var(--dx-light-border-soft);
}

body.light-mode .group-main-editor-area,
body.light-mode .group-comment-input {
    background: linear-gradient(180deg, #e3d4bf 0%, #d5c1a6 100%);
    color: var(--dx-light-text);
    border-color: var(--dx-light-border);
    box-shadow: inset 0 2px 8px rgba(74,55,36,.08);
}

body.light-mode .cyber-format-toolbar {
    background: linear-gradient(180deg, #d2bea3 0%, #c4ad90 100%);
    border-color: var(--dx-light-border);
}

body.light-mode .format-btn {
    background: rgba(255,248,237,.36);
    color: var(--dx-light-muted);
    border-color: var(--dx-light-border-soft);
}

/* -------------------------------------------------------------------------
   HOME / FEED — keep the social surface consistently Light
   ------------------------------------------------------------------------- */
body.light-mode .feed-timeline-center .post-publisher-card {
    background: linear-gradient(145deg, #eadfce 0%, #d9c5a9 100%);
}

body.light-mode .feed-sidebar-left > *,
body.light-mode .feed-sidebar-right > * {
    color: var(--dx-light-text);
}

/* -------------------------------------------------------------------------
   BLOG COMMENTS — LIGHT SURFACE + STAFF INDICATOR
   Root comments and replies must share the same Light theme. Leadership
   comments keep the red staff treatment in Light just like replies.
   ------------------------------------------------------------------------- */
body.light-mode .blog-comments-container {
    color: var(--dx-light-text);
}

body.light-mode .blog-comment-card,
body.light-mode .blog-reply-item {
    background: linear-gradient(145deg, #f1e5d3 0%, #dfcdb2 100%);
    border-color: rgba(121, 91, 55, .22);
    color: var(--dx-light-text);
    box-shadow: 0 8px 22px rgba(74, 55, 36, .10), inset 0 1px 0 rgba(255, 248, 236, .56);
}

body.light-mode .blog-comment-author-name {
    color: var(--dx-light-text);
}

body.light-mode .blog-comment-time,
body.light-mode .blog-action-link,
body.light-mode .blog-news-item-date {
    color: var(--dx-light-muted);
}

body.light-mode .blog-comment-text {
    color: #514131;
}

body.light-mode .blog-comment-avatar {
    border-color: rgba(121, 91, 55, .24);
}

body.light-mode .blog-comment-replies-list {
    border-left-color: rgba(178, 123, 31, .42);
}

/* Vezetőségi / moderátori komment: a Light témában is piros jelzés. */
body.light-mode .blog-comment-card.staff-comment-glow,
body.light-mode .blog-reply-item.staff-comment-glow {
    background: linear-gradient(180deg, rgba(104, 35, 35, .94) 0%, rgba(72, 35, 31, .94) 100%);
    border-color: rgba(255, 67, 67, .90);
    color: #fff4f0;
    box-shadow: 0 0 18px rgba(255, 38, 38, .30), inset 0 0 12px rgba(255, 38, 38, .10);
}

body.light-mode .blog-comment-card.staff-comment-glow .blog-comment-author-name,
body.light-mode .blog-comment-card.staff-comment-glow .blog-comment-text,
body.light-mode .blog-comment-card.staff-comment-glow .blog-comment-time,
body.light-mode .blog-reply-item.staff-comment-glow .blog-comment-author-name,
body.light-mode .blog-reply-item.staff-comment-glow .blog-comment-text,
body.light-mode .blog-reply-item.staff-comment-glow .blog-comment-time {
    color: #fff4f0;
}

body.light-mode .blog-comment-card.staff-comment-glow .blog-action-link,
body.light-mode .blog-reply-item.staff-comment-glow .blog-action-link {
    color: #ffd8d2;
}

body.light-mode .blog-comment-card.staff-comment-glow .delete-comment-btn,
body.light-mode .blog-reply-item.staff-comment-glow .delete-comment-btn {
    color: #ffb0a8;
    border-color: rgba(255, 87, 87, .62);
    background: rgba(70, 12, 12, .22);
}

body.light-mode .staff-badge-red {
    background: rgba(255, 56, 56, .16);
    border-color: rgba(255, 64, 64, .72);
    color: #ff3434;
    text-shadow: 0 0 6px rgba(255, 56, 56, .28);
}

body.light-mode .blog-comment-card.staff-comment-glow .staff-badge-red,
body.light-mode .blog-reply-item.staff-comment-glow .staff-badge-red {
    background: rgba(255, 255, 255, .10);
    border-color: rgba(255, 255, 255, .40);
    color: #fff;
    text-shadow: none;
}

body.light-mode .blog-reply-form {
    margin-top: 12px;
}


/* ========================================================================
   V15 — LIGHT THEME OVERLAY / POPUP SURFACES
   The component styles were historically written for the Dark theme. These
   rules repaint the interactive overlays as warm beige surfaces in Light
   without changing their structure or JS behavior.
   ======================================================================== */

/* -------------------------------------------------------------------------
   PUBLISHER / POST COMPOSER MODAL
   ------------------------------------------------------------------------- */
body.light-mode .post-publisher-modal-overlay,
body.light-mode .post-publisher-modal,
body.light-mode .post-publisher-modal-panel {
    background:
        radial-gradient(circle at 88% 0%, rgba(149,102,28,.10), transparent 34%),
        linear-gradient(145deg, #eee3d2 0%, #d8c5aa 100%);
    border-color: rgba(121,91,55,.28);
    color: var(--dx-light-text);
    box-shadow: 0 28px 72px rgba(58,42,27,.30), inset 0 1px 0 rgba(255,248,235,.58);
}

body.light-mode .post-publisher-modal-header,
body.light-mode .post-publisher-modal-footer {
    background: rgba(255,248,238,.38);
    border-color: var(--dx-light-border-soft);
    color: var(--dx-light-text);
}

body.light-mode .post-publisher-modal-body,
body.light-mode .post-publisher-modal-body .post-publisher-card,
body.light-mode .post-publisher-modal-body .publisher-editor,
body.light-mode .post-publisher-modal-body .publisher-editor-card {
    background: transparent;
    color: var(--dx-light-text);
}

body.light-mode .post-publisher-modal-body input,
body.light-mode .post-publisher-modal-body textarea,
body.light-mode .post-publisher-modal-body select,
body.light-mode .post-publisher-modal-body .settings-input {
    background: rgba(255,248,238,.72);
    border-color: var(--dx-light-border);
    color: var(--dx-light-text);
}

body.light-mode .post-publisher-modal-body input::placeholder,
body.light-mode .post-publisher-modal-body textarea::placeholder {
    color: #8a7865;
}

/* -------------------------------------------------------------------------
   POPUP CHAT — header, bubbles, composer and dropdown
   ------------------------------------------------------------------------- */
body.light-mode .chat-popup {
    background: linear-gradient(145deg, #efe4d4 0%, #d7c4a8 100%);
    border-color: rgba(121,91,55,.34);
    box-shadow: 0 20px 52px rgba(53,38,24,.32), inset 0 1px 0 rgba(255,248,235,.55);
}

body.light-mode .chat-popup-header {
    background: linear-gradient(180deg, #e5d6c1 0%, #cdb697 100%);
    border-bottom-color: rgba(113,77,31,.24);
    color: #6e4b14;
    text-shadow: 0 1px 2px rgba(255,247,228,.62);
}

body.light-mode .chat-popup-header .header-name,
body.light-mode .chat-popup-header .header-dropdown a:hover,
body.light-mode .chat-popup-header .chat-act-btn:hover {
    color: #8a5b12;
}

body.light-mode .chat-popup-header .header-avatar {
    border-color: #b27a1e;
    box-shadow: 0 0 8px rgba(178,122,30,.24);
}

body.light-mode .chat-popup-header .chat-act-btn,
body.light-mode .chat-popup-header .header-dropdown {
    background: rgba(255,248,236,.72);
    border-color: rgba(121,91,55,.25);
    color: #5d4b3a;
    box-shadow: 0 8px 20px rgba(53,38,24,.16);
}

body.light-mode .chat-popup-header .header-dropdown a {
    color: #5d4b3a;
}

body.light-mode .chat-popup-header .header-dropdown a:hover {
    background: rgba(149,102,28,.12);
}

body.light-mode .chat-popup-messages {
    background: linear-gradient(180deg, #e9ddcd 0%, #d9c7ad 100%);
}

body.light-mode .chat-popup-messages .msg-author {
    color: #6d5d4d;
    text-shadow: none;
}

body.light-mode .chat-popup-messages .msg-right .msg-bubble {
    background: linear-gradient(135deg, #f0c768 0%, #d99a28 100%);
    color: #33271d;
    background-image: none;
    box-shadow: 0 3px 10px rgba(96,66,25,.18);
}

body.light-mode .chat-popup-messages .msg-left .msg-bubble {
    background: #f7f0e5;
    color: #3d3025;
    box-shadow: 0 3px 10px rgba(74,55,36,.12);
}

body.light-mode .chat-popup-messages .msg-text,
body.light-mode .chat-popup-messages .msg-time {
    text-shadow: none;
}

body.light-mode .chat-popup-messages .msg-left .msg-time,
body.light-mode .chat-popup-messages .msg-time {
    color: #7a6a59;
}

body.light-mode .chat-popup-form {
    background: linear-gradient(180deg, #e1d1bb 0%, #cdb596 100%);
    border-top-color: rgba(113,77,31,.20);
}

body.light-mode .chat-popup-form textarea {
    background: rgba(255,248,238,.86);
    border-color: rgba(121,91,55,.25);
    color: #3d3025;
    box-shadow: inset 0 1px 3px rgba(74,55,36,.08);
}

body.light-mode .chat-popup-form textarea:focus {
    border-color: rgba(149,102,28,.60);
    box-shadow: 0 0 0 2px rgba(149,102,28,.10);
}

body.light-mode .chat-popup-form .chat-tool-btn,
body.light-mode .chat-popup-header .chat-act-btn {
    background: rgba(255,248,238,.70);
    border-color: rgba(121,91,55,.25);
    color: #6d5d4d;
}

/* -------------------------------------------------------------------------
   MESSAGE PAGE — sidebar, conversation, media tab and composer
   ------------------------------------------------------------------------- */
body.light-mode .message-app-layout,
body.light-mode .message-main-content,
body.light-mode .conversation-list-sidebar,
body.light-mode .sidebar-panel,
body.light-mode .message-view-tabs,
body.light-mode .message-list,
body.light-mode .message-input-area,
body.light-mode .new-conversation-area {
    background: linear-gradient(145deg, #eee3d2 0%, #d9c6aa 100%);
    color: var(--dx-light-text);
    border-color: var(--dx-light-border);
}

body.light-mode .conversation-list-sidebar {
    background: linear-gradient(180deg, #dfcfb8 0%, #cdb596 100%);
}

body.light-mode .message-view-tabs .tab-btn,
body.light-mode .conversation-item,
body.light-mode .media-grid-item,
body.light-mode .search-and-new-message,
body.light-mode .media-panel-header,
body.light-mode .conversation-header {
    border-color: var(--dx-light-border-soft);
    color: #5d4b3a;
}

body.light-mode .conversation-item:hover,
body.light-mode .conversation-item.active,
body.light-mode .message-view-tabs .tab-btn.active {
    background: rgba(149,102,28,.12);
    color: #6e4b14;
}

body.light-mode #conversation-search,
body.light-mode #message-content-input,
body.light-mode #new-message-content-input,
body.light-mode .message-input-area textarea,
body.light-mode .new-conversation-area textarea {
    background: rgba(255,248,238,.82);
    border-color: var(--dx-light-border);
    color: #3d3025;
}

body.light-mode .message-item.my-message .message-bubble {
    background: linear-gradient(135deg, #f0c768 0%, #d99a28 100%);
    color: #33271d;
    background-image: none;
}

body.light-mode .message-item.other-message .message-bubble {
    background: #f7f0e5;
    color: #3d3025;
}

body.light-mode .message-content,
body.light-mode .msg-text,
body.light-mode .conversation-title,
body.light-mode .conversation-current-title {
    color: #3d3025;
}

/* -------------------------------------------------------------------------
   GLOBAL MEDIA LIGHTBOX / ALBUM VIEWER
   ------------------------------------------------------------------------- */
body.light-mode #image-modal-overlay {
    background: rgba(53,38,24,.34);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

body.light-mode .custom-split-lightbox-container {
    background: linear-gradient(145deg, #efe4d4 0%, #d8c5aa 100%);
    border-color: rgba(121,91,55,.36);
    box-shadow: 0 30px 90px rgba(53,38,24,.34), 0 0 42px rgba(149,102,28,.10);
}

body.light-mode .lightbox-left-pane {
    background: radial-gradient(circle at center, rgba(232,219,201,.28), rgba(33,27,22,.96) 72%);
}

body.light-mode .lightbox-right-pane {
    background: linear-gradient(180deg, #e6d8c5 0%, #d0b99a 100%);
    border-left-color: rgba(121,91,55,.18);
    color: #3d3025;
}

body.light-mode .lightbox-post-text-wrap,
body.light-mode .lightbox-media-focus,
body.light-mode .lightbox-media-comment {
    background: rgba(255,248,238,.58);
    border-color: rgba(121,91,55,.18);
    color: #3d3025;
}

body.light-mode .lightbox-post-text,
body.light-mode .lightbox-media-comment-body,
body.light-mode .lightbox-media-comment-head strong,
body.light-mode .lightbox-media-reactions-summary,
body.light-mode .lightbox-media-reaction-trigger {
    color: #3d3025;
}

body.light-mode .lightbox-post-text:not(.expanded)::after {
    background: linear-gradient(180deg, transparent, rgba(230,216,196,.98));
}

body.light-mode .lightbox-media-comment-head span,
body.light-mode .lightbox-media-reactions-summary small,
body.light-mode .lightbox-media-focus-head span,
body.light-mode .lightbox-media-comment-time {
    color: #766452;
}

body.light-mode .lightbox-media-reaction-trigger,
body.light-mode .lightbox-media-comment-input input,
body.light-mode .lightbox-media-reaction-options,
body.light-mode .lightbox-bottom-thumbnails-bar,
body.light-mode .lightbox-counter {
    background: rgba(255,248,238,.82);
    border-color: rgba(121,91,55,.22);
    color: #4b392b;
}

body.light-mode .lightbox-media-comment-input input::placeholder {
    color: #8a7865;
}

body.light-mode .lightbox-media-reaction-options {
    box-shadow: 0 12px 26px rgba(53,38,24,.20);
}

body.light-mode .lightbox-media-reaction {
    background: rgba(255,248,238,.82);
    border-color: rgba(121,91,55,.16);
}

body.light-mode .lightbox-counter {
    color: #5d4b3a;
}

body.light-mode .lightbox-nav-btn {
    background: rgba(255,248,238,.78);
    border-color: rgba(149,102,28,.34);
    color: #8a5b12;
    box-shadow: 0 6px 16px rgba(53,38,24,.18);
}

body.light-mode .lightbox-bottom-thumbnails-bar {
    box-shadow: 0 10px 22px rgba(53,38,24,.18);
}

/* -------------------------------------------------------------------------
   MEDIA EMPTY / REACTION / COMMENT OVERLAYS
   ------------------------------------------------------------------------- */
body.light-mode .emoji-picker-modal,
body.light-mode .emoji-picker-modal-content,
body.light-mode .reaction-options-popup,
body.light-mode .reaction-option {
    background: linear-gradient(145deg, #eee3d2 0%, #d7c2a5 100%);
    border-color: rgba(121,91,55,.24);
    color: #3d3025;
    box-shadow: 0 18px 44px rgba(53,38,24,.22);
}

body.light-mode .reaction-option:hover,
body.light-mode .reaction-option.active {
    background: rgba(149,102,28,.12);
    color: #8a5b12;
}

/* -------------------------------------------------------------------------
   HEADER / PROFILE DROPDOWN MENUS + SMALL FLOATING PANELS
   ------------------------------------------------------------------------- */
body.light-mode .header-dropdown-menu,
body.light-mode .profile-dropdown-menu,
body.light-mode .notification-dropdown,
body.light-mode .message-dropdown,
body.light-mode .quick-card-popover,
body.light-mode .quick-card-popover-content {
    background: linear-gradient(155deg, #e7d8c4 0%, #cdb596 100%);
    border-color: rgba(121,91,55,.30);
    color: #3d3025;
    box-shadow: 0 20px 48px rgba(53,38,24,.26);
}

body.light-mode .header-dropdown-menu a,
body.light-mode .notification-dropdown a,
body.light-mode .message-dropdown a,
body.light-mode .quick-card-popover a {
    color: #4b392b;
}

body.light-mode .header-dropdown-menu a:hover,
body.light-mode .notification-dropdown a:hover,
body.light-mode .message-dropdown a:hover,
body.light-mode .quick-card-popover a:hover {
    background: rgba(149,102,28,.10);
    color: #8a5b12;
}

/* Keep scrollbars consistent with the warm theme. */
body.light-mode .chat-popup-messages,
body.light-mode .message-list,
body.light-mode .lightbox-right-pane,
body.light-mode .lightbox-media-comments-stream {
    scrollbar-color: #b38a4c rgba(121,91,55,.10);
}

body.light-mode .chat-popup-messages::-webkit-scrollbar-thumb,
body.light-mode .message-list::-webkit-scrollbar-thumb,
body.light-mode .lightbox-right-pane::-webkit-scrollbar-thumb,
body.light-mode .lightbox-media-comments-stream::-webkit-scrollbar-thumb {
    background: #b38a4c;
}

/* ========================================================================
   V16 — CHAT MESSAGE ACTIONS / LIGHT THEME
   A popup és a teljes üzenetnézet szerkesztési műveletei ugyanazt a
   világos, kompakt akciósávot használják.
   ======================================================================== */
body.light-mode #message-list .message-item .message-actions,
body.light-mode .chat-popup-messages .message-group .message-actions {
    gap: 4px;
    padding: 3px;
    border: 1px solid rgba(105, 82, 55, .34);
    border-radius: 8px;
    background: rgba(238, 226, 208, .96);
    box-shadow: 0 7px 18px rgba(58, 43, 28, .25), inset 0 1px 0 rgba(255,255,255,.65);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

body.light-mode #message-list .message-item .message-actions {
    top: -38px;
}

body.light-mode .chat-popup-messages .message-group .message-actions {
    top: -39px;
}

body.light-mode .message-actions .chat-action-btn {
    width: 30px;
    height: 30px;
    border: 1px solid rgba(105, 82, 55, .24);
    border-radius: 6px;
    background: linear-gradient(180deg, #f5ecdf 0%, #ddccb3 100%);
    color: #695946;
    box-shadow: 0 2px 5px rgba(58, 43, 28, .16);
}

body.light-mode .message-actions .chat-action-btn svg {
    width: 16px;
    height: 16px;
    stroke-width: 2;
}

body.light-mode .message-actions .chat-action-btn:hover {
    background: linear-gradient(180deg, #fff7e9 0%, #e9c879 100%);
    color: #704b08;
    border-color: rgba(149, 102, 28, .58);
    box-shadow: 0 4px 10px rgba(102, 72, 25, .22);
    transform: translateY(-1px);
}

body.light-mode .message-actions .chat-action-btn[data-action="delete"],
body.light-mode .message-actions .chat-action-btn[title*="Törlés"],
body.light-mode .message-actions .chat-action-btn[aria-label*="Törlés"] {
    color: #a63b31;
}

body.light-mode .message-actions .chat-action-btn[data-action="delete"]:hover,
body.light-mode .message-actions .chat-action-btn[title*="Törlés"]:hover,
body.light-mode .message-actions .chat-action-btn[aria-label*="Törlés"]:hover {
    background: #f4d5cf;
    border-color: rgba(190, 62, 49, .48);
    color: #9b2f26;
}

/* ========================================================================
   V17 — UNIFIED POST PUBLISHER
   Profil / Hírfolyam / Csoport ugyanazt a desktop modal-méretet kapja.
   A launcher szélessége többé nem zsugorítja össze az editort.
   ======================================================================== */
body.light-mode .post-publisher-modal-panel {
    width: min(760px, calc(100vw - 32px));
    min-height: 380px;
    max-height: min(820px, 82vh);
    border-radius: 18px;
}

body.light-mode .post-publisher-modal-body {
    padding: 18px 20px 16px;
}

body.light-mode .post-publisher-modal-body .post-publisher-card {
    min-height: 320px;
}

body.light-mode .post-publisher-modal-body .publisher-header {
    gap: 14px;
}

body.light-mode .post-publisher-modal-body .publisher-input-wrapper {
    min-width: 0;
    flex: 1 1 auto;
}

body.light-mode .post-publisher-modal-body .publisher-formatting-toolbar {
    border-radius: 10px 10px 0 0;
}

body.light-mode .post-publisher-modal-body .post-editor-textarea {
    min-height: 112px;
    border-radius: 0 0 10px 10px;
}

body.light-mode .post-publisher-modal-body .publisher-footer {
    border-top-color: var(--dx-light-border-soft);
}

body.light-mode .post-publisher-modal-footer {
    min-height: 42px;
}

/* ========================================================================
   V18 — GROUP HERO / LIGHT THEME HIERARCHY
   A borítókép marad látványos, de az információs blokk külön felületet kap,
   hogy a név, státusz, meta és műveletek ne olvadjanak bele a képbe.
   ======================================================================== */
body.light-mode .group-hero-card {
    background: #efe3d1;
    border-color: rgba(105, 82, 55, .18);
    box-shadow: 0 16px 36px rgba(74, 55, 36, .16);
}

body.light-mode .group-cover-wrapper {
    height: 230px;
    background: #d1c0aa;
}

body.light-mode .group-cover-gradient {
    height: 72px;
    background: linear-gradient(0deg, rgba(45, 35, 26, .36) 0%, transparent 100%);
}

body.light-mode .group-hero-info-bar {
    margin-top: 0;
    padding: 0 26px 20px;
    min-height: 116px;
    align-items: center;
    background: linear-gradient(180deg, #f5eadb 0%, #e8d8c2 100%);
    border-top: 1px solid rgba(105, 82, 55, .12);
}

body.light-mode .group-hero-avatar-wrap {
    margin-top: -48px;
}

body.light-mode .group-hero-avatar {
    width: 104px;
    height: 104px;
    border: 4px solid #f3e7d6;
    box-shadow: 0 5px 18px rgba(64, 46, 28, .22), 0 0 0 1px rgba(149, 102, 28, .46);
}

body.light-mode .group-hero-title-section {
    padding-top: 6px;
}

body.light-mode .group-title-row {
    gap: 9px;
}

body.light-mode .group-main-title {
    color: #30261d;
    font-size: clamp(1.65rem, 2.5vw, 2rem);
    text-shadow: none;
}

body.light-mode .group-meta-stats-row {
    color: #6d5d4d;
}

body.light-mode .group-meta-stats-row svg {
    color: #a36e17;
}

body.light-mode .group-visibility-pill {
    padding: 5px 9px;
    border-radius: 7px;
}

body.light-mode .group-hero-actions-section {
    padding-top: 6px;
}

body.light-mode .group-profile-nav {
    min-height: 54px;
    padding: 0 22px;
    background: #dfccb0;
    border-top: 1px solid rgba(105, 82, 55, .16);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.34);
}

body.light-mode .group-nav-link {
    color: #675645;
    padding: 15px 17px 13px;
}

body.light-mode .group-nav-link:hover {
    color: #6f4c0d;
    background: rgba(255,248,236,.32);
}

body.light-mode .group-nav-link.active {
    color: #8a5b12;
    border-bottom-color: #b47a19;
    background: rgba(255,248,236,.22);
}

body.light-mode .group-nav-link svg {
    width: 17px;
    height: 17px;
}

@media (max-width: 768px) {
    body.light-mode .post-publisher-modal-panel {
        width: calc(100vw - 16px);
        min-height: 0;
        max-height: 94vh;
        border-radius: 16px 16px 0 0;
    }

    body.light-mode .post-publisher-modal-body {
        padding: 12px;
    }

    body.light-mode .post-publisher-modal-body .post-publisher-card {
        min-height: 0;
    }

    body.light-mode .group-cover-wrapper {
        height: 175px;
    }

    body.light-mode .group-hero-info-bar {
        min-height: 0;
        padding: 0 16px 18px;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    body.light-mode .group-hero-avatar-wrap {
        margin-top: -42px;
    }

    body.light-mode .group-title-row,
    body.light-mode .group-meta-stats-row {
        justify-content: center;
    }

    body.light-mode .group-hero-actions-section {
        width: 100%;
        justify-content: center;
    }

    body.light-mode .group-profile-nav {
        padding: 0 8px;
    }
}