/* Алё — Catppuccin Mocha visual language
 * Inspired by https://github.com/catppuccin/discord (Mocha)
 */
:root {
  color-scheme: light dark;
  --hg-bottom-nav: 56px;
}

html, body, #root {
  min-height: 100%;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;
  background: #111318;
  color: #e8eaef;
  background: var(--ctp-base, #111318);
  color: var(--ctp-text, #e8eaef);
  font-feature-settings: "ss01", "ss02";
}

a[href*="ko-fi.com"] { display: none !important; }
iframe[src*="stt.gg"] { display: none !important; }

/* Soft scrollbars like Catppuccin Discord */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  background: var(--ctp-surface1);
  border-radius: 8px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--ctp-surface2); background-clip: padding-box; border: 3px solid transparent; }
::-webkit-scrollbar-track { background: transparent; }

/* Layered Discord rails */
.main_bar,
[class*="server_rail"],
[class*="ServerRail"] {
  background: var(--ctp-crust) !important;
}
.channel_bar,
[class*="channel_sidebar"],
[class*="ChannelSidebar"] {
  background: var(--ctp-mantle) !important;
}
[class*="member"],
aside {
  background: var(--ctp-mantle);
}

/* Selection follows the active theme tokens, not a fixed Mocha mauve. */
[aria-current="page"],
[data-selected="true"],
[class*="selected"],
a[href].active {
  background: var(--surfaces-selected) !important;
  color: var(--ctp-text) !important;
  border-radius: var(--borderRadius-md, 8px) !important;
}

button:hover,
a:hover,
[role="button"]:hover,
[class*="MenuButton"]:hover {
  border-radius: 8px;
}

/* Primary filled buttons — Catppuccin brand (blue on crust text) */
button[type="submit"],
.hg-up-primary,
.hg-fb-send,
button.hg-ctp-primary {
  background: var(--ctp-blue) !important;
  color: var(--ctp-crust) !important;
  border: none !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
}
button[type="submit"]:hover,
.hg-up-primary:hover,
.hg-fb-send:hover {
  filter: brightness(1.08);
}

/* Danger / success pastels */
[class*="error"], .hg-fb-err { color: var(--ctp-red) !important; }
.hg-fb-ok, [class*="success"] { color: var(--ctp-green) !important; }

/* Presence dots */
[data-status="Online"], [class*="online"] { --status: var(--ctp-green); }
[data-status="Idle"] { --status: var(--ctp-yellow); }
[data-status="Busy"], [data-status="Focus"] { --status: var(--ctp-red); }

/* Composer / message box */
[class*="composer"],
[class*="MessageBox"],
[class*="message_box"] {
  background: var(--ctp-surface0) !important;
  border-radius: 12px !important;
  color: var(--ctp-text) !important;
}

/* Mentions & links */
a { color: var(--ctp-blue); }
a:hover { color: var(--ctp-lavender); }
[class*="mention"],
.mention {
  background: color-mix(in srgb, var(--ctp-mauve) 22%, transparent) !important;
  color: var(--ctp-mauve) !important;
  border-radius: var(--borderRadius-xs, 4px);
}

/* Category labels — soft peach/overlay */
[class*="category"] ,
[class*="Category"] {
  color: var(--ctp-overlay1) !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 700;
}

/* Auth form fields (Discord Catppuccin) */
form input[type="email"],
form input[type="password"],
form input[type="text"],
form input:not([type]),
form textarea,
form select {
  background: var(--ctp-mantle) !important;
  border: 1px solid var(--ctp-surface0) !important;
  border-radius: 8px !important;
  color: var(--ctp-text) !important;
  font-size: 15px !important;
}
form input:focus,
form textarea:focus,
form select:focus {
  outline: none !important;
  border-color: var(--ctp-mauve) !important;
  box-shadow: 0 0 0 1px var(--ctp-mauve);
}
form label, form .label {
  color: var(--ctp-subtext0) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em;
}

/* Modals / floating panels */
[role="dialog"],
[class*="Modal"],
[class*="modal"],
[class*="floating"],
#floating > * {
  --panel-bg: var(--ctp-mantle);
}

/* Soft message hover */
[class*="Message"]:hover,
[class*="message"]:hover {
  background: rgba(205, 214, 244, 0.03);
}

/* Unread / pills */
[class*="unread"],
[class*="badge"],
[class*="Badge"] {
  border-radius: 999px;
}

/* Material symbols tint */
span[class*="material-symbols"] {
  color: var(--ctp-subtext1);
}
button:hover span[class*="material-symbols"],
a:hover span[class*="material-symbols"] {
  color: var(--ctp-text);
}

/* Discover overlay */
#hg-discover {
  position: absolute; inset: 0; z-index: 30;
  background: var(--ctp-base); color: var(--ctp-text);
  overflow: auto; padding: 32px 24px 80px;
}
#hg-discover .hg-disc-h { font: 800 28px/1.2 system-ui, sans-serif; margin-bottom: 8px; color: var(--ctp-text); }
#hg-discover .hg-disc-s { color: var(--ctp-subtext0); margin-bottom: 20px; font-size: 14px; }

/* Settings cards */
#hg-download-apps a,
#hg-fb-open-btn,
#hg-update-page .hg-up-card {
  background: var(--ctp-mantle) !important;
  border: 1px solid var(--ctp-surface0) !important;
  border-radius: 12px !important;
  color: var(--ctp-text) !important;
}
#hg-download-apps a:hover,
#hg-fb-open-btn:hover {
  background: var(--ctp-surface0) !important;
  border-color: var(--ctp-mauve) !important;
}

/* Toast / overlays */
#hg-up-toast, #hg-up-overlay, #hg-fb-modal .hg-fb-box {
  background: var(--ctp-mantle) !important;
  border: 1px solid var(--ctp-surface0) !important;
  color: var(--ctp-text) !important;
  border-radius: 12px !important;
}


#hg-bottom-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 100010;
  height: calc(var(--hg-bottom-nav) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  display: flex; background: #0c0e12;
  border-top: 1px solid rgba(205,214,244,.06); color: #b4b9c5;
}
#hg-bottom-nav button {
  flex: 1; border: 0; background: transparent; color: #b4b9c5;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; font: 600 10px/1.2 system-ui, sans-serif; cursor: pointer;
  min-height: var(--hg-bottom-nav); padding: 6px 4px 4px;
}
#hg-bottom-nav button.active { color: #fff; }
#hg-bottom-nav .hg-bn-icon {
  font-family: "Material Symbols Rounded", "Material Symbols Outlined", sans-serif;
  font-size: 24px;
  font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24;
  line-height: 1;
}
body.hg-has-bottom-nav .app_root {
  padding-bottom: calc(var(--hg-bottom-nav) + env(safe-area-inset-bottom, 0px));
}

#hg-kbd-help {
  position: fixed; z-index: 100020; right: 16px; bottom: 16px; max-width: 280px;
  padding: 10px 12px; border-radius: 10px; background: var(--ctp-mantle);
  border: 1px solid rgba(205,214,244,.1); color: var(--ctp-text);
  font: 12px/1.4 system-ui, sans-serif; box-shadow: 0 8px 32px rgba(0,0,0,.4); display: none;
}
#hg-kbd-help kbd {
  display: inline-block; padding: 1px 5px; border-radius: 4px;
  background: var(--ctp-surface0); border: 1px solid var(--ctp-surface1); font-weight: 700;
}

/* Voice settings accent */
#hg-voice-native input[type="range"] { accent-color: var(--ctp-blue); }
#hg-voice-native button:focus-visible { outline: 2px solid var(--ctp-blue); outline-offset: 2px; }

/* Soften primary buttons toward Catppuccin blue */
button[data-variant="filled"],
button.md-filled {
  --md-sys-color-primary: var(--ctp-blue);
}

/* Channel / friends polish */
.channel_bar {
  background: var(--ctp-mantle) !important;
}
.main_bar {
  background: var(--ctp-crust) !important;
}

/* Message composer Discord-ish */
[class*="MessageBox"], [class*="message_box"], [class*="composer"] {
  border-radius: 8px;
}

/* Selection / links */
::selection { background: rgba(137, 180, 250, 0.35); }
a { color: var(--ctp-blue); }

/* Discord-style MDUI text fields on auth */
mdui-text-field {
  margin-bottom: 4px !important;
  width: 100%;
}
mdui-text-field::part(container),
mdui-text-field {
  border-radius: 4px !important;
}


/* Stronger Discord login field chrome */
mdui-text-field {
  --mdui-shape-corner: 4px;
  margin: 0 0 16px !important;
}




/* ---- Catppuccin Discord: striped / layered depth ---- */
/* Distinct horizontal "stripes" of crust → mantle → base like Discord columns */
body #root,
body #app {
  background: var(--ctp-crust) !important;
}

/* Chat pane: flat Discord column, no diagonal stripe */
main,
[class*="MessageArea"],
[class*="messages"],
[class*="Messages"] {
  background-color: var(--ctp-base) !important;
  background-image: none !important;
}

/* Server rail left indicator pill (Discord white/mauve bar) */
.main_bar a[href*="/server/"],
.main_bar [class*="server"] {
  position: relative;
}
.main_bar a[aria-current="page"]::before,
.main_bar [data-selected="true"]::before,
.main_bar a.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 40px;
  border-radius: 0 4px 4px 0;
  background: #ffffff;
}

/* Channel list: unread / selected left stripe */
.channel_bar a,
.channel_bar button,
[class*="channel"] a {
  position: relative;
  border-radius: 8px !important;
}
.channel_bar a[aria-current="page"],
.channel_bar [data-selected="true"],
.channel_bar a.active {
  background: var(--surfaces-selected, #404249) !important;
  box-shadow: none !important;
  color: var(--ctp-text, #f2f3f5) !important;
}

/* Message hover is a flat wash, like Discord */
[class*="Message"]:hover,
[class*="message_"]:hover,
[class*="MessageBase"]:hover {
  box-shadow: none;
}
[class*="mentioned"],
[class*="Mentioned"],
[data-mentioned="true"] {
  background: rgba(249, 226, 175, 0.08) !important;
  box-shadow: inset 3px 0 0 0 var(--ctp-yellow) !important;
}

/* Header bar stripe separator */
[class*="header"],
[class*="Header"],
[class*="channel_header"] {
  background: var(--ctp-base) !important;
  border-bottom: 1px solid rgba(49, 50, 68, 0.9) !important;
  box-shadow: 0 1px 0 rgba(17, 17, 27, 0.5);
}

/* User panel bottom stripe */
[class*="user_panel"],
[class*="UserPanel"],
[class*="status"] {
  background: var(--ctp-mantle) !important;
  border-top: 1px solid var(--ctp-surface0);
}

/* Soft card panels with pastel outline */
[class*="Card"],
[class*="panel"] {
  border-radius: 12px;
}


/* In-app voice fullscreen: fill the whole client window (not OS exclusive FS).
   Do not use position:fixed on tiles inside #floating — Float uses transform,
   which makes "fixed" resolve against the 42vh card instead of the viewport. */
body.hg-vc-app-fs-on,
body.hg-vc-tile-app-fs {
  overflow: hidden;
}

#floating.hg-vc-fullscreen {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  z-index: 100000 !important;
  transform: none !important;
  pointer-events: auto !important;
  background: var(--ctp-crust) !important;
}
#floating.hg-vc-fullscreen > .hg-vc-card,
#floating.hg-vc-fullscreen > [class*="Card"] {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  transform: none !important;
  pointer-events: auto !important;
  display: flex !important;
  flex-direction: column !important;
  z-index: 1 !important;
}
#floating.hg-vc-fullscreen .hg-vc-controls,
#floating.hg-vc-fullscreen [class*="VoiceCallControls"],
#floating.hg-vc-fullscreen [class*="Actions"] {
  position: relative !important;
  z-index: 50 !important;
  pointer-events: auto !important;
  flex-shrink: 0 !important;
}
#floating.hg-vc-fullscreen .vc_grid,
#floating.hg-vc-fullscreen [class*="Grid"] {
  position: relative !important;
  z-index: 1 !important;
  overflow: hidden !important;
  min-height: 0 !important;
  flex: 1 1 auto !important;
}
#floating.hg-vc-fullscreen .vc_tile {
  max-width: none !important;
}
body.hg-vc-app-fs-on #floating [class*="Card"] {
  height: 100% !important;
  max-height: none !important;
  border-radius: 0 !important;
}

#hg-vc-app-fs {
  position: fixed;
  inset: 0;
  z-index: 200000;
  display: grid;
  place-items: center;
  background: #000;
  pointer-events: auto;
}
#hg-vc-app-fs[hidden] {
  display: none !important;
}
#hg-vc-app-fs video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}
.hg-vc-app-fs-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  background: rgba(17,17,27,.75) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23cdd6f4'%3E%3Cpath d='M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z'/%3E%3C/svg%3E") center/22px no-repeat;
}
.hg-vc-app-fs-close:hover {
  background-color: rgba(30,30,46,.95);
}


/* Voice sidebar: camera replaces avatar row */
.hg-sidebar-video {
  flex-direction: column !important;
  align-items: stretch !important;
  padding: 4px !important;
  gap: 4px !important;
  cursor: pointer;
}
.hg-sidebar-video video {
  width: 100%;
  max-height: 140px;
  object-fit: cover;
  border-radius: 6px;
  background: #000;
}
.hg-sidebar-video:fullscreen,
.hg-sidebar-video video:fullscreen {
  width: 100vw;
  height: 100vh;
  max-height: none;
  object-fit: contain;
  background: #000;
}

/* Marker only — actual expand is #hg-vc-app-fs on document.body */
.vc_tile.hg-vc-tile-fs {
  outline-color: var(--brand-presence-online, #a6e3a1);
}


/* Compact "join voice" banner (Discord-like) */
.hg-join-voice {
  min-height: 44px !important;
  max-height: 56px !important;
  padding: 0 12px !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
}
.hg-join-voice .title {
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
}



/* Settings: Discord-like full width (no empty "scrap" rail) */
.settings_overlay {
  background: var(--ctp-base) !important;
}
.settings_overlay .settings_sidebar {
  flex: 0 0 232px !important;
  max-width: 232px !important;
  justify-content: flex-start !important;
  padding-left: 8px !important;
  padding-right: 8px !important;
}
.settings_overlay .settings_sidebar .content {
  min-width: 0 !important;
  max-width: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.settings_sidebar a.button {
  margin-inline-end: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  border-radius: 8px !important;
  padding: 6px 10px !important;
}
.settings_sidebar a[aria-selected="true"] {
  background: var(--surfaces-selected) !important;
  color: var(--text-header, var(--ctp-text)) !important;
}
.settings_overlay .settings_cont {
  flex: 1 1 auto !important;
  max-width: min(1080px, calc(100vw - 320px)) !important;
  width: 100% !important;
  padding-inline: 40px !important;
}
.settings_overlay .settings_action_rail {
  margin-inline-start: auto !important;
  flex-grow: 0 !important;
  width: 72px !important;
}
.settings_overlay .close {
  position: sticky !important;
  top: 24px !important;
  z-index: 50;
}


/* Fullscreen expand button on voice tiles */
.vc_tile { position: relative; }
.hg-fs-btn {
  position: absolute !important;
  right: 10px !important;
  top: 10px !important;
  bottom: auto !important;
  z-index: 5 !important;
  width: 36px !important;
  height: 36px !important;
  border: 0 !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  background: rgba(17,17,27,.72) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23cdd6f4'%3E%3Cpath d='M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z'/%3E%3C/svg%3E") center/20px no-repeat !important;
  opacity: 0.85 !important;
}
.hg-fs-btn:hover { opacity: 1 !important; background-color: rgba(30,30,46,.9) !important; }
.vc_tile:not(:hover) .hg-fs-btn { opacity: 0.35; }

/* Settings sidebar icons: MD SVGs ship with fill="#000" — force theme color */
.settings_sidebar svg,
.settings_sidebar svg path,
.settings_sidebar svg g {
  fill: currentColor !important;
  color: inherit !important;
}
.settings_sidebar a.button {
  color: var(--text-interactive, var(--ctp-subtext1)) !important;
}
.settings_sidebar a[aria-selected="true"] {
  color: var(--text-header, var(--ctp-text)) !important;
}
.settings_sidebar a[aria-selected="true"] svg,
.settings_sidebar a[aria-selected="true"] svg path,
.settings_sidebar a[aria-selected="true"] svg g {
  fill: currentColor !important;
  color: inherit !important;
}
.settings_sidebar .material-symbols,
.settings_sidebar .material-symbols-outlined {
  color: inherit !important;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 20 !important;
}

/* Server/user settings content: straighten crooked layout */
.settings_overlay {
  display: flex !important;
  align-items: stretch !important;
}
.settings_overlay .settings_cont {
  min-width: 0 !important;
  box-sizing: border-box !important;
}
.settings_overlay .settings_cont > * {
  max-width: none;
  width: 100%;
}

/* Desktop titlebar dark match */
.app_root > div:first-child {
  background: var(--ctp-crust, #1e1f22) !important;
}


/* Voice panel sits IN the channel column (chat below, not showing through) */
.hg-vc-slot {
  background: var(--ctp-base, #1e1f22) !important;
}
#floating > div {
  background: transparent !important;
}
#floating [class*="Card"],
#floating .hg-join-voice {
  background: var(--ctp-base, #1e1f22) !important;
  opacity: 1 !important;
}

/* Theme-aware chrome: follow --ctp-* from LoadTheme (Mocha/Latte), do not force dark. */
html, body, #root {
  background: var(--ctp-base) !important;
  color: var(--ctp-text) !important;
}
.main_bar,
[class*="server_rail"],
[class*="ServerRail"] {
  background: var(--ctp-crust) !important;
}
.channel_bar,
[class*="channel_sidebar"],
[class*="ChannelSidebar"] {
  background: var(--ctp-mantle) !important;
}
.settings_overlay {
  background: var(--ctp-base) !important;
  color: var(--ctp-text) !important;
}
.settings_overlay .settings_sidebar {
  background: var(--ctp-mantle) !important;
  color: var(--ctp-text) !important;
}
.app_root > div:first-child {
  background: var(--ctp-crust) !important;
}
.hg-vc-slot,
#floating [class*="Card"],
#floating .hg-join-voice {
  background: var(--ctp-base) !important;
}

/* Light theme: flat Latte panels — drop dark-oriented stripe/gradient texture */
html[data-theme="light"] main,
html[data-theme="light"] [class*="content"],
html[data-theme="light"] [class*="Content"],
html[data-theme="light"] [class*="chat"],
html[data-theme="light"] [class*="Chat"],
html[data-theme="light"] [class*="MessageArea"],
html[data-theme="light"] [class*="messages"],
html[data-theme="light"] [class*="Messages"],
html[data-theme="light"] .settings_overlay,
html[data-theme="light"] .channel_bar,
html[data-theme="light"] .main_bar {
  background-image: none !important;
  background-color: var(--ctp-base) !important;
  color: var(--ctp-text) !important;
}
html[data-theme="light"] body #root,
html[data-theme="light"] body #app,
html[data-theme="light"] html,
html[data-theme="light"] body {
  background: var(--ctp-base) !important;
  color: var(--ctp-text) !important;
}
html[data-theme="light"] .main_bar,
html[data-theme="light"] [class*="server_rail"],
html[data-theme="light"] [class*="ServerRail"] {
  background: var(--ctp-crust) !important;
}
html[data-theme="light"] .channel_bar,
html[data-theme="light"] [class*="channel_sidebar"],
html[data-theme="light"] [class*="ChannelSidebar"],
html[data-theme="light"] aside {
  background: var(--ctp-mantle) !important;
}


/* Phone screenshare: don't force 16:9 crop */
.vc_tile.hg-ss {
  aspect-ratio: auto !important;
  max-width: none !important;
}
.vc_tile.hg-ss video {
  object-fit: contain !important;
  background: #000;
}


/* Voice controls: full size in channel card; compact ONLY in floating PiP */
#floating .hg-vc-actions,
#floating [class*="Actions"].hg-vc-actions {
  pointer-events: auto !important;
  z-index: 60 !important;
  position: relative !important;
}
#floating .hg-vc-actions button {
  pointer-events: auto !important;
  cursor: pointer !important;
}
/* In-channel card stays 48px — do NOT shrink all #floating buttons */
#floating .hg-vc-pip .hg-vc-actions,
#floating .hg-vc-pip [class*="Actions"] {
  gap: 6px !important;
  padding: 6px 10px !important;
}
#floating .hg-vc-pip .hg-vc-actions button,
#floating .hg-vc-pip [class*="Actions"] button {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  padding: 0 !important;
}
#floating button.hg-vc-hangup,
.hg-vc-actions button.hg-vc-hangup {
  background: #f23f43 !important;
  color: #fff !important;
  border: 0 !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  z-index: 70 !important;
}
#floating button.hg-vc-hangup-sm,
.hg-vc-actions button.hg-vc-hangup-sm {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  border-radius: 999px !important;
}
#floating button.hg-vc-hangup-xs,
.hg-vc-pip button.hg-vc-hangup {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  border-radius: 999px !important;
}


/* HG discord comfort wave3 */
.channel_bar [data-unread="true"],
.channel_bar a[data-unread],
.channel_bar [class*="unread"] {
  font-weight: 600;
}
/* tighter voice participant rows under channels */
.channel_bar [class*="Voice"],
.channel_bar [class*="voice"] {
  font-size: 13px;
}
/* smoother message hover action feel */
[class*="Message"] [class*="Toolbar"],
[class*="message"] [class*="toolbar"] {
  transition: opacity 120ms ease, transform 120ms ease;
}


/* HG mention pills discord */
.channel_bar [class*="Unreads"],
.channel_bar [class*="unreads"],
.main_bar [class*="Unreads"] {
  font-weight: 700;
}

/* === HG Discord comfort wave (visible) === */
/* Theme profile owns density and interaction surfaces. */

/* Chat column: subtle vertical rhythm */
#root {
  font-size: var(--message-size, 15px);
}

/* Mention strip — stronger Discord yellow bar */
[data-mentioned="true"],
[class*="mentioned"] {
  background: var(--surfaces-mentioned) !important;
  box-shadow: inset 2px 0 0 0 var(--ctp-yellow) !important;
}

/* Floating message toolbar already themed in app; ensure it sits above */
.Toolbar {
  z-index: 5 !important;
}

/* === HG playing status === */
[data-hg-playing="true"],
.hg-playing-status {
  color: var(--ctp-green, #a6e3a1) !important;
}


/* === Distinct theme profiles (Neon / OLED / Soft Light / Gaming) === */
html[data-theme-profile="gaming"] [aria-current="page"],
html[data-theme-profile="gaming"] [data-selected="true"],
html[data-theme-profile="gaming"] .channel_bar a.active {
  border-radius: var(--borderRadius-sm, 4px) !important;
}

html[data-theme-profile="neon"] .main_bar,
html[data-theme-profile="neon"] [class*="server_rail"],
html[data-theme-profile="neon"] [class*="ServerRail"] {
  background:
    linear-gradient(180deg, #1a1530 0%, #080713 42%, #15112b 100%) !important;
  box-shadow: inset -1px 0 0 color-mix(in srgb, var(--ctp-teal) 42%, transparent);
}
html[data-theme-profile="neon"] .channel_bar,
html[data-theme-profile="neon"] [class*="channel_sidebar"],
html[data-theme-profile="neon"] [class*="ChannelSidebar"] {
  background: linear-gradient(180deg, #1a1530 0%, #100d20 100%) !important;
}
html[data-theme-profile="neon"] [aria-current="page"],
html[data-theme-profile="neon"] [data-selected="true"],
html[data-theme-profile="neon"] a[href].active {
  background: color-mix(in srgb, var(--ctp-teal) 18%, transparent) !important;
  box-shadow:
    inset 3px 0 0 0 var(--ctp-teal),
    0 0 18px color-mix(in srgb, var(--ctp-teal) 22%, transparent) !important;
}
html[data-theme-profile="neon"] button[type="submit"],
html[data-theme-profile="neon"] .hg-up-primary,
html[data-theme-profile="neon"] .hg-fb-send {
  box-shadow: 0 0 16px color-mix(in srgb, var(--ctp-teal) 40%, transparent);
}
html[data-theme-profile="neon"] [class*="mention"],
html[data-theme-profile="neon"] .mention {
  background: color-mix(in srgb, var(--ctp-pink) 22%, transparent) !important;
  color: var(--ctp-pink) !important;
}
@keyframes hg-neon-sheen {
  0% { background-position: 0% 0%; }
  100% { background-position: 0% 100%; }
}
html[data-theme-profile="neon"]:not([data-reduced-motion="true"]) .main_bar,
html[data-theme-profile="neon"]:not([data-reduced-motion="true"]) [class*="server_rail"] {
  background: linear-gradient(180deg, #1a1530, #080713, #20143a, #080713) !important;
  background-size: 100% 280%;
  animation: hg-neon-sheen 14s ease-in-out infinite alternate;
}

html[data-theme-profile="oled"],
html[data-theme-profile="oled"] body,
html[data-theme-profile="oled"] #root {
  background: #000 !important;
}
html[data-theme-profile="oled"] .main_bar,
html[data-theme-profile="oled"] [class*="server_rail"],
html[data-theme-profile="oled"] [class*="ServerRail"],
html[data-theme-profile="oled"] .channel_bar,
html[data-theme-profile="oled"] [class*="channel_sidebar"],
html[data-theme-profile="oled"] [class*="ChannelSidebar"],
html[data-theme-profile="oled"] aside,
html[data-theme-profile="oled"] .hg-vc-slot,
html[data-theme-profile="oled"] .app_root > div:first-child {
  background: #000 !important;
  box-shadow: inset -1px 0 0 rgb(255 255 255 / 10%);
}
html[data-theme-profile="oled"] [aria-current="page"],
html[data-theme-profile="oled"] [data-selected="true"] {
  background: rgb(255 255 255 / 8%) !important;
  box-shadow: inset 2px 0 0 0 var(--ctp-blue) !important;
  border-radius: 2px !important;
}
html[data-theme-profile="oled"] [class*="composer"],
html[data-theme-profile="oled"] [class*="MessageBox"] {
  background: #0b0b0d !important;
  border-radius: 4px !important;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 10%);
}

html[data-theme-profile="soft-light"] .main_bar,
html[data-theme-profile="soft-light"] [class*="server_rail"],
html[data-theme-profile="soft-light"] [class*="ServerRail"] {
  background: #f3edf7 !important;
}
html[data-theme-profile="soft-light"] .channel_bar,
html[data-theme-profile="soft-light"] [class*="channel_sidebar"],
html[data-theme-profile="soft-light"] [class*="ChannelSidebar"],
html[data-theme-profile="soft-light"] aside {
  background: #faf3fb !important;
}
html[data-theme-profile="soft-light"] [aria-current="page"],
html[data-theme-profile="soft-light"] [data-selected="true"],
html[data-theme-profile="soft-light"] a[href].active {
  background: color-mix(in srgb, var(--ctp-mauve) 14%, #fff) !important;
  box-shadow: var(--elevation-md) !important;
  border-radius: var(--borderRadius-lg, 16px) !important;
}
html[data-theme-profile="soft-light"] [class*="composer"],
html[data-theme-profile="soft-light"] [class*="MessageBox"] {
  border-radius: var(--borderRadius-xl, 22px) !important;
  box-shadow: var(--elevation-sm);
  background: #fff9ff !important;
}
html[data-theme-profile="soft-light"] button[type="submit"],
html[data-theme-profile="soft-light"] .hg-up-primary {
  border-radius: var(--borderRadius-xl, 22px) !important;
}

@keyframes hg-soft-breathe {
  0%, 100% { box-shadow: 0 8px 24px rgb(76 55 92 / 10%); }
  50% { box-shadow: 0 14px 36px rgb(76 55 92 / 16%); }
}
html[data-theme-profile="soft-light"]:not([data-reduced-motion="true"]) [aria-current="page"],
html[data-theme-profile="soft-light"]:not([data-reduced-motion="true"]) [data-selected="true"] {
  animation: hg-soft-breathe 6s ease-in-out infinite;
}


/* === Gaming: night lobby. Cool ink, brass only on intent. === */
html[data-theme-profile="gaming"] {
  --hg-brass: #c6a56a;
  --hg-brass-soft: rgba(198, 165, 106, 0.12);
  --hg-ink: #0c0e12;
  --hg-rail: #101218;
  --hg-panel: #14171e;
  --hg-chat: #181c24;
  --hg-lift: #1e232c;
  --hg-text: #e8eaef;
  --hg-muted: #8e95a3;
  --hg-link: #a9bdd6;
}

html[data-theme-profile="gaming"][data-theme="dark"] {
  --ctp-base: #181c24 !important;
  --ctp-mantle: #14171e !important;
  --ctp-crust: #0c0e12 !important;
  --ctp-surface0: #1e232c !important;
  --ctp-surface1: #262b36 !important;
  --ctp-surface2: #2e3440 !important;
  --ctp-text: #e8eaef !important;
  --ctp-subtext1: #c5cad3 !important;
  --ctp-subtext0: #8e95a3 !important;
  --ctp-overlay1: #8e95a3 !important;
  --ctp-blue: #a9bdd6 !important;
  --ctp-lavender: #c5d0e0 !important;
  --ctp-green: #7dcea0 !important;
  --ctp-teal: #8eb8b0 !important;
  --ctp-yellow: #e0a84a !important;
  --ctp-red: #e06c75 !important;
  --ctp-peach: #e09a5a !important;
  --ctp-mauve: #a9bdd6 !important;
  --surfaces-rail: #101218 !important;
  --surfaces-user-panel: #101218 !important;
  --surfaces-composer: #1e232c !important;
  --surfaces-floating: #14171e !important;
  --surfaces-hover: #262b36 !important;
  --surfaces-active: #2e3440 !important;
  --surfaces-selected: rgba(198, 165, 106, 0.08) !important;
  --surfaces-message-hover: #1c212b !important;
  --text-header: #e8eaef !important;
  --text-muted: #8e95a3 !important;
  --text-link: #a9bdd6 !important;
  --text-interactive: #c5cad3 !important;
  --brand-discord: #a9bdd6 !important;
  --md-sys-color-surface: #181c24 !important;
  --md-sys-color-surface-container: #14171e !important;
  --md-sys-color-surface-container-low: #14171e !important;
  --md-sys-color-surface-container-high: #1e232c !important;
  --md-sys-color-surface-container-highest: #0c0e12 !important;
  --md-sys-color-primary: #c6a56a !important;
  --md-sys-color-on-primary: #1a1408 !important;
  --md-sys-color-on-surface: #e8eaef !important;
  --md-sys-color-on-surface-variant: #8e95a3 !important;
  --md-sys-color-primary-container: #3a3224 !important;
  --md-sys-color-on-primary-container: #f3ead6 !important;
}

html[data-theme-profile="gaming"][data-theme="dark"],
html[data-theme-profile="gaming"][data-theme="dark"] body,
html[data-theme-profile="gaming"][data-theme="dark"] #root {
  background: #0c0e12 !important;
  color: #e8eaef;
}

html[data-theme-profile="gaming"][data-theme="dark"] .main_bar,
html[data-theme-profile="gaming"][data-theme="dark"] [class*="server_rail"],
html[data-theme-profile="gaming"][data-theme="dark"] [class*="ServerRail"] {
  background: #101218 !important;
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.05) !important;
}

html[data-theme-profile="gaming"][data-theme="dark"] .channel_bar,
html[data-theme-profile="gaming"][data-theme="dark"] [class*="channel_sidebar"],
html[data-theme-profile="gaming"][data-theme="dark"] [class*="ChannelSidebar"],
html[data-theme-profile="gaming"][data-theme="dark"] aside {
  background: #14171e !important;
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.05) !important;
}

html[data-theme-profile="gaming"][data-theme="dark"] main,
html[data-theme-profile="gaming"][data-theme="dark"] [class*="MessageArea"],
html[data-theme-profile="gaming"][data-theme="dark"] [class*="messages"] {
  background: #181c24 !important;
  background-image: none !important;
}

html[data-theme-profile="gaming"][data-theme="dark"] [aria-current="page"],
html[data-theme-profile="gaming"][data-theme="dark"] [data-selected="true"],
html[data-theme-profile="gaming"][data-theme="dark"] .channel_bar a.active {
  background: rgba(198, 165, 106, 0.08) !important;
  box-shadow: inset 2px 0 0 0 #c6a56a !important;
  border-radius: 6px !important;
  color: #e8eaef !important;
}

html[data-theme-profile="gaming"][data-theme="dark"] [class*="unread"],
html[data-theme-profile="gaming"][data-theme="dark"] [class*="Unread"] {
  color: #c6a56a;
}

html[data-theme-profile="gaming"][data-theme="dark"] [class*="composer"],
html[data-theme-profile="gaming"][data-theme="dark"] [class*="MessageBox"] {
  background: #1e232c !important;
  border-radius: 8px !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06) !important;
  color: #e8eaef !important;
}

html[data-theme-profile="gaming"][data-theme="dark"] .cm-content,
html[data-theme-profile="gaming"][data-theme="dark"] .cm-line {
  color: #e8eaef !important;
  caret-color: #c6a56a !important;
}

html[data-theme-profile="gaming"][data-theme="dark"] .cm-editor.cm-focused {
  outline: 2px solid rgba(198, 165, 106, 0.85);
  outline-offset: 1px;
}

html[data-theme-profile="gaming"][data-theme="dark"] button[type="submit"],
html[data-theme-profile="gaming"][data-theme="dark"] .hg-up-primary,
html[data-theme-profile="gaming"][data-theme="dark"] .hg-fb-send {
  background: #c6a56a !important;
  color: #1a1408 !important;
  border: 0 !important;
  box-shadow: none !important;
  animation: none !important;
}

html[data-theme-profile="gaming"][data-theme="dark"] [class*="mention"],
html[data-theme-profile="gaming"][data-theme="dark"] .mention {
  background: rgba(169, 189, 214, 0.14) !important;
  color: #d5deea !important;
}

html[data-theme-profile="gaming"][data-theme="dark"] a {
  color: #a9bdd6;
}

html[data-theme-profile="gaming"][data-theme="dark"] [data-hg-profile] {
  background: #14171e !important;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45) !important;
}

html[data-theme-profile="gaming"][data-theme="dark"] input:focus-visible,
html[data-theme-profile="gaming"][data-theme="dark"] textarea:focus-visible,
html[data-theme-profile="gaming"][data-theme="dark"] button:focus-visible {
  outline: 2px solid rgba(198, 165, 106, 0.85);
  outline-offset: 2px;
}

html[data-theme-profile="gaming"][data-theme="light"] {
  --ctp-base: #f3f4f6 !important;
  --ctp-mantle: #e8eaee !important;
  --ctp-crust: #e1e3e8 !important;
  --ctp-surface0: #ffffff !important;
  --ctp-text: #1c1f26 !important;
  --ctp-subtext0: #5c6570 !important;
  --ctp-blue: #3d5f8a !important;
  --ctp-lavender: #3d5f8a !important;
  --ctp-mauve: #3d5f8a !important;
  --md-sys-color-primary: #8d6b32 !important;
  --md-sys-color-on-primary: #fffaf2 !important;
  --md-sys-color-on-surface: #1c1f26 !important;
  --brand-discord: #3d5f8a !important;
  --text-link: #3d5f8a !important;
}

html[data-theme-profile="gaming"][data-theme="light"],
html[data-theme-profile="gaming"][data-theme="light"] body {
  background: #f3f4f6 !important;
  color: #1c1f26;
}

html[data-theme-profile="gaming"][data-theme="light"] .main_bar,
html[data-theme-profile="gaming"][data-theme="light"] [class*="server_rail"] {
  background: #e8eaee !important;
  box-shadow: inset -1px 0 0 rgba(28, 31, 38, 0.08) !important;
}

html[data-theme-profile="gaming"][data-theme="light"] .channel_bar,
html[data-theme-profile="gaming"][data-theme="light"] aside {
  background: #eef0f3 !important;
}

html[data-theme-profile="gaming"][data-theme="light"] [aria-current="page"],
html[data-theme-profile="gaming"][data-theme="light"] [data-selected="true"] {
  background: rgba(141, 107, 50, 0.12) !important;
  box-shadow: inset 2px 0 0 0 #8d6b32 !important;
}

html[data-theme-profile="gaming"][data-theme="light"] button[type="submit"],
html[data-theme-profile="gaming"][data-theme="light"] .hg-up-primary {
  background: #8d6b32 !important;
  color: #fffaf2 !important;
  box-shadow: none !important;
  animation: none !important;
}

html[data-theme-profile="gaming"][data-theme="light"] [class*="mention"],
html[data-theme-profile="gaming"][data-theme="light"] .mention {
  background: rgba(61, 95, 138, 0.12) !important;
  color: #2c4668 !important;
}

html[data-theme-profile="gaming"][data-theme="light"] .cm-content,
html[data-theme-profile="gaming"][data-theme="light"] .cm-line {
  color: #1c1f26 !important;
  caret-color: #8d6b32 !important;
}

/* === Gaming finish: the chrome the token pass never reached === */
html[data-theme-profile="gaming"][data-theme="dark"] {
  --md-sys-color-primary: #a9bdd6 !important;
  --md-sys-color-on-primary: #141820 !important;
  scrollbar-color: #2e3440 transparent;
}

html[data-theme-profile="gaming"][data-theme="dark"] .main_bar a[aria-current="page"]::before,
html[data-theme-profile="gaming"][data-theme="dark"] .main_bar [data-selected="true"]::before,
html[data-theme-profile="gaming"][data-theme="dark"] .main_bar a.active::before {
  background: #c6a56a !important;
  width: 3px !important;
  height: 18px !important;
  border-radius: 0 2px 2px 0 !important;
}

html[data-theme-profile="gaming"][data-theme="dark"] .channel_bar a[aria-current="page"],
html[data-theme-profile="gaming"][data-theme="dark"] .channel_bar [data-selected="true"],
html[data-theme-profile="gaming"][data-theme="dark"] .channel_bar a.active,
html[data-theme-profile="gaming"][data-theme="dark"] .settings_sidebar a[aria-selected="true"] {
  background: rgba(198, 165, 106, 0.08) !important;
  box-shadow: inset 2px 0 0 0 #c6a56a !important;
  color: #e8eaef !important;
}

html[data-theme-profile="gaming"][data-theme="dark"] [class*="header"],
html[data-theme-profile="gaming"][data-theme="dark"] [class*="Header"],
html[data-theme-profile="gaming"][data-theme="dark"] [class*="channel_header"] {
  background: #181c24 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  box-shadow: none !important;
}

html[data-theme-profile="gaming"][data-theme="dark"] [class*="user_panel"],
html[data-theme-profile="gaming"][data-theme="dark"] [class*="UserPanel"] {
  background: #101218 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}

html[data-theme-profile="gaming"][data-theme="dark"] button[data-variant="filled"],
html[data-theme-profile="gaming"][data-theme="dark"] button.md-filled,
html[data-theme-profile="gaming"][data-theme="dark"] button[type="submit"] {
  --md-sys-color-primary: #c6a56a !important;
  --md-sys-color-on-primary: #1a1408 !important;
  background: #c6a56a !important;
  color: #1a1408 !important;
  box-shadow: none !important;
  animation: none !important;
}

html[data-theme-profile="gaming"][data-theme="dark"] button[data-variant="text"],
html[data-theme-profile="gaming"][data-theme="dark"] button[data-variant="outlined"] {
  background: transparent !important;
  color: #a9bdd6 !important;
  --color: #a9bdd6 !important;
}

html[data-theme-profile="gaming"][data-theme="dark"] [role="dialog"],
html[data-theme-profile="gaming"][data-theme="dark"] [class*="Modal"] {
  background: #1e232c !important;
  color: #e8eaef !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 12px !important;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.5) !important;
}

html[data-theme-profile="gaming"][data-theme="dark"] .settings_overlay {
  background: #14171e !important;
}
html[data-theme-profile="gaming"][data-theme="dark"] .settings_overlay .settings_sidebar {
  background: #101218 !important;
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.05) !important;
}
html[data-theme-profile="gaming"][data-theme="dark"] .settings_overlay .settings_cont {
  background: transparent !important;
}

html[data-theme-profile="gaming"][data-theme="dark"] table {
  border-collapse: collapse;
  width: 100%;
}
html[data-theme-profile="gaming"][data-theme="dark"] th {
  color: #8e95a3 !important;
  font-size: 11px !important;
  font-weight: 650 !important;
  letter-spacing: 0.04em;
  text-align: start;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}
html[data-theme-profile="gaming"][data-theme="dark"] td {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
  color: #e8eaef;
}
html[data-theme-profile="gaming"][data-theme="dark"] tr:hover td {
  background: rgba(255, 255, 255, 0.025);
}

html[data-theme-profile="gaming"][data-theme="dark"] form input:not([type="file"]):not([type="checkbox"]):not([type="radio"]),
html[data-theme-profile="gaming"][data-theme="dark"] form textarea,
html[data-theme-profile="gaming"][data-theme="dark"] form select {
  background: #1e232c !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #e8eaef !important;
  border-radius: 8px !important;
}
html[data-theme-profile="gaming"][data-theme="dark"] form input:focus,
html[data-theme-profile="gaming"][data-theme="dark"] form textarea:focus,
html[data-theme-profile="gaming"][data-theme="dark"] form select:focus {
  border-color: rgba(198, 165, 106, 0.85) !important;
  box-shadow: 0 0 0 1px rgba(198, 165, 106, 0.85) !important;
}

html[data-theme-profile="gaming"][data-theme="dark"] #floating [class*="Card"],
html[data-theme-profile="gaming"][data-theme="dark"] .hg-join-voice,
html[data-theme-profile="gaming"][data-theme="dark"] .hg-vc-slot {
  background: #1e232c !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06) !important;
}

/* Fallback Discord chrome only when no named profile is set. */
html[data-theme="dark"]:not([data-theme-profile="gaming"]):not([data-theme-profile="neon"]):not([data-theme-profile="oled"]):not([data-theme-profile="soft-light"]) {
  --ctp-base: #313338 !important;
  --ctp-mantle: #2b2d31 !important;
  --ctp-crust: #1e1f22 !important;
  --ctp-surface0: #2b2d31 !important;
  --ctp-surface1: #3f4147 !important;
  --ctp-surface2: #4e5058 !important;
  --ctp-text: #f2f3f5 !important;
  --ctp-subtext1: #dbdee1 !important;
  --ctp-subtext0: #949ba4 !important;
  --ctp-blue: #5865f2 !important;
  --ctp-lavender: #949cf7 !important;
  --ctp-green: #23a559 !important;
  --ctp-yellow: #f0b232 !important;
  --ctp-red: #f23f43 !important;
  --ctp-pink: #eb459e !important;
  --surfaces-rail: #1e1f22 !important;
  --surfaces-user-panel: #232428 !important;
  --surfaces-composer: #383a40 !important;
  --surfaces-floating: #111214 !important;
  --surfaces-hover: #35373c !important;
  --surfaces-active: #404249 !important;
  --surfaces-selected: #404249 !important;
  --surfaces-message-hover: #2e3035 !important;
  --text-header: #f2f3f5 !important;
  --text-muted: #949ba4 !important;
  --text-link: #00a8fc !important;
  --text-interactive: #b5bac1 !important;
  --brand-discord: #5865f2 !important;
  --md-sys-color-surface: #313338 !important;
  --md-sys-color-surface-container: #2b2d31 !important;
  --md-sys-color-surface-container-low: #2b2d31 !important;
  --md-sys-color-surface-container-high: #232428 !important;
  --md-sys-color-surface-container-highest: #1e1f22 !important;
  --md-sys-color-primary: #5865f2 !important;
  --md-sys-color-on-primary: #ffffff !important;
  --md-sys-color-on-surface: #f2f3f5 !important;
  --md-sys-color-on-surface-variant: #b5bac1 !important;
}

[data-hg-profile="card"],
[data-hg-profile="sheet"] {
  background: #111214 !important;
  color: #f2f3f5 !important;
  border-radius: 8px;
}
[data-hg-profile] button[class],
[data-hg-profile] a[class] {
  border-radius: 4px;
}

/* Profile popout: name sits under the avatar, Discord-style, even before the next client build. */
[data-hg-profile="card"] > div:first-child > div:nth-child(2),
[data-hg-profile="sheet"] > div:nth-child(2) > div:nth-child(2) {
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 2px !important;
}
[data-hg-profile] {
  border-radius: 8px !important;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45) !important;
}

/* Profile header: banner stays behind the avatar ring. */
[data-hg-profile] {
  isolation: isolate;
  background: #111214 !important;
  color: #f2f3f5 !important;
  border-radius: 8px !important;
  overflow: hidden;
}
[data-hg-profile] > div:first-child,
[data-hg-profile="sheet"] > div:nth-child(2) {
  isolation: isolate;
  overflow: visible !important;
}

/* Server settings: file-input fragments were separate grid cells, so the icon jumped to the right of its label. */
.settings_overlay .settings_cont form > div > div {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  align-items: stretch !important;
  box-sizing: border-box !important;
}
.settings_overlay .settings_cont form mdui-text-field,
.settings_overlay .settings_cont form mdui-select {
  width: 100% !important;
  max-width: none !important;
  align-self: stretch !important;
}
.settings_overlay .settings_cont form img {
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
.settings_overlay .settings_cont form label,
.settings_overlay .settings_cont form .label {
  display: block !important;
  margin: 0 0 6px !important;
}
.settings_overlay .settings_cont form input:not([type="file"]),
.settings_overlay .settings_cont form textarea,
.settings_overlay .settings_cont form mdui-text-field,
.settings_overlay .settings_cont form mdui-select {
  width: 100% !important;
  max-width: none !important;
}

/* Phone login: the card is taller than the screen. Centering clips the form
   off the top, so the page looks like a black screen. */
@media (max-width: 900px) {
  a[href="/login"] {
    position: static !important;
    display: flex !important;
    margin: 12px auto 4px !important;
  }
  a[href="/login"] + div {
    align-items: flex-start !important;
    justify-content: flex-start !important;
    height: auto !important;
    min-height: 100% !important;
    overflow: visible !important;
    padding: 8px 12px 88px !important;
  }
}

@media (max-width: 600px) {
  .app_body header,
  .app_body [role="banner"] {
    overflow-x: auto !important;
    max-width: 100vw !important;
  }
}

/* Phone: the slide drawer widens the page to 200vw and parks the chat
   off-screen. The visible half is then a black void. */
@media (max-width: 840px) {
  html, body {
    overflow-x: hidden;
    max-width: 100%;
  }
  .app_root {
    width: 100% !important;
    max-width: 100vw !important;
  }
  .app_body {
    margin-left: 0 !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100vw !important;
  }
}

#hg-guest-login {
  position: fixed;
  inset: 0;
  z-index: 100050;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 24px 16px 32px;
  background: #111318;
  overflow: auto;
}
#hg-guest-login .hg-guest-card {
  width: min(420px, 100%);
  margin-top: 12vh;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px 18px;
  border-radius: 16px;
  background: #1e1e2e;
  color: #e8eaef;
  font: 15px/1.4 system-ui, sans-serif;
}
#hg-guest-login strong { font-size: 22px; }
#hg-guest-login p { margin: 0; color: #b4b9c5; }
#hg-guest-login input {
  width: 100%;
  box-sizing: border-box;
  height: 44px;
  border-radius: 8px;
  border: 1px solid #45475a;
  background: #181825;
  color: #e8eaef;
  padding: 0 12px;
  font: inherit;
}
#hg-guest-login button {
  height: 44px;
  border: 0;
  border-radius: 8px;
  background: #c6a56a;
  color: #1a1408;
  font: 700 16px/1 system-ui, sans-serif;
}
#hg-guest-login .hg-guest-err { color: #f38ba8; }
@media (max-width: 840px) {
  [style*="app-region: drag"],
  [style*="app-region:drag"] {
    -webkit-app-region: no-drag !important;
  }
}