/* Атрибут hidden обязан выигрывать у классов с display: панель записи голосового
   объявлена как display:flex, и без этого правила она видна всегда — выглядит
   так, будто запись идёт постоянно. */
[hidden] { display: none !important; }

/* Сообщества: три колонки — рейл сообществ, разделы, лента.
   Файл подключается после app.css и намеренно переопределяет часть правил
   оттуда: разметка ленты здесь своя (.msg > .bubble), а не унаследованная от
   личных чатов. */

.app { grid-template-columns: 68px 300px 1fr; }

.rail {
  background: var(--panel-2); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 10px 0; overflow-y: auto;
}
.rail-list { display: flex; flex-direction: column; gap: 6px; width: 100%; align-items: center; }
.rail-item, .rail-btn {
  position: relative; width: 46px; height: 46px; border: none; border-radius: 14px;
  background: transparent; color: var(--muted); font-size: 20px;
  display: grid; place-items: center; flex: none;
}
.rail-item:hover, .rail-btn:hover { background: var(--hover); color: var(--text); }
.rail-item.active { background: var(--accent-2); }
.rail-item.pending { opacity: .55; }
.rail-btn.active { background: var(--hover); color: var(--text); }
.rail-icon {
  width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  background: var(--panel); font-size: 20px;
}
.rail-me { margin-top: auto; }
.rail .badge { position: absolute; top: 2px; right: 2px; font-size: 11px; height: 18px; min-width: 18px; }

.c-indigo { background: #4f5bd5; } .c-blue { background: #2b7fd8; }
.c-teal   { background: #21908d; } .c-green { background: #3d9a5c; }
.c-amber  { background: #b98218; } .c-orange { background: #c26a25; }
.c-red    { background: #bd4340; } .c-violet { background: #7d4bc4; }

.sidebar-title { flex: 1; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-sub { padding: 0 12px 8px; color: var(--muted); font-size: 12px; }
.sidebar .list { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 8px; }
.sidebar-foot { padding: 8px; border-top: 1px solid var(--border); display: grid; gap: 6px; }

.row {
  width: 100%; display: flex; gap: 10px; align-items: center; text-align: left;
  padding: 8px 10px; border: none; background: transparent; color: var(--text);
  border-radius: 10px;
}
.row:hover { background: var(--hover); }
.row.active { background: var(--bubble-out); }
.row-body { flex: 1; min-width: 0; display: block; }
.row-title { display: block; font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-sub { display: block; color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sec-icon { font-size: 18px; width: 26px; text-align: center; flex: none; }
.wide-btn {
  width: 100%; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--panel-2); color: var(--text); text-align: left; font-size: 14px;
}
.wide-btn:hover { background: var(--hover); }
.wide-btn.danger { color: var(--danger); }
.hint { color: var(--muted); font-size: 13px; padding: 12px; line-height: 1.4; }
.label { color: var(--muted); font-size: 12px; margin: 12px 0 6px; text-transform: uppercase; letter-spacing: .4px; }
.tag { font-size: 11px; color: var(--muted); background: var(--hover); border-radius: 6px; padding: 1px 6px; margin-left: 6px; }
.tag.warn { color: var(--warn); }
.ava {
  width: 34px; height: 34px; border-radius: 50%; color: #fff;
  background-color: var(--accent-2);
  display: grid; place-items: center; font-weight: 600; flex: none;
}
/* Выбранный цвет должен побеждать общий фон .ava, поэтому специфичность выше. */
.ava.c-indigo { background-color: #4f5bd5; } .ava.c-blue { background-color: #2b7fd8; }
.ava.c-teal   { background-color: #21908d; } .ava.c-green { background-color: #3d9a5c; }
.ava.c-amber  { background-color: #b98218; } .ava.c-orange { background-color: #c26a25; }
.ava.c-red    { background-color: #bd4340; } .ava.c-violet { background-color: #7d4bc4; }
/* Под фотографией цветной кружок не нужен: у снимка с прозрачностью он
   просвечивал бы синим. */
.ava.photo { background-color: transparent; }
.ava.small { width: 32px; height: 32px; font-size: 13px; }
/* У сообщений значок крупнее, чем в списках: по нему узнают говорящего на
   ходу, и в 28 пикселей лицо на фотографии уже не разобрать. */
.msg .ava.small { width: 44px; height: 44px; font-size: 18px; }
.msg .ava.small.emoji { font-size: 24px; }
.ava.emoji { font-size: 19px; }
.ava.small.emoji { font-size: 15px; }
.ava.big.emoji { font-size: 42px; }
.dot-online { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); margin-left: 6px; }

.chat-title { flex: 1; min-width: 0; }
.chat-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-sub { font-size: 12px; color: var(--muted); }

.pinned { background: var(--panel); border-bottom: 1px solid var(--border); padding: 6px 14px; }
.pin-row { font-size: 13px; color: var(--muted); cursor: pointer; padding: 2px 0; }
.pin-row:hover { color: var(--text); }
.search-bar { display: flex; gap: 8px; padding: 8px 14px; background: var(--panel); border-bottom: 1px solid var(--border); }
.search-bar input { flex: 1; padding: 8px 12px; border-radius: 18px; background: var(--bg); border: 1px solid var(--border); color: var(--text); outline: none; }

/* ---------- лента ---------- */
.messages { padding: 14px 8%; gap: 4px; }
.msg {
  display: flex; gap: 8px; align-items: flex-end; padding: 0;
  background: none; border-radius: 0;
  /* Строка всегда во всю ширину: сторону выбирает justify-content, а не
     сжатие по содержимому — иначе пузырь считает свои проценты от самого
     себя и получается вдвое уже, чем нужно. */
  align-self: stretch; width: 100%; max-width: 100%;
}
.msg.out { justify-content: flex-end; }
.bubble {
  /* Ширину считаем с оглядкой на значок слева: 44 пикселя самого значка
     плюс отступ. Без вычитания пузырь на узком экране вылезал за край. */
  position: relative; max-width: min(620px, calc(100% - 68px)); padding: 6px 10px 4px;
  border-radius: 13px; background: var(--bubble-in);
  /* Рвём только то, что иначе вылезет за пузырь (длинная ссылка), а обычные
     слова переносим целиком. */
  overflow-wrap: break-word; word-break: normal;
}
.msg.out .bubble { background: var(--bubble-out); }
.bubble.pinned-msg { box-shadow: inset 3px 0 0 var(--warn); }
.bubble .author { font-size: 12px; font-weight: 600; color: var(--accent); margin-bottom: 2px; }
.bubble .text { font-size: 14px; line-height: 1.35; }
.bubble .deleted { color: var(--muted); font-style: italic; font-size: 13px; }
.bubble .meta { font-size: 10px; color: var(--muted); margin-top: 2px; display: flex; gap: 6px; justify-content: flex-end; }
.mention { color: var(--accent); font-weight: 600; }
.mention.me { background: rgba(43,154,232,.18); border-radius: 4px; padding: 0 3px; }
.reply-quote {
  border-left: 3px solid var(--accent); padding: 2px 8px; margin-bottom: 4px;
  font-size: 12px; color: var(--muted); cursor: pointer; background: rgba(0,0,0,.12);
  border-radius: 0 6px 6px 0;
}
.flash-hl .bubble { animation: hl 1.2s ease; }
@keyframes hl { from { background: var(--accent); } }

.att-image { max-width: 320px; max-height: 320px; border-radius: 10px; display: block; cursor: pointer; margin: 2px 0; }
.att-video { position: relative; max-width: 320px; border-radius: 10px; overflow: hidden; cursor: pointer; background: #000; margin: 2px 0; }
.att-video img { width: 100%; display: block; opacity: .85; }
.att-video .play { position: absolute; inset: 0; display: grid; place-items: center; font-size: 34px; color: #fff; }
.att-video .dur { position: absolute; right: 6px; bottom: 6px; background: rgba(0,0,0,.6); color: #fff; font-size: 11px; padding: 1px 5px; border-radius: 6px; }
.att-audio audio { width: 260px; max-width: 100%; }
.att-file { display: flex; gap: 10px; align-items: center; color: inherit; margin: 3px 0; }
.att-file .file-ico { width: 36px; height: 36px; border-radius: 8px; background: var(--accent-2); display: grid; place-items: center; flex: none; }

.reactions { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.reaction { border: none; border-radius: 12px; background: rgba(0,0,0,.18); color: var(--text); font-size: 12px; padding: 2px 8px; }
.reaction.mine { background: var(--accent-2); color: #fff; }
/* Действия подписаны словами и видны всегда — как в приложении: наведения на
   телефоне нет, а прятать действия под курсор на компьютере значит прятать их
   вообще. */
.msg-links { display: flex; gap: 14px; margin-top: 3px; }
.msg-act {
  border: none; background: transparent; color: var(--accent);
  font-size: 13px; padding: 2px 0;
}
.msg-act:hover { text-decoration: underline; }

/* Меню «Действия» */
.menu-pop {
  position: fixed; z-index: 1600; min-width: 190px; padding: 4px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0,0,0,.4); display: flex; flex-direction: column;
}
.menu-item {
  border: none; background: transparent; color: var(--text); text-align: left;
  font-size: 14px; padding: 9px 12px; border-radius: 8px;
}
.menu-item:hover { background: var(--hover); }
.menu-item.danger { color: var(--danger); }
.emoji-pop {
  position: fixed; z-index: 1600; display: flex; gap: 2px; padding: 6px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0,0,0,.4);
}
.emoji-pop button { border: none; background: transparent; font-size: 20px; padding: 2px 4px; border-radius: 6px; }
.emoji-pop button:hover { background: var(--hover); }

/* ---------- набор эмодзи для поля ввода ---------- */
/* Панель, а не выпадашка: эмодзи обычно ставят несколько подряд, и закрывать
   её после каждого — значит заставлять открывать снова. */
.emoji-panel {
  position: fixed; z-index: 1600; display: flex; flex-direction: column;
  width: min(360px, calc(100vw - 24px)); height: 300px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 8px 30px rgba(0,0,0,.4); overflow: hidden;
}
.emoji-tabs {
  display: flex; gap: 2px; padding: 6px; border-bottom: 1px solid var(--border);
  overflow-x: auto; flex: none;
}
.emoji-tab {
  border: none; background: transparent; font-size: 18px; line-height: 1;
  padding: 5px 6px; border-radius: 8px; opacity: .5;
}
.emoji-tab.active { opacity: 1; background: var(--hover); }
.emoji-grid {
  flex: 1; overflow-y: auto; padding: 6px;
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px;
}
.emoji-grid button { border: none; background: transparent; font-size: 22px; line-height: 1.2; padding: 4px 0; border-radius: 8px; }
.emoji-grid button:hover { background: var(--hover); }
.emoji-empty { padding: 14px; color: var(--muted); font-size: 13px; grid-column: 1 / -1; }

/* ---------- опросы и события ---------- */
.poll { margin: 4px 0; min-width: 240px; }
.poll-q { font-weight: 600; margin-bottom: 6px; }
.poll-opt {
  position: relative; display: flex; align-items: center; gap: 8px; width: 100%;
  border: 1px solid var(--border); background: transparent; color: var(--text);
  border-radius: 8px; padding: 6px 10px; margin-bottom: 4px; overflow: hidden; text-align: left;
}
.poll-opt.mine { border-color: var(--accent); }
.poll-bar { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(43,154,232,.22); }
.poll-text { position: relative; flex: 1; }
.poll-num { position: relative; color: var(--muted); font-size: 12px; }
.poll-foot { font-size: 12px; color: var(--muted); display: flex; gap: 10px; align-items: center; }
.event { margin: 4px 0; min-width: 240px; }
.event-title { font-weight: 600; }
.event-when, .event-place, .event-desc { font-size: 13px; color: var(--muted); }
.event-rsvp { display: flex; gap: 6px; margin-top: 6px; }
.rsvp { border: 1px solid var(--border); background: transparent; color: var(--text); border-radius: 8px; padding: 4px 10px; font-size: 12px; }
.rsvp.mine { background: var(--accent-2); color: #fff; border-color: var(--accent-2); }
.link-btn { border: none; background: transparent; color: var(--accent); font-size: 13px; padding: 2px 6px; }
.link-btn.danger { color: var(--danger); }

/* ---------- поле ввода ---------- */
.composer { display: block; padding: 8px 14px 10px; }
.composer-row { display: flex; gap: 8px; align-items: flex-end; }
.composer-row textarea {
  flex: 1; resize: none; min-height: 42px; max-height: 160px; padding: 10px 14px;
  line-height: 20px; border-radius: 20px; background: var(--bg);
  border: 1px solid var(--border); color: var(--text); outline: none;
}
.composer .send { background: var(--accent-2); color: #fff; width: 42px; height: 42px; border-radius: 50%; }
.composer-note { color: var(--warn); font-size: 12px; padding: 6px 4px 0; }
.reply-preview, .attach-preview { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 0 4px 6px; font-size: 13px; color: var(--muted); }
.chip { background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; padding: 4px 8px; font-size: 12px; display: flex; gap: 6px; align-items: center; }
.chip-x { border: none; background: transparent; color: var(--muted); }

/* ---------- модальные окна ---------- */
.modal-back { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 1500; display: grid; place-items: center; padding: 16px; }
.modal-back[hidden] { display: none; }
.modal {
  position: static; inset: auto; display: flex; flex-direction: column;
  width: min(520px, 96vw); max-height: 88vh; background: var(--panel);
  border: 1px solid var(--border); border-radius: 16px; overflow: hidden;
}
.modal-head { display: flex; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.modal-head h3 { margin: 0; font-size: 17px; flex: 1; }
.modal-body { padding: 16px; overflow-y: auto; }
.modal-body .field textarea, .modal-body select {
  width: 100%; padding: 10px 12px; border-radius: 10px; background: var(--bg);
  border: 1px solid var(--border); color: var(--text); outline: none;
}
.modal-foot { padding: 12px 16px; border-top: 1px solid var(--border); }
.check { display: flex; gap: 8px; align-items: center; margin: 10px 0; font-size: 14px; }
.check input { width: auto; }
.icon-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; margin-bottom: 12px; }
.icon-opt { border: 1px solid transparent; background: var(--bg); border-radius: 8px; font-size: 18px; padding: 5px 0; }
.icon-opt.active { border-color: var(--accent); background: var(--hover); }
.menu-actions { display: grid; gap: 6px; margin-top: 14px; }
.member { display: flex; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--border); }
.member-name { flex: 1; font-size: 14px; }
.role-sel { background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 4px 6px; font-size: 12px; }
.invite-link { display: grid; gap: 8px; }
.link-input { width: 100%; padding: 10px 12px; border-radius: 10px; background: var(--bg); border: 1px solid var(--border); color: var(--text); }
.share-row { display: flex; gap: 6px; flex-wrap: wrap; }
.share-btn { padding: 6px 12px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--border); font-size: 13px; }
.catalog-list { display: grid; gap: 8px; margin-top: 10px; }
.catalog-item { display: flex; gap: 10px; align-items: center; padding: 8px; border: 1px solid var(--border); border-radius: 12px; }

/* ---------- лайтбокс ---------- */
.lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.92); z-index: 1800; display: grid; place-items: center; }
.lightbox[hidden] { display: none; }
.lb-body img, .lb-body video { max-width: 94vw; max-height: 86vh; border-radius: 8px; }
.lb-close { position: absolute; top: 14px; right: 16px; background: transparent; border: none; color: #fff; font-size: 26px; }
.lb-dl { position: absolute; top: 18px; right: 60px; color: #fff; font-size: 14px; }

/* ---------- звонок ---------- */
.call-overlay { display: none; }
.call-overlay.show { display: flex; align-items: center; justify-content: center; }
.call-box { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.call-who { font-size: 20px; font-weight: 600; color: #fff; }
.call-state { color: var(--muted); }
.call-actions { display: flex; gap: 14px; align-items: center; }
.call-btn { border: none; border-radius: 24px; padding: 12px 26px; color: #fff; font-weight: 600; }
.call-btn.accept { background: var(--ok); }
.call-btn.hangup { background: var(--danger); }

/* ---------- лендинг, приглашение, каталог ---------- */
.page { max-width: 860px; margin: 0 auto; padding: 32px 18px 60px; }
.page h1 { font-size: 30px; margin: 0 0 8px; }
.page .lead { color: var(--muted); font-size: 16px; margin-bottom: 26px; }
.card { background: var(--panel); border: 1px solid var(--border); border-radius: 16px; padding: 22px; margin-bottom: 16px; }
.card-lg { text-align: center; }
.card-icon { font-size: 44px; }
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin: 20px 0; }
.feature { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 16px; }
.feature b { display: block; margin-bottom: 4px; }
.feature span { color: var(--muted); font-size: 13px; }
.btn-inline { display: inline-block; width: auto; padding: 12px 26px; }
.qr { background: #fff; padding: 10px; border-radius: 12px; display: inline-block; }
.grid-list { display: grid; gap: 10px; }
.top-nav { display: flex; gap: 14px; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.top-nav .brand { flex: 1; font-size: 18px; }

@media (max-width: 900px) {
  .app { grid-template-columns: 62px 1fr; }
  .app .chat { display: none; }
  .app.chat-open .sidebar { display: none; }
  .app.chat-open .chat { display: flex; }
  .messages { padding-left: 10px; padding-right: 10px; }
  .bubble { max-width: calc(100% - 44px); }
}
@media (max-width: 560px) {
  .app { grid-template-columns: 56px 1fr; }
  .icon-grid { grid-template-columns: repeat(6, 1fr); }
}

/* ---------- аватары ---------- */
/* Значок из набора — эмодзи на цветном кружке: узнаётся мгновенно и не требует
   от человека искать фотографию ради того, чтобы его различали в списке. */
.ava.big { width: 80px; height: 80px; font-size: 38px; }
.ava.photo { background-size: cover; background-position: center; color: transparent; }
.ava-preview { display: flex; gap: 14px; align-items: center; margin-bottom: 10px; }
.color-row { display: flex; gap: 8px; flex-wrap: wrap; }
.color-opt {
  width: 26px; height: 26px; border-radius: 50%; border: 2px solid transparent;
}
.color-opt.active { border-color: var(--text); }
.auth-card.wide { width: min(460px, 96vw); }
.auth-card .icon-grid { grid-template-columns: repeat(8, 1fr); }

/* ---------- QR приложения ---------- */
.qr-block { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; justify-content: center; }
.qr-block .qr svg { width: 160px; height: 160px; display: block; }
.qr-caption { text-align: left; max-width: 260px; }

/* ---------- редактор фото значка ---------- */
/* Круглая рамка поверх снимка: человек видит ровно то, что станет значком. */
.crop-back {
  position: fixed; inset: 0; z-index: 1700; background: rgba(0,0,0,.66);
  display: grid; place-items: center; padding: 16px;
}
.crop-box {
  width: min(340px, 94vw); background: var(--panel); border: 1px solid var(--border);
  border-radius: 16px; padding: 18px; text-align: center;
}
.crop-box h3 { margin: 0 0 6px; font-size: 17px; }
.crop-stage {
  position: relative; width: 260px; height: 260px; margin: 12px auto;
  border-radius: 12px; overflow: hidden; background: var(--bg);
}
.crop-canvas { display: block; cursor: grab; touch-action: none; }
.crop-canvas:active { cursor: grabbing; }
.crop-mask {
  position: absolute; inset: 0; pointer-events: none;
  /* Затемняем всё, кроме круга: граница будущего значка видна сразу. */
  background: radial-gradient(circle at 50% 50%,
    rgba(0,0,0,0) 0 128px, rgba(0,0,0,.55) 129px);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.35);
  border-radius: 12px;
}
.crop-zoom { width: 100%; margin: 4px 0 14px; }
.crop-actions { display: flex; gap: 10px; }
.crop-actions .wide-btn, .crop-actions .btn { width: 50%; text-align: center; }

/* Кликабельные ник и значок ведут в профиль — показываем это курсором. */
.clickable { cursor: pointer; }
.author.clickable:hover, .member-name.clickable:hover { text-decoration: underline; }