/* chat — экран переписки с AI-помощником.
   Только токены из tokens.css, ни одного сырого цвета.
   Свои классы с префиксом .s-chat-, поверх готовых компонентов из components.css. */

/* ——— каркас: шапка сверху, лента тянется, композер снизу ——— */
.s-chat{
  display:flex;flex-direction:column;
  height:calc(100vh - var(--tabbar-h) - env(safe-area-inset-bottom));
  height:calc(100dvh - var(--tabbar-h) - env(safe-area-inset-bottom));
  min-height:420px;
  padding:0;max-width:640px;margin:0 auto;
}

/* ——— шапка ——— */
.s-chat__bar{flex:none}
.s-chat__ava{background-image:url("../assets/mark.webp")}
.s-chat__iconbtn{
  appearance:none;-webkit-appearance:none;border:0;background:transparent;cursor:pointer;
  color:var(--c-text-3);flex:none;
  width:var(--tap-min);height:var(--tap-min);min-width:var(--tap-min);min-height:var(--tap-min);
  border-radius:var(--radius-pill);display:grid;place-items:center;
  transition:color var(--motion-fast) var(--motion-ease),
             background var(--motion-fast) var(--motion-ease);
}
.s-chat__iconbtn svg{width:22px;height:22px}
.s-chat__iconbtn:hover{color:var(--c-accent);background:var(--c-accent-quiet)}
.s-chat__iconbtn:active{color:var(--c-accent)}
.s-chat__iconbtn:focus-visible{outline:none;color:var(--c-accent);box-shadow:var(--shadow-glow)}
.s-chat__iconbtn[disabled]{opacity:.42;pointer-events:none}

/* ——— лента сообщений ——— */
.s-chat__thread{
  flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  padding-bottom:var(--space-7);scroll-behavior:smooth;
}
.s-chat__text{display:block}
.s-chat__typing{margin-top:var(--space-1)}

/* ——— подсказки-вопросы в пустом состоянии ——— */
.s-chat__suggest{align-self:stretch;margin-top:var(--space-2)}
.s-chat__suggest[hidden]{display:none}
.s-chat__suggest-title{
  margin:0 0 var(--space-4);
  font-size:var(--t-caption-size);line-height:var(--t-caption-lh);
  letter-spacing:var(--t-caption-tracking);color:var(--c-text-3);
}
.s-chat__chips{display:flex;flex-wrap:wrap;gap:var(--space-4)}
.s-chat__chip{
  appearance:none;-webkit-appearance:none;cursor:pointer;text-align:left;
  font-family:var(--font-text);font-size:var(--t-body-s-size);line-height:var(--t-body-s-lh);
  min-height:var(--tap-min);padding:var(--space-3) var(--space-6);max-width:100%;
  border:1px solid var(--c-border);color:var(--c-text-2);
  transition:border-color var(--motion-fast) var(--motion-ease),
             color var(--motion-fast) var(--motion-ease);
}
.s-chat__chip:hover{border-color:var(--c-accent);color:var(--c-text)}
.s-chat__chip:focus-visible{outline:none;border-color:var(--c-accent);box-shadow:var(--shadow-glow)}
.s-chat__chip-skel{height:var(--tap-min);width:184px;max-width:100%;border-radius:var(--radius-pill)}

/* ——— низ экрана: плашка ожидания, композер, счётчик, дисклеймер ——— */
.s-chat__foot{
  flex:none;
  background:var(--c-glass-chrome);
  backdrop-filter:blur(var(--blur-chrome));-webkit-backdrop-filter:blur(var(--blur-chrome));
  border-top:1px solid var(--c-border);
}
@supports not (backdrop-filter:blur(1px)){ .s-chat__foot{background:var(--c-surface)} }

.s-chat__wait{
  display:flex;align-items:center;gap:var(--space-4);
  margin:var(--space-5) var(--space-5) 0;padding:var(--space-4) var(--space-5);
  border-radius:var(--radius-md);background:var(--c-accent-quiet);color:var(--c-text-2);
  font-size:var(--t-caption-size);line-height:var(--t-caption-lh);
}
.s-chat__wait[hidden]{display:none}
.s-chat__wait svg{width:16px;height:16px;flex:none;color:var(--c-accent)}

.s-chat__composer{
  background:transparent;border-top:0;align-items:flex-end;
  backdrop-filter:none;-webkit-backdrop-filter:none;
  padding-bottom:var(--space-3);
}
.s-chat__field{
  align-items:flex-end;padding:var(--space-2) var(--space-6);
  border-radius:var(--radius-lg);cursor:text;
}
.s-chat__input{
  flex:1;min-width:0;width:100%;border:0;background:transparent;resize:none;outline:none;
  font-family:var(--font-text);font-size:var(--t-body-size);line-height:var(--t-body-lh);
  color:var(--c-text);
  max-height:124px;padding:var(--space-4) 0;overflow-y:hidden;
}
.s-chat__input::placeholder{color:var(--c-text-3)}
.s-chat__input:disabled{opacity:.55;cursor:not-allowed}

.s-chat .a-send svg{width:22px;height:22px}
.s-chat .a-send[disabled]{opacity:.42;pointer-events:none;box-shadow:none}

.s-chat__meta{display:flex;justify-content:flex-end;padding:0 var(--space-5)}
.s-chat__counter{
  margin:0;font-size:var(--t-caption-size);line-height:var(--t-caption-lh);
  letter-spacing:var(--t-caption-tracking);color:var(--c-text-3);
  font-variant-numeric:tabular-nums;
}
.s-chat__counter.is-over{color:var(--danger);font-weight:700}

.s-chat__note{
  margin:var(--space-3) 0 0;padding:0 var(--space-6) var(--space-5);
  font-size:var(--t-caption-size);line-height:var(--t-caption-lh);
  color:var(--c-text-3);text-align:center;
}

/* ——— шторка подтверждения ——— */
.s-chat__sheet-title{
  font-family:var(--font-display);font-size:var(--t-display-m-size);
  line-height:var(--t-display-m-lh);font-weight:var(--t-display-m-weight);
  letter-spacing:var(--t-display-m-tracking);margin:0;
}
.s-chat__sheet-text{
  margin:var(--space-4) 0 0;font-size:var(--t-body-s-size);line-height:var(--t-body-s-lh);
  color:var(--c-text-2);
}
.s-chat__sheet-actions{display:flex;gap:var(--space-5);margin-top:var(--space-7)}
.s-chat__sheet-actions > .a-btn{flex:1}
.s-chat__danger{background:var(--danger-bg);color:var(--danger);border-color:var(--danger-bg)}
.s-chat__danger:hover{border-color:var(--danger)}

/* ——— уважаем настройку «меньше движения» ——— */
@media (prefers-reduced-motion:reduce){
  .s-chat__thread{scroll-behavior:auto}
  .s-chat__iconbtn,
  .s-chat__chip{transition:none}
}

/* ——— «отвечаю дольше обычного» ———
   Молчащий индикатор человек читает как поломку, поэтому через семь секунд
   объясняем, что происходит. */
.s-chat__slow{
  margin:var(--space-2) 0 0;
  padding:0 var(--space-2);
  color:var(--c-text-3);
  font-size:var(--t-caption-size);
  line-height:1.4;
}