* { box-sizing: border-box; margin: 0; padding: 0; font-family: system-ui, -apple-system, sans-serif; }
body { background: #1e1f22; color: #e6e6e6; height: 100vh; overflow: hidden; }
.screen { height: 100vh; display: flex; flex-direction: column; }

/* ===== AUTH / ЭКРАН ВХОДА ===== */
#auth { align-items: center; justify-content: center; gap: 12px; }
.meow-logo {
  font-size: 5rem; line-height: 1;
  filter: drop-shadow(0 0 20px rgba(255, 154, 60, 0.35));
  animation: meow-pulse 3s ease-in-out infinite;
}
@keyframes meow-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}
.meow-title {
  font-size: 2.6rem; font-weight: 800; color: #ff9a3c;
  letter-spacing: -1px; margin-bottom: 4px;
}
.tabs { display: flex; gap: 8px; margin-bottom: 8px; }
.tab {
  padding: 8px 18px; border: none; border-radius: 8px;
  background: #2b2d31; color: #b5bac1; cursor: pointer; font-size: 1rem;
}
.tab.active { background: #5865f2; color: white; }
#username, #password {
  padding: 10px 14px; border-radius: 8px; border: none;
  font-size: 1rem; width: 260px; background: #2b2d31; color: white;
}
.primary {
  padding: 10px 14px; border-radius: 8px; border: none;
  font-size: 1rem; background: #5865f2; color: white; cursor: pointer;
}
.primary:hover { background: #4752c4; }
.primary.small { padding: 6px 12px; font-size: 0.9rem; }
.ghost {
  padding: 10px 14px; border: none; border-radius: 8px;
  background: transparent; color: #b5bac1; cursor: pointer;
}
.ghost:hover { color: white; }
.danger {
  padding: 10px 14px; border: none; border-radius: 8px;
  background: #da373c; color: white; cursor: pointer;
}
.danger:hover { background: #a12828; }
.error { color: #f23f43; font-size: 0.9rem; min-height: 1.2em; }

/* ===== ОБЩИЙ ЛЭЙАУТ ===== */
.app { display: flex; height: 100vh; }

/* ===== САЙДБАР ===== */
.sidebar {
  width: 240px; background: #2b2d31; display: flex; flex-direction: column;
  border-right: 1px solid #1e1f22;
}
.sidebar-head {
  padding: 12px 16px; display: flex; justify-content: space-between; align-items: center;
  border-bottom: 1px solid #1e1f22;
}
.brand { font-weight: bold; color: #ff9a3c; font-size: 1.05rem; }
.icon-btn {
  background: transparent; border: none; color: #b5bac1; cursor: pointer;
  font-size: 1.1rem; padding: 4px 8px; border-radius: 6px; line-height: 1;
}
.icon-btn:hover { background: #383a40; color: white; }

.sidebar-section { padding: 12px 8px; }
.section-title {
  font-size: 0.72rem; color: #949ba4; text-transform: uppercase;
  padding: 4px 8px; margin-bottom: 4px;
}

/* Переключатель каналы / лс */
.sidebar-tabs { display: flex; gap: 4px; margin-bottom: 8px; padding: 0 4px; }
.sidebar-tab {
  flex: 1; padding: 6px 8px; border: none; border-radius: 6px;
  background: #232428; color: #949ba4; cursor: pointer; font-size: 0.85rem;
}
.sidebar-tab:hover { color: white; }
.sidebar-tab.active { background: #5865f2; color: white; }

/* Элемент канала/ЛС */
.channel-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 8px; cursor: pointer;
  color: #b5bac1; margin-bottom: 2px;
}
.channel-item:hover { background: #383a40; color: white; }
.channel-item.active { background: #404249; color: white; }
.ch-avatar {
  font-size: 1rem; width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
}
.ch-avatar img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.ch-name {
  font-size: 0.95rem; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; flex: 1;
}
.ch-members { font-size: 0.75rem; color: #949ba4; }

.join-btn {
  margin-top: 6px; width: 100%; padding: 8px;
  border: 1px dashed #4e5058; background: transparent;
  color: #949ba4; border-radius: 8px; cursor: pointer; font-size: 0.85rem;
}
.join-btn:hover { color: white; border-color: #ff9a3c; }

/* Профиль внизу сайдбара */
.sidebar-foot {
  margin-top: auto; padding: 10px 16px; background: #232428;
  display: flex; align-items: center; gap: 10px;
}
.me-info { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.me-info #me-name { font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; }
.avatar { border-radius: 50%; background: #5865f2; object-fit: cover; }
.avatar.small { width: 32px; height: 32px; }
.avatar-upload { cursor: pointer; opacity: 0.6; }
.avatar-upload:hover { opacity: 1; }
.avatar-upload.small-label {
  opacity: 1; font-size: 0.8rem; padding: 6px 10px;
  background: #383a40; border-radius: 6px; color: #dbdee1;
}

/* Роли */
.role-badge { font-size: 0.7rem; font-weight: bold; }
.role-badge.admin { color: #f0b232; }
.role-badge.admin::before { content: "★ ADMIN"; }
.role-badge.moderator { color: #23a55a; }
.role-badge.moderator::before { content: "🛡 MOD"; }

/* ===== ОСНОВНАЯ ОБЛАСТЬ ===== */
.main { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.view { display: flex; flex-direction: column; height: 100%; overflow: hidden; }
.view-head {
  padding: 12px 20px; background: #313338; border-bottom: 1px solid #1e1f22;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.view-title { font-weight: bold; flex: 1; }
.members-count { font-size: 0.85rem; color: #949ba4; }

/* ===== ЛЕНТА АКТИВНОСТИ ===== */
.feed-compose {
  padding: 14px 20px; background: #313338; border-bottom: 1px solid #1e1f22;
}
.feed-compose textarea {
  width: 100%; background: #383a40; color: white; border: none;
  border-radius: 8px; padding: 10px 14px; font-size: 1rem;
  resize: none; font-family: inherit;
}
.compose-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.compose-spacer { flex: 1; }
.attach-name { font-size: 0.85rem; color: #949ba4; }
.global-btn {
  width: 38px; height: 38px; border-radius: 8px; border: 2px solid #4e5058;
  background: #2b2d31; font-size: 1.1rem; cursor: pointer; color: #949ba4;
}
.global-btn:hover { border-color: #f0b232; color: #f0b232; }
.global-btn.active {
  background: #f0b232; border-color: #f0b232; color: #1e1f22;
  box-shadow: 0 0 12px rgba(240,178,50,0.5);
}
.global-hint { color: #f0b232; font-size: 0.85rem; margin-top: 6px; }

.feed-list {
  flex: 1; overflow-y: auto; padding: 16px 20px;
  display: flex; flex-direction: column; gap: 12px;
}

/* Пост */
.post {
  background: #2b2d31; border-radius: 12px; padding: 14px 16px;
  display: flex; gap: 12px;
}
.post .avatar { width: 40px; height: 40px; flex-shrink: 0; }
.post-body { flex: 1; min-width: 0; }
.post-head {
  display: flex; gap: 8px; align-items: baseline;
  margin-bottom: 6px; flex-wrap: wrap;
}
.post-head b { color: #dbdee1; }
.post-head .time { font-size: 0.75rem; color: #949ba4; }
.post-text { color: #dbdee1; word-wrap: break-word; white-space: pre-wrap; }
.post img.attach, .post video.attach {
  max-width: 100%; border-radius: 8px; margin-top: 8px; display: block;
}
.post a.file-link {
  color: #00a8fc; text-decoration: none;
  display: inline-block; margin-top: 6px;
}
.post.global { border: 1px solid #f0b232; background: #2f2a1e; }
.post.global .post-head::before {
  content: "📢 ОБЩАЯ"; color: #f0b232; font-size: 0.7rem; font-weight: bold;
  padding: 2px 6px; border-radius: 4px; background: rgba(240,178,50,0.15);
}
.source-channel-badge {
  color: #f0b232; font-size: 0.75rem; padding: 2px 8px;
  border-radius: 4px; background: rgba(240,178,50,0.15); margin-left: 8px;
}

/* Действия под постом */
.post-actions {
  display: flex; gap: 12px; margin-top: 10px;
  font-size: 0.85rem; color: #949ba4; align-items: center;
}
.post-action {
  display: flex; align-items: center; gap: 4px;
  cursor: pointer; padding: 3px 8px; border-radius: 6px;
}
.post-action:hover { background: #383a40; color: white; }
.post-action.active { color: #5865f2; }

/* Реакции */
.reactions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.reaction {
  display: flex; align-items: center; gap: 4px;
  padding: 3px 8px; border-radius: 12px; cursor: pointer;
  background: #383a40; font-size: 0.85rem; color: #b5bac1;
  border: 1px solid transparent;
}
.reaction:hover { border-color: #5865f2; }
.reaction.mine { background: #3a4272; border-color: #5865f2; color: white; }
.reaction-add {
  padding: 3px 8px; border-radius: 12px; cursor: pointer;
  background: #383a40; font-size: 0.85rem; color: #b5bac1;
}
.reaction-add:hover { color: white; }
.reaction img.emoji-img {
  width: 18px; height: 18px; object-fit: contain; vertical-align: middle;
}

/* ===== КАНАЛ / ЧАТ ===== */
.messages {
  flex: 1; overflow-y: auto; padding: 16px 20px;
  display: flex; flex-direction: column; gap: 12px;
}
.msg { display: flex; gap: 10px; align-items: flex-start; }
.msg .avatar { width: 36px; height: 36px; flex-shrink: 0; }
.msg-body {
  flex: 1; max-width: 70%; background: #2b2d31;
  padding: 10px 14px; border-radius: 10px; word-wrap: break-word;
}
.msg-head { display: flex; gap: 8px; align-items: baseline; margin-bottom: 4px; flex-wrap: wrap; }
.msg-head b { color: #dbdee1; }
.msg-head .time { font-size: 0.75rem; color: #949ba4; }
.msg img.attach, .msg video.attach {
  max-width: 100%; border-radius: 8px; margin-top: 6px; display: block;
}
.msg a.file-link {
  color: #00a8fc; text-decoration: none;
  display: inline-block; margin-top: 4px;
}
.system { font-size: 0.85rem; color: #949ba4; text-align: center; }

/* Тег роли в сообщении */
.user-role { font-size: 0.7rem; padding: 2px 6px; border-radius: 4px; }
.user-role.owner { background: rgba(240,178,50,0.2); color: #f0b232; }
.user-role.admin { background: rgba(240,178,50,0.15); color: #f0b232; }
.user-role.moderator { background: rgba(35,165,90,0.15); color: #23a55a; }

/* Поле ввода */
.input-row {
  display: flex; gap: 8px; padding: 12px 20px;
  background: #313338; align-items: center;
}
.clip {
  cursor: pointer; font-size: 1.4rem; padding: 4px 8px;
  border-radius: 6px; user-select: none;
  background: transparent; border: none; color: inherit;
}
.clip:hover { background: #383a40; }
.input-row input[type="text"] {
  flex: 1; padding: 12px; border-radius: 8px; border: none;
  background: #383a40; color: white; font-size: 1rem;
}
.input-row button:last-child {
  padding: 0 20px; border: none; border-radius: 8px;
  background: #5865f2; color: white; font-size: 1rem; cursor: pointer;
}

/* Голосовая мини-панель в шапке */
.voice-mini { display: flex; align-items: center; gap: 10px; }
.voice-btn {
  padding: 6px 14px; border: none; border-radius: 8px;
  background: #383a40; color: #dbdee1; cursor: pointer; font-size: 0.9rem;
}
.voice-btn:hover { background: #4e5058; }
.voice-btn.active { background: #23a55a; color: white; }
.voice-users { display: flex; gap: 6px; flex-wrap: wrap; }
.voice-user {
  display: flex; align-items: center; gap: 6px;
  background: #232428; padding: 3px 10px; border-radius: 20px;
  font-size: 0.8rem; color: #23a55a;
}
.voice-user .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #23a55a; box-shadow: 0 0 6px #23a55a;
}

/* ===== ПРАВАЯ ПАНЕЛЬ УЧАСТНИКОВ ===== */
.members-panel {
  width: 240px; background: #2b2d31; border-left: 1px solid #1e1f22;
  display: flex; flex-direction: column; transition: width 0.2s;
}
.members-panel.collapsed { width: 40px; }
.members-panel.collapsed .members-head span { display: none; }
.members-panel.collapsed #members-list { display: none; }
.members-head {
  padding: 12px 14px; display: flex; justify-content: space-between;
  align-items: center; border-bottom: 1px solid #1e1f22;
  font-size: 0.85rem; color: #949ba4; text-transform: uppercase;
}
.members-list { flex: 1; overflow-y: auto; padding: 8px; }
.member-item {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 10px; border-radius: 6px; margin-bottom: 2px;
}
.member-item:hover { background: #35373c; }
.member-item .avatar { width: 32px; height: 32px; }
.member-item .info { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.member-item .name {
  font-size: 0.9rem; color: #dbdee1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.member-item .role-tag { font-size: 0.65rem; font-weight: bold; }
.member-item .role-tag.owner { color: #f0b232; font-weight: bold; }
.member-item .role-tag.admin { color: #f0b232; }
.member-item .role-tag.moderator { color: #23a55a; }
.member-item .role-tag.member { display: none; }

.member-roles { display: flex; gap: 2px; }
.role-btn {
  padding: 2px 6px; border-radius: 4px; border: 1px solid #4e5058;
  background: transparent; color: #949ba4; font-size: 0.7rem; cursor: pointer;
}
.role-btn:hover { border-color: #5865f2; color: white; }
.role-btn.current { background: #5865f2; color: white; border-color: #5865f2; }

/* Кликабельные имена */
.clickable-user { cursor: pointer; }
.clickable-user:hover { text-decoration: underline; }
.member-item .name.clickable-user:hover { color: white; }

/* ===== МОДАЛКИ ===== */
.modal {
  position: fixed; inset: 0; background: rgba(0,0,0,0.6);
  display: flex; align-items: center; justify-content: center; z-index: 100;
}
.modal-box {
  background: #313338; border-radius: 12px; padding: 24px;
  width: 420px; max-width: 90vw; max-height: 90vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 10px;
  position: relative;
}
.modal-box h2 { margin-bottom: 8px; }
.modal-box label {
  font-size: 0.85rem; color: #b5bac1; text-transform: uppercase;
}
.modal-box input[type=text],
.modal-box input[type=password],
.modal-box input:not([type]) {
  padding: 10px 12px; border-radius: 8px; border: none;
  background: #1e1f22; color: white; font-size: 1rem;
}
.modal-actions {
  display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px;
  flex-wrap: wrap;
}
.modal-x {
  position: absolute; top: 12px; right: 12px;
  background: transparent; border: none; color: #949ba4;
  font-size: 1.2rem; cursor: pointer; padding: 4px 8px; border-radius: 6px;
}
.modal-x:hover { background: #383a40; color: white; }

/* Приглашение */
.invite-row { display: flex; gap: 8px; }
.invite-row input { flex: 1; }

/* Выбор аватара канала */
.avatar-choice { display: flex; gap: 8px; align-items: center; }
.emoji-input {
  width: 60px !important; text-align: center;
  font-size: 1.4rem !important; padding: 6px !important;
}
.channel-head-info { display: flex; gap: 12px; align-items: center; margin: 8px 0; }

/* Таблица прав */
.role-hint { font-size: 0.85rem; color: #b5bac1; margin-bottom: 10px; }
.roles-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.roles-table th {
  text-align: center; padding: 8px 4px; color: #b5bac1;
  font-weight: 600; font-size: 0.8rem; text-transform: uppercase;
  border-bottom: 1px solid #383a40;
}
.roles-table th:first-child { text-align: left; }
.roles-table td {
  padding: 8px 4px; text-align: center;
  border-bottom: 1px solid #2a2d31;
}
.roles-table td:first-child { text-align: left; color: #dbdee1; }
.roles-table input[type=checkbox] {
  width: 18px; height: 18px; cursor: pointer; accent-color: #ff9a3c;
}
.roles-table input[type=checkbox]:disabled { opacity: 0.4; cursor: not-allowed; }

/* Профиль пользователя */
.profile-box { width: 400px; }
.profile-head { display: flex; gap: 16px; align-items: center; margin-bottom: 16px; }
.profile-avatar { width: 80px; height: 80px; }
.profile-info h2 { font-size: 1.4rem; margin-bottom: 4px; }
.profile-info .role-badge { font-size: 0.85rem; }
.profile-created {
  display: block; font-size: 0.85rem;
  color: #949ba4; margin-top: 8px;
}
.profile-actions { display: flex; gap: 8px; justify-content: flex-end; }

/* ===== ЭМОДЗИ-ПИКЕР ===== */
.emoji-modal { width: 500px; max-width: 95vw; }
.emoji-head { display: flex; justify-content: space-between; align-items: center; }
.emoji-tabs {
  display: flex; gap: 4px; overflow-x: auto; padding-bottom: 4px;
}
.emoji-tab {
  padding: 4px 10px; border-radius: 6px; border: none; cursor: pointer;
  background: #383a40; color: #b5bac1; font-size: 0.85rem; white-space: nowrap;
}
.emoji-tab.active { background: #5865f2; color: white; }
.emoji-grid {
  display: grid; grid-template-columns: repeat(9, 1fr); gap: 4px;
  overflow-y: auto; max-height: 240px; padding: 6px;
  background: #1e1f22; border-radius: 8px;
}
.emoji-cell {
  font-size: 1.4rem; padding: 6px; text-align: center;
  cursor: pointer; border-radius: 6px; line-height: 1;
}
.emoji-cell:hover { background: #383a40; }
.custom-emoji-block {
  border-top: 1px solid #383a40; padding-top: 10px; margin-top: 6px;
}
.custom-head {
  display: flex; justify-content: space-between;
  align-items: center; margin-bottom: 6px;
}
.custom-head span {
  font-size: 0.85rem; color: #b5bac1; text-transform: uppercase;
}
.custom-emojis { display: flex; flex-wrap: wrap; gap: 6px; }
.custom-emojis img {
  width: 32px; height: 32px; object-fit: contain; cursor: pointer;
  padding: 4px; border-radius: 6px; background: #1e1f22;
}
.custom-emojis img:hover { background: #383a40; }

/* Просмотры поста */
.views-list {
  display: flex; flex-direction: column; gap: 6px;
  max-height: 300px; overflow-y: auto;
}
.views-list .member-item { background: #2b2d31; }

/* Скроллбар (тёмный) */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #1a1b1e; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #0f1012; }

/* ===== VOICE RECORDING ===== */
.voice-recording {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 20px; background: #313338;
  border-top: 1px solid #1e1f22;
}
.rec-dot {
  width: 12px; height: 12px; border-radius: 50%; background: #f23f43;
  box-shadow: 0 0 8px #f23f43;
  animation: rec-pulse 1s ease-in-out infinite;
}
@keyframes rec-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}
#rec-timer { font-weight: bold; color: #f23f43; font-variant-numeric: tabular-nums; }
.rec-hint { flex: 1; color: #949ba4; font-size: 0.9rem; }
.ghost.small { padding: 6px 12px; font-size: 0.9rem; }

/* Голосовое сообщение в чате */
.voice-msg {
  display: flex; align-items: center; gap: 10px;
  background: #383a40; padding: 8px 12px; border-radius: 12px;
  margin-top: 6px; max-width: 320px;
}
.voice-msg audio { flex: 1; height: 32px; }
.voice-msg .voice-icon {
  font-size: 1.2rem; color: #ff9a3c;
}

/* ===== VOICE RECORDING ===== */
.voice-recording {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 20px; background: #313338;
  border-top: 1px solid #1e1f22;
}
.rec-dot {
  width: 12px; height: 12px; border-radius: 50%; background: #f23f43;
  box-shadow: 0 0 8px #f23f43;
  animation: rec-pulse 1s ease-in-out infinite;
}
@keyframes rec-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}
#rec-timer { font-weight: bold; color: #f23f43; font-variant-numeric: tabular-nums; }
.rec-hint { flex: 1; color: #949ba4; font-size: 0.9rem; }
.ghost.small { padding: 6px 12px; font-size: 0.9rem; }

/* Голосовое сообщение */
.voice-msg {
  display: flex; align-items: center; gap: 10px;
  background: #383a40; padding: 8px 12px; border-radius: 12px;
  margin-top: 6px; max-width: 340px;
}
.voice-msg audio { flex: 1; height: 32px; }
.voice-msg .voice-icon { font-size: 1.2rem; color: #ff9a3c; }