/* ============================================================
   Демодок — опциональный говорящий аэд.

   Портрет остаётся неподвижным; жизнь дают три дешёвых слоя:
   рот по темпу речи, редкое моргание и мягкое дыхание. Компонент
   не зависит от поставщика голоса — позже системный TTS можно
   заменить готовыми аудиофайлами или потоковым серверным голосом.
   ============================================================ */

.aed-reader {
  position: absolute;
  right: 18px;
  bottom: 16px;
  z-index: 8;
  width: 218px;
  height: 252px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(22px) scale(.96);
  transform-origin: right bottom;
  transition: opacity .35s ease, transform .35s ease, visibility .35s;
  filter: drop-shadow(0 15px 28px rgba(0,0,0,.62));
}

.aed-reader.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.aed-portrait {
  position: absolute;
  inset: 0 0 22px 0;
  overflow: hidden;
  border: 1px solid rgba(211,166,77,.72);
  border-radius: 48% 48% 13px 13px / 36% 36% 13px 13px;
  background:
    radial-gradient(circle at 50% 34%, rgba(104,73,36,.55), transparent 49%),
    linear-gradient(180deg, rgba(22,15,8,.9), rgba(7,5,3,.96));
  box-shadow:
    inset 0 0 0 3px rgba(65,40,14,.72),
    inset 0 0 34px rgba(0,0,0,.72),
    0 0 0 1px rgba(39,22,8,.8);
  animation: aedBreath 4.8s ease-in-out infinite;
}

.aed-portrait::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, transparent 54%, rgba(9,5,2,.1) 70%, rgba(7,4,2,.86) 100%),
    radial-gradient(ellipse at 50% 44%, transparent 35%, rgba(8,5,2,.16) 72%, rgba(6,4,2,.48) 100%);
}

.aed-portrait img {
  position: absolute;
  width: 310px;
  height: 310px;
  max-width: none;
  left: -46px;
  top: -2px;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

/* Глаз и рот — накладки поверх портрета, и координаты у них по лицу, а не по
   рамке: у каждого аэда своё лицо. Подгонять — эти четыре числа, по одному
   набору на рассказчика (класс ставит aed.js в data-narrator). */
.aed-reader {
  --aed-eye-x: 128px;
  --aed-eye-y: 100px;
  --aed-mouth-x: 102px;
  --aed-mouth-y: 132px;
}

/* Фемий: лицо у́же, чем у Демодока, и рот сидит заметно ниже — у Демодока щель
   прячется под усами, у Фемия губы открыты. Если промахивается, править здесь. */
.aed-reader[data-narrator="femiy"] {
  --aed-eye-x: 118px;
  --aed-eye-y: 102px;
  --aed-mouth-x: 100px;
  --aed-mouth-y: 157px;
}

/* Видимый правый глаз Демодока. Патч не нужен: левый закрыт повязкой. */
.aed-eye {
  position: absolute;
  left: var(--aed-eye-x);
  top: var(--aed-eye-y);
  z-index: 2;
  width: 14px;
  height: 5px;
  border-radius: 50%;
  background: rgba(105,68,48,.96);
  opacity: 0;
  transform: scaleY(.15);
  transform-origin: center;
}

.aed-reader.is-blinking .aed-eye {
  opacity: 1;
  animation: aedBlink .16s ease-in-out both;
}

/* Тёмная щель лежит под усами и меняет высоту четырьмя состояниями. */
.aed-mouth {
  position: absolute;
  left: var(--aed-mouth-x);
  top: var(--aed-mouth-y);
  z-index: 2;
  width: 17px;
  height: 2px;
  border-radius: 50%;
  background: radial-gradient(ellipse, #28110d 12%, #5d241b 55%, #1d0d0a 100%);
  box-shadow: 0 1px 1px rgba(235,157,114,.22);
  opacity: .78;
  transform: scaleY(.35);
  transform-origin: 50% 0;
  transition: transform 65ms linear, width 65ms linear, left 65ms linear, opacity 65ms linear;
}

.aed-reader[data-mouth="0"] .aed-mouth { transform: scaleY(.3); opacity: .42; }
.aed-reader[data-mouth="1"] .aed-mouth { transform: scaleY(1.25); }
.aed-reader[data-mouth="2"] .aed-mouth { transform: scaleY(2.45); width: 16px; left: calc(var(--aed-mouth-x) + .5px); }
.aed-reader[data-mouth="3"] .aed-mouth { transform: scaleY(3.7); width: 14px; left: calc(var(--aed-mouth-x) + 1.5px); }

.aed-voice-ring {
  position: absolute;
  inset: 7px;
  z-index: 3;
  border: 1px solid rgba(225,181,89,0);
  border-radius: 48% 48% 11px 11px / 36% 36% 11px 11px;
  pointer-events: none;
  transition: border-color .25s ease, box-shadow .25s ease;
}

.aed-reader.is-speaking .aed-voice-ring {
  border-color: rgba(225,181,89,.26);
  box-shadow: inset 0 0 20px rgba(225,181,89,.1), 0 0 18px rgba(225,181,89,.12);
  animation: aedVoice 1.7s ease-in-out infinite;
}

.aed-plaque {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 0;
  z-index: 5;
  min-height: 46px;
  padding: 7px 45px 6px 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: linear-gradient(180deg, rgba(31,20,10,.96), rgba(13,9,5,.98));
  border: 1px solid rgba(204,155,61,.58);
  border-radius: 4px;
  box-shadow: 0 6px 18px rgba(0,0,0,.45), inset 0 0 12px rgba(200,154,62,.06);
}

.aed-name {
  font-family: 'Cinzel', 'Cormorant SC', serif;
  font-size: 10px;
  line-height: 1.3;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: #e7cf98;
}

.aed-status {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-family: 'EB Garamond', serif;
  font-size: 12px;
  line-height: 1.25;
  font-style: italic;
  color: #a99570;
}

.aed-controls {
  position: absolute;
  right: 18px;
  bottom: 7px;
  z-index: 6;
  display: flex;
  gap: 3px;
}

.aed-controls button {
  width: 20px;
  height: 24px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: transparent;
  color: #bda36e;
  font-family: Georgia, serif;
  font-size: 12px;
  cursor: pointer;
  opacity: .72;
}

.aed-controls button:hover { color: #f0d596; opacity: 1; background: rgba(200,154,62,.1); }
.aed-controls button:disabled { opacity: .28; cursor: default; background: transparent; }

/* Свёрнутый аэд остаётся маленькой печатью в углу. */
.aed-reader.is-collapsed {
  width: 62px;
  height: 62px;
}
.aed-reader.is-collapsed .aed-portrait {
  inset: 0;
  border-radius: 50%;
  animation: none;
}
.aed-reader.is-collapsed .aed-portrait img {
  width: 94px;
  height: 94px;
  left: -17px;
  top: -2px;
}
.aed-reader.is-collapsed .aed-eye,
.aed-reader.is-collapsed .aed-mouth,
.aed-reader.is-collapsed .aed-plaque,
.aed-reader.is-collapsed #aed-pause-btn { display: none; }
.aed-reader.is-collapsed .aed-controls { inset: 0; }
.aed-reader.is-collapsed #aed-collapse-btn {
  position: absolute;
  inset: 0;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  font-size: 0;
}
.aed-reader.is-collapsed #aed-collapse-btn::after {
  content: '⌃';
  position: absolute;
  right: 1px;
  bottom: 0;
  width: 19px;
  height: 19px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #1a1008;
  border: 1px solid rgba(204,155,61,.72);
  color: #e1c17c;
  font-size: 11px;
}

@keyframes aedBreath {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-1px) scale(1.004); }
}
@keyframes aedBlink {
  0%, 100% { transform: scaleY(.15); }
  50% { transform: scaleY(1); }
}
@keyframes aedVoice {
  0%, 100% { opacity: .55; }
  50% { opacity: 1; }
}

@media (max-width: 980px), (max-height: 650px) {
  .aed-reader { transform: translateY(18px) scale(.82); }
  .aed-reader.is-visible { transform: translateY(0) scale(.82); }
}

@media (prefers-reduced-motion: reduce) {
  .aed-portrait, .aed-voice-ring { animation: none !important; }
  .aed-reader { transition: opacity .15s ease, visibility .15s; }
}