/* Каркас приложения (ДС §0 п.1, макет web/app/mockup-minimal.html): верхней шапки нет. Слева общая панель #side
   (знак, «Новый диалог», Чаты, Проекты, Команда, Память, «Недавние», аккаунт с меню внизу), сворачивается до иконок.
   Справа область страницы #stage: панель разделов страницы #left (скрыта, пока страница её не заполнила), содержимое #main,
   правая панель #right по требованию (класс .with-right на #app). Телефон (до 860 px): общая панель выезжает по
   кнопке-бургеру с затемнением, панели страницы открываются своими кнопками в той же строке. Разметку строит js/app.js.
   Цвета только через токены (tokens.css); отдельных правил под тёмную тему нет. */
:root{--side-w:264px;--side-w-mini:56px;--sections-w:240px;--mtop-h:48px}

#app{display:flex;height:100vh;height:100dvh;min-width:0}
#app[data-view="login"]{height:auto;min-height:100vh}

/* ---------- общая панель ---------- */
.side{position:relative;z-index:20;flex:none;width:var(--side-w);min-height:0;display:flex;flex-direction:column;padding:12px 10px 10px;background:var(--panel-2);border-right:1px solid var(--line);transition:width .18s ease}
.side a:hover{text-decoration:none}
.side-head{display:flex;align-items:center;gap:8px;padding:4px 0 12px 8px}
.side-head .brand{gap:8px;min-width:0}
.side-head .brand-mark{width:26px;height:24px}
.side-head .brand-word{font-size:17px;letter-spacing:-.01em}
.side-head .brand-product{display:inline;font:500 var(--fs-xs)/1 var(--font-head);color:var(--heading)}
.side-ib{display:grid;place-items:center;flex:none;width:32px;height:32px;padding:0;border:0;border-radius:var(--radius);background:none;color:var(--faint);cursor:pointer;transition:background .15s,color .15s}
.side-ib:hover{background:var(--panel-3);color:var(--text)}
.side-ib:focus-visible,.side-link:focus-visible,.side-recent a:focus-visible,.side-all:focus-visible,.side-me:focus-visible,.side-menu-item:focus-visible,.side-limit:focus-visible,.mtop-btn:focus-visible{outline:none;box-shadow:var(--focus)}
.side-toggle{margin-left:auto}
.side-toggle .ico-close{display:none} /* на телефоне та же кнопка закрывает выезжающую панель: вместо значка панели крестик */
.side-ico{display:inline-flex;flex:none;width:18px;height:18px}
.side-ico svg,.side-ib svg,.side-me-caret svg,.mtop-btn svg{display:block;width:18px;height:18px}

.side-nav{display:flex;flex-direction:column;gap:2px}
.side-link{display:flex;align-items:center;gap:10px;min-width:0;padding:8px 10px;border-radius:var(--radius);color:var(--text);font-size:14.5px;line-height:1.5;white-space:nowrap;transition:background .15s}
.side-link:hover{background:var(--panel-3)}
.side-link.active{background:var(--accent-soft);color:var(--accent-text);font-weight:700}
.side-link-label{min-width:0;overflow:hidden;text-overflow:ellipsis}
.side-new{font-weight:700;color:var(--heading)}
.side-plus{display:grid;place-items:center;flex:none;width:22px;height:22px;margin:-2px;border-radius:50%;background:var(--primary);color:var(--on-primary)}
.side-plus svg{width:14px;height:14px;stroke-width:2.2}

.side-label{padding:18px 10px 8px;font:700 var(--fs-xs)/1 var(--font);letter-spacing:.05em;text-transform:uppercase;color:var(--muted)} /* A45: --faint не проходил по контрасту */
.side-recent{flex:0 1 auto;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:1px;scrollbar-width:thin}
.side-recent a{flex:none;padding:7px 10px;border-radius:var(--radius);color:var(--text);font-size:14px;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-recent a:hover,.side-recent a.cur{background:var(--panel-3)}
.side-empty{padding:7px 10px;font-size:var(--fs-sm);color:var(--muted)}
.side-all{flex:none;margin-top:4px;padding:7px 10px;border-radius:var(--radius);font-size:var(--fs-sm);color:var(--muted)}
.side-all:hover{background:var(--panel-3);color:var(--text)}

/* «Все диалоги» сразу под списком «Недавние», а не у низа панели (критик 23.09, п.15): список не растягивается,
   аккаунт прижат к низу своим margin-top:auto */

/* аккаунт внизу слева: кружок с инициалами, имя, «должность · команда»; по клику меню над кнопкой */
.side-foot{position:relative;flex:none;margin-top:auto;padding-top:8px}
.side-me{display:flex;align-items:center;gap:10px;width:100%;min-width:0;padding:8px;border:0;border-radius:10px;background:none;color:var(--text);font:inherit;text-align:left;cursor:pointer;transition:background .15s}
.side-me:hover,.side-me[aria-expanded="true"],.side-me.here{background:var(--panel-3)}
.side-ava{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:50%;background:var(--primary);color:var(--on-primary);font:700 12.5px/1 var(--font-head)}
.side-me-text{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.side-me-name{font-weight:700;font-size:14px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-me-role{font-size:var(--fs-xs);line-height:1.25;color:var(--muted);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.side-me-caret{display:inline-flex;flex:none;color:var(--faint)}
.side-menu{position:absolute;left:0;bottom:calc(100% - 2px);z-index:5;width:244px;padding:6px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow)}
.side-menu hr{margin:6px 4px;border:0;border-top:1px solid var(--line)}
.side-menu-item{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border:0;border-radius:var(--radius);background:none;color:var(--text);font:inherit;font-size:14px;line-height:1.3;text-align:left;cursor:pointer}
.side-menu-item:hover,.side-menu-item:focus-visible{background:var(--panel-2)}
.side-menu-item .side-ico{color:var(--muted)}
.side-menu-item .switch{margin-left:auto;pointer-events:none}
.side-limit{display:block;padding:8px 10px 10px;border-radius:var(--radius);color:inherit}
.side-limit:hover{background:var(--panel-2)}
.side-limit-top{display:flex;justify-content:space-between;gap:6px;margin-bottom:6px;font-size:var(--fs-xs);color:var(--muted);white-space:nowrap}
.side-limit .progress{display:block;height:5px;border-radius:999px;background:var(--panel-3);box-shadow:none}

/* ---------- область страницы ---------- */
.stage{position:relative;flex:1;min-width:0;min-height:0;display:flex}
aside.left{flex:none;width:var(--sections-w);background:var(--panel);border-right:1px solid var(--line);overflow:auto;padding:10px}
aside.right{display:none;flex:none;width:var(--right-w);background:var(--panel);border-left:1px solid var(--line);overflow:auto;padding:14px}
#app:not(.has-left) aside.left{display:none}
#app.with-right aside.right{display:block}
main.content{flex:1;min-width:0;overflow:auto;display:flex;flex-direction:column;background:var(--bg)}
.mtop,.side-shade{display:none}
body #toasts{bottom:16px} /* плавающей кнопки обратной связи больше нет: тосты стоят в углу */

/* ---------- широкий экран: панель свёрнута до иконок (подписи пунктов через data-tip справа) ---------- */
@media (min-width:861px){
  #app.side-collapsed .side{width:var(--side-w-mini);padding-left:8px;padding-right:8px}
  #app.side-collapsed .side-head{flex-direction:column;gap:6px;padding:4px 0 8px}
  #app.side-collapsed .side-toggle{margin-left:0}
  #app.side-collapsed .brand-text,#app.side-collapsed .side-link-label,#app.side-collapsed .side-label,#app.side-collapsed .side-recent,
  #app.side-collapsed .side-all,#app.side-collapsed .side-me-text,#app.side-collapsed .side-me-caret{display:none}
  #app.side-collapsed .side-nav{align-items:center}
  #app.side-collapsed .side-link{justify-content:center;width:40px;height:36px;padding:0}
  #app.side-collapsed .side-me{justify-content:center;padding:4px}
}

/* ---------- телефон: панель выезжает по кнопке-бургеру, затемнение, Esc закрывает ---------- */
@media (max-width:860px){
  .side{position:fixed;top:0;bottom:0;left:0;z-index:36;width:min(300px,86vw);transform:translateX(-102%);visibility:hidden;transition:transform .2s ease,visibility 0s .2s}
  #app.side-open .side{transform:none;visibility:visible;box-shadow:var(--shadow);transition:transform .2s ease,visibility 0s}
  .side-shade{display:block;position:fixed;inset:0;z-index:35;background:rgba(0,0,0,.45);opacity:0;pointer-events:none;transition:opacity .2s}
  #app.side-open .side-shade{opacity:1;pointer-events:auto}
  .side-menu{width:auto;right:0}
  .side-toggle .ico-side{display:none}.side-toggle .ico-close{display:block}
  .stage{flex-direction:column}
  .mtop{display:flex;align-items:center;gap:6px;flex:none;height:var(--mtop-h);padding:0 8px;background:var(--bg);border-bottom:1px solid var(--line)}
  .mtop-btn{display:grid;place-items:center;flex:none;min-width:36px;height:36px;padding:0 8px;border:0;border-radius:var(--radius);background:none;color:var(--muted);font:inherit;font-size:var(--fs-sm);cursor:pointer}
  .mtop-btn:hover,.mtop-btn[aria-expanded="true"]{background:var(--panel-2);color:var(--text)}
  .mtop-btn.text[aria-expanded="true"]{background:var(--accent-soft);color:var(--accent-text);font-weight:700}
  .mtop-btn.text:empty{display:none}
  .mtop-title{flex:1;min-width:0;font:800 16px/1.2 var(--font-head);color:var(--heading);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #app:not(.has-left) #mtop-left,#app:not(.with-right) #mtop-right{display:none}
  aside.left,aside.right,#app.with-right aside.right{display:none;position:fixed;top:var(--mtop-h);left:0;right:0;bottom:0;z-index:30;width:auto;border:0}
  #app.has-left aside.left.open,#app.with-right aside.right.open{display:block}
}
@media (prefers-reduced-motion:reduce){.side,.side-shade{transition:none}}