/* =========================================================
   PyroBase Hydrogen Discord Theme - V1.7 Final
   Projekt i Wykonanie: FireMan
   ========================================================= */

:root {
    --pyro-bg-main: #313338;
    --pyro-bg-main-2: #292b35;
    --pyro-bg-dark: #1e1f22;
    --pyro-bg-sidebar: #232428;
    --pyro-bg-sidebar-soft: #2b2d31;
    --pyro-bg-panel: #383a40;
    --pyro-bg-hover: #3f4248;
    --pyro-bg-message-hover: rgba(255,255,255,0.045);

    --pyro-text-main: #f2f3f5;
    --pyro-text-soft: #dbdee1;
    --pyro-text-muted: #b5bac1;

    --pyro-accent: #5865f2;
    --pyro-accent-hover: #4752c4;
    --pyro-accent-cyan: #00a8fc;
    --pyro-accent-pink: #eb459e;
    --pyro-danger: #f23f42;

    --pyro-border: rgba(255,255,255,0.08);
    --pyro-border-strong: rgba(255,255,255,0.16);
}

/* =========================================================
   GŁÓWNE TŁO
   ========================================================= */

html,
body,
#hydrogen,
.SessionView,
.SessionView_body,
.RoomGridView,
.RoomGridView_rooms,
.RoomGridView_tile,
.RoomView,
.RoomView_body,
.TimelinePanel,
.TimelinePanel_body,
.Timeline,
.Timeline_messageList {
    background:
        radial-gradient(circle at 15% 12%, rgba(88, 101, 242, 0.22), transparent 28%),
        radial-gradient(circle at 82% 18%, rgba(235, 69, 158, 0.16), transparent 26%),
        radial-gradient(circle at 58% 92%, rgba(0, 168, 252, 0.10), transparent 30%),
        linear-gradient(135deg, #1e1f22 0%, #292b35 48%, #313338 100%) !important;
    color: var(--pyro-text-main) !important;
}

/* =========================================================
   LEWY PANEL
   ========================================================= */

.LeftPanel,
.LeftPanel_body,
.RoomList,
.RoomListView,
.RoomListView_rooms,
.RoomList_section,
.RoomListView_section {
    background:
        linear-gradient(180deg, #202127 0%, #2b2d31 52%, #232428 100%) !important;
    color: var(--pyro-text-main) !important;
}

/* =========================================================
   GÓRNE PASKI / NAGŁÓWKI / USTAWIENIA
   ========================================================= */

.LeftPanel_header,
.SessionView_header,
.RoomView_header,
.RoomHeader,
.RoomHeaderView,
.Navigation,
.NavigationView,
.SessionStatusView,
.SettingsView_header,
.SettingsHeader,
header.SettingsView_header,
header.SettingsHeader,
.view-header,
.View_header {
    background:
        linear-gradient(90deg, #1e1f22 0%, #25273a 55%, #232428 100%) !important;
    color: var(--pyro-text-main) !important;
    border-color: var(--pyro-border) !important;
    box-shadow: none !important;
}

.SettingsView > :first-child {
    background:
        linear-gradient(90deg, #1e1f22 0%, #25273a 55%, #232428 100%) !important;
    color: var(--pyro-text-main) !important;
    border-bottom: 1px solid var(--pyro-border) !important;
    box-shadow: none !important;
}

.SettingsView > :first-child *,
.SettingsView_header *,
.SettingsHeader *,
header.SettingsView_header *,
header.SettingsHeader *,
.view-header *,
.View_header * {
    color: var(--pyro-text-main) !important;
    fill: currentColor !important;
    stroke: currentColor !important;
}

/* =========================================================
   WYSZUKIWARKA
   ========================================================= */

.FilterField {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;

    height: 32px !important;
    min-height: 32px !important;
    padding: 0 7px 0 10px !important;

    background: #383a40 !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    border-radius: 8px !important;

    overflow: hidden !important;
}

.FilterField_input,
.FilterField input,
.FilterField input[type="search"],
input.FilterField_input {
    flex: 1 1 auto !important;
    min-width: 0 !important;

    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;

    background: transparent !important;
    background-color: transparent !important;

    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;

    color: var(--pyro-text-main) !important;
    font-size: 14px !important;
    line-height: 32px !important;
}

.FilterField:focus,
.FilterField:focus-within,
.FilterField input:focus,
.FilterField_input:focus {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.FilterField_input::placeholder,
.FilterField input::placeholder,
.FilterField input[type="search"]::placeholder {
    color: var(--pyro-text-muted) !important;
    opacity: 1 !important;
}

/* wyłącz natywny X przeglądarki */
.FilterField input[type="search"]::-webkit-search-cancel-button,
.FilterField_input::-webkit-search-cancel-button {
    -webkit-appearance: none !important;
    appearance: none !important;
    display: none !important;
}

/* przycisk Clear — tylko własny X */
.FilterField button[title="Clear"],
.FilterField button[aria-label="Clear"] {
    position: relative !important;

    width: 20px !important;
    min-width: 20px !important;
    height: 20px !important;

    padding: 0 !important;
    margin: 0 !important;

    background: transparent !important;
    background-color: transparent !important;

    border: none !important;
    outline: none !important;
    box-shadow: none !important;

    color: transparent !important;
    overflow: visible !important;
    cursor: pointer !important;
    border-radius: 0 !important;
}

.FilterField button[title="Clear"] svg,
.FilterField button[aria-label="Clear"] svg,
.FilterField button[title="Clear"] img,
.FilterField button[aria-label="Clear"] img {
    display: none !important;
}

.FilterField button[title="Clear"]::after,
.FilterField button[aria-label="Clear"]::after {
    content: none !important;
    display: none !important;
}

.FilterField button[title="Clear"]::before,
.FilterField button[aria-label="Clear"]::before {
    content: "×" !important;

    position: absolute !important;
    inset: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    color: #ffffff !important;
    background: transparent !important;

    font-size: 20px !important;
    font-weight: 600 !important;
    line-height: 1 !important;

    opacity: 0.95 !important;
    text-shadow: 0 0 5px rgba(255,255,255,0.65) !important;
}

.FilterField button[title="Clear"]:hover::before,
.FilterField button[aria-label="Clear"]:hover::before {
    opacity: 1 !important;
    text-shadow: 0 0 8px rgba(255,255,255,0.9) !important;
}

/* =========================================================
   POZOSTAŁE POLA TEKSTOWE
   ========================================================= */

textarea,
input[type="text"]:not(.FilterField_input),
input[type="password"],
input[type="email"] {
    background: var(--pyro-bg-panel) !important;
    color: var(--pyro-text-main) !important;
    border: 1px solid var(--pyro-border) !important;
    border-radius: 8px !important;
}

textarea::placeholder,
input[type="text"]:not(.FilterField_input)::placeholder,
input[type="password"]::placeholder,
input[type="email"]::placeholder {
    color: var(--pyro-text-muted) !important;
}

/* =========================================================
   LISTA POKOI
   ========================================================= */

.RoomTile,
.RoomTileView,
.RoomListItem,
.RoomListItemView,
.RoomList_room,
.RoomListView_room {
    color: var(--pyro-text-soft) !important;
    border-radius: 8px !important;
}

.RoomTile:hover,
.RoomTileView:hover,
.RoomListItem:hover,
.RoomListItemView:hover,
.RoomList_room:hover,
.RoomListView_room:hover {
    background: var(--pyro-bg-hover) !important;
    color: #ffffff !important;
}

.RoomTile.selected,
.RoomTileView.selected,
.RoomListItem.selected,
.RoomListItemView.selected,
.RoomList_room.selected,
.RoomListView_room.selected {
    background: var(--pyro-accent) !important;
    color: #ffffff !important;
}

/* =========================================================
   WIADOMOŚCI
   ========================================================= */

.Message,
.MessageView,
.TimelineMessage,
.TimelineMessageView,
.Timeline_message {
    color: var(--pyro-text-main) !important;
}

.Message:hover,
.MessageView:hover,
.TimelineMessage:hover,
.TimelineMessageView:hover {
    background: var(--pyro-bg-message-hover) !important;
}

.Message_sender,
.MessageView_sender,
.TimelineMessage_sender,
.TimelineMessageView_sender,
.sender,
.username {
    color: #ffffff !important;
    font-weight: 600 !important;
}

.Time,
.Message_timestamp,
.RoomTile_description,
.RoomListItem_description,
.subtitle,
.secondary,
.text-muted {
    color: var(--pyro-text-muted) !important;
}

/* =========================================================
   KOMUNIKATY SYSTEMOWE / DATY / POWIADOMIENIA
   ========================================================= */

/* Data typu „Dzisiaj” */
.DateSeparator,
.DaySeparator,
.TimelineDateSeparator,
[class*="DateSeparator"],
[class*="DaySeparator"] {
    background: rgba(242, 243, 245, 0.94) !important;
    color: #4e5058 !important;
    border: 1px solid rgba(35, 36, 42, 0.95) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
}

/* Komunikaty systemowe */
.AnnouncementView,
.Announcement,
.StateEvent,
.StateEventView,
.TimelineAnnouncement,
.TimelineStateEvent,
[class*="Announcement"],
[class*="StateEvent"] {
    background: rgba(35, 36, 42, 0.72) !important;
    color: var(--pyro-text-soft) !important;
    border: 1px solid rgba(35, 36, 42, 0.95) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
}

.AnnouncementView *,
.Announcement *,
.StateEvent *,
.StateEventView *,
.TimelineAnnouncement *,
.TimelineStateEvent *,
[class*="Announcement"] *,
[class*="StateEvent"] * {
    color: var(--pyro-text-soft) !important;
    background: transparent !important;
}

.AnnouncementView a,
.Announcement a,
.StateEvent a,
.StateEventView a,
.TimelineAnnouncement a,
.TimelineStateEvent a,
[class*="Announcement"] a,
[class*="StateEvent"] a {
    color: #7dd3fc !important;
    font-weight: 600 !important;
}

/* Puste stany */
.RoomPlaceholder,
.RoomPlaceholderView,
.EmptyState,
.EmptyStateView {
    color: var(--pyro-text-main) !important;
    background: transparent !important;
}

/* =========================================================
   COMPOSER / PASEK WIADOMOŚCI
   ========================================================= */

.Composer,
.MessageComposer,
.MessageComposer_input,
.Composer_input {
    background: rgba(56,58,64,0.92) !important;
    color: var(--pyro-text-main) !important;
    border: 1px solid var(--pyro-border) !important;
    border-radius: 8px !important;
}

.Composer textarea,
.MessageComposer textarea,
.MessageComposer_input textarea,
.Composer_input textarea {
    background: transparent !important;
    color: var(--pyro-text-main) !important;
    border: none !important;
    outline: none !important;
}

/* Przyciski w pasku wiadomości */
.Composer button,
.MessageComposer button,
.MessageComposer_input button,
.Composer_input button,
.Composer [role="button"],
.MessageComposer [role="button"],
.MessageComposer_input [role="button"],
.Composer_input [role="button"] {
    background: transparent !important;
    background-color: transparent !important;

    color: var(--pyro-text-soft) !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;

    opacity: 1 !important;
    visibility: visible !important;

    min-width: 28px !important;
    min-height: 28px !important;
}

.Composer button:hover,
.MessageComposer button:hover,
.MessageComposer_input button:hover,
.Composer_input button:hover,
.Composer [role="button"]:hover,
.MessageComposer [role="button"]:hover,
.MessageComposer_input [role="button"]:hover,
.Composer_input [role="button"]:hover {
    color: #ffffff !important;
    background: rgba(255,255,255,0.08) !important;
    border-radius: 8px !important;
}

/* Ikony w composerze */
.Composer svg,
.MessageComposer svg,
.MessageComposer_input svg,
.Composer_input svg,
.Composer img,
.MessageComposer img,
.MessageComposer_input img,
.Composer_input img {
    opacity: 1 !important;
    visibility: visible !important;
    color: var(--pyro-text-soft) !important;
    fill: currentColor !important;
    stroke: currentColor !important;
}

/* Ikony maskowane w composerze */
.Composer [style*="mask"],
.MessageComposer [style*="mask"],
.MessageComposer_input [style*="mask"],
.Composer_input [style*="mask"],
.Composer [class*="icon"],
.MessageComposer [class*="icon"],
.MessageComposer_input [class*="icon"],
.Composer_input [class*="icon"],
.Composer [class*="Icon"],
.MessageComposer [class*="Icon"],
.MessageComposer_input [class*="Icon"],
.Composer_input [class*="Icon"] {
    background-color: var(--pyro-text-soft) !important;
    color: var(--pyro-text-soft) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* =========================================================
   PRZYCISK MENU WIADOMOŚCI — CIEMNY KWADRAT + 3 BIAŁE KROPKI
   ========================================================= */

.Timeline button:empty,
.TimelinePanel button:empty,
.Timeline_messageList button:empty,
.Message button:empty,
.MessageView button:empty,
.TimelineMessage button:empty,
.TimelineMessageView button:empty {
    position: relative !important;

    width: 28px !important;
    min-width: 28px !important;
    height: 28px !important;
    min-height: 28px !important;

    padding: 0 !important;
    margin: 0 !important;

    background: #232428 !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 7px !important;

    box-shadow: 0 4px 12px rgba(0,0,0,0.22) !important;

    opacity: 1 !important;
    visibility: visible !important;
    overflow: visible !important;
}

.Timeline button:empty::before,
.TimelinePanel button:empty::before,
.Timeline_messageList button:empty::before,
.Message button:empty::before,
.MessageView button:empty::before,
.TimelineMessage button:empty::before,
.TimelineMessageView button:empty::before {
    content: "•••" !important;

    position: absolute !important;
    inset: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    color: #ffffff !important;
    background: transparent !important;

    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: 1.3px !important;

    opacity: 0.95 !important;
}

.Timeline button:empty:hover,
.TimelinePanel button:empty:hover,
.Timeline_messageList button:empty:hover,
.Message button:empty:hover,
.MessageView button:empty:hover,
.TimelineMessage button:empty:hover,
.TimelineMessageView button:empty:hover {
    background: #2f3136 !important;
    border-color: rgba(255,255,255,0.14) !important;
}

.Timeline button:empty:hover::before,
.TimelinePanel button:empty:hover::before,
.Timeline_messageList button:empty:hover::before,
.Message button:empty:hover::before,
.MessageView button:empty:hover::before,
.TimelineMessage button:empty:hover::before,
.TimelineMessageView button:empty:hover::before {
    color: #ffffff !important;
    opacity: 1 !important;
}

/* =========================================================
   PRZYCISKI IKONOWE W NAGŁÓWKACH
   ========================================================= */

.LeftPanel_header button,
.Navigation button,
.NavigationView button,
.SessionView_header button,
.RoomHeader button,
.RoomHeaderView button {
    background: rgba(255,255,255,0.08) !important;
    color: var(--pyro-text-soft) !important;
    border: none !important;
    border-radius: 50% !important;
    box-shadow: none !important;

    opacity: 1 !important;
    visibility: visible !important;

    min-width: 32px !important;
    min-height: 32px !important;
}

.LeftPanel_header button:hover,
.Navigation button:hover,
.NavigationView button:hover,
.SessionView_header button:hover,
.RoomHeader button:hover,
.RoomHeaderView button:hover {
    background: rgba(255,255,255,0.15) !important;
    color: #ffffff !important;
}

.LeftPanel_header svg,
.Navigation svg,
.NavigationView svg,
.SessionView_header svg,
.RoomHeader svg,
.RoomHeaderView svg,
.LeftPanel_header img,
.Navigation img,
.NavigationView img,
.SessionView_header img,
.RoomHeader img,
.RoomHeaderView img {
    opacity: 1 !important;
    visibility: visible !important;
    color: var(--pyro-text-soft) !important;
    fill: currentColor !important;
    stroke: currentColor !important;
}

/* Ikony maskowane w nagłówkach */
.LeftPanel_header [style*="mask"],
.Navigation [style*="mask"],
.NavigationView [style*="mask"],
.SessionView_header [style*="mask"],
.RoomHeader [style*="mask"],
.RoomHeaderView [style*="mask"],
.LeftPanel_header [class*="icon"],
.Navigation [class*="icon"],
.NavigationView [class*="icon"],
.SessionView_header [class*="icon"],
.RoomHeader [class*="icon"],
.RoomHeaderView [class*="icon"],
.LeftPanel_header [class*="Icon"],
.Navigation [class*="Icon"],
.NavigationView [class*="Icon"],
.SessionView_header [class*="Icon"],
.RoomHeader [class*="Icon"],
.RoomHeaderView [class*="Icon"] {
    background-color: var(--pyro-text-soft) !important;
    color: var(--pyro-text-soft) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* =========================================================
   PRZYCISK OPCJI POKOJU — CIEMNY KWADRAT + 3 BIAŁE KROPKI
   ========================================================= */

.RoomHeader button:empty,
.RoomHeaderView button:empty,
.RoomHeader [role="button"]:empty,
.RoomHeaderView [role="button"]:empty {
    position: relative !important;

    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;

    padding: 0 !important;
    margin: 0 !important;

    background: #232428 !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 7px !important;

    box-shadow: 0 4px 12px rgba(0,0,0,0.24) !important;

    opacity: 1 !important;
    visibility: visible !important;
    overflow: visible !important;
}

.RoomHeader button:empty::before,
.RoomHeaderView button:empty::before,
.RoomHeader [role="button"]:empty::before,
.RoomHeaderView [role="button"]:empty::before {
    content: "•••" !important;

    position: absolute !important;
    inset: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    color: #ffffff !important;
    background: transparent !important;

    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: 1.5px !important;

    opacity: 0.95 !important;
}

.RoomHeader button:empty:hover,
.RoomHeaderView button:empty:hover,
.RoomHeader [role="button"]:empty:hover,
.RoomHeaderView [role="button"]:empty:hover {
    background: #2f3136 !important;
    border-color: rgba(255,255,255,0.14) !important;
}

.RoomHeader button:empty:hover::before,
.RoomHeaderView button:empty:hover::before,
.RoomHeader [role="button"]:empty:hover::before,
.RoomHeaderView [role="button"]:empty:hover::before {
    color: #ffffff !important;
    opacity: 1 !important;
}

/* =========================================================
   MENU / POPOVERY / DIALOGI
   ========================================================= */

.Dialog,
.DialogView,
.Modal,
.ModalView,
.Menu,
.MenuView,
.ContextMenu,
.Popover,
.PopoverView,
.Settings,
.SettingsView,
.RoomDetails,
.RoomDetailsView,
[class*="Popover"],
[class*="ContextMenu"] {
    background: #383a40 !important;
    color: var(--pyro-text-main) !important;
    border: 1px solid var(--pyro-border) !important;
    border-radius: 10px !important;
    box-shadow: 0 16px 40px rgba(0,0,0,0.45) !important;
}

.Menu svg,
.MenuView svg,
.ContextMenu svg,
.Popover svg,
.PopoverView svg,
[class*="Popover"] svg,
[class*="ContextMenu"] svg {
    opacity: 1 !important;
    visibility: visible !important;
    color: var(--pyro-text-soft) !important;
    fill: currentColor !important;
    stroke: currentColor !important;
}

.Menu [style*="mask"],
.MenuView [style*="mask"],
.ContextMenu [style*="mask"],
.Popover [style*="mask"],
.PopoverView [style*="mask"],
[class*="Popover"] [style*="mask"],
[class*="ContextMenu"] [style*="mask"] {
    background-color: var(--pyro-text-soft) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.Menu a,
.MenuView a,
.ContextMenu a,
.Popover a,
.PopoverView a,
.RoomDetails a,
.RoomDetailsView a {
    color: var(--pyro-accent-cyan) !important;
}

.Menu .danger,
.MenuView .danger,
.ContextMenu .danger,
.Popover .danger,
.PopoverView .danger,
.RoomDetails .danger,
.RoomDetailsView .danger,
button.danger,
[class*="danger"] {
    color: var(--pyro-danger) !important;
}

/* Przyciski w dialogach */
.Dialog button,
.DialogView button,
.Modal button,
.ModalView button,
.LoginView button,
.SessionPickerView button,
.PasswordLoginView button {
    background: var(--pyro-accent) !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    border: none !important;
}

.Dialog button:hover,
.DialogView button:hover,
.Modal button:hover,
.ModalView button:hover,
.LoginView button:hover,
.SessionPickerView button:hover,
.PasswordLoginView button:hover {
    background: var(--pyro-accent-hover) !important;
}

/* =========================================================
   LINKI
   ========================================================= */

a {
    color: var(--pyro-accent-cyan) !important;
}

a:hover {
    color: #4cc9ff !important;
}

/* =========================================================
   SCROLLBAR
   ========================================================= */

* {
    scrollbar-width: thin;
    scrollbar-color: #1a1b1e #2b2d31;
}

*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

*::-webkit-scrollbar-track {
    background: #2b2d31;
}

*::-webkit-scrollbar-thumb {
    background: #1a1b1e;
    border-radius: 10px;
    border: 2px solid #2b2d31;
}

*::-webkit-scrollbar-thumb:hover {
    background: #111214;
}

/* =========================================================
   STOPKA
   ========================================================= */

.pyro-footer {
    color: rgba(242, 243, 245, 0.78) !important;
    text-shadow: 0 1px 4px rgba(0,0,0,0.65) !important;
}

.pyro-footer strong {
    color: #ffffff !important;
}