/*
                                               :
                                              ::
   © ponkis.xyz 2026                         ::
                                             ::
                                            ::
                                            ::
                              __           ::
   _..-'/-¯¯--/_          ,.--. ''.     |`\=,..
-:--.---''-..  /_         |\\_\..  \    `-.=._/
.-|¯         '.  \         \_ \-`/\ |    ::`
  /  @  \      \  -_   _..--|-\¯¯``'--.-/_\
  |   .-'|      \  \\-'\_/     ¯/-.|-.\_\_/
  \_./` /        \_//-''/    .-'
       |           '-/'@====/              _.--.
   __.'             /¯¯'-. \-'.          _/   /¯'
.''____|   /       |'--\__\/-._        .'    |
 \ \_. \  |       _| -/        \-.__  /     /
  \___\ '/   _.  ('-..| /       '_  ''   _.'
        /  .'     ¯¯¯¯ /        | ``'--''
       (  / ¯```¯¯¯¯¯|-|        |
        \ \_.         \ \      /
         \___\         '.'.   /
                         /    |
                        /   .'
                       /  .' |
                     .'  / \  \
                    /___| /___'
*/

:where(#user-hover-preview-card[data-profile-theme="default"]),
:where(#user-hover-preview-card[data-profile-theme="custom"]),
:root[data-theme="default"],
:root {
	--bg-body: #E9EAED;
	--bg-container: #fff;
	--bg-header: linear-gradient(to bottom, #4e69a2, #3b5998);
	--bg-button: linear-gradient(to bottom, #627aad, #5972a8);
	--bg-button-hover: linear-gradient(to bottom, #728ac1, #627aad);
	--bg-button-active: #4d69a1;
	--bg-button-secondary: linear-gradient(to bottom, #f7f7f7, #e8e8e8);
	--bg-button-secondary-hover: linear-gradient(to bottom, #fff, #f0f0f0);
	--bg-input: #fff;
	--bg-message: #f2f2f2;
	--bg-message-own: #dfe3ee;
	--bg-chat-window: #fff;
	--bg-alert: #f2dede;
	--bg-alert-success: #dff0d8;
	--bg-sidebar: #fff;
	--bg-sidebar-header: linear-gradient(to bottom, #6d84b4, #3b5998);
	--bg-sidebar-item-hover: #f2f2f5;
	--border-primary: #bdc7d8;
	--border-header: #29487d;
	--border-button: #29487d;
	--border-input: #bdc7d8;
	--border-input-focus: #4d69a1;
	--border-message: #e5e5e5;
	--border-message-own: #c9d2e1;
	--border-alert: #ebccd1;
	--border-alert-success: #d6e9c6;
	--border-sidebar: #d3d6db;
	--border-sidebar-header: #29487d;
	--border-sidebar-pfp: #d3d6db;
	--text-primary: #1d2129;
	--text-secondary: #333;
	--text-link: #3b5998;
	--text-header: #fff;
	--text-button: #fff;
	--text-button-secondary: #333;
	--text-muted: #90949c;
	--text-alert: #a94442;
	--text-alert-success: #3c763d;
	--text-sidebar-header: #fff;
	--text-sidebar-username: #3b5998;
	--shadow-light: 0 1px 2px rgba(0, 0, 0, 0.1);
	--shadow-input: inset 0 1px 2px rgba(0, 0, 0, 0.1);
	--shadow-hover: 0 2px 4px rgba(0, 0, 0, 0.1);
	--shadow-sidebar: -2px 0 4px rgba(0, 0, 0, 0.1);
	--shadow-online-dot: 0 0 4px rgba(66, 183, 42, 0.8);
	--color-primary: #3b5998;
	--color-primary-light: #627aad;
	--color-primary-dark: #29487d;
	--color-online: #42b72a;
	--bg-settings-context-menu: var(--bg-container);
	--border-settings-context-menu: var(--border-primary);
	--text-settings-context-menu: var(--text-secondary);
	--bg-settings-context-menu-hover: var(--bg-sidebar-item-hover);
	--border-settings-context-divider: var(--border-primary);
	--bg-topbar-placeholder: #3a3a3a;
	--border-topbar-placeholder: #252525;
	--text-topbar-placeholder: #f1f1f1;

	/* Neutral surfaces and hairlines, so components follow the theme (and
	   custom CSS) instead of hardcoding #fff/#ccc. */
	--surface-subtle: #f7f7f7;
	--surface-sunken: #f0f0f0;
	--surface-tint: #f2f2f2;
	--line-soft: #e5e5e5;
	--line-medium: #ddd;
	--line-strong: #ccc;
	--line-blue: #bdc7d8;
	--line-blue-soft: #d8dfea;
	--line-blue-medium: #c9d2e1;
}

body::before {
	content: "";
	position: fixed;
	inset: 0;
	background: linear-gradient(
		0deg,
		color-mix(in srgb, var(--bg-message) 100%, transparent) 0%,
		rgb(255 255 255 / 0%) 100%
	);
	pointer-events: none;
	z-index: 0;
}

.container {
	background-color: var(--bg-container);
	border-color: var(--border-primary);
	box-shadow: var(--shadow-light);
}

.header {
	background: var(--bg-sidebar-header);
	border-bottom-color: var(--border-header);
}

#user-stats {
	color: var(--text-header);
}

input[type="text"],
input[type="password"],
input[type="date"],
input[type="email"],
select,
textarea,
#message-input {
	background-color: var(--bg-input);
	border-color: var(--border-input);
	box-shadow: var(--shadow-input);
}

a {
	color: var(--text-link);
}

h2,
.section-header {
	color: var(--text-secondary);
	border-bottom-color: var(--border-primary);
}

#chat-window {
	background-color: var(--bg-chat-window);
}

.message-bubble {
	background-color: var(--bg-message);
	border-color: var(--border-message);
}

.message.own .message-bubble {
	background-color: var(--bg-message-own);
	border-color: var(--border-message-own);
}

.message-info .username {
	color: var(--color-primary);
}

.system-message {
	color: var(--text-muted);
}

.alert {
	background-color: var(--bg-alert);
	border-color: var(--border-alert);
	color: var(--text-alert);
}

.alert.success {
	background-color: var(--bg-alert-success);
	border-color: var(--border-alert-success);
	color: var(--text-alert-success);
}

.theme-page-header {
	color: var(--text-header) !important;
}

.profile-info-section {
	border-color: var(--border-primary);
}

.profile-about-me-text {
	word-break: break-all;
	border-left-color: var(--color-primary);
}

.reply-snippet {
	background-color: var(--bg-message);
	border-left-color: var(--border-primary);
}

.theme-option:hover {
	border-color: var(--border-input-focus);
	box-shadow: var(--shadow-hover);
}

.theme-option.active {
	border-color: var(--border-input-focus);
	box-shadow: 0 0 0 2px var(--border-input-focus);
}

.typing-info {
	color: var(--text-muted);
}

.header-pfp {
	border-color: var(--color-primary-dark);
}

.online-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	background-color: #44b700;
	margin-right: 6px;
	vertical-align: middle;
}