/* Помощник в материалах и брендбуке. Механика выезжающей панели скопирована из
   референса aiskin.pro/lp/inter (окно-обсуждение): контент СДВИГАЕТСЯ влево,
   панель занимает освободившееся место справа и НЕ перекрывает интерфейс.
   Чат внутри - как в course-editor. Цвета - брендбук Pro Bali. */
:root{
  --ass-accent:#8a3a26;
  --ass-accent-soft:#f6efec;
  --ass-ink:#1A1209;
  --ass-muted:#8A7662;
  --ass-muted2:#a49d92;
  --ass-line:#D8D0BC;
  --ass-bg:#FBF7EE;
  --ass-surface2:#eeece5;
}

/* Ушко на правом краю (как .wchat-ear в референсе) */
.ass-ear{
  position:fixed; z-index:60; right:0; top:50%; transform:translateY(-50%);
  width:34px; height:62px; border:1px solid var(--ass-line); border-right:0;
  border-radius:4px 0 0 4px; background:var(--ass-surface2); color:var(--ass-muted);
  display:grid; place-items:center; cursor:pointer; padding:0;
  box-shadow:0 6px 18px rgba(0,0,0,.08); transition:color .15s;
}
.ass-ear:hover{color:var(--ass-ink)}
.ass-ear svg{width:17px; height:17px}

/* Панель справа: контент сдвигается, панель не перекрывает */
.ass-panel{
  position:fixed; z-index:59; top:0; right:0; bottom:0; width:min(320px,90vw);
  background:var(--ass-bg); border-left:1px solid var(--ass-line);
  transform:translateX(100%); transition:transform .3s cubic-bezier(.32,.72,0,1);
  display:flex; flex-direction:column;
}
.ass-panel.is-open{transform:translateX(0)}
body.ass-editor-open #root,
body.ass-librarian-open #root{
  padding-right:min(320px,90vw);
  transition:padding .3s cubic-bezier(.32,.72,0,1);
}
.ass-panel-head{
  flex:none; display:flex; align-items:center; gap:8px;
  padding:12px 12px 12px 16px; border-bottom:1px solid var(--ass-line);
}
.ass-panel-title{flex:1; min-width:0; font-size:13.5px; font-weight:700; color:var(--ass-ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ass-panel-close{width:28px; height:28px; border:1px solid var(--ass-line); border-radius:4px;
  background:#fff; color:var(--ass-muted); display:grid; place-items:center; cursor:pointer; padding:0; font-size:16px; line-height:1}
.ass-panel-close:hover{border-color:var(--ass-muted2); color:var(--ass-ink)}

/* Чат — как в course-editor */
.ass-chat{position:relative; overflow:hidden; flex:1; min-height:0}
.ass-chat-inner{position:absolute; inset:0; display:flex; flex-direction:column}
.ass-msgs{flex:1; min-height:0; overflow-y:auto; padding:12px 4px; display:flex; flex-direction:column; gap:10px; scrollbar-width:thin}
.ass-msg{max-width:92%; font-size:13px; line-height:1.5; white-space:pre-wrap; overflow-wrap:anywhere}
.ass-msg.you{align-self:flex-end; text-align:right; color:var(--ass-accent); font-weight:500}
.ass-msg.bot{align-self:flex-start; color:var(--ass-muted)}
.ass-hint{align-self:flex-start; color:var(--ass-muted2); font-size:12px; font-style:italic}
.ass-src{align-self:flex-start; display:flex; flex-direction:column; gap:4px}
.ass-src-row{font-size:11.5px; color:var(--ass-muted); border:1px solid var(--ass-line); border-radius:4px;
  background:#fff; padding:5px 9px; display:flex; gap:7px; align-items:baseline}
.ass-src-num{font-weight:700; color:var(--ass-accent); font-variant-numeric:tabular-nums; flex:none}
.ass-src-title{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ass-thinking{display:flex; gap:4px; align-items:center; padding:2px}
.ass-thinking i{width:6px; height:6px; border-radius:50%; background:var(--ass-muted2); animation:assbnc 1.2s infinite}
.ass-thinking i:nth-child(2){animation-delay:.15s}
.ass-thinking i:nth-child(3){animation-delay:.3s}
@keyframes assbnc{0%,60%,100%{opacity:.3; transform:translateY(0)}30%{opacity:1; transform:translateY(-3px)}}

.ass-compose{padding:6px 4px 4px; flex:none}
.ass-box{background:#fff; border:1px solid var(--ass-line); border-radius:10px; display:flex; align-items:flex-end; gap:6px; padding:6px 6px 6px 12px; transition:border-color .15s}
.ass-box:focus-within{border-color:var(--ass-accent)}
.ass-box textarea{flex:1; background:transparent; border:0; resize:none; color:var(--ass-ink); font-family:inherit; font-size:13.5px; line-height:1.5; max-height:120px; padding:6px 0; outline:none}
.ass-box textarea::placeholder{color:var(--ass-muted2)}
.ass-send{width:32px; height:32px; border-radius:8px; border:0; flex:none; cursor:pointer; background:var(--ass-accent); color:#fff; display:grid; place-items:center; transition:transform .12s, opacity .15s}
.ass-send:active{transform:scale(.92)}
.ass-send:disabled{opacity:.35; cursor:not-allowed}
.ass-send svg{width:16px; height:16px}

/* История версий (редактор) */
.ass-history{flex:none; padding:0 12px 12px}
.ass-history-toggle{font:inherit; font-size:12.5px; font-weight:600; color:var(--ass-muted); background:#fff; border:1px solid var(--ass-line); border-radius:4px; padding:7px 11px; cursor:pointer; transition:.15s; width:100%; text-align:left}
.ass-history-toggle:hover{border-color:var(--ass-muted2); color:var(--ass-ink)}
.ass-history-list{display:none; flex-direction:column; gap:6px; margin-top:8px; max-height:180px; overflow-y:auto}
.ass-history-list.is-open{display:flex}
.ass-history-item{display:flex; align-items:center; gap:10px; padding:6px 10px; border:1px solid var(--ass-line); border-radius:4px; background:#fff; font-size:12.5px}
.ass-history-at{color:var(--ass-muted2); font-variant-numeric:tabular-nums; white-space:nowrap; font-size:11px}
.ass-history-prev{flex:1; color:var(--ass-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ass-history-restore{flex:none; font:inherit; font-size:12px; font-weight:600; color:var(--ass-accent); background:#fff; border:1px solid var(--ass-line); border-radius:4px; padding:5px 10px; cursor:pointer; transition:.15s}
.ass-history-restore:hover{border-color:var(--ass-accent); background:var(--ass-accent-soft)}

/* Кнопка запуска библиотекаря в разделе «Материалы» */
.ass-launch{
  display:inline-flex; align-items:center; gap:7px; font:inherit; font-size:12.5px; font-weight:600;
  padding:7px 12px; border-radius:4px; cursor:pointer; border:1px solid var(--ass-accent);
  background:var(--ass-accent); color:#fff; transition:.15s; white-space:nowrap;
}
.ass-launch:hover{opacity:.92}
.ass-launch svg{width:15px; height:15px}

@media(max-width:720px){
  .ass-ear{width:30px; height:54px}
}