:root {

  --bg: #0C0A09;

  --accent: #a85cff;

  --accent-rgb: 168, 92, 255;

  --accent-light: #c794ff;

  --muted: #777;

  --btn: #1c1c1c;

  --glass: rgba(255, 255, 255, 0.03);

  /* [NEW] Переменные для динамического фона */

  --panel-bg-dynamic: #0C0A09;

  --text-primary: #fff;

  /* [FIX] Основной цвет текста для темной темы */

  --panel-blur-dynamic: 0px;

}



/* === 1. ГЛОБАЛЬНЫЙ СБРОС "САЙТОВОГО" ВИДА === */



/* Убираем белую/синюю обводку при нажатии на ЛЮБОЙ элемент */

*:focus {

  outline: none !important;

  -webkit-tap-highlight-color: transparent;

}



.tg-voice-split-handle {

  display: none;

}



html.kzn-voice-layout-compact .tg-voice-split-handle {

  display: block;

  height: 10px;

  cursor: row-resize;

  touch-action: none;

  position: relative;

}



html.kzn-voice-layout-compact .tg-voice-split-handle::before {

  content: '';

  position: absolute;

  left: 50%;

  top: 50%;

  transform: translate(-50%, -50%);

  width: 52px;

  height: 4px;

  border-radius: 999px;

  background: rgba(255, 255, 255, 0.18);

  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);

}



html.kzn-voice-layout-compact .tg-voice-split-handle.dragging::before,

html.kzn-voice-layout-compact .tg-voice-split-handle:hover::before {

  background: rgba(var(--accent-rgb), 0.55);

}



.tg-voice-callbar {

  flex-wrap: wrap;

  max-width: 100%;

}



html.kzn-voice-layout-compact #voiceOverlay .tg-voice-callbar {

  gap: 8px !important;

  padding: 12px 12px !important;

}



html.kzn-voice-layout-compact #voiceOverlay button[data-voice-audio-settings],

html.kzn-voice-layout-compact #voiceOverlay button[data-voice-mic],

html.kzn-voice-layout-compact #voiceOverlay button[data-voice-cam],

html.kzn-voice-layout-compact #voiceOverlay button[data-voice-screen] {

  width: 48px !important;

  height: 40px !important;

  border-radius: 12px !important;

}



html.kzn-voice-layout-compact #voiceOverlay button[data-voice-hangup] {

  width: 58px !important;

  height: 40px !important;

  border-radius: 14px !important;

}



/* DS Voice: iOS-like stage volume slider (screen viewer) */

#voiceOverlay input[type="range"][data-stage-vol],

#voiceOverlay input[type="range"].tg-voice-stage-vol {

  flex: 1;

  min-width: 120px;

  max-width: 260px;

  height: 12px;

  border-radius: 999px;

  --kzn-range-pct: 100%;

  -webkit-appearance: none;

  appearance: none;

  background: linear-gradient(90deg,

      rgba(var(--accent-rgb), 0.95) 0%,

      rgba(var(--accent-rgb), 0.95) var(--kzn-range-pct),

      rgba(255, 255, 255, 0.18) var(--kzn-range-pct),

      rgba(255, 255, 255, 0.18) 100%);

  border: 1px solid rgba(255, 255, 255, 0.12);

  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25), 0 10px 28px rgba(0, 0, 0, 0.35);

  outline: none;

}



#voiceOverlay input[type="range"][data-stage-vol]::-webkit-slider-runnable-track,

#voiceOverlay input[type="range"].tg-voice-stage-vol::-webkit-slider-runnable-track {

  height: 12px;

  border-radius: 999px;

  background: transparent;

}



#voiceOverlay input[type="range"][data-stage-vol]::-webkit-slider-thumb,

#voiceOverlay input[type="range"].tg-voice-stage-vol::-webkit-slider-thumb {

  -webkit-appearance: none;

  width: 22px;

  height: 22px;

  border-radius: 999px;

  background: linear-gradient(180deg, #fff, #f0f0f0);

  border: 2px solid rgba(var(--accent-rgb), 0.85);

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.50), 0 0 0 4px rgba(var(--accent-rgb), 0.15);

  margin-top: -6px;

}



html.kzn-voice-layout-compact #voiceOverlay input[type="range"][data-stage-vol],

html.kzn-voice-layout-compact #voiceOverlay input[type="range"].tg-voice-stage-vol {

  max-width: 200px;

  height: 10px;

}



html.kzn-voice-layout-compact #voiceOverlay input[type="range"][data-stage-vol]::-webkit-slider-runnable-track,

html.kzn-voice-layout-compact #voiceOverlay input[type="range"].tg-voice-stage-vol::-webkit-slider-runnable-track {

  height: 10px;

}



html.kzn-voice-layout-compact #voiceOverlay input[type="range"][data-stage-vol]::-webkit-slider-thumb,

html.kzn-voice-layout-compact #voiceOverlay input[type="range"].tg-voice-stage-vol::-webkit-slider-thumb {

  width: 20px;

  height: 20px;

  margin-top: -5px;

}



/* CEP/After Effects panel parity: CEF runtime differs from browser */

/* We mark CEP with html.is-cep/body.is-cep in main.js */



html.is-cep,

body.is-cep {

  background: #0C0A09 !important;

  color: #fff;

}



/* ===================================================================== */

/* CEP Modeless Screen window (com.kuzuno.tools.screen): show ONLY screen */

/* We add html/body class 'kzn-screen-window' from main.js when extId matches */

/* ===================================================================== */

html.kzn-screen-window,

body.kzn-screen-window {

  background: #000 !important;

}



/* Hide the main panel UI (Tools/Profile/Settings/etc). Screen share overlay is injected in JS and stays visible. */

body.kzn-screen-window #wallpaper-container,

body.kzn-screen-window .top-right-icons,

body.kzn-screen-window .avatar-wrap,

body.kzn-screen-window .tabs,

body.kzn-screen-window .content,

body.kzn-screen-window .bottom-left-controls,

body.kzn-screen-window .bottom-right-controls,

body.kzn-screen-window #settingsPanel,

body.kzn-screen-window #aiPanel,

body.kzn-screen-window .admin-panel,

body.kzn-screen-window .profile-name-wrapper,

body.kzn-screen-window .profile-bio-wrapper,

body.kzn-screen-window .profile-link-wrapper {

  display: none !important;

}



/* Make the host panel itself full-bleed so the injected fullscreen overlay matches the window size. */

body.kzn-screen-window #ui-content {

  padding: 0 !important;

  align-items: stretch !important;

  justify-content: stretch !important;

}



body.kzn-screen-window .panel {

  width: 100% !important;

  height: 100% !important;

  max-width: none !important;

  max-height: none !important;

  padding: 0 !important;

  border-radius: 0 !important;

  box-shadow: none !important;

  background: #000 !important;

  border: none !important;

}



/* In the Screen window we don't want to see DS UI at all; it should be screen share only. */

body.kzn-screen-window #voiceOverlay {

  opacity: 0 !important;

  pointer-events: none !important;

}



body.kzn-screen-window #messengerOverlay {

  opacity: 0 !important;

  pointer-events: none !important;

}



/* Force form controls to not use native (white) appearance inside CEP */

html.is-cep #voiceOverlay input,

html.is-cep #voiceOverlay button {

  -webkit-appearance: none;

  appearance: none;

}



/* Replace unsupported blur with solid glass-like backgrounds in Voice Mode */

html.is-cep .tg-voice-create-type-menu,

html.is-cep .tg-voice-server-search-popover,

html.is-cep .kzn-mini-toast,

html.is-cep .tg-voice-channel-panel,

html.is-cep .tg-voice-stage-card,

html.is-cep .tg-voice-left,

html.is-cep .tg-voice-create-backdrop,

html.is-cep .tg-voice-channel-header {

  backdrop-filter: none !important;

  -webkit-backdrop-filter: none !important;

  background: rgba(18, 18, 20, 0.92) !important;

}



html.is-cep .tg-voice-server-search-popover>div {

  backdrop-filter: none !important;

  -webkit-backdrop-filter: none !important;

  background: rgba(18, 18, 20, 0.92) !important;

}



/* Ensure DS text chat input row matches browser styling inside CEP */

html.is-cep #voiceOverlay .tg-voice-text-input input {

  background: rgba(255, 255, 255, 0.06) !important;

  border: 1px solid rgba(255, 255, 255, 0.12) !important;

  color: #fff !important;

}



html.is-cep #voiceOverlay .tg-voice-text-input button {

  background: linear-gradient(135deg, var(--accent), var(--accent-light)) !important;

  border: none !important;

  color: #fff !important;

}



html.is-cep #voiceOverlay #tgVoiceTextAttach {

  background: rgba(255, 255, 255, 0.07) !important;

  border: 1px solid rgba(255, 255, 255, 0.12) !important;

  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28) !important;

}



#voiceOverlay .tg-voice-left-actions {

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 10px;

  padding: 10px 0 2px 0;

  overflow: hidden;

}



#voiceOverlay .tg-voice-left-search {

  width: 44px;

  height: 44px;

  border-radius: 16px;

  border: 1px solid rgba(255, 255, 255, 0.14);

  background: rgba(255, 255, 255, 0.06);

  color: #fff;

  font-weight: 900;

  cursor: pointer;

  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.28);

  transition: transform 0.16s ease, background 0.16s ease;

}



#voiceOverlay .tg-voice-left-search:hover {

  transform: translateY(-2px) scale(1.03);

  background: rgba(255, 255, 255, 0.10);

}



#voiceOverlay .tg-voice-left-search:active {

  transform: translateY(0) scale(0.98);

}



/* iOS-like micro animations across DS Voice UI */

#voiceOverlay button {

  transition: transform 0.14s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease, filter 0.18s ease, opacity 0.18s ease;

  will-change: transform;

}



#voiceOverlay button:hover {

  transform: translateY(-1px) scale(1.01);

}



#voiceOverlay button:active {

  transform: translateY(0) scale(0.97);

}



#voiceOverlay button:focus {

  outline: none;

}



/* One plus -> Text/Voice type menu */

.tg-voice-create-type-menu {

  position: fixed;

  width: 180px;

  display: none;

  flex-direction: column;

  gap: 8px;

  padding: 10px;

  border-radius: 16px;

  background: rgba(18, 18, 20, 0.92);

  border: 1px solid rgba(255, 255, 255, 0.10);

  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.55);

  backdrop-filter: blur(10px);

  -webkit-backdrop-filter: blur(10px);

  z-index: 99999;

}



.tg-voice-create-type-menu button {

  height: 40px;

  padding: 0 12px;

  border-radius: 12px;

  border: 1px solid rgba(255,255,255,.14);

  background: rgba(var(--accent-rgb), 0.18);

  color: rgba(255,255,255,.92);

  cursor: pointer;

  transition: transform .12s ease, background .12s ease, border-color .12s ease;

}



.tg-voice-create-type-menu button:hover {

  transform: translateY(-1px);

  background: rgba(255, 255, 255, 0.10);

  border-color: rgba(255, 255, 255, 0.18);

}



.tg-voice-create-type-menu button:active {

  transform: scale(0.98);

}



/* Voice Mode: animated show/hide for popovers & sheets (iOS-like) */

@keyframes tgVoicePopIn {

  from {

    opacity: 0;

    transform: translateY(-8px) scale(0.98);

  }



  to {

    opacity: 1;

    transform: translateY(0px) scale(1);

  }

}



@keyframes tgVoicePopOut {

  from {

    opacity: 1;

    transform: translateY(0px) scale(1);

  }



  to {

    opacity: 0;

    transform: translateY(-8px) scale(0.98);

  }

}



@keyframes tgVoiceFadeIn {

  from {

    opacity: 0;

  }



  to {

    opacity: 1;

  }

}



@keyframes tgVoiceFadeOut {

  from {

    opacity: 1;

  }



  to {

    opacity: 0;

  }

}



@keyframes tgVoiceSheetIn {

  from {

    opacity: 0;

    transform: translateY(18px) scale(0.98);

  }



  to {

    opacity: 1;

    transform: translateY(0px) scale(1);

  }

}



@keyframes tgVoiceSheetOut {

  from {

    opacity: 1;

    transform: translateY(0px) scale(1);

  }



  to {

    opacity: 0;

    transform: translateY(18px) scale(0.98);

  }

}



.tg-voice-create-type-menu,

.tg-voice-server-search-popover {

  will-change: transform, opacity;

}



.tg-voice-create-type-menu {

  transform-origin: 100% 0;

}



.tg-voice-server-search-popover {

  transform-origin: 50% 0;

}



.tg-voice-create-type-menu.tg-voice-anim-in,

.tg-voice-server-search-popover.tg-voice-anim-in {

  animation: tgVoicePopIn 0.18s cubic-bezier(0.2, 0.9, 0.2, 1) both;

}



.tg-voice-create-type-menu.tg-voice-anim-out,

.tg-voice-server-search-popover.tg-voice-anim-out {

  animation: tgVoicePopOut 0.18s cubic-bezier(0.4, 0.0, 0.2, 1) both;

  pointer-events: none;

}



/* Mini toast (non-blocking UX hint) */

.kzn-mini-toast {

  position: fixed;

  z-index: 1000002;

  max-width: 280px;

  padding: 10px 12px;

  border-radius: 16px;

  background: rgba(18, 18, 20, 0.92);

  border: 1px solid rgba(255, 255, 255, 0.12);

  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.55);

  backdrop-filter: blur(10px);

  -webkit-backdrop-filter: blur(10px);

  color: #fff;

  font-weight: 900;

  font-size: 13px;

  letter-spacing: 0.2px;

  text-align: center;

  pointer-events: none;

  will-change: transform, opacity;

}



.kzn-mini-toast.kzn-show {

  animation: tgVoicePopIn 0.18s cubic-bezier(0.2, 0.9, 0.2, 1) both;

}



.kzn-mini-toast.kzn-hide {

  animation: tgVoicePopOut 0.18s cubic-bezier(0.4, 0.0, 0.2, 1) both;

}



.kzn-mini-toast.kzn-mini-toast--error {

  border-color: rgba(255, 77, 77, 0.35);

}



.kzn-mini-toast.kzn-mini-toast--ok {

  border-color: rgba(92, 255, 168, 0.25);

}



/* Stories upload progress (Telegram-like circle) */

.kzn-story-upload-backdrop {

  position: fixed;

  left: 0;

  top: 0;

  right: 0;

  bottom: 0;

  z-index: 1000003;

  display: flex;

  align-items: center;

  justify-content: center;

  background: rgba(0, 0, 0, 0.35);

}



.kzn-story-upload-card {

  width: 240px;

  padding: 16px 16px 14px 16px;

  border-radius: 22px;

  border: 1px solid rgba(255, 255, 255, 0.12);

  background: rgba(18, 18, 20, 0.78);

  backdrop-filter: blur(16px);

  -webkit-backdrop-filter: blur(16px);

  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);

  text-align: center;

  color: #fff;

}



html.is-cep .kzn-story-upload-card {

  backdrop-filter: none !important;

  -webkit-backdrop-filter: none !important;

  background: rgba(18, 18, 20, 0.92) !important;

}



.kzn-story-upload-ring {

  width: 74px;

  height: 74px;

  margin: 0 auto 10px auto;

  position: relative;

  --pct: 0;

}



.kzn-story-upload-ring svg {

  width: 74px;

  height: 74px;

  transform: rotate(-90deg);

}



.kzn-story-upload-track {

  fill: none;

  stroke: rgba(255, 255, 255, 0.14);

  stroke-width: 4.6;

}



.kzn-story-upload-bar {

  fill: none;

  stroke: rgba(var(--accent-rgb), 0.95);

  stroke-width: 4.6;

  stroke-linecap: round;

  stroke-dasharray: 113.097;

  /* 2*pi*18 */

  stroke-dashoffset: calc(113.097 - (113.097 * var(--pct) / 100));

  transition: stroke-dashoffset 0.18s ease;

  filter: drop-shadow(0 8px 18px rgba(var(--accent-rgb), 0.28));

}



.kzn-story-upload-pct {

  position: absolute;

  inset: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  font-weight: 900;

  font-size: 15px;

  letter-spacing: 0.2px;

}



.kzn-story-upload-title {

  font-weight: 900;

  font-size: 15px;

  letter-spacing: 0.2px;

  margin-bottom: 4px;

}



.kzn-story-upload-sub {

  font-size: 12px;

  color: rgba(255, 255, 255, 0.72);

}



.tg-voice-create-backdrop.tg-voice-anim-in,

.tg-voice-audio-sheet-backdrop.tg-voice-anim-in {

  animation: tgVoiceFadeIn 0.18s ease-out both;

}



.tg-voice-create-backdrop.tg-voice-anim-out,

.tg-voice-audio-sheet-backdrop.tg-voice-anim-out {

  animation: tgVoiceFadeOut 0.18s ease-in both;

  pointer-events: none;

}



.tg-voice-create-backdrop.tg-voice-anim-in .tg-voice-settings-shell,

.tg-voice-create-backdrop.tg-voice-anim-in .tg-voice-create-card,

.tg-voice-audio-sheet-backdrop.tg-voice-anim-in .tg-voice-audio-sheet-card {

  animation: tgVoiceSheetIn 0.18s cubic-bezier(0.2, 0.9, 0.2, 1) both;

}



.tg-voice-create-backdrop.tg-voice-anim-out .tg-voice-settings-shell,

.tg-voice-create-backdrop.tg-voice-anim-out .tg-voice-create-card,

.tg-voice-audio-sheet-backdrop.tg-voice-anim-out .tg-voice-audio-sheet-card {

  animation: tgVoiceSheetOut 0.18s cubic-bezier(0.4, 0.0, 0.2, 1) both;

}



.tg-voice-channel-row {

  display: flex;

  align-items: center;

  gap: 6px;

}



.tg-voice-channel-wrap {

  display: block;

}



/* Discord-like members shown under voice channels */

.tg-voice-chan-members {

  margin-left: 18px;

  margin-top: 6px;

  display: flex;

  flex-direction: column;

  gap: 6px;

}



.tg-voice-chan-member {

  display: flex;

  align-items: center;

  gap: 8px;

  padding: 6px 8px;

  border-radius: 14px;

  color: rgba(255, 255, 255, 0.82);

  font-weight: 900;

  font-size: 13px;

  background: rgba(255, 255, 255, 0.03);

  border: 1px solid rgba(255, 255, 255, 0.06);

  transition: transform 0.12s ease, background 0.12s ease, border-color 0.12s ease;

}



.tg-voice-chan-member:hover {

  transform: translateY(-1px);

  background: rgba(255, 255, 255, 0.05);

  border-color: rgba(255, 255, 255, 0.10);

}



.tg-voice-chan-ava {

  width: 22px;

  height: 22px;

  border-radius: 10px;

  object-fit: cover;

  display: block;

  border: 1px solid rgba(255, 255, 255, 0.10);

  background: rgba(255, 255, 255, 0.06);

  flex: 0 0 22px;

}



.tg-voice-chan-ava--ph {

  background: rgba(255, 255, 255, 0.08);

}



.tg-voice-chan-name {

  min-width: 0;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

}



.tg-voice-channel-row .tg-voice-channel {

  flex: 1;

}



.tg-voice-channel-gear {

  width: 34px;

  height: 34px;

  border-radius: 12px;

  border: 1px solid rgba(255, 255, 255, 0.10);

  background: rgba(255, 255, 255, 0.05);

  color: rgba(255, 255, 255, 0.85);

  cursor: pointer;

  opacity: 0;

  transform: translateX(-4px);

  transition: opacity 0.16s ease, transform 0.16s ease, background 0.16s ease;

}



.tg-voice-channel-row:hover .tg-voice-channel-gear {

  opacity: 1;

  transform: translateX(0);

}



.tg-voice-channel-gear:hover {

  background: rgba(255, 255, 255, 0.10);

}



.tg-voice-mini-gear {

  width: 34px;

  height: 34px;

  border-radius: 12px;

  border: 1px solid rgba(255, 255, 255, 0.10);

  background: rgba(255, 255, 255, 0.05);

  color: rgba(255, 255, 255, 0.85);

  cursor: pointer;

  transition: transform 0.16s ease, background 0.16s ease;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  font-size: 16px;

}



.tg-voice-mini-gear:hover {

  transform: scale(1.06);

  background: rgba(255, 255, 255, 0.10);

}



.tg-voice-level-pill {

  display: inline-flex;

  align-items: center;

  height: 20px;

  padding: 0 8px;

  border-radius: 999px;

  font-size: 11px;

  font-weight: 900;

  margin-left: 8px;

  color: rgba(255, 255, 255, 0.90);

  background: rgba(255, 255, 255, 0.07);

  border: 1px solid rgba(255, 255, 255, 0.10);

}



.tg-voice-guild-ava {

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

  border-radius: 14px;

}



/* Voice Mode: channel sections */

.tg-voice-section-title {

  font-weight: 900;

  letter-spacing: 0.8px;

  font-size: 12px;

  color: rgba(255, 255, 255, 0.70);

  padding: 4px 6px;

}



.tg-voice-section-list {

  display: flex;

  flex-direction: column;

  gap: 8px;

}



.tg-voice-text-channel {

  width: 100%;

  text-align: left;

  border: 1px solid rgba(255, 255, 255, 0.10);

  background: rgba(255, 255, 255, 0.05);

  color: rgba(255, 255, 255, 0.92);

  border-radius: 14px;

  padding: 12px 12px;

  font-weight: 800;

  cursor: pointer;

  transition: transform 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;

}



.tg-voice-text-channel:hover {

  transform: scale(1.01);

  background: rgba(255, 255, 255, 0.08);

}



.tg-voice-text-channel.active {

  background: linear-gradient(135deg, var(--accent), var(--accent-light));

  border-color: rgba(255, 255, 255, 0.18);

  box-shadow: 0 16px 34px rgba(var(--accent-rgb), 0.18);

}



/* Voice Mode: right column text chat */

.tg-voice-text-chat {

  flex: 1;

  display: flex;

  flex-direction: column;

  gap: 12px;

  min-height: 0;

}



.tg-voice-text-messages {

  flex: 1;

  overflow: auto;

  padding: 10px;

  border-radius: 16px;

  border: 1px solid rgba(255, 255, 255, 0.08);

  background: rgba(255, 255, 255, 0.03);

}



.tg-voice-text-input {

  display: flex;

  gap: 10px;

}



.tg-voice-text-input input {

  flex: 1;

  height: 44px;

  border-radius: 14px;

  border: 1px solid rgba(255, 255, 255, 0.12);

  background: rgba(255, 255, 255, 0.06);

  color: #fff;

  padding: 0 12px;

  outline: none;

}



.tg-voice-text-input button {

  width: 56px;

  height: 44px;

  border-radius: 14px;

  border: none;

  background: linear-gradient(135deg, var(--accent), var(--accent-light));

  color: #fff;

  font-weight: 900;

  cursor: pointer;

  transition: transform 0.14s ease, filter 0.14s ease;

}



.tg-voice-text-input button:hover {

  transform: translateY(-1px);

  filter: brightness(1.05);

}



.tg-voice-text-input button:active {

  transform: translateY(0) scale(0.98);

}



/* DS text attach button (smaller, glassy) */

#tgVoiceTextAttach {

  width: 44px;

  border: 1px solid rgba(255, 255, 255, 0.12);

  background: rgba(255, 255, 255, 0.07);

  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);

}



#tgVoiceTextAttach:hover {

  background: rgba(var(--accent-rgb), 0.26);

  border-color: rgba(var(--accent-rgb), 0.45);

}



#tgVoiceTextAttach:disabled {

  opacity: 0.55;

  cursor: not-allowed;

  transform: none;

  filter: none;

}



.tg-voice-text-msg {

  padding: 10px 12px;

  border-radius: 14px;

  border: 1px solid rgba(255, 255, 255, 0.10);

  background: rgba(255, 255, 255, 0.05);

  margin-bottom: 10px;

}



.tg-voice-text-from {

  font-size: 11px;

  font-weight: 900;

  color: rgba(255, 255, 255, 0.75);

  margin-bottom: 4px;

}



.tg-voice-text-body {

  color: rgba(255, 255, 255, 0.92);

  font-size: 14px;

  line-height: 1.35;

  white-space: pre-wrap;

  word-break: break-word;

}



.tg-voice-text-sys {

  text-align: center;

  font-size: 12px;

  font-weight: 900;

  color: rgba(255, 255, 255, 0.65);

  padding: 8px 10px;

  border-radius: 999px;

  background: rgba(255, 255, 255, 0.05);

  border: 1px solid rgba(255, 255, 255, 0.08);

  margin: 10px auto;

  max-width: 92%;

}



/* Big + (create server) polish */

#voiceOverlay .tg-voice-plus {

  width: 64px;

  height: 64px;

  border-radius: 22px;

  background: linear-gradient(135deg, var(--accent), var(--accent-light));

  border: 1px solid rgba(255, 255, 255, 0.16);

  box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.35), 0 0 28px rgba(var(--accent-rgb), 0.15), 0 18px 60px rgba(var(--accent-rgb), 0.28);

  transition: transform 0.16s ease, filter 0.16s ease, box-shadow 0.25s ease;

  animation: tgVoicePlusGlow 2.5s ease-in-out infinite;

}

@keyframes tgVoicePlusGlow {

  0%   { box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.35), 0 0 28px rgba(var(--accent-rgb), 0.15), 0 18px 60px rgba(var(--accent-rgb), 0.28); }

  50%  { box-shadow: 0 0 18px rgba(var(--accent-rgb), 0.50), 0 0 40px rgba(var(--accent-rgb), 0.22), 0 18px 60px rgba(var(--accent-rgb), 0.32); }

  100% { box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.35), 0 0 28px rgba(var(--accent-rgb), 0.15), 0 18px 60px rgba(var(--accent-rgb), 0.28); }

}



#voiceOverlay .tg-voice-plus:hover {

  transform: translateY(-2px) scale(1.06);

  filter: brightness(1.08);

  box-shadow: 0 0 22px rgba(var(--accent-rgb), 0.6), 0 0 48px rgba(var(--accent-rgb), 0.3), 0 18px 60px rgba(var(--accent-rgb), 0.35);

  animation: none;

}



#voiceOverlay .tg-voice-plus:active {

  transform: translateY(0) scale(0.98);

}



/* Channel settings shell (Discord-like) */

.tg-voice-settings-shell {

  width: 92%;

  max-width: 880px;

  height: 72%;

  border-radius: 18px;

  background: rgba(18, 18, 20, 0.96);

  border: 1px solid rgba(255, 255, 255, 0.10);

  box-shadow: 0 22px 80px rgba(0, 0, 0, 0.55);

  display: flex;

  overflow: hidden;

}



.tg-voice-settings-left {

  width: 240px;

  padding: 16px;

  background: rgba(255, 255, 255, 0.04);

  border-right: 1px solid rgba(255, 255, 255, 0.08);

  display: flex;

  flex-direction: column;

  gap: 10px;

}



.tg-voice-settings-left-title {

  font-weight: 900;

  color: rgba(255, 255, 255, 0.86);

  margin-bottom: 6px;

}



.tg-voice-settings-nav {

  text-align: left;

  border: 1px solid rgba(255, 255, 255, 0.10);

  background: rgba(255, 255, 255, 0.05);

  color: rgba(255, 255, 255, 0.90);

  border-radius: 14px;

  padding: 10px 12px;

  cursor: pointer;

  font-weight: 800;

}



.tg-voice-settings-nav.active {

  background: linear-gradient(135deg, var(--accent), var(--accent-light));

  border-color: rgba(255, 255, 255, 0.18);

}



.tg-voice-settings-nav.danger {

  border-color: rgba(255, 77, 77, 0.30);

  color: #ff4d4d;

}



.tg-voice-settings-main {

  flex: 1;

  padding: 18px;

  display: flex;

  flex-direction: column;

  gap: 12px;

}



.tg-voice-settings-head {

  display: flex;

  align-items: center;

  justify-content: space-between;

}



.tg-voice-settings-title {

  font-weight: 900;

  font-size: 18px;

}



.tg-voice-settings-close {

  width: 44px;

  height: 44px;

  border-radius: 999px;

  border: 1px solid rgba(255, 255, 255, 0.12);

  background: rgba(255, 255, 255, 0.06);

  color: rgba(255, 255, 255, 0.90);

  font-size: 22px;

  cursor: pointer;

}



.tg-voice-settings-body {

  flex: 1;

  overflow: auto;

}



/* Chat settings: avatar button (iOS-like) */

#chatSettingsModal .settings-avatar-wrapper {

  flex-shrink: 0;

}

#chatSettingsModal .settings-avatar-button {

  position: relative;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  padding: 0;

  border: none;

  background: transparent;

  cursor: pointer;

}



#chatSettingsModal .settings-avatar-img {

  width: 56px;

  height: 56px;

  border-radius: 50%;

  object-fit: cover;

  border: 2px solid rgba(255, 255, 255, 0.10);

  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.35);

}



#chatSettingsModal .settings-avatar-chip {

  position: absolute;

  bottom: -6px;

  left: 50%;

  transform: translateX(-50%);

  padding: 4px 10px;

  border-radius: 999px;

  font-size: 11px;

  font-weight: 800;

  letter-spacing: 0.2px;

  color: #fff;

  background: linear-gradient(135deg, var(--accent), var(--accent-light));

  border: 1px solid rgba(255, 255, 255, 0.16);

  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);

  pointer-events: none;

}



#chatSettingsModal .settings-avatar-button:active {

  transform: scale(0.98);

}



/* ===================================================================== */

/* Profile avatar video -> GIF picker (Telegram-like) */

/* ===================================================================== */

.tg-avatar-video-backdrop {

  position: fixed;

  inset: 0;

  z-index: 17500;

  display: none;

  align-items: center;

  justify-content: center;

  background: rgba(0, 0, 0, 0.55);

  padding: 18px;

}



.tg-avatar-video-card {

  width: min(92vw, 380px);

  border-radius: 22px;

  background: rgba(18, 18, 20, 0.92);

  border: 1px solid rgba(255, 255, 255, 0.12);

  box-shadow: 0 22px 80px rgba(0, 0, 0, 0.55);

  backdrop-filter: blur(18px);

  -webkit-backdrop-filter: blur(18px);

  overflow: hidden;

}



html.is-cep .tg-avatar-video-card {

  backdrop-filter: none !important;

  -webkit-backdrop-filter: none !important;

  background: rgba(18, 18, 20, 0.92) !important;

}



.tg-avatar-video-head {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 12px 12px 10px 14px;

  border-bottom: 1px solid rgba(255, 255, 255, 0.08);

}



.tg-avatar-video-title {

  font-weight: 900;

  font-size: 14px;

  color: rgba(255, 255, 255, 0.92);

}



.tg-avatar-video-close {

  width: 36px;

  height: 36px;

  border-radius: 999px;

  border: 1px solid rgba(255, 255, 255, 0.10);

  background: rgba(255, 255, 255, 0.06);

  color: rgba(255, 255, 255, 0.90);

  font-size: 18px;

  font-weight: 900;

  cursor: pointer;

}



.tg-avatar-video-preview {

  width: 100%;

  aspect-ratio: 1 / 1;

  background: #000;

  object-fit: cover;

  object-position: 50% 50%;

  display: block;

}



/* CEP/compact panels: make the modal smaller and fit within narrow widths */

html.is-cep .tg-avatar-video-card {

  width: min(92vw, 320px);

  border-radius: 18px;

}



html.is-cep .tg-avatar-video-meta {

  padding: 10px 12px 12px 12px;

  gap: 8px;

}



html.is-cep .tg-avatar-video-preview {

  width: 100%;

  max-height: 240px;

}



html.is-cep .tg-avatar-video-btn {

  height: 42px;

  border-radius: 12px;

}



/* Small hint that preview is draggable (pan) */

.tg-avatar-video-preview.tg-avatar-video-preview--draggable {

  cursor: grab;

}



.tg-avatar-video-preview.tg-avatar-video-preview--draggable:active {

  cursor: grabbing;

}



.tg-avatar-video-meta {

  padding: 12px 14px 14px 14px;

  display: flex;

  flex-direction: column;

  gap: 10px;

}



.tg-avatar-video-row {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 10px;

}



.tg-avatar-video-label {

  font-weight: 800;

  font-size: 12px;

  color: rgba(255, 255, 255, 0.70);

}



.tg-avatar-video-time {

  font-weight: 900;

  font-size: 12px;

  color: rgba(255, 255, 255, 0.92);

}



.tg-avatar-video-select {

  height: 34px;

  border-radius: 12px;

  border: 1px solid rgba(255, 255, 255, 0.12);

  background: rgba(255, 255, 255, 0.06);

  color: rgba(255, 255, 255, 0.92);

  font-weight: 900;

  padding: 0 10px;

  outline: none;

}



.tg-avatar-video-select:focus {

  border-color: rgba(var(--accent-rgb), 0.6);

  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.14);

}



.tg-avatar-video-range {

  width: 100%;

}



/* One timeline with two thumbs (Start/End) */

.tg-avatar-video-dual {

  position: relative;

  width: 100%;

  height: 30px;

  display: flex;

  align-items: center;

  --start-pct: 0%;

  --end-pct: 0%;

}



.tg-avatar-video-dual .tg-avatar-video-range {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 30px;

  margin: 0;

  background: transparent;

  touch-action: none;

}



/* Make the lower (end) slider non-interfering except for thumb; upper (start) captures track drags */

.tg-avatar-video-dual .tg-avatar-video-range[data-role="end"] {

  pointer-events: none;

}



.tg-avatar-video-dual .tg-avatar-video-range[data-role="end"]::-webkit-slider-thumb {

  pointer-events: auto;

}



/* Custom track (via ::before overlay) so it looks like one control */

.tg-avatar-video-dual::before {

  content: '';

  position: absolute;

  left: 0;

  right: 0;

  top: 50%;

  transform: translateY(-50%);

  height: 10px;

  border-radius: 999px;

  background: rgba(255, 255, 255, 0.16);

  border: 1px solid rgba(255, 255, 255, 0.10);

  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);

}



/* Selected segment (between start/end) */

.tg-avatar-video-dual::after {

  content: '';

  position: absolute;

  top: 50%;

  transform: translateY(-50%);

  height: 10px;

  left: var(--start-pct);

  width: calc(var(--end-pct) - var(--start-pct));

  border-radius: 999px;

  background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.85), rgba(var(--accent-rgb), 0.55));

  box-shadow: 0 8px 20px rgba(var(--accent-rgb), 0.20);

}



.tg-avatar-video-dual .tg-avatar-video-range {

  -webkit-appearance: none;

  appearance: none;

  outline: none;

}



.tg-avatar-video-dual .tg-avatar-video-range::-webkit-slider-runnable-track {

  height: 10px;

  background: transparent;

}



.tg-avatar-video-dual .tg-avatar-video-range::-webkit-slider-thumb {

  -webkit-appearance: none;

  width: 16px;

  height: 30px;

  border-radius: 8px;

  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(235, 235, 235, 0.90));

  border: 1px solid rgba(255, 255, 255, 0.25);

  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.55), 0 0 0 4px rgba(var(--accent-rgb), 0.18), 0 0 16px rgba(var(--accent-rgb), 0.35);

  margin-top: -10px;

}



/* Active thumb gets a stronger ring so it is easier to grab and visually clear */

.tg-avatar-video-dual .tg-avatar-video-range.tg-avatar-video-range--active::-webkit-slider-thumb {

  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.55), 0 0 0 6px rgba(var(--accent-rgb), 0.22), 0 0 18px rgba(var(--accent-rgb), 0.45);

}



.tg-avatar-video-sub {

  font-size: 12px;

  color: rgba(255, 255, 255, 0.60);

}



.tg-avatar-video-actions {

  display: flex;

  gap: 10px;

  margin-top: 4px;

}



.tg-avatar-video-btn {

  flex: 1;

  height: 44px;

  border-radius: 14px;

  border: 1px solid rgba(255, 255, 255, 0.12);

  background: rgba(255, 255, 255, 0.06);

  color: #fff;

  font-weight: 900;

  cursor: pointer;

}



.tg-avatar-video-btn.tg-avatar-video-apply {

  background: linear-gradient(135deg, var(--accent), var(--accent-light));

  border: none;

}



.tg-avatar-video-btn:disabled {

  opacity: 0.55;

  cursor: not-allowed;

}



/* Скрываем скроллбары везде (но скролл работает) */

*::-webkit-scrollbar {

  display: none;

}



* {

  -ms-overflow-style: none;

  scrollbar-width: none;

}



/* Запрет выделения текста (чтобы не выглядело как сайт), кроме инпутов */

body {

  user-select: none;

  -webkit-user-select: none;

}



input,

textarea {

  user-select: text;

  -webkit-user-select: text;

}



* {

  box-sizing: border-box;

  font-family: Inter, 'Segoe UI', Roboto, Arial, sans-serif

}



html,

body {

  height: 100%;

  margin: 0;

  background: var(--bg);

  color: var(--text-primary);

  overflow: hidden;

  transition: background 0.3s ease, color 0.3s ease;

}



/* [NEW] Улучшенная светлая тема */

body.light-theme {

  --bg: #F4F2F7;

  --accent: #7C3AED;

  --muted: #6B7280;

  --btn: #EEEDF3;

  --glass: rgba(255, 255, 255, 0.45);

  --panel-bg-dynamic: #FAFAFE;

  --text-primary: #1E1B2E;

  background: linear-gradient(145deg, #F8F7FC 0%, #EDE9F6 50%, #F0EDF8 100%);

}



body.light-theme .panel {

  border: none;

  box-shadow: 0 0 60px rgba(124, 58, 237, 0.04);

  background: linear-gradient(180deg, #FEFEFE 0%, #FAF9FE 100%);

}



body.light-theme .tabs {

  background: rgba(238, 237, 243, 0.85) !important;

  border: 1px solid rgba(124, 58, 237, 0.08) !important;

  box-shadow: 0 2px 12px rgba(124, 58, 237, 0.06);

}



body.light-theme .tab {

  color: #6B7280;

  font-weight: 600;

}



body.light-theme .tab.active {

  color: #fff;

  background: transparent;

}



body.light-theme .middle-static::before {

  background: rgba(0, 0, 0, 0.1);

}



body.light-theme .tools-list .big-btn {

  background: var(--btn);

  border: 1px solid #E5E7EB;

}



body.light-theme .tools-list .big-btn:hover {

  background: #E5E7EB;

}



body.light-theme .big-btn .label {

  color: var(--text-primary);

}



body.light-theme .login-input,

body.light-theme .form-group input,

body.light-theme .form-group select {

  background-color: rgba(124, 58, 237, 0.03);

  border-color: rgba(124, 58, 237, 0.1);

  color: var(--text-primary);

}



body.light-theme .login-input:focus {

  border-color: rgba(124, 58, 237, 0.35);

  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.08);

}

body.light-theme .login-input::placeholder {
  color: #B0AEC0;
}

body.light-theme .nickname-box {
  background: rgba(255, 255, 255, 0.7);
  border-color: rgba(124, 58, 237, 0.1);
  box-shadow: 0 2px 16px rgba(124, 58, 237, 0.04);
}

body.light-theme .nickname-box:focus-within {
  border-color: rgba(124, 58, 237, 0.35);
  box-shadow: 0 4px 24px rgba(124, 58, 237, 0.1);
}

body.light-theme .nickname-input-group #myNicknameInput {
  background: rgba(124, 58, 237, 0.03);
  border-color: rgba(124, 58, 237, 0.1);
  color: #1E1B2E;
}

body.light-theme .nickname-input-group #myNicknameInput:focus {
  background: rgba(124, 58, 237, 0.05);
  border-color: rgba(124, 58, 237, 0.3);
}

body.light-theme .nickname-box label {
  color: #6B7280;
}



body.light-theme .bottom-right-controls .icon-btn,

body.light-theme .text-icon-btn {

  background: var(--btn);

  border: 1px solid #E5E7EB;

}

/* ========================================================= */
/* === LIGHT THEME: comprehensive overrides               === */
/* ========================================================= */

/* Tool tiles */
body.light-theme .tool-tile {
  background: linear-gradient(160deg, #FFFFFF 0%, #F5F3FA 100%);
  box-shadow: 0 2px 12px rgba(124, 58, 237, 0.06), 0 0 0 1px rgba(124, 58, 237, 0.06);
  border: 1px solid rgba(124, 58, 237, 0.06);
}

body.light-theme .tool-tile:hover {
  background: linear-gradient(160deg, #FFFFFF 0%, #EDE5FF 100%);
  box-shadow: 0 8px 30px rgba(124, 58, 237, 0.14), 0 0 0 1px rgba(124, 58, 237, 0.12);
  border-color: rgba(124, 58, 237, 0.15);
}

body.light-theme .tool-tile .tile-label {
  color: #1F2937;
}

body.light-theme .tool-tile .tile-icon {
  background: rgba(124, 58, 237, 0.07);
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.06);
}

body.light-theme .tool-tile .tile-icon-text {
  color: #6D28D9;
  box-shadow: none;
}

body.light-theme .tool-tile .tile-icon img {
  filter: brightness(0.3);
}

/* Profile text */
body.light-theme .profile-name {
  color: #1E1B2E;
  text-shadow: none;
}

body.light-theme .profile-bio {
  color: #4B5563;
}

body.light-theme .profile-link {
  color: var(--accent);
}

/* Logged in text */
body.light-theme .logged-in-as {
  color: #9CA3AF;
  font-size: 13px;
}

/* Logout button */
body.light-theme .logout-btn {
  background: rgba(239, 68, 68, 0.03);
  border: 1.5px solid rgba(239, 68, 68, 0.25);
  color: #DC2626;
}

body.light-theme .logout-btn:hover {
  background: rgba(239, 68, 68, 0.06);
  border-color: rgba(239, 68, 68, 0.4);
}

/* Login button */
body.light-theme .login-btn {
  background: var(--accent);
  color: #fff;
}

/* Admin button */
body.light-theme .admin-btn {
  border-color: var(--accent);
  color: var(--accent);
}

body.light-theme #btnAdminPanel,
body.light-theme #btnSaveNickname {
  background: linear-gradient(135deg, #7C3AED, #9F7AEA);
  color: #fff !important;
  border: none !important;
  box-shadow: 0 4px 18px rgba(124, 58, 237, 0.3);
}

body.light-theme #btnAdminPanel:hover,
body.light-theme #btnSaveNickname:hover {
  background: linear-gradient(135deg, #6D28D9, #7C3AED);
  box-shadow: 0 6px 24px rgba(124, 58, 237, 0.4);
  transform: translateY(-1px);
}

/* Top right icons */
body.light-theme .top-right-icons .icon-btn {
  background: rgba(255, 255, 255, 0.6);
  border-color: rgba(124, 58, 237, 0.08);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.04);
}

body.light-theme .top-right-icons .icon-btn:hover {
  box-shadow: 0 4px 16px rgba(124, 58, 237, 0.12);
}

body.light-theme .top-right-icons .icon-btn img {
  filter: brightness(0.3);
}

/* Settings panel */
body.light-theme .settings-panel {
  background: rgba(255, 255, 255, 0.92) !important;
}

body.light-theme .stg-scroll {
  background: transparent;
}

body.light-theme .stg-header {
  border-color: rgba(0, 0, 0, 0.06);
  background: rgba(255, 255, 255, 0.95);
}

body.light-theme .stg-close-btn {
  color: #6B7280;
}

body.light-theme .stg-title {
  color: #1F2937;
}

body.light-theme .stg-section-label {
  color: #6B7280;
}

body.light-theme .stg-card {
  background: #F9FAFB;
  border-color: rgba(0, 0, 0, 0.06);
}

body.light-theme .stg-upload-btn {
  background: #F3F4F6;
  border-color: rgba(0, 0, 0, 0.08);
  color: #4B5563;
}

body.light-theme .stg-apply-mini {
  background: var(--accent);
  color: #fff;
}

body.light-theme .stg-row-text {
  color: #374151;
}

body.light-theme .stg-row-icon {
  color: #6B7280;
}

body.light-theme .stg-slider-label {
  color: #6B7280;
}

body.light-theme .stg-gallery-label {
  color: #6B7280;
}

body.light-theme .stg-divider {
  background: rgba(0, 0, 0, 0.06);
}

body.light-theme .stg-danger-btn {
  color: #EF4444;
  border-color: #FCA5A5;
  background: rgba(239, 68, 68, 0.04);
}

/* Theme switcher segment */
body.light-theme .stg-seg {
  background: rgba(0, 0, 0, 0.06);
}

body.light-theme .theme-option {
  color: #6B7280;
}

body.light-theme .theme-option.active {
  color: #fff;
}

/* About Promo button text */
body.light-theme .text-icon-btn span {
  color: #4B5563;
}

body.light-theme .text-icon-btn img {
  filter: brightness(0.4);
}

body.light-theme .text-icon-btn:hover {
  background: var(--accent);
  border-color: var(--accent);
}

body.light-theme .text-icon-btn:hover span {
  color: #fff;
}

body.light-theme .text-icon-btn:hover img {
  filter: brightness(0) invert(1);
}

/* Bottom icons */
body.light-theme .bottom-right-controls .icon-btn {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(124, 58, 237, 0.08);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

body.light-theme .bottom-right-controls .icon-btn:hover {
  box-shadow: 0 4px 16px rgba(124, 58, 237, 0.12);
}

/* Light sweep on light theme — darker sweep */
body.light-theme .login-btn::after,
body.light-theme .logout-btn::after,
body.light-theme .admin-btn::after,
body.light-theme #btnAdminPanel::after,
body.light-theme #btnSaveNickname::after,
body.light-theme .tool-tile::after,
body.light-theme .stg-apply-mini::after {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
}

/* Panel background — handled above */

/* Avatar glow */
body.light-theme .avatar-glow {
  background: radial-gradient(circle, rgba(139, 92, 246, 0.15), transparent 70%);
}

/* Tab indicator on light theme */
body.light-theme .tabs .tab-indicator {
  box-shadow: 0 4px 14px rgba(139, 92, 246, 0.25);
}



body,

#app {

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 0;

}



/* [FIX] Стили для новой обертки UI, чтобы панель была видимой */

#ui-content {

  position: relative;

  width: 100%;

  height: 100%;

  display: flex;

  align-items: center;

  justify-content: center;

  z-index: 3;

}



#wallpaper-container {

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  z-index: 1;

  background-size: cover;

  background-position: center;

}



/* Full-screen cover layer (обложка) between wallpaper and UI */

#panel-cover-layer {

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  z-index: 2;

  pointer-events: none;

  transition: background-color 0.3s ease, backdrop-filter 0.3s ease;

}



#videoWallpaper {

  width: 100%;

  height: 100%;

  object-fit: cover;

  opacity: 0;

  transition: opacity 0.5s ease;

}



.panel {

  width: 100%;

  height: 100%;

  max-width: 100%;

  max-height: 100%;

  /* Теперь фон берется из динамической переменной */

  background-color: var(--panel-bg-dynamic);

  border-radius: 0;

  box-shadow: none;

  display: flex;

  flex-direction: column;

  align-items: center;

  position: relative;

  overflow: hidden;

  padding: 8px;

  z-index: 1;

  /* Динамический блюр */

  backdrop-filter: blur(var(--panel-blur-dynamic));

  -webkit-backdrop-filter: blur(var(--panel-blur-dynamic));

  /* [NEW] Динамическое скругление */

  transition: border-radius 0.3s ease, background-color 0.3s ease, backdrop-filter 0.3s ease;

  border: none;

}



/* [NEW] Класс для отключения скругления */

.panel.no-rounding {

  border-radius: 0px;

}



/* ПРОФИЛЬ */

.profile-name-wrapper,

.profile-bio-wrapper,

.profile-link-wrapper {

  position: absolute;

  text-align: left;

  top: 160px;

  left: 50%;

  transform: translateX(-50%);

  opacity: 0;

  pointer-events: none;

  transition: all 0.4s ease-in-out;

  z-index: 999;

  width: auto;

  white-space: nowrap;

}



.profile-name-wrapper {

  display: flex;

  align-items: center;

  gap: 12px;

}



.profile-name {

  font-size: 20px;

  font-weight: 600;

  margin: 0;

}



.profile-bio {

  font-size: 14px;

  margin: 0;

  color: var(--muted);

  display: flex;

  align-items: center;

}



.profile-link {

  color: #58A6FF;

  text-decoration: none;

  font-size: 14px;

}



body.profile-view .profile-name-wrapper {

  display: flex;

  align-items: center;

  gap: 12px;

}



/* [ВОССТАНОВЛЕНО] Для иконки мессенджера */

body.profile-view .profile-name-wrapper {

  opacity: 1;

  pointer-events: all;

  transform: none;

  transition: all 0.8s cubic-bezier(0.19, 1, 0.22, 1);

  transition-delay: 0.1s;

  top: 55px;

  left: var(--profile-name-left, 135px);

}



/* Default profile position (A) */

body.profile-view .profile-bio-wrapper {

  opacity: 1;

  pointer-events: all;

  transform: none;

  transition: all 0.8s cubic-bezier(0.19, 1, 0.22, 1);

  transition-delay: 0.15s;

  top: 138px;

  left: var(--profile-bio-left, 40px);

}



body.profile-view .profile-link-wrapper {

  opacity: 1;

  pointer-events: all;

  transform: none;

  transition: all 0.8s cubic-bezier(0.19, 1, 0.22, 1);

  transition-delay: 0.2s;

  top: 158px;

  left: var(--profile-bio-left, 40px);

}



/* Peek mode (B): when wheel-peek shows dots under avatar */

body.profile-view.tg-profile-peek .profile-bio-wrapper {

  top: 146px;

}



body.profile-view.tg-profile-peek .profile-link-wrapper {

  top: 166px;

}



/* Bio micro-animation in peek (Apple-like small slide) */

body.profile-view.tg-profile-peek .profile-bio-wrapper,

body.profile-view.tg-profile-peek .profile-link-wrapper {

  transform: translateY(6px);

}



/* Old circles (dots) under profile avatar during peek */

#tgProfileStoryDots .tg-profile-dot {

  width: 7px;

  height: 7px;

  border-radius: 999px;

  background: rgba(255, 255, 255, 0.28);

  border: 1px solid rgba(255, 255, 255, 0.10);

  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);

}



#tgProfileStoryDots .tg-profile-dot.active {

  background: rgba(255, 255, 255, 0.92);

  box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.88), 0 0 14px rgba(var(--accent-rgb), 0.38);

}



.tiktok-icon {

  width: 16px;

  height: 16px;

  margin-right: 6px;

}



/* HIDE */

body.shame-mode .profile-name-wrapper,

body.shame-mode .profile-bio-wrapper,

body.shame-mode .profile-link-wrapper,

body.admin-mode .profile-name-wrapper,

body.admin-mode .profile-bio-wrapper,

body.admin-mode .profile-link-wrapper {

  opacity: 0 !important;

  pointer-events: none;

  transition: opacity 0.2s ease;

}



/* ICONS */

.top-right-icons {

  position: absolute;

  top: 20px;

  right: 16px;

  z-index: 50;

  display: flex;

  flex-direction: column;

  gap: 12px;

}



.top-right-icons .icon-btn {

  position: static;

  width: 40px;

  height: 40px;

  border-radius: 10px;

  background: transparent;

  border: 2px solid rgba(255, 255, 255, 0.04);

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  transition: transform .28s ease, box-shadow .28s ease;

  padding: 0;

}



/* Profile header: chat/open button next to KUZUNO

   IMPORTANT: no separate show/hide state (prevents "jump then disappear" glitches).

   It inherits the parent `.profile-name-wrapper` transitions (position/opacity). */

.profile-name-wrapper .messenger-icon-btn {

  background: none;

  border: none;

  padding: 0;

  cursor: pointer;

  opacity: 0.72;

  transition: opacity 200ms ease, transform 200ms ease;

}



body.profile-view .profile-name-wrapper .messenger-icon-btn:hover {

  opacity: 1;

  transform: translateY(-1px) scale(1.06);

}



.profile-name-wrapper .messenger-icon-btn img {

  width: 24px;

  height: 24px;

}



.top-right-icons .icon-btn:hover {

  transform: rotate(10deg);

  box-shadow: 0 8px 22px rgba(var(--accent-rgb), 0.16);

}



.top-right-icons .icon-btn img {

  width: 22px;

  height: 22px;

}



/* Make top-right icons readable on dark theme */

body:not(.light-theme) .top-right-icons .icon-btn img {

  filter: brightness(0) invert(1) drop-shadow(0 2px 10px rgba(0, 0, 0, 0.45));

  opacity: 0.95;

}



/* Instagram icon is colorful; the monochrome filter above turns it into a white square. */

body:not(.light-theme) #btnInstagram img {

  filter: none;

  opacity: 1;

}



#btnNotifications {

  position: relative;

}



#btnNotifications .dot {

  position: absolute;

  top: 6px;

  right: 6px;

  width: 8px;

  height: 8px;

  background-color: #ff5c5c;

  border-radius: 50%;

  border: 1px solid var(--bg);

  box-shadow: 0 0 10px #ff5c5c;

  display: none;

}



.avatar-wrap {

  margin-top: 40px;

  margin-bottom: 14px;

  z-index: 15;

  transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1);

  flex-shrink: 0;

  align-self: center;

}



body.profile-view .avatar-wrap {

  transform: translate(var(--avatar-shift-x, -105px), -33px) scale(0.6);

}



.avatar-ring {

  width: 144px;

  height: 144px;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  position: relative;

  background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.9), rgba(var(--accent-rgb), 0.4));

  padding: 3px;

  transition: transform .28s ease;

}



.avatar-ring:hover {

  transform: scale(1.03)

}



.avatar-ring img {

  width: 138px;

  height: 138px;

  border-radius: 50%;

  display: block;

  object-fit: cover;

  border: 3px solid #0C0A09;

}



.avatar-glow {

  position: absolute;

  left: -8px;

  top: -8px;

  right: -8px;

  bottom: -8px;

  border-radius: 50%;

  box-shadow: 0 0 35px 10px rgba(var(--accent-rgb), 0.25);

  opacity: 0;

  transition: opacity .4s ease;

  pointer-events: none;

}



.avatar-ring:hover .avatar-glow {

  opacity: 1

}



/* TABS & CONTENT */

/* === 3. КОЛЬЦО MAIN STORY (ДИНАМИЧЕСКОЕ) === */

/* Теперь цвет зависит от переменной --accent */

.main-story-active {

  border: 3px solid var(--accent) !important;

  cursor: pointer !important;

  box-shadow: 0 0 15px var(--accent);

  /* Добавил свечение */

}



.tabs {

  width: 100%;

  max-width: 320px;

  background: #262626;

  border-radius: 14px;

  padding: 6px;

  display: flex;

  justify-content: space-between;

  margin-bottom: 16px;

  flex-shrink: 0;

  align-self: center;

  position: relative;

  z-index: 5;

}



.tab {

  flex: 1;

  border: none;

  background: transparent;

  color: #bbb;

  padding: 10px;

  border-radius: 10px;

  margin: 0 6px;

  font-size: 15px;

  cursor: pointer;

  transition: color 0.35s ease, transform 0.2s ease;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  position: relative;

  z-index: 2;

}



.tab.active {

  background: transparent;

  color: #fff;

}

.tab:active {
  transform: scale(0.95);
}

/* Sliding indicator behind active tab */
.tabs .tab-indicator {
  position: absolute;
  top: 6px;
  bottom: 6px;
  border-radius: 10px;
  background: var(--accent);
  box-shadow: 0 4px 18px rgba(var(--accent-rgb), 0.35);
  transition: left 0.35s cubic-bezier(0.4, 0, 0.2, 1), width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1;
  pointer-events: none;
}



.middle-static {

  flex: 1;

  display: flex;

  align-items: center;

  justify-content: center;

  opacity: 0.5;

  cursor: default;

  pointer-events: none;

  position: relative;

}



.middle-static::before {

  content: "";

  width: 2px;

  height: 28px;

  background: rgba(255, 255, 255, 0.2);

  border-radius: 2px;

}



.content {

  width: 100%;

  padding: 0 16px;

  position: relative;

  flex: 1;

  display: flex;

  overflow: visible;

  margin-bottom: 0;

  z-index: 10;

}



.content-pane {

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  opacity: 0;

  pointer-events: none;

  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);

  transform: translateY(12px) scale(0.98);

  display: flex;

  flex-direction: column;

  overflow-y: auto;

  scrollbar-width: none;

  padding-bottom: 60px;

}



.content-pane::-webkit-scrollbar {

  display: none;

}



.content-pane.active {

  opacity: 1;

  pointer-events: all;

  transform: translateY(0) scale(1);

}



/* TOOLS */

#toolsPane {

  display: flex;

  flex-direction: column;

}



.tools-list {

  width: 100%;

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 10px;

  transition: opacity 0.3s ease;

  padding: 10px 14px 14px;

}



/* Main menu tiles — Apple iOS dark style */

.tool-tile {

  width: 100%;

  height: 82px;

  border: 1px solid rgba(255, 255, 255, 0.07);

  border-radius: 18px;

  background: rgba(28, 28, 30, 0.85);

  backdrop-filter: blur(20px);

  -webkit-backdrop-filter: blur(20px);

  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255,255,255,0.06);

  cursor: pointer;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 6px;

  transition: transform .22s ease, box-shadow .22s ease, background .2s ease, border-color .2s ease;

}



.tool-tile:hover {

  transform: translateY(-3px) scale(1.02);

  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(var(--accent-rgb), 0.18), inset 0 1px 0 rgba(255,255,255,0.09);

  background: rgba(38, 38, 42, 0.92);

  border-color: rgba(var(--accent-rgb), 0.2);

}



.tool-tile .tile-icon {

  width: 38px;

  height: 38px;

  border-radius: 11px;

  background: rgba(255, 255, 255, 0.06);

  border: 1px solid rgba(255, 255, 255, 0.06);

  display: flex;

  align-items: center;

  justify-content: center;

}



.tool-tile .tile-icon-text {

  font-weight: 900;

  color: #fff;

  font-size: 15px;

  letter-spacing: 0.5px;

}



.tool-tile .tile-label {

  font-size: 12px;

  font-weight: 700;

  color: rgba(255, 255, 255, 0.85);

  letter-spacing: 0.4px;

}



/* Premium lock badge on gated tool tiles */
.tile-premium-lock {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 18px;
  height: 18px;
  border-radius: 6px;
  background: rgba(255, 185, 0, 0.18);
  border: 1px solid rgba(255, 185, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 6;
  transition: opacity 0.2s;
}
.tile-premium-lock::after {
  content: '';
  display: block;
  width: 9px;
  height: 9px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffb900' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.tile-premium-lock.hidden {
  display: none;
}

/* Tool tile info badge (!) */
.tile-info-badge {
  position: absolute;
  bottom: 5px;
  right: 5px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.35);
  font-size: 9px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
  z-index: 5;
  transition: background 0.2s, color 0.2s, opacity 0.22s;
  pointer-events: auto;
  line-height: 1;
  opacity: 0;
}
.tool-tile:hover .tile-info-badge {
  opacity: 1;
}
.tile-info-badge:hover {
  background: rgba(var(--accent-rgb),0.25);
  color: rgba(255,255,255,0.85);
}

/* Tool info tooltip popup */
.tile-info-popup {
  position: fixed;
  z-index: 999999;
  width: 340px;
  background: rgba(18,18,22,0.96);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.6);
  padding: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.2s, transform 0.2s;
  pointer-events: none;
}
.tile-info-popup.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.tile-info-popup-video {
  width: 100%;
  display: block;
  border-radius: 14px 14px 0 0;
  max-height: 240px;
  object-fit: contain;
  background: #000;
}
.tile-info-popup-text {
  padding: 12px 16px 14px;
  color: rgba(255,255,255,0.88);
  font-size: 13px;
  line-height: 1.55;
  font-weight: 500;
}
.tile-info-popup-title {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 6px;
}
body.light-theme .tile-info-popup {
  background: rgba(255,255,255,0.97);
  border-color: rgba(0,0,0,0.08);
  box-shadow: 0 12px 40px rgba(0,0,0,0.15);
}
body.light-theme .tile-info-popup-text {
  color: rgba(0,0,0,0.72);
}
body.light-theme .tile-info-popup-title {
  color: #111;
}
body.light-theme .tile-info-badge {
  background: rgba(0,0,0,0.05);
  color: rgba(0,0,0,0.3);
}
body.light-theme .tile-info-badge:hover {
  background: rgba(124,58,237,0.15);
  color: rgba(0,0,0,0.7);
}

/* Wide button style (used in AI panel, admin, etc.) */

.big-btn {

  width: 100%;

  height: 64px;

  margin-bottom: 14px;

  border-radius: 12px;

  border: none;

  background: linear-gradient(180deg, var(--btn), #0f0f0f);

  display: flex;

  align-items: center;

  padding: 10px 14px;

  cursor: pointer;

  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6);

  transition: transform .28s ease, box-shadow .28s ease, background .25s ease;

  overflow: hidden;

  flex-shrink: 0;

}



.big-btn:hover {

  transform: translateY(-4px) scale(1.01);

  box-shadow: 0 12px 36px rgba(var(--accent-rgb), 0.12);

  background: linear-gradient(180deg, #232323, #121212);

}



.big-btn .icon {

  width: 46px;

  height: 46px;

  border-radius: 10px;

  background: var(--glass);

  display: flex;

  align-items: center;

  justify-content: center;

  margin-right: 12px;

  font-size: 22px;

  flex-shrink: 0;

  transition: background .25s ease, transform .28s ease;

}



.big-btn:hover .icon {

  transform: scale(1.05);

  background: rgba(var(--accent-rgb), 0.06)

}



.big-btn .label {

  flex: 1;

  font-size: 20px;

  font-weight: 600;

  text-align: left;

  color: #fff;

}



.big-btn .hint {

  background: var(--glass);

  padding: 6px 8px;

  border-radius: 8px

}



/* BOTTOM CONTROLS */

.bottom-left-controls,

.bottom-right-controls {

  position: absolute;

  bottom: 16px;

  z-index: 50;

  opacity: 0;

  pointer-events: none;

  transition: opacity 0.3s ease-in-out;

}



body.profile-view .bottom-left-controls,

body.profile-view .bottom-right-controls {

  opacity: 1;

  pointer-events: all;

  transition-delay: 0.2s;

}



.bottom-left-controls {

  left: 20px;

}



.bottom-right-controls {

  right: 20px;

  display: flex;

  gap: 12px;

}



.bottom-right-controls .icon-btn {

  width: 40px;

  height: 40px;

  border-radius: 10px;

  border: none;

  background: var(--btn);

  cursor: pointer;

  display: flex;

  align-items: center;

  justify-content: center;

  transition: all 0.2s;

}



.bottom-right-controls .icon-btn img {

  width: 20px;

  height: 20px;

}



.bottom-right-controls .icon-btn:hover {

  transform: scale(1.1);

  background: var(--accent);

}



.text-icon-btn {

  height: 40px;

  border-radius: 10px;

  border: none;

  background: var(--btn);

  cursor: pointer;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 0 12px;

  gap: 8px;

  transition: all 0.2s;

}



.text-icon-btn img {

  width: 20px;

  height: 20px;

}



.text-icon-btn span {

  color: var(--muted);

  font-weight: 600;

  font-size: 14px;

}



.text-icon-btn:hover {

  background: var(--accent);

}



.text-icon-btn:hover span {

  color: #fff;

}



/* LOGIN */

.login-container,

.logout-container {

  width: 100%;

  padding: 0 30px 48px 30px;

  position: relative;

  margin-top: auto;

  display: flex;

  flex-direction: column;

  align-items: center;

  transition: opacity 0.4s ease;

  z-index: 40;

  gap: 12px;

  flex-shrink: 0;

}



.login-input {

  width: 100%;

  height: 48px;

  background-color: var(--btn);

  border: 2px solid rgba(255, 255, 255, 0.05);

  border-radius: 10px;

  padding: 0 16px;

  font-size: 18px;

  color: #fff;

  text-align: center;

  transition: border-color 0.2s, box-shadow 0.2s;

}



.login-input:focus {

  outline: none;

  border-color: var(--accent);

  box-shadow: 0 0 15px rgba(var(--accent-rgb), 0.2);

}



.login-btn,

.logout-btn,

.admin-btn {

  width: 100%;

  height: 40px;

  border: none;

  border-radius: 10px;

  background-color: var(--accent);

  color: #fff;

  font-size: 15px;

  font-weight: 600;

  cursor: pointer;

  transition: transform 0.2s;

  margin-top: 6px;

  display: flex;

  align-items: center;

  justify-content: center;

}



.login-btn:hover {

  transform: scale(1.02);

  box-shadow: 0 8px 25px rgba(var(--accent-rgb), 0.25);

}

.kzn-forgot-link {
  display: block;
  width: 100%;
  margin-top: 10px;
  background: none;
  border: none;
  color: rgba(255,255,255,0.5);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  padding: 6px 0;
  transition: color 0.2s;
}
.kzn-forgot-link:hover {
  color: var(--accent);
}

#btnAccountManagement {
  background: linear-gradient(135deg, rgba(var(--accent-rgb),0.15), rgba(var(--accent-rgb),0.08));
  border: 1px solid rgba(var(--accent-rgb),0.25);
  color: var(--accent-light);
  font-size: 14px;
  font-weight: 700;
}

#amAvatar {
  transition: transform 0.2s, box-shadow 0.2s;
}
#amAvatar:hover {
  transform: scale(1.08);
  box-shadow: 0 0 16px rgba(var(--accent-rgb),0.4);
  border-color: rgba(var(--accent-rgb),0.5) !important;
}



.logout-btn {

  background: transparent;

  border: 1px solid #ff4d4d;

  color: #ff4d4d;

  margin-bottom: 28px;

}



.admin-btn {

  background: transparent;

  border: 1px solid var(--accent);

  color: var(--accent);

}



/* Admin panel button should be available only for admin accounts (JS toggles body.admin-view). */

#btnAdminPanel {

  display: none;

}



body.admin-view #btnAdminPanel {

  display: block;

}



body.logged-in .login-container {

  display: none;

}



.logout-container {

  display: none;

}



body.logged-in .logout-container {

  display: flex;

}



body.admin-view .admin-btn {

  display: block;

}



.logged-in-as {

  font-size: 16px;

  color: var(--muted);

}



.nickname-input-group {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.nickname-input-group #myNicknameInput {
  flex-grow: 1;
  height: 42px;
  font-size: 15px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  text-align: left;
  padding: 0 14px;
  color: #fff;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.nickname-input-group #myNicknameInput:focus {
  border-color: rgba(var(--accent-rgb), 0.4);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: none;
}

.nickname-input-group #btnSaveNickname {
  flex-shrink: 0;
  padding: 0 20px;
  height: 42px;
  margin-top: 0;
  width: auto;
  font-size: 13px;
  letter-spacing: 1px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--accent), var(--accent-light));
  box-shadow: 0 4px 14px rgba(var(--accent-rgb), 0.3);
}


.nickname-box {
  width: 100%;
  text-align: left;
  margin-bottom: 0;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  padding: 14px 16px 14px 16px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.nickname-box:focus-within {
  border-color: rgba(var(--accent-rgb), 0.3);
  box-shadow: 0 0 20px rgba(var(--accent-rgb), 0.08);
}

.nickname-box label {
  font-size: 11px;
  color: var(--muted);
  margin-left: 2px;
  margin-bottom: 8px;
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-weight: 600;
}


/* ADMIN */

.admin-panel {

  display: flex;

  flex-direction: column;

  position: absolute;

  bottom: 0;

  left: 0;

  right: 0;

  max-height: 90%;

  z-index: 10000;



  /* iOS-like sheet */

  background: rgba(12, 10, 9, 0.78);

  -webkit-backdrop-filter: blur(18px);

  backdrop-filter: blur(18px);

  border-top: 1px solid rgba(255, 255, 255, 0.08);

  border-radius: 22px 22px 0 0;

  box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.55);



  transform: translateY(100%);

  pointer-events: none;

  transition: transform 0.45s cubic-bezier(0.2, 0.9, 0.2, 1);

}



.admin-header {

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 14px 14px 12px 16px;

  border-bottom: 1px solid rgba(255, 255, 255, 0.08);

}



.admin-title {

  text-align: left;

  margin: 0;

  color: #fff;

  font-size: 16px;

  font-weight: 800;

  letter-spacing: 0.2px;

}



.close-btn {

  width: 32px;

  height: 32px;

  border: none;

  background: transparent;

  color: var(--muted);

  font-size: 24px;

  cursor: pointer;

}



.admin-content {

  display: flex;

  flex-direction: column;

  gap: 14px;

  padding: 16px;

  overflow-y: auto;

  flex-grow: 1;

  min-height: 300px;

}



.admin-section {

  background: rgba(255, 255, 255, 0.04);

  border: 1px solid rgba(255, 255, 255, 0.06);

  border-radius: 18px;

  padding: 14px;

}



.admin-section-title {

  margin: 0 0 10px;

  color: rgba(255, 255, 255, 0.92);

  font-size: 13px;

  font-weight: 800;

  letter-spacing: 0.6px;

}



.admin-section-sub {

  margin: -6px 0 10px;

  color: rgba(255, 255, 255, 0.55);

  font-size: 12px;

}



.admin-content h4 {

  margin: 0 0 10px;

}



.form-group {

  margin-bottom: 12px;

}



.form-group label {

  display: block;

  margin-bottom: 6px;

  font-size: 12px;

  color: rgba(255, 255, 255, 0.65);

}



.form-group input,

.form-group select,

.form-group textarea {

  width: 100%;

  background: rgba(255, 255, 255, 0.06);

  border: 1px solid rgba(255, 255, 255, 0.08);

  border-radius: 14px;

  padding: 10px 12px;

  color: #fff;

  font-size: 14px;

}



/* Buttons inside admin panel: make them look like primary iOS actions */

.admin-panel .admin-btn {

  display: block;

  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.95) 0%, rgba(var(--accent-rgb), 0.85) 100%);

  border: none;

  color: #fff;

  border-radius: 14px;

  height: 46px;

  font-size: 15px;

  font-weight: 800;

  margin-top: 10px;

  box-shadow: 0 10px 24px rgba(var(--accent-rgb), 0.25);

}



.admin-panel .admin-btn:hover {

  transform: translateY(-1px);

}



.admin-panel .logout-btn {

  width: 100%;

  height: 46px;

  border-radius: 14px;

  background: linear-gradient(135deg, rgba(255, 77, 77, 0.9) 0%, rgba(255, 59, 48, 0.9) 100%);

  border: 1px solid rgba(255, 255, 255, 0.08);

  color: #fff;

  font-weight: 900;

}



.admin-panel .big-btn {

  height: 48px;

  font-size: 16px;

  margin-top: 8px;

}



.pos-group {

  display: flex;

  align-items: center;

  gap: 8px;

  margin-bottom: 8px;

}



.pos-group input {

  width: 100%;

}



/* SETTINGS */

.settings-panel {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: #0C0A09;

  z-index: 10000;

  display: flex;

  flex-direction: column;

  opacity: 0;

  pointer-events: none;

  transition: opacity 0.3s ease;

  backdrop-filter: blur(10px);

}



.settings-panel {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: rgba(12, 10, 9, 0.88);

  z-index: 10000;

  display: flex;

  flex-direction: column;

  opacity: 0;

  pointer-events: none;

  transition: opacity 0.3s ease, backdrop-filter 0.3s ease;

  -webkit-backdrop-filter: blur(16px);

  backdrop-filter: blur(16px);

}



.settings-panel.active {

  opacity: 1;

  pointer-events: all;

}



.settings-title {

  text-align: center;

  margin: 0;

  color: var(--accent);

  font-size: 24px;

  font-weight: 800;

}



.settings-content {

  display: flex;

  flex-direction: column;

  gap: 16px;

  padding: 0 20px;

  overflow-y: auto;

}



.setting-group-box {

  background: rgba(255, 255, 255, 0.03);

  padding: 12px;

  border-radius: 12px;

  border: 1px solid rgba(255, 255, 255, 0.05);

}



.setting-row {

  display: flex;

  justify-content: space-between;

  align-items: center;

  margin-bottom: 10px;

  font-size: 14px;

  color: #ccc;

}



.setting-item {

  display: flex;

  flex-direction: column;

  gap: 8px;

  margin-bottom: 8px;

}



.setting-item label {

  font-size: 12px;

  color: var(--muted);

}



.setting-item input[type="range"] {

  width: 100%;

  cursor: pointer;

}



.setting-item input[type="color"] {

  width: 100%;

  height: 35px;

  border: none;

  padding: 0;

  background: none;

  cursor: pointer;

}



/* [NEW] Стили для настроек звука видеообоев */

.wallpaper-sound-controls {

  display: flex;

  flex-direction: column;

  gap: 12px;

  margin-top: 12px;

  padding-top: 12px;

  border-top: 1px solid rgba(255, 255, 255, 0.05);

}



.wallpaper-sound-controls .setting-row {

  margin-bottom: 0;

}



.wallpaper-sound-controls .volume-slider-container {

  display: flex;

  align-items: center;

  gap: 10px;

}



.input-with-button {

  display: flex;

  align-items: center;

  gap: 10px;

}



.apply-btn {

  padding: 6px 12px;

  background: var(--accent);

  color: #fff;

  border: none;

  border-radius: 8px;

  cursor: pointer;

  font-weight: 600;

  flex-shrink: 0;

  transition: background-color 0.2s;

}



.apply-btn:hover {

  background: #c07eff;

}



.wallpaper-gallery {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));

  gap: 12px;

}



.wallpaper-thumb-item {

  display: flex;

  flex-direction: column;

  align-items: center;

  cursor: pointer;

  gap: 4px;

}



.wallpaper-thumb-img {

  width: 100%;

  height: 50px;

  object-fit: cover;

  border-radius: 8px;

  border: 2px solid transparent;

  transition: border-color 0.2s;

}



.wallpaper-thumb-item:hover .wallpaper-thumb-img {

  border-color: var(--accent);

}



.wallpaper-thumb-name {

  font-size: 10px;

  color: var(--muted);

  text-align: center;

  width: 100%;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

}



body.light-theme .wallpaper-thumb-name {

  color: #6B7280;

}



.theme-switcher {

  display: flex;

  background: var(--btn);

  border-radius: 10px;

  padding: 4px;

}



.theme-option {

  flex: 1;

  text-align: center;

  padding: 8px;

  border-radius: 8px;

  cursor: pointer;

  font-weight: 600;

  color: var(--muted);

  transition: all 0.2s ease;

}



.theme-option.active {

  background: var(--accent);

  color: #fff;

}



/* SWITCH TOGGLE */

.switch {

  position: relative;

  display: inline-block;

  width: 40px;

  height: 22px;

}



.switch input {

  opacity: 0;

  width: 0;

  height: 0;

}



.slider {

  position: absolute;

  cursor: pointer;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  background-color: #ccc;

  transition: .4s;

}



.slider:before {

  position: absolute;

  content: "";

  height: 16px;

  width: 16px;

  left: 3px;

  bottom: 3px;

  background-color: white;

  transition: .4s;

}



input:checked+.slider {

  background-color: var(--accent);

}



input:checked+.slider:before {

  transform: translateX(18px);

}



.slider.round {

  border-radius: 34px;

}



.slider.round:before {

  border-radius: 50%;

}



/* AI PANEL (glass submenu) */

.ai-panel {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  z-index: 10001;

  display: flex;

  flex-direction: column;

  opacity: 0;

  pointer-events: none;

  background: rgba(12, 10, 9, 0.65);

  -webkit-backdrop-filter: blur(16px);

  backdrop-filter: blur(16px);

  transition: opacity 0.25s ease;

}



.ai-panel.active {

  opacity: 1;

  pointer-events: all;

}



.ai-header {

  position: relative;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 20px;

}



.ai-title {

  text-align: center;

  margin: 0;

  color: var(--accent);

  font-size: 24px;

  font-weight: 800;

  letter-spacing: 0.5px;

}



.ai-header .close-btn {

  position: absolute;

  right: 20px;

  top: 50%;

  transform: translateY(-50%);

}



.ai-content {

  display: flex;

  flex-direction: column;

  gap: 14px;

  padding: 0 20px;

  overflow-y: auto;

  flex: 1;

  min-height: 0;

}



.ai-wide-btn {

  height: 72px;

}



/* AI scripts screen */

.ai-scripts-view {

  display: none;

}



.ai-scripts-view.active {

  display: block;

}



.ai-menu-home.hidden {

  display: none;

}



.ai-scripts-top {

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-top: 4px;

  margin-bottom: 12px;

}



.ai-scripts-title {

  color: #fff;

  font-weight: 800;

  letter-spacing: 0.5px;

  opacity: 0.95;

}



.ai-scripts-list {

  display: flex;

  flex-direction: column;

  gap: 12px;

}



.ai-script-item {

  border-radius: 18px;

  overflow: hidden;

  border: 1px solid rgba(255, 255, 255, 0.08);

  background: rgba(255, 255, 255, 0.035);

  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.42);

  backdrop-filter: blur(10px);

  -webkit-backdrop-filter: blur(10px);

}



.ai-script-header {

  display: flex;

  align-items: center;

  gap: 12px;

  padding: 14px 14px;

  cursor: pointer;

  user-select: none;

  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));

}



.ai-script-header:active {

  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));

}



.ai-script-icon {

  width: 46px;

  height: 46px;

  border-radius: 16px;

  display: flex;

  align-items: center;

  justify-content: center;

  background: rgba(0, 0, 0, 0.35);

  border: 1px solid rgba(255, 255, 255, 0.10);

  font-weight: 900;

  letter-spacing: 1px;

  color: #fff;

  flex-shrink: 0;

}



.ai-script-text {

  display: flex;

  flex-direction: column;

  gap: 2px;

  flex: 1;

  min-width: 0;

}



.ai-script-name {

  font-weight: 900;

  font-size: 18px;

  letter-spacing: 0.6px;

  color: #fff;

}



.ai-script-sub {

  font-size: 12px;

  color: rgba(255, 255, 255, 0.62);

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

}



.ai-script-arrow-btn {

  width: 34px;

  height: 34px;

  border-radius: 14px;

  border: 1px solid rgba(255, 255, 255, 0.08);

  background: rgba(0, 0, 0, 0.22);

  color: rgba(255, 255, 255, 0.9);

  cursor: pointer;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

  transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;

}



.ai-script-arrow-btn:hover {

  background: rgba(0, 0, 0, 0.28);

}



.ai-script-arrow-btn:active {

  transform: scale(0.94);

}



.ai-script-arrow-btn svg {

  display: block;

}



.ai-script-item.expanded .ai-script-arrow-btn {

  transform: rotate(180deg);

}



.ai-script-item.expanded .ai-script-arrow-btn:active {

  transform: rotate(180deg) scale(0.94);

}



.ai-script-body {

  max-height: 0;

  overflow: hidden;

  padding: 0 14px;

  opacity: 0;

  transform: translateY(-4px);

  border-top: 1px solid rgba(255, 255, 255, 0.08);

  transition: max-height 0.28s ease, opacity 0.20s ease, transform 0.28s ease, padding 0.28s ease;

}



.ai-script-item.expanded .ai-script-body {

  max-height: 700px;

  overflow-y: auto;

  padding: 14px;

  opacity: 1;

  transform: translateY(0);

}



.ai-form-row {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 12px;

  margin-bottom: 10px;

}



.ai-label {

  font-size: 13px;

  color: rgba(255, 255, 255, 0.70);

  font-weight: 800;

  letter-spacing: 0.2px;

}



.ai-select {

  width: 190px;

  height: 42px;

  border-radius: 14px;

  background: rgba(0, 0, 0, 0.25);

  border: 1px solid rgba(255, 255, 255, 0.10);

  color: #fff;

  padding: 0 12px;

}



.ai-check {

  display: flex;

  align-items: center;

  gap: 12px;

  padding: 12px 12px;

  border-radius: 16px;

  background: rgba(0, 0, 0, 0.16);

  border: 1px solid rgba(255, 255, 255, 0.06);

  margin-bottom: 10px;

}



.ai-check input {

  transform: scale(1.25);

  accent-color: var(--accent);

}



.ai-check span {

  font-weight: 750;

  color: rgba(255, 255, 255, 0.92);

  font-size: 14px;

}



.ai-divider {

  height: 1px;

  background: rgba(255, 255, 255, 0.08);

  margin: 14px 0;

}



.ai-primary {

  width: 100%;

  height: 50px;

  border-radius: 16px;

  border: none;

  background: linear-gradient(135deg, var(--accent), var(--accent-light));

  color: #fff;

  font-weight: 950;

  letter-spacing: 0.6px;

  cursor: pointer;

  box-shadow: 0 14px 40px rgba(var(--accent-rgb), 0.22);

}



.ai-primary:hover {

  transform: translateY(-1px);

  box-shadow: 0 18px 50px rgba(var(--accent-rgb), 0.26);

}



.ai-status {

  margin-top: 10px;

  font-size: 12px;

  color: rgba(255, 255, 255, 0.65);

  text-align: center;

}



.ai-note {

  padding: 12px 12px;

  border-radius: 16px;

  background: rgba(0, 0, 0, 0.16);

  border: 1px solid rgba(255, 255, 255, 0.06);

  color: rgba(255, 255, 255, 0.78);

  font-size: 12px;

  line-height: 1.35;

  margin-bottom: 12px;

}



/* PAYYNUZ SETTINGS (distinct from KZN controls) */

.pyn-segment {

  display: flex;

  gap: 10px;

  padding: 8px;

  border-radius: 18px;

  background: linear-gradient(180deg, rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0.18));

  border: 1px solid rgba(255, 255, 255, 0.10);

  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);

  margin-bottom: 12px;

}



.pyn-seg-btn {

  flex: 1;

  height: 38px;

  border-radius: 14px;

  border: 1px solid rgba(255, 255, 255, 0.10);

  background: rgba(255, 255, 255, 0.03);

  color: rgba(255, 255, 255, 0.75);

  font-weight: 950;

  letter-spacing: 0.6px;

  cursor: pointer;

  transition: transform 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;

}



.pyn-seg-btn:active {

  transform: scale(0.97);

}



.pyn-seg-btn.active {

  color: #fff;

  background: linear-gradient(135deg, rgba(60, 255, 220, 0.18), rgba(var(--accent-rgb), 0.55));

  box-shadow: 0 14px 36px rgba(60, 255, 220, 0.10);

  border-color: rgba(60, 255, 220, 0.20);

}



.pyn-box {

  border-radius: 18px;

  padding: 12px;

  background: rgba(0, 0, 0, 0.14);

  border: 1px solid rgba(255, 255, 255, 0.06);

  margin-bottom: 12px;

}



.pyn-row {

  display: flex;

  flex-direction: column;

  gap: 10px;

  margin-bottom: 12px;

}



.pyn-row-title {

  font-size: 12px;

  font-weight: 950;

  letter-spacing: 0.6px;

  color: rgba(255, 255, 255, 0.70);

}



.pyn-chips {

  display: flex;

  gap: 10px;

}



.pyn-chip {

  flex: 1;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 10px;

  padding: 10px 12px;

  border-radius: 16px;

  background: rgba(255, 255, 255, 0.03);

  border: 1px solid rgba(255, 255, 255, 0.08);

  cursor: pointer;

}



.pyn-chip input {

  display: none;

}



.pyn-chip-label {

  font-weight: 900;

  color: rgba(255, 255, 255, 0.92);

  font-size: 13px;

}



.pyn-dot {

  width: 14px;

  height: 14px;

  border-radius: 999px;

  border: 2px solid rgba(255, 255, 255, 0.25);

}



.pyn-chip input:checked~.pyn-dot {

  background: var(--accent);

  border-color: var(--accent);

  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.18);

}



.pyn-switches {

  display: flex;

  flex-direction: column;

  gap: 10px;

}



.pyn-switch {

  display: flex;

  align-items: center;

  gap: 10px;

  padding: 10px 12px;

  border-radius: 16px;

  background: rgba(255, 255, 255, 0.02);

  border: 1px solid rgba(255, 255, 255, 0.06);

  cursor: pointer;

}



.pyn-switch input {

  display: none;

}



.pyn-switch-text {

  font-weight: 850;

  color: rgba(255, 255, 255, 0.92);

  font-size: 13px;

}



.pyn-switch-ui {

  width: 42px;

  height: 24px;

  border-radius: 999px;

  background: rgba(255, 255, 255, 0.10);

  border: 1px solid rgba(255, 255, 255, 0.10);

  position: relative;

  flex-shrink: 0;

}



.pyn-switch-ui::after {

  content: '';

  width: 18px;

  height: 18px;

  border-radius: 999px;

  background: rgba(255, 255, 255, 0.85);

  position: absolute;

  top: 50%;

  left: 3px;

  transform: translateY(-50%);

  transition: transform 0.18s ease;

}



.pyn-switch input:checked~.pyn-switch-ui {

  background: linear-gradient(135deg, var(--accent), rgba(60, 255, 220, 0.35));

  border-color: rgba(255, 255, 255, 0.14);

}



.pyn-switch input:checked~.pyn-switch-ui::after {

  transform: translate(18px, -50%);

}



.pyn-hint {

  margin-top: 10px;

  font-size: 11px;

  color: rgba(255, 255, 255, 0.58);

  text-align: center;

}



/* DOSKA */

.shame-overlay {

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: rgba(0, 0, 0, 0.95);

  z-index: 15000;

  /* High z-index to appear above all profile elements */

  display: flex;

  flex-direction: column;

  opacity: 0;

  pointer-events: none;

  transition: opacity 0.3s ease;

  backdrop-filter: blur(10px);

}



.shame-overlay.active {

  opacity: 1;

  pointer-events: all;

}



.shame-header {

  position: relative;

  display: flex;

  justify-content: center;

  align-items: center;

  padding: 20px;

  margin-bottom: 10px;

}



.shame-header h2 {

  margin: 0;

  font-size: 24px;

  color: #ff4d4d;

  font-weight: 800;

  letter-spacing: 1px;

  text-transform: uppercase;

  text-align: center;

}



.shame-header .close-btn {

  position: absolute;

  right: 20px;

  top: 50%;

  transform: translateY(-50%);

}



.highlights-container {

  display: flex;

  flex: 1;

  flex-wrap: wrap;

  justify-content: center;

  align-content: flex-start;

  gap: 20px;

  padding: 20px;

  overflow-y: auto;

  position: relative;

  z-index: 10;

}

.highlights-container:empty {

  display: none;

}



.highlight-item {

  display: flex;

  flex-direction: column;

  align-items: center;

  cursor: pointer;

  width: 80px;

}



.highlight-ring {

  width: 74px;

  height: 74px;

  border-radius: 50%;

  padding: 3px;

  background: linear-gradient(45deg, #ff4d4d, var(--accent));

  display: flex;

  align-items: center;

  justify-content: center;

  transition: transform 0.2s;

}



.highlight-item:hover .highlight-ring {

  transform: scale(1.05);

}



.highlight-img {

  width: 68px;

  height: 68px;

  border-radius: 50%;

  border: 3px solid #000;

  object-fit: cover;

  background: #222;

}



.highlight-title {

  margin-top: 6px;

  font-size: 12px;

  text-align: center;

  color: #fff;

  max-width: 80px;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

}



/* [НОВОЕ] Пустое меню для мессенджера */

.messenger-overlay {

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: rgba(0, 0, 0, 0.95);

  z-index: 15000;

  display: flex;

  flex-direction: column;

  opacity: 0;

  pointer-events: none;

  transition: opacity 0.3s ease;

  backdrop-filter: blur(10px);

}



.messenger-overlay.active {

  opacity: 1;

  pointer-events: all;

}



.messenger-header {

  position: relative;

  display: flex;

  align-items: center;

  padding: 15px 20px;

  border-bottom: 1px solid rgba(255, 255, 255, 0.1);

  gap: 15px;

}



.messenger-header .messenger-title-wrapper {

  flex-grow: 1;

}



/* [FIX] Чтобы заголовок занимал место */

.edit-chats-btn {

  background: rgba(255, 255, 255, 0.06);

  border: 1px solid rgba(255, 255, 255, 0.10);

  cursor: pointer;

  width: 38px;

  height: 38px;

  border-radius: 14px;

  padding: 0;

  line-height: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  transition: transform 0.15s ease, background 0.15s ease;

}



.edit-chats-btn svg {

  width: 20px;

  height: 20px;

  stroke: rgba(255, 255, 255, 0.85);

}



.edit-chats-btn:hover {

  background: rgba(255, 255, 255, 0.10);

  transform: scale(1.06);

}



.new-message-btn {

  background: rgba(255, 255, 255, 0.06);

  border: 1px solid rgba(255, 255, 255, 0.10);

  cursor: pointer;

  width: 38px;

  height: 38px;

  border-radius: 14px;

  padding: 0;

  line-height: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  transition: transform 0.15s ease, background 0.15s ease;

  opacity: 0.9;

}



.new-message-btn svg {

  width: 22px;

  height: 22px;

  stroke: rgba(255, 255, 255, 0.88);

}



.new-message-btn:hover {

  background: rgba(255, 255, 255, 0.10);

  transform: scale(1.06);

  opacity: 1;

}



.new-message-btn img {

  width: 22px;

  height: 22px;

}



/* Messenger: make Settings button clearly visible + glassy */

#btnOpenChatSettings {

  border-radius: 10px;

  background: rgba(255, 255, 255, 0.06);

  border: 1px solid rgba(255, 255, 255, 0.10);

  transition: transform 0.15s ease, background 0.15s ease;

}



#btnOpenChatSettings svg {

  stroke: rgba(255, 255, 255, 0.92);

}



#btnOpenChatSettings:hover {

  background: rgba(255, 255, 255, 0.10);

  transform: scale(1.06);

}



/* Chat Settings modal: premium glass (less "android") */

#chatSettingsModal,
#forgotPasswordModal,
#accountMgmtModal {

  background: rgba(12, 10, 9, 0.72);

  -webkit-backdrop-filter: blur(18px);

  backdrop-filter: blur(18px);

}



#chatSettingsModal .chat-settings-header {

  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));

  border-bottom: 1px solid rgba(255, 255, 255, 0.10);

}



#chatSettingsModal .chat-settings-header-title {

  margin: 0;

  font-weight: 900;

  letter-spacing: 0.3px;

  color: rgba(255, 255, 255, 0.96);

}



#chatSettingsModal .chat-settings-body,
#accountMgmtModal .chat-settings-body,
#forgotPasswordModal .chat-settings-body {

  padding: 18px;

  overflow-y: auto;

  flex: 1;

}



#chatSettingsModal .chat-settings-profile {

  display: flex;

  align-items: center;

  gap: 14px;

  padding: 14px;

  border-radius: 18px;

  background: rgba(255, 255, 255, 0.04);

  border: 1px solid rgba(255, 255, 255, 0.06);

  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);

  margin-bottom: 16px;

}



#chatSettingsModal .chat-settings-profile-text {

  min-width: 0;

}



#chatSettingsModal .chat-settings-title {

  font-weight: 900;

  font-size: 16px;

  color: rgba(255, 255, 255, 0.96);

}



#chatSettingsModal .chat-settings-subtitle {

  margin-top: 3px;

  font-size: 12px;

  color: rgba(255, 255, 255, 0.62);

}



#chatSettingsModal .chat-settings-danger-link {

  margin-top: 8px;

  background: none;

  border: none;

  padding: 0;

  cursor: pointer;

  color: #ff4757;

  font-weight: 700;

  font-size: 12px;

}



#chatSettingsModal .chat-settings-danger-link:hover {

  text-decoration: underline;

}



/* Chat settings: Avatar "Preview → Apply" actions */

.chat-settings-actions {

  display: flex;

  gap: 10px;

  margin-top: 12px;

}



.chat-settings-actions.hidden {

  display: none;

}



.chat-settings-apply {

  flex: 1;

  height: 40px;

  border-radius: 12px;

  border: none;

  background: linear-gradient(135deg, var(--accent), var(--accent-light));

  color: #fff;

  font-weight: 700;

  cursor: pointer;

}



.chat-settings-cancel {

  flex: 1;

  height: 40px;

  border-radius: 12px;

  border: 1px solid rgba(255, 255, 255, 0.14);

  background: rgba(255, 255, 255, 0.06);

  color: #fff;

  font-weight: 600;

  cursor: pointer;

}



.chat-settings-hint {

  margin-top: 8px;

  font-size: 12px;

  color: rgba(255, 255, 255, 0.62);

}



.chat-settings-hint.hidden {

  display: none;

}



.messenger-header .close-btn {

  position: static;

}



.messenger-body {

  flex-grow: 1;

  overflow: hidden;

  display: flex;

  position: relative;

}



.chat-list-container {

  width: 35%;

  border-right: 1px solid rgba(255, 255, 255, 0.1);

}



.chat-list-container {

  width: 35%;

  display: flex;

  flex-direction: column;

  border-right: 1px solid rgba(255, 255, 255, 0.1);

  overflow-y: auto;

}



/* [FIX] Возвращаем разделение */

.chat-list-header {

  padding: 10px 15px;

  font-weight: 600;

  border-bottom: 1px solid rgba(255, 255, 255, 0.1);

}



.chat-window-container {

  width: 65%;

  display: flex;

  flex-direction: column;

}



/* [FIX] Возвращаем разделение */

.chat-window-placeholder {

  color: var(--muted);

  font-size: 14px;

}



.chat-window-container .chat-window-placeholder {

  margin: auto;

}



/* [FIX] Центрируем плейсхолдер */



/* Messenger: Voice mode (Discord-like UI stub) */

#btnVoiceMode.active {

  background: rgba(var(--accent-rgb), 0.90);

  border-color: rgba(var(--accent-rgb), 0.55);

  box-shadow: 0 14px 30px rgba(var(--accent-rgb), 0.22);

}



/* [TG-STYLE] Mobile navigation for CEP */

html.is-cep .chat-list-container {

  width: 100% !important;

  border-right: none !important;

  position: absolute;

  inset: 0;

  z-index: 1;

  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  background: #0C0A09;

}



html.is-cep .chat-window-container {

  width: 100% !important;

  position: absolute;

  inset: 0;

  z-index: 2;

  transform: translateX(100%);

  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  background: #0C0A09;

}



/* When a chat is active in CEP mode, slide the chat window in */

html.is-cep .messenger-overlay.chat-open .chat-window-container {

  transform: translateX(0);

}



html.is-cep .messenger-overlay.chat-open .chat-list-container {

  transform: translateX(-20%);

}



.chat-back-btn {

  display: none;

  background: none;

  border: none;

  color: #fff;

  cursor: pointer;

  padding: 8px;

  margin-right: 4px;

  border-radius: 50%;

  transition: background 0.2s;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

}



.chat-back-btn:hover {

  background: rgba(255, 255, 255, 0.1);

}



html.is-cep .chat-back-btn {

  display: flex;

}



.chat-list-container,

.chat-window-container {

  transition: opacity 0.28s ease, transform 0.34s cubic-bezier(0.2, 0.9, 0.2, 1);

}



.messenger-overlay.voice-mode .chat-list-container,

.messenger-overlay.voice-mode .chat-window-container {

  opacity: 0;

  pointer-events: none;

}



.tg-voice-overlay {

  position: absolute;

  inset: 0;

  display: flex;

  gap: 12px;

  padding: 14px;

  opacity: 0;

  pointer-events: none;

  transform: translateY(10px) scale(0.985);

  transition: opacity 0.28s ease, transform 0.36s cubic-bezier(0.2, 0.9, 0.2, 1);

  overflow: visible;

}



.messenger-overlay.voice-mode .tg-voice-overlay {

  opacity: 1;

  pointer-events: auto;

  transform: translateY(0) scale(1);

}



/* DS Voice: compact layout for narrow CEP panels (opt-in via Settings) */

html.kzn-voice-layout-compact .tg-voice-overlay {

  flex-direction: column;

  padding: 8px;

  gap: 8px;

}



html.kzn-voice-layout-compact .tg-voice-left {

  flex: 0 0 auto;

  width: 100%;

  height: auto;

  flex-direction: row;

  align-items: center;

  justify-content: space-between;

  gap: 10px;

}



html.kzn-voice-layout-compact .tg-voice-chat-icons {

  flex: 1;

  width: auto;

  flex-direction: row;

  align-items: center;

  overflow-x: auto;

  overflow-y: hidden;

  padding: 0;

}



html.kzn-voice-layout-compact .tg-voice-chat-icon {

  width: 44px;

  height: 44px;

}



html.kzn-voice-layout-compact .tg-voice-plus {

  width: 48px;

  height: 48px;

}



html.kzn-voice-layout-compact #voiceOverlay .tg-voice-left-actions {

  flex-direction: row;

  padding: 0;

  gap: 8px;

}



html.kzn-voice-layout-compact .tg-voice-channel-panel {

  flex: 0 0 auto;

  width: 100%;

  height: auto;

  max-height: 36%;

  min-height: 140px;

  padding: 10px;

  gap: 8px;

}



html.kzn-voice-layout-compact .tg-voice-stage {

  flex: 1;

  width: 100%;

  min-height: 0;

}



html.kzn-voice-layout-compact .tg-voice-stage-card {

  min-height: 0;

  padding: 12px;

}



html.kzn-voice-layout-compact .tg-voice-channel-title {

  font-size: 11px;

}



html.kzn-voice-layout-compact .tg-voice-channel-sub {

  display: none;

}



html.kzn-voice-layout-compact .tg-voice-section-title {

  font-size: 11px;

  padding: 2px 4px;

}



html.kzn-voice-layout-compact .tg-voice-stage-name {

  font-size: 16px;

}



html.kzn-voice-layout-compact .tg-voice-stage-sub {

  display: none;

}



html.kzn-voice-layout-compact .tg-voice-text-chat {

  gap: 10px;

}



html.kzn-voice-layout-compact .tg-voice-text-messages {

  padding: 8px;

}



html.kzn-voice-layout-compact .tg-voice-text-input {

  gap: 8px;

}



html.kzn-voice-layout-compact .tg-voice-text-input input {

  height: 40px;

  border-radius: 12px;

}



html.kzn-voice-layout-compact #tgVoiceTextAttach {

  width: 40px;

  height: 40px;

  border-radius: 12px;

}



html.kzn-voice-layout-compact .tg-voice-text-input button {

  width: 48px;

  height: 40px;

  border-radius: 12px;

}



html.kzn-voice-layout-compact .tg-voice-text-body {

  font-size: 13px;

}



html.kzn-voice-layout-compact .tg-voice-text-channel,

html.kzn-voice-layout-compact .tg-voice-room {

  padding: 10px 10px;

  border-radius: 12px;

}



/* Voice overlay: left chat circles + middle channel list */

.tg-voice-left {

  flex: 0 0 66px;

  height: 100%;

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 12px;

  overflow: visible;

}



.tg-voice-chat-icons {

  flex: 1;

  width: 66px;

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 12px;

  overflow-x: visible;

  overflow-y: auto;

  padding: 6px 7px;

}



.tg-voice-chat-icon {

  width: 52px;

  height: 52px;

  border-radius: 999px;

  padding: 0;

  border: 1px solid rgba(255, 255, 255, 0.14);

  background: rgba(255, 255, 255, 0.05);

  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.35);

  cursor: pointer;

  overflow: hidden;

  transition: transform 0.16s ease, box-shadow 0.16s ease;

}



.tg-voice-chat-icon img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

}



.tg-voice-chat-icon:hover {

  transform: scale(1.05);

}



.tg-voice-chat-icon.active {

  border: 2px solid rgba(var(--accent-rgb), 0.95);

  box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.45), 0 18px 50px rgba(var(--accent-rgb), 0.18);

}



.tg-voice-plus {

  width: 56px;

  height: 56px;

  border-radius: 999px;

  border: 1px solid rgba(255, 255, 255, 0.16);

  background: linear-gradient(135deg, var(--accent), var(--accent-light));

  color: #fff;

  font-weight: 900;

  font-size: 28px;

  line-height: 1;

  cursor: pointer;

  box-shadow: 0 16px 44px rgba(var(--accent-rgb), 0.18);

  transition: transform 0.16s ease, box-shadow 0.16s ease;

}



.tg-voice-plus:hover {

  transform: scale(1.08);

  box-shadow: 0 0 18px rgba(var(--accent-rgb), 0.5), 0 0 40px rgba(var(--accent-rgb), 0.25), 0 18px 60px rgba(var(--accent-rgb), 0.22);

}



.tg-voice-mini-plus {

  width: 30px;

  height: 30px;

  border-radius: 12px;

  border: 1px solid rgba(255, 255, 255, 0.12);

  background: rgba(255, 255, 255, 0.06);

  color: rgba(255, 255, 255, 0.92);

  font-weight: 900;

  font-size: 18px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  transition: transform 0.16s ease, background 0.16s ease;

}



.tg-voice-mini-plus:hover {

  transform: scale(1.08);

  background: rgba(var(--accent-rgb), 0.18);

  box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.35), 0 0 22px rgba(var(--accent-rgb), 0.12);

}



.tg-voice-channel-panel {

  position: relative;

  flex: 0 0 35%;

  height: 100%;

  border-radius: 18px;

  background: rgba(255, 255, 255, 0.04);

  border: 1px solid rgba(255, 255, 255, 0.08);

  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.45);

  backdrop-filter: blur(10px);

  -webkit-backdrop-filter: blur(10px);

  padding: 12px;

  display: flex;

  flex-direction: column;

  gap: 10px;

  overflow: visible;

}

.tg-voice-channel-list {

  overflow-y: auto;

  overflow-x: visible;

  flex: 1;

  min-height: 0;

}



.tg-voice-channel-header {

  padding: 2px 6px 6px 6px;

}



.tg-voice-channel-title {

  font-weight: 900;

  letter-spacing: 0.8px;

  font-size: 12px;

  color: rgba(255, 255, 255, 0.78);

}



.tg-voice-channel-sub {

  margin-top: 4px;

  font-size: 12px;

  color: rgba(255, 255, 255, 0.70);

}



.tg-voice-channel-list {

  flex: 1;

  display: flex;

  flex-direction: column;

  gap: 10px;

  overflow: auto;

  padding: 0 2px 2px 2px;

}



.tg-voice-empty {

  padding: 14px 12px;

  border-radius: 14px;

  border: 1px dashed rgba(255, 255, 255, 0.16);

  background: rgba(255, 255, 255, 0.04);

  color: rgba(255, 255, 255, 0.70);

  font-weight: 700;

  text-align: center;

}



.tg-voice-channel {

  width: 100%;

  text-align: left;

  border: 1px solid rgba(255, 255, 255, 0.10);

  background: rgba(255, 255, 255, 0.05);

  color: rgba(255, 255, 255, 0.92);

  border-radius: 14px;

  padding: 12px 12px;

  font-weight: 800;

  cursor: pointer;

  transition: transform 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;

}



.tg-voice-channel:hover {

  transform: scale(1.01);

  background: rgba(255, 255, 255, 0.08);

}



.tg-voice-channel.active {

  background: linear-gradient(135deg, var(--accent), var(--accent-light));

  border-color: rgba(255, 255, 255, 0.18);

  box-shadow: 0 16px 34px rgba(var(--accent-rgb), 0.18);

}



/* Create modal */

.tg-voice-create-backdrop {

  position: absolute;

  inset: 0;

  background: rgba(0, 0, 0, 0.55);

  display: flex;

  align-items: center;

  justify-content: center;

  z-index: 3000;

  backdrop-filter: blur(10px);

  -webkit-backdrop-filter: blur(10px);

}



.tg-voice-create-card {

  width: 92%;

  max-width: 340px;

  border-radius: 18px;

  background: rgba(18, 18, 20, 0.96);

  border: 1px solid rgba(255, 255, 255, 0.10);

  box-shadow: 0 22px 80px rgba(0, 0, 0, 0.55);

  padding: 16px;

  display: flex;

  flex-direction: column;

  gap: 12px;

}



.tg-voice-create-title {

  font-weight: 900;

  font-size: 16px;

  letter-spacing: 0.2px;

}



.tg-voice-create-field label {

  display: block;

  font-size: 12px;

  color: rgba(255, 255, 255, 0.70);

  margin-bottom: 6px;

  font-weight: 800;

}



.tg-voice-create-field input {

  width: 100%;

  height: 42px;

  border-radius: 14px;

  border: 1px solid rgba(255, 255, 255, 0.12);

  background: rgba(255, 255, 255, 0.06);

  color: #fff;

  padding: 0 12px;

  outline: none;

}



.tg-voice-create-row {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 12px;

}



.tg-voice-create-seg {

  display: flex;

  border-radius: 999px;

  border: 1px solid rgba(255, 255, 255, 0.12);

  background: rgba(255, 255, 255, 0.06);

  overflow: hidden;

}



.tg-voice-create-seg .seg {

  border: none;

  background: transparent;

  color: rgba(255, 255, 255, 0.80);

  font-weight: 900;

  padding: 10px 12px;

  cursor: pointer;

}



.tg-voice-create-seg .seg.active {

  background: linear-gradient(135deg, var(--accent), var(--accent-light));

  color: #fff;

}



.tg-voice-create-actions {

  display: flex;

  gap: 10px;

}



.tg-voice-create-cancel {

  flex: 1;

  height: 42px;

  border-radius: 14px;

  border: 1px solid rgba(255, 255, 255, 0.14);

  background: rgba(255, 255, 255, 0.06);

  color: #fff;

  font-weight: 800;

  cursor: pointer;

}



.tg-voice-create-ok {

  flex: 1;

  height: 42px;

  border-radius: 14px;

  border: none;

  background: linear-gradient(135deg, var(--accent), var(--accent-light));

  color: #fff;

  font-weight: 900;

  cursor: pointer;

}



.tg-voice-sidebar {

  flex: 0 0 35%;

  height: 100%;

  border-radius: 18px;

  background: rgba(255, 255, 255, 0.04);

  border: 1px solid rgba(255, 255, 255, 0.08);

  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.45);

  backdrop-filter: blur(10px);

  -webkit-backdrop-filter: blur(10px);

  padding: 12px;

  display: flex;

  flex-direction: column;

  gap: 10px;

  overflow: auto;

}



.tg-voice-sidebar-title {

  font-weight: 900;

  letter-spacing: 0.8px;

  font-size: 12px;

  color: rgba(255, 255, 255, 0.78);

  opacity: 0.9;

  padding: 2px 6px;

}



.tg-voice-room {

  width: 100%;

  text-align: left;

  border: 1px solid rgba(255, 255, 255, 0.10);

  background: rgba(255, 255, 255, 0.05);

  color: rgba(255, 255, 255, 0.92);

  border-radius: 14px;

  padding: 12px 12px;

  font-weight: 800;

  cursor: pointer;

  transition: transform 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;

}



.tg-voice-room:hover {

  transform: scale(1.02);

  background: rgba(255, 255, 255, 0.08);

}



.tg-voice-room.active {

  background: linear-gradient(135deg, var(--accent), var(--accent-light));

  border-color: rgba(255, 255, 255, 0.18);

  box-shadow: 0 16px 34px rgba(var(--accent-rgb), 0.18);

}



.tg-voice-stage {

  flex: 1;

  height: 100%;

  display: flex;

}



.tg-voice-stage-card {

  flex: 1;

  border-radius: 18px;

  background: rgba(255, 255, 255, 0.04);

  border: 1px solid rgba(255, 255, 255, 0.08);

  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.45);

  backdrop-filter: blur(10px);

  -webkit-backdrop-filter: blur(10px);

  padding: 16px;

  display: flex;

  flex-direction: column;

  gap: 14px;

}



.tg-voice-stage-name {

  font-size: 18px;

  font-weight: 900;

  letter-spacing: 0.2px;

}



.tg-voice-stage-sub {

  margin-top: 6px;

  font-size: 12px;

  color: rgba(255, 255, 255, 0.70);

}



.tg-voice-controls {

  margin-top: auto;

  display: flex;

  align-items: center;

  gap: 10px;

}



.tg-voice-cta {

  flex: 1;

  height: 44px;

  border-radius: 14px;

  border: none;

  background: linear-gradient(135deg, var(--accent), var(--accent-light));

  color: #fff;

  font-weight: 900;

  cursor: pointer;

  transition: transform 0.16s ease, box-shadow 0.16s ease;

}



.tg-voice-cta:hover {

  transform: scale(1.02);

  box-shadow: 0 16px 34px rgba(var(--accent-rgb), 0.18);

}



.tg-voice-ctl {

  width: 44px;

  height: 44px;

  border-radius: 14px;

  border: 1px solid rgba(255, 255, 255, 0.12);

  background: rgba(255, 255, 255, 0.06);

  color: #fff;

  cursor: pointer;

  font-size: 16px;

  transition: transform 0.16s ease, background 0.16s ease;

}



.tg-voice-ctl:hover {

  transform: scale(1.03);

  background: rgba(255, 255, 255, 0.10);

}



/* [НОВОЕ] Стили для списка чатов */

.chat-list-item {

  display: flex;

  align-items: center;

  gap: 12px;

  padding: 12px 15px;

  cursor: pointer;

  border-bottom: 1px solid rgba(255, 255, 255, 0.05);

  transition: background-color 0.2s;

}



.chat-list-item:hover {

  background: rgba(255, 255, 255, 0.05);

}



.chat-list-item.active {

  background: var(--accent);

}



.chat-avatar {

  width: 45px;

  height: 45px;

  border-radius: 50%;

  object-fit: cover;

  flex-shrink: 0;

}



.chat-details {

  flex-grow: 1;

  overflow: hidden;

}



.chat-name {

  font-weight: 600;

  white-space: nowrap;

}



/* [FIX] CEP Panel: Compact Horizontal Layout */

html.is-cep .chat-list-item {

  flex-direction: row !important;

  align-items: center;

  padding: 10px 12px;

  gap: 12px;

  height: auto;

  min-height: 64px;

  position: relative;

}



html.is-cep .chat-avatar {

  width: 44px;

  height: 44px;

  margin: 0;

  flex-shrink: 0;

}



html.is-cep .chat-details {

  flex: 1;

  min-width: 0;

  display: flex;

  flex-direction: column;

  align-items: flex-start;

  padding: 0;

  gap: 2px;

}



html.is-cep .chat-name {

  font-size: 16px;

  font-weight: 800;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

  flex: 0 1 auto;

  min-width: 0;

  margin: 0;

}



html.is-cep .chat-last-message,

html.is-cep .tg-chat-id {

  display: none !important;

}



/* Menu button (3 dots) - positioned to the right */

html.is-cep .tg-chat-row-menu-btn {

  position: static !important;

  margin: 0 0 0 auto !important;

  width: 24px !important;

  height: 24px !important;

  font-size: 12px !important;

  flex-shrink: 0;

  opacity: 0;

  pointer-events: auto;

  z-index: 10;

}



html.is-cep .chat-list-item:hover .tg-chat-row-menu-btn {

  opacity: 1 !important;

}



/* Badges - keep them compact */

html.is-cep .chat-details>div {

  gap: 4px;

}



html.is-cep .chat-details .unread-badge,

html.is-cep .chat-details .mention-badge {

  transform: scale(0.85);

}



.messenger-overlay.edit-mode .chat-list-item::before {

  content: '';

  display: block;

  width: 18px;

  height: 18px;

  border: 2px solid #888;

  border-radius: 50%;

  margin-right: 5px;

  flex-shrink: 0;

  transition: all 0.2s;

}



.messenger-overlay.edit-mode .chat-list-item.selected-for-deletion::before {

  background-color: #ff4d4d;

  border-color: #ff4d4d;

}



.chat-last-message {

  font-size: 14px;

  color: var(--muted);

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

}



.chat-list-item.unread .chat-last-message {

  color: #fff;

  font-weight: bold;

}



.chat-list-item.active .chat-last-message {

  color: rgba(255, 255, 255, 0.8);

}



.chat-list-placeholder {

  color: var(--muted);

  font-size: 14px;

  text-align: center;

  padding: 20px;

}



/* Small debug-ish chat id label in the chat list (helps deleting 'no-user' chats). */

.tg-chat-id {

  margin-top: 2px;

  font-size: 10px;

  line-height: 12px;

  letter-spacing: 0.02em;

  color: rgba(255, 255, 255, 0.42);

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

  opacity: 0;

  transform: translateY(-2px);

  transition: opacity 140ms ease, transform 140ms ease;

}



body.light-theme .tg-chat-id {

  color: rgba(0, 0, 0, 0.38);

}



/* Show chat id only when it helps (hover or bulk-edit mode). */

.chat-list-item:hover .tg-chat-id {

  opacity: 1;

  transform: translateY(0px);

}



.messenger-overlay.edit-mode .tg-chat-id {

  opacity: 1;

  transform: translateY(0px);

}



/* [НОВОЕ] Стили для окна переписки */

.chat-window-header {

  display: flex;

  align-items: center;

  gap: 12px;

  padding: 10px 20px;

  border-bottom: 1px solid rgba(255, 255, 255, 0.1);

  flex-shrink: 0;

}



.chat-window-header-avatar {

  width: 40px;

  height: 40px;

  border-radius: 50%;

  object-fit: cover;

}



.chat-window-header-name {

  font-weight: 600;

  font-size: 16px;

}



.clear-history-btn {

  margin-left: auto;

  background: none;

  border: none;

  cursor: pointer;

  padding: 6px;

  line-height: 1;

  color: rgba(255, 255, 255, 0.78);

  opacity: 0.95;

}



.clear-history-btn svg {

  stroke: currentColor;

}



.clear-history-btn:hover {

  color: #ff4d4d;

}



.chat-window-messages {

  flex-grow: 1;

  padding: 20px;

  overflow-y: auto;

  display: flex;

  flex-direction: column;

}



/* flex-direction: column для правильного скролла */

.message-bubble {

  max-width: 75%;

  padding: 10px 15px;

  border-radius: 18px;

  margin-bottom: 10px;

  line-height: 1.4;

  word-wrap: break-word;

}



.message-bubble.incoming {

  background: #262626;

  border-bottom-left-radius: 4px;

  align-self: flex-start;

}



.message-bubble.outgoing {

  background: var(--accent);

  border-bottom-right-radius: 4px;

  align-self: flex-end;

  color: #fff;

}



.chat-window-input-area {

  display: flex;

  align-items: center;

  gap: 15px;

  padding: 15px 20px;

  border-top: 1px solid rgba(255, 255, 255, 0.1);

  flex-shrink: 0;

}



/* Chat list bulk actions bar (edit-mode) */

#tgChatBulkBar {

  position: fixed;

  left: 0;

  right: 0;

  bottom: 14px;

  z-index: 99999;

  display: none;

  justify-content: center;

  pointer-events: none;

}



#tgChatBulkBar .tg-chat-bulk-card {

  pointer-events: auto;

  display: flex;

  align-items: center;

  gap: 10px;

  padding: 10px 12px;

  border-radius: 18px;

  background: rgba(18, 18, 20, 0.92);

  border: 1px solid rgba(255, 255, 255, 0.12);

  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.55);

  backdrop-filter: blur(14px);

  -webkit-backdrop-filter: blur(14px);

}



html.is-cep #tgChatBulkBar .tg-chat-bulk-card {

  backdrop-filter: none !important;

  -webkit-backdrop-filter: none !important;

  background: rgba(18, 18, 20, 0.92) !important;

}



#tgChatBulkBar .tg-chat-bulk-count {

  min-width: 26px;

  height: 26px;

  border-radius: 999px;

  display: flex;

  align-items: center;

  justify-content: center;

  font-weight: 900;

  font-size: 12px;

  background: rgba(255, 255, 255, 0.08);

  border: 1px solid rgba(255, 255, 255, 0.12);

  color: #fff;

}



#tgChatBulkBar .tg-chat-bulk-btn {

  height: 34px;

  padding: 0 12px;

  border-radius: 12px;

  border: 1px solid rgba(255, 255, 255, 0.14);

  background: rgba(255, 255, 255, 0.06);

  color: #fff;

  font-weight: 900;

  cursor: pointer;

}



#tgChatBulkBar .tg-chat-bulk-btn:hover {

  background: rgba(255, 255, 255, 0.10);

}



#tgChatBulkBar .tg-chat-bulk-btn.danger {

  border: none;

  background: rgba(255, 77, 77, 0.18);

  color: #ff8b8b;

}



#tgChatBulkBar .tg-chat-bulk-btn.danger:hover {

  background: rgba(255, 77, 77, 0.26);

}



#tgChatBulkBar .tg-chat-bulk-btn.ghost {

  background: transparent;

}



.chat-message-sticker {

  max-width: 120px;

  max-height: 120px;

  display: block;

  border-radius: 8px;

}



/* === 2. АДАПТИВНОСТЬ ЧАТА === */

/* Кнопки не сжимаются */

.laptop-menu-container,

.chat-window-send-btn {

  flex-shrink: 0;

}



/* [НОВОЕ] Стили для нового ввода чата */

.chat-input-wrapper {

  position: relative;

  display: flex;

  align-items: center;

  gap: 8px;

  /* Чуть меньше отступ */

  width: 100%;

  min-width: 0;

  /* Важно для flex контейнеров */

}



.laptop-menu-container {

  position: relative;

  display: flex;

  align-items: center;

}



.laptop-btn {

  background: none;

  border: none;

  cursor: pointer;

  color: var(--muted);

  transition: color 0.2s, transform 0.2s;

  padding: 5px;

}



.laptop-btn:hover {

  color: #fff;

  transform: scale(1.1);

}



.laptop-btn svg {

  width: 28px;

  height: 28px;

}



/* Всплывающие мини-кнопки */

.mini-actions-popup {

  position: absolute;

  bottom: 45px;

  left: -5px;

  display: flex;

  flex-direction: column;

  gap: 10px;

  opacity: 0;

  pointer-events: none;

  transform: translateY(10px);

  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);

  background: rgba(20, 20, 20, 0.9);

  padding: 8px;

  border-radius: 20px;

  border: 1px solid rgba(255, 255, 255, 0.1);

  z-index: 100;

}



.laptop-menu-container:hover .mini-actions-popup,

.mini-actions-popup:hover {

  opacity: 1;

  pointer-events: all;

  transform: translateY(0);

  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);

  background: rgba(20, 20, 20, 0.95);

}



.mini-btn {

  width: 36px;

  height: 36px;

  border-radius: 50%;

  border: none;

  background: rgba(255, 255, 255, 0.1);

  color: #fff;

  cursor: pointer;

  display: flex;

  align-items: center;

  justify-content: center;

  transition: background 0.2s, transform 0.2s;

}



.mini-btn:hover {

  background: var(--accent);

  transform: scale(1.15);

}



.mini-btn svg {

  width: 18px;

  height: 18px;

}



/* Анимация записи голоса */

.recording-indicator {

  position: absolute;

  left: 60px;

  color: #ff4d4d;

  font-weight: bold;

  font-size: 12px;

  display: none;

  align-items: center;

  gap: 5px;

  animation: pulse 1s infinite;

  z-index: 10;

  background: rgba(0, 0, 0, 0.7);

  padding: 2px 6px;

  border-radius: 4px;

}



@keyframes pulse {

  0% {

    opacity: 0.5;

  }



  50% {

    opacity: 1;

  }



  100% {

    opacity: 0.5;

  }

}



/* Окно стикеров */

.sticker-picker-overlay {

  position: absolute;

  bottom: 70px;

  left: 20px;

  width: 250px;

  background: #1c1c1c;

  border: 1px solid #333;

  border-radius: 12px;

  padding: 10px;

  display: none;

  flex-direction: column;

  gap: 10px;

  z-index: 200;

  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);

}



.sticker-picker-overlay.active {

  display: flex;

}



.sticker-grid {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 5px;

  max-height: 150px;

  overflow-y: auto;

}



.sticker-option {

  width: 100%;

  aspect-ratio: 1;

  object-fit: contain;

  cursor: pointer;

  border-radius: 4px;

}



.sticker-option:hover {

  background: rgba(255, 255, 255, 0.1);

}



.add-sticker-btn {

  width: 100%;

  aspect-ratio: 1;

  border: 1px dashed #555;

  border-radius: 4px;

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  color: #555;

  font-size: 24px;

}



.add-sticker-btn:hover {

  border-color: var(--accent);

  color: var(--accent);

}



/* Аудио сообщение в чате */

.voice-message-player {

  width: 220px;

  height: 40px;

}



/* Медиа в чате (картинки/видео) */

.chat-media-img {

  max-width: 240px;

  border-radius: 12px;

  cursor: pointer;

  transition: filter 0.2s;

}



.chat-media-img:active,

.chat-media-video:active {

  transform: scale(0.98);

  filter: brightness(0.8);

}



.chat-media-video {

  max-width: 240px;

  border-radius: 12px;

  cursor: pointer;

  background: #000;

  object-fit: cover;

}



/* Инпут сжимается, кнопки остаются */

.chat-window-input {

  flex-grow: 1;

  min-width: 10px;

  /* Позволяет сжиматься */

  background: #262626;

  border: none;

  height: 40px;

  border-radius: 20px;

  padding: 0 15px;

  color: #fff;

  font-size: 15px;

}



.chat-window-input:focus {

  outline: none;

  box-shadow: 0 0 0 2px var(--accent);

}



.chat-window-send-btn {

  background: none;

  border: none;

  cursor: pointer;

}



.chat-window-send-btn svg {

  width: 28px;

  height: 28px;

  fill: var(--accent);

  transition: transform 0.2s;

}



.chat-window-send-btn:hover svg {

  transform: scale(1.1);

}



/* [ИЗМЕНЕНО] Стили для модального окна нового сообщения (теперь это оверлей) */

.new-message-modal-overlay {

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: rgba(0, 0, 0, 0.7);

  display: none;

  justify-content: center;

  align-items: center;

  z-index: 16000;

}



.new-message-modal-overlay.active {

  display: flex;

}



.new-message-modal-content {

  background: #18181b;

  color: #fff;

  border-radius: 12px;

  width: 90%;

  max-width: 450px;

  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.4);

  display: flex;

  flex-direction: column;

  border: 1px solid #333;

}



.new-message-modal-header {

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 15px 20px;

  border-bottom: 1px solid #333;

}



.new-message-modal-header h2 {

  margin: 0;

  font-size: 18px;

}



.new-message-modal-header .close-btn {

  font-size: 28px;

  background: none;

  border: none;

  color: #888;

  cursor: pointer;

}



.new-message-modal-body {

  padding: 20px;

  display: flex;

  flex-direction: column;

  gap: 15px;

}



.new-message-modal-body .form-group {

  display: flex;

  flex-direction: column;

}



.new-message-modal-body label {

  margin-bottom: 5px;

  font-size: 14px;

  color: #aaa;

}



.new-message-modal-body input,

.new-message-modal-body textarea {

  background: #222;

  border: 1px solid #444;

  color: #fff;

  border-radius: 6px;

  padding: 10px;

  font-size: 16px;

  width: 100%;

  box-sizing: border-box;

}



.new-message-modal-body textarea {

  resize: vertical;

}



.new-message-modal-footer {

  padding: 15px 20px;

  border-top: 1px solid #333;

  display: flex;

  justify-content: flex-end;

}



.send-message-btn {

  background-color: var(--accent, #a85cff);

  color: white;

  border: none;

  padding: 10px 20px;

  border-radius: 8px;

  font-weight: bold;

  cursor: pointer;

  transition: background-color 0.2s;

}



.send-message-btn:hover {

  background-color: #8e4de6;

}





.new-message-modal {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: #0C0A09;

  z-index: 10;

  display: flex;

  flex-direction: column;

  transform: translateX(100%);

  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);

}



.new-message-modal.active {

  transform: translateX(0);

}



.new-message-header {

  display: flex;

  align-items: center;

  padding: 15px 20px;

  border-bottom: 1px solid rgba(255, 255, 255, 0.1);

  flex-shrink: 0;

}



.new-message-header h3 {

  margin: 0;

  flex-grow: 1;

  text-align: center;

}



.back-btn {

  background: none;

  border: none;

  color: #fff;

  font-size: 24px;

  cursor: pointer;

  opacity: 0.7;

}



.back-btn:hover {

  opacity: 1;

}



.new-message-body {

  display: flex;

  flex-direction: column;

  padding: 15px;

  flex-grow: 1;

  gap: 15px;

}



.recipient-search-group {

  display: flex;

  align-items: center;

  gap: 10px;

  border-bottom: 1px solid rgba(255, 255, 255, 0.1);

  padding-bottom: 10px;

}



.recipient-search-group label {

  font-weight: 600;

}



.recipient-search-group input {

  flex-grow: 1;

  background: none;

  border: none;

  color: #fff;

  font-size: 16px;

}



.recipient-search-group input:focus {

  outline: none;

}



.search-results-container {

  flex-shrink: 0;

  max-height: 200px;

  overflow-y: auto;

}



.search-result-item {

  padding: 10px;

  cursor: pointer;

  border-radius: 8px;

}



.search-result-item:hover {

  background: rgba(255, 255, 255, 0.1);

}



.new-message-composer {

  margin-top: auto;

  display: flex;

  flex-direction: column;

  gap: 10px;

}



.new-message-composer textarea {

  width: 100%;

  height: 100px;

  background: rgba(255, 255, 255, 0.05);

  border: 1px solid rgba(255, 255, 255, 0.1);

  border-radius: 10px;

  padding: 10px;

  color: #fff;

  resize: none;

}



.new-message-actions {

  display: flex;

  gap: 15px;

}



.new-message-actions button {

  background: none;

  border: none;

  cursor: pointer;

  opacity: 0.7;

}



.new-message-actions button:hover {

  opacity: 1;

}



.new-message-actions button img {

  width: 22px;

  height: 22px;

}



/* PLAYER */

/* === 5. КОНТЕКСТНОЕ МЕНЮ (ПКМ) === */

.custom-context-menu {

  position: fixed;

  z-index: 9999;

  background: #1c1c1c;

  border: 1px solid rgba(255, 255, 255, 0.1);

  border-radius: 8px;

  padding: 5px 0;

  display: none;

  flex-direction: column;

  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);

  min-width: 120px;

}



.context-menu-item {

  padding: 8px 15px;

  color: #fff;

  font-size: 13px;

  cursor: pointer;

  display: flex;

  align-items: center;

  gap: 8px;

  transition: background 0.2s;

}



.context-menu-item:hover {

  background: var(--accent);

}



/* === 6. МОДАЛКА СОЗДАНИЯ ГРУППЫ === */

.create-group-modal {

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: #0C0A09;

  z-index: 16000;

  display: flex;

  flex-direction: column;

  transform: translateY(100%);

  transition: transform 0.3s ease, opacity 0.2s ease;

  opacity: 0;

  visibility: hidden;

  pointer-events: none;

}



.create-group-modal.active {

  transform: translateY(0);

  opacity: 1;

  visibility: visible;

  pointer-events: auto;

}



.group-users-list {

  flex-grow: 1;

  overflow-y: auto;

  padding: 15px;

  display: flex;

  flex-direction: column;

  gap: 10px;

}



.user-select-item {

  display: flex;

  align-items: center;

  gap: 10px;

  padding: 10px;

  background: #1c1c1c;

  border-radius: 8px;

  cursor: pointer;

  border: 1px solid transparent;

}



.user-select-item.selected {

  border-color: var(--accent);

  background: rgba(var(--accent-rgb), 0.1);

}



.checkbox-circle {

  width: 20px;

  height: 20px;

  border-radius: 50%;

  border: 2px solid #555;

  display: flex;

  align-items: center;

  justify-content: center;

}



.user-select-item.selected .checkbox-circle {

  border-color: var(--accent);

  background: var(--accent);

}



/* [FIX] Возвращаем анимацию "OPEN1" (плавное появление) */

.story-viewer {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: #000;

  z-index: 20000;

  display: flex;

  flex-direction: column;



  /* Начальное состояние: плеер прозрачен и немного увеличен */

  opacity: 0;

  transform: scale(1.05);

  pointer-events: none;



  /* Сама анимация: плавно меняем прозрачность и форму */

  transition: opacity 0.3s ease, transform 0.3s ease;

}



.story-viewer.active {

  /* Конечное состояние: плеер раскрыт на весь экран */

  opacity: 1;

  transform: scale(1);

  pointer-events: all;

}



#storyVideo,

#storyImage {

  width: 100%;

  height: 100%;

  object-fit: contain;

  position: absolute;

  top: 0;

  left: 0;

}



.story-bars-container {

  position: absolute;

  top: 10px;

  left: 10px;

  right: 10px;

  display: flex;

  gap: 4px;

  height: 2px;

  z-index: 310;

}



.bar-segment {

  flex: 1;

  background: rgba(255, 255, 255, 0.3);

  border-radius: 2px;

  overflow: hidden;

}



.bar-segment .fill {

  height: 100%;

  background: #fff;

  width: 0%;

}



.story-header-overlay {

  position: absolute;

  top: 20px;

  left: 15px;

  right: 15px;

  display: flex;

  justify-content: space-between;

  align-items: center;

  z-index: 310;

}



.story-author {

  display: flex;

  align-items: center;

  gap: 8px;

}



.story-author img {

  width: 32px;

  height: 32px;

  border-radius: 50%;

  border: 1px solid rgba(255, 255, 255, 0.2);

}



.story-author span {

  font-weight: 600;

  font-size: 14px;

  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);

}



/* Volume */

.volume-control-area {

  position: absolute;

  top: 55px;

  left: 7px;

  width: 46px;

  height: 46px;

  z-index: 320;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 18px;

  background: rgba(255, 255, 255, 0.10);

  border: 1px solid rgba(255, 255, 255, 0.12);

  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);

  backdrop-filter: blur(10px);

  -webkit-backdrop-filter: blur(10px);

  transition: transform 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;

}



.volume-icon-img {

  width: 22px;

  height: 22px;

  cursor: pointer;

  opacity: 0.9;

  transition: opacity 0.2s, transform 0.16s ease;

  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.55));

  display: block;

}



.volume-control-area:hover .volume-icon-img {

  opacity: 1;

}



.volume-control-area:hover {

  background: rgba(var(--accent-rgb), 0.35);

  box-shadow: 0 20px 55px rgba(var(--accent-rgb), 0.18), 0 16px 40px rgba(0, 0, 0, 0.38);

  transform: scale(1.01);

}



.volume-control-area:hover .volume-icon-img {

  transform: scale(1.04);

}



.volume-slider-wrap {

  position: absolute;

  top: 52px;

  width: 36px;

  height: 140px;

  background: rgba(255, 255, 255, 0.10);

  border: 1px solid rgba(255, 255, 255, 0.12);

  border-radius: 16px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  opacity: 0;

  pointer-events: none;

  transition: opacity 0.22s ease, transform 0.22s ease;

  box-shadow: 0 18px 55px rgba(0, 0, 0, 0.45);

  backdrop-filter: blur(10px);

  -webkit-backdrop-filter: blur(10px);

  transform: translateY(-6px);

}



.volume-control-area:hover .volume-slider-wrap {

  opacity: 1;

  pointer-events: all;

}



#volumePercent {

  font-size: 10px;

  margin-bottom: 6px;

  color: #fff;

  font-weight: 800;

  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65);

}



#volumeSlider {

  writing-mode: bt-lr;

  -webkit-appearance: slider-vertical;

  appearance: slider-vertical;

  width: 4px;

  height: 92px;

  cursor: pointer;

}



/* "time ago" label in Stories header */

.story-author .story-age {

  margin-left: 10px;

  font-size: 13px;

  font-weight: 700;

  color: rgba(255, 255, 255, 0.70);

  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65);

}



.tap-layer {

  position: absolute;

  top: 60px;

  bottom: 60px;

  left: 0;

  right: 0;

  z-index: 305;

  display: flex;

}



.tap-left {

  width: 25%;

  height: 100%;

}



.tap-center {

  width: 50%;

  height: 100%;

  cursor: pointer;

}



.tap-right {

  width: 25%;

  height: 100%;

}



/* ICONS RED */

.action-icon {

  width: 28px;

  height: 28px;

  object-fit: contain;

  transition: transform 0.2s;

  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));

}



.action-icon:hover {

  transform: scale(1.15);

}



.action-icon:active {

  transform: scale(0.9);

}



.sidebar-item.liked .action-icon,

.insta-icon-btn.liked .action-icon {

  filter: brightness(0) saturate(100%) invert(12%) sepia(97%) saturate(7471%) hue-rotate(4deg) brightness(103%) contrast(108%) drop-shadow(0 0 10px rgba(255, 0, 0, 0.8));

  transform: scale(1.1);

}



.tiktok-sidebar {

  position: absolute;

  right: 15px;

  bottom: 120px;

  z-index: 310;

  display: flex;

  flex-direction: column;

  gap: 20px;

}



.sidebar-item {

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 2px;

  cursor: pointer;

}



.sidebar-item .count {

  font-size: 13px;

  font-weight: 600;

  text-shadow: 0 1px 2px black;

}



.insta-footer {

  position: absolute;

  bottom: 20px;

  right: 20px;

  z-index: 310;

  display: flex;

  align-items: center;

  gap: 20px;

}



.insta-likes-wrap {

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 2px;

}



.insta-icon-btn {

  background: none;

  border: none;

  cursor: pointer;

  padding: 0;

  display: flex;

  align-items: center;

  justify-content: center;

}



.insta-like-count {

  font-size: 13px;

  font-weight: 600;

  color: #fff;

  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);

  min-width: 10px;

  text-align: center;

}



.footer-icon {

  width: 30px;

  height: 30px;

}



/* iOS-like footer buttons (Stories viewer) */

.insta-footer .insta-icon-btn {

  width: 46px;

  height: 46px;

  border-radius: 16px;

  background: rgba(255, 255, 255, 0.10);

  border: 1px solid rgba(255, 255, 255, 0.12);

  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);

  backdrop-filter: blur(10px);

  -webkit-backdrop-filter: blur(10px);

  transition: transform 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;

}



.insta-footer .insta-icon-btn:hover {

  background: rgba(var(--accent-rgb), 0.85);

  box-shadow: 0 20px 55px rgba(var(--accent-rgb), 0.22), 0 16px 40px rgba(0, 0, 0, 0.38);

  transform: scale(1.04);

}



.insta-footer .insta-icon-btn:active {

  transform: scale(0.92);

}



/* Avoid double-scaling from .action-icon:hover; scale icons only via the button hover */

.insta-footer .action-icon:hover,

.insta-footer .action-icon:active {

  transform: none;

}



.insta-footer .insta-icon-btn:hover .action-icon {

  transform: scale(1.06);

}



.insta-footer .insta-icon-btn:active .action-icon {

  transform: scale(0.94);

}



/* COMMENTS */

.comments-drawer {

  position: absolute;

  bottom: 0;

  left: 0;

  width: 100%;

  height: 60%;

  background: rgba(24, 24, 26, 0.97);

  z-index: 400;

  border-top-left-radius: 20px;

  border-top-right-radius: 20px;

  transform: translateY(100%);

  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);

  display: flex;

  flex-direction: column;

  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.6);

  backdrop-filter: blur(12px);

  -webkit-backdrop-filter: blur(12px);

}



.comments-drawer.active {

  transform: translateY(0);

}



.comments-header {

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 14px 20px;

  border-bottom: 1px solid rgba(255,255,255,0.08);

  font-weight: 700;

  font-size: 15px;

  letter-spacing: 0.2px;

}



.comments-header button {

  background: none;

  border: none;

  color: #fff;

  font-size: 24px;

  cursor: pointer;

}



.comments-list {

  flex-grow: 1;

  overflow-y: auto;

  padding: 15px;

  display: flex;

  flex-direction: column;

  gap: 12px;

}



.recent-stickers {

  padding: 10px 15px 0;

  display: flex;

  gap: 10px;

  overflow-x: auto;

}



.recent-sticker-item {

  width: 40px;

  height: 40px;

  object-fit: contain;

  border-radius: 5px;

  cursor: pointer;

  border: 1px solid #333;

}



.comment-item {

  display: flex;

  gap: 10px;

  align-items: flex-start;

  padding: 4px 0;

  transition: background 0.15s;

}



.comment-avatar {

  width: 34px;

  height: 34px;

  border-radius: 50%;

  object-fit: cover;

  flex-shrink: 0;

  border: 1px solid rgba(255,255,255,0.08);

}



.comment-content {

  display: flex;

  flex-direction: column;

  background: rgba(255,255,255,0.06);

  padding: 8px 14px;

  border-radius: 16px;

  border-top-left-radius: 4px;

  max-width: 80%;

}



.comment-user {

  font-size: 12px;

  font-weight: 700;

  color: var(--accent);

  margin-bottom: 3px;

}



.comment-text {

  font-size: 14px;

  word-break: break-word;

}



.comment-sticker {

  max-width: 120px;

  border-radius: 8px;

  margin-top: 5px;

}



.comments-input-area {

  padding: 10px 12px;

  border-top: 1px solid rgba(255,255,255,0.08);

  display: flex;

  align-items: center;

  gap: 8px;

  background: rgba(20, 20, 22, 0.98);

}



.sticker-btn {

  font-size: 24px;

  background: none;

  border: none;

  cursor: pointer;

  color: #fff;

}



#commentInput {

  flex-grow: 1;

  height: 38px;

  border-radius: 20px;

  border: 1px solid rgba(255,255,255,0.10);

  padding: 0 16px;

  background: rgba(255,255,255,0.06);

  color: #fff;

  font-size: 14px;

  outline: none;

  transition: border-color 0.2s, background 0.2s;

}

#commentInput:focus {

  border-color: var(--accent);

  background: rgba(255,255,255,0.09);

}



.send-comment-btn {

  font-size: 20px;

  color: var(--accent);

  background: none;

  border: none;

  cursor: pointer;

  transition: transform 0.15s, color 0.15s;

}

.send-comment-btn:hover {

  color: #c084fc;

  transform: scale(1.15);

}



#reactionContainer {

  position: absolute;

  bottom: 100px;

  right: 20px;

  z-index: 320;

  pointer-events: none;

}



.flying-emoji {

  position: absolute;

  bottom: 0;

  font-size: 40px;

  animation: flyUp 1.5s ease-out forwards;

}



@keyframes flyUp {

  0% {

    transform: translateY(0) scale(1);

    opacity: 1;

  }



  100% {

    transform: translateY(-250px) scale(1.5);

    opacity: 0;

  }

}



/* ========================================================= */

/* === [EMERGENCY FIX] БЕЗОПАСНОСТЬ КЛИКОВ === */

/* ========================================================= */



/* Убеждаемся, что скрытые панели реально пропускают клики */

.settings-panel:not(.active),

.ai-panel:not(.active),

.shame-overlay:not(.active),

.story-viewer:not(.active) {

  pointer-events: none !important;

  opacity: 0 !important;

  z-index: -1 !important;

  /* Убираем назад */

}



/* Возвращаем клики контенту */

.content,

.tabs,

.top-right-icons {

  pointer-events: auto !important;

  z-index: 50 !important;

  /* Поднимаем кнопки */

}

body.profile-view .bottom-right-controls,

body.profile-view .bottom-left-controls {

  pointer-events: auto !important;

  z-index: 50 !important;

}



/* ========================================================= */

/* === ADMIN PANEL (PREMIUM iOS GLASS REDESIGN) === */

/* ========================================================= */



.admin-panel {

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  /* Deep glass background */

  background: rgba(10, 10, 12, 0.65);

  backdrop-filter: blur(50px) saturate(180%);

  -webkit-backdrop-filter: blur(50px) saturate(180%);

  z-index: 10000 !important;

  display: flex;

  flex-direction: column;

  overflow: hidden;



  /* Animation */

  opacity: 0;

  transform: scale(0.96);

  transition: opacity 0.4s cubic-bezier(0.19, 1, 0.22, 1),

    transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);

  pointer-events: none;

}



.admin-panel.active {

  opacity: 1;

  transform: scale(1);

  pointer-events: auto;

}



.admin-header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 24px 28px;

  /* Subtle separator */

  border-bottom: 0.5px solid rgba(255, 255, 255, 0.12);

  background: rgba(255, 255, 255, 0.02);

}



.admin-title {

  font-size: 28px;

  font-weight: 800;

  letter-spacing: -0.5px;

  /* Gradient Text */

  background: linear-gradient(135deg, #fff 30%, var(--accent) 100%);

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  background-clip: text;

  margin: 0;

  text-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);

}



/* Close Button Override */

#btnCloseAdmin {

  background: rgba(255, 255, 255, 0.1);

  border-radius: 50%;

  width: 36px;

  height: 36px;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 24px;

  font-weight: 300;

  color: #fff;

  transition: background 0.2s;

}



#btnCloseAdmin:hover {

  background: rgba(255, 255, 255, 0.2);

}



/* MENU BUTTONS GRID */

.admin-menu-buttons {

  display: grid;

  grid-template-columns: 1fr 1fr 1fr;

  gap: 12px;

  padding: 16px 28px;

  border-bottom: 0.5px solid rgba(255, 255, 255, 0.12);

}



.admin-menu-btn {

  display: flex;

  flex-direction: row;

  /* Horizontal */

  align-items: center;

  justify-content: flex-start;

  gap: 12px;

  padding: 12px 16px;

  background: rgba(255, 255, 255, 0.03);

  border: 0.5px solid rgba(255, 255, 255, 0.08);

  border-radius: 16px;

  cursor: pointer;

  transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);

  position: relative;

  overflow: hidden;

}



.btn-icon-bg {

  width: 36px;

  height: 36px;

  border-radius: 10px;

  background: rgba(255, 255, 255, 0.08);

  display: flex;

  align-items: center;

  justify-content: center;

  color: #fff;

  transition: all 0.3s ease;

}



.btn-icon-bg svg {

  width: 20px;

  height: 20px;

}



.admin-menu-btn span {

  font-size: 14px;

  font-weight: 600;

  color: rgba(255, 255, 255, 0.6);

  letter-spacing: 0.3px;

}



.admin-menu-btn:hover {

  background: rgba(255, 255, 255, 0.06);

  transform: translateY(-2px);

}



.admin-menu-btn.active {

  background: rgba(var(--accent-rgb), 0.15);

  border-color: rgba(var(--accent-rgb), 0.4);

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);

}



.admin-menu-btn.active .btn-icon-bg {

  background: var(--accent);

  color: #fff;

  box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.4);

}



.admin-menu-btn.active span {

  color: #fff;

}



/* SECTIONS & CARDS */

.admin-menu-section {

  display: none;

  flex: 1;

  overflow-y: auto;

  padding: 28px;

}



.admin-menu-section.active {

  display: flex;

  /* Changed from block to flex for better layout control */

  flex-direction: column;

  animation: fadeIn 0.4s ease;

  gap: 24px;

  /* Space between cards */

}



.admin-section {

  background: rgba(30, 30, 35, 0.4);

  backdrop-filter: blur(20px);

  -webkit-backdrop-filter: blur(20px);

  border-radius: 24px;

  border: 0.5px solid rgba(255, 255, 255, 0.08);

  padding: 24px;

  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);

  margin-bottom: 0;

  /* Handled by gap in container */

}



.admin-section-title {

  font-size: 19px;

  font-weight: 700;

  color: #fff;

  margin: 0 0 4px 0;

  display: flex;

  align-items: center;

  gap: 10px;

}



.ios-icon-small {

  color: var(--accent);

  display: flex;

  align-items: center;

}



.admin-section-sub {

  font-size: 14px;

  color: rgba(255, 255, 255, 0.4);

  margin-bottom: 20px;

}



/* FORM ELEMENTS (iOS Style) */

.form-group {

  margin-bottom: 20px;

}



.form-group:last-child {

  margin-bottom: 0;

}



.form-group label {

  display: block;

  font-size: 13px;

  font-weight: 600;

  color: rgba(255, 255, 255, 0.5);

  margin-bottom: 8px;

  margin-left: 4px;

  /* Align with input text visually */

}



.ios-input,

.ios-select {

  width: 100%;

  padding: 14px 16px;

  font-size: 16px;

  /* 16px prevents zoom on iOS */

  background: rgba(0, 0, 0, 0.2);

  border: 0.5px solid rgba(255, 255, 255, 0.1);

  border-radius: 14px;

  color: #fff;

  outline: none;

  transition: border-color 0.2s, background 0.2s;

}



.ios-input:focus,

.ios-select:focus {

  border-color: var(--accent);

  background: rgba(0, 0, 0, 0.3);

}



/* File Input Customization */

.ios-file-input {

  display: none;

  /* Hidden real input */

}



.file-label {

  display: block;

  padding: 14px;

  text-align: center;

  background: rgba(255, 255, 255, 0.05);

  border: 1px dashed rgba(255, 255, 255, 0.2);

  border-radius: 14px;

  color: rgba(255, 255, 255, 0.6);

  cursor: pointer;

  margin-bottom: 12px;

  transition: all 0.2s;

}



.file-label:hover {

  background: rgba(255, 255, 255, 0.08);

  color: #fff;

  border-color: rgba(255, 255, 255, 0.4);

}



/* LIST BOXES */

.ios-list-box {

  background: rgba(0, 0, 0, 0.2);

  border-radius: 14px;

  border: 0.5px solid rgba(255, 255, 255, 0.08);

  padding: 8px;

  overflow-y: auto;

  min-height: 60px;

  margin-bottom: 12px;

}



/* BUTTONS */

.admin-btn {

  border: none;

  border-radius: 14px;

  font-size: 15px;

  font-weight: 600;

  cursor: pointer;

  padding: 14px 20px;

  width: 100%;

  /* Full width by default in sections */

  transition: transform 0.1s, opacity 0.2s;

}



.admin-btn:active {

  transform: scale(0.98);

}



.ios-primary-btn {

  background: var(--accent);

  color: #fff;

  box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.3);

}



.ios-primary-btn:hover {

  background: var(--accent-light);

}



.ios-secondary-btn {

  background: rgba(255, 255, 255, 0.1);

  color: #fff;

}



.ios-secondary-btn:hover {

  background: rgba(255, 255, 255, 0.15);

}



.ios-danger-btn {

  background: rgba(255, 59, 48, 0.15);

  color: #ff3b30;

}



.ios-danger-btn:hover {

  background: rgba(255, 59, 48, 0.25);

}



.pos-group {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 12px;

}



/* USER ITEM STYLES - Premium List */

.ios-scroll-list {

  flex: 1;

  overflow-y: auto;

  margin: 0 -8px;

  /* Negative margin to alignment */

  padding: 0 8px;

}



.ios-empty-state {

  text-align: center;

  padding: 40px 20px;

  color: rgba(255, 255, 255, 0.3);

  font-style: italic;

}



.admin-user-item {

  display: flex;

  align-items: center;

  gap: 16px;

  padding: 12px;

  margin-bottom: 8px;

  background: rgba(255, 255, 255, 0.03);

  border-radius: 16px;

  transition: background 0.2s;

}



.admin-user-item:hover {

  background: rgba(255, 255, 255, 0.06);

}



.admin-user-avatar {

  width: 48px;

  height: 48px;

  border-radius: 50%;

  object-fit: cover;

  background: #333;

}



.admin-user-info {

  flex: 1;

  min-width: 0;

}



.admin-user-nickname {

  font-size: 16px;

  font-weight: 600;

  color: #fff;

  margin-bottom: 2px;

}



.admin-user-login {

  font-size: 13px;

  color: rgba(255, 255, 255, 0.5);

}



.admin-user-actions {

  display: flex;

  gap: 8px;

}

.admin-role-select {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  color: var(--accent-light);
  font-size: 11px;
  font-weight: 700;
  padding: 4px 6px;
  border-radius: 8px;
  cursor: pointer;
  outline: none;
}
.admin-role-select:focus {
  border-color: rgba(var(--accent-rgb),0.5);
}



.ios-icon-only-btn {

  width: 36px;

  height: 36px;

  border-radius: 10px;

  background: rgba(255, 255, 255, 0.1);

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 0;

  color: #fff;

}



.ios-icon-only-btn:hover {

  background: rgba(255, 255, 255, 0.15);

}



/* Badges */

.admin-badge {

  display: inline-block;

  padding: 4px 8px;

  border-radius: 6px;

  font-size: 11px;

  font-weight: 600;

  margin-left: 8px;

}



.admin-badge.online {

  background: rgba(48, 209, 88, 0.2);

  color: #30d158;

}



.admin-badge.offline {

  background: rgba(255, 69, 58, 0.2);

  color: #ff453a;

}





.admin-badge.strecho {

  background: rgba(var(--accent-rgb), 0.2);

  color: #bf5af2;

}



/* ========================================================= */

/* === PROFILE GLOW BUTTONS === */

/* ========================================================= */

#btnAdminPanel,

#btnSaveNickname {

  background: linear-gradient(135deg, var(--accent), var(--accent-light));

  color: #fff !important;

  font-weight: 800;

  border: none;

  border-radius: 14px;

  padding: 12px 24px;

  box-shadow: 0 0 20px rgba(var(--accent-rgb), 0.4);

  transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);

  text-transform: uppercase;

  letter-spacing: 0.5px;

  font-size: 14px;

  cursor: pointer;

  width: 100%;

  margin-top: 15px;

}



#btnSaveNickname {

  margin-top: 0;

  margin-left: 10px;

  padding: 0 24px;

  /* Adjust padding because it is inline */

  width: auto;

  height: 42px;

  /* Set height to match input */

}



#btnAdminPanel:hover,

#btnSaveNickname:hover {

  transform: translateY(-2px);

  box-shadow: 0 0 40px rgba(var(--accent-rgb), 0.7);

  background: linear-gradient(135deg, var(--accent-light), var(--accent-light));

}



#btnAdminPanel:active,

#btnSaveNickname:active {

  transform: scale(0.96);

  box-shadow: 0 0 15px rgba(var(--accent-rgb), 0.4);

}



/* FF PANEL (Full screen window similar to AI Panel) */

.ff-panel {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  z-index: 10001;

  display: flex;

  flex-direction: column;

  opacity: 0;

  pointer-events: none;

  background: rgb(12, 10, 9);

  -webkit-backdrop-filter: none;

  backdrop-filter: none;

  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  transform: translateY(20px);

}



.ff-panel.active {

  opacity: 1;

  pointer-events: all;

  transform: translateY(0);

}



.ff-header {

  height: 60px;

  padding: 0 20px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  position: relative;

  border-bottom: 1px solid rgba(255, 255, 255, 0.08);

}



.back-btn {

  background: none;

  border: none;

  color: var(--accent);

  font-size: 24px;

  cursor: pointer;

  padding: 0 10px;

  margin-right: 10px;

  display: flex;

  align-items: center;

  justify-content: center;

  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);

}



.back-btn:hover {

  transform: scale(1.2) translateX(-2px);

  text-shadow: 0 0 8px var(--accent);

}



.ff-title {

  color: #fff;

  font-size: 18px;

  font-weight: 800;

  margin: 0;

  flex: 1;

  text-align: center;

  letter-spacing: 1px;

  text-transform: uppercase;

  text-shadow: 0 0 20px rgba(var(--accent-rgb), 0.4);

}



.ff-header-actions {

  position: absolute;

  right: 16px;

  top: 50%;

  transform: translateY(-50%);

  display: flex;

  gap: 10px;

  z-index: 6;

}



.ff-gear-btn,

.ff-header .close-btn {

  width: 36px;

  height: 36px;

  border: 1px solid rgba(255, 255, 255, 0.10);

  background: rgba(255, 255, 255, 0.06);

  border-radius: 12px;

  color: rgba(255, 255, 255, 0.9);

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  padding: 0;

  transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;

  backdrop-filter: blur(10px);

}



.ff-gear-btn:hover,

.ff-header .close-btn:hover {

  transform: scale(1.06);

  background: rgba(255, 255, 255, 0.12);

  border-color: rgba(255, 255, 255, 0.18);

}



.ff-gear-btn:active,

.ff-header .close-btn:active {

  transform: scale(0.96);

}



.ff-settings {

  position: absolute;

  inset: 60px 0 0 0;

  display: flex;

  align-items: flex-start;

  justify-content: center;

  padding: 20px;

  background: rgba(0, 0, 0, 0.35);

  z-index: 10002;

}



.ff-settings-card {

  width: min(520px, calc(100% - 24px));

  background: rgba(18, 16, 16, 0.92);

  border: 1px solid rgba(255, 255, 255, 0.10);

  border-radius: 16px;

  padding: 16px;

  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);

}



.ff-settings-title {

  font-weight: 900;

  color: #fff;

  font-size: 14px;

  letter-spacing: 0.8px;

  text-transform: uppercase;

  margin-bottom: 12px;

}



.ff-settings-row {

  display: grid;

  grid-template-columns: 120px 1fr;

  gap: 10px;

  align-items: center;

  margin-bottom: 10px;

  color: rgba(255, 255, 255, 0.75);

  font-size: 13px;

}



.ff-settings-row input,

.ff-settings-row select {

  width: 100%;

  height: 36px;

  background: rgba(255, 255, 255, 0.06);

  border: 1px solid rgba(255, 255, 255, 0.10);

  border-radius: 12px;

  color: #fff;

  padding: 0 12px;

  outline: none;

}



.ff-settings-row input:focus,

.ff-settings-row select:focus {

  border-color: rgba(var(--accent-rgb), 0.55);

  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.12);

}



.ff-settings-actions {

  display: flex;

  justify-content: flex-end;

  gap: 10px;

  margin-top: 12px;

}



.ff-settings-actions button {

  height: 36px;

  padding: 0 14px;

  border-radius: 12px;

  border: 1px solid rgba(255, 255, 255, 0.10);

  background: rgba(255, 255, 255, 0.06);

  color: #fff;

  cursor: pointer;

}



.ff-settings-actions button:hover {

  background: rgba(255, 255, 255, 0.12);

}



.ff-settings-hint {

  margin-top: 10px;

  font-size: 12px;

  color: rgba(255, 255, 255, 0.55);

  line-height: 1.35;

}



.ff-selection-bar{

  position: absolute;

  left: 16px;

  right: 16px;

  bottom: 14px;

  display: flex;

  align-items: center;

  justify-content: flex-start;

  gap: 10px;

  pointer-events: none;

  opacity: 0;

  transform: translateY(10px);

  transition: opacity 0.18s ease, transform 0.18s ease;

  z-index: 10003;

  padding: 8px 16px;

  border-radius: 22px;

}



.ff-selection-bar::before{

  content: '';

  position: absolute;

  left: -8px;

  right: -8px;

  bottom: -8px;

  top: -8px;

  border-radius: 22px;

  background: rgba(10, 8, 9, 0.72);

  border: 1px solid rgba(255,255,255,0.08);

  box-shadow: 0 26px 80px rgba(0,0,0,0.55);

  -webkit-backdrop-filter: blur(18px);

  backdrop-filter: blur(18px);

  pointer-events: none;

}



.ff-selection-bar > *{

  position: relative;

  z-index: 1;

}



.ff-selection-bar.active{

  pointer-events: all;

  opacity: 1;

  transform: translateY(0);

}



.ff-selection-bar.drag-over{

  pointer-events: all;

  opacity: 1;

}



.ff-import-btn{

  height: 44px;

  border-radius: 999px;

  border: 1px solid rgba(var(--accent-rgb), 0.35);

  background: rgba(var(--accent-rgb), 0.22);

  color: rgba(255,255,255,.96);

  cursor: pointer;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 10px;

  padding: 0 16px;

  box-shadow: 0 18px 44px rgba(0,0,0,.42);

  transition: transform .12s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease;

  user-select: none;

  font-weight: 900;

  letter-spacing: 0.3px;

}



.ff-import-btn:hover{

  transform: translateY(-1px);

  background: rgba(var(--accent-rgb), 0.30);

  border-color: rgba(var(--accent-rgb), 0.55);

}



.ff-import-btn:active{

  transform: translateY(0) scale(0.985);

}



.ff-clear-btn{

  width: 44px;

  height: 44px;

  border-radius: 50%;

  border: 1px solid rgba(255,255,255,.14);

  background: rgba(255,255,255,.08);

  color: rgba(255,255,255,.92);

  cursor: pointer;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  padding: 0;

  box-shadow: 0 18px 44px rgba(0,0,0,.42);

  transition: transform .12s ease, background .12s ease, border-color .12s ease;

  user-select: none;

  position: relative;

  backdrop-filter: blur(10px);

}



.ff-clear-btn:hover{

  transform: translateY(-1px);

  background: rgba(255,255,255,.12);

  border-color: rgba(255,255,255,.22);

}



.ff-clear-btn:active{

  transform: translateY(0) scale(0.985);

}



.ff-clear-btn::after{

  content: attr(data-count);

  position: absolute;

  right: -6px;

  top: -6px;

  min-width: 18px;

  height: 18px;

  padding: 0 6px;

  border-radius: 999px;

  background: rgba(var(--accent-rgb), 0.95);

  color: #fff;

  font-size: 11px;

  font-weight: 900;

  display: flex;

  align-items: center;

  justify-content: center;

  border: 1px solid rgba(255,255,255,.18);

}



.ff-import-btn:disabled,

.ff-clear-btn:disabled{

  opacity: 0.6;

  cursor: not-allowed;

  transform: none;

}



.ff-selection-bar.drag-over .ff-import-btn{

  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.22), 0 18px 44px rgba(0,0,0,.42);

}



.ff-diag{
  position: fixed;
  right: 12px;
  bottom: 12px;
  display: none;
  flex-direction: column;
  gap: 8px;
  z-index: 2147483647;
  pointer-events: none;
}
.ff-diag.visible{
  display: flex;
}



.ff-diag-dot{
  position: relative;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: rgba(255, 70, 70, 0.9);
  border: 1px solid rgba(255,255,255,0.22);
  box-shadow: 0 8px 24px rgba(0,0,0,0.55);
  pointer-events: auto;
  cursor: default;
}
.ff-diag-dot .ff-diag-tip{
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  background: rgba(20,20,25,0.92);
  color: #e0e0e0;
  font-size: 11px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.45);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.18s;
}
.ff-diag-dot:hover .ff-diag-tip{
  opacity: 1;
}



.ff-diag-dot[data-state="on"]{

  background: rgba(60, 220, 120, 0.95);

}



.ff-diag-dot[data-state="wait"]{

  background: rgba(255, 190, 60, 0.95);

}



.ff-content{

  flex: 1;

  overflow-y: auto;

  overflow-x: hidden;

  padding: 18px 20px 22px;

}



/* MEDIA LIBRARY STYLES */

.ff-search-box {

  margin-bottom: 24px;

}



.ff-search-box input {

  width: 100%;

  background: rgba(255, 255, 255, 0.05);

  border: 1px solid rgba(255, 255, 255, 0.1);

  border-radius: 12px;

  padding: 12px 16px;

  color: #fff;

  font-size: 14px;

  transition: all 0.2s;

}



.ff-search-box input:focus {

  background: rgba(255, 255, 255, 0.08);

  border-color: var(--accent);

  outline: none;

  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.15);

}



.ff-media-grid {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(var(--ff-tile-min, 140px), 1fr));

  gap: 16px;

}



.ff-media-card {

  background: rgba(255, 255, 255, 0.04);

  border: 1px solid rgba(255, 255, 255, 0.06);

  border-radius: 16px;

  overflow: hidden;

  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);

  cursor: pointer;

  position: relative;

}



.ff-media-card:hover {

  transform: translateY(-4px);

  background: rgba(255, 255, 255, 0.08);

  border-color: rgba(var(--accent-rgb), 0.3);

  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);

}



.ff-media-card.selected {

  border-color: rgba(var(--accent-rgb), 0.75);

  box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.35), 0 12px 24px rgba(0, 0, 0, 0.3);

}



.ff-media-thumb {

  width: 100%;

  aspect-ratio: 16 / 9;

  object-fit: cover;

  background: #1a1a1a;

  display: block;

}



.ff-media-info {

  padding: 10px;

}



.ff-media-name {

  color: #fff;

  font-size: 13px;

  font-weight: 700;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

  margin-bottom: 4px;

}



.ff-media-meta {

  color: rgba(255, 255, 255, 0.45);

  font-size: 11px;

}



.ff-media-action {

  position: absolute;

  bottom: 10px;

  right: 10px;

  width: 28px;

  height: 28px;

  background: var(--accent);

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  opacity: 0;

  transform: scale(0.8);

  transition: all 0.2s;

}



.ff-media-card:hover .ff-media-action {

  opacity: 1;

  transform: scale(1);

}



.ff-gear-btn:hover,

.ff-header .close-btn:hover {

  transform: scale(1.06);

  background: rgba(255, 255, 255, 0.12);

  border-color: rgba(255, 255, 255, 0.18);

}



.ff-gear-btn:active,

.ff-header .close-btn:active {

  transform: scale(0.96);

}



.ff-settings {

  position: absolute;

  inset: 60px 0 0 0;

  display: flex;

  align-items: flex-start;

  justify-content: center;

  padding: 20px;

  background: rgba(0, 0, 0, 0.35);

  z-index: 10002;

}



.ff-settings-card {

  width: min(520px, calc(100% - 24px));

  background: rgba(18, 16, 16, 0.92);

  border: 1px solid rgba(255, 255, 255, 0.10);

  border-radius: 16px;

  padding: 16px;

  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);

}



.ff-settings-title {

  font-weight: 900;

  color: #fff;

  font-size: 14px;

  letter-spacing: 0.8px;

  text-transform: uppercase;

  margin-bottom: 12px;

}



.ff-settings-row {

  display: grid;

  grid-template-columns: 120px 1fr;

  gap: 10px;

  align-items: center;

  margin-bottom: 10px;

  color: rgba(255, 255, 255, 0.75);

  font-size: 13px;

}



.ff-settings-row input,

.ff-settings-row select {

  width: 100%;

  height: 36px;

  background: rgba(255, 255, 255, 0.06);

  border: 1px solid rgba(255, 255, 255, 0.10);

  border-radius: 12px;

  color: #fff;

  padding: 0 12px;

  outline: none;

}



.ff-settings-row input:focus,

.ff-settings-row select:focus {

  border-color: rgba(var(--accent-rgb), 0.55);

  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.12);

}



.ff-settings-actions {

  display: flex;

  justify-content: flex-end;

  gap: 10px;

  margin-top: 12px;

}



.ff-settings-actions button {

  height: 36px;

  padding: 0 14px;

  border-radius: 12px;

  border: 1px solid rgba(255, 255, 255, 0.10);

  background: rgba(255, 255, 255, 0.06);

  color: #fff;

  cursor: pointer;

}



.ff-settings-actions button:hover {

  background: rgba(255, 255, 255, 0.12);

}



.ff-settings-hint {

  margin-top: 10px;

  font-size: 12px;

  color: rgba(255, 255, 255, 0.55);

  line-height: 1.35;

}

/* ========================================================= */
/* === ADAPTIVE: constrain content for wide screens (web) === */
/* ========================================================= */

.logout-container,
.login-container {
  max-width: 420px;
  align-self: center;
}

.tools-list {
  max-width: 420px;
  align-self: center;
}

/* CEP + Web: profile positions are set dynamically by JS (updateProfilePositions) */


/* ========================================================= */
/* === ANIMATED WALLPAPER CANVAS                         === */
/* ========================================================= */

#animatedWallpaperCanvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  display: none;
}

/* ========================================================= */
/* === LIGHT SWEEP BUTTON HOVER                          === */
/* ========================================================= */

.login-btn,
.logout-btn,
.admin-btn,
#btnAdminPanel,
#btnSaveNickname,
.tool-tile,
.stg-apply-mini {
  position: relative;
  overflow: hidden;
}

.login-btn::after,
.logout-btn::after,
.admin-btn::after,
#btnAdminPanel::after,
#btnSaveNickname::after,
.tool-tile::after,
.stg-apply-mini::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
  transition: none;
  pointer-events: none;
}

.login-btn:hover::after,
.logout-btn:hover::after,
.admin-btn:hover::after,
#btnAdminPanel:hover::after,
#btnSaveNickname:hover::after,
.tool-tile:hover::after,
.stg-apply-mini:hover::after {
  animation: lightSweep 0.6s ease-out;
}

@keyframes lightSweep {
  0%   { left: -60%; }
  100% { left: 120%; }
}

/* ========================================================= */
/* === GLASS EFFECT ON TABS                              === */
/* ========================================================= */

.tabs {
  background: rgba(38, 38, 38, 0.6) !important;
  backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

body.light-theme .tabs {
  background: rgba(240, 240, 240, 0.6) !important;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

/* ========================================================= */
/* === SUPPORT CHAT PANEL                                === */
/* ========================================================= */

.support-panel {
  position: absolute;
  inset: 0;
  z-index: 120;
  display: none;
  flex-direction: column;
  background: rgba(12, 10, 9, 0.88);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  backdrop-filter: blur(24px) saturate(1.6);
  border-radius: inherit;
  overflow: hidden;
  animation: fadeIn 0.25s ease;
}
.support-panel.active { display: flex; }

.support-header {
  display: flex;
  align-items: center;
  padding: 16px 18px;
  gap: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  flex-shrink: 0;
}
.support-title {
  flex: 1;
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  margin: 0;
  letter-spacing: 0.3px;
}
.support-back-btn {
  background: none;
  border: none;
  color: rgba(255,255,255,0.7);
  cursor: pointer;
  padding: 4px;
  border-radius: 8px;
  transition: background 0.2s;
}
.support-back-btn:hover { background: rgba(255,255,255,0.08); }

/* Ticket list */
.support-tickets {
  flex: 1;
  overflow-y: auto;
  padding: 10px 14px;
}
.support-empty {
  text-align: center;
  color: rgba(255,255,255,0.35);
  font-size: 14px;
  padding: 40px 0;
}
.support-ticket-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  cursor: pointer;
  transition: background 0.2s;
  margin-bottom: 6px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
}
.support-ticket-item:hover { background: rgba(255,255,255,0.08); }
.support-ticket-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  background: rgba(var(--accent-rgb),0.15);
  flex-shrink: 0;
}
.support-ticket-info { flex: 1; min-width: 0; }
.support-ticket-name {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.support-ticket-preview {
  font-size: 12px;
  color: rgba(255,255,255,0.45);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}
.support-ticket-meta {
  text-align: right;
  flex-shrink: 0;
}
.support-ticket-time {
  font-size: 11px;
  color: rgba(255,255,255,0.35);
}
.support-ticket-badge {
  display: inline-block;
  min-width: 18px;
  height: 18px;
  line-height: 18px;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: var(--accent);
  border-radius: 10px;
  padding: 0 5px;
  margin-top: 4px;
}

/* Chat view */
.support-chat {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.support-messages {
  flex: 1;
  overflow-y: auto;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.support-msg {
  max-width: 80%;
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.45;
  word-break: break-word;
  animation: fadeIn 0.2s ease;
}
.support-msg.user {
  align-self: flex-end;
  background: rgba(var(--accent-rgb),0.25);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.support-msg.admin {
  align-self: flex-start;
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.9);
  border-bottom-left-radius: 4px;
}
.support-msg-time {
  font-size: 10px;
  color: rgba(255,255,255,0.3);
  margin-top: 4px;
}
.support-msg.user .support-msg-time { text-align: right; }

/* Input bar */
.support-input-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid rgba(255,255,255,0.08);
  flex-shrink: 0;
}
.support-input {
  flex: 1;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px;
  padding: 10px 16px;
  font-size: 14px;
  color: #fff;
  outline: none;
  transition: border-color 0.2s;
}
.support-input:focus { border-color: rgba(var(--accent-rgb),0.5); }
.support-input::placeholder { color: rgba(255,255,255,0.3); }
.support-send-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(var(--accent-rgb),0.3);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, transform 0.15s;
  flex-shrink: 0;
}
.support-send-btn:hover { background: rgba(var(--accent-rgb),0.5); transform: scale(1.05); }
.support-send-btn:active { transform: scale(0.95); }

/* Attach button */
.support-attach-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.5);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, color 0.2s;
  flex-shrink: 0;
}
.support-attach-btn:hover { background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.8); }

/* Media in messages */
.support-media-img {
  max-width: 100%;
  max-height: 220px;
  border-radius: 10px;
  cursor: pointer;
  display: block;
  object-fit: cover;
}
.support-media-video {
  max-width: 100%;
  max-height: 220px;
  border-radius: 10px;
  display: block;
}
.support-media-file {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: rgba(255,255,255,0.08);
  border-radius: 10px;
  color: var(--accent-light);
  text-decoration: none;
  font-size: 13px;
  transition: background 0.2s;
}
.support-media-file:hover { background: rgba(255,255,255,0.14); }
.support-media-file svg { flex-shrink: 0; stroke: var(--accent-light); }

/* Support mode toggle button */
.support-mode-toggle {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px 4px 8px;
  border-radius: 14px;
  border: 1px solid rgba(var(--accent-rgb),0.4);
  background: rgba(var(--accent-rgb),0.12);
  color: var(--accent-light);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
  margin-left: auto;
  margin-right: 8px;
  white-space: nowrap;
}
.support-mode-toggle:hover {
  background: rgba(var(--accent-rgb),0.22);
  border-color: rgba(var(--accent-rgb),0.6);
}
.support-mode-toggle svg { stroke: var(--accent-light); flex-shrink: 0; }

/* Support button */
#btnSupport { position: relative; }
#btnSupport svg { stroke: rgba(255,255,255,0.7); }

/* Support role badge in admin panel */
.admin-badge.support-role {
  background: rgba(90,200,250,0.15);
  color: #5ac8fa;
  border: 1px solid rgba(90,200,250,0.3);
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 8px;
  font-weight: 600;
}

/* Ticket status badges (Open / Closed) */
.support-status-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 6px;
  vertical-align: middle;
  margin-left: 6px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.support-status-badge.open {
  background: rgba(48,209,88,0.15);
  color: #30d158;
  border: 1px solid rgba(48,209,88,0.3);
}
.support-status-badge.closed {
  background: rgba(142,142,147,0.15);
  color: #8e8e93;
  border: 1px solid rgba(142,142,147,0.3);
}

/* Closed ticket item dimming */
.support-ticket-item.support-ticket-closed {
  opacity: 0.5;
}

/* Close ticket button */
.support-close-ticket-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
  padding: 8px 0;
  border: none;
  background: rgba(255,69,58,0.08);
  color: #ff453a;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
  flex-shrink: 0;
}
.support-close-ticket-btn:hover { background: rgba(255,69,58,0.16); }
.support-close-ticket-btn svg { stroke: #ff453a; }

/* Closed banner in messages */
.support-closed-banner {
  text-align: center;
  padding: 10px;
  color: #8e8e93;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border-top: 1px solid rgba(142,142,147,0.15);
  margin-top: 8px;
}

/* Status info at top of messages */
.support-status-info {
  text-align: center;
  padding: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.support-status-info.open { color: #30d158; }

/* Disabled input bar (closed ticket) */
.support-input-bar.support-input-disabled {
  opacity: 0.35;
  pointer-events: none;
}

/* Numeric unread badge on support icon */
#supportDot {
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  background: #ff453a;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  line-height: 1;
  position: absolute;
  top: -2px;
  right: -4px;
}

/* Blue verification request badge on support icon */
#supportVerifyDot {
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  background: #5865F2;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  line-height: 1;
  position: absolute;
  top: -2px;
  left: -4px;
}

/* Account management wrapper for security badge */
.account-mgmt-wrapper {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
}
.account-mgmt-wrapper #btnAccountManagement {
  flex: 1;
}

/* Account security reminder badge */
.account-security-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #ff9f0a;
  color: #000;
  font-size: 13px;
  font-weight: 900;
  cursor: help;
  position: absolute;
  right: -11px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  flex-shrink: 0;
  animation: securityPulse 2s ease-in-out infinite;
}
@keyframes securityPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,159,10,0.4); }
  50% { box-shadow: 0 0 0 6px rgba(255,159,10,0); }
}
.account-security-badge .security-tooltip {
  display: none;
  position: absolute;
  bottom: calc(100% + 8px);
  right: 0;
  background: rgba(30,30,34,0.96);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  padding: 10px 14px;
  color: rgba(255,255,255,0.85);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  width: 220px;
  white-space: normal;
  z-index: 9999;
  pointer-events: none;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}
.account-security-badge:hover .security-tooltip { display: block; }

/* === Custom Dialog (kzConfirm / kzPrompt) === */
.kz-dialog-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(6px);
  z-index: 9999999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s;
}
.kz-dialog-overlay.kz-dialog-visible { opacity: 1; }
.kz-dialog-overlay.kz-dialog-closing { opacity: 0; }
.kz-dialog-box {
  background: rgba(28,28,32,0.97);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px;
  padding: 24px;
  min-width: 300px;
  max-width: 400px;
  width: 90vw;
  box-shadow: 0 16px 48px rgba(0,0,0,0.6);
  transform: scale(0.92) translateY(10px);
  transition: transform 0.2s;
}
.kz-dialog-visible .kz-dialog-box { transform: scale(1) translateY(0); }
.kz-dialog-closing .kz-dialog-box { transform: scale(0.92) translateY(10px); }
.kz-dialog-title {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 12px;
}
.kz-dialog-message {
  font-size: 13.5px;
  color: rgba(255,255,255,0.82);
  line-height: 1.55;
  margin-bottom: 16px;
  white-space: pre-line;
  word-break: break-word;
}
.kz-dialog-input {
  width: 100%;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color: #fff;
  font-size: 13.5px;
  margin-top: 8px;
  margin-bottom: 4px;
  outline: none;
  transition: border-color 0.2s;
  box-sizing: border-box;
}
.kz-dialog-input:focus { border-color: rgba(168,85,247,0.5); }
.kz-dialog-buttons {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 8px;
}
.kz-dialog-btn {
  padding: 8px 20px;
  border-radius: 10px;
  border: none;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.kz-dialog-cancel {
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.7);
}
.kz-dialog-cancel:hover { background: rgba(255,255,255,0.14); color: #fff; }
.kz-dialog-ok {
  background: linear-gradient(135deg, #a855f7, #7c3aed);
  color: #fff;
}
.kz-dialog-ok:hover { filter: brightness(1.15); }

/* ========================================= */
/* Story Link Sticker (Instagram-like)       */
/* ========================================= */
.story-link-sticker {
  position: absolute;
  bottom: 90px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 310;
  cursor: pointer;
  animation: storyLinkPulse 2s ease-in-out infinite;
}
.story-link-sticker-inner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: rgba(255,255,255,0.95);
  border-radius: 22px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.35);
  transition: transform 0.2s, box-shadow 0.2s;
}
.story-link-sticker:hover .story-link-sticker-inner {
  transform: scale(1.05);
  box-shadow: 0 6px 28px rgba(0,0,0,0.45);
}
.story-link-sticker:active .story-link-sticker-inner {
  transform: scale(0.97);
}
.story-link-icon {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.story-link-icon img,
.story-link-icon svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.story-link-label {
  font-size: 13px;
  font-weight: 700;
  color: #111;
  white-space: nowrap;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
}
@keyframes storyLinkPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.85; }
}

/* Story Upload Preview Modal */
.story-preview-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000000;
  background: rgba(0,0,0,0.92);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.25s;
}
.story-preview-overlay.visible { opacity: 1; }
.story-preview-box {
  width: 90%;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.story-preview-media {
  width: 100%;
  max-height: 50vh;
  border-radius: 16px;
  object-fit: contain;
  background: #000;
}
.story-preview-link-row {
  width: 100%;
  display: flex;
  gap: 8px;
  align-items: center;
}
.story-preview-link-input {
  flex: 1;
  height: 42px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.08);
  color: #fff;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 500;
  outline: none;
  transition: border-color 0.2s;
}
.story-preview-link-input::placeholder { color: rgba(255,255,255,0.35); }
.story-preview-link-input:focus { border-color: rgba(var(--accent-rgb),0.6); }
.story-preview-link-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: default;
}
.story-preview-link-icon svg { color: rgba(255,255,255,0.5); }
.story-preview-buttons {
  display: flex;
  gap: 10px;
  width: 100%;
}
.story-preview-buttons button {
  flex: 1;
  height: 44px;
  border-radius: 12px;
  border: none;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
}
.story-preview-cancel {
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.7);
}
.story-preview-cancel:hover { background: rgba(255,255,255,0.14); color: #fff; }
.story-preview-publish {
  background: linear-gradient(135deg, #a855f7, #7c3aed);
  color: #fff;
}
.story-preview-publish:hover { filter: brightness(1.15); }

/* === COMMUNITY FF === */
.ff-community-section {
  margin-top: 16px;
  margin-bottom: 8px;
}
.ff-community-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.ff-community-title {
  font-size: 15px;
  font-weight: 700;
  color: rgba(255,255,255,0.85);
  letter-spacing: 0.3px;
}
.ff-community-card {
  position: relative;
}
.ff-cf-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 2px;
}
.ff-cf-avatar {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(var(--accent-rgb),0.4);
  flex-shrink: 0;
}
.ff-cf-nick {
  color: rgba(var(--accent-rgb),0.75);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ff-community-create {
  border: 2px dashed rgba(var(--accent-rgb),0.25);
  background: rgba(var(--accent-rgb),0.04);
}
.ff-community-create:hover {
  border-color: rgba(var(--accent-rgb),0.5);
  background: rgba(var(--accent-rgb),0.1);
}
.ff-community-folder-header {
  margin-bottom: 12px;
}
.ff-cf-owner-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.04);
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.06);
}
.ff-cf-owner-ava {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(var(--accent-rgb),0.5);
  flex-shrink: 0;
}
.ff-cf-owner-info {
  flex: 1;
  min-width: 0;
}
.ff-cf-owner-name {
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ff-cf-owner-nick {
  color: rgba(var(--accent-rgb),0.7);
  font-size: 11px;
  font-weight: 600;
}
.ff-cf-upload-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: rgba(var(--accent-rgb),0.2);
  color: rgba(var(--accent-rgb),0.9);
  border: 1px solid rgba(var(--accent-rgb),0.3);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  margin-left: auto;
  flex-shrink: 0;
}
.ff-cf-upload-btn:hover {
  background: rgba(var(--accent-rgb),0.35);
  border-color: rgba(var(--accent-rgb),0.5);
}
.ff-cf-create-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  background: rgba(var(--accent-rgb),0.18);
  color: rgba(var(--accent-rgb),0.9);
  border: 1px solid rgba(var(--accent-rgb),0.35);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  margin-left: auto;
  flex-shrink: 0;
}
.ff-cf-create-btn:hover {
  background: rgba(var(--accent-rgb),0.32);
  border-color: rgba(var(--accent-rgb),0.6);
  color: #fff;
}

/* FF + Add button in header */
.ff-add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: rgba(255,255,255,0.12);
  border: 1.5px solid rgba(255,255,255,0.22);
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.18s, border-color 0.18s;
  margin-right: 4px;
}
.ff-add-btn:hover {
  background: rgba(255,255,255,0.22);
  border-color: rgba(255,255,255,0.45);
}

/* FF Upload Modal */
.ff-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(0,0,0,0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s;
}
.ff-modal-overlay.active { opacity: 1; }
.ff-modal {
  background: #1a1720;
  border: 1px solid rgba(var(--accent-rgb),0.25);
  border-radius: 16px;
  width: 300px;
  max-width: 92vw;
  overflow: hidden;
  transform: translateY(12px);
  transition: transform 0.2s;
}
.ff-modal-overlay.active .ff-modal { transform: translateY(0); }
.ff-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.ff-modal-title {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
}
.ff-modal-close {
  background: none;
  border: none;
  color: rgba(255,255,255,0.45);
  font-size: 16px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 6px;
  transition: color 0.15s;
}
.ff-modal-close:hover { color: #fff; }
.ff-modal-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
}
.ff-modal-opt {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s, border-color 0.15s;
  width: 100%;
}
.ff-modal-opt:hover {
  background: rgba(var(--accent-rgb),0.14);
  border-color: rgba(var(--accent-rgb),0.35);
}
.ff-modal-opt-icon { font-size: 26px; line-height: 1; }
.ff-modal-opt-name { font-size: 14px; font-weight: 700; color: #fff; }
.ff-modal-opt-sub { font-size: 11px; color: rgba(255,255,255,0.45); margin-top: 2px; }
.ff-modal-input {
  width: 100%;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  color: #fff;
  font-size: 13px;
  padding: 8px 10px;
  outline: none;
  box-sizing: border-box;
}
.ff-modal-input:focus { border-color: rgba(var(--accent-rgb),0.5); }
.ff-modal-btn-primary {
  flex: 1;
  padding: 9px 0;
  background: rgba(var(--accent-rgb),0.75);
  color: #fff;
  border: none;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
}
.ff-modal-btn-primary:hover { background: rgba(var(--accent-rgb),1); }
.ff-modal-btn-secondary {
  flex: 1;
  padding: 9px 0;
  background: rgba(255,255,255,0.07);
  color: rgba(255,255,255,0.6);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 9px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.ff-modal-btn-secondary:hover { background: rgba(255,255,255,0.12); color: #fff; }

/* Community folder avatar badge — top-right corner */
.ff-media-card { position: relative; }
.ff-cf-avatar-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid rgba(var(--accent-rgb),0.7);
  overflow: hidden;
  z-index: 3;
  pointer-events: none;
}
.ff-cf-avatar-badge img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Creator avatar wrap — top-right on folder cards */
.ff-creator-avatar-wrap {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  z-index: 4;
  pointer-events: none;
}
.ff-creator-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid rgba(var(--accent-rgb),0.8);
  object-fit: cover;
}
/* Verified overlay on creator avatar — bottom-right like a notification badge */
.ff-creator-ver {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 14px;
  height: 14px;
  object-fit: contain;
  z-index: 5;
  pointer-events: none;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
}
/* Creator nickname badge — bottom-right on folder cards */
.ff-creator-nick {
  position: absolute;
  bottom: 36px;
  right: 6px;
  background: rgba(0,0,0,0.72);
  color: rgba(var(--accent-rgb),0.95);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 6px;
  z-index: 3;
  pointer-events: none;
  max-width: 70%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Uploader nickname badge — bottom-right on media file cards */
.ff-uploader-nick {
  position: absolute;
  bottom: 36px;
  right: 6px;
  background: rgba(0,0,0,0.72);
  color: rgba(var(--accent-rgb),0.95);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 6px;
  z-index: 3;
  pointer-events: none;
  max-width: 70%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Avatar badge on Last Updates community cards */
.ff-update-card { position: relative; }
.ff-update-avatar {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid rgba(var(--accent-rgb),0.8);
  object-fit: cover;
  z-index: 4;
  pointer-events: none;
}

/* Notify bell button — top-left on folder cards */
.ff-notify-bell {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(var(--accent-rgb),0.85);
  border: none;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 5;
  transition: transform 0.15s, background 0.15s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.ff-notify-bell:hover {
  background: rgba(var(--accent-rgb),1);
  transform: scale(1.12);
}
.ff-notify-bell svg {
  width: 15px;
  height: 15px;
}

/* Notify modal input */
.ff-modal-input {
  width: 100%;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color: #fff;
  font-size: 13px;
  outline: none;
  box-sizing: border-box;
}
.ff-modal-input:focus {
  border-color: rgba(var(--accent-rgb),0.6);
}
.ff-modal-input::placeholder {
  color: rgba(255,255,255,0.3);
}

/* Notify modal buttons */
.ff-modal-btn-primary {
  flex: 1;
  padding: 9px 16px;
  border: none;
  border-radius: 8px;
  background: rgba(var(--accent-rgb),0.9);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
}
.ff-modal-btn-primary:hover { background: rgba(var(--accent-rgb),1); }
.ff-modal-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.ff-modal-btn-secondary {
  flex: 1;
  padding: 9px 16px;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 8px;
  background: transparent;
  color: rgba(255,255,255,0.7);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.ff-modal-btn-secondary:hover { background: rgba(255,255,255,0.06); }

/* Warning text in upload/create folder modal */
.ff-modal-warning {
  margin-top: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(255,180,0,0.1);
  border: 1px solid rgba(255,180,0,0.25);
  color: rgba(255,200,80,0.9);
  font-size: 11px;
  line-height: 1.5;
}
.ff-modal-warning b {
  color: rgba(255,100,80,1);
}

/* Delete button on folder/media cards */
.ff-delete-btn {
  position: absolute;
  bottom: 8px;
  left: 8px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255,60,60,0.85);
  border: none;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 5;
  transition: transform 0.15s, background 0.15s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
  opacity: 0;
  pointer-events: none;
}
.ff-media-card:hover .ff-delete-btn,
.ff-media-card:focus-within .ff-delete-btn {
  opacity: 1;
  pointer-events: auto;
}
.ff-delete-btn:hover {
  background: rgba(255,40,40,1);
  transform: scale(1.15);
}

/* Community media nickname badge — bottom-right corner */
.ff-cf-nick-badge {
  position: absolute;
  bottom: 36px;
  right: 6px;
  background: rgba(0,0,0,0.72);
  color: rgba(var(--accent-rgb),0.95);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 6px;
  z-index: 3;
  pointer-events: none;
  max-width: 80%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ========== VERIFICATION & PREMIUM BADGES ========== */
.kzn-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex-shrink: 0;
  vertical-align: middle;
  margin-left: 3px;
}
.kzn-badge svg { width: 100%; height: 100%; }
.kzn-badge-premium { filter: drop-shadow(0 0 3px rgba(255, 215, 0, 0.5)); }
.kzn-badge-verified { filter: drop-shadow(0 0 3px rgba(29, 161, 242, 0.5)); }
.kzn-badge-sm { width: 12px; height: 12px; margin-left: 2px; }
.kzn-badge-xs { width: 10px; height: 10px; margin-left: 1px; }
.kzn-avatar-badge-wrap { position: relative; display: inline-block; }
.kzn-avatar-badge-wrap .kzn-badge-corner {
  position: absolute; bottom: -1px; right: -1px;
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--bg, #0C0A09);
}
.am-verification-section {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 16px; padding: 14px;
}
.am-verification-status {
  display: flex; align-items: center; gap: 8px;
  padding: 10px; border-radius: 12px; margin-bottom: 10px;
  font-size: 13px; font-weight: 600;
}
.am-verification-status.verified {
  background: rgba(29, 161, 242, 0.08);
  border: 1px solid rgba(29, 161, 242, 0.15); color: #1DA1F2;
}
.am-verification-status.pending {
  background: rgba(255, 193, 7, 0.08);
  border: 1px solid rgba(255, 193, 7, 0.15); color: #FFC107;
}
.am-premium-toggle {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; background: rgba(255,215,0,0.04);
  border: 1px solid rgba(255,215,0,0.10); border-radius: 14px;
  cursor: pointer; transition: background 0.2s;
}
.am-premium-toggle:hover { background: rgba(255,215,0,0.08); }
.am-premium-toggle .toggle-switch {
  width: 44px; height: 24px; border-radius: 12px;
  background: rgba(255,255,255,0.15); position: relative;
  transition: background 0.3s; flex-shrink: 0;
}
.am-premium-toggle .toggle-switch.active { background: #FFD700; }
.am-premium-toggle .toggle-switch::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff; transition: transform 0.3s;
}
.am-premium-toggle .toggle-switch.active::after { transform: translateX(20px); }

/* Account Management card style */
.am-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 16px;
  padding: 14px 16px;
}
.am-card-gold {
  background: rgba(255,215,0,0.04);
  border-color: rgba(255,215,0,0.14);
}
.am-card-blue {
  background: rgba(29,161,242,0.05);
  border-color: rgba(29,161,242,0.18);
}
/* Toggle switch used inside am-card (premium badge) */
#accountMgmtModal .toggle-switch {
  width: 44px; height: 24px; border-radius: 12px;
  background: rgba(255,255,255,0.15); position: relative;
  transition: background 0.3s; flex-shrink: 0; cursor: pointer;
}
#accountMgmtModal .toggle-switch.active { background: #FFD700; }
#accountMgmtModal .toggle-switch::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff; transition: transform 0.3s;
}
#accountMgmtModal .toggle-switch.active::after { transform: translateX(20px); }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }