/* 프롬프트 입력 상자의 음성 입력 — 마이크 단추와 받는 동안 뜨는 작은 창(js/voice_dictation.js).
   앱(Flutter)과 같은 모양이다. 치수·색을 바꾸면 앱도 같이 바꿀 것.

   마이크 단추의 지름은 JS 가 그 상자의 보내기 단추 높이를 재어 --vd-size 로 준다.
   잉크·hover 색은 그 상자의 보통 단추를 따른다 — 화면은 상자에 아래 세 변수만 덮어 쓴다
   (예: .sg-composer { --vd-ink: var(--sg-muted); }). 받는 동안의 빨강은 여기서만 정한다. */

:root {
    --vd-ink: color-mix(in srgb, var(--text-muted) 88%, var(--text-color));
    --vd-hover-bg: color-mix(in srgb, var(--text-color) 6%, transparent);
    --vd-hover-ink: var(--text-color);
}

.vd-mic {
    --vd-size: 34px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: var(--vd-size);
    height: var(--vd-size);
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    box-shadow: none;
    color: var(--vd-ink);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s ease, color 0.15s ease, transform 0.12s ease;
}

.vd-mic svg {
    flex: 0 0 auto;
    width: clamp(16px, calc(var(--vd-size) * 0.53), 22px);
    height: clamp(16px, calc(var(--vd-size) * 0.53), 22px);
}

.vd-mic:hover:not(:disabled) {
    background: var(--vd-hover-bg);
    color: var(--vd-hover-ink);
}

.vd-mic:active:not(:disabled) {
    transform: scale(0.96);
}

.vd-mic:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

.vd-mic:disabled {
    opacity: 0.42;
    cursor: not-allowed;
}

/* 받는 동안 — 누르면 멈춘다. */
.vd-mic.is-on,
.vd-mic.is-on:hover:not(:disabled) {
    background: rgba(220, 38, 38, 0.12);
    color: #DC2626;
}

[data-theme="dark"] .vd-mic.is-on,
[data-theme="dark"] .vd-mic.is-on:hover:not(:disabled) {
    background: rgba(248, 113, 113, 0.16);
    color: #F87171;
}

/* 양식 화면: 생성 단추가 입력칸에서 멀리 떨어진 넓은 단추라, 마이크를 입력칸 오른쪽 아래 안에 둔다.
   입력칸을 .vd-inset 으로 감싸 두면 JS 가 그 안에 단추를 넣는다. 글이 단추 밑으로 가지 않게 오른쪽을 비운다.
   늘이기 손잡이(오른쪽 아래 끝)와 겹치지 않게 모서리에서 10px 띄운다. */
.vd-inset {
    position: relative;
}

/* 감싼 칸이 입력칸의 자리를 그대로 채운다(전에는 부모 flex 가 입력칸을 늘여 주던 폭). */
.vd-inset > textarea {
    display: block;
    width: 100%;
    box-sizing: border-box;
}

.vd-inset > .vd-mic {
    position: absolute;
    right: 10px;
    bottom: 10px;
}

.vd-inset:has(> .vd-mic) > textarea {
    padding-right: 52px;
}

/* ── 작은 창: 물결 · 경과 시간 · 멈추기 ── 자리는 JS 가 상자 바로 위 오른쪽 끝에 맞춘다. */
.vd-card {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 9000;
    display: flex;
    align-items: center;
    gap: 10px;
    box-sizing: border-box;
    padding: 8px 12px;
    border-radius: 16px;
    border: 1px solid var(--border-color);
    background: var(--surface-color);
    box-shadow: 0 10px 28px -14px rgba(0, 0, 0, 0.28), 0 1px 3px rgba(0, 0, 0, 0.06);
    color: var(--text-color);
    font-family: var(--summet-font-family);
}

.vd-card__wave {
    position: relative;
    flex: 0 0 auto;
    width: 112px;
    height: 28px;
}

.vd-wave {
    display: block;
    width: 112px;
    height: 28px;
    /* 물결 색 — 캔버스가 이 글자색을 읽는다. 앱(SummetUi.accent)과 같은 파랑으로 못 박는다: 페이지 강조색을
       따르면 화면마다(홈 밝은 화면은 청록) 색이 달라진다. */
    color: #0082FF;
}

[data-theme="dark"] .vd-wave {
    color: #4DA3FF;
}

.vd-card.is-connecting .vd-wave {
    visibility: hidden;
}

/* 연결 중에는 물결 대신 점 세 개가 깜박인다. */
.vd-dots {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.vd-card.is-connecting .vd-dots {
    display: flex;
}

.vd-dots i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--primary-color);
    animation: vd-blink 1.2s ease-in-out infinite;
}

.vd-dots i:nth-child(2) {
    animation-delay: 0.2s;
}

.vd-dots i:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes vd-blink {
    0%, 80%, 100% { opacity: 0.25; }
    40% { opacity: 1; }
}

.vd-time {
    flex: 0 0 auto;
    min-width: 2.6em;
    font-size: 13px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    text-align: center;
    color: var(--text-muted);
}

.vd-stop {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 32px;
    height: 32px;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--text-color);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.12s ease, opacity 0.15s ease;
}

.vd-stop:hover {
    opacity: 0.86;
}

.vd-stop:active {
    transform: scale(0.94);
}

.vd-stop:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

.vd-stop__icon {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    background: var(--surface-color);
}

/* 화면에는 안 보이고 읽어 주기만 한다("듣는 중"). */
.vd-live {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* 알림이 없는 화면에서 쓰는 짧은 알림 — 상자 바로 위에 잠깐. */
.vd-notice {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 9000;
    max-width: min(360px, calc((100vw / var(--ui-zoom, 1)) - 32px));
    box-sizing: border-box;
    padding: 9px 14px;
    border-radius: 12px;
    background: var(--text-color);
    color: var(--surface-color);
    font-family: var(--summet-font-family);
    font-size: 13px;
    line-height: 1.45;
    box-shadow: 0 10px 28px -14px rgba(0, 0, 0, 0.4);
}

@media (prefers-reduced-motion: reduce) {
    .vd-dots i {
        animation-duration: 2.4s;
    }

    .vd-mic,
    .vd-stop {
        transition: none;
    }
}