/* ============================================================
   CHATIK FM — Mobile CSS v10.6 (Fixes, Notifications & Links)
   ============================================================ */

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  src: local('Poppins Regular'), local('Poppins-Regular'),
       url(/fonts/Poppins.woff2) format("woff2");
  font-display: swap; /* Чтобы текст не пропадал при медленной загрузке */
}

:root {
  --cfm-primary:        #0284c7;
  --cfm-primary-light:  #38bdf8;
  --cfm-primary-dark:   #075985;
  --cfm-accent:         #8b5cf6;
  --cfm-danger:         #ef4444;
  --cfm-success:        #22c55e;
  --cfm-bg-grad-1:      #e0f2fe;
  --cfm-bg-grad-2:      #f0f9ff;
  --cfm-surface:        #ffffff;
  --cfm-surface-2:      #f0f9ff;
  --cfm-bubble-in:      #ffffff;
  --cfm-bubble-in-text: #0c1a2e;
  --cfm-bubble-out:     linear-gradient(135deg, #38bdf8 0%, #0284c7 100%);
  --cfm-bubble-mine:    #dbeafe;
  --cfm-bubble-priv:    linear-gradient(135deg, #34d399 0%, #10b981 100%);
  --cfm-text:           #0c1a2e;
  --cfm-text-muted:     #64748b;
  --cfm-border:         rgba(2, 132, 199, 0.10);
  --cfm-shadow-sm:      0 2px 8px rgba(2, 132, 199, 0.08);
  --cfm-shadow-md:      0 6px 18px rgba(2, 132, 199, 0.12);
  --cfm-shadow-lg:      0 10px 30px rgba(2, 132, 199, 0.25);
  --cfm-header-h:       56px;
  --cfm-footer-h:       56px;
  --cfm-bottom-nav-h:   60px;
  --cfm-safe-top:       env(safe-area-inset-top, 0px);
  --cfm-safe-bottom:    env(safe-area-inset-bottom, 0px);
}

body.dark {
  --cfm-bg-grad-1:      #0a1628;
  --cfm-bg-grad-2:      #0f1e35;
  --cfm-surface:        #162236;
  --cfm-surface-2:      #1e2f47;
  --cfm-bubble-in:      #1e2f47;
  --cfm-bubble-in-text: #e2e8f0;
  --cfm-bubble-out:     linear-gradient(135deg, #0ea5e9 0%, #075985 100%);
  --cfm-bubble-mine:    #1e3a5f;
  --cfm-text:           #e2e8f0;
  --cfm-text-muted:     #94a3b8;
  --cfm-border:         rgba(56, 189, 248, 0.12);
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--cfm-bg-grad-1) !important; -webkit-text-size-adjust: 100%; }

body {
  font-family: "Poppins", "Roboto", sans-serif;
  height: 100%; margin: 0; padding: 0;
  color: var(--cfm-text); overflow: hidden;
  background: linear-gradient(180deg, var(--cfm-bg-grad-1) 0%, var(--cfm-bg-grad-2) 100%) !important;
  transition: background 0.3s, color 0.3s;
  -webkit-tap-highlight-color: transparent; /* Убирает мерцание при тапе на кнопки */
}

/* ---------- ФОРМА ВХОДА ---------- */
/* ИСПРАВЛЕНО: z-index повышен, чтобы нижнее меню не перекрывало форму входа */
#enter { position: fixed; inset: 0; z-index: 20000; background: linear-gradient(135deg, #dbeafe 0%, #e0f2fe 30%, #f0f9ff 70%, #e0f2fe 100%); display: flex; align-items: center; justify-content: center; padding: 20px; overflow-y: auto; }
body.dark #enter { background: linear-gradient(135deg, #0a1628 0%, #0f1e35 50%, #162236 100%); }
.wrapper { display: flex; align-items: center; flex-direction: column; width: 100%; max-width: 420px; }
#formContent { position: relative; width: 100%; background: var(--cfm-surface); border-radius: 28px; box-shadow: 0 24px 60px rgba(2, 132, 199, 0.20); text-align: center; overflow: hidden; border: 1px solid rgba(255,255,255,0.6); }
#formContent::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: linear-gradient(90deg, #38bdf8, #8b5cf6, #38bdf8); background-size: 200% 100%; animation: gradientShift 4s infinite; }
@keyframes gradientShift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
#formContent h2 { font-size: 13px; font-weight: 600; text-transform: uppercase; margin: 32px 0 8px; color: var(--cfm-text-muted); }
#formContent h2.active { color: var(--cfm-primary); }
#formContent #icon { width: 90px; height: 90px; margin: 4px auto 12px; border-radius: 50%; object-fit: contain; background: #fff; padding: 5px; box-shadow: 0 8px 24px rgba(56, 189, 248, 0.35); }
#formContent input[type=text], #formContent input[type=password] { background: var(--cfm-surface-2); color: var(--cfm-text); border: 2px solid transparent; padding: 15px 20px; text-align: left; font-weight: 500; font-size: 15px; margin: 8px auto; display: block; width: 82%; border-radius: 14px; }
#formContent input[type=text]:focus, #formContent input[type=password]:focus { border-color: var(--cfm-primary); box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.15); outline: none; }
#formContent input[type=submit] { width: 82%; background: linear-gradient(135deg, #38bdf8 0%, #0284c7 100%); border: none; color: #fff; padding: 16px 20px; text-transform: uppercase; font-size: 14px; font-weight: 700; border-radius: 14px; box-shadow: 0 10px 30px rgba(2, 132, 199, 0.35); margin: 20px auto 8px; display: block; transition: 0.25s; }
#formContent input[type=submit]:active { transform: scale(0.98); }
#formFooter { padding: 8px 20px 32px; display: flex; flex-direction: column; gap: 8px; }
#formFooter a { color: var(--cfm-primary); text-decoration: none; font-weight: 500; font-size: 14px; }
.alert-mess { font-size: 13px; background: linear-gradient(135deg, #38bdf8, #0284c7); color: #fff; padding: 12px 16px; border-radius: 14px; width: 90%; max-width: 420px; margin: 16px auto 0; line-height: 1.4; box-shadow: none; }

/* ---------- ЧАТ ---------- */
.chat { display: flex; flex-direction: column; width: 100%; height: 100vh; height: 100dvh; position: fixed; inset: 0; background: var(--cfm-bg-grad-2) !important; }
body.dark .chat { background: var(--cfm-bg-grad-1) !important; }

/* ---------- ШАПКА ---------- */
#chat-header, .chat header#chat-header { position: fixed; top: 0; left: 0; right: 0; height: calc(var(--cfm-header-h) + var(--cfm-safe-top)); padding-top: var(--cfm-safe-top); z-index: 10; background: linear-gradient(135deg, #0284c7 0%, #38bdf8 50%, #0ea5e9 100%); box-shadow: 0 4px 20px rgba(2, 132, 199, 0.25); display: flex; align-items: center; justify-content: center; }
body.dark .chat header#chat-header { background: linear-gradient(135deg, #0f1e35 0%, #1e2f47 50%, #162236 100%); }
#chat-header h2 { position: absolute; left: 55px; right: 160px; text-align: center; font-weight: 700; font-size: 15px; color: #fff; letter-spacing: 1px; margin: 0; text-shadow: 0 2px 4px rgba(0,0,0,0.15); z-index: 1; pointer-events: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
div#content div.profile-btn { position: absolute; top: calc(var(--cfm-safe-top) + 11px); left: 10px; height: 34px; width: 44px; background: rgba(255,255,255,0.2); border-radius: 20px; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 2px; border: 1.5px solid rgba(255,255,255,0.15); backdrop-filter: blur(8px); z-index: 6; }
div#content div.profile-btn i.fa-user { font-size: 14px; color: #fff; }
div#content div.profile-btn i.fa-caret-down { font-size: 10px; color: #fff; }
#theme-toggle, #chat-user-num2, #radios { position: absolute; top: calc(var(--cfm-safe-top) + 11px); height: 34px; background: rgba(255,255,255,0.2); border-radius: 50%; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; border: 1.5px solid rgba(255,255,255,0.15); backdrop-filter: blur(8px); z-index: 6; }
#theme-toggle { right: 140px; width: 34px; font-size: 16px; }
#radios { right: 84px; width: 34px; }
/* ИСПРАВЛЕНО: добавлено ограничение ширины, чтобы цифры не наезжали на другие кнопки */
#chat-user-num2 { right: 16px; width: auto !important; min-width: 40px; max-width: 65px; padding: 0 8px !important; border-radius: 20px !important; gap: 4px; font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#radios i { width: 18px; height: 18px; background: url(/mobile/img/rad.png) no-repeat center / contain; }
.da4 { background: var(--cfm-accent); color: #fff; font-size: 10px; font-weight: 700; padding: 2px 5px; border-radius: 10px; }

/* ---------- РАДИО ---------- */
#radio-sidebar { position: fixed; top: calc(var(--cfm-header-h) + var(--cfm-safe-top)); left: 0; width: 100%; background: var(--cfm-surface); border-bottom: 2px solid var(--cfm-primary-light); box-shadow: 0 4px 15px rgba(0,0,0,0.1); z-index: 9; display: flex; flex-direction: column; gap: 8px; padding: 12px 15px; opacity: 0; visibility: hidden; transform: translateY(-20px); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
body.dark #radio-sidebar { background: var(--cfm-surface-2); box-shadow: 0 4px 15px rgba(0,0,0,0.4); border-bottom-color: var(--cfm-accent); }
#radio-sidebar.radio-open { opacity: 1; visibility: visible; transform: translateY(0); }
.radio-top-row { display: flex; align-items: center; gap: 15px; width: 100%; }
.radio-play-btn { width: 42px; height: 42px; border-radius: 50%; background: var(--cfm-primary); color: #fff; border: none; display: flex; align-items: center; justify-content: center; font-size: 18px; cursor: pointer; flex-shrink: 0; box-shadow: 0 4px 10px rgba(2,132,199,0.3); transition: 0.2s; }
.radio-play-btn:active { transform: scale(0.9); }
.radio-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.radio-vol-slider { width: 100%; height: 4px; -webkit-appearance: none; background: var(--cfm-border); border-radius: 2px; outline: none; }
.radio-vol-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--cfm-accent); cursor: pointer; }
.radio-stol-btn { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: var(--cfm-accent); color: #fff; text-decoration: none; font-size: 18px; flex-shrink: 0; box-shadow: 0 4px 10px rgba(139, 92, 246, 0.3); transition: 0.2s; }
.radio-stol-btn:active { transform: scale(0.9); }
.radio-track-wrapper { width: 100%; overflow: hidden; font-size: 12px; font-weight: 600; color: var(--cfm-primary); text-align: left; background: var(--cfm-surface-2); padding: 4px 8px; border-radius: 6px; }
body.dark .radio-track-wrapper { background: var(--cfm-bg-grad-1); }
.radio-dj-row { display: flex; align-items: center; justify-content: space-between; width: 100%; border-top: 1px solid var(--cfm-border); padding-top: 8px; }
.radio-dj-info { display: flex; align-items: center; gap: 10px; }
#radioAvatar { width: 54px; height: 54px; border-radius: 50%; background: linear-gradient(135deg, #38bdf8 0%, #8b5cf6 50%, #0284c7 100%); padding: 3px; box-sizing: border-box; flex-shrink: 0; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(2, 132, 199, 0.35); transition: transform 0.3s, box-shadow 0.3s; }
#radioAvatar:hover { transform: scale(1.05); box-shadow: 0 6px 20px rgba(139, 92, 246, 0.45); }
#radioAvatar > img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; border: 2px solid var(--cfm-surface); box-sizing: border-box; }
#radioAvatar > .avatar-placeholder { width: 100%; height: 100%; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--cfm-primary-light); color: #fff; font-size: 20px; border: 2px solid var(--cfm-surface); box-sizing: border-box; }
.radio-dj-text { display: flex; flex-direction: column; text-align: left; }
.radio-live-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 9px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: var(--cfm-danger); margin-bottom: 3px; line-height: 1; }
.radio-live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cfm-danger); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); animation: radio-pulse 1.6s infinite; flex-shrink: 0; }
@keyframes radio-pulse { 0% { transform: scale(0.9); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); } 70% { transform: scale(1); box-shadow: 0 0 0 7px rgba(239, 68, 68, 0); } 100% { transform: scale(0.9); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); } }
.radio-dj-name { font-weight: 800; font-size: 16px; line-height: 1.2; letter-spacing: 0.3px; background: linear-gradient(135deg, #0284c7 0%, #8b5cf6 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; filter: drop-shadow(0 1px 2px rgba(2, 132, 199, 0.20)); transition: filter 0.3s; }
.radio-dj-name:hover { filter: drop-shadow(0 2px 6px rgba(139, 92, 246, 0.45)); }
body.dark .radio-dj-name { background: linear-gradient(135deg, #38bdf8 0%, #a78bfa 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.radio-listeners { font-size: 11px; color: var(--cfm-text-muted); display: flex; align-items: center; gap: 4px; margin-top: 2px; }
.my_player, #my_player_custom, #my_loading, #my_timer, #my_play, #my_volumediv_e { position: absolute !important; left: -9999px !important; top: -9999px !important; width: 200px !important; height: 100px !important; overflow: hidden !important; opacity: 0 !important; pointer-events: none !important; }

/* ---------- СООБЩЕНИЯ ---------- */
.chat-pr { position: fixed; top: calc(var(--cfm-header-h) + var(--cfm-safe-top)); bottom: calc(var(--cfm-footer-h) + var(--cfm-bottom-nav-h) + var(--cfm-safe-bottom)); left: 0; right: 0; overflow: hidden; background: var(--cfm-bg-grad-2) !important; }
body.dark .chat-pr { background: var(--cfm-bg-grad-1) !important; }

#leftdiv { padding: 12px 14px !important; display: flex; flex-direction: column; height: 100% !important; overflow-y: auto !important; overflow-x: hidden !important; position: absolute !important; inset: 0 !important; text-align: left; background: var(--cfm-bg-grad-2) !important; -webkit-overflow-scrolling: touch; }
body.dark #leftdiv { background: var(--cfm-bg-grad-1) !important; }

.message { display: flex; flex-direction: column; margin: 4px 0; width: 100%; clear: both; }
.message.left { align-items: flex-start; }
.message.right { align-items: flex-end; }
.message-text { display: inline-block; max-width: 85%; padding: 10px 14px; font-size: 15px; line-height: 1.45; word-break: break-word; box-shadow: var(--cfm-shadow-sm); }
.message.left .message-text { background: var(--cfm-bubble-in); color: var(--cfm-bubble-in-text); border-radius: 18px 18px 18px 4px; border: 1px solid var(--cfm-border); }
.message.left .d { background: var(--cfm-bubble-mine); color: var(--cfm-text); }
.message.right .message-text { background: var(--cfm-bubble-out); color: #fff; border-radius: 18px 18px 4px 18px; box-shadow: var(--cfm-shadow-md); }
.message.right .message-text-pr { background: var(--cfm-bubble-priv); }
.message-text:before, .message-text:after { display: none !important; }
.message-text img { max-width: 100%; height: auto; display: block; margin: 8px 0; border-radius: 8px; }
#leftdiv > div:not(.message) { display: inline-block; padding: 8px 14px; font-size: 14px; background: var(--cfm-surface); border-radius: 12px; margin: 6px 0; color: var(--cfm-text); border: 1px solid var(--cfm-border); }
.an { vertical-align: middle; margin-right: 3px; display: inline-block; max-width: 100%; }
.clickable-time { color: var(--cfm-text-muted); font-size: 11px; margin-right: 5px; cursor: pointer; text-decoration: underline dotted; transition: color 0.2s; }
.clickable-time:active { color: var(--cfm-primary); }
.message-text.admin-hl { border: 2px solid var(--cfm-danger) !important; box-shadow: 0 0 12px rgba(239,68,68,0.4) !important; }

/* Жесткий градиент для ников в ВСЕХ темах */
.message-text a, .message-text a b, .message-text a strong, #slide-users #users li a, #slide-users #users li a b {
    background: linear-gradient(135deg, #0284c7 0%, #8b5cf6 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    text-shadow: none !important;
    font-weight: 700 !important;
}
body.dark .message-text a, body.dark .message-text a b, body.dark .message-text a strong, body.dark #slide-users #users li a, body.dark #slide-users #users li a b {
    background: linear-gradient(135deg, #38bdf8 0%, #a78bfa 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}

/* Красивые системные плашки (Вход, Выход, Смена комнаты, Бан, Форум, Галерея) */
.room-transition-notify {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 16px;
    margin: 6px auto;
    background: var(--cfm-surface-2);
    border: 1px solid var(--cfm-border);
    border-radius: 20px;
    font-size: 13px;
    color: var(--cfm-text-muted);
    text-align: center;
    box-shadow: var(--cfm-shadow-sm);
    align-self: center;
    max-width: 95%;
    word-break: break-word;
}
.room-transition-notify i { font-size: 16px; flex-shrink: 0; }
.room-transition-notify b { color: var(--cfm-text); font-weight: 700; }

/* ИСПРАВЛЕНО: Ссылки внутри системных плашек должны быть видны, а не градиентными */
.room-transition-notify a {
    background: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    -webkit-text-fill-color: var(--cfm-primary) !important;
    color: var(--cfm-primary) !important;
    text-decoration: underline !important;
    font-weight: 700 !important;
}
body.dark .room-transition-notify a {
    -webkit-text-fill-color: var(--cfm-primary-light) !important;
    color: var(--cfm-primary-light) !important;
}

/* ---------- КРАСИВЫЕ УВЕДОМЛЕНИЯ (КОЛЛЕКЦИИ, ПОДАРКИ) ---------- */
.message-text.system-notify {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    display: block !important;
}

.collection-notify {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    background: linear-gradient(145deg, #1e293b, #0f172a) !important;
    border: 2px solid rgba(56, 189, 248, 0.4) !important;
    border-radius: 20px !important;
    padding: 20px 15px !important;
    margin: 10px 0 !important;
    color: #f8fafc !important;
    text-align: center !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), inset 0 0 20px rgba(56, 189, 248, 0.1) !important;
    width: 100% !important;
    box-sizing: border-box !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
    position: relative;
    overflow: hidden;
}

.collection-notify::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, #38bdf8, #8b5cf6, #fbbf24);
}

.collection-notify img {
    width: 120px !important;
    height: 120px !important;
    max-width: 120px !important;
    max-height: 120px !important;
    object-fit: contain !important;
    border-radius: 16px !important;
    margin: 15px auto !important;
    border: 3px solid #fbbf24 !important;
    background: rgba(255, 255, 255, 0.05) !important;
    box-shadow: 0 0 20px rgba(251, 191, 36, 0.4) !important;
    padding: 5px;
}

body:not(.dark) .collection-notify {
    background: linear-gradient(145deg, #ffffff, #f0f9ff) !important;
    border: 2px solid #bae6fd !important;
    color: #0f172a !important;
    box-shadow: 0 10px 25px rgba(2, 132, 199, 0.15) !important;
}
body:not(.dark) .collection-notify img {
    border-color: #f59e0b !important;
    box-shadow: 0 5px 15px rgba(245, 158, 11, 0.3) !important;
}

.gift-bag { display: inline-block; border: 1px solid rgba(0, 0, 139, 0.3); border-radius: 10px; padding: 6px 14px 6px 10px; margin: 3px 0; backdrop-filter: blur(2px); box-shadow: 0 2px 8px rgba(66,170,255,0.06); cursor: pointer; transition: background 0.2s, border-color 0.2s, box-shadow 0.2s; }
.gift-bag-img { width: 40px; height: 40px; vertical-align: middle; margin-right: 8px; }
.gift-bag-text { display: inline-block; font-size: 14px; font-weight: 700; color: #00008B; vertical-align: middle; letter-spacing: 0.2px; }
.gift-bag.claimed { background: rgba(128, 128, 128, 0.15); border-color: rgba(128, 128, 128, 0.3); cursor: default; opacity: 0.7; filter: grayscale(0.4); }
.gift-bag.claimed .gift-bag-text::after { content: ' (забрано)'; font-size: 12px; font-weight: 400; color: #888; margin-left: 6px; }
.win-announcement { display: inline-block; background: rgba(66,170,255, 0.18); border-left: 4px solid #00008B; border-radius: 6px; padding: 6px 16px; margin: 3px 0; font-size: 15px; font-weight: 700; color: #00008B; backdrop-filter: blur(2px); box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
body.dark .gift-bag-text, body.dark .win-announcement { color: #38bdf8; }
body.dark .win-announcement { border-left-color: #38bdf8; }

/* Плавающее уведомление о новом предмете коллекции */
.collection-notify.floating { position: fixed !important; top: calc(20px + var(--cfm-safe-top)) !important; left: 50% !important; transform: translateX(-50%) !important; width: 90% !important; max-width: 400px !important; z-index: 25000 !important; pointer-events: auto !important; animation: collSlideIn 0.35s cubic-bezier(0.4, 0, 0.2, 1); }
@keyframes collSlideIn { from { opacity: 0; transform: translateX(-50%) translateY(-20px); } to   { opacity: 1; transform: translateX(-50%) translateY(0); } }

/* ---------- ФУТЕР ---------- */
.chat footer { position: fixed; left: 0; right: 0; bottom: calc(var(--cfm-bottom-nav-h) + var(--cfm-safe-bottom)); height: var(--cfm-footer-h); background: var(--cfm-surface); border-top: 1px solid var(--cfm-border); box-shadow: 0 -4px 20px rgba(2, 132, 199, 0.10); z-index: 10; }
.chat footer .forms { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; height: 100%; gap: 8px; }
.input-wrapper { position: relative; flex: 1; display: flex; align-items: center; min-width: 0; }
.chat footer [type='text'] { width: 100%; height: 38px; padding: 0 40px 0 16px; background: var(--cfm-surface-2); color: var(--cfm-text); font: 14px/1 "Poppins", sans-serif; border: 1.5px solid transparent; border-radius: 20px; outline: none; margin: 0; }
.chat footer [type='text']:focus { border-color: var(--cfm-primary); box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.15); }
.chat footer .smile-button { position: absolute !important; right: 4px; top: 2px; width: 34px; height: 34px; background: transparent !important; color: var(--cfm-primary) !important; border: none; box-shadow: none !important; padding: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 10000; }
.chat footer .smile-button i { font-size: 22px; }
.chat footer .smile-button:active { transform: scale(0.9); }
.chat footer .smile-close, .chat footer .smile-open { display: none !important; }
.chat footer [type='submit'] { position: static !important; width: 36px; height: 36px; flex-shrink: 0; padding: 0; border: none; border-radius: 50%; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 14px; margin: 0; background: var(--cfm-primary); }
.chat footer [type='submit']:first-of-type { background: var(--cfm-accent); }
.chat footer [type='submit'] + [type='submit'] { background: var(--cfm-primary); }
.chat footer .smile-box { display: none; position: fixed; bottom: calc(var(--cfm-footer-h) + var(--cfm-bottom-nav-h) + var(--cfm-safe-bottom) + 10px); left: 10px; right: 10px; height: 250px; background: var(--cfm-surface); border-radius: 16px; border: 1px solid var(--cfm-border); box-shadow: 0 -4px 25px rgba(0,0,0,0.2); z-index: 9999; padding: 10px; overflow: hidden; }
.chat footer .smile-box.active { display: flex; flex-direction: column; }
.chat footer .smile-box-wrapper { width: 100%; height: 100%; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 6px; justify-content: center; align-content: start; -webkit-overflow-scrolling: touch; }
.chat footer .smile-box-wrapper a { display: flex; align-items: center; justify-content: center; padding: 2px; border-radius: 8px; background: var(--cfm-surface-2); }
.chat footer .smile-box-wrapper a:active { background: var(--cfm-border); }
.chat footer .smile-box-wrapper a img { width: 30px !important; height: 30px !important; object-fit: contain; margin: 0 !important; }
.chat footer .file, .chat footer .mp_record, .chat footer .readFile { display: none !important; }

/* ---------- НИЖНЕЕ МЕНЮ ---------- */
#bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; height: calc(var(--cfm-bottom-nav-h) + var(--cfm-safe-bottom)); padding-bottom: var(--cfm-safe-bottom); background: var(--cfm-surface); border-top: 1px solid var(--cfm-border); display: flex; justify-content: space-around; align-items: center; z-index: 10000; box-shadow: 0 -2px 10px rgba(0,0,0,0.05); }
.nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; height: 100%; color: var(--cfm-text-muted); font-size: 9px; font-weight: 600; text-decoration: none; cursor: pointer; transition: color 0.2s; }
.nav-item i { font-size: 18px; margin-bottom: 3px; transition: transform 0.2s; }
.nav-item.active { color: var(--cfm-primary); }
.nav-item.active i { transform: translateY(-2px); }

/* ---------- СПИСОК ЛЮДЕЙ ---------- */
nav#slide-users { position: fixed; top: calc(var(--cfm-header-h) + var(--cfm-safe-top)); bottom: calc(var(--cfm-footer-h) + var(--cfm-bottom-nav-h) + var(--cfm-safe-bottom)); right: -350px; width: 300px; max-width: 85vw; background: var(--cfm-surface); overflow-y: auto; transition: all 0.3s; z-index: 999; padding: 0 !important; margin: 0 !important; text-align: left !important; -webkit-overflow-scrolling: touch; }
body.user-active nav#slide-users { right: 0; }
nav#slide-users ul { padding: 0 !important; margin: 0 !important; list-style: none !important; text-align: left !important; }
#slide-users #users { padding: 0 !important; margin: 0 !important; width: 100% !important; display: block !important; font-size: 0; text-align: left !important; }
#slide-users #users b { display: block !important; font-size: 0; padding: 0 !important; margin: 0 !important; text-align: left !important; }
#slide-users #users > span:first-child { position: static !important; display: flex !important; align-items: center; justify-content: space-between !important; padding: 12px 10px !important; background: var(--cfm-surface-2) !important; border-bottom: 1px solid var(--cfm-border); color: var(--cfm-primary) !important; font-weight: 700; font-size: 13px !important; margin: 0 !important; left: auto !important; width: 100% !important; box-sizing: border-box !important; }
#slide-users #users > span:first-child font { font-size: 13px !important; }
#slide-users .da4 { position: static !important; background: var(--cfm-primary-light); color: #fff; padding: 2px 8px; border-radius: 12px; font-size: 11px !important; font-weight: 700; margin-left: 10px !important; }
#slide-users #users li { display: flex !important; align-items: center; justify-content: flex-start !important; padding: 8px 10px !important; margin: 0 !important; border-bottom: 1px solid var(--cfm-border) !important; background: var(--cfm-surface); list-style: none !important; font-size: 0 !important; width: 100% !important; box-sizing: border-box !important; text-align: left !important; }
#slide-users #users li:active { background: var(--cfm-surface-2); }
#slide-users #users li img { width: 28px !important; height: 28px !important; border-radius: 50% !important; margin: 0 8px 0 0 !important; object-fit: cover; border: 1px solid var(--cfm-border); flex-shrink: 0; }
#slide-users #users li a { font-size: 13px !important; font-weight: 600 !important; color: var(--cfm-text) !important; flex-grow: 1 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0 !important; text-decoration: none; display: block; text-align: left !important; }
#slide-users #users li > i { display: none !important; }
#slide-users #users li span { position: static !important; display: flex !important; align-items: center; gap: 4px !important; background: transparent !important; border: none !important; padding: 0 !important; margin: 0 !important; flex-shrink: 0; }

/* --- СУПЕР-ФИКС ДЛЯ КНОПОК ДЕЙСТВИЙ --- */
#slide-users #users li span a.block-btn,
#slide-users #users li span a.action-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 24px !important;
    height: 24px !important;
    border-radius: 50% !important;
    
    -webkit-text-fill-color: #fff !important;
    color: #fff !important;
    text-shadow: none !important;
    background-image: none !important;
    background-clip: padding-box !important;
    -webkit-background-clip: padding-box !important;
    
    margin-right: 2px !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2) !important;
    border: 1px solid rgba(0,0,0,0.1) !important;
    text-decoration: none !important;
}

/* Зеленый (Заблокировать) */
#slide-users #users li span a.block-btn {
    background-color: var(--cfm-success) !important; 
}

/* Красный (Разблокировать) */
#slide-users #users li span a.block-btn.blocked {
    background-color: var(--cfm-danger) !important; 
}

/* Серый (Нельзя заблокировать) */
#slide-users #users li span a.block-btn.disabled {
    background-color: #94a3b8 !important;
    cursor: not-allowed !important;
    opacity: 0.6;
}

/* Синий (Инфо) */
#slide-users #users li span a.action-btn.info-btn {
    background-color: var(--cfm-primary) !important; 
}

/* Фиолетовый (Почта) */
#slide-users #users li span a.action-btn.mail-btn {
    background-color: var(--cfm-accent) !important; 
}

/* Иконки внутри всех этих кнопок */
#slide-users #users li span a.block-btn i,
#slide-users #users li span a.action-btn i {
    font-size: 11px !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
}
/* ----------------------------------------- */

/* ---------- МЕНЮ ПРОФИЛЯ ---------- */
#profile-menu-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); backdrop-filter: blur(2px); z-index: 15000; opacity: 0; visibility: hidden; transition: all 0.3s; }
#profile-menu-overlay.active { opacity: 1; visibility: visible; }
#profile-menu { position: fixed; top: 0; left: -300px; bottom: 0; width: 280px; max-width: 85vw; background: var(--cfm-surface); z-index: 15001; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); display: flex; flex-direction: column; box-shadow: 4px 0 25px rgba(0,0,0,0.2); }
/* ИСПРАВЛЕНО: translateX(100%) предотвращает выход за границы экрана на узких смартфонах */
#profile-menu.active { transform: translateX(100%); }
.pm-header { padding: calc(20px + var(--cfm-safe-top)) 20px 20px; background: linear-gradient(135deg, var(--cfm-primary) 0%, var(--cfm-primary-light) 100%); display: flex; align-items: center; gap: 15px; color: #fff; }
body.dark .pm-header { background: linear-gradient(135deg, #0f1e35 0%, #1e2f47 100%); }
.pm-avatar { width: 50px; height: 50px; border-radius: 50%; background: #fff; object-fit: cover; border: 2px solid rgba(255,255,255,0.5); box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
.pm-user-info { display: flex; flex-direction: column; }
.pm-status { font-size: 11px; opacity: 0.9; text-transform: uppercase; letter-spacing: 0.5px; }
.pm-nick { font-size: 18px; font-weight: 700; text-shadow: 0 2px 4px rgba(0,0,0,0.2); }
.pm-list { list-style: none; padding: 10px 0; margin: 0; flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.pm-list li { display: flex; align-items: center; gap: 15px; padding: 14px 20px; cursor: pointer; font-size: 14px; font-weight: 500; color: var(--cfm-text); border-bottom: 1px solid var(--cfm-border); transition: background 0.2s; }
.pm-list li:active { background: var(--cfm-surface-2); }
.pm-list li i { font-size: 18px; color: var(--cfm-primary); width: 24px; text-align: center; }
.pm-list li.logout-item { color: var(--cfm-danger); }
.pm-list li.logout-item i { color: var(--cfm-danger); }

/* ---------- МОДАЛЬНОЕ ОКНО ---------- */
.app-modal { position: fixed; inset: 0; z-index: 20000; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(4px); display: none; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s; }
.app-modal.active { display: flex; opacity: 1; }
.app-modal-content { background: var(--cfm-surface); width: 100%; height: 100%; display: flex; flex-direction: column; position: relative; }
.app-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 15px 20px; padding-top: calc(15px + var(--cfm-safe-top)); background: var(--cfm-surface-2); border-bottom: 1px solid var(--cfm-border); }
#app-modal-title { font-size: 16px; font-weight: 700; color: var(--cfm-text); }
#app-modal-close { background: transparent; border: none; font-size: 24px; color: var(--cfm-danger); cursor: pointer; padding: 5px; }
#app-modal-close:active { transform: scale(0.9); }
.app-modal-body { flex: 1; overflow-y: auto; position: relative; -webkit-overflow-scrolling: touch; }
.app-modal-body iframe { width: 100%; height: 100%; border: none; }

.room-btn { padding: 15px 20px; border-radius: 12px; border: 2px solid transparent; font-size: 15px; font-weight: 600; cursor: pointer; text-align: left; transition: all 0.2s; display: flex; justify-content: space-between; align-items: center; width: 100%; }
.room-btn:active { transform: scale(0.98); opacity: 0.8; }

/* ---------- СЕТКА ИГР ---------- */
.games-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 12px; padding: 20px; }
.game-cell { display: flex; flex-direction: column; align-items: center; cursor: pointer; }
.game-cover { width: 100%; aspect-ratio: 1; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 10px rgba(0,0,0,0.1); margin-bottom: 8px; transition: transform 0.2s; }
.game-cover svg { width: 100%; height: 100%; display: block; }
.game-cell:active .game-cover { transform: scale(0.95); }
.game-name { font-size: 11px; font-weight: 600; color: var(--cfm-text); text-align: center; line-height: 1.2; }

/* ---------- ДОСТУПНОСТЬ ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ---------- АДАПТИВ ---------- */
@media (max-width: 380px) {
  #theme-toggle { right: 124px; width: 30px; height: 30px; top: calc(var(--cfm-safe-top) + 13px); font-size: 14px; }
  #radios { right: 74px; width: 30px; height: 30px; top: calc(var(--cfm-safe-top) + 13px); }
  #chat-user-num2 { right: 14px; height: 30px; top: calc(var(--cfm-safe-top) + 13px); font-size: 12px; padding: 0 6px !important; }
  div#content div.profile-btn { width: 40px; height: 30px; top: calc(var(--cfm-safe-top) + 13px); }
  #chat-header h2 { left: 50px; right: 150px; font-size: 14px; }
  .nav-item { font-size: 8px; }
  .nav-item i { font-size: 16px; }
}