/**
 * widgets/real_estate/voice-assistant — AI 음성 도우미
 *
 * 🔴 마이크는 화면에서 가장 눈에 띄어야 한다(사용자 요청). 그래서
 *    ① 떠 있는 원형 버튼을 브랜드 색으로 채우고 ② 숨 쉬는 링을 둘러
 *    ③ 라벨을 함께 붙였다. 모바일에서도 엄지에 닿는 오른쪽 아래에 둔다.
 *
 * 🔴 색은 사이트 토큰(--site-*)을 쓴다. 하드코딩하면 다른 사이트에서 어긋난다.
 * 🔴 모션 축소 설정에서는 애니메이션을 멈춘다.
 */

.w-voice-assistant {
    --w-voice-size: 68px;
    --w-voice-brand: var(--site-brand, #11665d);
    --w-voice-brand-dark: var(--site-brand-dark, #123f38);
    --w-voice-on-brand: #fff;
}

/* 🔴 사이트의 기본 box-sizing 을 물려받으면 지름 계산이 어긋나 버튼이 내용보다 작아진다
   (실측: 코어 52px 인데 버튼 높이가 43px 로 잘렸다). 이 위젯 안에서는 못 박는다. */
.w-voice-assistant,
.w-voice-assistant *,
.w-voice-assistant *::before,
.w-voice-assistant *::after { box-sizing: border-box; }

/* 🔴 아이콘 글꼴은 글자보다 줄 높이가 커서, 버튼 안에서 글자보다 위로 떠 보인다
   (실측: "그만 듣기" 의 마이크가 글자보다 2px 위). 아이콘을 블록으로 만들고
   줄 높이를 1 로 눌러 글자와 같은 중심선에 세운다. */
.w-voice-assistant i { display: block; line-height: 1; }

/* ── 떠 있는 마이크 ──────────────────────────────────────────────── */

.w-voice-assistant__fab {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 60;
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 1.125rem 0.5rem 0.5rem;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--w-voice-brand), var(--w-voice-brand-dark));
    box-shadow: 0 10px 30px rgb(18 63 56 / 35%);
    color: var(--w-voice-on-brand);
    cursor: pointer;
    font: inherit;
    font-weight: 700;
    /* 버튼이 코어보다 작아지지 않게 바닥을 깔아 둔다. */
    min-height: var(--w-voice-size);
}

.w-voice-assistant__fab:hover { box-shadow: 0 14px 36px rgb(18 63 56 / 45%); }
.w-voice-assistant__fab:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

.w-voice-assistant__fab-core {
    display: grid;
    place-items: center;
    width: calc(var(--w-voice-size) - 16px);
    height: calc(var(--w-voice-size) - 16px);
    border-radius: 50%;
    background: rgb(255 255 255 / 20%);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 25%);
    font-size: 1.375rem;
}

/* 숨 쉬는 링 — "여기 누르세요" 를 말없이 알린다. */
.w-voice-assistant__fab-ring {
    position: absolute;
    left: 0.5rem;
    top: 50%;
    width: calc(var(--w-voice-size) - 16px);
    height: calc(var(--w-voice-size) - 16px);
    transform: translateY(-50%);
    border-radius: 50%;
    background: rgb(255 255 255 / 35%);
    animation: w-voice-pulse 2.4s ease-out infinite;
    pointer-events: none;
}

@keyframes w-voice-pulse {
    0%   { transform: translateY(-50%) scale(1);   opacity: 0.55; }
    70%  { transform: translateY(-50%) scale(1.9); opacity: 0; }
    100% { transform: translateY(-50%) scale(1.9); opacity: 0; }
}

.w-voice-assistant__fab-label { font-size: 0.9375rem; letter-spacing: -0.01em; }

@media (max-width: 480px) {
    .w-voice-assistant { --w-voice-size: 62px; }
    .w-voice-assistant__fab { right: 0.875rem; bottom: 0.875rem; }
    .w-voice-assistant__fab-label { display: none; }
    .w-voice-assistant__fab { padding: 0.5rem; }
}

/* ── 팝업 ────────────────────────────────────────────────────────── */

.w-voice-assistant__sheet {
    position: fixed;
    inset: 0;
    z-index: 70;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgb(18 63 56 / 55%);
}

.w-voice-assistant__sheet[hidden] { display: none; }

/* 🔴 세로로 쌓되 **대화 영역만** 늘었다 줄었다 한다. 패널 전체를 스크롤시키면
   매물 10건이 붙는 순간 페이지 번호와 마이크 버튼이 화면 밖으로 밀려나,
   목록을 넘기려면 먼저 스크롤부터 해야 한다(2026-09-12 육안 확인). */
.w-voice-assistant__panel {
    display: flex;
    flex-direction: column;
    width: min(520px, 100%);
    max-height: min(88vh, 720px);
    overflow: hidden;
    padding: 1.5rem 1.5rem 1.25rem;
    border-radius: 22px;
    background: var(--site-bg, #fff);
    box-shadow: 0 24px 60px rgb(18 63 56 / 28%);
}

.w-voice-assistant__head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.w-voice-assistant__eyebrow {
    margin: 0;
    color: var(--site-brand, #11665d);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.w-voice-assistant__close {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: var(--site-bg-soft, #f1f5f2);
    color: var(--site-text, #203a33);
    cursor: pointer;
    font-size: 1rem;
}

/* ── 상태 오브 ───────────────────────────────────────────────────── */

.w-voice-assistant__stage {
    display: grid;
    justify-items: center;
    gap: 0.75rem;
    padding: 1rem 0 0.5rem;
    /* 대화가 길어져도 오브가 찌그러지지 않게 한다(flex 기본은 줄어드는 것이다). */
    flex: 0 0 auto;
}

.w-voice-assistant__orb {
    display: grid;
    place-items: center;
    width: 116px;
    height: 116px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 42%, var(--site-brand-soft, #eaf4ef), #fff 70%);
    box-shadow: 0 0 0 1px var(--site-border, #dbe5df), 0 10px 24px rgb(18 63 56 / 10%);
}

.w-voice-assistant__orb-core {
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--w-voice-brand), var(--w-voice-brand-dark));
    box-shadow: 0 6px 16px rgb(18 63 56 / 30%);
    color: #fff;
    font-size: 1.5rem;
}

.w-voice-assistant__orb[data-state="listening"] .w-voice-assistant__orb-core { animation: w-voice-breathe 1.1s ease-in-out infinite; }
.w-voice-assistant__orb[data-state="thinking"] .w-voice-assistant__orb-core { animation: w-voice-breathe 1.8s ease-in-out infinite; }
.w-voice-assistant__orb[data-state="speaking"] .w-voice-assistant__orb-core { animation: w-voice-breathe 0.8s ease-in-out infinite; }

@keyframes w-voice-breathe {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.09); }
}

.w-voice-assistant__state {
    margin: 0;
    color: var(--site-text, #203a33);
    font-size: 1rem;
    font-weight: 700;
}

/* 받기 전 용량 안내 — 마이크를 누르기 전에 보여 준다. */
.w-voice-assistant__note {
    color: var(--site-muted, #566962);
    font-size: 0.8125rem;
    line-height: 1.45;
    text-align: center;
}
.w-voice-assistant__note[hidden] { display: none; }

/* ── 다운로드 진행률 ─────────────────────────────────────────────── */

.w-voice-assistant__progress { width: 100%; display: grid; gap: 0.375rem; justify-items: center; }
.w-voice-assistant__progress[hidden] { display: none; }

.w-voice-assistant__bar {
    width: min(320px, 100%);
    height: 6px;
    border-radius: 999px;
    background: var(--site-bg-soft, #f1f5f2);
    overflow: hidden;
}

.w-voice-assistant__bar > span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: 999px;
    background: var(--w-voice-brand);
    transition: width 0.2s linear;
}

.w-voice-assistant__progress-text { color: var(--site-muted, #566962); font-size: 0.75rem; }

/* ── 대화 ────────────────────────────────────────────────────────── */

/* 내 말·답변·매물 목록이 함께 스크롤된다 — 남는 높이를 전부 가져간다.
   `min-height: 0` 이 없으면 flex 자식이 줄어들지 않아 스크롤이 생기지 않는다. */
.w-voice-assistant__talk {
    display: grid;
    gap: 0.625rem;
    align-content: start;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    margin: 0.75rem 0;
    padding-right: 0.25rem;
    overscroll-behavior: contain;
}

.w-voice-assistant__said {
    justify-self: end;
    max-width: 85%;
    margin: 0;
    padding: 0.625rem 0.875rem;
    border-radius: 14px 14px 4px 14px;
    background: var(--site-brand-soft, #eaf4ef);
    color: var(--site-text, #203a33);
    font-size: 0.9375rem;
}

.w-voice-assistant__answer {
    justify-self: start;
    max-width: 92%;
    margin: 0;
    padding: 0.75rem 0.875rem;
    border-radius: 14px 14px 14px 4px;
    background: var(--site-bg-soft, #f1f5f2);
    color: var(--site-text, #203a33);
    font-size: 0.9375rem;
    line-height: 1.6;
}

.w-voice-assistant__said[hidden], .w-voice-assistant__answer[hidden] { display: none; }

/* 🔴 매물 목록·페이지 번호 스타일은 여기 없다. 결과는 전체 화면
   (`sites/pages/real_estate/ai.php`)이 `ui/collection` + `real_estate/listing-card` 로
   그린다 — 좁은 팝업에 목록을 다시 그리면 카드 모양이 두 벌이 되어 반드시 어긋난다.
   (2026-09-12 사용자 지시로 팝업 안 목록을 걷어냈다) */

.w-voice-assistant__examples {
    flex: 0 0 auto;
    display: grid;
    gap: 0.25rem;
    padding: 0.75rem;
    border-radius: 12px;
    background: var(--site-accent-soft, #fbf2df);
    color: var(--site-text, #203a33);
    font-size: 0.8125rem;
}

.w-voice-assistant__examples span { font-weight: 700; }
.w-voice-assistant__examples em { font-style: normal; color: var(--site-muted, #566962); }

/* ── 팝업 안의 큰 마이크 ─────────────────────────────────────────── */

.w-voice-assistant__foot { flex: 0 0 auto; display: grid; padding-top: 0.875rem; }

.w-voice-assistant__mic {
    display: grid;
    grid-auto-flow: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 52px;
    padding: 0 1.25rem;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--w-voice-brand), var(--w-voice-brand-dark));
    box-shadow: 0 8px 20px rgb(18 63 56 / 24%);
    color: #fff;
    cursor: pointer;
    font: inherit;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.w-voice-assistant__mic i { font-size: 1.0625rem; }

.w-voice-assistant__mic[disabled] { opacity: 0.55; cursor: default; }
.w-voice-assistant__mic.is-listening { background: linear-gradient(135deg, #b3261e, #7f1d1a); }

@media (prefers-reduced-motion: reduce) {
    .w-voice-assistant__fab-ring,
    .w-voice-assistant__orb-core { animation: none !important; }
}