/* База */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
    margin: 0;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, "Apple Color Emoji";
    background: #0b0f14;
    color: #e9eef5;
}

/* Шапка */
.app { max-width: 920px; margin: 0 auto; padding: 12px; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.topbar h1 { font-size: 20px; margin: 8px 0; }
.hud { display: flex; gap: 12px; align-items: center; }
.stat { background: #141b22; border: 1px solid #1f2937; border-radius: 12px; padding: 6px 10px; }

/* Сцена */
.stage { display: grid; gap: 14px; }
.card {
    margin: 0;
    background: #0f151c;
    border: 1px solid #2b3642;
    border-radius: 16px;
    padding: 12px;
    display: grid;
    gap: 10px;
    justify-items: center;
}
.card img {
    width: min(380px, 85vw);
    height: min(380px, 85vw);
    object-fit: cover;         /* любые картинки станут опрятным квадратом */
    object-position: center;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,.35);
    background: #10161d;
}
.prompt { opacity: .85; font-size: 14px; }

/* Кнопки */
.controls { display: flex; gap: 10px; justify-content: center; }
.btn {
    padding: 10px 14px; border-radius: 12px; border: 1px solid #2b3642;
    background: #1a2430; color: #e9eef5; font-weight: 600;
}
.btn:active { transform: translateY(1px); }
.btn.ghost { background: transparent; }

.btn.mic {
    display: inline-flex; align-items: center; gap: 10px;
}
.mic-dot {
    width: 12px; height: 12px; border-radius: 50%;
    background: #ef4444;
    /* без анимации по умолчанию */
}
/* Мигаем только когда запись активна (кнопка получила класс .listening) */
.btn.mic.listening .mic-dot {
    animation: pulse 1.5s infinite;
}

/* Чуть «усилим» индикатор, когда распознана речь (между onspeechstart/onspeechend) */
.btn.mic.speaking .mic-dot {
    transform: scale(1.15);
}

@keyframes pulse {
    0%   { box-shadow: 0 0 0 0 rgba(239,68,68,.7); }
    70%  { box-shadow: 0 0 0 12px rgba(239,68,68,0); }
    100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); }
}

/* Статус */
.status {
    display: grid; gap: 6px;
    background: rgba(255,255,255,0.03);
    border: 1px dashed #3b4756;
    border-radius: 12px; padding: 10px;
}
.feedback.ok { color: #86efac; }
.feedback.err { color: #fca5a5; }

/* Модалка */
::backdrop { background: rgba(0,0,0,.6); backdrop-filter: blur(2px); }
.modal { border: 0; padding: 0; background: transparent; }
.modal-card {
    background: #0f151c; border: 1px solid #2b3642; border-radius: 16px;
    padding: 16px; min-width: 280px; max-width: 420px;
}
.modal, .modal * { color: #e9eef5 !important; }
.modal menu { display: flex; justify-content: flex-end; gap: 8px; margin: 0; padding: 0; }

/* Иконка поддержки */
#supportBadge { min-width: 40px; text-align: center; }
.unsupported #supportBadge { filter: grayscale(100%); opacity: .6; }