/* ===================================================================
   chat.css — стили виджета чата AYA-Kids.
   Портировано из AYA-Connect (chat-layout.css / chat-theme.css):
     • раскладка пузырей .message-mobile(.own/.other) → .ayac-msg(.own/.other);
     • петрольный/белый градиент пузыря, хвостик 4px, тень «как iMessage»;
     • время под пузырём, SVG-галочка статуса (.msg-status → .ayac-status);
     • превью вложений (.message-file-image / .message-file);
     • композер (.input-area-mobile / .attach-btn-mobile).
   Цвета приведены к бренд-токенам AYA-Kids (styles.css: петроль/бирюза/золото).
   =================================================================== */

.ayac {
  display: flex;
  flex-direction: column;
  height: 460px;
  max-height: 70vh;
  margin-top: 10px;
  border: 1px solid var(--sage, #b7c9b1);
  border-radius: var(--radius, 16px);
  overflow: hidden;
  background: var(--card, #fff);
}

/* Бейдж «видно родителю» — детские каналы (class / teacher_student) */
.ayac-note {
  flex: 0 0 auto;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-2, #005f6d);
  background: rgba(26, 170, 180, .10);
  border-bottom: 1px solid rgba(0, 56, 65, .08);
}

/* ── Лента сообщений (фон — мягкий бренд-градиент, как в AYA-Connect) ── */
.ayac-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background:
    radial-gradient(120% 60% at 0% 0%, rgba(0, 95, 109, .05), transparent 55%),
    radial-gradient(120% 60% at 100% 100%, rgba(214, 147, 47, .05), transparent 55%),
    linear-gradient(180deg, #f1f7f7 0%, #e9f1f1 100%);
}
.ayac-empty, .ayac-loading {
  margin: auto;
  padding: 32px 16px;
  text-align: center;
  color: var(--muted, #6b7d80);
  font-size: 14px;
  line-height: 1.5;
}

/* ── Пузыри (раскладка/форма 1:1 из AYA-Connect; цвета — бренд) ── */
.ayac-msg {
  display: flex;
  flex-direction: column;
  max-width: 82%;
  margin-bottom: 8px;
  animation: ayac-fade .18s ease;
}
.ayac-msg.own { align-self: flex-end; }
.ayac-msg.other { align-self: flex-start; }
@keyframes ayac-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.ayac-bubble {
  position: relative;
  padding: 9px 13px;
  border-radius: 16px;
  font-size: 15px;
  line-height: 1.4;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
/* Свой пузырь — петроль/бирюза, белый текст, хвостик справа-снизу */
.ayac-msg.own .ayac-bubble {
  background: linear-gradient(180deg, #1f9aa3 0%, #005f6d 100%);
  color: #fff;
  border-bottom-right-radius: 4px;
  box-shadow: 0 1px 2px rgba(0, 56, 65, .18), 0 4px 14px rgba(0, 56, 65, .12),
    inset 0 1px 0 rgba(255, 255, 255, .18);
}
.ayac-msg.own .ayac-bubble a { color: #eafeff; }
/* Чужой пузырь — светлый, тёмный текст, хвостик слева-снизу */
.ayac-msg.other .ayac-bubble {
  background: linear-gradient(180deg, #ffffff 0%, #f3f6f6 100%);
  color: var(--ink, #2a3b3d);
  border: 1px solid rgba(0, 56, 65, .07);
  border-bottom-left-radius: 4px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 4px 14px rgba(15, 23, 42, .07);
}
.ayac-msg.other .ayac-bubble a { color: var(--accent-2, #005f6d); }

.ayac-text { white-space: pre-wrap; }
.ayac-flag { margin-left: 6px; font-size: 14px; }

/* Время + галочка статуса под пузырём */
.ayac-meta {
  font-size: 11px;
  color: var(--muted, #6b7d80);
  margin-top: 3px;
  padding: 0 6px;
}
.ayac-msg.own .ayac-meta {
  text-align: right;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}
/* Галочка доставки (✓ отправлено) — стиль из AYA-Connect (.msg-status) */
.ayac-status { display: inline-flex; align-items: center; line-height: 0; color: var(--accent-2, #005f6d); }
.ayac-status.is-sent { color: #d6932f; }       /* отправлено — золото-оранж (как is-sent в AYA-Connect) */
.ayac-status.is-read { color: #1aaab4; }       /* прочитано — бирюза (задел) */

/* ── Превью вложений (из AYA-Connect: .message-file-image / .message-file) ── */
.ayac-file-image {
  display: block;
  max-width: 240px;
  min-height: 120px;
  margin: 2px 0 4px;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(0, 56, 65, .05);
}
.ayac-file-img { width: 100%; height: auto; display: block; object-fit: cover; }
.ayac-file {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 2px 0 4px;
  padding: 9px 13px;
  border-radius: 12px;
  background: rgba(0, 56, 65, .05);
  color: inherit;
  text-decoration: none;
  font-size: 14px;
}
.ayac-msg.own .ayac-file { background: rgba(255, 255, 255, .15); }
.ayac-file-ic { font-size: 18px; }
.ayac-file-name { text-decoration: underline; }

/* ── Превью прикреплённых (до отправки) ── */
.ayac-attached {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 12px 0;
}
.ayac-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border-radius: 9999px;
  background: rgba(26, 170, 180, .12);
  color: var(--accent-2, #005f6d);
  font-size: 13px;
}
.ayac-chip-x {
  border: none;
  background: none;
  color: inherit;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
}

/* ── Мягкое состояние (ошибка / «не прошло проверку безопасности») ── */
.ayac-state {
  flex: 0 0 auto;
  padding: 8px 14px;
  font-size: 13px;
  color: var(--muted, #6b7d80);
}
.ayac-state.is-error { color: var(--danger, #c4452f); }

/* ── Композер (из AYA-Connect: .input-area-mobile / .attach-btn-mobile) ── */
.ayac-composer {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px 12px;
  background: var(--card, #fff);
  border-top: 1px solid rgba(0, 56, 65, .08);
}
.ayac-attach {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border: none;
  border-radius: 50%;
  background: rgba(0, 56, 65, .06);
  color: var(--accent-2, #005f6d);
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .12s ease;
}
.ayac-attach:active { transform: scale(.94); }

/* ── Кнопка-микрофон (рядом со скрепкой) ── */
.ayac-mic {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border: none;
  border-radius: 50%;
  background: rgba(0, 56, 65, .06);
  color: var(--accent-2, #005f6d);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .12s ease, background .15s ease;
}
.ayac-mic:active { transform: scale(.94); }
.ayac-mic.is-disabled { opacity: .45; cursor: help; }

/* ── Панель записи голосового (поверх контролов композера) ── */
.ayac-rec[hidden] { display: none; }   /* уважать атрибут hidden (иначе панель «Идёт запись…» висит всегда) */
.ayac-rec {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--card, #fff);
}
.ayac-composer { position: relative; }
/* При записи прячем обычные контролы, оставляя только панель .ayac-rec */
.ayac-composer.is-recording .ayac-attach,
.ayac-composer.is-recording .ayac-mic,
.ayac-composer.is-recording .ayac-input,
.ayac-composer.is-recording .ayac-send { visibility: hidden; }

.ayac-rec-cancel,
.ayac-rec-send {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .12s ease;
}
.ayac-rec-cancel { background: rgba(196, 69, 47, .12); color: var(--danger, #c4452f); }
.ayac-rec-send {
  background: var(--petrol-grad, linear-gradient(135deg, #1aaab4 0%, #005f6d 60%, #003841 100%));
  color: #fff;
  margin-left: auto;
}
.ayac-rec-cancel:active,
.ayac-rec-send:active { transform: scale(.94); }

.ayac-rec-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--danger, #c4452f);
  flex-shrink: 0;
  animation: ayac-rec-pulse 1s ease-in-out infinite;
}
@keyframes ayac-rec-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.ayac-rec-time {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 15px;
  color: var(--ink, #2a3b3d);
}
.ayac-rec-label {
  font-size: 13px;
  color: var(--muted, #6b7d80);
}

/* ── Голосовое в пузыре (компактный плеер) ── */
.ayac-voice {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 2px 0 4px;
  max-width: 260px;
}
.ayac-voice-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-2, #005f6d);
}
.ayac-msg.own .ayac-voice-head { color: var(--gold, #d6932f); }
.ayac-voice-ic { font-size: 15px; }
.ayac-voice-audio {
  width: 240px;
  max-width: 100%;
  height: 38px;
  border-radius: 10px;
}
.ayac-msg.own .ayac-voice-audio { background: rgba(255, 255, 255, .15); }
.ayac-input {
  flex: 1 1 auto;
  min-width: 0;
  resize: none;
  border: 1px solid var(--sage, #b7c9b1);
  border-radius: 20px;
  padding: 10px 14px;
  font: inherit;
  font-size: 15px;
  line-height: 1.35;
  max-height: 120px;
  background: var(--bg, #f1f7f7);
  color: var(--ink, #2a3b3d);
  outline: none;
}
.ayac-input:focus { border-color: var(--teal, #1aaab4); }
.ayac-send {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border: none;
  border-radius: 50%;
  background: var(--petrol-grad, linear-gradient(135deg, #1aaab4 0%, #005f6d 60%, #003841 100%));
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .12s ease, opacity .12s ease;
}
.ayac-send:active { transform: scale(.94); }
.ayac-send:disabled { opacity: .5; cursor: default; }

/* ── Переключатель каналов в кабинете учителя ── */
.ayac-channels {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.ayac-ch {
  border: 1px solid var(--sage, #b7c9b1);
  border-radius: 9999px;
  padding: 8px 16px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  background: var(--card, #fff);
  color: var(--accent-2, #005f6d);
  transition: background .15s ease, color .15s ease;
}
.ayac-ch.is-active {
  background: var(--accent-2, #005f6d);
  color: #fff;
  border-color: var(--accent-2, #005f6d);
}
.ayac-pick { margin-top: 10px; max-width: 360px; }
.ayac-hint { margin-top: 10px; color: var(--muted, #6b7d80); font-size: 14px; }