/* ============================================================
   ORION THEME — dark palette, via CSS variables. ORION-Light is a
   separate, deliberately designed theme file (not a toggle on this
   one) — select via setting.default_theme / user_theme.
   ============================================================ */

:root {
	--orion-bg: #0d1117;
	--orion-surface: #161b22;
	--orion-surface-2: #1c2129;
	--orion-border: #2a2f38;
	--orion-text: #e8e8ea;
	--orion-text-muted: #8b929c;
	--orion-accent: #f0b90b;
	--orion-accent-text: #0d1117;
	--orion-error: #e0263b;
	--orion-success: #0ecb81;
	--orion-modo: #3b82f6;
	--orion-hover: #2a2f38;
	--orion-error-bg: #2a1416;
	--orion-success-bg: #0f2a20;
	--orion-accent-bg: #2a2410;
}

/* general colors */
a { color: var(--orion-accent); }
body { color: var(--orion-text); }
button { background: transparent; color: var(--orion-text); }
#external_wrap { background: var(--orion-bg); background-repeat: no-repeat; background-size: 100% auto; background-position: center center; }

.background_chat { background: var(--orion-surface); }
.background_login { background: var(--orion-surface); }
.background_box { background: var(--orion-bg); color: var(--orion-text); border: none; }
.background_menu_footer { background: var(--orion-bg); }
.panels { background: var(--orion-surface); }
#chat_error { background: var(--orion-surface-2); }
#inner_header, #header_login { background: url('logo/ORION.svg'); background-repeat: no-repeat; background-size: auto 100%; background-position: left center; background-color: var(--orion-bg); }
#menu_private { background: var(--orion-surface); border-top: 0px; }

.log1 { background: none; }
.log2 { background: var(--orion-surface); }
.ch_logs { border-bottom: none; }

.user_separator { border-bottom: 0px solid var(--orion-accent); }
.user_option_separator { border-bottom: 1px solid var(--orion-border); }
.top_separator { border-top: 1px solid var(--orion-border); }
.right_separator { border-right: 1px solid var(--orion-border); }
.bottom_separator { border-bottom: none; }

.user_option_list { background: var(--orion-surface); color: var(--orion-text); }

.sub_button { background: var(--orion-accent); color: var(--orion-accent-text); }
.submit_button { background: var(--orion-accent); color: var(--orion-accent-text); }
.sub_element { background: none; color: var(--orion-text); border-bottom: 1px solid var(--orion-border); }
.empty_element { background: var(--orion-surface-2); color: var(--orion-text); }
.selected_element { background: var(--orion-accent); color: var(--orion-accent-text); }
.hover_element:hover { background: var(--orion-hover); color: var(--orion-text); }

#show_chat_ads { background: var(--orion-surface) !important; }

.error { color: var(--orion-error); }
.success { color: var(--orion-success); }
.away { color: var(--orion-text-muted); }
.my_notice { background: var(--orion-accent-bg); color: var(--orion-accent); padding: 3px; }
.sub_color2 { color: var(--orion-text-muted); }
.sub_color { color: var(--orion-text-muted); }
.hide_private_title { color: var(--orion-text-muted); }
.tooltip:hover:before, .tooltip2:hover:before, .tooltip3:hover:before { border-color: var(--orion-surface) transparent; }
.tooltip:hover:after, .tooltip2:hover:after, .tooltip3:hover:after { background: var(--orion-surface); color: var(--orion-accent); }

.target_private { color: var(--orion-accent-text); background: var(--orion-accent); }
.hunter_private { color: var(--orion-text); background: var(--orion-border); }

.datechat { color: var(--orion-text-muted); }
.me { color: var(--orion-accent); background: var(--orion-accent-bg); }
.global { color: var(--orion-error); background: var(--orion-error-bg); }
.private { color: var(--orion-success); background: var(--orion-success-bg); }
.private_reply { background: var(--orion-surface-2); color: var(--orion-success); }
.seen { color: var(--orion-text-muted); background: var(--orion-surface); }
.delete_log, .logs_date { color: var(--orion-text-muted); }

.system { color: var(--orion-text-muted) !important; }
.admin { color: var(--orion-error); }
.sadmin { color: var(--orion-accent); }
.modo { color: var(--orion-modo) !important; }
.vip { color: var(--orion-success); }
.user { color: var(--orion-text); }
.guest { color: var(--orion-text-muted); }

.bar_options { border-left: 1px solid var(--orion-border); border-right: 1px solid var(--orion-bg); }
#picker_box, #list_emoticon { background: var(--orion-surface); box-shadow: 0 0 5px rgba(0,0,0,0.4); }
.sel_item { background: var(--orion-border); }
.pick_color, #smile_content, .wrap_picker { border-left: 1px solid var(--orion-bg); border-bottom: 1px solid var(--orion-border); border-top: 1px solid var(--orion-bg); border-right: 1px solid var(--orion-border); }
#smile_content { background: var(--orion-surface); }

/* smooth, subtle transition when toggling — not a distracting animation */
body, .background_chat, .background_box, .panels { transition: background-color 0.2s ease, color 0.2s ease; }

/* ============================================================
   Professional polish pass — header/footer definition, CSS-only,
   no structural changes (avoids repeating the earlier layout bug).
   ============================================================ */
#header {
	border-bottom: 1px solid var(--orion-border, #2a2f38);
	box-shadow: 0 2px 12px rgba(0,0,0,0.25);
}
#my_menu {
	border-top: 1px solid var(--orion-border, #2a2f38);
	box-shadow: 0 -2px 12px rgba(0,0,0,0.25);
}
.box_menu {
	transition: background-color 0.15s;
}
.box_menu:active {
	background-color: var(--orion-hover, rgba(255,255,255,0.06));
}
#input_table #td_input input {
	border-radius: 20px;
	padding-left: 14px;
}
#submit_button {
	transition: transform 0.1s;
}
#submit_button:active {
	transform: scale(0.92);
}

/* ============================================================
   Header / footer chrome — subtle gradient bars, ORION identity
   (dark + gold, not a copy of any reference — same visual "polish
   level" as premium chat UIs: depth via gradient + shadow, not flat
   color). Background-only changes — zero layout/height/position
   risk since #header/#wrap_footer's box model is untouched.
   ============================================================ */
#header {
	background: linear-gradient(135deg, #15171c 0%, #0d1117 55%, #1a1508 100%);
	border-bottom: 1px solid var(--orion-border);
	box-shadow: 0 2px 14px rgba(0,0,0,0.35);
}
#wrap_footer {
	background: linear-gradient(135deg, #15171c 0%, #0d1117 60%, #1a1508 100%);
	border-top: 1px solid var(--orion-border);
	box-shadow: 0 -2px 14px rgba(0,0,0,0.35);
}
#my_menu .box_menu {
	transition: background 0.15s, transform 0.1s;
	border-radius: 8px;
}
#my_menu .box_menu:active {
	transform: scale(0.92);
	background: rgba(240,185,11,0.1);
}

/* Compose bar polish — rounded pill input, gold send button. Only
   background/border-radius/color — width/height/float untouched. */
#content {
	border-radius: 20px;
	border: 1px solid var(--orion-border);
}
#content:focus {
	border-color: var(--orion-accent);
	outline: none;
}
#submit_button {
	border-radius: 50%;
}
#emo_item, #send_image, #orion_mic_trigger {
	border-radius: 50%;
}

.member_online_icon {
	vertical-align: middle;
	margin-right: 2px;
}

/* "memberon" online indicator — animated pulse, gives the lively
   "gif-like" feel that was intended, without needing an actual .gif
   asset (which is what was broken before — the file simply didn't exist). */
.member_online_icon {
	animation: orion_member_pulse 1.6s ease-in-out infinite;
}
@keyframes orion_member_pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50% { opacity: 0.5; transform: scale(1.15); }
}

/* Profile panel avatar centering — panel.css already has margin:0 auto
   but the parent container's own layout was preventing it from visibly
   centering. Force it explicitly at the container level too. */
#profile_panel .panel_element,
.profile_section {
	text-align: center;
}
.profile_avatar {
	margin-left: auto !important;
	margin-right: auto !important;
	float: none !important;
}