/* ============================================================================
   KRANZ Sprach-Concierge — voice widget
   ============================================================================ */
.kv-fab {
    position: fixed; right: clamp(1rem, 2.5vw, 2rem);
    bottom: calc(clamp(1rem, 2.5vw, 2rem) + 64px);
    z-index: 240; display: inline-flex; align-items: center; gap: .6rem;
    padding: .8rem 1.15rem; border-radius: 999px;
    background: var(--noir); color: var(--bone);
    box-shadow: 0 14px 30px -12px rgba(20,20,20,.4); cursor: pointer;
    transition: transform .3s var(--ease), background .3s var(--ease);
}
.kv-fab:hover { transform: translateY(-2px); background: var(--ink); color: var(--bone); }
.kv-fab__txt { font-family: var(--mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; }
body.kc-open .kv-fab, body.kv-open .kv-fab { opacity: 0; visibility: hidden; }
@media (max-width: 520px) { .kv-fab__txt { display: none; } .kv-fab { padding: .85rem; } }

.kv-modal {
    position: fixed; inset: 0; z-index: 300; display: grid; place-items: center;
    background: rgba(14,13,12,.82); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    opacity: 0; visibility: hidden; transition: opacity .4s var(--ease), visibility .4s; padding: var(--gutter);
}
body.kv-open .kv-modal { opacity: 1; visibility: visible; }
.kv-card {
    position: relative; width: min(440px, 100%); background: var(--surface);
    border: 1px solid var(--line); border-radius: var(--r-lg); padding: 2.5rem 2rem 1.8rem;
    text-align: center; box-shadow: var(--shadow-lg); transform: translateY(14px);
    transition: transform .4s var(--ease-out);
}
body.kv-open .kv-card { transform: none; }
.kv-close { position: absolute; top: 1rem; right: 1.1rem; width: 34px; height: 34px; border-radius: 999px;
    color: var(--muted); font-size: 1rem; transition: color .2s, background .2s; }
.kv-close:hover { color: var(--ink); background: var(--surface-2); }

.kv-orb { width: 120px; height: 120px; margin: 0 auto 1.6rem; position: relative; display: grid; place-items: center; }
.kv-orb::after { content: ""; position: absolute; inset: 28px; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, var(--brass-soft), var(--brass-deep)); box-shadow: 0 0 40px -6px var(--brass-glow); }
.kv-orb span { position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--brass); opacity: 0; }
.kv-modal.is-live .kv-orb span { animation: kvpulse 2.4s var(--ease-out) infinite; }
.kv-modal.is-live .kv-orb span:nth-child(2) { animation-delay: .8s; }
.kv-modal.is-live .kv-orb span:nth-child(3) { animation-delay: 1.6s; }
@keyframes kvpulse { 0% { transform: scale(.6); opacity: .6; } 100% { transform: scale(1.2); opacity: 0; } }
.kv-modal.is-speaking .kv-orb::after { animation: kvspeak .5s ease-in-out infinite alternate; }
@keyframes kvspeak { from { transform: scale(1); } to { transform: scale(1.08); } }

.kv-title { font-family: var(--serif); font-size: 1.6rem; font-weight: 500; color: var(--ink); }
.kv-status { font-family: var(--mono); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--brass-deep); margin-top: .5rem; }
.kv-transcript { max-height: 160px; overflow-y: auto; margin: 1.4rem 0; text-align: left; display: flex; flex-direction: column; gap: .5rem; }
.kv-transcript:empty { display: none; }
.kv-line { font-size: .88rem; line-height: 1.45; padding: .55rem .8rem; border-radius: 10px; }
.kv-line.user { background: var(--ink); color: var(--bone); align-self: flex-end; max-width: 85%; }
.kv-line.bot { background: var(--bone); color: var(--text); border: 1px solid var(--line); align-self: flex-start; max-width: 90%; }
.kv-actions { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; margin-top: 1rem; }
.kv-note { font-size: .74rem; color: var(--muted); margin-top: 1.2rem; line-height: 1.5; }
.kv-note a { color: var(--brass-deep); text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
    .kv-fab, .kv-modal, .kv-card { transition: none !important; }
    .kv-orb span, .kv-modal.is-speaking .kv-orb::after { animation: none !important; }
}