/* ============================================================
   ИИ-помощник: карточка на главной и шторка-чат с большим микрофоном
   ============================================================ */

/* ---------- home card ---------- */

.assistant-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px 8px 4px;
  background: var(--panel);
  border-radius: var(--r-md);
  box-shadow: var(--shadow);
}
.assistant-card-body {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 13px;
  padding: 7px 0 7px 12px;
  border: none; background: none;
  font: inherit; color: var(--text);
  text-align: left;
  transition: transform var(--dur-press) var(--ease-out);
}
.assistant-card-body:active { transform: scale(0.985); }
.assistant-ava svg { width: 24px; height: 24px; }
.assistant-card-text { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.assistant-card-title { font-size: 17px; font-weight: 800; letter-spacing: -0.015em; }
.assistant-card-sub {
  font-size: 13px; font-weight: 600; color: var(--pink-deep);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out);
}
.assistant-card-sub.swap { opacity: 0; transform: translateY(4px); }
.assistant-card-mic {
  flex: none;
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  border: none; border-radius: 50%;
  background: var(--pink-grad);
  color: var(--on-accent);
  box-shadow: 0 6px 14px rgba(var(--shadow-rgb), 0.24);
  transition: transform var(--dur-press) var(--ease-out);
}
.assistant-card-mic svg { width: 23px; height: 23px; }
.assistant-card-mic:active { transform: scale(0.93); }

/* ---------- the sheet ---------- */

.assistant-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.assistant-quota { font-size: 12px; font-weight: 600; color: var(--muted); }

.assistant-chat {
  display: flex; flex-direction: column; gap: 8px;
  max-height: 40vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.assistant-chat:empty { display: none; }
.assistant-bubble {
  max-width: 85%;
  padding: 10px 14px;
  border-radius: 18px;
  font-size: 15px;
  line-height: 1.4;
  word-break: break-word;
  animation: assistant-bubble-in 240ms var(--ease-out);
}
@keyframes assistant-bubble-in { from { opacity: 0; transform: translateY(6px) scale(0.98); } }
.assistant-bubble.me {
  align-self: flex-end;
  background: var(--pink-soft);
  color: var(--text);
  border-bottom-right-radius: 6px;
}
.assistant-bubble.bot {
  align-self: flex-start;
  background: var(--panel-soft);
  color: var(--text);
  border-bottom-left-radius: 6px;
}
/* an error stays in the chat: a toast is gone in two seconds, often unseen */
.assistant-bubble.bot.error { color: var(--red); }
.assistant-bubble.typing { display: flex; gap: 4px; padding: 14px 16px; }
.assistant-bubble.typing i {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--muted);
  animation: assistant-dot 1s var(--ease-in-out) infinite;
}
.assistant-bubble.typing i:nth-child(2) { animation-delay: 0.15s; }
.assistant-bubble.typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes assistant-dot { 0%, 100% { opacity: 0.3; transform: none; } 50% { opacity: 1; transform: translateY(-3px); } }

.assistant-action {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 8px; padding-top: 8px;
  border-top: 1px solid var(--divider);
  font-size: 14px; font-weight: 600; color: var(--green);
}
.assistant-action span::before { content: "✓ "; font-weight: 800; }
.assistant-action.undone { text-decoration: line-through; color: var(--muted); }
.assistant-action button {
  flex-shrink: 0;
  border: none; background: none; padding: 4px 0;
  color: var(--pink-deep); font: inherit; font-weight: 700; font-size: 13px;
}

.assistant-examples { display: flex; flex-wrap: wrap; gap: 6px; }
.assistant-examples button {
  border: none;
  border-radius: 999px;
  padding: 8px 12px;
  background: var(--pink-tint);
  color: var(--pink-deep);
  font: inherit; font-size: 13px; font-weight: 600;
  transition: transform var(--dur-press) var(--ease-out);
}
.assistant-examples button:active { transform: scale(0.96); }

.assistant-stage { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 14px 0 4px; }
.assistant-mic {
  --lvl: 0;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 84px; height: 84px;
  border: none; border-radius: 50%;
  background: var(--pink-grad);
  color: var(--on-accent);
  box-shadow: 0 10px 22px rgba(var(--shadow-rgb), 0.28);
  transition: transform var(--dur-press) var(--ease-out);
}
.assistant-mic svg { position: relative; width: 34px; height: 34px; }
.assistant-mic:active { transform: scale(0.94); }
.assistant-mic[disabled] { opacity: 0.5; }
/* the halo breathes with the voice level that assistant.js writes to --lvl */
.assistant-mic-halo {
  position: absolute; inset: -16px;
  border-radius: 50%;
  background: var(--pink-soft);
  z-index: -1;
  opacity: 0;
  transform: scale(calc(0.8 + var(--lvl) * 0.45));
  transition: opacity 200ms var(--ease-out), transform 80ms linear;
}
.assistant-mic.recording .assistant-mic-halo { opacity: 1; }
.assistant-mic.recording { animation: assistant-pulse 1.4s var(--ease-in-out) infinite; }
@keyframes assistant-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(207, 65, 105, 0.35); }
  50% { box-shadow: 0 0 0 22px rgba(207, 65, 105, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .assistant-mic.recording { animation: none; outline: 3px solid var(--pink); }
  .assistant-mic-halo { transition: none; }
  .assistant-bubble.typing i { animation: none; }
}
.assistant-hint { text-align: center; color: var(--muted); font-size: 13px; font-weight: 600; min-height: 17px; font-variant-numeric: tabular-nums; }

.assistant-input {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 5px 5px 16px;
  border-radius: 999px;
  background: var(--panel-soft);
}
.assistant-input input {
  flex: 1; min-width: 0;
  border: none; background: none; outline: none;
  font: inherit; font-size: 15px; color: var(--text);
  padding: 8px 0;
}
.assistant-input input::placeholder { color: var(--muted); }
.assistant-send {
  flex: none;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border: none; border-radius: 50%;
  background: var(--pink-soft);
  color: var(--pink-deep);
  transition: transform var(--dur-press) var(--ease-out);
}
.assistant-send svg { width: 20px; height: 20px; }
.assistant-send:active { transform: scale(0.92); }
.assistant-send[disabled] { opacity: 0.5; }
.assistant-note { font-size: 12px; }