/* Мобильная версия: подключается на всех страницах после app.css. */

/* безопасные зоны (вырез, жестовая панель) */
.topbar{padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right))}

/* средняя ширина: имя в плашке пользователя прячем, остаётся аватар */
@media (max-width:1180px){
  .top-user-text{display:none}
  .top-user{padding:3px}
}
@media (max-width:980px){
  .topnav a .lbl{display:none}
  .topnav a{padding:9px 12px}
}
/* планшеты и телефоны */
@media (max-width:900px){
  .grid.three{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  main{padding:14px 12px}
  h1{font-size:24px;line-height:1.2}
  h2{font-size:19px}
  .grid.two,.grid.three{grid-template-columns:1fr;gap:12px}
  .card{padding:14px}
  .card.narrow{max-width:none}
  .messages{padding:0 12px}

  /* верхняя панель: логотип и профиль в первой строке, разделы во второй (подписи остаются) */
  .topbar{grid-template-columns:minmax(0,1fr) auto;row-gap:8px;padding-top:8px;padding-bottom:8px}
  .topbar .topnav{grid-column:1/-1;grid-row:2;justify-content:space-between;width:100%}
  .topbar .topnav{border-radius:20px}
  .topbar .topnav a{flex:1 1 0;min-width:0;flex-direction:column;justify-content:center;gap:2px;padding:6px 2px;font-size:11px;min-height:48px;border-radius:16px}
  .topbar .topnav a .ic{width:20px;height:20px}
  .topbar .topnav a .lbl{display:inline}
  .topbar .topnav .badge{position:absolute;top:2px;right:calc(50% - 22px);min-width:16px;height:16px;line-height:16px;font-size:10px;padding:0 4px}
  .top-user-text{display:none}
  .top-user{padding:3px}
  .top-new .lbl{display:none}
  .top-new{padding:9px;width:38px;height:38px;justify-content:center}
  .topnav-guest{grid-column:2;grid-row:1}

  /* формы страниц (не комнаты): поля на всю ширину, шрифт 16px, чтобы iOS не приближал страницу при фокусе */
  body:not(:has(.tm)) input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=hidden]),
  body:not(:has(.tm)) select,
  body:not(:has(.tm)) textarea{
    width:100%;max-width:100%;min-height:44px;padding:10px 12px;font-size:16px;
    background:var(--field);color:var(--ink);border:1px solid var(--line);border-radius:10px
  }
  body:not(:has(.tm)) textarea{min-height:88px}
  form p{margin:12px 0}
  body:not(:has(.tm)) form label{display:block;margin-bottom:4px}
  body:not(:has(.tm)) button:not(.ico-btn):not(.top-icon-btn),body:not(:has(.tm)) .button:not(.ico-btn):not(.top-new){min-height:44px;padding:10px 16px}
  button.link{min-height:36px}

  /* списки контактов и заявок: кнопки под именем */
  .friends-list li{flex-wrap:wrap;gap:8px 10px}
  .friends-list li .name{flex:1 1 140px;min-width:0}
  .friends-list li button:not(.ico-btn),.friends-list li a.button{min-height:40px;padding:8px 12px;font-size:14px}
  .friends-list .ico-btn{width:40px;height:40px;min-width:40px;min-height:40px;padding:0}
  .request-item{flex-wrap:wrap;gap:8px}
  .lesson-list li{padding:10px 0}

  /* таблицы и длинное содержимое не раздвигают страницу */
  table{display:block;max-width:100%;overflow-x:auto}
  pre,code{white-space:pre-wrap;word-break:break-word}
  img{max-width:100%;height:auto}
  .profile-avatar-preview{flex-wrap:wrap}
}
@media (max-width:380px){
  .topbar .brand{font-size:16px}
  .topbar .topnav a .lbl{font-size:10.5px}
}

/* чат в диалоге и комнате: шрифт поля 16px */
@media (max-width:900px){
  .chat-form textarea,#chat-text{font-size:16px}
  .dialog-chat{height:calc(100dvh - 220px);min-height:320px}
  .dialog-head h1{font-size:20px}
  .inbox-row{padding:12px}
}

/* на сенсорных экранах нет наведения: всё, что появлялось по hover, показываем всегда */
@media (hover:none){
  .tm .fullscreen-btn{opacity:.9}
}