/* AuthorWings Portal: voice messages (6.26.70). Shared by the portal and the dashboard. */
.awg-vm-rec, .awg-vm { --vm-navy: var(--navy, #1C2439); --vm-sage: var(--sage, #5C7A6B); --vm-red: #C2410C; box-sizing: border-box; }
.awg-vm-rec *, .awg-vm * { box-sizing: border-box; }

/* The mic button in the portal message box (it takes the place of Send while the box is empty). */
.awg-ptl-micbtn { flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--navy, #1C2439); color: #fff; display: grid; place-items: center; cursor: pointer; }
.awg-ptl-micbtn:hover { background: var(--navy-hover, #2A3552); }
.awg-ptl-micbtn[disabled] { opacity: .5; cursor: default; }
/* 6.26.133: hold to record. The mic grows, turns red and pulses while the finger is on it. */
.awg-ptl-micbtn { position: relative; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; transition: transform .15s ease, background-color .15s ease; }
.awg-ptl-micbtn.is-wait { opacity: .7; }
.awg-ptl-micbtn.is-hold, .awg-ptl-micbtn.is-hold:hover { background: #E11D48; transform: scale(1.4); z-index: 3; animation: awg-vm-pulse 1.2s ease-out infinite; }
.awg-vm-lock { display: none; }
.awg-ptl-micbtn.is-hold .awg-vm-lock { position: absolute; left: 50%; bottom: calc(100% + 14px); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 2px; width: 30px; padding: 7px 0; border-radius: 15px; background: #fff; color: #1C2439; box-shadow: 0 4px 14px rgba(28, 36, 57, .2); scale: .72; transition: transform .1s linear; }
.awg-ptl-micbtn.is-hold .awg-vm-lock svg:last-child { animation: awg-vm-up 1.2s ease-in-out infinite; }
@keyframes awg-vm-pulse { 0% { box-shadow: 0 0 0 0 rgba(225, 29, 72, .55); } 100% { box-shadow: 0 0 0 16px rgba(225, 29, 72, 0); } }
@keyframes awg-vm-up { 50% { transform: translateY(-3px); } }
.awg-ptl-micbtn[hidden], .awg-ptl-sendbtn[hidden] { display: none; }
/* While recording, the recording bar takes the place of the message box. */
.awg-ptl-compose__row[hidden], .awg-ptl-compose > [hidden] { display: none !important; }

/* Recording bar. */
.awg-vm-rec { display: flex; align-items: center; gap: 10px; width: 100%; }
.awg-vm-rec[hidden] { display: none; }
.awg-vm-rec__mid { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px; border: 1.5px solid #F1C9B5; border-radius: 24px; background: #FFF7F2; color: var(--vm-navy); font-size: 14px; }
.awg-vm-rec__dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: #E11D48; animation: awg-vm-blink 1.2s ease-in-out infinite; }
.awg-vm-rec__state { flex: none; font-weight: 700; color: var(--vm-red); }
.awg-vm-rec__time { flex: none; font-variant-numeric: tabular-nums; font-weight: 600; }
.awg-vm-rec__max { flex: none; color: #8A93A3; font-variant-numeric: tabular-nums; }
.awg-vm-rec.is-near .awg-vm-rec__time { color: var(--vm-red); }
.awg-vm-rec__lv { flex: 1; min-width: 0; height: 22px; display: flex; align-items: center; justify-content: flex-end; gap: 2px; overflow: hidden; }
.awg-vm-rec__lv i { flex: none; width: 3px; height: 15%; border-radius: 2px; background: var(--vm-red); opacity: .65; transition: height .1s linear; }
.awg-vm-rec__del, .awg-vm-rec__send, .awg-vm-rec__pause { flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; }
.awg-vm-rec__del { background: transparent; color: #B42318; }
.awg-vm-rec__pause { width: 38px; height: 38px; background: #FBEDEB; color: #B42318; }
.awg-vm-rec__pause:hover { background: #F7DCD8; }
.awg-vm-rec__pause[hidden] { display: none; }
/* Paused: the dot and the bars stand still. */
.awg-vm-rec.is-paused .awg-vm-rec__dot { animation: none; opacity: .4; }
.awg-vm-rec.is-paused .awg-vm-rec__state { color: #6B7280; }
.awg-vm-rec.is-paused .awg-vm-rec__lv i { opacity: .3; }
/* While the finger is on the mic: dot, time and "‹ Slide to cancel"; no buttons. */
.awg-vm-rec__slide { display: none; flex: 1; min-width: 0; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #6B7280; font-size: 14px; }
.awg-vm-rec.is-hold .awg-vm-rec__slide { display: block; animation: awg-vm-nudge 1.6s ease-in-out infinite; }
.awg-vm-rec.is-hold .awg-vm-rec__del, .awg-vm-rec.is-hold .awg-vm-rec__send, .awg-vm-rec.is-hold .awg-vm-rec__pause, .awg-vm-rec.is-hold .awg-vm-rec__state, .awg-vm-rec.is-hold .awg-vm-rec__max, .awg-vm-rec.is-hold .awg-vm-rec__lv { display: none; }
.awg-vm-rec.is-hold .awg-vm-rec__mid { border-color: transparent; background: transparent; padding-left: 6px; }
.awg-vm-rec.is-hold .awg-vm-rec__time { font-size: 15px; }
@keyframes awg-vm-nudge { 50% { margin-left: -12px; } }
.awg-vm-rec__del:hover { background: #FBEDEB; }
.awg-vm-rec__send { background: var(--vm-navy); color: #fff; }
.awg-vm-rec__send:hover { background: var(--navy-hover, #2A3552); }
.awg-vm-rec button[disabled] { opacity: .5; cursor: default; }
.awg-vm-rec.is-busy .awg-vm-rec__dot { animation: none; background: #8A93A3; }
.awg-vm-rec.is-busy .awg-vm-rec__lv i { background: #8A93A3; }
@keyframes awg-vm-blink { 50% { opacity: .25; } }
@media (max-width: 480px) {
	.awg-vm-rec__max { display: none; }
	.awg-vm-rec { gap: 6px; }
	.awg-vm-rec__mid { padding: 0 10px; gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
	.awg-vm-rec__dot, .awg-ptl-micbtn.is-hold, .awg-vm-rec.is-hold .awg-vm-rec__slide, .awg-ptl-micbtn.is-hold .awg-vm-lock svg:last-child { animation: none; }
	.awg-vm-rec__lv i { transition: none; }
}
/* 6.26.133: the portal bar sits in the message row, next to the mic. */
.awg-ptl-compose .awg-ptl-compose__row > .awg-vm-rec { flex: 1; min-width: 0; width: auto; margin-top: 0; }
.awg-ptl-field[hidden] { display: none !important; }

/* Player inside a chat bubble. */
.awg-vm { display: flex; align-items: center; gap: 10px; width: 260px; max-width: 100%; white-space: normal; }
.awg-vm__play { flex: none; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: var(--vm-sage); color: #fff; display: grid; place-items: center; cursor: pointer; }
.awg-vm__play:hover { filter: brightness(1.08); }
.awg-vm__play svg { margin-left: 2px; }
.awg-vm.is-playing .awg-vm__play svg { margin-left: 0; }
.awg-vm__mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.awg-vm__track { position: relative; display: block; height: 6px; margin-top: 8px; border-radius: 3px; background: rgba(28, 36, 57, .14); cursor: pointer; outline-offset: 4px; }
.awg-vm__fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 3px; background: var(--vm-sage); }
.awg-vm__knob { position: absolute; top: 50%; left: 0; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--vm-sage); box-shadow: 0 0 0 2px #fff; }
.awg-vm__time { font-size: 12px; line-height: 1; color: #6B7280; font-variant-numeric: tabular-nums; }
.awg-vm__speed { flex: none; min-width: 38px; height: 26px; padding: 0 6px; border: 1px solid rgba(28, 36, 57, .18); border-radius: 13px; background: rgba(255, 255, 255, .7); color: var(--vm-navy); font: 600 12px/1 sans-serif; cursor: pointer; }
.awg-vm__speed:hover { background: #fff; }
.awg-vm.is-bad .awg-vm__time { color: #B42318; }
.awg-vm-dl { display: inline-block; margin-top: 6px; font-size: 12px; color: #6B7280 !important; text-decoration: underline; text-underline-offset: 2px; }

/* Dashboard (WordPress admin). */
.awg-ptl-cbtns .awg-ptl-vmbtn { display: inline-flex; align-items: center; gap: 4px; vertical-align: middle; }
.awg-ptl-cbtns .awg-ptl-vmbtn svg { width: 16px; height: 16px; }
.awg-ptl-compose .awg-vm-rec { margin-top: 8px; }
.awg-ptl-m .awg-vm { margin-top: 2px; }

/* Portal chat bubbles. */
.awg-ptl-b.is-voice { padding: 8px 12px 8px 8px; }
.awg-ptl-b:not(.is-voice) .awg-ptl-maudio { margin-top: 8px; }
.awg-ptl-maudio .awg-vm-dl { display: block; }