/* wifi2.ru — общие стили приложения и инфо-страницы */

:root {
  --fog: #F2F5F7;
  --ink: #16222E;
  --mist: #5B6B7A;
  --signal: #0B62C9;
  --signal-deep: #094C9C;
  --wave: #C4D9EC;
  --card: #FFFFFF;
  --pulse: #17A673;
  --danger: #C93B2E;
  --radius: 14px;
  --app-width: 390px;
  --display: -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --body: -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --mono: ui-monospace, 'Cascadia Mono', 'Roboto Mono', Consolas, Menlo, monospace;
  
  /* Дополнительные переменные */
  --bg-ok: #E7F6EF;
  --bg-err: #FBECEA;
  --text-ok: #0E7A55;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--fog);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.55;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  margin-bottom: 0;
}

a {
  color: #369;
  text-decoration: none;
}

:focus-visible {
  outline: 1px solid var(--signal);
  outline-offset: 0;
  border-radius: 9px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* ===== верхняя панель (обе страницы) ===== */
.bar {
  display: flex;
  align-items: center;
  gap: 21px;
  padding: 12px 22px;
  background: var(--card);
  box-shadow: 0 1px 0 rgba(22, 34, 46, .06);
  position: sticky;
  top: 0;
  z-index: 30;
  margin-bottom: 0;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  max-width: 362px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ink);
  text-decoration: none;
}

.logo svg {
  display: block;
  margin-bottom: 5px;
}

/* атрибут hidden должен побеждать display:flex — иначе статус
   «Подключение…» виден на всех страницах с общей шапкой */
.bar .me[hidden] {
  display: none;
}

.bar .me {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--mist);
  font-size: .88rem;
  margin-left: auto;
  min-width: 0;
  max-width: 40vw;
}

.bar .me span:last-child {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.bar .top-link {
  color: var(--signal);
  text-decoration: none;
  font-size: .88rem;
  white-space: nowrap;
}

.dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #C6CFD8;
  flex: none;
}

.dot.on {
  background: var(--pulse);
}

/* ===== экран подключения ===== */
.stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: var(--app-width);
  margin: 0 auto;
  padding: 0 14px;
}

#connectScreen {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 20px 0 0;
  gap: 18px;
}

#connectScreen h1 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.25rem, 4vw, 1.8rem);
  line-height: 1.2;
  margin: 0;
  max-width: 14em;
}

#connectScreen .lead {
  color: var(--mist);
  font-size: .9rem;
  margin: 0;
  max-width: 25em;
}

#connectScreen .info-hint {
  font-size: .88rem;
}

.connect-card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 24px;
  width: min(var(--app-width), 100%);
  box-shadow: 0 14px 40px rgba(11, 98, 201, .10), 0 2px 8px rgba(22, 34, 46, .05);
  text-align: left;
}

.btn {
  display: block;
  width: 100%;
  padding: 9px 18px 12px;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  font-family: var(--body);
  font-weight: 600;
  font-size: .9rem;
  background: var(--signal);
  color: #fff;
  transition: background .15s;
  border: 2px solid var(--signal);
}

.btn:hover {
  background: #e1edf7;
  color: var(--signal);
}

.btn[hidden] {
  display: none;
}

.btn[disabled] {
  background: #B9C6D2;
  border-color: #B9C6D2;
  cursor: default;
}

.btn-ghost {
  background: transparent;
  color: var(--signal);
  border: 2px solid var(--wave);
}

.btn-ghost:hover {
  background: #EAF2FA;
}

.or {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--mist);
  font-size: .85rem;
  margin: 15px 0;
}

.or::before,
.or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--wave);
}

.join-row {
  display: flex;
  gap: 10px;
}

.join-row input {
  flex: 1;
  min-width: 0;
  padding: 12px;
  border: 2px solid var(--wave);
  border-radius: 10px;
  font-family: var(--mono);
  font-size: 1.1rem;
  letter-spacing: .15em;
  text-align: center;
}

.join-row .btn {
  width: auto;
  padding: 12px 18px;
}

.code-view {
  display: none;
  text-align: center;
  margin-top: 6px;
  position: relative;
}

.code-view .code {
  font-family: var(--mono);
  font-size: 2.3rem;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--signal);
}

.code-view .qr {
  display: flex;
  justify-content: center;
  margin: 14px 0 4px;
}

.code-view .qr svg {
  width: 168px;
  height: 168px;
  border-radius: 10px;
  background: #fff;
  padding: 10px;
  box-shadow: 0 2px 10px rgba(22, 34, 46, .08);
}

.code-view p {
  color: var(--mist);
  font-size: .88rem;
  margin: .4em 0 0;
}

.card-note {
  color: var(--mist);
  font-size: .8rem;
  margin: 13px 0 0;
  text-align: center;
}

@media (max-width: 760px) {
  .card-note {
    display: none;
  }
}

/* ===== приложение ===== */
#appScreen {
  flex: 1;
  display: none;
  flex-direction: column;
  padding-bottom: 72px;
}

#appScreen.active {
  display: flex;
}

/* ===== Панель участников ===== */
.peers-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px 0 4px 0px;
  margin: 0 auto;
  width: 100%;
  max-width: 362px;
}

.peers-top-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.peers-devices-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

/* Стили для элементов в панели */
.conn-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 5px 7px;
  font-size: 0.78rem;
  font-weight: 600;
  border: 0;
  font-family: inherit;
  white-space: nowrap;
}

.conn-pill.ok {
  background: var(--bg-ok);
  color: var(--text-ok);
  padding-right: 17px;
}

.conn-pill.wait {
  background: transparent;
  color: var(--mist);
}

.conn-pill.err {
  background: var(--bg-err);
  color: var(--danger);
  cursor: pointer;
  text-decoration: underline;
}

.invite-btn {
  background: transparent;
  border: none;
  border-radius: 999px;
  padding: 5px 10px;
  font: inherit;
  font-size: 0.75rem;
  color: var(--signal);
  cursor: pointer;
  font-weight: 600;
  white-space: nowrap;
}

.invite-btn:hover {
  background: var(--fog);
}

.peers-top-row .invite-btn[disabled] {
  opacity: 0.6;
  cursor: default;
}

.peers-top-row .invite-btn[disabled]:hover {
  background: transparent;
}

.leave-btn {
  background: transparent;
  border: none;
  color: var(--danger);
  border-radius: 999px;
  padding: 5px 10px;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.leave-btn:hover {
  background: var(--bg-err);
}

.chip {
  display: flex;
  align-items: center;
  gap: 5px;
  background: var(--card);
  border: 2px solid transparent;
  border-radius: 999px;
  padding: 4px 15px 5px 13px;
  font: inherit;
  font-size: 0.75rem;
  cursor: pointer;
  color: var(--ink);
  white-space: nowrap;
  margin-bottom: 3px;
  border: none;
      border: solid 1px #ccc;
}

.chip.active {
  border-color: var(--signal);
}

.chip .dot {
  width: 7px;
  height: 7px;
}

.chip:hover {
  background: var(--fog);
}

/* ===== Вкладки ===== */
.views {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.view {
  display: none;
  flex: 1;
  flex-direction: column;
  background: var(--card);
  border-radius: var(--radius);
  padding: 16px;
  min-height: 0;
}

.view.active {
  display: flex;
}

.tabs {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  display: flex;
  z-index: 30;
  background: var(--card);
  box-shadow: 0 -6px 24px rgba(22, 34, 46, .10);
  padding-bottom: env(safe-area-inset-bottom);
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  max-width: 362px;
}

.tabs button {
  flex: 1;
  padding: 10px 4px 8px;
  background: none;
  border: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0px;
  font: inherit;
  font-size: .78rem;
  color: var(--mist);
  position: relative;
}

.tabs button.active {
  color: var(--signal);
  font-weight: 600;
}

.tabs button#callBtn.active {
  color: var(--danger);
  font-weight: 600;
}

.tabs .ico {
  font-size: 1.3rem;
  line-height: 1;
}

/* десктоп: вкладки остаются внизу */
@media (min-width: 761px) {
  .views {
    min-height: 420px;
  }
}

/* ===== Бейджи непрочитанного ===== */
.tab-badge {
  position: absolute;
  top: 2px;
  right: calc(50% - 26px);
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}

.tab-badge[hidden] {
  display: none;
}

@media (min-width: 761px) {
  .tab-badge {
    position: static;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 4px;
  }
}

/* ===== Чат ===== */
.call-row {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.call-row .btn {
  width: auto;
  padding: 7px 15px 9px;
  font-size: .88rem;
}

.btn-call.active {
  background: var(--danger);
}

.btn-call.active:hover {
  background: #A93023;
}

.btn-ptt {
  flex: 1 1 170px;
  background: transparent;
  color: var(--signal);
  border: 2px solid var(--wave);
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

.btn-ptt.talking {
  background: var(--pulse);
  color: #fff;
  border-color: var(--pulse);
}

.call-status {
  color: var(--mist);
  font-size: .83rem;
}

.chat-log {
  flex: 1;
  min-height: 220px;
  overflow-y: auto;
  padding: 8px 12px 12px 12px;
  margin-bottom: 12px;
  border: none;
  background: transparent;
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* ===== Telegram-стиль чата ===== */
.msg {
  display: flex;
  flex-direction: column;
  max-width: 85%;
  margin-bottom: 0px;
  padding: 0;
  animation: msgAppear 0.15s ease-out;
}

@keyframes msgAppear {
  0% {
    opacity: 0;
    transform: scale(0.95);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.msg.self {
  align-self: flex-end;
  align-items: flex-end;
}

.msg.other {
  align-self: flex-start;
  align-items: flex-start;
  flex-direction: row;
  gap: 0px;
}

.msg .bubble {
    padding: 9px 19px 10px 18px;
    border-radius: 20px;
  font-size: 0.9rem;
  line-height: 1.45;
  word-wrap: break-word;
  max-width: 100%;
  position: relative;
}

.msg.self .bubble {
  background: var(--signal);
  color: #fff;
  border-bottom-right-radius: 4px;
}

.msg.other .bubble {
  background: var(--card);
  color: var(--ink);
  border-bottom-left-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.msg .sender {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--signal);
  margin-bottom: 2px;
  padding-left: 4px;
}

.msg .time {
  font-size: 0.6rem;
  opacity: 0.6;
  margin-top: 2px;
  padding: 0 4px;
  color: var(--mist);
}

.msg.self .time {
  color: rgba(255, 255, 255, 0.7);
}

.msg .avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  font-weight: 600;
  color: #fff;
  flex: none;
  margin-right: 8px;
  flex-shrink: 0;
}

.msg.other .bubble-wrapper {
  display: flex;
  flex-direction: column;
  max-width: calc(100% - 36px);
}

.msg.self .bubble-wrapper {
  display: flex;
  flex-direction: column;
  max-width: 100%;
}

/* ===== Системные сообщения ===== */
.msg.sys-ok {
  align-self: center;
  max-width: 90%;
  padding: 6px 16px;
  border-radius: 9px;
  font-size: 0.78rem;
  text-align: center;
  background: var(--bg-ok);
  color: var(--text-ok);
}

.msg.sys-err {
  align-self: center;
  max-width: 90%;
  padding: 6px 16px;
  border-radius: 9px;
  font-size: 0.78rem;
  text-align: center;
  background: var(--bg-err);
  color: var(--danger);
}

/* ===== Дата-разделитель ===== */
.date-divider {
  align-self: center;
  font-size: 0.65rem;
  color: var(--mist);
  background: rgba(0, 0, 0, 0.04);
  padding: 2px 14px;
  border-radius: 12px;
  margin: 6px 0 8px 0;
}

/* ===== Индикатор набора текста ===== */
.typing-indicator {
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--card);
  border-radius: 16px;
  border-bottom-left-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  font-size: 0.78rem;
  color: var(--mist);
}

.typing-indicator .dots span {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--mist);
  border-radius: 50%;
  animation: typingDot 1.4s infinite both;
}

.typing-indicator .dots span:nth-child(2) {
  animation-delay: 0.2s;
}

.typing-indicator .dots span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes typingDot {
  0%, 60%, 100% {
    transform: translateY(0);
    opacity: 0.4;
  }
  30% {
    transform: translateY(-4px);
    opacity: 1;
  }
}

/* ===== Форма чата ===== */
.chat-row {
  display: flex;
  gap: 10px;
}

.chat-row input {
  flex: 1;
  min-width: 0;
  padding: 11px;
  border: 2px solid var(--wave);
  border-radius: 10px;
  font-family: var(--body);
  font-size: .93rem;
}

.chat-row .btn {
  width: auto;
}

.chat-to {
  border: 2px solid var(--wave);
  border-radius: 10px;
  background: var(--card);
  color: var(--signal);
  font: inherit;
  font-size: .88rem;
  padding: 0 8px;
  max-width: 38%;
}

.send-btn {
  background: #0084ff;
  border: none;
  width: 43px;
  height: 43px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .2s ease;
  flex-shrink: 0;
  padding: 10px;
}

.send-btn:hover {
  background: #0073e0;
}

/* ===== Исправление раскладки ===== */
.layout-fix-banner {
  background: var(--fog);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 10px;
}

.layout-fix-banner p {
  margin: 0 0 10px;
  font-size: .9rem;
  color: var(--ink);
}

.layout-fix-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.layout-fix-actions .btn {
  width: auto;
  padding: 8px 14px;
  font-size: .86rem;
}

/* ===== Файлы ===== */
.drop {
  border: 2px dashed var(--wave);
  border-radius: 10px;
  padding: 26px 16px;
  text-align: center;
  color: var(--mist);
  font-size: .9rem;
  cursor: pointer;
  transition: background .15s;
}

.drop.over {
  background: #EAF2FA;
  border-color: var(--signal);
}

.file-log {
  margin-top: 14px;
  font-size: .92rem;
}

.file-log .fitem {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 0;
  border-bottom: 1px solid var(--fog);
  overflow-wrap: anywhere;
}

.file-log .fitem a {
  font-weight: 600;
}

.file-log .fmeta {
  color: var(--mist);
  font-size: .82rem;
  margin-left: auto;
  white-space: nowrap;
}

.hint {
  color: var(--mist);
  font-size: .85rem;
  margin: 0 0 12px;
}

/* ===== Кнопки файлов ===== */
.fitem {
  display: flex;
  align-items: center;
  gap: 8px;
}

.fitem-label {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

.fitem-actions {
  display: flex;
  gap: 2px;
  flex: none;
}

.ficon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--mist);
  font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
}

.ficon-btn:hover {
  background: var(--fog);
  color: var(--ink);
}

/* ===== Каталог файлов ===== */
.cat-share {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 14px;
  flex-wrap: wrap;
}

.cat-share .btn {
  width: auto;
  padding: 9px 15px;
  font-size: .88rem;
  border: none;
}

#catalogBox h4 {
  margin: 18px 0 8px;
  font-size: .95rem;
}

.cat-list {
  max-height: 280px;
  overflow-y: auto;
  border: 2px solid var(--fog);
  border-radius: 10px;
  padding: 4px 12px;
}

.cat-item {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--fog);
  font-size: .92rem;
  cursor: pointer;
  overflow-wrap: anywhere;
}

.cat-item:last-child {
  border-bottom: 0;
}

.cat-item input {
  accent-color: var(--signal);
  width: 17px;
  height: 17px;
  flex: none;
}

.cat-item .fmeta {
  margin-left: auto;
  color: var(--mist);
  font-size: .82rem;
  white-space: nowrap;
}

.cat-actions {
  display: flex;
  gap: 10px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.cat-actions .btn {
  width: auto;
  padding: 9px 15px;
  font-size: .88rem;
}

/* ===== Иконки ===== */
.ico img {
  width: 26px;
}

.ico2 img {
  width: 32px;
  margin-bottom: -10px;
  margin-right: 6px;
}

/* ===== Оффлайн-подключение по QR ===== */
#offlinePanel {
  position: relative;
}

.panel-close {
  position: absolute;
  top: 13px;
  right: 4px;
  width: 32px;
  height: 33px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--mist);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  margin: 0;
}

.panel-close:hover {
  color: var(--ink);
}

.linklike {
  background: transparent;
  border: 2px solid var(--wave);
  padding: 10px 28px;
  border-radius: 9px;
  color: var(--signal);
  font: inherit;
  font-size: .88rem;
  cursor: pointer;
  margin-top: 10px;
  font-weight: 600;
}

.off-note {
  color: var(--mist);
  font-size: .84rem;
  margin: 0 0 16px;
  text-align: left;
  max-width: 287px;
  margin: 0 auto;
  margin-bottom: 23px;
  border-left: 4px solid #93cf01;
  padding-left: 15px;
  margin-left: 4px;
}

#offlinePanel .qr {
  display: flex;
  justify-content: center;
  margin: 4px 0 12px;
}

#offlinePanel .qr svg {
  width: 220px;
  height: 220px;
  border-radius: 10px;
  background: #fff;
  padding: 10px;
  box-shadow: 0 2px 10px rgba(22, 34, 46, .08);
}

.off-video {
  width: 100%;
  border-radius: 10px;
  background: #0d1620;
  display: none;
  margin-bottom: 12px;
}

.off-video.live {
  display: block;
}

.off-status {
  color: var(--mist);
  font-size: .88rem;
  text-align: center;
  min-height: 1.4em;
  margin: 0 0 14px;
}

.off-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.off-actions .btn {
  width: auto;
  padding: 10px 16px;
  font-size: .9rem;
}

/* ===== Приглашение ===== */
.invite-box {
  position: relative;
  background: var(--card);
  border-radius: var(--radius);
  padding: 18px;
  margin: 0 0 0px;
  text-align: center;
}

.invite-box .qr {
  display: flex;
  justify-content: center;
  margin-bottom: 12px;
}

.invite-box .qr svg {
  width: 150px;
  height: 150px;
  border-radius: 8px;
  background: #fff;
  padding: 8px;
  box-shadow: 0 2px 10px rgba(22, 34, 46, .08);
}

.invite-code {
  font-family: var(--mono);
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--signal);
  margin-bottom: 12px;
}

/* ===== Ожидание разрешения ===== */
.pending-view {
  display: none;
  text-align: center;
  padding: 8px 0;
}

.pending-view.active,
#pendingView:not([hidden]) {
  display: block;
}

.pending-spin {
  font-size: 2rem;
  margin: 0 0 10px;
  animation: pending-pulse 1.4s ease-in-out infinite;
}

@keyframes pending-pulse {
  0%, 100% {
    opacity: .4;
  }
  50% {
    opacity: 1;
  }
}

#pendingView p {
  color: var(--mist);
  margin: 0 0 16px;
}

#pendingHint {
  color: var(--mist);
  font-size: 0.85rem;
  background: var(--fog);
  border-radius: 8px;
  padding: 10px 14px;
  margin: 0 0 14px;
}

#pendingHint[hidden] {
  display: none;
}

.invite-approve-hint {
  color: var(--mist);
  font-size: .82rem;
  max-width: 216px;
  margin: 0 auto;
  margin-bottom: 12px;
}

/* ===== Баннер запроса на вход ===== */
.join-request-banner {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 95;
  width: min(400px, 92vw);
  background: var(--card);
  border-radius: var(--radius);
  padding: 16px 18px;
  box-shadow: 0 12px 40px rgba(22, 34, 46, .22);
  text-align: center;
}

.join-request-banner p {
  margin: 0 0 12px;
  font-size: .94rem;
  color: var(--ink);
}

.join-request-actions {
  display: flex;
  gap: 10px;
}

.join-request-actions .btn {
  width: auto;
  flex: 1;
  padding: 9px 14px;
  font-size: .9rem;
}

/* ===== Модалки ===== */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(22, 34, 46, .35);
  z-index: 90;
}

.modal-backdrop[hidden] {
  display: none;
}

.settings-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(362px, 92vw);
  max-height: 86vh;
  overflow-y: auto;
  z-index: 91;
  background: var(--card);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: 0 20px 60px rgba(22, 34, 46, .25);
}

.settings-modal[hidden] {
  display: none;
}

.settings-modal h3 {
  margin: 0 0 16px;
  font-family: var(--display);
  font-size: 1.15rem;
}

.settings-section {
  margin-bottom: 19px;
  padding-bottom: 18px;
  border-bottom: none;
}

.settings-section:last-of-type {
  border-bottom: 0;
  margin-bottom: 4px;
  padding-bottom: 0;
}

.settings-section h4 {
  margin: 0 0 12px;
  font-size: .92rem;
  color: var(--mist);
  font-weight: 600;
}

.settings-section label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  font-size: .92rem;
  color: var(--ink);
}

.settings-section select {
  border: 2px solid var(--wave);
  border-radius: 8px;
  padding: 5px 9px;
  font: inherit;
  color: var(--ink);
  background: var(--card);
}

.settings-section .checkbox-row {
  justify-content: flex-start;
}

.settings-section .checkbox-row input {
  accent-color: var(--signal);
  width: 17px;
  height: 17px;
}

.settings-section .name-row {
  align-items: center;
}

.settings-section .name-row input[type="text"] {
  border: 2px solid var(--wave);
  border-radius: 8px;
  padding: 6px 10px;
  font: inherit;
  color: var(--ink);
  background: var(--card);
  width: 60%;
}

.settings-hint {
  color: var(--mist);
  font-size: .8rem;
  margin: 2px 0 0;
  line-height: 1.5;
}

.settings-anon-link {
  margin: 4px 0 0;
  font-size: .9rem;
  text-align: center;
}

.clear-history-link {
  display: block;
  width: 100%;
  text-align: center;
  margin: 8px 0 0;
  padding: 0;
  border: none;
  background: none;
  color: var(--mist);
  font-size: .82rem;
  cursor: pointer;
  text-decoration: underline;
}

.clear-history-link:hover {
  color: var(--danger);
}

/* ===== Гамбургер-меню ===== */
.hamburger-btn {
  background: none;
  border: 0;
  width: 34px;
  height: 34px;
  padding: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  flex: none;
  margin-left: auto;
}

.hamburger-btn span {
  display: block;
  width: 26px;
  height: 2px;
  background: var(--ink);
  border-radius: 1px;
  transition: transform .15s, opacity .15s;
}

.hamburger-btn[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(9px) rotate(45deg);
}

.hamburger-btn[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.hamburger-btn[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-9px) rotate(-45deg);
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  right: 16px;
  margin-top: 8px;
  z-index: 92;
  background: var(--card);
  border-radius: var(--radius);
  min-width: 230px;
  box-shadow: 0 12px 40px rgba(22, 34, 46, .2);
  padding: 8px;
  display: flex;
  flex-direction: column;
}

.dropdown-menu[hidden] {
  display: none;
}

.dropdown-menu a,
.dropdown-menu button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  padding: 11px 14px;
  border-radius: 8px;
  color: var(--ink);
  text-decoration: none;
  font: inherit;
  font-size: .94rem;
  background: none;
  border: 0;
  cursor: pointer;
}

.dropdown-menu a:hover,
.dropdown-menu button:hover {
  background: var(--fog);
}

.dropdown-menu hr {
  border: 0;
  border-top: 1px solid #e1e0e0;
  margin: 8px 11px 7px;
  max-width: 228px;
}

.dropdown-menu button img {
  flex: none;
  width: 20px;
  height: 20px;
}

.dropdown-menu button .storex2 {
  width: 28px;
  height: 28px;
  margin-bottom: -5px;
  background: #fff;
  border-radius: 4px;
}

.dropdown-menu button .roomx2 {
  width: 28px;
  height: 28px;
  background: #fff;
  border-radius: 4px;
  padding: 3px;
}

.dropdown-menu button .msgx2 {
  width: 28px;
  height: 28px;
  background: #fff;
  border-radius: 4px;
  padding: 5px;
}

/* ===== Комнаты ===== */
.room-tabs-bar {
  display: flex;
  align-items: center;
  background: var(--card);
  padding: 6px 6px;
  gap: 3px;
  overflow: hidden;
  width: 362px;
  max-width: 362px;
  margin: 6px auto 0;
  border-radius: 8px;
  border-bottom: 1px solid var(--fog);
  box-sizing: border-box;
  position: relative;
}

.room-tabs-scroll {
  display: flex;
  gap: 3px;
  overflow-x: auto;
  overflow-y: hidden;
  flex: 1;
  padding: 3px 0;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  min-width: 0;
  max-width: 100%;
}

.room-tabs-scroll::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
}

.room-tab {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 4px 10px;
  border: none;
  border-radius: 14px;
  background: transparent;
  color: var(--mist);
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
  font-family: var(--body);
  flex: 0 0 auto;
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.room-tab:hover {
  background: var(--fog);
  color: var(--ink);
}

.room-tab.active {
  background: var(--signal);
  color: #fff;
}

.room-tab .room-badge {
  background: var(--danger);
  color: #fff;
  font-size: 0.55rem;
  padding: 1px 5px;
  border-radius: 8px;
  margin-left: 2px;
}

.room-tab .room-tab-code {
  font-size: 0.5rem;
  opacity: 0.5;
  margin-left: 2px;
  font-family: monospace;
  flex: none;
}

.room-tabs-add {
  width: 26px;
  height: 26px;
  border: 2px dashed var(--wave);
  border-radius: 50%;
  background: transparent;
  color: var(--signal);
  font-size: 0.9rem;
  cursor: pointer;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  margin-left: 2px;
  padding: 0;
  line-height: 1;
  flex-shrink: 0;
}

.room-tabs-add:hover {
  background: var(--signal);
  color: #fff;
  border-color: var(--signal);
}

/* Кнопка переключения комнат */
#roomsToggleBtn {
  font-size: 1.6rem !important;
  padding: 3px 5px !important;
  transition: all 0.15s !important;
}

#roomsToggleBtn:hover {
  background: rgba(11, 98, 201, 0.08) !important;
}

.roomx {
  width: 28px;
  height: 27px;
  display: block;
  filter: brightness(0) saturate(100%) invert(27%) sepia(94%) saturate(1747%) hue-rotate(210deg) brightness(94%) contrast(101%);
  transition: filter 0.15s;
}

#roomsToggleBtn:hover .roomx {
  filter: brightness(0) saturate(100%) invert(37%) sepia(94%) saturate(1747%) hue-rotate(210deg) brightness(94%) contrast(101%);
}

.roomx2 {
  width: 24px;
  margin-bottom: -6px;
  margin-right: 4px;
  height: 23px;
  margin-left: 0px;
}

.roomx2b {
  width: 24px;
  margin-bottom: -4px;
  margin-right: 3px;
  height: 23px;
  margin-left: 2px;
}

.storex2 {
  width: 28px;
  margin-bottom: -10px;
  margin-right: 2px;
}

.msgx2 {
  width: 20px;
  margin-bottom: -6px;
  margin-left: 0px;
  margin-right: 5px;
}

/* ===== Список комнат в модалке ===== */
.rooms-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 4px 0 8px 0;
}

.rooms-list-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--fog);
  border-radius: 10px;
  transition: background 0.15s;
  border: 2px solid transparent;
}

.rooms-list-item.active-room {
  background: #E7F0FA;
  border-color: var(--signal);
}

.rooms-list-item .room-icon {
  font-size: 1.2rem;
  flex: none;
  margin-bottom: 7px;
  padding: 0;
}

.rooms-list-item .room-info {
  flex: 1;
  min-width: 0;
}

.rooms-list-item .room-name {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink);
}

.rooms-list-item .room-code {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--mist);
  margin-top: 2px;
}

.rooms-list-item .room-actions {
  display: flex;
  gap: 4px;
  flex: none;
}

.rooms-list-item .room-actions button {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
  font-size: 0.9rem;
  color: var(--mist);
  transition: all 0.15s;
  line-height: 1;
}

.rooms-list-item .room-actions button:hover {
  background: var(--card);
}

.rooms-list-item .room-actions .btn-code {
  color: var(--signal);
}

.rooms-list-item .room-actions .btn-code:hover {
  background: var(--signal);
  color: #fff;
}

.rooms-list-item .room-actions .btn-join {
  color: var(--pulse);
}

.rooms-list-item .room-actions .btn-join:hover {
  background: var(--pulse);
  color: #fff;
}

.rooms-list-item .room-actions .btn-delete {
  color: var(--danger);
}

.rooms-list-item .room-actions .btn-delete:hover {
  background: var(--danger);
  color: #fff;
}

/* ===== Футер ===== */
.site-footer {
  margin-top: auto;
  padding: 26px 20px calc(28px + env(safe-area-inset-bottom));
  text-align: center;
  color: var(--mist);
  font-size: .84rem;
}

.site-footer p {
  margin: 0;
}

.foot-nav {
  display: flex;
  gap: 8px 22px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 12px;
}

.foot-nav a {
  color: var(--mist);
}

.foot-nav a:hover {
  color: var(--signal);
}

.foot-nav button {
  color: var(--mist);
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: inherit;
  cursor: pointer;
}

.foot-nav button:hover {
  color: var(--signal);
}

/* ===== Инфо-страницы ===== */
.wrap {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px 20px;
  width: 100%;
}

.page h1 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.5rem, 3.6vw, 2.2rem);
  margin: 20px 0 0;
  padding-left: 0;
  line-height: 1.4;
}

.page h2 {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.2rem, 2.4vw, 1.55rem);
  margin: 20px 0 1em;
}

.page .lead {
  color: var(--mist);
  font-size: 1.05rem;
  max-width: 38em;
  margin: 0 0 8px;
  padding-left: 0;
  padding-top: 5px;
  padding-bottom: 10px;
}

.page section {
  padding: 0;
}

.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 20px;
}

.feature {
  background: var(--card);
  border-radius: var(--radius);
  padding: 24px;
}

.feature svg {
  display: block;
  margin-bottom: 14px;
}

.feature h3 {
  font-size: 1.02rem;
  margin: 0 0 .4em;
}

.feature p {
  color: var(--mist);
  font-size: .94rem;
  margin: 0;
}

.steps {
  counter-reset: step;
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 20px;
}

.steps li {
  counter-increment: step;
  background: var(--card);
  border-radius: var(--radius);
  padding: 24px;
}

.steps li::before {
  content: counter(step);
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  margin-bottom: 12px;
  background: #EAF2FA;
  color: var(--signal);
  font-family: var(--mono);
  font-weight: 600;
}

.steps h3 {
  font-size: 1rem;
  margin: 0 0 .4em;
}

.steps p {
  color: var(--mist);
  font-size: .94rem;
  margin: 0;
}

.tech-note {
  color: var(--mist);
  font-size: .9rem;
  max-width: 46em;
  margin-top: 24px;
}

.privacy p {
  max-width: 46em;
  color: var(--mist);
}

.privacy strong {
  color: var(--ink);
}

/* ===== FAQ ===== */
.faq details {
  background: var(--card);
  border-radius: var(--radius);
  padding: 4px 22px;
  margin-bottom: 10px;
}

.faq summary {
  cursor: pointer;
  font-weight: 600;
  padding: 13px 0;
  list-style-position: inside;
}

.faq details p {
  color: var(--mist);
  margin: 0 0 16px;
}

.cta {
  display: inline-block;
  width: auto;
  text-decoration: none;
  text-align: center;
  margin-top: 6px;
}

/* ===== Статьи ===== */
.article {
  max-width: 46em;
}

.article h2 {
  margin-top: 32px;
}

.article p,
.article li {
  color: var(--ink);
}

.article .lead {
  color: var(--mist);
}

.article ol.walk {
  padding-left: 1.25em;
}

.article ol.walk li {
  margin-bottom: 10px;
}

.article .note {
  color: var(--mist);
  font-size: .92rem;
  background: var(--card);
  border-radius: 10px;
  padding: 14px 18px;
}

.art-list {
  list-style: none;
  padding: 0;
  margin: 22px 0 0;
  display: grid;
  gap: 16px;
}

.art-list a {
  display: block;
  background: var(--card);
  border-radius: var(--radius);
  padding: 20px 22px;
  color: var(--ink);
  transition: box-shadow .15s;
}

.art-list a:hover {
  box-shadow: 0 6px 20px rgba(11, 98, 201, .12);
}

.art-list h3 {
  margin: 0 0 6px;
  font-size: 1.05rem;
  color: var(--signal);
}

.art-list p {
  margin: 0;
  color: var(--mist);
  font-size: .92rem;
}

.crumbs {
  font-size: .85rem;
  color: var(--mist);
  margin: 16px 0 0;
}

.crumbs a {
  color: var(--mist);
}

/* ===== Восстановление соединения ===== */
.resume-link {
  display: block;
  width: 100%;
  margin-top: 18px;
  padding: 0;
  cursor: pointer;
  border: none;
  background: none;
  color: var(--signal);
  font-weight: 600;
  font-size: .9rem;
  font-family: var(--body);
  text-align: center;
}

.resume-link:hover {
  text-decoration: underline;
}

.resume-link[hidden] {
  display: none;
}

.resume-link[disabled] {
  color: var(--mist);
  cursor: default;
}

.resume-link[disabled]:hover {
  text-decoration: none;
}

.resume-note {
  color: var(--mist);
  font-size: .8rem;
  margin: 13px 0 0;
  text-align: center;
}

/* ===== Согласие с условиями ===== */
.terms-consent {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  text-align: left;
  font-size: .86rem;
  color: var(--mist);
  margin-bottom: 14px;
  cursor: pointer;
}

.terms-consent[hidden] {
  display: none;
}

.terms-consent input {
  margin-top: 3px;
  accent-color: var(--signal);
  width: 16px;
  height: 16px;
  flex: none;
}

.terms-consent a {
  color: var(--signal);
}

/* ===== Анимации звонка ===== */
@keyframes callPulse {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.03);
  }
}

@keyframes callRings {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-15deg);
  }
  75% {
    transform: rotate(15deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

.call-ring-icon {
  display: inline-block;
  animation: callRings 0.8s ease-in-out infinite;
  font-size: 2.5rem;
  margin-bottom: 12px;
}

#callingBanner,
#incomingCallBanner {
  animation: callPulse 1.5s ease-in-out infinite;
}

/* ===== История ===== */
.history-settings {
  margin: 10px 0 0;
  font-size: .85rem;
}

.history-settings summary {
  cursor: pointer;
  color: var(--mist);
  list-style: none;
}

.history-settings summary::-webkit-details-marker {
  display: none;
}

.history-settings summary::before {
  content: '⚙ ';
}

.history-settings[open] summary {
  margin-bottom: 10px;
}

.history-settings label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  color: var(--ink);
}

.history-settings select {
  border: 2px solid var(--wave);
  border-radius: 8px;
  padding: 4px 8px;
  font: inherit;
  color: var(--ink);
  background: var(--card);
}

.history-anon-note {
  color: var(--mist);
  font-size: .8rem;
  margin: 10px 0 0;
  line-height: 1.5;
}

/* ===== Адаптив ===== */
@media (max-width: 480px) {
  .msg {
    max-width: 90%;
  }
  
  .msg .bubble {
    font-size: 0.85rem;
        padding: 9px 19px 10px 18px;
    border-radius: 20px;
  }
  
  .msg .avatar {
    width: 24px;
    height: 24px;
    font-size: 0.5rem;
  }
}

/* ===== Тёмная тема ===== */
/* ============================================================
   ТЁМНАЯ ТЕМА
   Включается: системой (если пользователь не выбрал «Светлая»)
   или вручную — html[data-theme="dark"] из настроек приложения.
   ============================================================ */
@media (prefers-color-scheme: dark) {
html:not([data-theme="light"]) {
    --fog: #1a1f26;
    --ink: #e8edf2;
    --card: #252b33;
    --wave: #3a4552;
    --mist: #8a9aa8;
    --bg-ok: #1a3a2e;
    --bg-err: #3a1a1a;
  }

html:not([data-theme="light"]) .chat-log .msg.other .bubble {
    background: #2d343e;
    color: var(--ink);
  }

html:not([data-theme="light"]) .chat-log .msg.self .bubble {
    background: var(--signal);
    color: #fff;
  }

html:not([data-theme="light"]) .bar {
    background: var(--card);
  }

html:not([data-theme="light"]) .connect-card {
    background: var(--card);
  }

html:not([data-theme="light"]) .settings-modal {
    background: var(--card);
  }

html:not([data-theme="light"]) .dropdown-menu {
    background: var(--card);
  }

html:not([data-theme="light"]) .dropdown-menu a:hover,
  .dropdown-menu button:hover {
    background: var(--fog);
  }

html:not([data-theme="light"]) .rooms-list-item {
    background: var(--fog);
  }

html:not([data-theme="light"]) .rooms-list-item.active-room {
    background: #1a2a3a;
    border-color: var(--signal);
  }

html:not([data-theme="light"]) .code-view .qr svg {
    background: #1a1f26;
  }

html:not([data-theme="light"]) .invite-box .qr svg {
    background: #1a1f26;
  }

html:not([data-theme="light"]) #offlinePanel .qr svg {
    background: #1a1f26;
  }

html:not([data-theme="light"]) .feature {
    background: var(--card);
  }

html:not([data-theme="light"]) .steps li {
    background: var(--card);
  }

html:not([data-theme="light"]) .faq details {
    background: var(--card);
  }

html:not([data-theme="light"]) .art-list a {
    background: var(--card);
  }

html:not([data-theme="light"]) .art-list a:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, .3);
  }

html:not([data-theme="light"]) .article .note {
    background: var(--card);
  }
}

html[data-theme="dark"] {
    --fog: #1a1f26;
    --ink: #e8edf2;
    --card: #252b33;
    --wave: #3a4552;
    --mist: #8a9aa8;
    --bg-ok: #1a3a2e;
    --bg-err: #3a1a1a;
  }

html[data-theme="dark"] .chat-log .msg.other .bubble {
    background: #2d343e;
    color: var(--ink);
  }

html[data-theme="dark"] .chat-log .msg.self .bubble {
    background: var(--signal);
    color: #fff;
  }

html[data-theme="dark"] .bar {
    background: var(--card);
  }

html[data-theme="dark"] .connect-card {
    background: var(--card);
  }

html[data-theme="dark"] .settings-modal {
    background: var(--card);
  }

html[data-theme="dark"] .dropdown-menu {
    background: var(--card);
  }

html[data-theme="dark"] .dropdown-menu a:hover,
  .dropdown-menu button:hover {
    background: var(--fog);
  }

html[data-theme="dark"] .rooms-list-item {
    background: var(--fog);
  }

html[data-theme="dark"] .rooms-list-item.active-room {
    background: #1a2a3a;
    border-color: var(--signal);
  }

html[data-theme="dark"] .code-view .qr svg {
    background: #1a1f26;
  }

html[data-theme="dark"] .invite-box .qr svg {
    background: #1a1f26;
  }

html[data-theme="dark"] #offlinePanel .qr svg {
    background: #1a1f26;
  }

html[data-theme="dark"] .feature {
    background: var(--card);
  }

html[data-theme="dark"] .steps li {
    background: var(--card);
  }

html[data-theme="dark"] .faq details {
    background: var(--card);
  }

html[data-theme="dark"] .art-list a {
    background: var(--card);
  }

html[data-theme="dark"] .art-list a:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, .3);
  }

html[data-theme="dark"] .article .note {
    background: var(--card);
  }

#newRoomName, #newRoomPassword{
 padding: 8px 10px;
    border-radius: 9px;
    border: solid 1px #ccc;
    width: 100%;
    max-width: 180px;   
}

/* ============================================================
   ФИКСАЦИЯ ПАНЕЛИ И ПОЛЯ ВВОДА
   ============================================================ */

/* Контейнер чата — flex-контейнер на всю высоту */
#view-chat {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    position: relative;
    padding: 0;
    background: var(--card);
    border-radius: var(--radius);
    overflow: hidden;
    max-height: 100%; /* было 69vh: vh на мобильных больше видимой области, ввод уезжал под панель */
}

/* Подсказка */
#view-chat .hint {
    flex: 0 0 auto;
    padding: 4px 12px 0 12px;
    margin: 0;
    color: var(--mist);
    font-size: 0.8rem;
}

/* 1. Панель участников — фиксирована сверху */
#view-chat .peers-row {
    flex: 0 0 auto;
    padding: 8px 12px 4px 12px;
    margin: 0;
    width: 100%;
    background: var(--card);
    position: sticky;
    top: 0;
    z-index: 5;
    border-bottom: none;
}

/* 2. Область сообщений — занимает всё свободное место и скроллится */
.chat-log-wrapper {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    position: relative;
    padding: 0 12px;
}

.chat-log {
    height: 100%;
    overflow-y: auto;
    padding: 8px 4px 12px 4px;
    background: var(--fog);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    -webkit-overflow-scrolling: touch;
}

/* 3. Поле ввода — фиксировано снизу */
.chat-input-wrapper {
    flex: 0 0 auto;
    padding: 15px 12px 17px 12px;
    background: var(--card);
    position: sticky;
    bottom: 0;
    z-index: 5;
    border-top: 1px solid var(--fog);
}

/* Форма чата */
.chat-row {
    display: flex;
    gap: 10px;
    align-items: center;
}

.chat-row input {
    flex: 1;
    min-width: 0;
    padding: 10px 14px;
    border: 2px solid var(--wave);
    border-radius: 10px;
    font-family: var(--body);
    font-size: .93rem;
    background: var(--card);
    color: var(--ink);
    outline: none;
}

.chat-row input:focus {
    border-color: var(--signal);
}

.chat-to {
    border: 2px solid var(--wave);
    border-radius: 10px;
    background: var(--card);
    color: var(--signal);
    font: inherit;
    font-size: .88rem;
    padding: 0 8px;
    height: 44px;
    max-width: 38%;
}

.send-btn {
    background: var(--signal);
    border: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .2s ease;
    flex-shrink: 0;
    padding: 0;
}

.send-btn:hover {
    background: var(--signal-deep);
}

.send-btn svg {
    width: 24px;
    height: 24px;
    stroke: white;
}

/* Статус звонка */
#callStatus {
    flex: 0 0 auto;
    padding: 0 12px 4px 12px;
    font-size: 0.78rem;
    color: var(--mist);
}

/* ============================================================
   КОРРЕКЦИЯ ДЛЯ МОБИЛЬНЫХ
   ============================================================ */
@media (max-width: 480px) {
    #view-chat {
        border-radius: 0;
    }
    
    .chat-log-wrapper {
        padding: 0 8px;
    }
    
    .chat-log {
        padding: 6px 4px 10px 4px;
        border-radius: 8px;
        min-height: 100px;
    }
    
    .chat-input-wrapper {
        padding: 15px 12px 17px 12px;
    }
    
    .chat-row input {
        font-size: 16px; /* предотвращает зум на iOS */
        padding: 8px 12px;
    }
    
    .send-btn {
        width: 40px;
        height: 40px;
    }
    
    .send-btn svg {
        width: 20px;
        height: 20px;
    }
    
    #view-chat .peers-row {
        padding: 6px 8px 4px 8px;
    }
    
    .chat-to {
        height: 40px;
        font-size: 0.8rem;
        max-width: 30%;
    }
}

/* ============================================================
   ДЛЯ iOS — предотвращение скролла всей страницы
   ============================================================ */
@supports (-webkit-touch-callout: none) {
    #view-chat {
        /* не -webkit-fill-available: на части версий iOS оно равно высоте
           вьюпорта и снова утаскивало ввод под панель вкладок */
        height: 100%;
    }
    
    .chat-log {
        -webkit-overflow-scrolling: touch;
    }
}

/* ============================================================
   ПАНЕЛЬ УЧАСТНИКОВ (стили)
   ============================================================ */
.peers-top-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding: 2px 0;
}

.peers-devices-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 4px 0 2px 0;
}

.conn-pill {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 4px 6px;
    font-size: 0.72rem;
    font-weight: 600;
    border: 0;
    font-family: inherit;
    white-space: nowrap;
}

.conn-pill.ok {
    background: var(--bg-ok, #E7F6EF);
    color: var(--text-ok, #0E7A55);
}

.conn-pill.wait {
    background: #EDF2F6;
    color: var(--mist);
}

.conn-pill.err {
    background: var(--bg-err, #FBECEA);
    color: var(--danger);
    cursor: pointer;
    text-decoration: underline;
}

.invite-btn {
    background: transparent;
    border: none;
    border-radius: 999px;
    padding: 4px 10px;
    font: inherit;
    font-size: 0.7rem;
    color: var(--signal);
    cursor: pointer;
    font-weight: 600;
    white-space: nowrap;
}

.invite-btn:hover {
    background: var(--fog);
}

.leave-btn {
    background: transparent;
    border: none;
    color: var(--danger);
    border-radius: 999px;
    padding: 4px 10px;
    font: inherit;
    font-size: 0.7rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.leave-btn:hover {
    background: var(--bg-err, #FBECEA);
}

.chip {
    display: flex;
    align-items: center;
    gap: 5px;
    background: var(--fog);
    border: 2px solid transparent;
    border-radius: 999px;
    padding: 3px 15px 4px 13px;
    font: inherit;
    font-size: 0.7rem;
    cursor: pointer;
    color: var(--ink);
    white-space: nowrap;
    transition: all 0.15s;
    border: solid 1px #ccc;
}

.chip.active {
    border-color: var(--signal);
    background: var(--card);
}

.chip .dot {
    width: 6px;
    height: 6px;
}

.chip:hover {
    background: var(--card);
}

/* Для iOS — предотвращение скролла всей страницы при фокусе на input */
@media (max-width: 480px) {
    #view-chat {
        /* не -webkit-fill-available: на iOS это высота вьюпорта,
           блок вылезал за родителя и утаскивал ввод под панель вкладок */
        height: 100%;
    }
    
    .chat-log {
        -webkit-overflow-scrolling: touch;
    }
}
/* ============================================================
   ЗАПРЕЩАЕМ СКРОЛЛ ВСЕЙ СТРАНИЦЫ
   ============================================================ */

/* Фиксация страницы нужна только при открытом экране чата:
   класс app-open ставит openApp() и снимает closeApp().
   Безусловная фиксация html/body глушила скролл на всех
   страницах сайта (/how/, info и т.д.), где подключён этот CSS */
body.app-open {
    height: 100%;
    overflow: hidden; /* ← запрещаем скролл страницы */
    margin: 0;
    padding: 0;
    position: fixed; /* ← фиксируем body, чтобы он не двигался */
    width: 100%;
    top: 0;
    left: 0;
    /* колонка: шапка + вкладки комнат + приложение; appScreen занимает
       ровно остаток высоты и не наезжает на roomTabsBar */
    display: flex;
    flex-direction: column;
}

/* Недостающее звено флекс-цепочки: между body и appScreen стоит
   <main class="stage"> — без этих правил он рос по контенту, flex:1
   у appScreen не действовал, поле ввода уезжало, лента не скроллилась */
/* Соседи main по флекс-колонке (шапка, панель вкладок комнат) не должны
   сжиматься: при flex-basis:auto у main его «желаемая» высота равна контенту,
   и растущая лента заставляла флекс ужимать шапку и roomTabsBar —
   верх приложения наползал на них всё сильнее */
body.app-open > * {
    flex: 0 0 auto;
    min-width: 0;
}

body.app-open main.stage {
    flex: 1 1 0; /* базис 0: делим свободное место, а не высоту контента */
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

body.app-open #appScreen {
    flex: 1 1 auto;
    height: auto;
    max-height: none;
    min-height: 0; /* иначе флекс не даст ужаться ниже контента */
}

/* ============================================================
   ПРИЛОЖЕНИЕ — ВСЯ ВЫСОТА ЭКРАНА
   ============================================================ */

#appScreen {
    display: none;
    flex-direction: column;
    height: 100dvh;
    max-height: 100dvh;
    overflow: hidden; /* ← запрещаем скролл */
    /* резервируем место под фиксированную панель «Позвонить/Чат/Файлы»,
       иначе строка ввода чата оказывается ПОД ней, за краем экрана */
    padding-bottom: calc(72px + env(safe-area-inset-bottom));
    position: relative;
}

#appScreen.active {
    display: flex;
}

/* ============================================================
   ОБЩИЙ КОНТЕЙНЕР ВЬЮХ
   ============================================================ */

.views {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 0;
    overflow: hidden; /* ← запрещаем скролл */
}

.view {
    display: none;
    flex: 1;
    flex-direction: column;
    background: var(--card);
    border-radius: var(--radius);
    padding: 12px;
    min-height: 0;
    overflow: hidden; /* ← запрещаем скролл */
    margin-top: 6px;
}

.view.active {
    display: flex;
}

/* ============================================================
   ЧАТ — ФИКСИРОВАННАЯ СТРУКТУРА
   ============================================================ */

#view-chat {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden; /* ← запрещаем скролл */
    background: var(--card);
    border-radius: var(--radius);
    position: relative;
    max-height: 100%; /* было 69vh: vh на мобильных больше видимой области, ввод уезжал под панель */
}

/* 1. ПАНЕЛЬ УЧАСТНИКОВ — НЕ СКРОЛЛИТСЯ */
#view-chat .peers-row {
    flex: 0 0 auto;
    padding: 8px 12px 6px 12px;
    margin: 0;
    width: 100%;
    background: var(--card);
   
    z-index: 5;
    flex-shrink: 0;
}

/* 2. ОБЛАСТЬ СООБЩЕНИЙ — ТОЛЬКО ОНА СКРОЛЛИТСЯ */
.chat-log-wrapper {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden; /* ← важный момент */
    padding: 0 12px;
    position: relative;
}

.chat-log {
    height: 100%;
    overflow-y: auto; /* ← ТОЛЬКО ЗДЕСЬ СКРОЛЛ */
    padding: 8px 4px 12px 4px;
    background: transparent;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* 3. ПОЛЕ ВВОДА — НЕ СКРОЛЛИТСЯ */
.chat-input-wrapper {
    flex: 0 0 auto;
    padding: 15px 12px 17px 12px;
    background: var(--card);
    border-top: 1px solid var(--fog);
    z-index: 5;
    flex-shrink: 0;
}

/* ============================================================
   КОРРЕКЦИЯ ДЛЯ iOS
   ============================================================ */

@supports (-webkit-touch-callout: none) {
    #appScreen {
        /* не fill-available: на iOS он равен высоте вьюпорта и вёл себя
           непредсказуемо; body зафиксирован с height:100%, этого достаточно */
        height: 100%;
        max-height: 100%;
    }
    
    .chat-log {
        -webkit-overflow-scrolling: touch;
    }
}

/* ============================================================
   МОБИЛЬНАЯ ВЕРСИЯ
   ============================================================ */

@media (max-width: 480px) {
    body.app-open {
        position: fixed;
        overflow: hidden;
    }
    
    #appScreen {
        height: 100dvh;
        max-height: 100dvh;
        /* НЕ обнулять: это место под фиксированную панель
           «Позвонить/Чат/Файлы», без него ввод уезжает под неё */
        padding-bottom: calc(72px + env(safe-area-inset-bottom));
    }
    
    .views {
        padding: 0;
    }
    
    .view {
        border-radius: 10px;
        padding: 0;
    }
    
    #view-chat .peers-row {
        padding: 6px 10px 4px 10px;
    }
    
    .chat-log-wrapper {
        padding: 0 8px;
    }
    
    .chat-log {
        padding: 6px 4px 10px 4px;
        border-radius: 8px;
        min-height: 80px;
    }
    
    .chat-input-wrapper {
        padding: 15px 12px 17px 12px;
    }
    
    .chat-row input {
        font-size: 16px;
        padding: 8px 12px;
    }
    
    .send-btn {
        width: 38px;
        height: 38px;
    }
    
    .send-btn svg {
        width: 18px;
        height: 18px;
    }
    
    .chat-to {
        height: 38px;
        font-size: 0.75rem;
        max-width: 30%;
    }
}
/* ============================================================
   ИСПРАВЛЕНИЕ ДЛЯ ДЛИННЫХ СЛОВ В ЧАТЕ (iOS)
   ============================================================ */

/* Общий контейнер сообщения */
.msg {
    display: flex;
    flex-direction: column;
    max-width: 85%;
    margin-bottom: 0px;
    padding: 0;
    animation: msgAppear 0.15s ease-out;
    min-width: 0; /* ← важно для flex-сжатия */
}

/* Базовые стили для пузырька */
.msg .bubble {
    padding: 9px 19px 10px 18px;
    border-radius: 20px;
    font-size: 0.9rem;
    line-height: 1.45;
    max-width: 100%;
    position: relative;
    overflow-wrap: break-word;      /* ← перенос длинных слов */
    word-wrap: break-word;          /* ← для старых браузеров */
    word-break: normal;             /* break-word в WebKit схлопывает min-content до буквы */
    hyphens: none;                  /* hyphens:auto в Safari сжимает пузырёк до слога */
    white-space: pre-wrap;          /* ← сохраняет пробелы, но переносит */
}

/* Свои сообщения — синий фон */
.msg.self .bubble {
    background: var(--signal);
    color: #fff;
    border-bottom-right-radius: 4px;
}

/* Чужие сообщения — белый фон */
.msg.other .bubble {
    background: var(--card);
    color: var(--ink);
    border-bottom-left-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

/* Обёртка для текста сообщения */
.msg .bubble-wrapper {
    display: flex;
    flex-direction: column;
    min-width: 0; /* ← важно для flex-сжатия */
    max-width: 100%;
}

/* Для очень длинных ссылок */
.msg .bubble a {
    word-break: normal; /* break-all даёт min-content в 1 символ — пузырёк со ссылкой схлопывался */
    display: inline-block;
    max-width: 100%;
}

/* Адаптив для мобильных */
@media (max-width: 480px) {
    .msg {
        max-width: 92%;
    }
    
    .msg .bubble {
        font-size: 0.85rem;
        padding: 6px 12px 5px 12px;
        word-break: normal;
    }
    
    .msg.other {
        max-width: 90%;
    }
    
    .msg.self {
        max-width: 90%;
    }
}
/* ============================================================
   ПРАВИЛЬНЫЙ ПЕРЕНОС СЛОВ В СООБЩЕНИЯХ (для iOS)
   ============================================================ */

/* Общий контейнер сообщения */
.msg {
    display: flex;
    flex-direction: column;
    max-width: 85%;
    margin-bottom: 0px;
    padding: 0;
    animation: msgAppear 0.15s ease-out;
    min-width: 0; /* ← важно для flex-сжатия */
}

/* Обёртка для текста */
.msg .bubble-wrapper {
    display: flex;
    flex-direction: column;
    min-width: 0;
    max-width: 100%;
}

/* Сам пузырёк */
.msg .bubble {
    padding: 9px 19px 10px 18px;
    border-radius: 20px;
    font-size: 0.9rem;
    line-height: 1.45;
    max-width: 100%;
    min-width: 0;
    position: relative;
    
    /* ← КЛЮЧЕВЫЕ СВОЙСТВА ДЛЯ ПЕРЕНОСА НА iOS */
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: normal; /* break-word в WebKit схлопывает min-content до буквы */
    hyphens: none; /* hyphens:auto в Safari сжимает пузырёк до слога */
    white-space: pre-wrap;
    
    /* Чтобы длинные слова не вылезали */
    overflow: hidden;
}

/* Свои сообщения — синий фон */
.msg.self .bubble {
    background: var(--signal);
    color: #fff;
    border-bottom-right-radius: 4px;
}

/* Чужие сообщения — белый фон */
.msg.other .bubble {
    background: var(--card);
    color: var(--ink);
    border-bottom-left-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

/* Ссылки внутри сообщений — тоже переносим */
.msg .bubble a {
    word-break: normal; /* break-all даёт min-content в 1 символ — пузырёк со ссылкой схлопывался */
    overflow-wrap: break-word;
    display: inline-block;
    max-width: 100%;
}

/* Длинные технические строки */
.msg .bubble code,
.msg .bubble pre {
    word-break: normal; /* break-all даёт min-content в 1 символ — пузырёк со ссылкой схлопывался */
    white-space: pre-wrap;
    max-width: 100%;
    display: inline-block;
}

/* Имя отправителя */
.msg .sender {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--signal);
    margin-bottom: 2px;
    padding-left: 4px;
}

/* Время */
.msg .time {
    font-size: 0.6rem;
    opacity: 0.6;
    margin-top: 2px;
    padding: 0 4px;
    color: var(--mist);
}

.msg.self .time {
    color: rgba(255, 255, 255, 0.7);
}

/* Аватарка */
.msg .avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    font-weight: 600;
    color: #fff;
    flex: none;
    margin-right: 8px;
    flex-shrink: 0;
}

/* Адаптив для iPhone */
@media (max-width: 480px) {
    .msg {
        max-width: 92%;
    }
    
    .msg .bubble {
        font-size: 0.85rem;
    padding: 9px 19px 10px 18px;
    border-radius: 20px;
        word-break: normal;
        overflow-wrap: break-word;
    }
    
    .msg.other {
        max-width: 90%;
    }
    
    .msg.self {
        max-width: 90%;
    }
    
    .msg .avatar {
        width: 24px;
        height: 24px;
        font-size: 0.5rem;
    }
}

/* Для очень длинных слов (например, ссылок) */
.chat-log .bubble a {
    color: inherit;
    text-decoration: underline;
    word-break: normal; /* break-all даёт min-content в 1 символ — пузырёк со ссылкой схлопывался */
    overflow-wrap: break-word;
    display: inline-block;
    max-width: 100%;
}

/* ============================================================
   СООБЩЕНИЯ — ПРАВИЛЬНЫЙ ПЕРЕНОС ДЛЯ ВСЕХ
   ============================================================ */

/* Общий контейнер сообщения */
.msg {
    display: flex;
    flex-direction: column;
    max-width: 85%;
    min-width: 0;
    margin-bottom: 0px;
    padding: 0;
    animation: msgAppear 0.15s ease-out;
    flex-shrink: 1;
}

/* Обёртка для текста */
.msg .bubble-wrapper {
    display: flex;
    flex-direction: column;
    min-width: 0;
    max-width: 100%;
    flex-shrink: 1;
}

/* Сам пузырёк — общие правила для всех */
.msg .bubble {
    padding: 9px 19px 10px 18px;
    border-radius: 20px;
    font-size: 0.9rem;
    line-height: 1.45;
    max-width: 100%;
    min-width: 0;
    position: relative;
    
    /* ✅ ПЕРЕНОС ПО СЛОГАМ */
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: normal;
    hyphens: none; /* hyphens:auto в Safari сжимает пузырёк до слога */
    white-space: pre-wrap;
    overflow: hidden;
    flex-shrink: 1;
}

/* ===== СВОИ СООБЩЕНИЯ (справа) ===== */
.msg.self {
    align-self: flex-end;
    align-items: flex-end;
}

.msg.self .bubble {
    background: var(--signal);
    color: #fff;
    border-bottom-right-radius: 4px;
}

.msg.self .time {
    color: rgba(255, 255, 255, 0.7);
}

/* ===== ЧУЖИЕ СООБЩЕНИЯ (слева) ===== */
.msg.other {
    align-self: flex-start;
    align-items: flex-start;
    flex-direction: row;
    gap: 0px;
}

.msg.other .bubble {
    background: var(--card);
    color: var(--ink);
    border-bottom-left-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.msg.other .time {
    color: var(--mist);
}

/* ===== АВАТАРКИ ===== */
.msg .avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    font-weight: 600;
    color: #fff;
    flex: none;
    margin-right: 8px;
    flex-shrink: 0;
}

/* ===== ИМЯ И ВРЕМЯ ===== */
.msg .sender {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--signal);
    margin-bottom: 2px;
    padding-left: 4px;
}

.msg .time {
    font-size: 0.6rem;
    opacity: 0.6;
    margin-top: 2px;
    padding: 0 4px;
}

/* ===== АДАПТИВ ДЛЯ IPHONE ===== */
@media (max-width: 480px) {
    .msg {
        max-width: 92%;
    }
    
    .msg .bubble {
        font-size: 0.85rem;
    padding: 9px 19px 10px 18px;
    border-radius: 20px;
    }
    
    .msg.other {
        max-width: 90%;
    }
    
    .msg.self {
        max-width: 90%;
    }
    
    .msg .avatar {
        width: 24px;
        height: 24px;
        font-size: 0.5rem;
    }
}
/* ============================================================
   ФИКС SAFARI: СХЛОПЫВАНИЕ ПУЗЫРЬКА ДО БУКВЫ (левая сторона)
   ------------------------------------------------------------
   У .msg стоял align-self: flex-start/flex-end — ширина сообщения
   считалась как fit-content. WebKit при расчёте fit-content
   вложенного флекса берёт min-content и (вопреки спецификации)
   учитывает в нём разрывы overflow-wrap: break-word → ширина
   схлопывалась до одной буквы. Лечение: сообщение растягивается
   на всю строку (ширина определённая), а облачко прижимается
   влево/вправо выравниванием ВНУТРИ сообщения. Chrome при обоих
   вариантах ведёт себя одинаково, Safari ломается только в первом.
   ============================================================ */

.chat-log .msg {
    align-self: stretch;
    width: 100%;
    max-width: 100%;
}

.chat-log .msg.self {
    align-items: flex-end;
}

.chat-log .msg.other {
    align-items: flex-start; /* строка: аватар + облачко слева */
}

/* прежние ограничения ширины переносим на саму обёртку облачка */
.chat-log .msg.self .bubble-wrapper {
    max-width: 85%;
}

.chat-log .msg.other .bubble-wrapper {
    max-width: calc(85% - 36px); /* минус аватарка с отступом */
}

/* системные сообщения остаются центрированными пилюлями */
.chat-log .msg.sys-ok,
.chat-log .msg.sys-err {
    align-self: center;
    align-items: center;
    width: auto;
    max-width: 90%;
}

@media (max-width: 480px) {
    .chat-log .msg.self .bubble-wrapper {
        max-width: 92%;
    }
    .chat-log .msg.other .bubble-wrapper {
        max-width: calc(92% - 32px);
    }
}

/* приписка о принятии соглашения в футере */
.site-footer .terms-note {
    font-size: 0.72rem;
    color: var(--mist);
    margin: 6px 0 2px;
}
.site-footer .terms-note a {
    color: inherit;
    text-decoration: underline;
}

/* пояснение под настройкой */
.settings-section .settings-hint {
    font-size: 0.74rem;
    color: var(--mist);
    margin: 4px 0 0;
    line-height: 1.45;
}

/* ============================================================
   ПОЛЬЗОВАТЕЛЬСКИЕ СТИЛИ (финальный слой)
   ============================================================ */

.site-footer .terms-note a {
    color: #369;
    text-decoration: none;
}

.msg .bubble {
    padding: 6px 19px 8px 18px;
    border-radius: 9px;
    font-size: 0.9rem;
    line-height: 1.45;
    max-width: 100%;
    min-width: 0;
    position: relative;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: normal;
    hyphens: none;
    white-space: pre-wrap;
    overflow: hidden;
    flex-shrink: 1;
    border: none;
}

.msg.other .bubble {
    background: #f5f5f5;
    color: var(--ink);
    border-bottom-left-radius: 4px;
    border: none;
}

/* приписка о соглашении: пользовательский вариант */
.site-footer .terms-note {
    font-size: 0.72rem;
    color: var(--mist);
    border-top: solid 1px #dedede;
    padding-top: 18px;
    max-width: 360px;
    margin: 18px auto 15px;
    text-align: center;
}
.site-footer .terms-note a {
    color: #369;
    text-decoration: none;
    letter-spacing: 0.012em;
}

/* Геометрия ленты чата, однозначно:
   обёртка — flex-контейнер строго в размер свободного места,
   лог — её единственный растяжимый ребёнок, скроллится ТОЛЬКО он,
   докрутка до края не передаётся наружу (overscroll-behavior). */
#view-chat .chat-log-wrapper {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
#view-chat .chat-log {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}
#view-chat .chat-input-wrapper {
    flex: 0 0 auto;
}

/* крестик выхода из комнаты прямо на вкладке панели */
.room-tab-close:hover {
    opacity: 1 !important;
    background: rgba(0,0,0,0.08);
}

/* «Кому» — пользовательский вариант (финальный слой) */
.chat-to {
    border: 2px solid var(--wave);
    border-radius: 10px;
    background: var(--card);
    color: var(--signal);
    font: inherit;
    font-size: .88rem;
    padding: 0 8px;
    height: 44px;
    max-width: 25%;
}

/* пилюля статуса соединения и кнопка приглашения — пользовательский вариант */
.conn-pill {
    display: inline-flex;
    align-items: center;
    border-radius: 0;
    padding: 4px 2px;
    font-size: 0.78rem;
    font-weight: 600;
    border: 0;
    font-family: inherit;
    white-space: nowrap;
}
.conn-pill.wait {
    background: transparent;
    color: var(--mist);
}
.leave-btn {
    background: transparent;
    border: none;
    color: var(--danger);
    border-radius: 999px;
    padding: 4px 10px;
    font: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}
.invite-btn {
    background: transparent;
    border: none;
    border-radius: 999px;
    padding: 4px 8px;
    font: inherit;
    font-size: 0.75rem;
    color: var(--signal);
    cursor: pointer;
    font-weight: 600;
    white-space: nowrap;
}

/* индикатор переключения комнаты на самой вкладке */
.room-tab.switching {
    opacity: 0.55;
    pointer-events: none;
}

/* пользовательский вариант (финальный слой) */
.foot-nav {
    display: flex;
    gap: 8px 18px;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 12px;
}
h3 {
    font-weight: 500;
}

/* Верхняя строка чата (статус + Обновить/Пригласить/Выйти): распределяем
   по всей ширине, чтобы не было пустого места справа, но кнопки никогда
   не переносятся на новую строку — сжимается (с многоточием) только
   сама пилюля статуса, а не действия. */
.peers-top-row {
    justify-content: space-between;
    flex-wrap: nowrap;
}
.peers-top-row .conn-pill {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.peers-top-row .invite-btn,
.peers-top-row .leave-btn {
    flex: 0 0 auto;
}

/* Рация: подсветка кнопки, пока удерживается */
.tabs button#pttBtn.active {
    color: var(--signal);
    font-weight: 600;
}
.tabs button#pttBtn.active .ico {
    animation: ptt-pulse 1s ease-in-out infinite;
}
@keyframes ptt-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
}

/* Блок приглашения стал выше (кнопка «Закрыть» вместо маленького ✕) —
   #appScreen намеренно не скроллится целиком (см. его правила выше),
   поэтому на невысоких экранах низ блока рисковал уйти за край и
   стать недостижимым. Даём блоку собственный скролл как аварийный
   запас, не трогая остальную геометрию экрана. */
.invite-box {
    max-height: 70vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}