/* Утёнок-помощник: кнопка в шапке, пузырь, панель справа, подсказки у проверок и ошибок */

/* аватар — только голова; параметры обрезки в переменных (для отдельного duck-head.png: 50% 50% / 1 / 50% 50%) */
.ava{ --ava-size:28px; --ava-pos:50% 0%; --ava-scale:1.3; --ava-origin:47% 8%;
  display:inline-block; flex:none; width:var(--ava-size); height:var(--ava-size); border-radius:50%; overflow:hidden;
  background:#0f141b; border:2px solid var(--gold); vertical-align:middle; }
.ava img{ display:block; width:100%; height:100%; object-fit:cover; object-position:var(--ava-pos);
  transform:scale(var(--ava-scale)); transform-origin:var(--ava-origin); }
.ava.big{ --ava-size:40px; }

#ask-top{ display:flex; align-items:center; gap:8px; background:var(--panel2); border:1px solid var(--line); color:var(--ink);
  border-radius:999px; padding:3px 12px 3px 3px; cursor:pointer; font-weight:600; white-space:nowrap; transition:border-color .15s, background .15s; }
#ask-top:hover{ border-color:var(--gold); }
#ask-top .ava{ --ava-size:32px; transition:transform .2s ease; }
#ask-top:hover .ava{ transform:translateY(-2px) rotate(-6deg); }
body.ask-open #ask-top{ background:#3a3212; border-color:var(--gold); }
#ask-top.pulse{ animation:askPulse 1.2s ease-out 3; }
@keyframes askPulse{ 0%{ box-shadow:0 0 0 0 #ffd86699; } 100%{ box-shadow:0 0 0 12px #ffd86600; } }

#ask-bubble{ position:fixed; top:54px; right:190px; z-index:30; max-width:260px; background:#fff; color:#10131a; cursor:pointer;
  font-size:14px; line-height:1.35; padding:9px 13px; border-radius:14px 4px 14px 14px; box-shadow:0 8px 24px #0008; animation:bubbleIn .3s ease-out; }
#ask-bubble[hidden]{ display:none; }
@keyframes bubbleIn{ from{ opacity:0; transform:translateY(-6px); } }

/* панель справа — четвёртая колонка сетки */
:root{ --ask-w:min(400px, 30vw); }
#ask-panel{ display:none; flex-direction:column; min-height:0; background:#0f141b; border-left:1px solid var(--line); }
body.ask-open #main{ grid-template-columns:var(--side-w) 5px minmax(0,1fr) var(--ask-w); }
body.ask-open #ask-panel{ display:flex; }

.a-head{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-bottom:1px solid var(--line); flex:none; }
.a-head .ttl{ font-weight:700; font-size:17px; color:var(--gold); margin-right:auto; }
.a-icon{ background:none; border:1px solid var(--line); color:var(--gray); border-radius:8px; width:32px; height:32px; cursor:pointer; font-size:16px; }
.a-icon:hover{ color:var(--ink); border-color:var(--gray); }
.a-ctx{ margin:10px 12px 0; padding:8px 10px; border-radius:10px; background:var(--panel2); border:1px solid var(--line);
  font-size:13px; color:#a3abb6; flex:none; }
.a-ctx b{ color:var(--blue); font-weight:600; } .a-ctx .bad{ color:var(--gold); } .a-ctx .ok{ color:var(--green); }

.a-log{ flex:1; overflow-y:auto; padding:14px 12px 12px; display:flex; flex-direction:column; gap:10px; min-height:0;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, black 16px); mask-image:linear-gradient(to bottom, transparent 0, black 16px); }
.a-empty{ margin:auto 0; text-align:center; color:#8b929e; font-size:14px; line-height:1.5; padding:0 8px; }
.a-empty .duck{ display:block; height:min(190px, 24vh); width:auto; margin:0 auto 10px;
  -webkit-mask-image:linear-gradient(to bottom, black 75%, transparent 92%); mask-image:linear-gradient(to bottom, black 75%, transparent 92%); }
.a-empty .big{ display:block; font-size:19px; font-weight:700; color:var(--ink); margin-bottom:6px; }
.a-row{ display:flex; align-items:flex-end; gap:8px; align-self:flex-start; max-width:94%; }
.a-msg{ padding:9px 12px; border-radius:14px; font-size:14.5px; line-height:1.5; white-space:pre-wrap; word-break:break-word; }
.a-msg.me{ align-self:flex-end; max-width:86%; background:#243042; border-bottom-right-radius:4px; }
.a-msg.ai{ background:var(--panel2); border:1px solid var(--line); border-bottom-left-radius:4px; }
.a-msg code{ font-family:ui-monospace,Menlo,monospace; background:#0b0f14; padding:1px 5px; border-radius:5px; font-size:.92em; }
.a-msg pre{ margin:6px 0; background:#0b0f14; padding:8px 10px; border-radius:8px; overflow-x:auto; font:13px/1.4 ui-monospace,Menlo,monospace; white-space:pre; }
.a-msg b{ color:#fff; }
.typing{ display:inline-flex; gap:5px; }
.typing i{ width:7px; height:7px; border-radius:50%; background:var(--gray); animation:askDot 1s infinite; }
.typing i:nth-child(2){ animation-delay:.15s } .typing i:nth-child(3){ animation-delay:.3s }
@keyframes askDot{ 0%,80%,100%{ opacity:.3; transform:none } 40%{ opacity:1; transform:translateY(-3px) } }

.a-chips{ display:flex; flex-wrap:wrap; gap:6px; padding:0 12px 8px; flex:none; }
.a-chips:empty{ display:none; }
.a-chips button{ font:500 13px/1 var(--sans); color:var(--ink); background:#1b222c; border:1px solid var(--line); border-radius:999px; padding:7px 11px; cursor:pointer; }
.a-chips button:hover{ border-color:var(--gold); }
.a-form{ display:flex; align-items:flex-end; gap:6px; padding:10px 12px 8px; border-top:1px solid var(--line); flex:none; }
.a-form textarea{ flex:1; resize:none; min-height:40px; max-height:120px; font:14.5px/1.4 var(--sans); color:var(--ink);
  background:#0b0f14; border:1px solid var(--line); border-radius:10px; padding:9px 10px; }
.a-form textarea:focus{ outline:none; border-color:var(--gold); }
.a-btn{ width:40px; height:40px; border-radius:10px; border:1px solid var(--line); background:#1b222c; color:var(--ink); font-size:17px; cursor:pointer; flex:none; }
.a-btn.send{ background:var(--gold); color:#10131a; border-color:var(--gold); }
.a-btn:disabled{ opacity:.45; cursor:default; }
.a-btn.rec{ background:var(--red); border-color:var(--red); color:#fff; }
.a-btn[hidden]{ display:none; }
.a-foot{ padding:0 12px 10px; font-size:11.5px; color:var(--gray); flex:none; }

/* подсказка у проваленной проверки и у ошибки в терминале */
.ask-why{ display:inline-flex; align-items:center; gap:6px; margin-top:5px; background:#3a3212; color:var(--gold); border:1px solid #6b5a1c;
  border-radius:999px; padding:2px 10px 2px 2px; font-size:12.5px; cursor:pointer; }
.ask-why .ava{ --ava-size:20px; border-width:1.5px; }
.ask-why:hover{ border-color:var(--gold); }
#term-wrap{ position:relative; }
#err-chip{ position:absolute; right:14px; bottom:12px; z-index:5; display:flex; align-items:center; gap:7px; background:#3a3212; color:var(--gold);
  border:1px solid var(--gold); border-radius:999px; padding:3px 12px 3px 3px; font-size:13px; font-weight:600; cursor:pointer;
  box-shadow:0 6px 18px #0009; animation:bubbleIn .25s ease-out; }
#err-chip[hidden]{ display:none; }
#err-chip .ava{ --ava-size:24px; }

@media (prefers-reduced-motion:reduce){ #ask-top.pulse, #ask-bubble, #err-chip, .typing i{ animation:none; } #ask-top:hover .ava{ transform:none; } }

/* на узком экране при открытом утёнке условие прячется (оно есть у утёнка в контексте), остаются код и чат */
@media (max-width:1100px) and (min-width:761px){
  :root{ --ask-w:min(380px, 42vw); }
  body.ask-open #side, body.ask-open #split-v{ display:none; }
  body.ask-open #main{ grid-template-columns:minmax(0,1fr) var(--ask-w); }
}

@media (max-width:760px){
  #ask-top .lbl{ display:none; }
  #ask-top{ padding:3px; }
  #ask-bubble{ top:52px; right:10px; }
  body.ask-open #main{ grid-template-columns:1fr; }
  body[data-view="ask"] #side, body[data-view="ask"] #work{ display:none; }
  #ask-panel{ display:none; border-left:0; }
  body[data-view="ask"] #ask-panel{ display:flex; }
  #mobile-nav button.duck-tab{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; }
  #mobile-nav .duck-tab .ava{ --ava-size:22px; border-width:1.5px; }
  #mobile-nav button{ font-size:12px; }
}