/* Linq AIP Voice UX 1.0 — 마이크 버튼 시각 피드백 강화 */

/* === 1. 마이크 버튼 평상시 상태 === */
.aipkit_voice_input_btn {
    position: relative;
    transition: background-color 180ms ease, color 180ms ease, transform 120ms ease;
}
.aipkit_voice_input_btn:active {
    transform: scale(0.92);
}

/* === 2. 녹음 중 상태 — 빨갛게 + 펄스 링 === */
.aipkit_voice_input_btn.aipkit_recording {
    background-color: #ff3b30 !important;
    color: #fff !important;
    box-shadow: 0 0 0 0 rgba(255, 59, 48, 0.55);
    animation: linq-voice-pulse 1.4s ease-out infinite;
}
.aipkit_voice_input_btn.aipkit_recording svg,
.aipkit_voice_input_btn.aipkit_recording * {
    color: #fff !important;
    stroke: #fff !important;
}

@keyframes linq-voice-pulse {
    0%   { box-shadow: 0 0 0 0   rgba(255, 59, 48, 0.55); }
    70%  { box-shadow: 0 0 0 14px rgba(255, 59, 48, 0); }
    100% { box-shadow: 0 0 0 0   rgba(255, 59, 48, 0); }
}

/* === 3. 마이크 아이콘 자체에 작은 점멸 (보조) === */
.aipkit_voice_input_btn.aipkit_recording::after {
    content: "";
    position: absolute;
    top: 6px;
    right: 6px;
    width: 8px;
    height: 8px;
    background: #fff;
    border-radius: 50%;
    animation: linq-voice-blink 0.9s ease-in-out infinite;
}
@keyframes linq-voice-blink {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.25; }
}

/* === 4. 입력창 placeholder — 녹음 중일 때 안내 텍스트 === */
.aipkit_chat_main.linq-voice-recording .aipkit_chat_input_field::placeholder {
    color: #ff3b30 !important;
    font-weight: 500;
    opacity: 1;
}

/* === 5. 토스트 (입력창 위 떠 있는 안내) === */
.linq-voice-toast {
    position: fixed;
    left: 50%;
    bottom: 96px;
    transform: translate(-50%, 12px);
    background: rgba(20, 20, 22, 0.92);
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    padding: 10px 18px 10px 36px;
    border-radius: 999px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    z-index: 999999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 220ms ease, transform 220ms ease;
    white-space: nowrap;
    letter-spacing: -0.01em;
}
.linq-voice-toast::before {
    content: "";
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ff3b30;
    animation: linq-voice-blink 0.9s ease-in-out infinite;
}
.linq-voice-toast.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
    pointer-events: auto;
}

/* === 6. 실시간 음성 대화 버튼 (보너스) === */
.aipkit_realtime_voice_agent_btn.aipkit_recording,
.aipkit_realtime_voice_agent_btn.is-active {
    background-color: #007aff !important;
    color: #fff !important;
    animation: linq-voice-pulse-blue 1.4s ease-out infinite;
}
@keyframes linq-voice-pulse-blue {
    0%   { box-shadow: 0 0 0 0   rgba(0, 122, 255, 0.55); }
    70%  { box-shadow: 0 0 0 14px rgba(0, 122, 255, 0); }
    100% { box-shadow: 0 0 0 0   rgba(0, 122, 255, 0); }
}

/* === 7. 모바일 최적화 (390px 이하) === */
@media (max-width: 480px) {
    .linq-voice-toast {
        bottom: 84px;
        font-size: 13px;
        padding: 9px 16px 9px 34px;
    }
    .linq-voice-toast::before {
        left: 14px;
        width: 9px;
        height: 9px;
    }
}

/* === 8. prefers-reduced-motion 존중 === */
@media (prefers-reduced-motion: reduce) {
    .aipkit_voice_input_btn.aipkit_recording {
        animation: none;
    }
    .aipkit_voice_input_btn.aipkit_recording::after,
    .linq-voice-toast::before {
        animation: none;
    }
}

/* === 9. 지우개(채팅 지우기) 버튼 숨김 ===
   AIP Pro는 전송버튼과 같은 자리에서 빈 입력일 때 지우개 모양으로 토글한다.
   같은 <button>에 .aipkit_btn-clear-state 가 붙으므로 두 클래스 동시 매칭만 숨김.
   → 빈 상태: 버튼 사라짐 / 타이핑 후: 전송 버튼 정상 표시. */
.aipkit_input_action_btn.aipkit_btn-clear-state {
    display: none !important;
}

/* === 10. TTS 자동재생 토글 (회의실 모드) ===
   마이크와 send 사이에 inject되는 사용자 토글 버튼.
   ON(기본): 새 응답이 오면 자동으로 음성 재생.
   OFF: 자동 재생 차단 — 사용자가 응답의 ▶ 버튼을 직접 눌러야 함 (회의실/공공장소). */
.linq-tts-toggle-btn {
    transition: background-color 180ms ease, color 180ms ease, transform 120ms ease;
    cursor: pointer;
}
.linq-tts-toggle-btn:active {
    transform: scale(0.92);
}
.linq-tts-toggle-btn.linq-tts-off {
    color: #9ca3af !important;
    opacity: 0.85;
}
.linq-tts-toggle-btn.linq-tts-off:hover {
    color: #6b7280 !important;
    opacity: 1;
}
/* OFF 상태에서 X 라인을 빨강으로 강조 (mute 시각 신호) */
.linq-tts-toggle-btn.linq-tts-off .linq-mute-stroke {
    stroke: #ff3b30 !important;
    stroke-width: 2.4;
}