/* ==========================================================================
   Acleventar — стеклянное меню (шаблон «пилюля», без полоски) + окно чатов
   Палитра — с буквы «A» логотипа: #b1baff / #8898f8 / #5f6ff0
   Префикс html:root:root:root нужен, чтобы перебить старые правила styles.css
   ========================================================================== */
:root{
  --a-body:#b1baff;
  --a-mid:#8898f8;
  --a-deep:#5f6ff0;
  --a-ink:#171a44;
  --a-ink-soft:#454a86;
  --a-text:#eef0ff;
  --a-muted:#98a0d6;
  --a-line:rgba(177,186,255,.16);
  --a-ease:cubic-bezier(.16,1,.3,1);
  --a-spring:cubic-bezier(.34,1.45,.5,1);
}

/* ==========================================================================
   1. МЕНЮ-ПИЛЮЛЯ
   ========================================================================== */
html:root:root:root header nav{
  position:relative!important;isolation:isolate;
  display:flex!important;flex-flow:row nowrap!important;align-items:stretch;justify-content:center;
  grid-template-columns:none!important;
  gap:2px!important;padding:7px!important;margin:0 0 0 auto!important;
  flex:0 1 auto!important;width:auto!important;max-width:100%;
  overflow:visible!important;scroll-snap-type:none!important;
  border-radius:999px!important;
  background:linear-gradient(180deg,rgba(214,219,255,.46),rgba(150,162,250,.32))!important;
  border:1px solid rgba(238,240,255,.6)!important;
  box-shadow:0 16px 38px rgba(12,16,88,.46),inset 0 1px 0 rgba(255,255,255,.3),0 0 0 1px rgba(136,152,248,.16)!important;
  backdrop-filter:blur(22px) saturate(170%);-webkit-backdrop-filter:blur(22px) saturate(170%);
}
/* внутренняя светлая капсула — как в шаблоне */
html:root:root:root header nav::before{
  content:"";position:absolute;inset:5px;z-index:-1;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,#fbfaff 0%,#e9e9ff 100%);
  border:1px solid rgba(255,255,255,.95);
  box-shadow:inset 0 1px 0 #fff,inset 0 -12px 22px rgba(136,152,248,.15),0 6px 18px rgba(50,60,180,.2);
}
html:root:root:root header nav::after{display:none!important}
html:root:root:root header nav::-webkit-scrollbar{display:none}

/* кнопки */
html:root:root:root header nav button.ni{
  position:relative;isolation:isolate;overflow:visible!important;
  flex:1 1 auto;min-width:78px!important;width:auto!important;
  height:auto!important;min-height:54px!important;
  margin:0!important;padding:8px 10px 7px!important;
  display:flex!important;flex-direction:column!important;align-items:center;justify-content:center;gap:4px!important;
  background:none!important;background-image:none!important;border:0!important;border-radius:20px!important;box-shadow:none!important;
  color:var(--a-ink)!important;
  font:500 11px/1.1 Onest,'Segoe UI',Arial,sans-serif!important;letter-spacing:0!important;text-transform:none!important;
  white-space:nowrap!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  -webkit-tap-highlight-color:transparent;cursor:pointer;
  transition:transform .35s var(--a-spring)!important;
}
html:root:root:root header nav button.ni:hover{background:none!important;transform:none!important;box-shadow:none!important;border:0!important}
html:root:root:root header nav button.ni::after{display:none!important}
html:root:root:root header nav button.ni .dd{display:none!important}
html:root:root:root header nav button.ni .mm{display:block!important}
html:root:root:root header nav button.ni .nl{
  display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font:inherit!important;font-size:inherit!important;line-height:1.15!important;color:inherit;transition:color .25s ease;
}
html:root:root:root header nav button.ni .i{
  position:relative;z-index:1;width:24px!important;height:24px!important;flex:0 0 24px!important;
  padding:0!important;border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;
  color:var(--a-deep)!important;filter:none!important;
  transition:transform .4s var(--a-spring),color .25s ease;
}
/* мягкая подложка под наведённой / активной кнопкой (полоски нет) */
html:root:root:root header nav button.ni::before,
html:root:root:root header nav button.ni:hover::before{
  content:""!important;position:absolute;inset:2px 3px;left:3px;top:2px;right:3px;bottom:2px;z-index:-1;
  width:auto;height:auto;min-width:0;max-width:none;padding:0;margin:0;
  border:0;border-radius:18px;box-shadow:none;font:0/0 sans-serif;color:transparent;white-space:normal;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(136,152,248,.26),rgba(95,111,240,.13));
  box-shadow:inset 0 0 0 1px rgba(95,111,240,.22);
  opacity:0;transform:scale(.86);
  transition:opacity .25s ease,transform .4s var(--a-spring);
  backdrop-filter:none;-webkit-backdrop-filter:none;
}
@media(hover:hover){
  html:root:root:root header nav button.ni:hover::before{opacity:.6;transform:scale(1)}
  html:root:root:root header nav button.ni:hover .i{transform:translateY(-1px) scale(1.07)}
}
html:root:root:root header nav button.ni.is-active::before{opacity:1;transform:scale(1)}
html:root:root:root header nav button.ni.is-active .i{color:#4453e0!important}
html:root:root:root header nav button.ni.is-active .nl{color:#2a37b6;font-weight:650}
html:root:root:root header nav button.ni:active::before{opacity:1;transform:scale(.94)}
html:root:root:root header nav button.ni:active .i{transform:scale(.88);transition-duration:.12s}
html:root:root:root header nav button.ni:focus-visible{outline:2px solid var(--a-deep);outline-offset:-2px}
html:root:root:root header nav button.ni .rip{display:none!important}

/* бейдж непрочитанного — у правого верхнего угла иконки */
html:root:root:root header nav button.ni .acl-nav-badge{
  top:2px!important;left:calc(50% + 5px)!important;right:auto!important;transform:none;animation:none;
  min-width:17px;height:17px;padding:0 4px;font-size:10px;line-height:13px;
  border:2px solid #f1f1ff!important;box-shadow:0 2px 6px rgba(40,50,160,.35)!important;
}

/* ---------- Компьютер ---------------------------------------------------- */
@media(min-width:900px){
  html:root:root:root header .bar{flex-wrap:nowrap}
  html:root:root:root header nav{flex:0 1 auto!important}
  html:root:root:root header nav button.ni{min-width:80px!important;padding:8px 12px 7px!important}
}

/* ---------- Телефон: плавающая стеклянная панель снизу -------------------- */
@media(max-width:899px){
  /* backdrop-filter у шапки ломает position:fixed у вложенных элементов */
  html:root:root header{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:rgba(7,5,15,.92)!important}
  html:root:root:root header nav{
    position:fixed!important;order:unset;z-index:30;
    left:max(8px,env(safe-area-inset-left,0px));right:max(8px,env(safe-area-inset-right,0px));
    bottom:calc(10px + env(safe-area-inset-bottom,0px));
    width:auto!important;max-width:520px;margin:0 auto!important;
    padding:6px!important;gap:0!important;
    animation:aclNavRise .7s var(--a-ease) both;
  }
  html:root:root:root header nav::before{inset:4px}
  html:root:root:root header nav button.ni{
    min-width:0!important;min-height:54px!important;padding:8px 1px 7px!important;border-radius:18px!important;
    font-size:clamp(8.2px,2.3vw,10px)!important;
  }
  html:root:root:root header nav button.ni::before,
  html:root:root:root header nav button.ni:hover::before{inset:2px 1px;border-radius:17px}
  html:root:root:root header nav button.ni .i{width:23px!important;height:23px!important;flex-basis:23px!important}
  html:root:root:root header nav button.ni .nl{overflow:visible;text-overflow:clip}
  body{padding-bottom:calc(98px + env(safe-area-inset-bottom,0px))!important}
}
@media(max-width:340px){
  html:root:root:root header nav button.ni{font-size:7.8px!important;padding-left:0!important;padding-right:0!important}
}
@keyframes aclNavRise{from{opacity:0;transform:translateY(26px) scale(.96)}to{opacity:1;transform:none}}

/* кнопка «Войти» в тон меню */
html:root:root header .cab:not(.me){
  background:linear-gradient(135deg,#d3d8ff,var(--a-mid))!important;color:#141846!important;
  border-color:rgba(233,236,255,.55)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 8px 22px rgba(95,111,240,.35)!important;
}

/* ==========================================================================
   2. ОКНО «ДРУЗЬЯ И ЧАТЫ»
   ========================================================================== */
@keyframes aclWinIn{from{opacity:0;transform:translateY(14px) scale(.95)}to{opacity:1;transform:none}}
@keyframes aclWinOut{from{opacity:1;transform:none}to{opacity:0;transform:translateY(8px) scale(.96)}}
@keyframes aclBackdropIn{from{opacity:0}to{opacity:1}}
@keyframes aclBackdropOut{from{opacity:1}to{opacity:0}}
@keyframes aclFadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes aclItemIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes aclMsgIn{from{opacity:0;transform:translateY(6px) scale(.97)}to{opacity:1;transform:none}}
@keyframes aclPaneIn{from{opacity:0}to{opacity:1}}

/* сама панель: строго по центру, без transform-центровки (она и уводила окно за экран) */
html:root:root:root .acl-detached-view{
  position:fixed!important;z-index:10020!important;
  inset:0!important;margin:auto!important;transform:none;
  box-sizing:border-box!important;display:flex!important;flex-direction:column!important;
  width:min(1040px,calc(100vw - 40px))!important;
  height:min(740px,calc(100dvh - 40px))!important;
  min-height:0!important;max-height:none!important;
  padding:20px!important;overflow:hidden!important;overscroll-behavior:contain!important;
  border-radius:28px!important;
  background:radial-gradient(110% 70% at 0% 0%,rgba(95,111,240,.17),transparent 58%),linear-gradient(165deg,#13163d 0%,#080a20 72%)!important;
  border:1px solid rgba(177,186,255,.26)!important;
  box-shadow:0 30px 100px rgba(0,0,0,.66),0 0 80px rgba(95,111,240,.18),inset 0 1px 0 rgba(255,255,255,.06)!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  animation:aclWinIn .42s var(--a-ease) both!important;
  color:var(--a-text);
}
html:root:root:root .acl-detached-view.acl-closing{animation:aclWinOut .26s cubic-bezier(.4,0,.9,.6) both!important;pointer-events:none}
html:root:root:root body.acl-manager-open::after{animation:aclBackdropIn .35s ease both!important;background:rgba(3,4,16,.7)!important}
html:root:root:root body.acl-manager-open.acl-manager-closing::after{animation:aclBackdropOut .28s ease both!important}

.acl-detached-view>#acleventarFriendHub{flex:1 1 auto;min-width:0;min-height:0;height:100%;overflow:hidden;display:block}
.acl-detached-view .acl-friend-hub{display:flex;flex-direction:column;gap:14px;height:100%;min-width:0;min-height:0;color:var(--a-text)}

/* шапка */
.acl-detached-view .acl-friend-manager-head{
  flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin:0;padding:0 2px;border:0;animation:aclFadeUp .45s .06s var(--a-ease) both;
}
.acl-detached-view .acl-friend-manager-head h2{margin:0;line-height:1.2;font-size:22px;font-weight:700;letter-spacing:-.02em;color:#f5f6ff}
.acl-detached-view .acl-friend-manager-head p{margin:2px 0 0;line-height:1.3;font-size:13px;color:var(--a-muted)}
html:root:root:root .acl-detached-view .acl-manager-close,
html:root:root:root .acl-detached-view .acl-chat-close{
  flex:0 0 40px;width:40px;height:40px;padding:0;display:grid;place-items:center;
  border:1px solid rgba(177,186,255,.24);border-radius:50%;
  background:rgba(177,186,255,.1);color:#e3e6ff;font-size:23px;line-height:1;cursor:pointer;
  transition:background .2s ease,transform .25s var(--a-spring),border-color .2s ease;
}
html:root:root:root .acl-detached-view .acl-manager-close:hover,
html:root:root:root .acl-detached-view .acl-chat-close:hover{background:rgba(177,186,255,.2);border-color:rgba(177,186,255,.45);transform:rotate(90deg)}

/* вкладки — «сегмент» */
html:root:root:root .acl-detached-view .acl-friend-tabs{
  flex:0 0 auto;position:relative;top:auto;z-index:1;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;margin:0;padding:4px;
  border-radius:18px;background:rgba(177,186,255,.07);border:1px solid var(--a-line);
  animation:aclFadeUp .45s .12s var(--a-ease) both;
}
html:root:root:root .acl-detached-view .acl-friend-tabs button{
  min-width:0;min-height:40px;padding:8px 6px;border:0;border-radius:14px;
  background:transparent;color:#a9b1e6;font-size:13.5px;font-weight:600;white-space:nowrap;box-shadow:none;
  transition:background .25s ease,color .25s ease,box-shadow .25s ease;
}
html:root:root:root .acl-detached-view .acl-friend-tabs button:hover{color:#fff;background:rgba(177,186,255,.1)}
html:root:root:root .acl-detached-view .acl-friend-tabs button.active{
  color:#fff;background:linear-gradient(135deg,#8898f8,#5f6ff0);border:0;
  box-shadow:0 4px 12px -2px rgba(95,111,240,.5),inset 0 1px 0 rgba(255,255,255,.28);
}

/* общие панели вкладок: прокрутка внутри окна */
.acl-detached-view .acl-friend-pane:not([hidden]){flex:1 1 auto;min-width:0;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(136,152,248,.5) transparent;animation:aclPaneIn .35s ease both}
.acl-detached-view #aclFriendHubStatus{flex:0 0 auto;margin:0;font-size:12.5px;color:#9be8bd}
.acl-detached-view #aclFriendHubStatus:empty{display:none}
.acl-detached-view #aclFriendHubStatus.error{color:#ff9fb0}

/* поиск, заявки, друзья: контент идёт сверху вниз без растягивания строк */
html:root:root:root .acl-detached-view .acl-friend-pane:not([hidden]):not([data-friend-pane="chats"]){display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:12px;padding:2px 2px 4px}
.acl-detached-view .acl-friend-pane:not([data-friend-pane="chats"])>*{flex:0 0 auto;min-width:0}
.acl-detached-view .acl-friend-pane:not([data-friend-pane="chats"]) .acl-friend-empty{margin:0 2px}

/* поиск, заявки, друзья */
.acl-detached-view .acl-friend-search-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:stretch}
html:root:root:root .acl-detached-view .acl-friend-search-row>*{margin:0;transform:none}
html:root:root:root .acl-detached-view .acl-friend-search-row input{
  min-height:46px;padding:0 18px;border-radius:23px;border:1px solid rgba(177,186,255,.22);
  background:rgba(177,186,255,.07);color:#fff;font-size:15px;transition:border-color .2s,box-shadow .2s;
}
html:root:root:root .acl-detached-view .acl-friend-search-row input:focus{outline:none;border-color:rgba(177,186,255,.65);box-shadow:0 0 0 4px rgba(136,152,248,.18)}
html:root:root:root .acl-detached-view .acl-friend-search-row button{
  min-height:46px;padding:0 22px;border-radius:23px;border:1px solid rgba(220,225,255,.35);
  background:linear-gradient(135deg,#8898f8,#5f6ff0);color:#fff;font-weight:650;font-size:14px;
}
.acl-detached-view .acl-friend-empty{margin:12px 2px;color:var(--a-muted);font-size:13px;line-height:1.5}
.acl-detached-view .acl-friend-list,.acl-detached-view #aclFriendRequests,.acl-detached-view #aclFriendsList{display:grid;gap:10px;align-content:start}
.acl-detached-view .acl-friend-list h3,.acl-detached-view #aclFriendRequests h3{margin:10px 2px 0;font-size:13px;font-weight:650;color:#b9c1f2}
html:root:root:root .acl-detached-view .acl-friend-row{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;
  padding:12px 14px;border-radius:20px;border:1px solid var(--a-line);background:rgba(177,186,255,.06);
}
.acl-detached-view .acl-friend-meta{display:grid;gap:3px;min-width:0}
.acl-detached-view .acl-friend-meta b{font-size:15px;color:#f3f4ff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acl-detached-view .acl-friend-meta small{font-size:12px;color:var(--a-muted)}
html:root:root:root .acl-detached-view .acl-friend-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
html:root:root:root .acl-detached-view .acl-friend-actions button{
  min-height:36px;padding:0 14px;border-radius:999px;border:1px solid rgba(177,186,255,.3);
  background:rgba(177,186,255,.12);color:#e9ecff;font-size:13px;font-weight:600;
  transition:background .2s ease,border-color .2s ease;
}
html:root:root:root .acl-detached-view .acl-friend-actions button:hover:not(:disabled){background:rgba(136,152,248,.34);border-color:rgba(205,211,255,.6)}
html:root:root:root .acl-detached-view .acl-friend-actions button:disabled{opacity:.5;cursor:default}

/* аватары */
html:root:root:root .acl-detached-view .acl-friend-avatar,
html:root:root:root .acl-detached-view .acl-public-avatar{
  width:44px;height:44px;flex:0 0 44px;display:grid;place-items:center;overflow:hidden;border-radius:50%;
  border:2px solid rgba(205,211,255,.4);background:linear-gradient(145deg,#b1baff,#5f6ff0);
  color:#0f1236;font-weight:800;font-size:17px;box-shadow:none;
}

/* профиль пользователя — слой поверх окна */
html:root:root:root .acl-detached-view .acl-friend-profile:not([hidden]){
  position:absolute;inset:0;z-index:8;overflow:auto;padding:26px;border:0;border-radius:inherit;
  background:linear-gradient(165deg,#13163d,#080a20);animation:aclPaneIn .3s ease both;
}
html:root:root:root .acl-detached-view .acl-friend-profile:not([hidden]){display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;align-content:start;grid-auto-rows:min-content}
.acl-detached-view .acl-friend-profile>.acl-friend-profile-head,.acl-detached-view .acl-friend-profile>.acl-friend-actions{grid-column:1/-1}
.acl-detached-view .acl-friend-profile>p{margin:0;padding:12px 14px;border-radius:16px;border:1px solid var(--a-line);background:rgba(177,186,255,.06);color:#aab2e6;font-size:13px;line-height:1.35;display:grid;gap:3px}
.acl-detached-view .acl-friend-profile>p b{color:#f3f4ff;font-size:16px;font-weight:650}
.acl-detached-view .acl-friend-profile-head{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.acl-detached-view .acl-friend-profile-head .acl-public-avatar{width:64px;height:64px;flex-basis:64px;font-size:26px}
.acl-detached-view .acl-friend-profile-head h3{margin:0;font-size:20px;color:#fff}
.acl-detached-view .acl-friend-profile-head>button{
  width:40px;height:40px;padding:0;border-radius:50%;border:1px solid rgba(177,186,255,.28);
  background:rgba(177,186,255,.1);color:#fff;font-size:22px;line-height:1;margin-left:auto;
}

/* --------------------------------------------------------------------------
   ЧАТЫ: слева список, справа переписка
   -------------------------------------------------------------------------- */
html:root:root:root .acl-detached-view .acl-friend-pane[data-friend-pane="chats"]:not([hidden]){
  display:grid!important;
  grid-template-columns:minmax(250px,330px) minmax(0,1fr);
  grid-template-rows:auto auto minmax(0,1fr);
  column-gap:14px;row-gap:10px;overflow:hidden;
}
html:root:root:root .acl-detached-view #aclAddChat{
  grid-column:1;grid-row:1;width:100%;min-height:46px;padding:0 16px;border-radius:16px;
  border:1px solid rgba(220,225,255,.38);background:linear-gradient(135deg,#8898f8,#5f6ff0);
  color:#fff;font-size:14.5px;font-weight:650;box-shadow:0 4px 12px -3px rgba(95,111,240,.5),inset 0 1px 0 rgba(255,255,255,.25);
}
html:root:root:root .acl-detached-view #aclChatPicker:not([hidden]){
  grid-column:1;grid-row:2;display:grid;gap:6px;align-content:start;
  max-height:min(260px,36dvh);overflow:auto;padding:10px;border-radius:18px;
  border:1px solid rgba(177,186,255,.3);background:rgba(20,23,62,.96);z-index:2;
}
html:root:root:root .acl-detached-view #aclChatPicker h3{margin:2px 4px 4px;font-size:13px;font-weight:650;color:#b9c1f2}
html:root:root:root .acl-detached-view #aclChatPicker p{margin:4px;font-size:13px;color:var(--a-muted)}
html:root:root:root .acl-detached-view .acl-chat-picker-item{
  display:flex;align-items:center;gap:12px;width:100%;margin:0;padding:8px 10px;border-radius:14px;
  border:1px solid transparent;background:transparent;color:#f1f3ff;text-align:left;
}
html:root:root:root .acl-detached-view .acl-chat-picker-item:hover:not(:disabled){background:rgba(177,186,255,.12)}
.acl-detached-view .acl-chat-picker-meta{display:grid;gap:2px;min-width:0}
.acl-detached-view .acl-chat-picker-meta b{font-size:14px}.acl-detached-view .acl-chat-picker-meta small{font-size:12px;color:var(--a-muted)}

html:root:root:root .acl-detached-view #aclChatList{
  grid-column:1;grid-row:3;display:flex;flex-direction:column;gap:4px;
  min-width:0;min-height:0;overflow:auto;overscroll-behavior:contain;padding:6px;
  border-radius:20px;border:1px solid var(--a-line);background:rgba(177,186,255,.045);
  scrollbar-width:thin;scrollbar-color:rgba(136,152,248,.5) transparent;color:var(--a-muted);font-size:13.5px;line-height:1.5;
}
html:root:root:root .acl-detached-view .acl-chat-item{
  display:grid!important;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px!important;
  flex:0 0 auto;width:100%!important;min-height:64px;margin:0!important;padding:9px 12px!important;
  border:1px solid transparent!important;border-radius:16px!important;
  background:transparent!important;box-shadow:none;text-align:left!important;color:#f1f3ff;
  transition:background .2s ease,border-color .2s ease;
}
html:root:root:root .acl-detached-view .acl-chat-item:hover{transform:none;background:rgba(177,186,255,.1)!important;border-color:transparent!important}
html:root:root:root .acl-detached-view .acl-chat-item.active{
  background:linear-gradient(120deg,rgba(136,152,248,.32),rgba(95,111,240,.14))!important;
  border-color:rgba(177,186,255,.38)!important;
}
.acl-detached-view .acl-chat-item-meta{display:grid;gap:3px;min-width:0}
.acl-detached-view .acl-chat-item-meta b{line-height:1.25;font-size:15px;font-weight:650;color:#f4f5ff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acl-detached-view .acl-chat-item-meta small{line-height:1.25;font-size:12.5px;color:var(--a-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html:root:root:root .acl-detached-view .acl-chat-unread{
  min-width:22px;height:22px;padding:0 7px;border-radius:999px;
  background:linear-gradient(135deg,#c3cbff,#8898f8);color:#0f1236;font-size:11px;font-weight:800;box-shadow:0 3px 10px rgba(136,152,248,.4);
}
.acl-detached-view .acl-chat-item.acl-enter{animation:aclItemIn .4s var(--a-ease) both;animation-delay:calc(var(--i,0)*40ms + 100ms)}

/* переписка */
html:root:root:root .acl-detached-view #aclChatThread:not([hidden]){
  grid-column:2;grid-row:1/-1;
  display:grid!important;grid-template-rows:auto minmax(0,1fr) auto;gap:0;
  min-width:0;min-height:0;overflow:hidden;padding:0;
  border-radius:22px;border:1px solid var(--a-line);
  background:radial-gradient(90% 55% at 50% 0%,rgba(95,111,240,.12),transparent 70%),rgba(4,6,20,.6);
  animation:aclPaneIn .4s var(--a-ease) both;
}
/* заглушка справа, пока чат не выбран */
@media(min-width:761px){
  html:root:root:root .acl-detached-view .acl-friend-pane[data-friend-pane="chats"]:not([hidden]):not(:has(#aclChatThread:not([hidden])))::after{
    content:attr(data-empty);grid-column:2;grid-row:1/-1;display:grid;place-items:center;text-align:center;
    padding:24px;border-radius:22px;border:1px dashed rgba(177,186,255,.26);
    color:var(--a-muted);font-size:15px;
    background:radial-gradient(70% 50% at 50% 0%,rgba(95,111,240,.1),transparent 70%);
  }
}
/* шапка переписки */
html:root:root:root .acl-detached-view .acl-chat-toolbar{
  display:flex;align-items:center;gap:12px;margin:0!important;padding:12px 16px!important;
  border:0!important;border-bottom:1px solid var(--a-line)!important;border-radius:0!important;
  background:rgba(177,186,255,.06)!important;box-shadow:none!important;min-width:0;
}
html:root:root:root .acl-detached-view .acl-chat-back{
  display:none;flex:0 0 40px;width:40px;height:40px;padding:0;border-radius:50%;font-size:0;
  border:1px solid rgba(177,186,255,.24);background:rgba(177,186,255,.1);color:#e3e6ff;place-items:center;cursor:pointer;
}
html:root:root:root .acl-detached-view .acl-chat-back::before{
  content:"";width:10px;height:10px;border-left:2.5px solid currentColor;border-bottom:2.5px solid currentColor;
  transform:translateX(2px) rotate(45deg);border-radius:1px;
}
html:root:root:root .acl-detached-view .acl-chat-back::after{display:none}
html:root:root:root .acl-detached-view .acl-chat-close{display:none}
html:root:root:root .acl-detached-view .acl-chat-peer{
  display:flex;align-items:center;gap:12px;flex:1;min-width:0;padding:0;border:0;background:transparent;color:#f4f5ff;text-align:left;cursor:pointer;
}
html:root:root:root .acl-detached-view .acl-chat-peer>span:last-child{display:grid;gap:3px;min-width:0}
.acl-detached-view .acl-chat-peer b{line-height:1.25;font-size:16px;font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acl-detached-view .acl-chat-peer small{line-height:1.25;font-size:12.5px;color:var(--a-muted);display:flex;align-items:center;gap:6px}
.acl-detached-view #aclChatPeerStatus[data-state="online"]{color:#8ff0b8}
.acl-detached-view #aclChatPeerStatus[data-state="online"]::before,
.acl-detached-view #aclChatPeerStatus[data-state="typing"]::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 8px currentColor}
.acl-detached-view #aclChatPeerStatus[data-state="typing"]{color:#c3cbff}

/* сообщения */
html:root:root:root .acl-detached-view .acl-chat-messages{
  display:grid;align-content:start;gap:8px;height:auto!important;max-height:none!important;min-height:0!important;
  overflow-y:auto;overscroll-behavior:contain;padding:18px 18px 12px!important;
  border:0!important;border-radius:0!important;background:transparent!important;
  scrollbar-width:thin;scrollbar-color:rgba(136,152,248,.5) transparent;
}
html:root:root:root .acl-detached-view .acl-chat-message{
  position:relative;width:fit-content;min-width:72px;max-width:min(76%,520px);
  padding:9px 13px 7px!important;border-radius:20px 20px 20px 6px!important;
  background:#1c2050!important;border:1px solid rgba(177,186,255,.16)!important;box-shadow:0 4px 14px rgba(0,0,0,.18);
  color:#eef0ff;animation:aclMsgIn .32s var(--a-ease) both;
}
html:root:root:root .acl-detached-view .acl-chat-message.mine{
  justify-self:end;border-radius:20px 20px 6px 20px!important;
  background:linear-gradient(145deg,#8898f8,#5f6ff0)!important;border-color:rgba(255,255,255,.22)!important;
  box-shadow:0 8px 20px rgba(95,111,240,.3);color:#fff;
}
.acl-detached-view .acl-chat-message p{margin:0;font-size:15px;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere}
.acl-detached-view .acl-chat-message small{display:block;margin-top:3px;text-align:right;font-size:11px;color:#9aa3dc}
.acl-detached-view .acl-chat-message.mine small{color:rgba(255,255,255,.72)}

/* ввод сообщения */
html:root:root:root .acl-detached-view .acl-chat-send{
  display:grid;grid-template-columns:minmax(0,1fr) 46px;align-items:end;gap:10px;
  padding:12px 14px!important;border-top:1px solid var(--a-line);background:rgba(177,186,255,.045)!important;min-width:0;
}
html:root:root:root .acl-detached-view .acl-chat-send textarea{
  width:100%;min-width:0;box-sizing:border-box;resize:none;
  min-height:46px;max-height:130px;height:46px;padding:12px 18px;
  border-radius:23px!important;border:1px solid rgba(177,186,255,.24)!important;
  background:rgba(177,186,255,.08)!important;color:#fff!important;font:inherit;font-size:15px;line-height:1.35;
  field-sizing:content;transition:border-color .2s,box-shadow .2s,background .2s;
}
html:root:root:root .acl-detached-view .acl-chat-send textarea::placeholder{color:#8a92cf}
html:root:root:root .acl-detached-view .acl-chat-send textarea:focus{outline:none;border-color:rgba(177,186,255,.7)!important;box-shadow:0 0 0 4px rgba(136,152,248,.18);background:rgba(177,186,255,.11)!important}
html:root:root:root .acl-detached-view .acl-chat-send button{
  position:relative;display:grid;place-items:center;width:46px;min-width:46px!important;height:46px;min-height:46px!important;padding:0;
  border-radius:50%!important;border:1px solid rgba(220,225,255,.4)!important;
  background:linear-gradient(135deg,#9aa8ff,#5f6ff0)!important;color:#fff;font-size:0!important;
  box-shadow:0 8px 20px rgba(95,111,240,.4),inset 0 1px 0 rgba(255,255,255,.3);cursor:pointer;
  transition:transform .25s var(--a-spring),filter .2s;
}
html:root:root:root .acl-detached-view .acl-chat-send button:hover{transform:scale(1.07);filter:brightness(1.08)}
html:root:root:root .acl-detached-view .acl-chat-send button:active{transform:scale(.92)}
html:root:root:root .acl-detached-view .acl-chat-send button::before{
  content:"";width:20px;height:20px;background:#fff;margin-left:2px;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.4 20.4 20.85 12.9a1 1 0 0 0 0-1.8L3.4 3.6a.9.9 0 0 0-1.25 1.1L4.2 10.5l8.3 1.5-8.3 1.5-2.05 5.8a.9.9 0 0 0 1.25 1.1Z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.4 20.4 20.85 12.9a1 1 0 0 0 0-1.8L3.4 3.6a.9.9 0 0 0-1.25 1.1L4.2 10.5l8.3 1.5-8.3 1.5-2.05 5.8a.9.9 0 0 0 1.25 1.1Z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ---------- Телефон: чат на весь экран, как в мессенджере ------------------ */
@media(max-width:760px){
  html:root:root:root .acl-detached-view{
    width:100vw!important;height:100dvh!important;border-radius:0!important;border-width:0!important;
    padding:calc(12px + env(safe-area-inset-top,0px)) 12px calc(12px + env(safe-area-inset-bottom,0px))!important;
  }
  .acl-detached-view .acl-friend-hub{gap:12px}
  .acl-detached-view .acl-friend-manager-head h2{font-size:20px}
  html:root:root:root .acl-detached-view .acl-friend-pane[data-friend-pane="chats"]:not([hidden]){
    grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr);row-gap:10px;
  }
  html:root:root:root .acl-detached-view #aclChatThread:not([hidden]){grid-column:1;grid-row:1/-1;border-radius:20px}
  /* когда открыта переписка — прячем всё лишнее */
  .acl-detached-view .acl-friend-hub:has(#aclChatThread:not([hidden])) .acl-friend-manager-head,
  .acl-detached-view .acl-friend-hub:has(#aclChatThread:not([hidden])) .acl-friend-tabs,
  .acl-detached-view .acl-friend-pane[data-friend-pane="chats"]:has(#aclChatThread:not([hidden])) #aclAddChat,
  .acl-detached-view .acl-friend-pane[data-friend-pane="chats"]:has(#aclChatThread:not([hidden])) #aclChatPicker,
  .acl-detached-view .acl-friend-pane[data-friend-pane="chats"]:has(#aclChatThread:not([hidden])) #aclChatList{display:none!important}
  html:root:root:root .acl-detached-view .acl-chat-back{display:grid}
  html:root:root:root .acl-detached-view .acl-chat-close{display:grid;flex-basis:40px}
  html:root:root:root .acl-detached-view .acl-chat-toolbar{padding:10px 12px!important;gap:10px}
  html:root:root:root .acl-detached-view .acl-chat-message{max-width:84%}
  html:root:root:root .acl-detached-view .acl-friend-row{grid-template-columns:auto minmax(0,1fr)}
  html:root:root:root .acl-detached-view .acl-friend-row .acl-friend-actions{grid-column:1/-1;justify-content:stretch}
  html:root:root:root .acl-detached-view .acl-friend-row .acl-friend-actions button{flex:1 1 0}
  html:root:root:root .acl-detached-view .acl-friend-tabs button{font-size:12.5px;padding:8px 2px}
  html:root:root:root .acl-detached-view .acl-friend-profile:not([hidden]){padding:calc(18px + env(safe-area-inset-top,0px)) 16px 18px}
}

@media(prefers-reduced-motion:reduce){
  html:root:root:root header nav,html:root:root:root header nav button.ni .i,html:root:root:root header nav button.ni::before,
  .acl-detached-view,.acl-detached-view *,body.acl-manager-open::after{animation:none!important;transition:none!important}
}