#voice-root { --voice-cyan: #7ee5dc; color: #f7f7f2; flex: 1 1 auto; min-height: 0; min-width: 0; overflow-y: auto; overscroll-behavior: contain; overflow-wrap: anywhere; padding: 4px 24px 20px; letter-spacing: 0; }
#voice-root [hidden] { display: none !important; }
#voice-root button, #voice-root summary, #voice-root select { min-height: 44px; }
#voice-root button { touch-action: manipulation; }
#voice-root :focus-visible { outline: 2px solid var(--voice-cyan); outline-offset: 3px; }
.voice-heading { display: flex; justify-content: center; align-items: center; gap: 12px; padding: 8px 0 0; text-align: center; }
.voice-heading p { margin: 0 0 5px; font-size: 11px; color: #ff76bf; }
.voice-heading h2 { font-size: 23px; line-height: 1.35; margin: 0; }
.voice-heading > .icon { width: 38px; height: 38px; }
.voice-demo { color: #b3b3bf; font-size: 11px; line-height: 1.6; margin: 10px 0 12px; }
#voice-status { font-size: 12px; line-height: 1.65; color: var(--voice-cyan); overflow-wrap: anywhere; margin: 12px 0; }
#voice-status:empty { margin: 0; }
#voice-status[data-error="true"] { color: #ff97bd; }
.voice-section-heading { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 8px 0; }
.voice-section-heading h3 { font-size: 14px; margin: 0; }
#voice-root .voice-text-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; color: #d6d6df; background: none; font-size: 12px; padding: 7px 10px; }
.voice-text-button .icon { width: 18px; height: 18px; }
.voice-message { border-bottom: 1px solid #34343b; padding: 14px 0 8px; }
.voice-message:first-child { padding-top: 0; }
.voice-message header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.voice-message header strong { font-size: 13px; line-height: 1.65; overflow-wrap: anywhere; }
.voice-read { flex-shrink: 0; color: #b7ff2a; font-size: 10px; line-height: 2; }
.voice-message-meta { margin: 5px 0 10px; font-size: 10px; line-height: 1.6; color: #b3b3bf; }
.voice-message-text { font-size: 14px; line-height: 1.75; white-space: pre-wrap; overflow-wrap: anywhere; margin: 10px 0; }
#voice-brand-letter { border-bottom: 1px solid #34343b; padding: 14px 0 8px; }
.voice-brand-header { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.voice-brand-header strong { font-size: 13px; line-height: 1.65; }
.voice-brand-header small { color: #b3b3bf; font-size: 10px; line-height: 2; }
#voice-brand-open { display: block; width: 100%; padding: 0; overflow: hidden; text-align: left; color: #f7f7f2; background: #25252c; border: 1px solid #4b4b54; border-radius: 8px; box-shadow: 0 3px 0 #101014; }
#voice-brand-open:active { transform: translateY(1px); box-shadow: 0 2px 0 #101014; }
.voice-brand-card-main { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 12px; padding: 14px 12px; }
.voice-brand-card-copy { min-width: 0; }
.voice-brand-card-copy strong { display: block; font-size: 14px; line-height: 1.5; }
.voice-brand-card-copy small { display: block; font-size: 11px; line-height: 1.7; color: #bdbdc9; margin: 5px 0 12px; }
.voice-brand-card-copy > span { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #ceef9d; }
.voice-brand-card-copy .icon { width: 15px; height: 15px; }
.voice-brand-card-footer { display: flex; align-items: center; gap: 6px; padding: 9px 12px; border-top: 1px solid #42424a; font-size: 10px; line-height: 1.5; color: #c1c1cc; }
.voice-brand-card-footer .icon { width: 14px; height: 14px; }
.voice-brand-card-footer small { margin-left: auto; font-size: 10px; }
.voice-product-art { position: relative; display: block; width: 96px; height: 105px; flex-shrink: 0; color: #182019; }
.voice-product-box { position: absolute; left: 6px; top: 3px; display: flex; flex-direction: column; align-items: center; width: 64px; height: 96px; padding: 8px 3px; border: 1px solid #d8ff9b; background: #c1f677; box-shadow: 7px 4px 0 #71934a, 9px 9px 8px #0003, inset -5px 0 #aedb66; transform: rotate(-7deg); }
.voice-product-box small { font-size: 5px; line-height: 1.5; }
.voice-product-box .icon { width: 23px; height: 23px; margin: 4px 0; filter: brightness(0); }
.voice-product-box b { font-size: 15px; line-height: 1.4; }
.voice-product-box > span { font-size: 5px; margin-top: 2px; }
.voice-product-box em { font-size: 5px; font-style: normal; margin-top: auto; }
.voice-product-sachet { position: absolute; right: 2px; bottom: 0; display: flex; align-items: center; justify-content: center; gap: 4px; flex-direction: column; width: 25px; height: 70px; background: #ffaed4; border-block: 4px double #cc70a1; box-shadow: 3px 3px 4px #0003; transform: rotate(13deg); font-size: 10px; writing-mode: vertical-rl; }
.voice-product-sachet i { width: 8px; height: 8px; border-radius: 50%; background: #202025; }
#voice-brand-shop { position: absolute; inset: 0; z-index: 60; display: flex; align-items: flex-end; padding-top: 56px; background: #08080b80; color: #202025; letter-spacing: 0; }
#voice-brand-shop [hidden] { display: none !important; }
.voice-shop-sheet { display: flex; flex-direction: column; width: 100%; max-height: 100%; min-height: 0; background: #f5f6f2; border-radius: 8px 8px 0 0; overflow: hidden; }
.voice-shop-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-shrink: 0; padding: 8px 16px; border-bottom: 1px solid #d8dcd2; }
.voice-shop-nav > div { display: flex; align-items: center; gap: 7px; min-width: 0; }
.voice-shop-nav h2 { margin: 0; font-size: 15px; line-height: 1.5; }
#voice-brand-shop .icon { width: 19px; height: 19px; filter: brightness(0); flex-shrink: 0; }
#voice-shop-close { display: grid; place-items: center; width: 44px; height: 44px; background: transparent; border-radius: 50%; padding: 0; flex-shrink: 0; }
#voice-brand-shop :focus-visible { outline: 2px solid #486c1d; outline-offset: -3px; }
.voice-shop-scroll { overflow-y: auto; overscroll-behavior: contain; min-height: 0; padding: 0 24px 20px; }
#voice-shop-demo { font-size: 10px; color: #656a61; margin: 14px 0; }
.voice-shop-stage { display: grid; place-items: center; height: 202px; background: #e9ebf0; border-bottom: 3px solid #b7c5ec; }
.voice-shop-stage .voice-product-art { transform: scale(1.65); }
.voice-shop-kicker { font-size: 11px; color: #58603f; margin: 20px 0 6px; }
#voice-shop-product h3 { font-size: 23px; line-height: 1.4; margin: 0; }
.voice-shop-spec { font-size: 12px; color: #656a61; margin: 8px 0; }
.voice-shop-price { display: flex; align-items: baseline; gap: 4px; font-size: 28px; font-weight: 750; margin: 16px 0; font-variant-numeric: tabular-nums; }
.voice-shop-price small { font-size: 15px; }
.voice-shop-price span { margin-left: 6px; font-size: 10px; color: #656a61; font-weight: 400; }
.voice-shop-note { font-size: 11px; line-height: 1.8; color: #656a61; margin: 0; }
.voice-shop-footer { padding: 10px 24px 24px; flex-shrink: 0; border-top: 1px solid #d8dcd2; }
.voice-shop-footer p { font-size: 10px; color: #656a61; text-align: center; margin: 0 0 8px; }
.voice-shop-footer button { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 48px; background: #c1f677; color: #202025; border-radius: 6px; font-size: 14px; font-weight: 750; }
#voice-shop-result { padding: 50px 0; text-align: center; }
.voice-shop-check { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: #c1f677; }
#voice-shop-result h3 { font-size: 20px; line-height: 1.5; margin: 20px 0 10px; }
#voice-shop-result p { font-size: 12px; line-height: 1.8; color: #656a61; }
@media (max-height: 500px) { body.export #voice-brand-shop { padding-top: 20px; } body.export .voice-shop-footer { padding: 8px 20px 14px; } }
#voice-root audio { display: block; width: 100%; min-width: 0; height: 44px; margin: 10px 0; color-scheme: light; }
.voice-message-controls { display: flex; justify-content: flex-end; gap: 6px; }
#voice-root .voice-icon-button { display: grid; place-items: center; width: 44px; height: 44px; padding: 10px; border-radius: 4px; background: #222228; }
.voice-icon-button .icon { width: 20px; height: 20px; }
#voice-empty { font-size: 13px; line-height: 1.8; margin: 30px 0; color: #b3b3bf; }
.voice-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; width: min(100%, 228px); margin: 10px auto 0; padding: 3px; background: #24242a; border-radius: 6px; }
.voice-modes button { display: flex; justify-content: center; align-items: center; gap: 8px; background: transparent; border-radius: 4px; color: #c7c7d0; font-size: 13px; }
.voice-modes button[aria-pressed="true"] { color: #101014; background: var(--voice-cyan); font-weight: 750; }
.voice-modes .icon { width: 18px; height: 18px; }
.voice-modes button[aria-pressed="true"] .icon { filter: brightness(0); }
.voice-device { position: relative; width: 100%; height: 220px; margin: 10px auto 0; }
.voice-device img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 12px 8px #0006); }
#voice-root[data-recording="true"] .voice-device img { animation: voice-device-playing .7s ease-in-out infinite; }
.voice-record-cue { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 32px; margin-top: -2px; }
.voice-record-cue strong { font-size: 14px; line-height: 1.6; }
.voice-record-cue .icon { width: 21px; height: 21px; }
.voice-recorder { display: grid; grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1fr); align-items: center; gap: 12px; max-width: 280px; margin: 0 auto; padding: 9px 0 12px; }
.voice-recorder-tag { font-size: 10px; line-height: 1.6; color: #ff91c8; padding-left: 5px; }
#voice-timer { font-size: 11px; font-variant-numeric: tabular-nums; color: var(--voice-cyan); text-align: right; white-space: nowrap; }
#voice-record { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; border: 2px solid #e1ffa7; background: linear-gradient(#d3ff68, #a4e720); box-shadow: inset 0 2px 1px #ffffff9c, 0 5px 0 #4e7413, 0 7px 20px #b7ff2a3b; }
#voice-record:active { transform: translateY(3px); box-shadow: inset 0 2px 4px #52701455, 0 2px 0 #4e7413; }
#voice-record .icon { width: 32px; height: 32px; filter: brightness(0); }
#voice-record[data-recording="true"] { background: #ff76bf; border-color: #ffcee7; box-shadow: 0 0 0 5px #ff76bf25, 0 0 25px #ff76bf60; animation: voice-recording 1.3s ease-in-out infinite; }
#voice-preview-wrap { border-top: 1px solid #34343b; padding-top: 10px; }
#voice-preview-wrap label, #voice-text-mode label { font-size: 12px; line-height: 1.6; color: var(--voice-cyan); }
#voice-text-mode { margin: 18px 0 8px; }
#voice-text { display: block; width: 100%; min-height: 140px; resize: vertical; margin-top: 9px; padding: 12px; border: 1px solid #65656d; border-radius: 6px; color: #f7f7f2; background: #1c1c21; font: inherit; font-size: 16px; line-height: 1.7; }
#voice-text::placeholder { color: #9999a7; }
#voice-count { display: block; text-align: right; margin-top: 6px; color: #b3b3bf; font-size: 11px; font-variant-numeric: tabular-nums; }
#voice-summary { border-top: 1px dashed #55515d; margin: 24px 0 0; padding: 16px 0 4px; text-align: center; }
#voice-summary-row { margin: 0; font-size: 13px; line-height: 1.6; color: #eeeef3; }
#voice-total { display: inline-block; min-width: 1.5em; font-size: 24px; line-height: 1.2; color: #b7ff2a; font-variant-numeric: tabular-nums; }
#voice-privacy { margin: 7px 0 0; color: #aaaab9; font-size: 11px; line-height: 1.6; }
#voice-summary-error { grid-column: 1 / -1; margin: 8px 0 0; color: #ffb4d5; font-size: 11px; line-height: 1.6; }
#voice-summary-error:empty { display: none; }
#voice-summary-retry { grid-column: 1 / -1; justify-self: center; }
#voice-sent-details, #voice-legacy-draft { margin-top: 20px; border-top: 1px solid #43434b; font-size: 12px; }
#voice-sent-details > summary, #voice-legacy-draft > summary { padding: 14px 0; cursor: pointer; }
#voice-legacy-text { white-space: pre-wrap; line-height: 1.7; }
#voice-legacy-audio { min-height: 44px; }
#voice-sent-status { color: #b3b3bf; line-height: 1.7; }
.voice-sent-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid #34343b; }
.voice-sent-row small { display: block; margin-top: 6px; color: #a9a9b8; font-size: 10px; }
#voice-root[data-tab="inbox"] .voice-heading { text-align: left; justify-content: flex-start; }
#voice-lounge { position: relative; height: 242px; margin: 0 -12px 6px; }
.voice-lounge-scene { position: relative; width: min(100%, 368px); height: 100%; margin: auto; }
.voice-lounge-rocker { position: absolute; left: -2%; bottom: 0; width: 79%; height: 100%; transform-origin: 50% 89%; animation: voice-rock 4.8s ease-in-out infinite; }
.voice-lounge-rocker img, .voice-lounge-rocker canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.voice-lounge-table { position: absolute; right: -3px; bottom: 12px; width: 30%; max-height: 72%; aspect-ratio: 300 / 400; }
.voice-lounge-table > img { display: block; width: 100%; height: 100%; object-fit: contain; }
.voice-coffee-steam { position: absolute; left: 43%; bottom: 95%; display: flex; align-items: flex-end; justify-content: center; gap: 3px; width: 23%; height: 30%; pointer-events: none; }
.voice-coffee-steam i { width: 9px; height: 72%; flex-shrink: 0; border-left: 2px solid #f3efe4; border-radius: 50%; filter: blur(.6px); opacity: .5; animation: voice-steam 3.6s ease-in-out infinite; }
.voice-coffee-steam i:nth-child(2) { height: 100%; animation-delay: -1.2s; }
.voice-coffee-steam i:nth-child(3) { height: 66%; animation-delay: -2.4s; }
.voice-lounge-caption { position: absolute; left: 2px; bottom: 0; display: flex; align-items: center; gap: 3px; color: #aaaab9; font-size: 10px; }
.voice-lounge-caption span { margin-right: 6px; }
.voice-lounge-caption i { display: block; width: 3px; height: 8px; background: #7ee5dc; border-radius: 1px; transform: scaleY(.4); }
#voice-root[data-listening="true"] .voice-lounge-caption i { animation: voice-wave .65s ease-in-out infinite alternate; }
.voice-lounge-caption i:nth-child(3) { animation-delay: -.3s !important; }
.voice-lounge-caption i:nth-child(4) { animation-delay: -.5s !important; }
.voice-lounge-caption i:nth-child(5) { animation-delay: -.1s !important; }
#voice-root[data-tab="inbox"] #voice-summary { text-align: left; margin-top: 12px; padding-top: 12px; }
#voice-root[data-mode="text"] .voice-device { height: 140px; }
#voice-footer[hidden] { display: none; }
#voice-root #voice-agreement { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 12px; line-height: 1.6; cursor: pointer; margin: 6px 0; }
#voice-consent { width: 20px; height: 20px; accent-color: #b7ff2a; flex-shrink: 0; }
#letters-screen .voice-primary { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; width: 100%; padding: 10px; border-radius: 6px; color: #101014; background: #b7ff2a; font-size: 14px; font-weight: 750; }
.voice-primary .icon { width: 20px; height: 20px; filter: brightness(0); }
#voice-root button:disabled, #voice-send:disabled { opacity: .5; cursor: wait; }
#voice-send:focus-visible { outline: 2px solid #7ee5dc; outline-offset: 3px; }
#voice-rules { border-top: 1px solid #34343b; margin-top: 16px; padding-top: 3px; color: #b3b3bf; font-size: 11px; line-height: 1.8; }
#voice-rules summary { padding: 12px 0; cursor: pointer; color: #e2e2e7; }
#voice-rules p { margin: 3px 0 12px; }
#voice-report { padding: 12px 0; border-top: 2px solid #ff76bf; }
#voice-report label { font-size: 13px; }
#voice-report select { display: block; width: 100%; margin: 8px 0; border: 1px solid #55555e; border-radius: 4px; background: #222228; color: #fff; padding: 10px; font: inherit; font-size: 14px; }
#voice-report p { font-size: 11px; line-height: 1.6; color: #b3b3bf; }
.voice-report-actions { display: flex; gap: 12px; }
.voice-report-actions .voice-text-button { flex: 0 0 60px; }
@keyframes voice-recording { 50% { box-shadow: 0 0 0 7px #ff76bf18, 0 0 28px #ff76bf70; } }
@keyframes voice-device-playing { 50% { transform: translateY(-2px) rotate(.4deg); } }
@keyframes voice-rock { 0%, 100% { transform: rotate(-1.8deg) translateX(-2px); } 50% { transform: rotate(1.8deg) translateX(2px); } }
@keyframes voice-steam { 0% { opacity: 0; transform: translate(-2px, 5px) scaleY(.7); } 30% { opacity: .6; } 70% { opacity: .3; } 100% { opacity: 0; transform: translate(4px, -14px) scaleY(1.2); } }
@keyframes voice-wave { to { transform: scaleY(1.3); } }
@media (max-height: 740px) { body.export .voice-device { height: 155px; } body.export #voice-summary { margin-top: 16px; padding-top: 12px; } }
@media (max-height: 740px) { body.export #voice-lounge { height: 182px; } }
@media (max-height: 620px) {
  body.export .voice-device { height: 115px; margin-top: 4px; }
  body.export .voice-heading { padding-top: 0; }
  body.export #voice-lounge { height: 146px; }
  body.export #voice-summary { margin-top: 12px; padding-top: 10px; }
}
@media (max-width: 350px) { .voice-heading h2 { font-size: 21px; } .voice-recorder { gap: 8px; } }
@media (prefers-reduced-motion: reduce) { #voice-root *, #voice-record[data-recording="true"] { animation: none !important; } }
.paused #voice-root *, .document-hidden #voice-root *, #letters-column[hidden] #voice-root * { animation-play-state: paused !important; }