/* ============================================================
   Nushon Meet — оболочка: рельса разделов + панель + основной экран
   (тёплая палитра, персиковый акцент; без холодных и серых тонов)
   ============================================================ */
.app { display: flex; height: 100dvh; overflow: hidden; position: relative; }

/* ---- рельса ---- */
.rail {
  width: 72px; flex: none; display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 16px 0 14px; border-right: 1px solid rgba(255, 255, 255, .05);
  background: rgba(14, 12, 11, .42); backdrop-filter: blur(24px); z-index: 3;
}
.rail-logo {
  width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; flex: none;
  background: linear-gradient(135deg, #e07a5f, #c96a4f); box-shadow: 0 8px 22px rgba(224, 122, 95, .3); color: #fff;
}
.rail-logo svg { width: 21px; height: 21px; }
.rail-btns { display: flex; flex-direction: column; gap: 8px; align-items: center; width: 100%; margin-top: 8px; }
.rail-btn {
  position: relative; width: 46px; height: 46px; border-radius: 13px; border: 1px solid transparent;
  background: transparent; color: rgba(255, 255, 255, .4); display: grid; place-items: center;
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.rail-btn svg { width: 21px; height: 21px; }
.rail-btn:hover { color: rgba(255, 255, 255, .8); background: rgba(255, 255, 255, .05); }
.rail-btn.on { color: #f0a184; background: var(--accent-soft); border-color: rgba(224, 122, 95, .24); }
.rail-btn.on::before {
  content: ''; position: absolute; left: -13px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 20px; border-radius: 999px; background: #e07a5f;
}
.rail-btn .rbadge { position: absolute; top: 4px; right: 4px; }
.rail-grow { flex: 1; }
.rbadge {
  position: absolute; top: -2px; right: -8px; min-width: 16px; height: 16px; border-radius: 9px; padding: 0 4px;
  background: linear-gradient(135deg, #e07a5f, #c96a4f); color: #fff; font-size: 10px; font-weight: 700;
  display: grid; place-items: center;
}
.ava {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: none;
  font-size: 13px; font-weight: 650; color: #241d19; letter-spacing: -0.02em;
  background: linear-gradient(150deg, #f0a184, #c96a4f);
}
.ava.sm { width: 28px; height: 28px; font-size: 11.5px; }
.ava.lg { width: 44px; height: 44px; font-size: 16px; }

/* ---- панель разделов ---- */
.panel {
  width: 302px; flex: none; display: flex; flex-direction: column; min-height: 0; z-index: 2;
  border-right: 1px solid rgba(255, 255, 255, .06);
  background:
    radial-gradient(ellipse 90% 70% at 50% 0%, rgba(224, 122, 95, .07) 0%, transparent 62%),
    linear-gradient(180deg, rgba(26, 24, 22, .46) 0%, rgba(18, 17, 16, .42) 100%);
  backdrop-filter: blur(30px); box-shadow: 18px 0 44px rgba(0, 0, 0, .28);
}
.panel.fold { display: none; }
.panel-head { flex: none; padding: 16px 16px 13px; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.ph-top { display: flex; align-items: center; gap: 10px; }
.ph-name { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; }
.ph-name svg { width: 17px; height: 17px; color: #e8946f; flex: none; }
.ph-name em { font-style: normal; background: linear-gradient(180deg, #f7d8c9, #e07a5f); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ph-fold { width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--border); background: rgba(255, 255, 255, .03); color: var(--muted-2); display: grid; place-items: center; }
.ph-fold svg { width: 14px; height: 14px; }
.ph-fold:hover { color: var(--text); background: rgba(255, 255, 255, .08); }
.ptitle { font-size: 19px; font-weight: 650; letter-spacing: -.01em; margin-top: 12px; }
.psub { font-size: 11.5px; color: var(--muted-2); margin-top: 3px; line-height: 1.45; }
.panel-body { flex: 1; min-height: 0; overflow-y: auto; padding: 10px 10px 6px; }
.panel-foot { flex: none; padding: 10px 12px 12px; border-top: 1px solid rgba(255, 255, 255, .06); }
.pf-me { display: flex; align-items: center; gap: 10px; }
.pf-txt { flex: 1; min-width: 0; }
.pf-txt b { display: block; font-size: 13px; }
.pf-txt i { font-style: normal; font-size: 11px; color: var(--muted-2); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.icon-btn.sm { width: 32px; height: 32px; border-radius: 10px; }
.icon-btn.sm svg { width: 16px; height: 16px; }
.plabel { font-size: 10px; text-transform: uppercase; letter-spacing: .15em; color: rgba(255, 255, 255, .26); padding: 14px 10px 7px; }

/* строки разделов — «иконка-чип + название + значение» */
.navrow {
  position: relative; display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  padding: 8px 10px; border-radius: 13px; border: 1px solid transparent; background: transparent; color: inherit;
  margin-bottom: 3px; transition: background .15s ease, border-color .15s ease;
}
.navrow .chip { width: 34px; height: 34px; flex: none; border-radius: 11px; background: rgba(255, 255, 255, .05); color: rgba(255, 255, 255, .44); display: grid; place-items: center; }
.navrow .chip svg { width: 17px; height: 17px; }
.navrow .lab { min-width: 0; flex: 1; }
.navrow .lab b { display: block; font-size: 13px; font-weight: 550; color: rgba(255, 255, 255, .86); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.navrow .lab i { display: block; font-style: normal; font-size: 11px; color: rgba(255, 255, 255, .32); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.navrow:hover { background: rgba(255, 255, 255, .045); }
.navrow.on { background: rgba(255, 255, 255, .055); border-color: rgba(255, 255, 255, .1); }
.navrow.on .chip { background: var(--accent-soft); color: #e8946f; }
.navrow.accent { background: linear-gradient(135deg, rgba(224, 122, 95, .16), rgba(201, 106, 79, .07)); border-color: rgba(224, 122, 95, .24); }
.navrow.accent .chip { background: rgba(224, 122, 95, .2); color: #f0a184; }
.navrow .nbadge { min-width: 18px; height: 18px; border-radius: 9px; padding: 0 5px; background: linear-gradient(135deg, #e07a5f, #c96a4f); color: #fff; font-size: 10.5px; font-weight: 700; display: grid; place-items: center; }
.navrow .sdot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .16); flex: none; }
.navrow .sdot.online { background: #a9b665; }

/* ---- основной экран ---- */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; }
.mhead {
  flex: none; display: flex; align-items: center; gap: 14px; padding: 12px 20px; z-index: 5;
  border-bottom: 1px solid var(--border); background: rgba(23, 19, 17, .62);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
.mh-text { min-width: 0; }
.mh-title { font-size: 16px; font-weight: 650; }
.mh-sub { font-size: 11.5px; color: var(--muted-2); }
.mh-actions { display: flex; align-items: center; gap: 8px; }
.icon-btn.burger { display: none; }
.mhead .grow, .dm-head .grow { flex: 1; }
.mbody { flex: 1; min-height: 0; display: flex; position: relative; }
.mview { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.mview-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 24px 26px 40px; }
.hero { margin-bottom: 22px; max-width: 760px; }
.hero h1 { font-size: 30px; line-height: 1.15; letter-spacing: -.02em; }
.hero h1 em { font-style: normal; background: linear-gradient(180deg, #f6dccd, #e07a5f); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero p { color: var(--muted); font-size: 14px; line-height: 1.6; margin-top: 10px; }
.cols { display: grid; grid-template-columns: 1.25fr .85fr; gap: 18px; align-items: start; }
.col-main, .col-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.cbt { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.cbt svg { width: 18px; height: 18px; color: rgba(224, 122, 95, .75); flex: none; }
.cbt b { font-size: 14.5px; font-weight: 600; }
.pill { margin-left: 6px; padding: 2px 9px; border-radius: 999px; font-size: 11px; background: rgba(224, 122, 95, .14); border: 1px solid rgba(224, 122, 95, .2); color: #f0a184; }
.myrow { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .03); border: 1px solid var(--border); }
.myrow-k { font-size: 11px; color: var(--muted-2); text-transform: uppercase; letter-spacing: .08em; white-space: nowrap; }
.myrow b { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 550; color: var(--accent-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.about-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.about-grid div { font-size: 12.5px; color: var(--muted); line-height: 1.55; padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, .03); border: 1px solid var(--border); }
.about-grid b { display: block; color: var(--text); font-size: 13px; margin-bottom: 5px; }
.card-pad .row-2, .card-pad .group { margin-top: 12px; }

/* ---- друзья ---- */
.flist { display: flex; flex-direction: column; gap: 6px; }
.frow { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--border); background: rgba(255, 255, 255, .025); }
.frow .fava { position: relative; flex: none; }
.frow .sdot { position: absolute; right: -2px; bottom: -2px; width: 12px; height: 12px; border-radius: 50%; background: rgba(140, 128, 118, .95); border: 2px solid #1c1815; }
.frow .sdot.online { background: #a9b665; }
.frow .fw { flex: 1; min-width: 0; }
.frow .fw b { font-size: 13.5px; }
.frow .fw i { font-style: normal; display: block; font-size: 11.5px; color: var(--muted-2); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.frow .fa { display: flex; gap: 6px; flex: none; }
.empty-note { font-size: 12.5px; color: var(--muted-2); padding: 12px 4px; line-height: 1.6; }

/* ---- переписка и звонок ---- */
.dm-head { flex: none; display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--border); }
.dm-name { font-size: 16px; font-weight: 650; }
.dm-status { font-size: 11.5px; color: var(--muted-2); }
.btn-call { background: linear-gradient(135deg, #e07a5f, #c96a4f); border-color: transparent; color: #fff; font-weight: 600; box-shadow: 0 8px 26px rgba(224, 122, 95, .32); }
.btn-call:hover { background: linear-gradient(135deg, #e88a6f, #d0724f); }
.dm-log { flex: 1; min-height: 0; overflow-y: auto; padding: 20px 22px; display: flex; flex-direction: column; gap: 14px; }
.dm-log .day { text-align: center; font-size: 11px; color: var(--muted-2); }
.dm-log .empty-note { margin: auto; text-align: center; max-width: 320px; }
.dm-form { flex: none; display: flex; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--border); background: rgba(23, 19, 17, .5); }
.dm-form .input { height: 46px; }

/* ---- входящий звонок ---- */
.ring {
  position: fixed; right: 22px; bottom: 22px; z-index: 88; display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 18px; background: rgba(32, 26, 22, .97);
  border: 1px solid var(--accent-line); box-shadow: 0 18px 50px rgba(0, 0, 0, .5); backdrop-filter: blur(18px);
}
.ring-txt b { display: block; font-size: 13.5px; }
.ring-txt i { font-style: normal; font-size: 11.5px; color: var(--muted-2); }
.ring.pulse { animation: ringPulse 1.6s ease-in-out infinite; }
@keyframes ringPulse {
  0%, 100% { box-shadow: 0 18px 50px rgba(0, 0, 0, .5); }
  50% { box-shadow: 0 18px 50px rgba(0, 0, 0, .5), 0 0 0 7px rgba(224, 122, 95, .13); }
}

/* ---- комната: звонок сверху (как в Discord), чат снизу ---- */
.mbody #viewRoom { height: auto; flex: 1; min-height: 0; }
#viewRoom .topbar { padding: 10px 16px; }
#viewRoom .rt-name { font-size: 15px; font-weight: 650; }
#viewRoom .burger { display: none; }

.callzone { position: relative; flex: none; height: clamp(230px, 38vh, 380px); background: #0f0d0c; border-bottom: 1px solid var(--border); }
.stage {
  position: absolute; inset: 0; overflow: auto; padding: 12px 16px 86px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; align-content: start;
}
.stage > .tile { max-height: 100%; }
.stage.spotlight { display: flex; flex-direction: column; gap: 10px; }
.stage.spotlight .tile.is-screen { flex: 1 1 auto; min-height: 0; }
.stage.spotlight .tile:not(.is-screen) { width: 190px; min-width: 190px; }

.callbar {
  position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 4px; padding: 7px 10px; z-index: 4;
  border-radius: 16px; background: rgba(20, 17, 15, .88);
  border: 1px solid rgba(255, 255, 255, .08); backdrop-filter: blur(16px);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .45);
}
.callbar .ctrl { width: auto; flex-direction: row; gap: 9px; padding: 5px 12px 5px 6px; border-radius: 12px; }
.callbar .ctrl:hover { background: rgba(255, 255, 255, .05); }
.callbar .ctrl .ico { width: 34px; height: 34px; border-radius: 10px; }
.callbar .ctrl .ico svg { width: 18px; height: 18px; }
.callbar .ctrl .cap { font-size: 12px; color: var(--muted); white-space: nowrap; }
.callbar .ctrl .kbd { display: none; }
.callbar .ctrl.primary { }
.callbar .ctrl.leave .cap { color: #f0b3a4; }
.callbar .reactions { margin: 0 4px; }
.callbar .reactions button { width: 34px; height: 34px; font-size: 16px; border-radius: 10px; }

.room-panel {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
  border-top: 1px solid var(--border); background: rgba(23, 19, 17, .42);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}
.room-panel .side-tabs { padding: 10px 16px 0; }
.room-panel .side-body { flex: 1; min-height: 0; overflow: auto; padding: 10px 14px 14px; }
.room-panel .chat { height: 100%; }
.room-panel .chat-log { gap: 2px; }
.room-panel .chat-form { padding-top: 10px; }

/* ---- адаптив ---- */
@media (max-width: 1180px) {
  .cols { grid-template-columns: 1fr; }
  .panel { width: 268px; }
  .about-grid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .rail { width: 62px; }
  .rail-btn { width: 50px; }
  .rail-btn .rl { display: none; }
  .rail-logo { width: 38px; height: 38px; border-radius: 13px; }
  .panel {
    position: fixed; left: 62px; top: 0; bottom: 0; width: min(88vw, 320px); z-index: 58;
    transform: translateX(-114%); transition: transform .24s cubic-bezier(.4, 0, .2, 1);
    box-shadow: 22px 0 60px rgba(0, 0, 0, .55);
  }
  .panel.open { transform: none; }
  .icon-btn.burger { display: grid; }
  #viewRoom .burger { display: grid; }
  .mview-scroll { padding: 16px 14px 30px; }
  .hero h1 { font-size: 24px; }
  .mhead { padding: 10px 12px; gap: 10px; }
  .dm-head { flex-wrap: wrap; padding: 12px 14px; }
  .dm-log { padding: 14px; }
  .dm-form { padding: 12px 14px; }
  .frow { flex-wrap: wrap; }
}
@media (max-width: 560px) {
  .rail { width: 56px; }
  .panel { left: 56px; }
  .mh-sub { display: none; }
  .dm-head .btn-call, .dm-head .btn { flex: 1; }
}

/* ============================================================
   Мелочи, которые ломали вид: выравнивание иконок, пустое
   состояние, сетка устройств
   ============================================================ */
/* иконки внутри кнопок больше не «уезжают» */
[data-i] { display: inline-flex; align-items: center; justify-content: center; line-height: 0; }
svg { display: block; }
button svg, .btn svg, .navrow svg, .cbt svg, .chip svg, .ctrl svg { flex: none; }
.btn { align-items: center; }
.btn > span[data-i] { margin-top: -1px; }

/* пустое состояние — только надпись по центру */
.empty-center { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; }
.empty-center .ec-ico {
  width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center;
  background: rgba(255, 255, 255, .035); border: 1px solid var(--border); color: rgba(224, 122, 95, .5);
}
.empty-center .ec-ico svg { width: 24px; height: 24px; }
.empty-center .ec-text { font-size: 16px; color: var(--muted); }

/* устройства: предпросмотр слева, выборы справа */
.dev-grid { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 20px; align-items: start; }
.dev-preview { min-width: 0; }
.dev-selects { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.dev-selects .field label { font-size: 12px; }

/* чуть меньше скруглений в панели — как на сайте */
.navrow { border-radius: 12px; }
.navrow .chip { border-radius: 10px; }
.icon-btn { border-radius: 11px; }
.ctrl .ico { border-radius: 13px; }
.preview-box { border-radius: var(--r); }

@media (max-width: 900px) {
  .dev-grid { grid-template-columns: 1fr; }
  .stage-wrap { height: clamp(160px, 30vh, 260px); padding: 10px 12px 6px; }
  .room-panel .side-tabs { padding: 8px 12px 0; }
  .room-panel .side-body { padding: 8px 12px 12px; }
  .empty-center .ec-text { font-size: 15px; }
}

/* ============================================================
   Новые блоки: поиск в панели, категории с «+», панель пользователя,
   сообщения как в Discord
   ============================================================ */
/* поиск по панели */
.psearch {
  display: flex; align-items: center; gap: 8px; margin-top: 12px; height: 36px; padding: 0 12px;
  border-radius: 10px; background: rgba(15, 13, 12, .5); border: 1px solid var(--border); color: var(--muted-2);
}
.psearch svg { width: 15px; height: 15px; flex: none; }
.psearch input { flex: 1; min-width: 0; background: none; border: 0; outline: none; font-size: 12.5px; color: var(--text); }
.psearch input::placeholder { color: var(--muted-2); }
.psearch:focus-within { border-color: var(--accent-line); box-shadow: 0 0 0 3px rgba(224, 122, 95, .12); }

/* заголовок категории + кнопка «+» */
.plabel { display: flex; align-items: center; gap: 6px; }
.plabel > span { flex: 1; }
.padd { width: 22px; height: 22px; border-radius: 7px; border: 1px solid transparent; background: transparent; color: var(--muted-2); display: grid; place-items: center; }
.padd:hover { color: var(--text); background: rgba(255, 255, 255, .06); }
.padd svg { width: 13px; height: 13px; }

/* рельса: аватар профиля */
.rail-btn.me { width: 40px; height: 40px; border-radius: 50%; padding: 0; }
.rail-btn.me .ava { width: 32px; height: 32px; font-size: 12.5px; }

/* нижний блок панели: строка звонка + строка пользователя */
.panel-foot { padding: 8px 10px 10px; }
.pf-call {
  display: flex; align-items: center; gap: 8px; padding: 7px 9px; margin-bottom: 6px;
  border-radius: 12px; background: rgba(224, 122, 95, .10); border: 1px solid rgba(224, 122, 95, .2);
}
.pfc-dot { width: 8px; height: 8px; border-radius: 50%; background: #a9b665; box-shadow: 0 0 0 3px rgba(169, 182, 101, .14); flex: none; }
.pfc-txt { flex: 1; min-width: 0; font-size: 11.5px; color: #f0c6b4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pfc-btn { width: 28px; height: 28px; border-radius: 9px; border: 1px solid transparent; background: rgba(255, 255, 255, .05); color: var(--muted); display: grid; place-items: center; flex: none; }
.pfc-btn:hover { color: var(--text); background: rgba(255, 255, 255, .1); }
.pfc-btn svg { width: 15px; height: 15px; }
.pfc-btn.off { color: #eab5a7; background: var(--danger-soft); }
.pf-me { padding: 6px 8px; border-radius: 12px; background: rgba(15, 13, 12, .38); border: 1px solid var(--border); }

/* сообщения: как в Discord — аватар, имя, время, текст */
.room-panel .chat-log .msg { padding: 4px 10px; border-radius: 10px; gap: 12px; }
.room-panel .chat-log .msg:hover { background: rgba(255, 255, 255, .028); }
.room-panel .chat-log .msg .avatar.sm { width: 32px; height: 32px; font-size: 12.5px; }
.room-panel .chat-log .msg .meta .nm { font-size: 14px; }
.room-panel .chat-log .msg .meta .tm { font-size: 11px; }
.room-panel .chat-log .msg .tx { font-size: 14px; line-height: 1.5; }
.day-divider { display: flex; align-items: center; gap: 12px; margin: 10px 2px 4px; font-size: 11.5px; color: var(--muted-2); }
.day-divider::before, .day-divider::after { content: ''; flex: 1; height: 1px; background: rgba(255, 255, 255, .06); }
.dm-log .msg { padding: 4px 10px; border-radius: 10px; }
.dm-log .msg:hover { background: rgba(255, 255, 255, .028); }
.dm-log .msg .avatar.sm { width: 32px; height: 32px; font-size: 12.5px; }
.dm-log .msg .meta .nm { font-size: 14px; }
.dm-log .msg .tx { font-size: 14px; line-height: 1.5; }

/* поле ввода как «строка сообщения» */
.room-panel .chat-form .input, .dm-form .input { border-radius: 10px; }

@media (max-width: 900px) {
  .callzone { height: clamp(180px, 34vh, 280px); }
  .stage { padding: 10px 12px 74px; }
  .callbar { padding: 6px 8px; gap: 2px; bottom: 8px; }
  .callbar .ctrl { padding: 4px; }
  .callbar .ctrl .cap { display: none; }
  .callbar .ctrl .ico { width: 38px; height: 38px; }
  .callbar .reactions { display: none; }
  .psearch { display: none; }
}

/* правки по разбору дизайна */
.room-panel .chat-log { justify-content: flex-end; }
.room-panel .chat-log .chat-empty { margin: auto; }
.callbar .reactions button { width: 36px; height: 36px; }
.plabel { padding: 12px 10px 6px; }
.navrow { margin-bottom: 4px; }
.pfc-dot.off { background: #c0563f; box-shadow: 0 0 0 3px rgba(192, 86, 63, .14); }

/* правки: логотип не спорит с активным разделом, подписи контрастнее */
.rail-logo {
  background: rgba(224, 122, 95, .16); color: #f0a184;
  box-shadow: none; border: 1px solid rgba(224, 122, 95, .22);
}
.plabel { font-size: 10.5px; color: rgba(255, 255, 255, .34); letter-spacing: .12em; }
.navrow .lab i { color: rgba(255, 255, 255, .38); }
.navrow.soft { background: rgba(255, 255, 255, .035); border-color: rgba(255, 255, 255, .07); }
.pf-me { border: 0; background: rgba(15, 13, 12, .32); }
.panel-head { padding: 14px 14px 12px; }
.ph-top { margin-bottom: 2px; }

/* шапка комнаты: одинаковые высоты у пилюль и иконок */
#viewRoom .topbar .icon-btn { width: 34px; height: 34px; border-radius: 10px; }
#viewRoom .topbar .icon-btn svg { width: 17px; height: 17px; }
#viewRoom .topbar .chip { height: 34px; font-size: 12.5px; }
#viewRoom .topbar { align-items: center; }

/* панель звонка: реакции не липнут к кнопкам */
.callbar .reactions { gap: 6px; margin: 0 10px; }
.callbar .ctrl { padding: 5px 14px 5px 6px; }

/* чат: разделитель даты заметнее, поле ввода компактнее */
.day-divider { color: var(--muted); }
.day-divider::before, .day-divider::after { background: rgba(255, 255, 255, .1); }
.room-panel .chat-form .input, .dm-form .input { height: 42px; }

/* ============================================================
   Плашка пользователя на обе боковые колонки, индикатор шифрования
   ============================================================ */
.chip.lock { color: #cfe0a8; border-color: rgba(169, 182, 101, .3); background: rgba(169, 182, 101, .12); }
.chip.lock svg { width: 14px; height: 14px; }
.chip.lock.weak { color: #f0c6a0; border-color: rgba(224, 168, 95, .3); background: rgba(224, 168, 95, .12); }
.chip.lock.off { color: #e0a99a; border-color: rgba(192, 86, 63, .35); background: rgba(192, 86, 63, .14); }

/* один блок на две колонки: рельса + панель (лежит вне панели, иначе её
   backdrop-filter делает containing block и плашка «прилипает» к панели) */
.panel-foot {
  position: fixed; left: 0; bottom: 0; z-index: 46; width: 372px;
  padding: 8px 10px 10px; border-top: 1px solid rgba(255, 255, 255, .07);
  border-right: 1px solid rgba(255, 255, 255, .05);
  background: rgba(16, 14, 13, .95); backdrop-filter: blur(22px);
}
.rail { padding-bottom: 84px; }
.panel-body { padding-bottom: 12px; }
.pf-me { cursor: pointer; }

@media (max-width: 1180px) {
  .panel-foot { width: 340px; }
}
@media (max-width: 900px) {
  .panel-foot {
    left: 62px; width: min(88vw, 320px); border-right: 0;
    transform: translateX(-120%); transition: transform .24s cubic-bezier(.4, 0, .2, 1);
  }
  .rail { padding-bottom: 14px; }
}
.panel.open ~ .panel-foot { transform: none; }

/* аватар профиля живёт только в общей плашке */
.panel-foot .pf-me { padding-left: 8px; }
.panel-foot .ava#pfAva { margin-left: 2px; }