.app{
  display:grid;
  grid-template-columns:320px 1fr;
  height:100dvh;
  overflow:hidden;
}
@supports (height:100svh){ .app{height:100svh;} }

/* ---------- Sidebar ---------- */
.sidebar{
  border-right:1px solid var(--line);
  display:flex; flex-direction:column;
  min-width:300px; height:100%; overflow:hidden;
  background:rgba(15,20,31,0.40);
}
.sidebar-header{
  display:flex; flex-direction:column; gap:10px;
  padding:12px 16px; border-bottom:1px solid var(--line);
  background:rgba(20,26,34,0.95); backdrop-filter:blur(10px);
}

.brand-row{display:flex;align-items:center;gap:12px}
.brand-link{display:flex;align-items:center;gap:10px;flex:1;min-width:0;text-decoration:none;color:var(--text)}
.brand-mark{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:12px;background:rgba(37,99,235,.15);border:1px solid rgba(37,99,235,.35);font-weight:800;letter-spacing:-.04em}
.brand-text{font-weight:800;font-size:16px;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand-actions{display:flex;gap:8px}

.app-nav{display:flex;gap:8px;align-items:center}
.nav-item{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:14px;border:1px solid rgba(31,41,55,0.65);background:rgba(15,20,31,0.35);text-decoration:none;color:var(--text);transition:var(--transition)}
.nav-item:hover{background:rgba(37,99,235,0.08);border-color:rgba(37,99,235,0.35)}
.nav-item.active{background:rgba(37,99,235,0.14);border-color:rgba(37,99,235,0.55)}

.me{
  padding:10px 16px; border-bottom:1px solid var(--line);
  background:rgba(15,20,31,0.30);
}
.me-link{display:flex;flex-direction:column;gap:2px;text-decoration:none;color:var(--text);padding:10px 12px;border-radius:14px;border:1px solid rgba(31,41,55,0.55);background:rgba(15,20,31,0.35);transition:var(--transition)}
.me-link:hover{background:rgba(37,99,235,0.06);border-color:rgba(37,99,235,0.35)}
.me-name{font-weight:700;font-size:15px;line-height:1.2}
.me-sub{color:var(--muted);font-size:12.5px;line-height:1.2}


.dialogs-header{
  position:sticky; top:64px; z-index:5;
  display:grid; grid-template-columns:1fr 1fr; gap:8px;
  padding:12px 16px; border-bottom:1px solid var(--line);
  background:rgba(20,26,34,0.95); backdrop-filter:blur(10px);
}
#btn-newchat,#btn-newgroup{width:100%;font-size:13px;padding:10px 12px}

.dialogs{
  flex:1 1 auto; overflow:auto; overscroll-behavior:contain;
  padding:8px 8px 16px; display:flex; flex-direction:column; gap:8px;
  scrollbar-gutter:stable;
  scrollbar-width:thin; scrollbar-color:rgba(31,41,55,.6) transparent;
}
.dialogs::-webkit-scrollbar{ width:12px }
.dialogs::-webkit-scrollbar-track{ background:transparent }
.dialogs::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,#233047,#1b2430);
  border-radius:10px; border:2px solid transparent; background-clip:padding-box;
}

/* элемент списка диалогов */
.dialog{
  display:flex; gap:12px; align-items:center;
  padding:14px 16px; border-radius:12px;
  background:rgba(15,20,31,0.40);
  border:1px solid rgba(31,41,55,0.50);
  cursor:pointer; transition:var(--transition); font-weight:500;
}
.dialog:hover{ background:rgba(37,99,235,0.05) }
.dialog.active{ background:rgba(37,99,235,0.12); border-left:3px solid var(--accent) }
.dialog .title{ font-weight:600; font-size:15px; color:var(--text) }
.dialog .sub{ font-size:13px; color:var(--muted); margin-top:2px }

/* заголовки разделов «Группы» / «Чаты» (не как диалог) */
.dialogs .dialog:has(.title):not(:has(.sub)){
  background:transparent; border:none; cursor:default;
  padding:8px 12px 0; margin-top:8px;
}
.dialogs .dialog:has(.title):not(:has(.sub)) .title{
  font-size:12.5px; color:var(--muted);
  text-transform:uppercase; letter-spacing:.06em;
}

/* скрыть https · E2E */
.foot.hint{ display:none !important; }

/* ---------- Main / Chat ---------- */
.main{ display:grid; grid-template-rows:auto 1fr auto; height:100% }

.chat{
  position:relative; display:grid; grid-template-rows:auto 1fr auto; height:100%;
  background:
    radial-gradient(1200px 800px at 100% -200px,rgba(37,99,235,.12),transparent 60%),
    radial-gradient(900px 700px at -200px 120%,rgba(59,130,246,.10),transparent 65%);
}

/* Шапка чата */
.chat-header{
  position:sticky; top:0; z-index:3000;
  display:flex; align-items:center; gap:12px;
  height:56px; min-height:56px; box-sizing:border-box;
  padding:10px 12px; border-bottom:1px solid var(--line);
  background:rgba(20,26,34,0.95); backdrop-filter:blur(10px);
  white-space:nowrap;
}
.peer{ display:flex; align-items:center; gap:10px; flex:1; min-width:0 }
.peer .avatar{ width:36px; height:36px; border-radius:50%; background:#223; flex:0 0 36px }
.peer-name{ font-weight:700; font-size:17px; color:var(--text); overflow:hidden; text-overflow:ellipsis }
.peer-phone{ color:var(--muted); font-size:13px; margin-top:2px; overflow:hidden; text-overflow:ellipsis }

/* контейнер для иконок справа (чтобы можно было листать на мобилке) */
.chat-actions{ display:flex; align-items:center; gap:8px }
.chat-actions > *{ flex:0 0 auto }

.btn-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border:1px solid var(--line);
  border-radius:12px; background:#0c1218; color:var(--text);
  line-height:1; padding:0; transition:var(--transition);
}
.btn-icon:hover{ background:#101820; }
.btn-icon:active{ transform:none }

/* Сообщения */
.messages{
  padding:18px 22px; overflow:auto; display:flex; flex-direction:column; gap:10px;
  min-height:0; overscroll-behavior:contain; scrollbar-gutter:stable;
  scrollbar-width:thin; scrollbar-color:rgba(31,41,55,.6) transparent;
}
.messages::-webkit-scrollbar{ width:12px }
.messages::-webkit-scrollbar-track{ background:transparent }
.messages::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,#233047,#1b2430);
  border-radius:10px; border:2px solid transparent; background-clip:padding-box;
}

/* Чип даты */
.day-sep{ display:flex; justify-content:center; margin:8px 0 6px }
.day-sep .chip{
  padding:6px 12px; border-radius:20px;
  background:rgba(17,23,34,0.75); color:var(--muted);
  user-select:none; font-weight:500; border:1px solid rgba(31,41,55,.8)
}

/* Пузырь (десктоп как было) */
.msg{
  display:inline-flex; gap:10px; align-items:flex-end;
  max-width:62%; padding:10px 14px; border-radius:16px;
  background:linear-gradient(135deg,rgba(37,99,235,.18),rgba(59,130,246,.18));
  border:1px solid rgba(59,130,246,.45);
  color:var(--text);
  overflow-wrap:anywhere; word-break:break-word; overflow-anchor:none;
  transition:var(--transition);
  box-shadow:0 2px 4px rgba(0,0,0,.15);
  font-size:15px; line-height:1.5;
  font-family:inherit; font-style:normal;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
.msg b, .msg strong{ font-weight:700 !important; }
.msg i, .msg em{ font-style:normal !important; }
.msg.me{ align-self:flex-end; }
.msg.them{
  align-self:flex-start;
  background:var(--bubble);              /* цвет чужих сообщений */
  border:1px solid rgba(31,41,55,0.9);
}
.msg .author{
  display:block; font-weight:600; font-size:12.5px;
  letter-spacing:.02em; margin:-2px 0 4px; color:var(--muted); opacity:.92;
}
.msg>span:first-child{ white-space:pre-wrap; line-height:1.5; font-style:normal; }
.msg .time{
  display:inline-block; margin-top:2px; margin-left:8px;
  font-size:11.5px; color:var(--muted); opacity:.75; order:3;
}

/* Счётчик */
.counter{ margin-top:6px; font-size:13px; opacity:.7; text-align:right }
.counter.warn{ color:#f59e0b } .counter.danger{ color:var(--danger) }

/* Бар ввода */
.composer{
  position:sticky; bottom:0; z-index:10;
  display:flex; align-items:center; gap:10px;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line);
  background:rgba(20,26,34,0.95);
  backdrop-filter:blur(10px);
}
#msg{
  flex:1 1 auto;           /* тянется, но не выталкивает кнопку */
  min-width:0;             /* ключ: разрешаем сжиматься во flex */
  width:auto;              /* важно для Android */
  background:rgba(15,20,31,0.60);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  padding:9px 12px; min-height:36px; max-height:110px; resize:none;
  font-size:15px; line-height:1.45;
}
#msg_counter{ flex:0 0 auto; white-space:nowrap; }
#btn-send{ flex:0 0 auto; background:var(--accent); border-radius:var(--radius-md); padding:10px 16px; font-weight:600 }

@media (max-width: 900px) {

  .app {
    grid-template-columns: 1fr !important;
    overflow-x: hidden !important;
  }


  /* 1. ГЛАВНОЕ УЛУЧШЕНИЕ: ШАПКА ЧАТА С ПРИОРИТЕТОМ НАЗВАНИЯ */
  .chat-header {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 8px;
    align-items: center;
    height: auto;
    min-height: 52px;
    padding: 8px 10px;
  }

  /* Аватар: минимальный размер */
  .peer .avatar {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
  }

  /* Блок с названием и номером */
  .peer {
    min-width: 0;  /* ключ: разрешаем сжиматься */
    overflow: hidden;
    flex: 1;  /* занимает максимум доступного места */
  }

  /* Название группы/чата - ОСНОВНОЙ КОНТЕНТ */
  .peer-name {
    font-size: 16px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    margin: 0;
  }

  /* Номер телефона (если есть) */
  .peer-phone {
    font-size: 12px;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    margin-top: 2px;
  }

  /* 2. КНОПКИ ДЕЙСТВИЙ: ПРОКРУЧИВАЕМЫЕ */
  .chat-actions {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    flex-shrink: 0;  /* не дают сжать кнопки */
    min-width: 160px;
    scrollbar-width: none;  /* Firefox */
    -ms-overflow-style: none;  /* IE и Edge */
  }

  .chat-actions::-webkit-scrollbar {
    display: none;  /* Chrome, Safari, Opera */
  }

  .chat-actions > * {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
  }

  .btn-icon {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 10px;
    padding: 0;
  }

  /* 3. СООБЩЕНИЯ: Исправление переноса длинных слов */
  .msg {
    max-width: 90%;
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
  }

  .msg span:first-child {
      word-break: break-all;
  }

  /* 4. ПОЛЕ ВВОДА: Кнопка отправки всегда видна */
  .composer {
    display: flex;
    align-items: flex-end;
    gap: 8px;
  }

  .composer #msg {
    flex: 1;
    min-width: 0;
    padding-right: 12px;
  }

  #btn-send {
    flex-shrink: 0;
  }

  .composer #msg-counter {
      display: none;
  }

  /* 5. ТАБЛИЦА СЕССИЙ: Горизонтальная прокрутка */
  #sessions-container .sheet {
    overflow-x: auto;
  }
  #sessions-container table {
    white-space: nowrap;
  }

    /* ИСПРАВЛЕНИЕ: Кнопки "Новый чат" и "Группа" - МАКСИМУМ МЕСТА */
  #btn-newchat-m, #btn-newgroup-m {
    flex: 1 1 auto;                    /* занимают максимум свободного места */
    white-space: nowrap;
    padding: 10px 16px !important;
    font-size: 13px !important;
    height: 36px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-weight: 500;
    min-width: 100;                      /* убрали минимум, чтобы занимали максимум */
  }

  /* Иконки действий - прокручиваются если много */
  .chat-actions > .btn-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    min-width: 32px;
  }

  /* Контейнер действий - позволяет прокручиваться */
  .chat-actions {
    gap: 8px;
    overflow-x: auto;
    flex-wrap: nowrap;
  }


}

/* Очень узкие экраны */
@media (max-width:360px){
  #msg{padding-right:16px}
  #msg_counter{display:none}

  .chat-header {
    padding: 6px 8px !important;
    gap: 6px !important;
  }

  .peer .avatar {
    width: 28px !important;
    height: 28px !important;
  }

  .peer-name {
    font-size: 14px !important;
  }

  .chat-actions {
    max-width: 120px !important;
  }

  .btn-icon {
    width: 28px !important;
    height: 28px !important;
  }
}


/* Разное */
.peer-clickable{ cursor:pointer }

/* ===== УЧАСТНИКИ ===== */
.members-overlay{
  position:fixed; inset:0; display:block;
  background:rgba(0,0,0,0.45); backdrop-filter:blur(6px);
  z-index:2000;
}
.chat-header .members{ position:relative; margin-left:auto }
.members-card{
  position:absolute;
  left:12px; right:auto; top:calc(100% + 10px);
  z-index:3100;
  width:320px; max-height:min(60vh,520px); overflow:auto;
  background:#0f1622; border:1px solid var(--line); color:var(--text);
  border-radius:var(--radius-lg); box-shadow:0 18px 40px rgba(0,0,0,.5); padding:16px;
}
.members-head{
  position:sticky; top:0; z-index:1;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:8px 0 10px; font-weight:700; font-size:16px;
  background:#0f1622; border-bottom:1px solid var(--line);
}
.members-list{ padding:12px 0 0 }
.member-item{
  display:grid; grid-template-columns:1fr auto auto; gap:10px; align-items:center;
  padding:8px 10px; border-radius:var(--radius-md); transition:var(--transition);
}
.member-item:hover{ background:rgba(37,99,235,.08) }
.member-name{ font-weight:600 }
.member-sub{ font-size:12px; color:var(--muted) }
.member-item .ghost{ padding:6px 10px }

/* ===== СЕССИИ (модал) ===== */
#sessions_container{
  position:fixed; inset:0; display:none;
  align-items:flex-start; justify-content:center;
  padding:6vh 16px; background:rgba(0,0,0,.6); backdrop-filter:blur(8px);
  z-index:5000;
}
#sessions_container:not(.hidden){ display:flex }

#sessions_container .sheet{
  width:min(760px,100%);
  background:rgba(20,26,34,0.98);
  border:1px solid var(--line); border-radius:20px;
  box-shadow:0 18px 44px rgba(0,0,0,.6);
  padding:18px;
}
#sessions_container header{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:6px 4px 12px; border-bottom:1px solid var(--line);
}
#sessions_container header strong{ font-size:16px; font-weight:700 }
#sessions_container .actions{
  display:flex; justify-content:flex-end; gap:8px;
  padding-top:12px; border-top:1px solid var(--line); margin-top:12px;
}
#sessions_container table{ width:100%; border-collapse:collapse }
#sessions_container th,#sessions_container td{ padding:12px 12px; text-align:left }
#sessions_container thead th{
  font-weight:600; color:var(--text); opacity:.75; font-size:12.5px;
  text-transform:uppercase; letter-spacing:.05em; padding:10px 12px;
}
#sessions_container tbody tr{ border-bottom:1px solid rgba(31,41,55,.5); transition:var(--transition) }
#sessions_container tbody tr:hover{ background:rgba(37,99,235,.08) }
#sessions_container tbody td{ font-size:14px; color:var(--text) }

/* кнопки */
.ghost{
  background:#0c1218; border:1px solid var(--line); color:var(--text);
  padding:8px 12px; border-radius:12px; cursor:pointer; transition:var(--transition)
}
#sessions_container .btn-icon:hover{ background:rgba(37,99,235,0.15); }
.ghost:hover{ background:#101820; border-color:var(--accent) }
.ghost.btn-icon{ width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center; border-radius:var(--radius-md); font-size:18px }
.btn-icon:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }

/* ===== Вызовы (если есть) ===== */
.call-toast{
  pointer-events:none; right:16px; bottom:16px; left:auto; top:auto; transform:none;
}
.call-panel{
  position:fixed; right:16px; bottom:16px; z-index:2000;
  background:rgba(20,26,34,0.98); border:1px solid var(--line);
  border-radius:16px; padding:14px; box-shadow:0 18px 32px rgba(0,0,0,.5); min-width:280px; backdrop-filter:blur(10px)
}
.call-panel .ttl{ font-weight:700; margin-bottom:6px }
.call-panel .row{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:6px }
.call-btn{ background:rgba(31,41,55,0.7); border:1px solid var(--line); border-radius:10px; padding:8px 10px; transition:var(--transition); font-weight:500 }
.call-btn:hover{ background:rgba(31,41,55,0.8); border-color:var(--accent); transform:translateY(-1px) }
/* уменьшаем высоту нижней панели */
@media (min-width: 900px){
  .composer{
    padding-top: 6px;
    padding-bottom: 6px;
  }

  #msg{
    min-height: 28px;
    padding-top: 6px;
    padding-bottom: 6px;
  }

  #btn-send{
    padding-top: 6px;
    padding-bottom: 6px;
  }
}

/* ===== YUINO dark sketch redesign: все в одном файле, без внешних CSS/шрифтов ===== */
:root{
  --bg:#050505;
  --card:#0b0b0b;
  --line:#1c1c1c;
  --text:#d0d0d0;
  --muted:#858585;
  --accent:#9c82bd;
  --accent-hover:#ad95cc;
  --bubble:#282828;
  --danger:#b44a4a;
  --yuino-font:var(--site-font);

  --i-gear:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M19.43 12.98c.04-.32.07-.65.07-.98s-.02-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.37-.31-.6-.22l-2.49 1a7.28 7.28 0 0 0-1.69-.98L14.5 2.42A.49.49 0 0 0 14 2h-4c-.25 0-.46.18-.5.42L9.12 5.07c-.61.23-1.18.55-1.69.98l-2.49-1a.5.5 0 0 0-.6.22l-2 3.46a.5.5 0 0 0 .12.64l2.11 1.65c-.04.32-.08.65-.08.98s.03.66.08.98l-2.11 1.65a.5.5 0 0 0-.12.64l2 3.46c.12.22.37.31.6.22l2.49-1c.51.4 1.08.74 1.69.98l.38 2.65c.04.24.25.42.5.42h4c.25 0 .46-.18.5-.42l.38-2.65c.61-.24 1.18-.58 1.69-.98l2.49 1c.23.08.48 0 .6-.22l2-3.46a.5.5 0 0 0-.12-.64l-2.11-1.65ZM12 15.5A3.5 3.5 0 1 1 12 8a3.5 3.5 0 0 1 0 7.5Z'/%3E%3C/svg%3E");
  --i-login:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M10 17v-3H3v-4h7V7l5 5-5 5Zm-1 4v-2h10V5H9V3h10c1.1 0 2 .9 2 2v14c0 1.1-.9 2-2 2H9Z'/%3E%3C/svg%3E");
  --i-chat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M4 20c-.55 0-1.02-.2-1.41-.59S2 18.55 2 18V6c0-.55.2-1.02.59-1.41S3.45 4 4 4h16c.55 0 1.02.2 1.41.59S22 5.45 22 6v12c0 .55-.2 1.02-.59 1.41S20.55 20 20 20H4Zm2-4h8v-2H6v2Zm0-3h12v-2H6v2Zm0-3h12V8H6v2Z'/%3E%3C/svg%3E");
  --i-users:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5s-3 1.34-3 3 1.34 3 3 3ZM8 11c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5 5 6.34 5 8s1.34 3 3 3Zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5C15 14.17 10.33 13 8 13Zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5C23 14.17 18.33 13 16 13Z'/%3E%3C/svg%3E");
  --i-user:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4Zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4Z'/%3E%3C/svg%3E");
  --i-menu:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M3 18v-2h18v2H3Zm0-5v-2h18v2H3Zm0-5V6h18v2H3Z'/%3E%3C/svg%3E");
  --i-phone:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1C10.61 21 3 13.39 3 4c0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.58.11.35.03.74-.25 1.01l-2.2 2.2Z'/%3E%3C/svg%3E");
  --i-broom:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M19.36 2.72 20.78 4.14 15.06 9.85l-1.41-1.41 5.71-5.72ZM9.93 8.43l5.66 5.66-1.42 1.42-.71-.71-2.12 2.12 2.83 2.83-1.42 1.42L4.27 12.7l1.42-1.42 2.83 2.83 2.12-2.12-.71-.71 1.42-1.42ZM3 21l2.83-7.07 4.24 4.24L3 21Z'/%3E%3C/svg%3E");
  --i-trash:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12ZM8 9h8v10H8V9Zm7.5-5-1-1h-5l-1 1H5v2h14V4h-3.5Z'/%3E%3C/svg%3E");
  --i-bomb:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 22a8 8 0 1 1 4.9-14.32L18.6 6 17 4.4 18.4 3 20 4.6 21.6 3 23 4.4 21.4 6 23 7.6 21.6 9 20 7.4l-1.69 1.69A8 8 0 0 1 12 22Zm-4-8h2v-2H8v2Zm4 0h2v-2h-2v2Z'/%3E%3C/svg%3E");
  --i-door:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M4 21V3h10v2H6v14h8v2H4Zm11-4-1.4-1.4 2.6-2.6H9v-2h7.2l-2.6-2.6L15 7l5 5-5 5Z'/%3E%3C/svg%3E");
  --i-add-user:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M15 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4Zm-8 0V9H4V7h3V4h2v3h3v2H9v3H7Zm8 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4Z'/%3E%3C/svg%3E");
  --i-edit:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25ZM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.996.996 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83Z'/%3E%3C/svg%3E");
  --i-crown:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='m5 16 2-9 5 4 5-4 2 9H5Zm0 4v-2h14v2H5Z'/%3E%3C/svg%3E");
  --i-close:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='m6.4 19-1.4-1.4 5.6-5.6L5 6.4 6.4 5l5.6 5.6L17.6 5 19 6.4 13.4 12l5.6 5.6-1.4 1.4-5.6-5.6L6.4 19Z'/%3E%3C/svg%3E");
  --i-send:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M2 21 23 12 2 3v7l15 2-15 2v7Z'/%3E%3C/svg%3E");
  --i-screen:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M3 5h18v12H3V5Zm2 2v8h14V7H5Zm4 14v-2h6v2H9Z'/%3E%3C/svg%3E");
  --i-mic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 14c1.66 0 3-1.34 3-3V5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3Zm5.3-3c0 3-2.54 5.1-5.3 5.1S6.7 14 6.7 11H5c0 3.41 2.72 6.23 6 6.72V21h2v-3.28c3.28-.49 6-3.31 6-6.72h-1.7Z'/%3E%3C/svg%3E");
}

html,
body{
  background:#050505 !important;
}

body{
  font-family:var(--yuino-font);
  color:var(--text);
}

.app{
  grid-template-columns:320px minmax(0,1fr);
  gap:14px;
  padding:14px;
  background:#050505;
}

.sidebar,
.chat{
  border:2px solid #000;
  border-radius:18px;
  background:#0a0a0a;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.025);
  overflow:hidden;
}

.sidebar{
  min-width:0;
  border-right:2px solid #000;
}

.sidebar-header,
.dialogs-header,
.me,
.chat-header,
.composer{
  background:#0a0a0a;
  border-color:#171717;
  backdrop-filter:none;
}

.sidebar-header{
  padding:24px 24px 12px;
  gap:28px;
}

.brand-row{
  align-items:flex-start;
}

.brand-link{
  gap:6px;
}

.brand-mark{
  width:auto;
  height:auto;
  background:transparent;
  border:0;
  border-radius:0;
  color:#9f9f9f;
  font-family:var(--yuino-font);
  font-size:42px;
  line-height:.9;
  font-style:italic;
  font-weight:800;
  letter-spacing:-.08em;
}

.brand-mark::after{
  content:"◦";
  display:inline-block;
  margin-left:6px;
  font-size:22px;
  transform:translateY(-10px);
  opacity:.75;
}

.brand-text{
  display:none;
}

.brand-actions{
  gap:10px;
}

.app-nav{
  justify-content:center;
  gap:26px;
  padding:20px 0 18px;
}

.nav-item{
  position:relative;
  width:58px;
  height:58px;
  border-radius:50%;
  border:0;
  background:#8f8f8f;
  box-shadow:0 3px 0 rgba(255,255,255,.18) inset, 0 7px 14px rgba(0,0,0,.42);
  color:#1f1f1f;
  font-size:0;
}

.nav-item:hover,
.nav-item.active{
  background:#9a87b9;
  border-color:transparent;
  transform:translateY(-1px);
}

.nav-item::before,
.ghost.btn-icon::before,
#btn-send::before,
.call-panel button::before,
.members-card button::before{
  content:"";
  display:block;
  width:24px;
  height:24px;
  background:currentColor;
  -webkit-mask:var(--ico, var(--i-chat)) center/contain no-repeat;
  mask:var(--ico, var(--i-chat)) center/contain no-repeat;
}

.nav-item[aria-label="Чаты"]{--ico:var(--i-chat)}
.nav-item[aria-label="Тиммейты"]{--ico:var(--i-users)}
.nav-item[aria-label="Профиль"]{--ico:var(--i-user)}

.me{
  padding:10px 22px 12px;
}

.me-link{
  background:transparent;
  border:0;
  border-radius:0;
  padding:0;
  color:#9a9a9a;
  font-style:italic;
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}

.me-name{
  font-size:17px;
  font-weight:800;
}

.me-sub{
  font-size:15px;
}

.dialogs-header{
  position:static;
  grid-template-columns:1fr;
  gap:8px;
  padding:0 14px 10px;
}

#btn-newchat,
#btn-newgroup,
#btn-newchat-m,
#btn-newgroup-m{
  background:#161616;
  border:1px solid #232323;
  color:#d1d1d1;
  border-radius:8px;
  box-shadow:none;
  font-family:inherit;
  font-weight:800;
}

#btn-newchat:hover,
#btn-newgroup:hover,
#btn-newchat-m:hover,
#btn-newgroup-m:hover{
  background:#222;
  border-color:#373737;
}

.dialogs{
  padding:0 14px 18px;
  gap:0;
}

.dialog{
  display:block;
  padding:8px 0 7px;
  border-radius:8px;
  background:#202020;
  border:1px solid #151515;
  border-bottom-color:#0f0f0f;
}

.dialog:hover{
  background:#2a2a2a;
}

.dialog.active{
  background:#292929;
  border-left:2px solid var(--accent);
}

.dialog .title{
  color:#c7c7c7;
  font-family:var(--yuino-font);
  font-size:17px;
  font-style:italic;
  font-weight:800;
  line-height:1.15;
}

.dialog .sub{
  color:#858585;
  font-size:15px;
  margin-top:2px;
}

.dialogs .dialog:has(.title):not(:has(.sub)){
  margin-top:4px;
  padding:3px 0 2px;
  background:#2b2b2b;
  border-radius:8px;
  border:1px solid #222;
}

.dialogs .dialog:has(.title):not(:has(.sub)) .title{
  color:#bdbdbd;
  font-family:var(--yuino-font);
  font-size:17px;
  font-style:italic;
  font-weight:800;
  text-transform:none;
  letter-spacing:0;
}

.chat{
  display:grid;
  grid-template-rows:auto 1fr auto;
  background:#070707;
}

.chat-header{
  position:relative;
  min-height:88px;
  height:auto;
  padding:22px 30px 12px;
  border-bottom:0;
}

.peer{
  flex-direction:column;
  align-items:flex-start;
  gap:2px;
}

.peer-name{
  font-family:var(--yuino-font);
  font-size:32px;
  font-weight:800;
  font-style:italic;
  color:#e7e7e7;
  line-height:1.05;
}

.peer-phone{
  color:#727272;
  font-size:16px;
  font-style:italic;
}

.chat-actions{
  align-self:flex-start;
  gap:10px;
  padding-top:12px;
  overflow:visible;
}

.ghost.btn-icon{
  width:48px;
  height:48px;
  min-width:48px;
  border-radius:50%;
  border:0;
  background:#9a9a9a;
  color:#202020;
  box-shadow:0 2px 0 rgba(255,255,255,.25) inset, 0 8px 16px rgba(0,0,0,.42);
  font-size:0;
  padding:0;
}

.ghost.btn-icon:hover{
  background:#b1b1b1;
  border-color:transparent;
  transform:translateY(-1px);
}

.ghost.btn-icon::before{
  width:25px;
  height:25px;
}

#btn-sessions{--ico:var(--i-gear)}
#btn-logout{--ico:var(--i-login)}
#btn-dialogs-mobile{--ico:var(--i-menu)}
#btn-call,
#btn-gcall{--ico:var(--i-phone)}
#btn-clear-me,
#btn-gclear-me{--ico:var(--i-broom)}
#btn-clear-all,
#btn-gclear-all{--ico:var(--i-bomb)}
#btn-leavechat,
#btn-leave{--ico:var(--i-door)}
#btn-addmembers{--ico:var(--i-add-user)}
#btn-rename{--ico:var(--i-edit)}
#btn-delgroup{--ico:var(--i-trash)}
#btn-screen,
[id^="btn-screen-"]{--ico:var(--i-screen)}

.members-card button[title="Передать админку"]{--ico:var(--i-crown)}
.members-card button[title="Исключить"]{--ico:var(--i-close)}

.messages{
  margin:0 30px;
  padding:18px 18px 24px;
  background:#050505;
  border:1px solid #151515;
  gap:14px;
}

.day-sep .chip{
  background:#151515;
  border-color:#242424;
  color:#9f9f9f;
  font-style:italic;
}

.msg{
  max-width:56%;
  padding:18px 22px;
  border:0;
  border-radius:18px;
  background:#292929;
  color:#9e9e9e;
  box-shadow:none;
  font-family:var(--yuino-font);
  font-size:24px;
  line-height:1.18;
  font-style:italic;
  font-weight:800;
}

.msg.them{
  background:#292929;
  border:0;
}

.msg.me{
  background:#292929;
}

.msg .author{
  color:#8b8b8b;
  font-size:14px;
  font-style:italic;
}

.msg .time{
  color:#8e8e8e;
  font-family:var(--site-font);
  font-size:12px;
  font-style:normal;
  font-weight:700;
  opacity:.85;
}

.composer{
  align-items:flex-end;
  gap:10px;
  padding:12px 30px 20px;
  border-top:0;
}

#msg{
  min-height:64px;
  max-height:130px;
  padding:17px 18px;
  border:0;
  border-radius:16px;
  background:#262626;
  color:#cfcfcf;
  font-family:var(--yuino-font);
  font-size:18px;
  font-style:italic;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.03);
}

#msg::placeholder{
  color:#828282;
}

#msg_counter{
  align-self:center;
  color:#9a9a9a;
  font-family:var(--site-font);
  font-size:15px;
  opacity:1;
}

#btn-send{
  width:48px;
  height:48px;
  min-width:48px;
  border-radius:50%;
  padding:0;
  background:#9a9a9a;
  color:#202020;
  font-size:0;
  box-shadow:0 2px 0 rgba(255,255,255,.25) inset, 0 8px 16px rgba(0,0,0,.42);
}

#btn-send:hover{
  background:#b1b1b1;
}

#btn-send::before{
  --ico:var(--i-send);
  width:25px;
  height:25px;
  margin:auto;
}

.call-panel{
  background:#171717;
  border-color:#2b2b2b;
  border-radius:18px;
}

.call-panel button{
  position:relative;
  min-width:48px;
  height:42px;
  border-radius:999px;
  background:#9a9a9a;
  color:#202020;
  font-size:0;
  padding:0 14px;
}

.call-panel button::before{
  margin:auto;
}

.call-panel button:nth-of-type(1){--ico:var(--i-mic)}
.call-panel button[id^="btn-screen-"]{--ico:var(--i-screen)}
.call-panel button:last-child{--ico:var(--i-phone)}

#remote-screen-wrap{
  border-radius:18px !important;
  border-color:#2a2a2a !important;
  box-shadow:0 18px 46px rgba(0,0,0,.65) !important;
}

@media (max-width:900px){
  .app{
    padding:0;
    gap:0;
  }

  .chat,
  .sidebar{
    border-radius:0;
  }

  .chat-header{
    display:grid;
    grid-template-columns:auto 1fr auto;
    min-height:70px;
    padding:12px 14px;
  }

  .peer-name{
    font-size:23px;
  }

  .messages{
    margin:0 14px;
    padding:14px 10px;
  }

  .msg{
    max-width:88%;
    font-size:18px;
  }

  .composer{
    padding:10px 14px calc(12px + env(safe-area-inset-bottom));
  }

  #msg{
    min-height:48px;
  }

  .ghost.btn-icon,
  #btn-send{
    width:42px;
    height:42px;
    min-width:42px;
  }

  .chat-actions{
    min-width:0;
    max-width:210px;
    overflow-x:auto;
  }
}

@media (max-width:360px){
  .chat-header{
    padding:10px 8px !important;
  }

  .peer-name{
    font-size:20px !important;
  }

  .chat-actions{
    max-width:138px !important;
  }

  .ghost.btn-icon,
  #btn-send{
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
  }

  .ghost.btn-icon::before,
  #btn-send::before{
    width:21px;
    height:21px;
  }
}

/* ===== Compact messenger update: left panel + smaller chat UI ===== */
:root{
  --i-feed:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M4 4h16v3H4V4Zm0 5h10v3H4V9Zm0 5h16v6H4v-6Zm12-5h4v3h-4V9Z'/%3E%3C/svg%3E");
}

.app{
  grid-template-columns:340px minmax(0,1fr);
}

.sidebar-header.sidebar-top-redesign{
  padding:24px 24px 14px;
  gap:18px;
}

.top-actions{
  display:flex;
  align-items:flex-start;
  gap:8px;
  margin-left:auto;
}

.btn-small-text{
  height:32px;
  min-width:32px;
  padding:0 10px;
  border-radius:7px;
  background:#191919;
  border:1px solid #2b2b2b;
  color:#d0d0d0;
  font-family:var(--yuino-font);
  font-size:14px;
  font-style:italic;
  font-weight:800;
  line-height:1;
  box-shadow:none;
}

.btn-small-text:hover{
  background:#242424;
  border-color:#3b3b3b;
  box-shadow:none;
}

.btn-info{
  width:32px;
  padding:0;
  border-radius:50%;
}

.main-nav{
  display:grid;
  grid-template-columns:repeat(3,58px);
  justify-content:center;
  gap:18px 22px;
  padding:18px 0 16px;
}

.main-nav .nav-item{
  margin:0;
  padding:0;
  width:58px;
  height:58px;
  min-width:58px;
  border:0;
  appearance:none;
  -webkit-appearance:none;
}

.main-nav .nav-item span{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
}

.main-nav .nav-item[aria-label="Мессенджер"]{--ico:var(--i-chat)}
.main-nav .nav-item[aria-label="Тиммейты"]{--ico:var(--i-users)}
.main-nav .nav-item[aria-label="Профиль"]{--ico:var(--i-user)}
.main-nav .nav-item[aria-label="Лента"]{--ico:var(--i-feed)}
.main-nav .nav-item[aria-label="Настройки"]{--ico:var(--i-gear)}

.sidebar .me{
  display:none;
}

.dialogs-header.dialogs-controls{
  position:static;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  padding:12px 14px 13px;
  border-top:1px solid #171717;
  border-bottom:1px solid #171717;
}

.dialog-control{
  display:grid;
  grid-template-columns:minmax(0,1fr) 42px;
  min-width:0;
}

.dialog-control-main,
.dialog-control-plus,
#btn-newchat,
#btn-newgroup{
  height:42px;
  min-height:42px;
  padding:0 10px;
  background:#161616;
  border:1px solid #303030;
  color:#d1d1d1;
  box-shadow:none;
  font-family:var(--yuino-font);
  font-size:18px;
  font-style:italic;
  font-weight:800;
  line-height:1;
}

.dialog-control-main{
  border-radius:8px 0 0 8px;
  text-align:left;
}

.dialog-control-plus,
#btn-newchat.dialog-control-plus,
#btn-newgroup.dialog-control-plus{
  border-left:0;
  border-radius:0 8px 8px 0;
  font-size:26px;
  text-align:center;
}

.dialog-control-main:hover,
.dialog-control-plus:hover{
  background:#242424;
  border-color:#3b3b3b;
  box-shadow:none;
}

.dialogs{
  padding:0 14px 18px;
  gap:0;
}

.dialogs-section-title{
  margin-top:8px;
  padding:4px 10px 5px;
  background:#2b2b2b;
  border:1px solid #222;
  border-radius:8px;
  color:#bdbdbd;
  font-family:var(--yuino-font);
  font-size:17px;
  font-style:italic;
  font-weight:800;
  line-height:1.1;
}

.dialog{
  display:grid;
  grid-template-columns:38px minmax(0,1fr);
  align-items:center;
  gap:10px;
  min-height:58px;
  padding:8px 10px;
  border-radius:8px;
  background:#202020;
  border:1px solid #151515;
  border-bottom-color:#0f0f0f;
}

.dialog.group-dialog{
  grid-template-columns:minmax(0,1fr);
}

.dialog + .dialog,
.dialogs-section-title + .dialog{
  margin-top:0;
}

.dialog-avatar{
  width:38px;
  height:38px;
  min-width:38px;
  border-radius:50%;
  object-fit:cover;
  background:#3a3a3a;
  border:1px solid #4a4a4a;
}

.dialog-body{
  min-width:0;
}

.dialog .title{
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:16px;
  line-height:1.1;
}

.dialog .sub{
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:13px;
  line-height:1.2;
  margin-top:3px;
}

.chat-header{
  min-height:72px;
  padding:16px 30px 10px;
}

.peer-name{
  font-size:29px;
}

.peer-phone{
  font-size:14px;
}

.messages{
  gap:8px;
  padding:14px 16px 18px;
}

.msg{
  max-width:48%;
  padding:9px 13px;
  border-radius:14px;
  gap:7px;
  font-size:18px;
  line-height:1.16;
}

.msg>span:first-child{
  line-height:1.16;
}

.msg .author{
  font-size:12px;
  margin:-1px 0 3px;
}

.msg .time{
  margin-left:5px;
  font-size:10.5px;
}

.composer{
  gap:8px;
  padding:8px 30px 12px;
}

#msg{
  min-height:40px;
  max-height:92px;
  padding:10px 14px;
  border-radius:14px;
  font-size:16px;
  line-height:1.25;
}

#msg_counter{
  font-size:12px;
}

.ghost.btn-icon,
#btn-send{
  width:42px;
  height:42px;
  min-width:42px;
}

.ghost.btn-icon::before,
#btn-send::before{
  width:22px;
  height:22px;
}

@media (max-width:900px){
  .app{
    grid-template-columns:1fr;
  }

  .chat-header{
    min-height:62px;
    padding:10px 12px;
  }

  .peer-name{
    font-size:22px;
  }

  .messages{
    margin:0 10px;
    padding:10px 8px 14px;
  }

  .msg{
    max-width:82%;
    padding:8px 11px;
    font-size:16px;
  }

  .composer{
    padding:7px 10px calc(8px + env(safe-area-inset-bottom));
  }

  #msg{
    min-height:38px;
    padding:8px 12px;
    font-size:15px;
  }

  #msg_counter{
    display:none;
  }

  .ghost.btn-icon,
  #btn-send{
    width:38px;
    height:38px;
    min-width:38px;
  }
}

/* ===== Safe точечные правки 17.05 ===== */
.sidebar .me{
  display:none;
}

.main-nav{
  grid-template-columns:repeat(3,58px);
  justify-content:center;
  align-items:center;
  gap:20px 22px;
}

.main-nav .nav-item:nth-child(1){grid-column:1;grid-row:1;}
.main-nav .nav-item:nth-child(2){grid-column:3;grid-row:1;}
.main-nav .nav-item:nth-child(3){grid-column:1;grid-row:2;}
.main-nav .nav-item:nth-child(4){grid-column:2;grid-row:2;}
.main-nav .nav-item:nth-child(5){grid-column:3;grid-row:2;}

.dialogs-header.dialogs-controls{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}

.dialog-control{
  width:100%;
  grid-template-columns:minmax(0,1fr) 40px;
}

.dialog-control-main,
.dialog-control-plus,
#btn-newchat,
#btn-newgroup{
  height:40px;
  min-height:40px;
  box-sizing:border-box;
}

.dialog-control-main{
  display:flex;
  align-items:center;
  justify-content:flex-start;
}

.dialog-control-plus{
  display:flex;
  align-items:center;
  justify-content:center;
  padding-bottom:3px;
}

.dialog-control-main.active{
  background:#242424;
  border-color:#3f3f3f;
  color:#f0f0f0;
}

.dialog-empty{
  margin:6px 0 8px;
  padding:12px 10px;
  border:1px solid #202020;
  border-radius:8px;
  background:#171717;
  color:#8f8f8f;
  font-size:13px;
}

.chat-dialog,
.group-dialog{
  width:100%;
}

.composer{
  align-items:center;
  padding-top:8px;
  padding-bottom:20px;
}

#btn-send{
  align-self:center;
  width:48px;
  height:48px;
  min-width:48px;
  padding:0;
  border-radius:50%;
}

#msg{
  min-height:42px;
}

.msg.them{
  background:#202020 !important;
  border-color:#303030 !important;
}

.msg.me{
  display:inline-flex;
  align-self:flex-end;
  background:#2d3038 !important;
  border-color:#424856 !important;
}

@media (max-width:900px){
  .composer{
    padding-bottom:calc(16px + env(safe-area-inset-bottom));
  }
  #btn-send{
    width:44px;
    height:44px;
    min-width:44px;
  }
}

/* ===== Точечные правки: расположение кнопок слева и иконки чата ===== */
.sidebar .main-nav{
  display:grid !important;
  grid-template-columns:repeat(6,44px) !important;
  grid-template-rows:64px 64px !important;
  width:264px !important;
  margin:0 auto !important;
  justify-content:center !important;
  justify-items:center !important;
  align-items:center !important;
  gap:0 !important;
  padding:16px 0 14px !important;
}

.sidebar .main-nav .nav-item{
  width:58px !important;
  height:58px !important;
  min-width:58px !important;
  margin:0 !important;
}

.sidebar .main-nav .nav-item:nth-child(1){grid-column:2 / span 2 !important;grid-row:1 !important;}
.sidebar .main-nav .nav-item:nth-child(2){grid-column:4 / span 2 !important;grid-row:1 !important;}
.sidebar .main-nav .nav-item:nth-child(3){grid-column:1 / span 2 !important;grid-row:2 !important;}
.sidebar .main-nav .nav-item:nth-child(4){grid-column:3 / span 2 !important;grid-row:2 !important;}
.sidebar .main-nav .nav-item:nth-child(5){grid-column:5 / span 2 !important;grid-row:2 !important;}

.chat-header{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) max-content !important;
  align-items:start !important;
  column-gap:18px !important;
  padding-right:28px !important;
}

.chat-header .peer{
  min-width:0 !important;
}

.chat-actions{
  grid-column:2 !important;
  display:flex !important;
  flex-wrap:nowrap !important;
  justify-content:flex-end !important;
  align-items:center !important;
  gap:8px !important;
  max-width:520px !important;
  min-width:max-content !important;
  padding-top:10px !important;
  margin-left:auto !important;
  overflow:visible !important;
}

.chat-actions .ghost.btn-icon{
  width:42px !important;
  height:42px !important;
  min-width:42px !important;
  flex:0 0 42px !important;
}

.chat-actions .ghost.btn-icon::before{
  width:22px !important;
  height:22px !important;
}

@media (max-width:900px){
  .chat-header{
    grid-template-columns:auto minmax(0,1fr) auto !important;
    padding-right:10px !important;
  }

  .chat-actions{
    max-width:45vw !important;
    overflow-x:auto !important;
    scrollbar-width:none !important;
  }

  .chat-actions::-webkit-scrollbar{
    display:none !important;
  }

  .chat-actions .ghost.btn-icon{
    width:36px !important;
    height:36px !important;
    min-width:36px !important;
    flex-basis:36px !important;
  }
}

/* ===== Fix 18.05: avatars in dialog list + centered right header icons ===== */
.dialog-avatar{
  display:block !important;
  object-fit:cover !important;
  object-position:center !important;
}

.chat-header{
  align-items:center !important;
}

.chat-actions{
  align-self:center !important;
  align-items:center !important;
  justify-content:flex-end !important;
  padding-top:0 !important;
}

.chat-actions .ghost.btn-icon{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  line-height:1 !important;
  padding:0 !important;
}

.chat-actions .ghost.btn-icon::before{
  display:block !important;
  flex:0 0 auto !important;
  margin:auto !important;
}

@media (max-width:900px){
  .chat-header{
    align-items:center !important;
  }

  .chat-actions{
    align-self:center !important;
    align-items:center !important;
    padding-top:0 !important;
  }
}

/* ===== Fix 05.06: black modal surfaces + single centered icons ===== */
.ghost.btn-icon{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 !important;
  line-height:1 !important;
}

.ghost.btn-icon::before{
  margin:auto !important;
}

.members-overlay{
  background:rgba(0,0,0,.58) !important;
  backdrop-filter:blur(6px) !important;
}

.members-card{
  background:#151515 !important;
  border:1px solid #2a2a2a !important;
  color:#d0d0d0 !important;
  border-radius:16px !important;
  box-shadow:0 18px 44px rgba(0,0,0,.65) !important;
}

.members-head{
  background:#151515 !important;
  border-bottom:1px solid #2a2a2a !important;
  color:#e0e0e0 !important;
}

.member-item{
  border-radius:8px !important;
}

.member-item:hover{
  background:#222 !important;
}

.member-name{
  color:#e0e0e0 !important;
}

.member-sub{
  color:#a0a0a0 !important;
}

.members-card .member-action.ghost.btn-icon{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:48px !important;
  height:48px !important;
  min-width:48px !important;
  padding:0 !important;
  border:1px solid #2f2f2f !important;
  border-radius:10px !important;
  background:#202020 !important;
  color:#d8d8d8 !important;
  box-shadow:none !important;
  font-size:0 !important;
  line-height:1 !important;
}

.members-card .member-action.ghost.btn-icon:hover{
  background:#2a2a2a !important;
  border-color:#454545 !important;
  transform:none !important;
}

.members-card .member-action[data-action="transfer-admin"]{--ico:var(--i-crown)}
.members-card .member-action[data-action="kick"]{--ico:var(--i-close)}
#sessions_container .ghost.btn-icon[data-action="close"]{--ico:var(--i-close)}

.members-card .member-action.ghost.btn-icon::before,
#sessions_container .ghost.btn-icon[data-action="close"]::before{
  display:block !important;
  flex:0 0 auto !important;
  width:22px !important;
  height:22px !important;
  margin:auto !important;
  background:currentColor !important;
}

#sessions_container,
#sessions_container::before{
  background:rgba(0,0,0,.65) !important;
}

#sessions_container .sheet{
  background:#151515 !important;
  border:1px solid #2a2a2a !important;
  color:#d0d0d0 !important;
  border-radius:18px !important;
  box-shadow:0 18px 44px rgba(0,0,0,.7) !important;
}

#sessions_container header{
  border-bottom:1px solid #2a2a2a !important;
}

#sessions_container header strong{
  color:#e0e0e0 !important;
}

#sessions_container table{
  margin-top:8px !important;
}

#sessions_container thead th{
  color:#a0a0a0 !important;
  opacity:1 !important;
}

#sessions_container tbody tr{
  border-bottom:1px solid #282828 !important;
}

#sessions_container tbody tr:hover{
  background:#202020 !important;
}

#sessions_container tbody td{
  color:#d0d0d0 !important;
}

#sessions_container .actions{
  border-top:1px solid #2a2a2a !important;
}

#sessions_container button:not(.btn-icon){
  background:#242424 !important;
  border:1px solid #343434 !important;
  color:#e0e0e0 !important;
  box-shadow:none !important;
}

#sessions_container button:not(.btn-icon):hover{
  background:#2e2e2e !important;
  border-color:#4a4a4a !important;
  transform:none !important;
}

#sessions_container .actions button{
  background:#9a9a9a !important;
  border-color:#9a9a9a !important;
  color:#202020 !important;
}

#sessions_container .actions button:hover{
  background:#b1b1b1 !important;
  border-color:#b1b1b1 !important;
}

#sessions_container .ghost.btn-icon[data-action="close"]{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:42px !important;
  height:42px !important;
  min-width:42px !important;
  padding:0 !important;
  border:0 !important;
  border-radius:50% !important;
  background:#9a9a9a !important;
  color:#202020 !important;
  font-size:0 !important;
  line-height:1 !important;
}

#sessions_container .ghost.btn-icon[data-action="close"]:hover{
  background:#b1b1b1 !important;
  transform:none !important;
}

/* Keep mobile-only header controls out of the desktop grid. */
.mobile-only.ghost.btn-icon{
  display:none !important;
}

@media (max-width:900px){
  .mobile-only.ghost.btn-icon{
    display:inline-flex !important;
  }
}

/* Keep the chat title/action header stable while long message lists scroll. */
main.chat{
  display:grid !important;
  grid-template-rows:84px minmax(0,1fr) auto !important;
  min-height:0 !important;
}

.chat-header{
  box-sizing:border-box !important;
  height:84px !important;
  min-height:84px !important;
  max-height:84px !important;
  flex:0 0 84px !important;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) max-content !important;
  align-items:center !important;
  padding:16px 30px 10px !important;
  overflow:visible !important;
}

.chat-header .peer,
.chat-actions{
  align-self:center !important;
}

.messages{
  min-height:0 !important;
  overflow:auto !important;
}

@media (max-width:900px){
  main.chat{
    grid-template-rows:72px minmax(0,1fr) auto !important;
  }

  .chat-header{
    height:72px !important;
    min-height:72px !important;
    max-height:72px !important;
    flex-basis:72px !important;
    padding:10px 12px !important;
  }
}

/* Final SN mark alignment, shared with profile. */
.brand-mark{
  position:relative;
  display:inline-block;
  padding-right:10px;
}

.brand-mark::after{
  content:"\00B0";
  position:absolute;
  left:calc(100% - 4px);
  top:4px;
  display:block;
  margin-left:0;
  font-size:17px;
  line-height:1;
  transform:none;
  opacity:.75;
  letter-spacing:0;
}

/* Compact chat header and composer to give messages more room. */
main.chat{
  grid-template-rows:66px minmax(0,1fr) auto !important;
}

.chat-header{
  height:66px !important;
  min-height:66px !important;
  max-height:66px !important;
  flex:0 0 66px !important;
  padding:10px 24px 8px !important;
  column-gap:14px !important;
}

.chat-header .peer{
  gap:0 !important;
}

.peer-name{
  font-size:25px !important;
  line-height:1 !important;
}

.peer-phone{
  font-size:13px !important;
  line-height:1.1 !important;
  margin-top:2px !important;
}

.chat-actions{
  gap:7px !important;
  padding-top:0 !important;
}

.chat-actions .ghost.btn-icon{
  width:36px !important;
  height:36px !important;
  min-width:36px !important;
  flex:0 0 36px !important;
}

.chat-actions .ghost.btn-icon::before{
  width:19px !important;
  height:19px !important;
}

.composer{
  gap:7px !important;
  padding:6px 24px 8px !important;
  align-items:center !important;
}

#msg{
  min-height:34px !important;
  max-height:82px !important;
  padding:8px 12px !important;
  border-radius:13px !important;
  font-size:15px !important;
  line-height:1.2 !important;
}

#msg_counter{
  font-size:11px !important;
}

#btn-send{
  width:36px !important;
  height:36px !important;
  min-width:36px !important;
  flex:0 0 36px !important;
}

#btn-send::before{
  width:19px !important;
  height:19px !important;
}

@media (max-width:900px){
  main.chat{
    grid-template-rows:58px minmax(0,1fr) auto !important;
  }

  .chat-header{
    height:58px !important;
    min-height:58px !important;
    max-height:58px !important;
    flex-basis:58px !important;
    padding:8px 10px !important;
  }

  .peer-name{
    font-size:20px !important;
  }

  .peer-phone{
    font-size:12px !important;
  }

  .chat-actions .ghost.btn-icon,
  #btn-send{
    width:34px !important;
    height:34px !important;
    min-width:34px !important;
    flex-basis:34px !important;
  }

  .chat-actions .ghost.btn-icon::before,
  #btn-send::before{
    width:18px !important;
    height:18px !important;
  }

  .composer{
    padding:5px 10px calc(6px + env(safe-area-inset-bottom)) !important;
  }

  #msg{
    min-height:32px !important;
    padding:7px 10px !important;
    font-size:14px !important;
  }
}