/* ===== Индикатор «Думаю» (нотный стан) + анимации генерации =====
   Работает в паре с /js/hm-think-staff.js. Цвета берутся из темы приложения
   (--text, --text2), насыщенность нот подстраивается под светлую/тёмную тему. */
.hts{
  --h0:262;--ns:72%;--nl:50%;--nl-lit:40%;
  --hts-ink:var(--text,#18181d);--hts-muted:var(--text2,#747482);
  --hts-faint:color-mix(in srgb,var(--text2,#747482) 55%,transparent);
  --hts-accent:hsl(var(--h0) var(--ns) var(--nl));
  display:inline-flex;align-items:center;gap:9px;flex-wrap:wrap;
  font-size:14px;line-height:1.3;color:var(--hts-muted);vertical-align:middle;
}
html[data-theme="dark"] .hts{--ns:88%;--nl:70%;--nl-lit:82%;}
@media(max-width:768px){html:not([data-theme="light"]):not([data-theme="messenger"]) .hts{--ns:88%;--nl:70%;--nl-lit:82%;}}

.hts-staff{width:36px;height:22px;flex:none;overflow:visible;color:var(--hts-faint);}
.hts-lines line{stroke:currentColor;stroke-width:.8;}
.hts-playhead{stroke:var(--hts-accent);stroke-width:1.2;opacity:.45;transition:opacity .4s;}
.hts-n{transition:transform .38s cubic-bezier(.34,1.5,.5,1),opacity .35s;}
.hts-n.swap{transition:transform .75s cubic-bezier(.65,0,.35,1),opacity .35s;}
.hts-n ellipse{fill:hsl(var(--h,262) var(--ns) var(--nl));transform:rotate(-22deg) scale(1);transition:transform .18s ease-out;}
.hts-n.lit ellipse{fill:hsl(var(--h,262) var(--ns) var(--nl-lit));transform:rotate(-22deg) scale(1.45);}
.hts-n.gone{opacity:0;}

.hts-label{display:inline-block;font-weight:500;transition:opacity .18s,transform .18s;}
.hts-label.out{opacity:0;transform:translateY(-5px);}
.hts[data-state="thinking"] .hts-label{
  background:linear-gradient(90deg,var(--hts-muted) 0%,var(--hts-muted) 38%,var(--hts-ink) 50%,var(--hts-muted) 62%,var(--hts-muted) 100%);
  background-size:260% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:htsShimmer 2.2s linear infinite;
}
@keyframes htsShimmer{from{background-position:100% 0}to{background-position:0 0}}
.hts-key{font-size:12px;line-height:20px;padding:0 8px;border-radius:999px;color:var(--hts-accent);background:hsl(var(--h0) var(--ns) var(--nl) / .13);}
.hts-key[hidden]{display:none;}
.hts-time{font-size:13px;color:var(--hts-faint);font-variant-numeric:tabular-nums;}
.hts[data-state="done"] .hts-playhead{opacity:0;}
.hts[data-state="done"] .hts-n ellipse{transform:rotate(-22deg) scale(1.1);}
.hts[data-state="done"] .hts-time{display:none;}

/* Индикатор ожидания в ленте (вместо облака частиц, когда модель думает) */
.thinking.think-staff{display:flex;align-items:center;padding:6px 0;}
/* В блоке рассуждений нотный стан заменяет прежний значок-«объектив» */
.tr .trGlyph.hts-host{width:auto;height:auto;background:none;box-shadow:none;border:0;}
.tr .trGlyph.hts-host .trLens{display:none;}
.tr .trHeader .hts{font-size:inherit;}
.tr.has-hts .trVerb{display:none;}

@media(prefers-reduced-motion:reduce){
  .hts-n,.hts-n.swap,.hts-n ellipse,.hts-label{transition:none;}
  .hts[data-state="thinking"] .hts-label{animation:none;color:var(--hts-muted);background:none;}
  .hts[data-state="thinking"] .hts-staff{animation:htsPulse 1.6s ease-in-out infinite;}
  .hts-playhead{display:none;}
}
@keyframes htsPulse{50%{opacity:.45}}

/* ===== Генерация изображения: мозаика «проявляется» внутри холста ===== */
.igCanvas.hga-on{position:relative;overflow:hidden;}
.igCanvas.hga-on .igDots,.igCanvas.hga-on .igGlow{opacity:.25;}
.hga-img{position:absolute;inset:10px;border-radius:14px;overflow:hidden;pointer-events:none;}
.hga-img canvas{width:100%;height:100%;display:block;filter:saturate(1.05) blur(.2px);}
.hga-sweep{position:absolute;inset:-20% -60%;background:linear-gradient(100deg,transparent 40%,rgba(255,255,255,.28) 50%,transparent 60%);animation:hgaSweep 2.6s ease-in-out infinite;mix-blend-mode:soft-light;}
@keyframes hgaSweep{from{transform:translateX(-40%)}to{transform:translateX(40%)}}
.hga-clock{position:absolute;left:12px;bottom:10px;font-size:12px;font-variant-numeric:tabular-nums;color:#fff;background:rgba(0,0,0,.32);padding:2px 8px;border-radius:999px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);}
.hga-clock:empty{display:none;}

/* ===== Генерация файла: строки документа пишутся, полоса бежит ===== */
.file-card{position:relative;overflow:hidden;}
.hga-doc{position:relative;display:flex;flex-direction:column;justify-content:center;gap:2.5px;width:18px;height:22px;padding:4px 3px;border:1.6px solid currentColor;border-radius:3px 7px 3px 3px;box-sizing:border-box;}
.hga-doc i{display:block;height:1.6px;border-radius:1px;background:currentColor;transform-origin:left;transform:scaleX(0);animation:hgaWrite 1.6s ease-in-out infinite;animation-delay:calc(var(--i) * .18s);}
.hga-doc i:nth-child(2n){width:75%;}
@keyframes hgaWrite{0%{transform:scaleX(0);opacity:.2}35%,70%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}
.hga-bar{position:absolute;left:0;right:0;bottom:0;height:2px;overflow:hidden;background:color-mix(in srgb,var(--text2,#888) 18%,transparent);}
.hga-bar i{position:absolute;top:0;bottom:0;width:35%;background:var(--accent,#1f5cff);border-radius:2px;animation:hgaBar 1.1s cubic-bezier(.4,0,.2,1) infinite;}
@keyframes hgaBar{from{left:-35%}to{left:100%}}
.file-card.hga-file-ok{animation:hgaOk .6s ease;}
.file-card.hga-file-err{animation:hgaErr .4s ease;}
@keyframes hgaOk{40%{box-shadow:0 0 0 3px color-mix(in srgb,#22c55e 35%,transparent)}}
@keyframes hgaErr{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
@media(prefers-reduced-motion:reduce){
  .hga-sweep,.hga-doc i,.hga-bar i{animation:none;}
  .hga-doc i{transform:none;}
}

/* ===== Холст генерации всегда квадратный; готовое фото — в своём размере ===== */
.igCanvas{aspect-ratio:1/1!important;height:auto!important;}
.igRes{display:none!important;}
/* Мини-мозаика «Рисую изображение…» в ленте */
.hga-mini{position:relative;display:inline-block;width:26px;height:26px;border-radius:7px;overflow:hidden;flex:none;background:color-mix(in srgb,var(--text2,#888) 12%,transparent);}
.hga-mini .hga-img{inset:0;border-radius:7px;}
.hga-mini-label{margin-left:10px;font-size:14px;font-weight:500;color:var(--text2,#747482);}