/* FLIND 3D GLASS ? ???????? + ?????????? ?????? */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  --bg-black: #050505;
  --bg-primary: #0A0A0A;
  --bg-secondary: #121212;
  --bg-tertiary: #1A1A1A;
  --bg-hover: #242424;
  --bg-elevated: #1E1E1E;
  --bg-glass: rgba(255,255,255,0.04);

  --text-primary: #FFFFFF;
  --text-secondary: #B0B0B0;
  --text-tertiary: #707070;
  --text-muted: #4A4A4A;
  --text-inverse: #0A0A0A;

  --border-dark: #1A1A1A;
  --border: #2A2A2A;
  --border-light: #3A3A3A;
  --border-glass: rgba(255,255,255,0.06);

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.4);
  --shadow-lg: 0 20px 60px rgba(0,0,0,0.6);
  --shadow-xl: 0 30px 80px rgba(0,0,0,0.8);
  --shadow-glass: 0 8px 32px rgba(0,0,0,0.4);

  --accent: #7C5CFC;
  --accent-hover: #9577FF;
  --accent-active: #6B4CE8;
  --accent-dim: rgba(124,92,252,0.15);
  --accent-glow: rgba(124,92,252,0.25);
  --accent-glass: rgba(124,92,252,0.08);
  --accent-secondary: #A78BFA;
  --accent-dark: #4C3F91;

  --green: #34D399;
  --green-dim: rgba(52,211,153,0.15);
  --red: #EF4444;
  --red-dim: rgba(239,68,68,0.15);
  --yellow: #FBBF24;
  --blue: #3B82F6;

  --glass-bg: rgba(255,255,255,0.04);
  --glass-border: rgba(255,255,255,0.06);
  --glass-blur: blur(8px);
  --glass-inset: inset 0 1px 0 rgba(255,255,255,0.08);
  --glass-inset-dark: inset 0 -1px 0 rgba(0,0,0,0.25);

  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 999px;

  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease: cubic-bezier(0.33, 0.86, 0.56, 1);

  --rail-w: 56px;
  --list-w: 320px;
  --info-w: 280px;
  --feed-list-w: 420px;
}

/* ===== LIGHT ===== */
body.flind-glass.flind-glass-light {
  --bg-black: #E8E8EA;
  --bg-primary: #F2F2F3;
  --bg-secondary: #FFFFFF;
  --bg-tertiary: #EBEBEC;
  --bg-hover: #E2E2E4;
  --bg-elevated: #FFFFFF;
  --bg-glass: rgba(255,255,255,0.78);

  --text-primary: #121212;
  --text-secondary: #3A3A3A;
  --text-tertiary: #6B6B6B;
  --text-muted: #8A8A8A;
  --text-inverse: #FFFFFF;

  --border-dark: #D8D8DA;
  --border: #C9C9CB;
  --border-light: #B8B8BA;
  --border-glass: rgba(0,0,0,0.08);

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.08);
  --shadow-lg: 0 20px 50px rgba(0,0,0,0.1);
  --shadow-xl: 0 30px 70px rgba(0,0,0,0.12);
  --shadow-glass: 0 8px 32px rgba(0,0,0,0.06);

  --glass-bg: rgba(255,255,255,0.72);
  --glass-border: rgba(0,0,0,0.08);
  --glass-inset: inset 0 1px 0 rgba(255,255,255,0.95);
  --glass-inset-dark: inset 0 -1px 0 rgba(0,0,0,0.05);
  --accent-dim: rgba(124,92,252,0.1);
  --accent-glass: rgba(124,92,252,0.06);
}

body.flind-glass,
body.flind-glass.theme-violet,
body.flind-glass.theme-dark-blue,
body.flind-glass.theme-dark-orange,
body.flind-glass.theme-light-orange {
  --font: var(--font-family) !important;
  --font-display: "Press Start 2P", "Courier New", monospace !important;
  --font-pixel: "Press Start 2P", "Courier New", monospace !important;
  --bg-glass: var(--glass-bg);
  --text-primary: #FFFFFF;
  --text-secondary: #B0B0B0;
  --text-tertiary: #707070;
  --accent-primary: #7C5CFC;
  --accent-secondary: #A78BFA;
  --border-light: rgba(255,255,255,0.06);
  --r-card: 16px;
  --r-pill: 999px;
  --r-btn: 10px;
  font-family: var(--font-family) !important;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 400;
  color: #FFFFFF !important;
  background: #0A0A0A !important;
  letter-spacing: 0 !important;
  -webkit-font-smoothing: antialiased;
}

body.flind-glass.flind-glass-light,
body.flind-glass.flind-glass-light.theme-violet,
body.flind-glass.flind-glass-light.theme-dark-blue,
body.flind-glass.flind-glass-light.theme-dark-orange,
body.flind-glass.flind-glass-light.theme-light-orange {
  --text-primary: #121212;
  --text-secondary: #3A3A3A;
  --text-tertiary: #6B6B6B;
  --border-light: rgba(0,0,0,0.08);
  color: #121212 !important;
  background: #F2F2F3 !important;
}

/* light: ?????????? ??????? ? ?????? */
body.flind-glass.flind-glass-light .chats-panel,
body.flind-glass.flind-glass-light .flind-rail,
body.flind-glass.flind-glass-light .flind-info-panel,
body.flind-glass.flind-glass-light .chat-header,
body.flind-glass.flind-glass-light .message-input-area {
  background: rgba(255,255,255,0.82) !important;
  border-color: rgba(40,20,80,0.1) !important;
}
body.flind-glass.flind-glass-light .chat-name,
body.flind-glass.flind-glass-light .post-author,
body.flind-glass.flind-glass-light .flind-inbox-title,
body.flind-glass.flind-glass-light .contact-name,
body.flind-glass.flind-glass-light .post-content,
body.flind-glass.flind-glass-light .message.incoming .message-body {
  color: #121018 !important;
}
body.flind-glass.flind-glass-light .chat-last-message,
body.flind-glass.flind-glass-light .post-time,
body.flind-glass.flind-glass-light .chat-time,
body.flind-glass.flind-glass-light .flind-inbox-kicker,
body.flind-glass.flind-glass-light .caption {
  color: #6B6580 !important;
}
body.flind-glass.flind-glass-light .message.incoming .message-bubble {
  background: #EAE6F2 !important;
  border-color: #C9C2DA !important;
  color: #121018 !important;
}
body.flind-glass.flind-glass-light .post-card,
body.flind-glass.flind-glass-light .create-post,
body.flind-glass.flind-glass-light .chat-item:hover {
  background: rgba(255,255,255,0.9) !important;
  border-color: rgba(40,20,80,0.1) !important;
}
body.flind-glass.flind-glass-light .fl-icon {
  filter: brightness(0) invert(0.2);
}
body.flind-glass.flind-glass-light .flind-rail-btn .fl-icon {
  filter: brightness(0) invert(0.35);
}
body.flind-glass.flind-glass-light .no-chat-selected h3 {
  background: linear-gradient(135deg, #121018, #4C3F91);
  -webkit-background-clip: text;
  background-clip: text;
}
body.flind-glass.flind-glass-light .flind-inbox-search,
body.flind-glass.flind-glass-light #messageInput,
body.flind-glass.flind-glass-light .input,
body.flind-glass.flind-glass-light textarea {
  background: #F4F1FA !important;
  border-color: #C9C2DA !important;
  color: #121018 !important;
}
body.flind-glass.flind-glass-light .flind-inbox-search input::placeholder,
body.flind-glass.flind-glass-light #messageInput::placeholder {
  color: #8A8498 !important;
}

body.flind-glass.theme-violet .nav-tab,
body.flind-glass.theme-violet .contact-name,
body.flind-glass.theme-violet .no-chat-selected h3,
body.flind-glass.theme-violet .modal-content h2,
body.flind-glass.theme-violet .fl-heading-with-icon {
  font-family: var(--font-family) !important;
  letter-spacing: -0.01em !important;
  font-weight: 600 !important;
}

body.flind-glass.theme-violet button {
  transform: none !important;
  font-family: var(--font-family) !important;
  letter-spacing: 0 !important;
  box-shadow: none !important;
  text-transform: none !important;
}
body.flind-glass.theme-violet button:hover,
body.flind-glass.theme-violet button:active {
  transform: none !important;
}

/* hide old docks ? ????? ????????? */
body.flind-glass #flindImbaDock,
body.flind-glass #flindVariantDock,
body.flind-glass .flind-design-badge,
body.flind-glass #mediaPermissionBar,
body.flind-glass .theme-switcher {
  display: none !important;
}

/* ambient ? ?????? ???????? ?????? */
body.flind-glass::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: #0A0A0A;
}
body.flind-glass::after {
  content: '';
  position: fixed;
  z-index: 0;
  pointer-events: none;
  width: 55vmax;
  height: 55vmax;
  left: -8%;
  top: -12%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(124,92,252,0.11) 0%, transparent 68%);
  transform: translate3d(0, 0, 0);
  animation: flAmbientFloat 26s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes flAmbientFloat {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(22vw, 18vh, 0); }
}
body.flind-glass.flind-glass-light::before {
  background: #F2F2F3;
}
body.flind-glass.flind-glass-light::after {
  display: block;
  background: radial-gradient(circle, rgba(124,92,252,0.07) 0%, transparent 68%);
}
@media (prefers-reduced-motion: reduce) {
  body.flind-glass::after { animation: none; }
}

#app, .app-container { position: relative; z-index: 1; }

/* ===== GRID ===== */
.app-container.flind-inbox-layout {
  display: grid !important;
  grid-template-columns: var(--rail-w) var(--list-w) minmax(0, 1fr) var(--info-w);
  height: 100vh;
  height: 100dvh;
  background: transparent !important;
  gap: 0;
  transition: grid-template-columns 0.35s var(--ease);
}
body.flind-page-feed .app-container.flind-inbox-layout {
  grid-template-columns: var(--rail-w) minmax(400px, 520px) minmax(0, 1fr) !important;
}
body.flind-page-feed .flind-info-panel {
  display: none !important;
}
body.flind-page-feed .flind-inbox-head .panel-buttons {
  display: none !important;
}
/* ????????? ?????????? ?????? ?? ??????? ???? */
body.flind-glass:not(.flind-page-chats) .flind-send-msg-btn {
  display: none !important;
}
body.flind-page-feed .chats-panel {
  max-width: none !important;
  width: auto !important;
}
body.flind-page-feed .flind-inbox-head,
body.flind-page-feed #feedPage.page-content.active {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  width: 100%;
  box-sizing: border-box;
}
body.flind-page-feed #feedPage.page-content.active {
  display: block !important;
}
/* ?? ????? ?? ?????????? ???????? ??? ? ?????? ???????? */
body.flind-page-feed #chatHeader,
body.flind-page-feed #messagesArea,
body.flind-page-feed #messageInputArea,
body.flind-page-feed #messageReplyBar,
body.flind-page-feed #flindBotCommands,
body.flind-page-feed #flindPendingAttach {
  display: none !important;
}
body.flind-page-feed #noChatSelected {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
}
body.flind-list-collapsed .app-container.flind-inbox-layout {
  grid-template-columns: var(--rail-w) 0 minmax(0, 1fr) var(--info-w);
}
body.flind-list-collapsed.flind-page-feed .app-container.flind-inbox-layout {
  grid-template-columns: var(--rail-w) 0 minmax(0, 1fr) !important;
}
body.flind-glass .show-panel-btn {
  display: none !important;
  left: calc(var(--rail-w) + 12px) !important;
  top: 72px !important;
  z-index: 120 !important;
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border) !important;
  color: var(--text-primary) !important;
  box-shadow: var(--shadow-md) !important;
}
body.flind-glass .chats-panel.collapsed ~ .show-panel-btn,
body.flind-list-collapsed .show-panel-btn {
  display: flex !important;
}

/* ===== RAIL ===== */
html:not(.flind-mobile-ui) {
  --rail-w: 84px;
}
html:not(.flind-mobile-ui) body.flind-glass {
  --rail-w: 84px;
}
.flind-rail {
  width: var(--rail-w);
  background: var(--bg-secondary) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-right: 1px solid var(--glass-border);
  box-shadow: var(--glass-inset), var(--glass-inset-dark);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 0;
  gap: 8px;
  contain: layout style;
}

.flind-rail-avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full) !important;
  border: 1px solid var(--glass-border) !important;
  background: var(--accent-dim) !important;
  color: var(--accent) !important;
  font-weight: 600;
  font-size: 15px;
  box-shadow: 0 0 20px rgba(124,92,252,0.12) !important;
  transition: transform 0.35s var(--ease-bounce), box-shadow 0.3s ease !important;
}
html:not(.flind-mobile-ui) body.flind-glass .flind-rail-avatar {
  width: 56px;
  height: 56px;
  font-size: 20px;
}
.flind-rail-avatar:hover {
  animation: flAvatarWiggle 0.55s var(--ease-bounce) !important;
  box-shadow: 0 0 0 3px rgba(124,92,252,0.35), 0 0 22px rgba(124,92,252,0.35) !important;
}

.flind-rail-nav, .flind-rail-bottom {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  width: 100%;
}
html:not(.flind-mobile-ui) body.flind-glass .flind-rail-nav {
  gap: 8px;
}
.flind-rail-label {
  display: none;
}

.flind-rail-btn {
  width: 40px;
  height: 40px;
  border-radius: var(--radius) !important;
  border: none !important;
  background: transparent !important;
  color: var(--text-tertiary) !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  transition: all 0.3s var(--ease-bounce) !important;
}
html:not(.flind-mobile-ui) body.flind-glass .flind-rail-btn {
  width: 56px;
  height: 56px;
  border-radius: 16px !important;
}
.flind-rail-btn .fl-icon {
  filter: brightness(0) invert(0.45);
  transition: filter 0.25s ease, transform 0.25s var(--ease-bounce);
}
html:not(.flind-mobile-ui) body.flind-glass .flind-rail-btn .fl-icon {
  width: 28px;
  height: 28px;
}
body.flind-glass.flind-glass-light .flind-rail-btn .fl-icon {
  filter: brightness(0) invert(0.35);
}
.flind-rail-btn:hover {
  background: var(--bg-hover) !important;
  transform: translateX(2px) !important;
}
.flind-rail-btn:hover .fl-icon {
  filter: brightness(0) saturate(100%) invert(48%) sepia(80%) saturate(2000%) hue-rotate(230deg) brightness(105%) contrast(105%) !important;
  transform: scale(1.08);
}
.flind-rail-btn.active {
  background: var(--accent-dim) !important;
  box-shadow: 0 0 20px rgba(124,92,252,0.1) !important;
}
.flind-rail-btn.active .fl-icon {
  filter: brightness(0) saturate(100%) invert(48%) sepia(80%) saturate(2000%) hue-rotate(230deg) brightness(105%) contrast(105%) !important;
}

/* ===== SIDEBAR ===== */
.chats-panel {
  width: auto !important;
  max-width: none !important;
  height: 100% !important;
  background: var(--bg-secondary) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-right: 1px solid var(--glass-border);
  box-shadow: var(--shadow-sm) !important;
  overflow: hidden;
  contain: layout style;
  min-width: 0;
}
.chats-panel.collapsed {
  width: 0 !important;
  min-width: 0 !important;
  padding: 0 !important;
  border: none !important;
  opacity: 0;
  pointer-events: none;
}
.chats-panel .nav-tabs,
.flind-inbox-layout .profile-click-area,
#chatsPage .search-bar { display: none !important; }

.flind-inbox-head {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  padding: 16px 14px 12px !important;
  border-bottom: 1px solid var(--border);
  gap: 12px;
  background: transparent;
  width: 100%;
  box-sizing: border-box;
}
body.flind-glass.flind-glass-light .flind-inbox-head {
  background: transparent;
}
.flind-inbox-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
}
.flind-inbox-kicker {
  font-size: 11px;
  color: var(--text-tertiary);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 500;
}
.flind-inbox-title {
  font-family: var(--font-display) !important;
  font-size: 14px !important;
  line-height: 22px !important;
  font-weight: 400 !important;
  letter-spacing: 0.04em;
  color: var(--text-primary) !important;
  margin: 0 !important;
}
body.flind-glass .auth-brand-name,
body.flind-glass .no-chat-selected h3,
body.flind-glass .modal-content h2,
body.flind-glass .profile-modal-header h2,
body.flind-glass .fl-heading-with-icon,
body.flind-glass .contact-name,
body.flind-glass .chat-header .chat-name {
  font-family: var(--font-display) !important;
  letter-spacing: 0.04em;
  line-height: 1.45;
}

.flind-send-msg-btn {
  width: 100%;
  border: none !important;
  border-radius: var(--radius) !important;
  padding: 10px 16px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  background: var(--accent) !important;
  color: #fff !important;
  box-shadow: 0 4px 16px rgba(124,92,252,0.25) !important;
  transition: all 0.3s var(--ease-bounce) !important;
  position: relative;
  overflow: hidden;
}
.flind-send-msg-btn:hover {
  background: var(--accent-hover) !important;
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 8px 32px rgba(124,92,252,0.35) !important;
}
.flind-send-msg-btn:active {
  transform: scale(0.96) !important;
}

.flind-inbox-search {
  display: none;
  align-items: center;
  gap: 8px;
  width: 100% !important;
  box-sizing: border-box;
  height: 40px;
  padding: 0 12px !important;
  border-radius: var(--radius);
  border-bottom: none !important;
  background: var(--bg-secondary);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid var(--glass-border);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
/* поиск ленты — только на вкладке Посты */
body.flind-page-feed .flind-inbox-search {
  display: flex !important;
}
.flind-inbox-search:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(124,92,252,0.1);
  transform: none;
}
.flind-inbox-search .fl-icon {
  filter: brightness(0) invert(0.4);
  width: 1em; height: 1em;
  transition: filter 0.2s ease;
}
.flind-inbox-search:focus-within .fl-icon {
  filter: brightness(0) saturate(100%) invert(48%) sepia(80%) saturate(2000%) hue-rotate(230deg) brightness(105%) contrast(105%);
}
.flind-inbox-search input {
  flex: 1;
  border: none !important;
  background: transparent !important;
  color: var(--text-primary) !important;
  outline: none;
  box-shadow: none !important;
  padding: 0 !important;
  font-size: 14px;
  font-family: var(--font-family);
}
.flind-inbox-search input::placeholder { color: var(--text-tertiary); }

.page-content { padding: 8px 14px 16px !important; box-sizing: border-box; }

/* chat cards */
.chat-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 12px !important;
  margin: 2px 0 !important;
  border-radius: var(--radius) !important;
  border: none !important;
  border-left: 3px solid transparent !important;
  background: transparent !important;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.25s var(--ease-bounce);
  position: relative;
  overflow: visible;
  width: 100%;
  box-sizing: border-box;
}
.chat-item::before { display: none; }
.chat-item:hover {
  background: var(--bg-hover) !important;
  transform: translateX(4px);
}
.chat-item:hover::before { opacity: 0; }
.chat-item.active {
  background: var(--accent-dim) !important;
  border-left-color: var(--accent) !important;
  color: var(--text-primary) !important;
}
.chat-item.active .chat-name,
.chat-item.active .chat-last-message,
.chat-item.active .chat-time {
  color: var(--text-primary) !important;
  opacity: 1;
}
.chat-avatar {
  width: 40px !important;
  height: 40px !important;
  border-radius: var(--radius-full) !important;
  background: var(--bg-tertiary) !important;
  border: 1px solid var(--border);
  transition: transform 0.35s var(--ease-bounce), box-shadow 0.3s ease;
  flex-shrink: 0;
}
.chat-item:hover .chat-avatar {
  animation: flAvatarWiggle 0.55s var(--ease-bounce);
  box-shadow: 0 0 0 3px rgba(124,92,252,0.3), 0 0 16px rgba(124,92,252,0.25);
}
.chat-name {
  font-weight: 500;
  font-size: 14px;
  color: var(--text-primary);
}
.chat-last-message {
  font-size: 13px;
  color: var(--text-tertiary);
}
.chat-time {
  font-size: 11px;
  color: var(--text-muted);
}
.unread-badge {
  background: var(--accent) !important;
  color: #fff !important;
  font-size: 11px;
  font-weight: 600;
  min-width: 20px;
  height: 20px;
  border-radius: var(--radius-full);
  animation: flBadgeSoft 2.2s ease-in-out infinite;
  box-shadow: 0 0 10px rgba(124,92,252,0.35);
}

.create-post, .post-card, .friend-card, .group-card {
  background: var(--bg-secondary) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  color: var(--text-primary);
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.3s var(--ease-bounce);
  position: relative;
  overflow: visible;
  width: 100%;
  box-sizing: border-box;
}
.post-card::after, .create-post::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
  pointer-events: none;
}
.create-post {
  background: var(--bg-secondary) !important;
  border-color: var(--border) !important;
  margin-bottom: 12px !important;
  padding: 12px !important;
}
.create-post textarea,
body.flind-glass #postContent {
  width: 100% !important;
  min-height: 72px !important;
  box-sizing: border-box;
  background: var(--bg-tertiary) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  color: var(--text-primary) !important;
  padding: 10px 12px !important;
}
.create-post:hover, .post-card:hover, .friend-card:hover, .group-card:hover {
  border-color: rgba(124,92,252,0.35) !important;
  transform: translateY(-3px);
  box-shadow: var(--shadow-md), 0 0 24px rgba(124,92,252,0.12) !important;
}
.feed-sort {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
  margin: 0 0 12px;
  box-sizing: border-box;
}
.feed-sort .sort-btn {
  flex: 1 1 auto;
  justify-content: center;
}
#feedContainer,
.feed-container,
.chats-list {
  width: 100%;
  box-sizing: border-box;
}
.sort-btn.active {
  background: linear-gradient(135deg, var(--accent), var(--accent-dark)) !important;
  box-shadow: 0 4px 20px rgba(124,92,252,0.4) !important;
}
body.flind-glass.theme-violet .create-post-btn,
body.flind-glass.theme-violet #createPostBtn,
body.flind-glass.theme-violet .send-btn {
  background: var(--accent) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--radius) !important;
  box-shadow: 0 4px 16px rgba(124,92,252,0.25) !important;
  transition: all 0.3s var(--ease-bounce) !important;
}
body.flind-glass.theme-violet .create-post-btn:hover,
body.flind-glass.theme-violet #createPostBtn:hover,
body.flind-glass.theme-violet .send-btn:hover {
  background: var(--accent-hover) !important;
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 8px 32px rgba(124,92,252,0.35) !important;
}

.toggle-panel-btn, .logout-icon, .input-icon, .call-btn {
  width: 36px !important;
  height: 36px !important;
  border-radius: var(--radius-full) !important;
  background: transparent !important;
  border: none !important;
  color: var(--text-secondary) !important;
  transition: all 0.3s var(--ease-bounce) !important;
}
.toggle-panel-btn .fl-icon,
.logout-icon .fl-icon,
.input-icon .fl-icon,
.call-btn .fl-icon {
  filter: brightness(0) invert(0.5);
  transition: filter 0.2s ease, transform 0.2s ease;
}
body.flind-glass.flind-glass-light .toggle-panel-btn .fl-icon,
body.flind-glass.flind-glass-light .logout-icon .fl-icon,
body.flind-glass.flind-glass-light .input-icon .fl-icon,
body.flind-glass.flind-glass-light .call-btn .fl-icon {
  filter: brightness(0) invert(0.3);
}
.toggle-panel-btn:hover, .logout-icon:hover, .input-icon:hover, .call-btn:hover {
  background: var(--accent-dim) !important;
  transform: translateY(-2px) scale(1.05) !important;
}
.toggle-panel-btn:hover .fl-icon,
.logout-icon:hover .fl-icon,
.input-icon:hover .fl-icon,
.call-btn:hover .fl-icon {
  filter: brightness(0) saturate(100%) invert(48%) sepia(80%) saturate(2000%) hue-rotate(230deg) brightness(105%) contrast(105%) !important;
}

/* ===== MAIN CHAT ===== */
.chat-panel, #chatMainPanel {
  min-width: 0;
  height: 100% !important;
  background: transparent !important;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
}
.chat-header, #chatHeader {
  padding: 12px 20px !important;
  background: var(--bg-secondary) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  -webkit-backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-inset);
}
.contact-avatar {
  width: 40px !important;
  height: 40px !important;
  border-radius: var(--radius-full) !important;
  background: var(--accent-dim) !important;
  color: var(--accent);
  border: 1px solid rgba(124,92,252,0.2);
  transition: all 0.3s var(--ease-bounce);
}
.contact-avatar:hover {
  animation: flAvatarWiggle 0.55s var(--ease-bounce);
  box-shadow: 0 0 0 3px rgba(124,92,252,0.35), 0 0 18px rgba(124,92,252,0.3);
}
.contact-name {
  font-weight: 600 !important;
  font-size: 15px !important;
  color: var(--text-primary) !important;
}
.contact-status { color: var(--green) !important; font-size: 12px !important; }

.messages-area {
  flex: 1;
  overflow: auto;
  padding: 16px 20px !important;
  background: transparent !important;
}
.messages-container {
  max-width: none;
  width: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.message {
  animation: messageIn 0.4s var(--ease-bounce);
}
@keyframes messageIn {
  0% { transform: translateY(16px) scale(0.95); opacity: 0; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

.message-bubble {
  max-width: min(82%, 720px) !important;
  padding: 10px 14px !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
  border: 1px solid transparent !important;
  backdrop-filter: none !important;
  transition: all 0.3s ease;
}
.message.incoming .message-bubble {
  background: linear-gradient(160deg, rgba(255,255,255,0.08), rgba(26,26,26,0.92)) !important;
  border-color: rgba(255,255,255,0.1) !important;
  border-radius: 12px 12px 12px 4px !important;
  color: var(--text-secondary) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 4px 16px rgba(0,0,0,0.25) !important;
}
.message.incoming .message-bubble:hover {
  border-color: rgba(124,92,252,0.25) !important;
  box-shadow: var(--shadow-sm), 0 0 20px rgba(124,92,252,0.06) !important;
}
.message.outgoing .message-bubble {
  background: var(--accent) !important;
  border-color: rgba(124,92,252,0.3) !important;
  border-radius: 12px 12px 4px 12px !important;
  color: #fff !important;
  box-shadow: 0 4px 16px rgba(124,92,252,0.18) !important;
}
.message.outgoing .message-bubble:hover {
  box-shadow: 0 6px 20px rgba(124,92,252,0.25) !important;
  transform: translateY(-1px);
}
.message-sender { display: none !important; }
.message.outgoing .message-body,
.message.outgoing .message-time { color: #fff !important; }
.message.incoming .message-body { color: var(--text-secondary) !important; }
.message.incoming .message-time { color: var(--text-tertiary) !important; font-size: 11px; }
.msg-delete-btn {
  opacity: 0.72 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: inherit !important;
  pointer-events: auto !important;
}
.message-bubble:hover .msg-delete-btn,
.message:focus-within .msg-delete-btn {
  opacity: 1 !important;
}
html.flind-mobile-ui .msg-delete-btn,
html.flind-android-app .msg-delete-btn {
  opacity: 0.9 !important;
}
@media (hover: none) {
  body.flind-glass .msg-delete-btn {
    opacity: 0.9 !important;
  }
}
.message-time {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 2px !important;
  position: relative;
  z-index: 2;
}

.message-input-area, #messageInputArea {
  margin: 0 !important;
  padding: 12px 16px !important;
  border-radius: 0 !important;
  background: var(--bg-secondary) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-top: 1px solid var(--glass-border) !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom: none !important;
  gap: 8px;
}
#messageInput {
  background: var(--bg-tertiary) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  color: var(--text-primary) !important;
  padding: 10px 14px !important;
  font-family: var(--font-family) !important;
  transition: all 0.3s var(--ease-bounce) !important;
  box-shadow: none !important;
}
#messageInput:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(124,92,252,0.1) !important;
  transform: scale(1.01);
}
#messageInput::placeholder { color: var(--text-tertiary); }

.send-btn {
  width: 40px !important;
  height: 40px !important;
  border-radius: var(--radius) !important;
  background: var(--accent) !important;
  border: none !important;
  box-shadow: 0 4px 16px rgba(124,92,252,0.25) !important;
}
.send-btn .fl-icon { filter: brightness(0) invert(1) !important; }
.send-btn:hover {
  background: var(--accent-hover) !important;
  transform: translateY(-2px) scale(1.05) !important;
}

.no-chat-selected { background: transparent !important; color: var(--text-primary); }
.no-chat-selected h3 {
  font-size: 24px !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  background: linear-gradient(135deg, var(--text-primary), var(--text-secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.no-chat-selected p { color: var(--text-secondary) !important; }

/* ===== INFO / MINI PROFILE + COVER ===== */
.flind-info-panel {
  background: var(--bg-secondary);
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-left: 1px solid var(--glass-border);
  padding: 12px;
  overflow: auto;
  box-shadow: none;
  contain: layout style;
}

.flind-info-hero {
  position: relative;
  text-align: center;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--glass-border);
  background: var(--bg-secondary);
  margin-bottom: 12px;
  box-shadow: var(--shadow-glass);
}
.flind-info-cover {
  height: 110px;
  background-image: linear-gradient(135deg, #1a0533 0%, #7C5CFC 45%, #12081f 100%);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  transition: background-image 0.4s ease;
}
.flind-info-cover::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(10,10,10,0.75) 100%);
  pointer-events: none;
}
.flind-info-cover-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  border: 1px solid var(--glass-border);
  background: rgba(10,10,10,0.55);
  backdrop-filter: blur(12px);
  color: var(--text-primary);
  font-size: 11px;
  font-weight: 500;
  font-family: var(--font-family);
  padding: 6px 10px;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all 0.3s var(--ease-bounce);
}
.flind-info-cover-btn:hover {
  background: var(--accent-dim);
  border-color: rgba(124,92,252,0.4);
  color: var(--accent-hover);
  transform: translateY(-1px);
}
.flind-info-hero-body {
  position: relative;
  margin-top: -36px;
  padding: 0 12px 14px;
  z-index: 1;
}
.flind-info-avatar {
  width: 72px; height: 72px; margin: 0 auto 10px; border-radius: var(--radius-full);
  background: var(--bg-tertiary); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; font-weight: 600;
  border: 3px solid var(--bg-primary);
  box-shadow: 0 8px 24px rgba(0,0,0,0.45), 0 0 0 1px rgba(124,92,252,0.25);
  transition: all 0.3s var(--ease-bounce);
  overflow: hidden;
}
.flind-info-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
}
.flind-info-avatar:hover {
  animation: flAvatarWiggle 0.55s var(--ease-bounce);
  box-shadow: 0 8px 24px rgba(0,0,0,0.45), 0 0 0 3px rgba(124,92,252,0.4), 0 0 28px rgba(124,92,252,0.3);
}
.flind-info-name { font-weight: 600; font-size: 15px; color: var(--text-primary); }
.flind-info-status { color: var(--green); font-size: 12px; margin-top: 4px; }

.flind-cover-picker {
  margin-bottom: 12px;
  padding: 12px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--glass-border);
  background: var(--bg-secondary);
  animation: pageFlip 0.35s var(--ease-bounce);
}
.flind-cover-picker-head {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 10px;
  color: var(--text-primary);
}
.flind-cover-presets {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 10px;
}
.flind-cover-preset {
  aspect-ratio: 1.35;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background-size: cover;
  background-position: center;
  cursor: pointer;
  padding: 0;
  transition: all 0.25s var(--ease-bounce);
}
.flind-cover-preset:hover {
  transform: translateY(-2px) scale(1.04);
  border-color: rgba(124,92,252,0.45);
  box-shadow: 0 0 16px rgba(124,92,252,0.15);
}
.flind-cover-picker .flind-info-action {
  width: 100%;
  margin-top: 6px;
}
@keyframes pageFlip {
  0% { transform: translateY(8px) scale(0.96); opacity: 0; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
.flind-online-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--green); margin-right: 4px;
  box-shadow: 0 0 0 3px var(--green-dim);
}
.flind-info-section-head {
  display: flex; justify-content: space-between; align-items: center;
  font-weight: 600; font-size: 13px; margin: 0 0 8px; color: var(--text-primary);
  width: 100%;
  background: transparent;
  border: none;
  padding: 8px 0;
  font-family: var(--font-family);
  cursor: pointer;
  text-align: left;
}
button.flind-info-section-head:hover { color: var(--accent); }
.flind-attach-head-right { display: inline-flex; align-items: center; gap: 8px; }
.flind-attach-chevron {
  display: inline-block;
  color: var(--text-tertiary);
  transition: transform 0.25s var(--ease-bounce);
  font-size: 12px;
}
.flind-attach-toggle.is-open .flind-attach-chevron,
.flind-privacy-toggle.is-open .flind-attach-chevron {
  transform: rotate(90deg);
  color: var(--accent);
}
.flind-info-badge {
  background: var(--accent); color: #fff; border-radius: var(--radius-full);
  min-width: 18px; height: 18px; font-size: 10px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; padding: 0 6px;
}

.flind-attach-panel,
.flind-privacy-panel {
  margin-bottom: 8px;
  animation: pageFlip 0.3s var(--ease-bounce);
}
.flind-attach-panel[hidden],
.flind-privacy-panel[hidden],
.flind-cover-picker[hidden] {
  display: none !important;
}
.flind-attach-list { display: flex; flex-direction: column; gap: 6px; }
.flind-attach-empty {
  font-size: 12px; color: var(--text-tertiary); padding: 8px 0;
}
.flind-attach-row {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg-tertiary);
  transition: all 0.25s var(--ease-bounce);
}
.flind-attach-row:hover {
  border-color: rgba(124,92,252,0.3);
  transform: translateY(-1px);
}
.flind-attach-ico {
  width: 36px; height: 36px; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 600; flex-shrink: 0;
  background: var(--accent-dim); color: var(--accent);
  border: 1px solid rgba(124,92,252,0.2);
}
.flind-attach-ico--image { background: rgba(59,130,246,0.15); color: var(--blue); border-color: rgba(59,130,246,0.25); }
.flind-attach-ico--audio { background: rgba(52,211,153,0.15); color: var(--green); border-color: rgba(52,211,153,0.25); }
.flind-attach-meta { flex: 1; min-width: 0; }
.flind-attach-name {
  font-size: 12px; font-weight: 500; color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.flind-attach-size { font-size: 11px; color: var(--text-tertiary); margin-top: 2px; }
.flind-attach-actions { display: flex; gap: 4px; flex-shrink: 0; }
.flind-attach-btn {
  width: 28px; height: 28px; border-radius: var(--radius-full);
  border: 1px solid var(--border);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 13px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all 0.2s var(--ease-bounce);
}
.flind-attach-btn:hover {
  background: var(--accent-dim);
  color: var(--accent);
  border-color: rgba(124,92,252,0.35);
}

.flind-privacy-panel {
  padding: 10px 12px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--glass-border);
  background: var(--bg-secondary);
  display: flex; flex-direction: column; gap: 10px;
}
.flind-privacy-row {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 12px; color: var(--text-secondary);
}
.flind-privacy-select {
  width: 100%;
  padding: 8px 10px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg-tertiary);
  color: var(--text-primary);
  font-family: var(--font-family);
  font-size: 13px;
}
.flind-privacy-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(124,92,252,0.1);
}
.flind-privacy-check {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--text-secondary); cursor: pointer;
}
.flind-privacy-check input { accent-color: var(--accent); }
.flind-privacy-hint {
  font-size: 11px; color: var(--text-muted); margin: 0; line-height: 1.4;
}

.flind-msg-flash {
  outline: 2px solid var(--accent) !important;
  outline-offset: 2px;
  border-radius: 12px;
  animation: attachFlash 1.2s ease;
}
@keyframes attachFlash {
  0%, 100% { box-shadow: 0 0 0 0 rgba(124,92,252,0); }
  40% { box-shadow: 0 0 0 8px rgba(124,92,252,0.2); }
}

.flind-info-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.flind-info-action {
  border: none !important; border-radius: var(--radius) !important; padding: 10px 16px !important;
  background: var(--accent) !important; color: #fff !important; font-weight: 500 !important;
  box-shadow: 0 4px 16px rgba(124,92,252,0.25) !important;
  transition: all 0.3s var(--ease-bounce) !important;
}
.flind-info-action:hover {
  background: var(--accent-hover) !important;
  transform: translateY(-2px) !important;
}
.flind-info-action--muted {
  background: var(--bg-tertiary) !important; color: var(--text-secondary) !important;
  border: 1px solid var(--border) !important; box-shadow: none !important;
}

/* ===== DOCK (скрыт — тема в настройках) ===== */
#flindGlassDock {
  display: none !important;
}
#flindGlassDock button {
  display: none !important;
}

/* modals */
.modal-content {
  background: rgba(18,18,18,0.96) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-xl) !important;
  color: var(--text-primary) !important;
}
body.flind-glass.flind-glass-light .modal-content {
  background: rgba(255,255,255,0.92) !important;
}

/* ===== PROFILE WIDE (PC) ===== */
#profileModal.modal {
  align-items: center;
  justify-content: center;
  padding: 24px;
}
#profileModal.modal.flind-modal-open,
html.flind-mobile-ui #profileModal.modal,
html.flind-view-mobile #profileModal.modal {
  pointer-events: auto !important;
  z-index: 10050 !important;
}
#profileModal .flind-profile-wide.modal-content {
  width: min(70vw, 1180px) !important;
  max-width: min(70vw, 1180px) !important;
  max-height: min(88vh, 900px) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}
#profileModal .profile-modal-header {
  flex-shrink: 0;
  padding: 18px 24px;
  border-bottom: 1px solid var(--glass-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#profileModal .profile-modal-header h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
#profileModal .flind-profile-body {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding: 0 !important;
}
#profileModal .flind-profile-panel {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  height: 100%;
  min-height: 0;
}
#profileModal .flind-profile-aside {
  padding: 0 0 18px;
  border-right: 1px solid var(--glass-border);
  background: transparent;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow: auto;
}
#profileModal .flind-profile-my-cover {
  position: relative;
  height: 100px;
  margin: 0 0 8px;
  background-image: linear-gradient(135deg, #1a0533 0%, #7C5CFC 45%, #12081f 100%);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-bottom: 1px solid var(--glass-border);
  flex-shrink: 0;
}
#profileModal .flind-profile-my-cover .flind-info-cover-btn {
  top: 10px;
  right: 10px;
}
#profileModal .flind-profile-aside .profile-avatar-large {
  width: 96px !important;
  height: 96px !important;
  margin: -40px auto 12px !important;
  border: 3px solid var(--bg-primary);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4), 0 0 0 1px var(--border-light);
  position: relative;
  z-index: 2;
}
#profileModal .flind-profile-aside > .profile-field,
#profileModal .flind-profile-aside > .flind-profile-stats,
#profileModal .flind-profile-aside > .flind-profile-attach,
#profileModal .flind-profile-aside > #storageUpgradeSection,
#profileModal .flind-profile-aside > .flind-profile-aside-actions,
#profileModal .flind-profile-aside > .flind-cover-picker {
  padding-left: 18px;
  padding-right: 18px;
}
#profileModal .flind-cover-picker {
  margin: 0 12px 8px;
  max-height: 220px;
  overflow: auto;
}
#profileModal.flind-profile-other .flind-profile-my-cover .flind-info-cover-btn,
#profileModal.flind-profile-other .flind-cover-picker {
  display: none !important;
}
#profileModal .flind-profile-aside .profile-field {
  margin-bottom: 12px;
  text-align: center;
}
#profileModal .flind-profile-aside .profile-field label {
  color: var(--text-tertiary);
}
#profileModal .flind-profile-aside #profileUsername {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}
#profileModal .flind-profile-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 4px 0 8px;
}
#profileModal .flind-profile-stats .profile-field {
  margin: 0;
  padding: 10px 8px;
  border-radius: var(--radius);
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  text-align: center;
}
#profileModal .flind-profile-stats .profile-field span {
  padding: 4px 0 0;
  font-size: 13px;
  font-weight: 600;
}
#profileModal .storage-upgrade-buttons {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
#profileModal .storage-btn {
  width: 100%;
  font-size: 12px !important;
  padding: 8px 10px !important;
}
#profileModal .flind-profile-aside-actions {
  margin-top: auto;
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#profileModal .flind-profile-aside-actions .save-profile-btn {
  width: 100%;
  background: var(--accent) !important;
  border: none !important;
  border-radius: var(--radius) !important;
  padding: 12px 16px !important;
  font-weight: 500 !important;
  box-shadow: 0 4px 16px rgba(124,92,252,0.25) !important;
}
#profileModal .flind-profile-aside-actions .save-profile-btn:hover {
  background: var(--accent-hover) !important;
}
#profileModal .profile-privacy-link {
  text-align: center;
  font-size: 11px;
  margin: 4px 0 0;
}
#profileModal .profile-privacy-link a { color: var(--accent-secondary); }

#profileModal .flind-profile-settings {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}
#profileModal .flind-profile-col {
  padding: 18px 20px;
  border-right: 1px solid var(--glass-border);
  overflow: auto;
  min-height: 0;
}
#profileModal .flind-profile-col:last-child {
  border-right: none;
}
#profileModal .flind-profile-col-title {
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
}
#profileModal .flind-profile-col .profile-field {
  margin-bottom: 14px;
  text-align: left;
}
#profileModal .flind-profile-col .profile-field label {
  margin-bottom: 6px;
  color: var(--text-tertiary);
  font-size: 12px;
}
#profileModal .flind-profile-col input,
#profileModal .flind-profile-col textarea,
#profileModal .flind-profile-col select {
  width: 100%;
  background: var(--bg-tertiary) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  color: var(--text-primary) !important;
  padding: 10px 12px !important;
  font-family: var(--font-family) !important;
  font-size: 13px !important;
}
#profileModal .flind-profile-col input:focus,
#profileModal .flind-profile-col textarea:focus,
#profileModal .flind-profile-col select:focus {
  outline: none;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(124,92,252,0.12);
}
#profileModal .profile-hint-text {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 6px;
  line-height: 1.35;
}
#profileModal .post-visibility-row--profile {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
#profileModal .post-visibility-option {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: var(--radius);
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-secondary);
  cursor: pointer;
}
#profileModal #profileActionButtons {
  grid-column: 1 / -1;
  padding: 12px 20px 16px;
  border-top: 1px solid var(--glass-border);
}
body.flind-glass.flind-glass-light #profileModal .flind-profile-aside {
  background: transparent;
}

@media (max-width: 1100px) {
  .app-container.flind-inbox-layout {
    grid-template-columns: var(--rail-w) minmax(240px, 280px) minmax(0, 1fr);
  }
  .flind-info-panel { display: none; }
  #profileModal .flind-profile-wide.modal-content {
    width: min(92vw, 900px) !important;
    max-width: min(92vw, 900px) !important;
  }
  #profileModal .flind-profile-panel {
    grid-template-columns: 200px minmax(0, 1fr);
  }
  #profileModal .flind-profile-settings {
    grid-template-columns: 1fr 1fr;
  }
  #profileModal .flind-profile-col:nth-child(3) {
    grid-column: 1 / -1;
    border-right: none;
    border-top: 1px solid var(--glass-border);
  }
}
/* Mobile glass dock ? class from glass3d.js (auto / force) */
/* ?? ???????? ?????? ???????? ????? ??? ? ????? ????? ?????? */
html.flind-mobile-ui body.flind-glass .toggle-panel-btn,
html.flind-mobile-ui body.flind-glass .show-panel-btn {
  display: none !important;
}
html.flind-mobile-ui body.flind-glass .chats-panel.collapsed,
html.flind-mobile-ui body.flind-list-collapsed .chats-panel {
  width: 100% !important;
  min-width: 0 !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  padding: inherit;
  border-right: 1px solid var(--glass-border) !important;
}

html.flind-mobile-ui .app-container.flind-inbox-layout {
  grid-template-columns: 1fr !important;
  position: relative;
  height: 100vh !important;
  height: 100dvh !important;
  overflow: hidden !important;
}

/* list XOR chat ? never both */
html.flind-mobile-ui body.flind-glass:not(.flind-chat-open) #chatMainPanel,
html.flind-mobile-ui body.flind-glass:not(.flind-chat-open) .flind-info-panel,
html.flind-mobile-ui body.flind-glass:not(.flind-chat-open) .show-panel-btn {
  display: none !important;
}
html.flind-mobile-ui body.flind-glass.flind-chat-open .chats-panel {
  display: none !important;
}
html.flind-mobile-ui body.flind-glass.flind-chat-open #chatMainPanel {
  display: flex !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  visibility: visible !important;
  pointer-events: auto !important;
}
html.flind-mobile-ui body.flind-glass .flind-info-panel {
  display: none !important;
}
html.flind-mobile-ui body.flind-glass .chats-panel {
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  position: relative !important;
  left: auto !important;
  top: auto !important;
}

html.flind-mobile-ui body.flind-glass .flind-rail {
  display: flex !important;
  position: fixed !important;
  left: 10px;
  right: 10px;
  bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  top: auto !important;
  z-index: 220;
  width: auto !important;
  height: auto !important;
  flex-direction: row !important;
  align-items: stretch;
  justify-content: space-between;
  gap: 4px;
  padding: 8px 8px;
  border-radius: 22px !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  border-right: 1px solid rgba(255,255,255,0.14) !important;
  background: rgba(16,16,18,0.72) !important;
  backdrop-filter: blur(18px) saturate(1.5) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.5) !important;
  box-shadow:
    0 12px 40px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,255,255,0.18),
    inset 0 -1px 0 rgba(0,0,0,0.35) !important;
  contain: none;
}
html.flind-mobile-ui body.flind-glass.flind-glass-light .flind-rail {
  background: rgba(255,255,255,0.78) !important;
  border-color: rgba(0,0,0,0.08) !important;
  box-shadow:
    0 12px 36px rgba(0,0,0,0.12),
    inset 0 1px 0 rgba(255,255,255,0.95) !important;
}
html.flind-mobile-ui body.flind-glass .flind-rail-nav,
html.flind-mobile-ui body.flind-glass .flind-rail-bottom {
  display: contents;
}
html.flind-mobile-ui body.flind-glass .flind-rail-avatar,
html.flind-mobile-ui body.flind-glass .flind-rail-btn {
  flex: 1 1 0;
  min-width: 0;
  height: auto !important;
  width: auto !important;
  min-height: 56px;
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border-radius: 16px !important;
  padding: 7px 2px 6px !important;
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid transparent !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
  transform: none !important;
  color: var(--text-secondary) !important;
}
/* mobile rail uses display:!important — must beat it for non-admins */
html.flind-mobile-ui body.flind-glass .flind-rail-btn.flind-admin-hidden {
  display: none !important;
  flex: 0 0 0 !important;
  width: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}
html.flind-mobile-ui body.flind-glass .flind-rail-btn.flind-admin-visible {
  display: inline-flex !important;
}
/* на телефоне «Я» только через аву сверху, не в нижнем табе */
html.flind-mobile-ui body.flind-glass #flindRailProfile {
  display: none !important;
}
html.flind-mobile-ui body.flind-glass .flind-rail-avatar {
  font-size: 13px;
}
html.flind-mobile-ui body.flind-glass .flind-rail-label {
  display: block !important;
  font-size: 8.5px !important;
  font-weight: 650 !important;
  letter-spacing: 0.01em;
  color: var(--text-secondary) !important;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
html.flind-mobile-ui body.flind-glass .flind-rail-btn .fl-icon {
  width: 1.15em;
  height: 1.15em;
}
html.flind-mobile-ui body.flind-glass .flind-rail-btn:hover,
html.flind-mobile-ui body.flind-glass .flind-rail-avatar:hover {
  background: rgba(124,92,252,0.12) !important;
  transform: translateY(-2px) !important;
  animation: none !important;
}
html.flind-mobile-ui body.flind-glass .flind-rail-btn.active {
  background: rgba(124,92,252,0.22) !important;
  border-color: rgba(124,92,252,0.4) !important;
  box-shadow:
    0 4px 16px rgba(124,92,252,0.28),
    inset 0 1px 0 rgba(255,255,255,0.16) !important;
}
html.flind-mobile-ui body.flind-glass .flind-rail-btn.active .flind-rail-label {
  color: #A78BFA;
}
html.flind-mobile-ui body.flind-glass .flind-rail-avatar:hover .flind-rail-label,
html.flind-mobile-ui body.flind-glass .flind-rail-btn:hover .flind-rail-label {
  color: var(--accent);
}
html.flind-mobile-ui body.flind-glass .chats-panel,
html.flind-mobile-ui body.flind-glass #chatMainPanel {
  padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
}
html.flind-mobile-ui body.flind-glass .page-content {
  padding-bottom: 12px !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  flex: 1 1 auto;
}
html.flind-mobile-ui body.flind-glass .chats-panel {
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
}
html.flind-mobile-ui body.flind-glass.flind-chat-open .chats-panel {
  display: none !important;
}
html.flind-mobile-ui body.flind-glass .message-input-area {
  margin-bottom: 0 !important;
  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
}
/* ?????? ????????? ?????? ????? ?? ???????? */
html.flind-mobile-ui body.flind-glass.flind-chat-open .flind-rail {
  display: flex !important;
}
html.flind-mobile-ui body.flind-glass.flind-chat-open .mobile-menu-btn-inline {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}
html.flind-mobile-ui #flindGlassDock {
  left: 8px; right: 8px; transform: none;
  bottom: calc(92px + env(safe-area-inset-bottom, 0px));
  overflow-x: auto;
  max-width: calc(100vw - 16px);
}
html.flind-mobile-ui #profileModal.modal {
  padding: 0 !important;
  align-items: stretch !important;
  justify-content: stretch !important;
}
html.flind-mobile-ui #profileModal .flind-profile-wide.modal-content {
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  margin: 0 !important;
  border-radius: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}
html.flind-mobile-ui #profileModal .flind-profile-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
html.flind-mobile-ui #profileModal .flind-profile-panel {
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: none !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}
html.flind-mobile-ui #profileModal .flind-profile-aside {
  border-right: none !important;
  border-bottom: 1px solid var(--glass-border);
  overflow: visible !important;
  flex-shrink: 0;
}
html.flind-mobile-ui #profileModal .flind-profile-settings {
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: none !important;
  height: auto !important;
  overflow: visible !important;
}
html.flind-mobile-ui #profileModal .flind-profile-col {
  border-right: none !important;
  border-bottom: 1px solid var(--glass-border);
  overflow: visible !important;
  height: auto !important;
}
html.flind-mobile-ui #profileModal .flind-profile-col:last-child {
  border-bottom: none;
}

/* ?????? ?????????: ??????? ? ?????? ?????, ?? ?? ???? ??????? */
html.flind-view-mobile #profileModal.modal {
  padding: 64px 0 0 !important;
  background: rgba(0,0,0,0.72) !important;
}
html.flind-view-mobile #profileModal .flind-profile-wide.modal-content {
  width: min(430px, 100vw) !important;
  max-width: min(430px, 100vw) !important;
  height: calc(100vh - 64px) !important;
  height: calc(100dvh - 64px) !important;
  max-height: calc(100dvh - 64px) !important;
  margin: 0 auto !important;
  border-radius: 18px 18px 0 0 !important;
  border-left: 1px solid rgba(255,255,255,0.08) !important;
  border-right: 1px solid rgba(255,255,255,0.08) !important;
}

/* phone preview frame on wide desktop */
html.flind-view-mobile body.flind-glass {
  background: #050505 !important;
}
html.flind-view-mobile .app-container.flind-inbox-layout {
  max-width: 430px !important;
  width: 100% !important;
  margin: 64px auto 12px !important;
  height: calc(100vh - 76px) !important;
  height: calc(100dvh - 76px) !important;
  max-height: calc(100dvh - 76px) !important;
  border-left: 1px solid rgba(255,255,255,0.08);
  border-right: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 0 60px rgba(0,0,0,0.6);
  border-radius: 18px;
  overflow: hidden !important;
  box-sizing: border-box !important;
}
html.flind-view-mobile body.flind-glass .flind-rail {
  position: absolute !important;
  left: 8px !important;
  right: 8px !important;
  bottom: 10px !important;
  width: auto !important;
  z-index: 300 !important;
  max-height: 78px;
}
html.flind-view-mobile.flind-mobile-ui #flindGlassDock,
html.flind-view-mobile #flindGlassDock {
  left: 50% !important;
  right: auto !important;
  top: 10px !important;
  bottom: auto !important;
  height: auto !important;
  transform: translateX(-50%) !important;
  width: max-content !important;
  max-width: min(414px, calc(100vw - 16px)) !important;
  align-items: center;
  z-index: 100001;
}

#flindGlassDock .flind-dock-sep {
  width: 1px;
  align-self: stretch;
  background: var(--border);
  margin: 2px 4px;
  opacity: 0.7;
}


/* ????? ??????? ? ??? ???? ???????? ??????????? */
#profileModal.flind-profile-other .flind-profile-col[aria-label="??????????????????"],
#profileModal.flind-profile-other #profileE2eeSection,
#profileModal.flind-profile-other #profilePushSection,
#profileModal.flind-profile-other #profileNickColorSection,
#profileModal.flind-profile-other #profileGlassThemeSection,
#profileModal.flind-profile-other #storageUpgradeSection,
#profileModal.flind-profile-other #saveProfileChangesBtn,
#profileModal.flind-profile-other #changeAvatarBtn,
#profileModal.flind-profile-other #deleteAccountBtn,
#profileModal.flind-profile-other .profile-privacy-link {
  display: none !important;
}

/* обложка: ярче и выше — особенно на телефоне */
#profileModal .flind-profile-my-cover {
  height: 120px;
  transition: height 0.35s var(--ease), background-size 0.35s ease, filter 0.35s ease;
  background-size: cover;
  background-position: center 30%;
}
#profileModal .flind-profile-my-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.12) 0%, rgba(10,10,10,0.5) 100%);
  pointer-events: none;
}
html.flind-mobile-ui #profileModal .flind-profile-my-cover {
  height: 210px;
  min-height: 210px;
  background-size: cover !important;
  background-position: center 28% !important;
  filter: saturate(1.08) brightness(1.05);
}
html.flind-mobile-ui #profileModal .flind-profile-my-cover::after {
  background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(10,10,10,0.28) 55%, rgba(10,10,10,0.72) 100%);
}
html.flind-mobile-ui #profileModal .flind-profile-my-cover.is-stretch {
  height: 248px;
  min-height: 248px;
}
html.flind-mobile-ui #profileModal.flind-profile-other .flind-profile-aside .profile-avatar-large {
  margin-top: -52px !important;
  box-shadow: 0 10px 28px rgba(0,0,0,0.45), 0 0 0 3px rgba(255,255,255,0.08);
}

/* ??? ???? ?? ???????? ? ???? ??? ????? */
.flind-chat-cover {
  display: none;
}
html.flind-mobile-ui body.flind-glass .chat-header {
  position: relative;
  overflow: hidden;
}
html.flind-mobile-ui body.flind-glass .flind-chat-cover {
  display: block;
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 112px;
  z-index: 0;
  pointer-events: none;
  background-size: cover;
  background-position: center 28%;
  opacity: 0.38;
  filter: saturate(0.85) brightness(0.7);
}
html.flind-mobile-ui body.flind-glass .flind-chat-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,10,10,0.25) 0%, rgba(10,10,10,0.82) 72%, rgba(10,10,10,0.96) 100%);
}
html.flind-mobile-ui body.flind-glass .chat-header-row,
html.flind-mobile-ui body.flind-glass .e2ee-unlock-bar,
html.flind-mobile-ui body.flind-glass .chat-search-bar {
  position: relative;
  z-index: 1;
}
html.flind-mobile-ui body.flind-glass .mobile-menu-btn-inline {
  background: rgba(0,0,0,0.35) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 12px !important;
}

/* ===== SPOTLIGHT / GLASS BTNS / LETTERS ===== */
body.flind-glass .fl-post-spotlight {
  --fl-spot: #7C5CFC !important;
  position: relative !important;
  border: 1px solid rgba(124,92,252,0.35) !important;
  background: var(--bg-secondary) !important;
  box-shadow: 0 0 0 1px rgba(124,92,252,0.12), 0 8px 28px rgba(0,0,0,0.35) !important;
  animation: none !important;
}
body.flind-glass .fl-post-spotlight::before {
  content: "\041F\043E\043F\0443\043B\044F\0440\043D\043E\0435";
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 2;
  font-size: 10px;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-dim);
  border: 1px solid rgba(124,92,252,0.25);
  padding: 4px 10px;
  border-radius: 999px;
  box-shadow: none;
}
body.flind-glass .fl-spotlight-nick {
  color: var(--accent) !important;
  background: none !important;
  -webkit-text-fill-color: var(--accent) !important;
  animation: none !important;
  font-weight: 600 !important;
}

/* ??? ???? ? ????????? ?????? */
#chatMainPanel,
.chat-panel {
  position: relative;
  overflow: hidden;
  background: var(--bg-primary) !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
}
#chatMainPanel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 40% at 100% 0%, rgba(255,255,255,0.03), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,0.02), transparent 40%);
}
/* ?? ??????? position:relative ?? ???? ????? ? ?????? absolute-??????? ? flex */
#chatMainPanel > .chat-header,
#chatMainPanel > .no-chat-selected,
#chatMainPanel > .messages-area,
#chatMainPanel > .message-input-area,
#chatMainPanel > .message-reply-bar,
#chatMainPanel > .flind-bot-commands,
#chatMainPanel > .flind-pending-attach {
  position: relative;
  z-index: 1;
}
#chatMainPanel > .messages-area {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: auto !important;
}
#chatMainPanel > .message-input-area {
  flex: 0 0 auto !important;
  margin-top: auto !important;
}
#chatMainPanel > .fl-letter-overlay,
#chatMainPanel > .flind-drop-overlay {
  position: absolute !important;
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  flex: none !important;
}

/* 3D glass ?????? */
body.flind-glass .flind-glass-btn,
body.flind-glass .call-btn,
body.flind-glass .input-icon,
body.flind-glass .toggle-panel-btn,
body.flind-glass .logout-icon,
body.flind-glass .group-info-btn,
body.flind-glass .invite-btn {
  border-radius: 999px !important;
  background: var(--bg-tertiary) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08) !important;
  transform-style: flat !important;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease !important;
}
body.flind-glass .call-btn:hover,
body.flind-glass .input-icon:hover,
body.flind-glass .flind-glass-btn:hover {
  background: var(--bg-hover) !important;
  border-color: var(--border-light) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,0.12) !important;
}
body.flind-glass .call-btn:hover .fl-icon,
body.flind-glass .input-icon:hover .fl-icon,
body.flind-glass .flind-glass-btn:hover .fl-icon {
  filter: brightness(0) saturate(100%) invert(48%) sepia(80%) saturate(2000%) hue-rotate(230deg) brightness(105%) contrast(105%) !important;
}
body.flind-glass.theme-violet button:hover,
body.flind-glass.theme-violet button:active {
  transform: translateY(-2px) scale(1.03) !important;
}

body.flind-glass .flind-send-msg-btn,
body.flind-glass .create-post-btn,
body.flind-glass #createPostBtn,
body.flind-glass .send-btn,
body.flind-glass .save-profile-btn,
body.flind-glass .flind-info-action,
body.flind-glass .sort-btn,
body.flind-glass .auth-secondary-btn,
body.flind-glass .storage-btn,
body.flind-glass .change-avatar-btn {
  border-radius: 999px !important;
}
body.flind-glass .chat-item,
body.flind-glass .post-card,
body.flind-glass .create-post,
body.flind-glass .flind-inbox-search,
body.flind-glass #messageInput,
body.flind-glass .input,
body.flind-glass textarea,
body.flind-glass select {
  border-radius: 18px !important;
}
body.flind-glass .message-bubble {
  border-radius: 18px !important;
}
body.flind-glass .message.incoming .message-bubble { border-bottom-left-radius: 6px !important; }
body.flind-glass .message.outgoing .message-bubble { border-bottom-right-radius: 6px !important; }

/* chat tools: PC = right info panel, phone = next to nick */
.chat-header-tools-host {
  display: none;
  flex: 0 0 auto;
  min-width: 0;
}
html.flind-mobile-ui .chat-header-tools-host {
  display: flex;
  flex: 1 1 100%;
  max-width: 100%;
  min-width: 0;
}
.flind-info-tools-host {
  display: block;
  margin: 12px 0 4px;
}
html.flind-mobile-ui .flind-info-tools-host {
  display: none !important;
}

.flind-info-chat-tools,
#chatHeaderRight {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 0;
  margin: 0;
  border: none;
  position: relative;
  z-index: 2;
}
#chatHeaderRight .call-btn,
#chatHeaderRight .flind-glass-btn {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  padding: 0 !important;
  color: var(--text-secondary) !important;
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 12px !important;
}
#chatHeaderRight .group-info-btn,
#chatHeaderRight .invite-btn {
  width: auto !important;
  height: 40px !important;
  padding: 0 12px !important;
  gap: 6px;
  font-size: 12px !important;
}
#chatHeaderRight .group-info-btn .fl-icon,
#chatHeaderRight .invite-btn .fl-icon {
  width: 1em;
  height: 1em;
}

/* mobile: tools on full-width row under nick */
html.flind-mobile-ui #chatHeaderRight,
html.flind-mobile-ui .chat-header-right--mobile {
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 6px;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
html.flind-mobile-ui #chatHeaderRight::-webkit-scrollbar { display: none; }
html.flind-mobile-ui #chatHeaderRight .call-btn,
html.flind-mobile-ui #chatHeaderRight .flind-glass-btn {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px;
}
html.flind-mobile-ui #chatHeaderRight .group-info-btn,
html.flind-mobile-ui #chatHeaderRight .invite-btn {
  width: 36px !important;
  padding: 0 !important;
  font-size: 0 !important;
  gap: 0;
}
html.flind-mobile-ui #chatHeaderRight .group-info-btn .fl-icon,
html.flind-mobile-ui #chatHeaderRight .invite-btn .fl-icon {
  width: 1.1em;
  height: 1.1em;
}
html.flind-mobile-ui #chatHeaderRight #chatBlockBtn {
  font-size: 11px !important;
  letter-spacing: -0.02em;
  width: auto !important;
  min-width: 52px;
  padding: 0 8px !important;
}
html.flind-mobile-ui body.flind-glass .chat-header-left {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
}
html.flind-mobile-ui body.flind-glass .chat-header-row {
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
}
html.flind-mobile-ui body.flind-glass .chat-header {
  padding-top: max(10px, env(safe-area-inset-top, 0px)) !important;
}

/* ????? ?????? messagesArea, absolute, ??? ??????? ? layout */
body.flind-glass #messagesArea {
  position: relative !important;
  overflow: auto !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
}
body.flind-glass #messagesArea .fl-letter-pool,
body.flind-glass #messagesArea .fl-temp-letter-pool,
body.flind-glass #messagesArea .fl-letter-overlay {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  pointer-events: none !important;
  z-index: 0 !important;
  overflow: hidden !important;
}
body.flind-glass #messagesArea .fl-letter-overlay { z-index: 3 !important; overflow: visible !important; }
body.flind-glass #messagesArea .messages-container { position: relative; z-index: 1; }
/* ???????? ??????? ? ????? ???? ? ?? ????????? ? flex */
body.flind-glass #chatMainPanel > #fl-letter-overlay {
  position: absolute !important;
  inset: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  pointer-events: none !important;
  z-index: 0 !important;
}
body.flind-glass .pool-letter,
body.flind-glass .temp-letter,
body.flind-glass .fl-overlay-letter {
  font-family: var(--font-family) !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  color: rgba(180,180,190,0.45) !important;
  text-shadow: none;
}
body.flind-glass .fl-overlay-letter.in-flight {
  color: rgba(255,255,255,0.9) !important;
  text-shadow: 0 0 10px rgba(124,92,252,0.35);
  font-size: 1rem !important;
  z-index: 5;
  transition: left 0.55s cubic-bezier(0.34, 1.56, 0.64, 1), top 0.55s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.35s ease !important;
}

/* ===== GLOW BTN (?? ??????????? ???????) + ?????? spark ===== */
body.flind-glass .flind-glow-btn {
  --glow-line-color: #C4B5FD;
  --glow-line-thickness: 2px;
  --glow-line-length: 18;
  --glow-blur-color: #7C5CFC;
  --glow-blur-size: 8px;
  --glow-speed: 900ms;
  --glow-pad: 48px;
  position: relative !important;
  overflow: visible !important;
  isolation: isolate;
}
body.flind-glass .flind-glow-btn .flind-glow-svg {
  pointer-events: none;
  position: absolute;
  inset: calc(var(--glow-pad) / -2);
  width: calc(100% + var(--glow-pad));
  height: calc(100% + var(--glow-pad));
  opacity: 0;
  z-index: 2;
  overflow: visible;
}
body.flind-glass .flind-glow-btn .flind-glow-blur,
body.flind-glass .flind-glow-btn .flind-glow-line {
  fill: transparent;
  stroke-linecap: round;
  stroke-dasharray: var(--glow-line-length) calc(50 - var(--glow-line-length));
}
body.flind-glass .flind-glow-btn .flind-glow-line {
  stroke: var(--glow-line-color);
  stroke-width: var(--glow-line-thickness);
}
body.flind-glass .flind-glow-btn .flind-glow-blur {
  stroke: var(--glow-blur-color);
  stroke-width: var(--glow-blur-size);
  filter: blur(var(--glow-blur-size));
}
body.flind-glass .flind-glow-btn:is(:hover, :focus-visible) .flind-glow-blur,
body.flind-glass .flind-glow-btn:is(:hover, :focus-visible) .flind-glow-line {
  stroke-dashoffset: -75;
  transition: stroke-dashoffset var(--glow-speed) ease-in, stroke-dasharray var(--glow-speed) ease-in;
}
body.flind-glass .flind-glow-btn:is(:hover, :focus-visible) .flind-glow-svg {
  animation: flGlowVis var(--glow-speed) ease-in;
}
@keyframes flGlowVis {
  0%, 100% { opacity: 0; }
  20%, 80% { opacity: 1; }
}

/* spark-?????? ??? ? galaxy-??????, ?? ??? ????? */
body.flind-glass .flind-glow-btn.flind-glow-spark {
  --spark: 1.6s;
  --cut: 2px;
}
body.flind-glass .flind-glow-btn.flind-glow-spark::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from var(--spark-angle, 0deg), transparent 0 70%, #fff 88%, #A78BFA 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.35;
  pointer-events: none;
  z-index: 0;
  transition: opacity 0.25s ease;
  animation: flSparkSpin var(--spark) linear infinite;
}
body.flind-glass .flind-glow-btn.flind-glow-spark:is(:hover, :focus-visible)::before {
  opacity: 0.9;
}
@property --spark-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
@keyframes flSparkSpin {
  to { --spark-angle: 360deg; }
}
@media (prefers-reduced-motion: reduce) {
  body.flind-glass .flind-glow-btn.flind-glow-spark::before { animation: none; }
  body.flind-glass .flind-glow-btn:is(:hover, :focus-visible) .flind-glow-svg { animation: none; opacity: 0.7; }
}

/* ===== MORE MOTION (avatars + micro) ===== */
@keyframes flAvatarWiggle {
  0% { transform: rotate(0deg) scale(1); }
  30% { transform: rotate(-10deg) scale(1.1); }
  55% { transform: rotate(8deg) scale(1.08); }
  100% { transform: rotate(0deg) scale(1.06); }
}
@keyframes flBadgeSoft {
  0%, 100% { transform: scale(1); box-shadow: 0 0 8px rgba(124,92,252,0.25); }
  50% { transform: scale(1.08); box-shadow: 0 0 14px rgba(124,92,252,0.45); }
}
@keyframes flLikePop {
  0% { transform: scale(1); }
  40% { transform: scale(1.25); }
  100% { transform: scale(1); }
}
@keyframes flCardIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

body.flind-glass .post-avatar,
body.flind-glass .friend-avatar,
body.flind-glass .group-avatar,
body.flind-glass .profile-avatar-large {
  transition: transform 0.35s var(--ease-bounce), box-shadow 0.3s ease !important;
}
body.flind-glass .post-card:hover .post-avatar,
body.flind-glass .friend-card:hover .friend-avatar,
body.flind-glass .group-card:hover .group-avatar,
body.flind-glass .profile-avatar-large:hover {
  animation: flAvatarWiggle 0.55s var(--ease-bounce);
  box-shadow: 0 0 0 3px rgba(124,92,252,0.3), 0 0 18px rgba(124,92,252,0.25);
}
body.flind-glass .post-card,
body.flind-glass .chat-item {
  animation: flCardIn 0.35s var(--ease) both;
}
body.flind-glass .post-card:nth-child(1) { animation-delay: 0.02s; }
body.flind-glass .post-card:nth-child(2) { animation-delay: 0.06s; }
body.flind-glass .post-card:nth-child(3) { animation-delay: 0.1s; }
body.flind-glass .post-card:nth-child(4) { animation-delay: 0.14s; }

body.flind-glass .sort-btn {
  transition: transform 0.25s var(--ease-bounce), background 0.2s ease, box-shadow 0.25s ease !important;
}
body.flind-glass .sort-btn:hover {
  transform: translateY(-2px) scale(1.03) !important;
}
body.flind-glass .sort-btn.active {
  box-shadow: 0 4px 18px rgba(124,92,252,0.35) !important;
}

body.flind-glass .post-action-btn:active,
body.flind-glass [data-fl-action="react-post"]:active {
  animation: flLikePop 0.35s var(--ease-bounce);
}

body.flind-glass .message-bubble {
  transition: transform 0.25s var(--ease-bounce), box-shadow 0.25s ease !important;
}
body.flind-glass .message.incoming .message-bubble:hover {
  transform: translateY(-2px) scale(1.01);
}
body.flind-glass .message.outgoing .message-bubble:hover {
  transform: translateY(-2px) scale(1.01);
  box-shadow: 0 8px 24px rgba(124,92,252,0.3) !important;
}

body.flind-glass .flind-rail-btn:hover {
  transform: translateY(-2px) scale(1.06) !important;
}
body.flind-glass .flind-rail-btn.active {
  box-shadow: 0 0 0 2px rgba(124,92,252,0.25), 0 0 16px rgba(124,92,252,0.2) !important;
}

/* телефон: больше тактильных анимаций */
@keyframes flMobilePageIn {
  from { opacity: 0; transform: translateY(14px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes flMobileChatIn {
  from { opacity: 0; transform: translateX(18px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes flBrandHint {
  0%, 100% { box-shadow: 0 0 14px rgba(124,92,252,0.16); }
  50% { box-shadow: 0 0 0 2px rgba(124,92,252,0.28), 0 0 22px rgba(124,92,252,0.32); }
}
@keyframes flNickShimmer {
  0%, 100% { text-decoration-color: rgba(124, 92, 252, 0.4); }
  50% { text-decoration-color: rgba(167, 139, 250, 0.95); }
}
@keyframes flRailPop {
  0% { transform: scale(1); }
  40% { transform: scale(0.9); }
  100% { transform: scale(1); }
}
html.flind-mobile-ui body.flind-glass .page-content.active {
  animation: flMobilePageIn 0.42s var(--ease) both;
}
html.flind-mobile-ui body.flind-glass.flind-chat-open #chatMainPanel {
  animation: flMobileChatIn 0.36s var(--ease) both;
}
html.flind-mobile-ui body.flind-glass .flind-brand-avatar {
  animation: flBrandHint 2.6s ease-in-out infinite;
}
html.flind-mobile-ui body.flind-glass .flind-brand-nick {
  animation: flNickShimmer 2.6s ease-in-out infinite;
}
html.flind-mobile-ui body.flind-glass .chat-item {
  transition: transform 0.2s var(--ease), background 0.2s ease, opacity 0.2s ease !important;
}
html.flind-mobile-ui body.flind-glass .chat-item:active {
  transform: scale(0.985) !important;
  opacity: 0.92;
}
html.flind-mobile-ui body.flind-glass .flind-rail-btn:active {
  animation: flRailPop 0.28s var(--ease-bounce) !important;
}
html.flind-mobile-ui body.flind-glass .message.incoming .message-bubble,
html.flind-mobile-ui body.flind-glass .message.outgoing .message-bubble {
  animation: messageIn 0.38s var(--ease-bounce) both;
}
html.flind-mobile-ui #profileModal.flind-modal-open .flind-profile-my-cover {
  animation: flMobilePageIn 0.45s var(--ease) both;
}
html.flind-mobile-ui body.flind-glass .flind-me-card {
  animation: flMobilePageIn 0.4s var(--ease) both;
}

@media (prefers-reduced-motion: reduce) {
  body.flind-glass .flind-rail-avatar:hover,
  body.flind-glass .chat-item:hover .chat-avatar,
  body.flind-glass .contact-avatar:hover,
  body.flind-glass .flind-info-avatar:hover,
  body.flind-glass .post-card:hover .post-avatar,
  body.flind-glass .profile-avatar-large:hover {
    animation: none !important;
    transform: scale(1.05) !important;
  }
  body.flind-glass .unread-badge,
  body.flind-glass .post-card,
  body.flind-glass .chat-item {
    animation: none !important;
  }
  html.flind-mobile-ui body.flind-glass .page-content.active,
  html.flind-mobile-ui body.flind-glass.flind-chat-open #chatMainPanel,
  html.flind-mobile-ui body.flind-glass .flind-brand-avatar,
  html.flind-mobile-ui body.flind-glass .flind-brand-nick,
  html.flind-mobile-ui body.flind-glass .message.incoming .message-bubble,
  html.flind-mobile-ui body.flind-glass .message.outgoing .message-bubble,
  html.flind-mobile-ui #profileModal.flind-modal-open .flind-profile-my-cover,
  html.flind-mobile-ui body.flind-glass .flind-me-card {
    animation: none !important;
  }
}

/* ===== BRAND + ME SCREEN ===== */
.flind-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1 1 auto;
}
.flind-brand-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  background: var(--accent-dim);
  color: var(--accent);
  font-weight: 700;
  font-size: 16px;
  border: 1px solid var(--glass-border);
  overflow: hidden;
  box-shadow: 0 0 18px rgba(124,92,252,0.18);
  padding: 0;
  cursor: pointer;
  font-family: inherit;
}
.flind-brand-avatar:hover {
  box-shadow: 0 0 0 2px rgba(124,92,252,0.35), 0 0 18px rgba(124,92,252,0.25);
}
.flind-brand-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.flind-brand-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.flind-top-weather {
  margin-left: auto;
  flex: 0 1 auto;
  max-width: 46%;
  text-align: right;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 4px 2px 4px 8px;
}
html.flind-mobile-ui .flind-top-weather {
  font-size: 11px;
  max-width: 42%;
  color: #c4b5fd;
}
.flind-theme-toggle {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.flind-theme-toggle-btn {
  flex: 1 1 120px;
  min-height: 40px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  font: 600 13px/1 var(--font-family, inherit);
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.flind-theme-toggle-btn:hover {
  color: var(--accent);
  border-color: rgba(124,92,252,0.35);
}
.flind-theme-toggle-btn.active {
  background: var(--accent);
  color: #fff;
  border-color: transparent;
}
.flind-brand-nick {
  display: none;
  align-self: flex-start;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 14px;
  font-weight: 650;
  color: var(--text-primary);
  text-decoration: underline;
  text-decoration-color: rgba(124, 92, 252, 0.55);
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
  cursor: pointer;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.25;
}
.flind-brand-nick:active {
  color: var(--accent);
}
.flind-brand-text {
  font-family: var(--font-display, var(--font-pixel), "Press Start 2P", monospace);
  font-size: 11px;
  letter-spacing: 0.03em;
  color: var(--text-primary);
  line-height: 1.2;
}
html.flind-mobile-ui .flind-brand-text {
  display: none;
}
html.flind-mobile-ui .flind-brand-nick {
  display: block;
}
/* ПК: аватар только в рельсе слева — в шапке вкладок не дублируем */
html:not(.flind-mobile-ui) .flind-brand-avatar {
  display: none !important;
}
html:not(.flind-mobile-ui) .flind-brand-nick {
  display: block !important;
}
.flind-rail-avatar {
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: 0;
}
.flind-rail-avatar img#flindRailAvatarImg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
.flind-rail-btn.flind-admin-hidden,
html body.flind-glass .flind-rail-btn.flind-admin-hidden {
  display: none !important;
}
.flind-rail-btn.flind-admin-visible,
html body.flind-glass .flind-rail-btn.flind-admin-visible {
  display: flex !important;
}
html.flind-mobile-ui body.flind-glass .flind-rail-btn.flind-admin-visible {
  display: inline-flex !important;
}
.flind-brand-copy .flind-inbox-title {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-secondary);
  margin: 0;
}
html.flind-mobile-ui .flind-brand-copy .flind-inbox-title {
  font-size: 10px;
}
.flind-profile-attach {
  margin-top: 12px;
  width: 100%;
  text-align: left;
}
#profileModal .flind-profile-attach .flind-attach-list {
  max-height: 180px;
  overflow: auto;
}

body.flind-page-me .flind-send-msg-btn,
body.flind-page-me .flind-inbox-search {
  display: none !important;
}
body.flind-page-me .flind-info-panel {
  display: none !important;
}
body.flind-page-me #chatHeader,
body.flind-page-me #messagesArea,
body.flind-page-me #messageInputArea,
body.flind-page-me #messageReplyBar,
body.flind-page-me #flindBotCommands,
body.flind-page-me #flindPendingAttach {
  display: none !important;
}
body.flind-page-me #noChatSelected {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
}
body.flind-page-me .app-container.flind-inbox-layout {
  grid-template-columns: var(--rail-w) minmax(320px, 420px) minmax(0, 1fr) !important;
}
/* на телефоне me/feed не должны ломать single-column layout */
html.flind-mobile-ui body.flind-page-me .app-container.flind-inbox-layout,
html.flind-mobile-ui body.flind-page-feed .app-container.flind-inbox-layout {
  grid-template-columns: 1fr !important;
}
html.flind-mobile-ui body.flind-page-me .chats-panel,
html.flind-mobile-ui body.flind-page-feed .chats-panel {
  width: 100% !important;
  max-width: none !important;
}
html.flind-mobile-ui body.flind-page-me #mePage.page-content.active {
  display: block !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  padding: 12px 12px 24px !important;
}
html.flind-mobile-ui body.flind-page-me .flind-me-card {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

#mePage.page-content {
  padding: 8px 4px 24px;
}
.flind-me-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 28px 18px 22px;
  border-radius: var(--radius-xl, 18px);
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-inset);
}
.flind-me-avatar {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 32px;
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-dim);
  border: 1px solid rgba(124,92,252,0.35);
  overflow: hidden;
  box-shadow: 0 0 28px rgba(124,92,252,0.25);
}
.flind-me-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.flind-me-name {
  font-family: var(--font-display, var(--font-pixel), "Press Start 2P", monospace);
  font-size: 13px;
  color: var(--text-primary);
  margin-top: 6px;
}
.flind-me-fullname {
  font-size: 13px;
  color: var(--text-secondary);
  min-height: 1em;
}
.flind-me-balance {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(124,92,252,0.12);
  border: 1px solid rgba(124,92,252,0.28);
  color: var(--text-primary);
  font-weight: 600;
  font-size: 15px;
}
.flind-me-balance-label {
  font-weight: 500;
  font-size: 12px;
  color: var(--text-secondary);
}
.flind-me-actions {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 14px;
}
.flind-me-actions .flind-info-action {
  width: 100%;
}
#flindRailProfile.active {
  box-shadow: 0 0 0 3px rgba(124,92,252,0.4), 0 0 22px rgba(124,92,252,0.35) !important;
}
.flind-profile-aside-actions #profileModalLogoutBtn {
  width: 100%;
  margin-top: 4px;
}