/* ============================================================================
   webupdate.css — «Доступна новая версия Altgram» (webupdate.js): плашка в
   боковой панели, окно «Что нового», подтверждение, тост «Altgram обновлён»,
   строки профиля. Только токены темы из style.css — светлая и тёмная
   получаются сами.
   ========================================================================== */

/* ---- плашка: компьютер — карточка внизу боковой панели ----
   Сетка: значок слева на обе строки, справа заголовок с подписью, под ними
   кнопки. В узкой боковой панели и в низком окне кнопки встают строкой на всю
   ширину карточки (см. ниже). ✕ — поверх, в правом верхнем углу. */
.wu-bar{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);
  grid-template-areas:"ico body" "ico acts";align-items:start;column-gap:12px;row-gap:10px;flex:0 0 auto;
  margin:6px 10px 10px;padding:12px 42px 12px 12px;border-radius:14px;
  background:var(--panel-2);border:1px solid var(--border);box-shadow:var(--shadow-soft);
  animation:wuIn .28s cubic-bezier(.2,.9,.3,1)}
@keyframes wuIn{from{opacity:0;transform:translateY(8px)}}
/* обязательное обновление: закрыть нельзя, рамка акцентом */
.wu-bar.is-mandatory{padding-right:12px;border-color:var(--accent);
  background:linear-gradient(var(--accent-soft),var(--accent-soft)),var(--panel-2)}
.wu-ico{grid-area:ico;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--accent-deep),var(--accent));color:var(--on-accent)}
.wu-ico svg{display:block}
.wu-body{grid-area:body;min-width:0}
.wu-title{font-weight:700;font-size:14.5px;line-height:1.25;color:var(--text);overflow-wrap:anywhere}
.wu-sub{font-size:12.5px;line-height:1.35;color:var(--text-2);margin-top:2px}
.wu-acts{grid-area:acts;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.wu-acts .btn{padding:7px 14px;font-size:13px;border-radius:10px;white-space:nowrap}
.wu-notes-btn{background:transparent}
.wu-notes-btn:hover{background:var(--hover)}
.wu-x{position:absolute;top:6px;right:6px;width:32px;height:32px;border-radius:9px;
  display:grid;place-items:center;color:var(--muted);transition:background .15s,color .15s}
.wu-x:hover{background:var(--hover);color:var(--text)}
.wu-x svg{display:block}

/* ---- телефон: вверху над списком чатов (поле ввода и нижнюю панель не трогает) ---- */
@media (max-width:820px){
  .wu-bar{margin:4px 8px 6px;padding:10px 40px 10px 10px;column-gap:10px;row-gap:8px;align-items:center}
  .wu-bar.is-mandatory{padding-right:10px}
  .wu-ico{width:32px;height:32px}
  .wu-ico svg{width:18px;height:18px}
  .wu-title{font-size:14px}
  .wu-sub{display:none}
  .wu-acts .btn{padding:8px 14px}
  .wu-x{top:50%;transform:translateY(-50%);right:4px;width:36px;height:36px}
  /* как плашка уведомлений: только в «Чатах» и не поверх результатов поиска */
  .sidebar[data-tab]:not([data-tab="chats"]) > .wu-bar{display:none!important}
  .sidebar:has(> .search-results:not([hidden])) > .wu-bar{display:none}
}
/* узкая боковая панель компьютера (min(380px,34vw) — уже 374 px при окне
   ≤ 1100 px, с запасом на ширину Manrope; телефон в ландшафте): кнопки
   строкой на всю ширину карточки, под значком, — иначе «Что нового» и
   «Обновить» встают друг под другом, и «Обновить» уходит за нижний край */
@media (min-width:821px) and (max-width:1100px) and (min-height:481px){
  .wu-bar{grid-template-areas:"ico body" "acts acts";align-items:center;padding-right:12px}
  .wu-bar:not(.is-mandatory) .wu-body{padding-right:30px}   /* место под ✕ — только в первой строке */
  .wu-acts .btn{flex:1 1 auto;padding-inline:10px}
}
/* низкое окно: без подписи, карточка ниже */
@media (max-height:480px){
  .wu-sub{display:none}
  .wu-bar{padding-top:8px;padding-bottom:8px;row-gap:6px}
}
/* …а на компьютере (и телефоне в ландшафте шире 820 px) — две строки без
   значка: заголовок, под ним кнопки и ✕. Боковая панель там прокручивается
   целиком (nav.css), и «Обновить» должен помещаться без прокрутки. */
@media (min-width:821px) and (max-height:480px){
  .wu-bar{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"body body" "acts x";
    align-items:center;padding:8px 6px 8px 12px}
  .wu-ico{display:none}
  .wu-title{font-size:13.5px}
  .wu-x{position:static;grid-area:x;transform:none}
  .wu-acts .btn{padding:6px 12px}
}

/* ---- «Что нового» ---- */
.wu-notes-meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin:0 0 12px;
  color:var(--text-2);font-size:13px}
.wu-notes-date{font-weight:600;color:var(--text)}
.wu-notes-ver{font-family:var(--font-mono);font-size:12px;color:var(--muted);overflow-wrap:anywhere}
.wu-notes-must{margin:0 0 12px;padding:10px 12px;border-radius:10px;font-size:13.5px;line-height:1.45;
  background:var(--accent-soft);color:var(--text)}
.wu-notes-body{font-size:14.5px;line-height:1.5;color:var(--text);overflow-wrap:anywhere}
.wu-notes-body p{margin:0 0 10px;white-space:pre-line}
.wu-notes-body p:last-child{margin-bottom:0}
.wu-notes-empty{color:var(--muted)}
.wu-notes-plain{margin:0;font-size:14.5px;line-height:1.5;color:var(--text-2)}   /* новая версия без заметок */
.wu-list{margin:0 0 10px;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.wu-list:last-child{margin-bottom:0}
.wu-list li{position:relative;padding-left:18px;white-space:pre-line}
.wu-list li::before{content:"";position:absolute;left:4px;top:.62em;width:6px;height:6px;border-radius:50%;
  background:var(--accent)}
.wu-foot{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px;width:100%}
.wu-confirm{margin:6px 0 4px;color:var(--text-2);line-height:1.5}
.btn-danger.wu-confirm-go{font-weight:700}

/* ---- тост «Altgram обновлён» ---- */
.toast.wu-toast{display:flex;align-items:center;gap:10px;pointer-events:auto;
  padding:8px 6px 8px 14px;width:max-content;max-width:min(calc(100vw - 24px),460px);border-left-color:var(--accent)}
.wu-toast-text{flex:1;min-width:0;overflow-wrap:anywhere;line-height:1.35;font-weight:600}
.wu-toast-act{flex:none;padding:6px 10px;border-radius:8px;font-weight:700;font-size:13.5px;
  color:var(--accent);background:var(--accent-soft)}
.wu-toast-act:hover{filter:brightness(1.1)}
.wu-toast-x{flex:none;width:30px;height:30px;border-radius:8px;display:grid;place-items:center;color:var(--muted)}
.wu-toast-x:hover{background:var(--hover);color:var(--text)}
.wu-toast-x svg{display:block;width:16px;height:16px}
.toast.wu-toast.is-out{opacity:0;transform:translateY(10px);transition:opacity .3s,transform .3s}
/* над полем ввода / нижней панелью, пока тост на экране (lift() в webupdate.js) */
.toasts.wu-lift{bottom:var(--wu-lift,20px);transition:bottom .18s ease}
@media (hover:none){
  .toast.wu-toast{pointer-events:none}
  .wu-toast-act,.wu-toast-x{pointer-events:auto}
}

/* ---- строки профиля ---- */
.wu-pf-state{flex:none;display:inline-flex;align-items:center;gap:6px;font-size:14px;color:var(--muted);
  white-space:nowrap}
.wu-pf-state.is-accent{color:var(--accent);font-weight:600}
.wu-pf-state.is-err{color:var(--danger)}
.wu-spin{width:16px;height:16px;border:2px solid var(--line);border-top-color:var(--accent);border-radius:50%;
  animation:spin .7s linear infinite}
.wu-pf-row[aria-busy="true"]{cursor:progress}

/* только для чтеца экрана */
.wu-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);
  white-space:nowrap;margin:-1px;padding:0;border:0}

@media (prefers-reduced-motion:reduce){
  .wu-bar,.toast.wu-toast{animation:none}
  .wu-spin{animation-duration:2s}
}