/* Голосовой ввод (public/js/lidfly-dictation.js): панель записи заменяет поле
   ввода, пока идёт запись и распознавание. Цвета и кнопки — из tokens.css и
   buttons.css. */

[data-dictation-field][hidden] {
  display: none !important;
}

.lf-dictation {
  box-sizing: border-box;
  display: grid;
  gap: 10px;
  width: 100%;
  min-width: 0;
  min-height: 60px;
  padding: 10px 12px 10px 16px;
  border: 2px solid var(--color-brand-700);
  border-radius: var(--radius-card-lg);
  background: var(--color-matcha-lighter);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand) 14%, transparent);
}

.lf-dictation[hidden] {
  display: none;
}

.lf-dictation__head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.lf-dictation__status {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.lf-dictation__title {
  flex: 0 0 auto;
  color: var(--color-forest);
  font: 700 15px/22px var(--font-sans);
}

/* Микрофон записи: тихая подпись после «Записываю», не кнопка-действие.
   Список — общий .lf-select; раскрывается вверх над панелью, на её ширину. */
.lf-dictation__mic {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
  color: var(--color-text-muted);
}

.lf-dictation__mic[hidden] {
  display: none;
}

.lf-dictation__mic > svg {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
}

.lf-dictation__mic-name,
.lf-dictation .lf-dictation__mic .lf-select__value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lf-dictation__mic-name {
  padding: 0 4px;
  font: 500 13px/18px var(--font-sans);
}

.lf-dictation .lf-dictation__mic .lf-select {
  position: static;
  width: auto;
  min-width: 0;
}

/* Сильнее правил панели чата (.chat-composer-tools .lf-select__trigger). */
.lf-dictation .lf-dictation__mic .lf-select__trigger {
  gap: 2px;
  height: auto;
  min-height: 28px;
  padding: 4px 6px 4px 4px;
  border: 0;
  border-radius: var(--radius-small);
  background: transparent;
  color: inherit;
  font: 500 13px/18px var(--font-sans);
}

.lf-dictation .lf-dictation__mic .lf-select__value {
  text-decoration: underline dashed;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  text-underline-offset: 3px;
}

.lf-dictation .lf-dictation__mic .lf-select__trigger:hover:not([disabled]),
.lf-dictation .lf-dictation__mic .lf-select.open .lf-select__trigger {
  background: color-mix(in srgb, var(--color-brand) 10%, transparent);
  color: var(--color-forest);
}

.lf-dictation .lf-dictation__mic .lf-select__chevron {
  width: 14px;
  height: 14px;
  color: inherit;
}

.lf-dictation .lf-dictation__mic .lf-select__panel {
  top: auto;
  bottom: calc(100% + 16px);
  left: -6px;
  min-width: min(280px, 100%);
  max-width: calc(100% + 12px);
}

.lf-dictation__time {
  color: var(--color-text-muted);
  font: 600 13px/18px var(--font-sans);
  font-variant-numeric: tabular-nums;
}

.lf-dictation__row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lf-dictation__wave {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 0;
  height: 32px;
  padding: 0 12px;
  overflow: hidden;
  border-radius: var(--btn-radius-s);
  background: var(--color-bg-card);
}

.lf-dictation__wave i {
  display: block;
  flex: 0 0 3px;
  width: 3px;
  height: 24px;
  border-radius: var(--radius-pill);
  background: var(--color-brand-700);
  transform: scaleY(0.08);
  transform-origin: center;
  transition: transform 90ms linear;
}

.lf-dictation__wave.is-paused i {
  background: var(--color-text-muted);
  opacity: 0.5;
}

.lf-dictation__progress {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 36px;
  color: var(--color-forest);
  font: 600 15px/22px var(--font-sans);
}

.lf-dictation__dots {
  display: inline-flex;
  gap: 4px;
}

.lf-dictation__dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-brand-700);
  animation: lf-dictation-dot 1.2s ease-in-out infinite;
}

.lf-dictation__dots i:nth-child(2) { animation-delay: 0.15s; }
.lf-dictation__dots i:nth-child(3) { animation-delay: 0.3s; }

@keyframes lf-dictation-dot {
  0%, 80%, 100% { opacity: 0.3; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-3px); }
}

@media (prefers-reduced-motion: reduce) {
  .lf-dictation__dots i { animation: none; opacity: 0.8; }
  .lf-dictation__wave i { transition: none; }
}

@media (max-width: 760px) {
  .lf-dictation {
    padding: 8px 8px 8px 12px;
  }
  .lf-dictation__wave {
    padding: 0 8px;
    gap: 2px;
  }
  .lf-dictation__wave i:nth-child(n + 21) {
    display: none;
  }
}