/* Помічник. Кольори й радіуси беруться з тем застосунку — свого стилю тут немає. */

.as-panel .m-body{padding:0}
.as-body{display:flex; flex-direction:column; min-height:0}
.as-log{flex:1; min-height:0; overflow-y:auto; padding:18px 18px 6px;
  display:flex; flex-direction:column; gap:12px}

/* ---------- порожній стан: одразу видно, про що можна питати ---------- */
.as-empty{color:var(--dim); font-size:13.5px; line-height:1.6}
.as-empty p{margin:0 0 14px}
.as-hints{display:flex; flex-direction:column; gap:8px}
.as-hint{text-align:left; background:var(--panel-2); border:1px solid var(--line);
  border-radius:var(--r-sm); color:var(--text); font:inherit; font-size:13px;
  padding:10px 13px; cursor:pointer;
  transition:border-color .18s, background .18s, color .18s}
.as-hint:hover{border-color:var(--accent); color:var(--accent); background:var(--accent-soft)}
.as-hint:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

/* ---------- листування ---------- */
.as-msg{display:flex}
.as-msg.me{justify-content:flex-end}
.as-bubble{max-width:88%; padding:11px 14px; border-radius:var(--r);
  font-size:13.5px; line-height:1.6; overflow-wrap:anywhere}
.as-msg.me .as-bubble{background:var(--accent-soft); color:var(--text);
  border:1px solid color-mix(in srgb, var(--accent) 35%, transparent)}
.as-msg.ai .as-bubble{background:var(--panel-2); color:var(--text);
  border:1px solid var(--line-soft)}
.as-bubble p{margin:0 0 9px}
.as-bubble p:last-child{margin:0}

/* ---- картка «видалити угоди» (delete_ai.py) ---- */
/* Виглядає підкреслено інакше за звичайну відповідь: тут не слова, а дія,
   і людина має бачити, що саме зникне, перш ніж натисне. */
.as-del{display:flex; flex-direction:column; gap:9px}
.as-del-h{margin:0; font-weight:600}
.as-del-what{font-size:12.5px; color:var(--dim);
  padding:6px 9px; border-radius:8px; background:var(--panel);
  border:1px solid var(--line-soft); overflow-wrap:anywhere}
.as-del-list{list-style:none; margin:0; padding:0; display:grid; gap:4px}
.as-del-list li{font-family:var(--mono); font-size:11.5px; color:var(--dim);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.as-del-more{margin:0; font-size:12px; color:var(--faint)}
.as-del-warn{margin:0; font-size:12.5px; color:var(--down)}
.as-del-btns{display:flex; gap:8px; flex-wrap:wrap; margin-top:2px}
.as-del-btns .btn{min-height:38px; padding:8px 16px; font-size:13px}
.as-del-btns .btn.danger{border-color:color-mix(in srgb, var(--down) 45%, transparent)}
.as-del-btns .btn.danger:hover{border-color:var(--down); background:var(--down-soft)}

/* три крапки, поки модель думає */
.as-wait{display:flex; gap:5px; align-items:center; padding:15px 16px}
.as-wait i{width:6px; height:6px; border-radius:50%; background:var(--faint);
  animation:asDot 1s ease-in-out infinite}
.as-wait i:nth-child(2){animation-delay:.15s}
.as-wait i:nth-child(3){animation-delay:.3s}
@keyframes asDot{0%,60%,100%{opacity:.3; transform:translateY(0)}
                 30%{opacity:1; transform:translateY(-3px)}}
@media (prefers-reduced-motion:reduce){.as-wait i{animation:none; opacity:.6}}

/* ---------- поле питання ---------- */
.as-foot{display:flex; flex-direction:column; align-items:stretch; gap:10px}
.as-input{width:100%; box-sizing:border-box; resize:none; overflow-y:auto;
  min-height:82px; max-height:200px;
  background:var(--panel-2); color:var(--text); border:1px solid var(--line);
  border-radius:var(--r-sm); padding:12px 14px; font:inherit; font-size:14.5px;
  line-height:1.55}
.as-input:focus{outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft)}
.as-input:disabled{opacity:.55}
.as-actions{display:flex; align-items:center; gap:10px}
.as-actions .sp{flex:1}
.as-foot .btn:disabled{opacity:.5; cursor:default}
.as-review{white-space:nowrap}

/* ---------- кнопка-«бульбашка», що висить поверх сторінки ---------- */
/* колір маскота окремими змінними: світла тема білий, темна чорний */
:root{--bot-ink:#ffffff}
:root[data-theme="dark"]{--bot-ink:#06070a}
/* назва кнопки для читалок екрана. Саме текстом, а не aria-label: браузер
   показував той label підказкою біля іконки — власне те, що просили прибрати */
.as-fab-name{position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0}

.as-fab{position:fixed; right:22px; bottom:22px; z-index:45;
  display:flex; align-items:center; justify-content:center;
  width:76px; height:76px; padding:0; border-radius:50%;
  background:var(--accent); color:var(--accent-ink,#fff);
  border:none; cursor:pointer;
  box-shadow:var(--shadow-badge), 0 6px 20px -6px color-mix(in srgb, var(--accent) 65%, transparent);
  transition:transform .16s, box-shadow .16s, opacity .18s}
.as-fab:hover{transform:translateY(-2px) scale(1.05)}
.as-fab:active{transform:translateY(0) scale(.96)}
.as-fab:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
/* м'яка світна пляма замість рамки — той самий прийом, що на референсі:
   просто коло-«блоб» плюс два овальні очі поверх нього */
.as-fab-glow{position:absolute; width:68%; height:68%; left:50%; top:46%;
  transform:translate(-50%,-50%); border-radius:50%; pointer-events:none;
  background:radial-gradient(circle at 50% 42%,
    color-mix(in srgb, var(--bot-ink) 95%, transparent) 0%,
    color-mix(in srgb, var(--bot-ink) 40%, transparent) 45%,
    transparent 72%);
  animation:asBotFloat 2.6s ease-in-out infinite}
.as-fab-ic{position:relative; z-index:1; display:block; color:var(--bot-ink); animation:asBotFloat 2.6s ease-in-out infinite}
.as-fab-eyes{transform-box:fill-box; transform-origin:center;
  animation:asBotBlink 4.2s ease-in-out infinite}

/* ---------- рот і випадкові емоції: happy / wink / surprised / yawn ---------- */
.as-fab-mouth *{opacity:0; transition:opacity .18s}
.as-fab-mouth .mouth-neutral{opacity:1}
.eye-l-w, .eye-r-w, .eye-l-s, .eye-r-s{opacity:0; transition:opacity .18s}

.as-fab[data-em="happy"] .mouth-neutral{opacity:0}
.as-fab[data-em="happy"] .mouth-smile{opacity:1}

.as-fab[data-em="wink"] .mouth-neutral{opacity:0}
.as-fab[data-em="wink"] .mouth-smile{opacity:1}
.as-fab[data-em="wink"] .eye-r-n{opacity:0}
.as-fab[data-em="wink"] .eye-r-w{opacity:1}

.as-fab[data-em="surprised"] .mouth-neutral{opacity:0}
.as-fab[data-em="surprised"] .mouth-open{opacity:1}
.as-fab[data-em="surprised"] .eye-l-n, .as-fab[data-em="surprised"] .eye-r-n{opacity:0}
.as-fab[data-em="surprised"] .eye-l-s, .as-fab[data-em="surprised"] .eye-r-s{opacity:1}

.as-fab[data-em="yawn"] .mouth-neutral{opacity:0}
.as-fab[data-em="yawn"] .mouth-yawn{opacity:1}
.as-fab[data-em="yawn"] .eye-l-n, .as-fab[data-em="yawn"] .eye-r-n{opacity:0}
.as-fab[data-em="yawn"] .eye-l-w, .as-fab[data-em="yawn"] .eye-r-w{opacity:1}
/* зсув очей за мишкою рахує JS (assistant.js); transition — щоб рух був
   плавним між кадрами, а не смикався слідом за подіями mousemove */
.as-fab-face{transition:transform .12s ease-out}
@keyframes asBotFloat{0%,100%{transform:translateY(0)} 50%{transform:translateY(-3px)}}
@keyframes asBotBlink{0%,88%,100%{transform:scaleY(1)} 92%{transform:scaleY(.15)}}
/* поки відкрита будь-яка панель — кнопка не заважає */
body:has(.pnl-wrap) .as-fab, body:has(.modal:not([hidden])) .as-fab{
  opacity:0; pointer-events:none; transform:translateY(8px)}

/* ---------- репліка помічника: те, що він каже сам ----------
   Виїжджає над кнопкою, тримається недовго й іде. Це не сповіщення:
   ні лічильників, ні звуку — просто хтось поруч сказав фразу. */
/* Точка росту — центр самої кнопки-маскота: репліка не просто з'являється
   поруч, а вилазить із нього. Звідси дивні calc: 38px від правого краю і
   52px нижче — це якраз середина кружка (right:22 + 76/2, bottom:22+38). */
.as-say{position:fixed; right:22px; bottom:112px; z-index:46;
  width:min(320px, calc(100vw - 44px));
  /* колір теми, а не панелі: репліку має бути видно з першого погляду.
     Пара accent / accent-ink контрастна в будь-якому оформленні —
     у темних темах це темний текст на зеленому, у світлих навпаки. */
  background:var(--accent); color:var(--accent-ink);
  border:none; border-radius:14px 14px 4px 14px;
  padding:14px 16px 13px;
  box-shadow:var(--shadow-pop),
    0 8px 26px -8px color-mix(in srgb, var(--accent) 60%, transparent);
  opacity:0; transform:scale(.2); transform-origin:calc(100% - 38px) calc(100% + 52px);
  transition:opacity .16s ease-out, transform .34s cubic-bezier(.2,1.15,.35,1)}
.as-say.in{opacity:1; transform:none}
/* хвостик до кружка — щоб читалось як його репліка, а не просто картка */
.as-say::after{content:""; position:absolute; right:16px; bottom:-6px;
  width:11px; height:11px; background:var(--accent);
  transform:rotate(45deg) skew(4deg,4deg); border-bottom-right-radius:3px}
/* другорядне — тим самим чорнилом, тільки блідішим: на кольоровому тлі
   сірі токени тем перестають читатись */
.as-say .cap{display:block; font-family:var(--mono); font-size:9px;
  letter-spacing:.16em; text-transform:uppercase; margin-bottom:7px; padding-right:18px;
  color:color-mix(in srgb, var(--accent-ink) 62%, transparent)}
.as-say .tx{margin:0; font-size:13.5px; line-height:1.55; font-weight:500}
.as-say .tx b{font-weight:600}
.as-say .facts{list-style:none; margin:9px 0 0; padding:0; display:grid; gap:5px}
.as-say .facts li{position:relative; padding-left:13px; font-size:12.5px;
  line-height:1.5; color:color-mix(in srgb, var(--accent-ink) 78%, transparent)}
.as-say .facts li::before{content:"·"; position:absolute; left:3px;
  color:color-mix(in srgb, var(--accent-ink) 55%, transparent)}
.as-say .acts{display:flex; gap:7px; flex-wrap:wrap; margin-top:12px}
.as-say .acts button{flex:none; font:inherit; font-size:12.5px; cursor:pointer;
  padding:6px 11px; border-radius:8px;
  border:1px solid color-mix(in srgb, var(--accent-ink) 30%, transparent);
  background:transparent; color:var(--accent-ink);
  transition:border-color .15s, background .15s}
.as-say .acts button:hover{border-color:color-mix(in srgb, var(--accent-ink) 55%, transparent)}
/* головна дія — навпаки, панеллю: темна плашка на кольорі помітніша за рамку */
.as-say .acts button.main{background:var(--panel); border-color:var(--panel);
  color:var(--text); font-weight:500}
.as-say .acts button.main:hover{filter:brightness(1.12)}
.as-say .x{position:absolute; top:8px; right:9px; width:22px; height:22px;
  display:grid; place-items:center; font-size:15px; line-height:1;
  background:none; border:none; cursor:pointer; border-radius:6px;
  color:color-mix(in srgb, var(--accent-ink) 55%, transparent)}
.as-say .x:hover{color:var(--accent-ink);
  background:color-mix(in srgb, var(--accent-ink) 12%, transparent)}
/* поки відкрита панель чи модалка — помічник мовчить, як і його кнопка */
body:has(.pnl-wrap) .as-say, body:has(.modal:not([hidden])) .as-say{
  opacity:0; pointer-events:none; transform:translateY(8px) scale(.96)}

@media (max-width:900px){
  /* Тут кнопку піднімає mobile.css: 52px, right:12, bottom:78 над панеллю
     вкладок. Отже й точка росту інша — центр кружка тепер за 26px від
     правого краю репліки і за 36px нижче її низу. */
  .as-say{right:12px; bottom:calc(140px + env(safe-area-inset-bottom));
    width:min(320px, calc(100vw - 24px));
    transform-origin:calc(100% - 26px) calc(100% + 36px)}
  .as-say::after{right:14px}
}
@media (max-width:560px){
  .as-bubble{max-width:94%}
  .as-fab{right:14px; bottom:14px; width:64px; height:64px}
}
@media (prefers-reduced-motion:reduce){
  .as-fab{transition:opacity .18s}
  .as-fab:hover{transform:none}
  .as-fab-ic, .as-fab-eyes, .as-fab-face{animation:none; transition:none}
  .as-say{transition:opacity .18s; transform:none}
  .as-say.in{transform:none}
}