/* Persistent navigation. Scoped controls do not restyle article media or plugin forms. */
body.voicepa-product-ui { --vp-dock-clearance: calc(76px + env(safe-area-inset-bottom, 0px)); padding-bottom: var(--vp-dock-clearance); }
.vp-ui-icon { display: block; flex: 0 0 auto; width: 24px; height: 24px; overflow: visible; }
body.voicepa-product-ui #mini-player { bottom: var(--vp-dock-clearance); }
#footer-menu.vp-bottom-nav {
    z-index: 30;
    height: auto;
    min-height: 64px;
    padding: 4px max(6px, env(safe-area-inset-right, 0px)) calc(4px + env(safe-area-inset-bottom, 0px)) max(6px, env(safe-area-inset-left, 0px));
    border-top: 1px solid #e9dfe5;
    background: #fff;
    color: #716570;
    box-shadow: 0 -3px 16px #4423380a;
    box-sizing: border-box;
    font-family: inherit;
}
.vp-bottom-nav__inner { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; width: 100%; max-width: 620px; margin-inline: auto; }
#footer-menu .vp-bottom-nav__link,
#footer-menu .menu-center-button {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    width: auto;
    min-width: 0;
    height: 56px;
    padding: 4px 2px;
    margin: 0;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #746371;
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
    text-align: center;
    white-space: nowrap;
    box-sizing: border-box;
    cursor: pointer;
    transition: color .16s, background-color .16s;
    -webkit-tap-highlight-color: transparent;
}
#footer-menu .vp-bottom-nav__link[aria-current="page"] { color: #a22d65; background: #fbedf3; }
#footer-menu .menu-center-button { color: #8f315f; }
.vp-bottom-nav__plus { display: grid; place-items: center; width: 34px; height: 30px; border-radius: 10px; background: linear-gradient(145deg, #b64279, #8f3269); color: #fff; box-shadow: 0 2px 5px #8c315522; }
.vp-bottom-nav__plus .vp-ui-icon { width: 22px; height: 22px; transition: transform .16s; }
#footer-menu [aria-expanded="true"] .vp-bottom-nav__plus .vp-ui-icon { transform: rotate(45deg); }
#footer-menu .unread-count { position: absolute; top: 1px; bottom: auto; left: calc(50% + 7px); right: auto; margin: 0; min-width: 16px; max-width: 38px; padding: 1px 4px; border: 2px solid #fff; border-radius: 20px; background: #bd396d; color: #fff; font-size: 10px; line-height: 14px; overflow: hidden; text-overflow: ellipsis; }
#footer-menu .unread-count:empty { display: none; }
#vp-create-backdrop { position: fixed; inset: 0; z-index: 10030; background: #23122255; backdrop-filter: blur(3px); }
#expanded-menu.vp-create-sheet {
    position: fixed;
    z-index: 10040;
    left: 50%;
    right: auto;
    bottom: calc(var(--vp-dock-clearance, 76px) + 4px);
    width: min(560px, calc(100% - 20px));
    max-height: calc(100vh - var(--vp-dock-clearance, 76px) - 24px);
    max-height: calc(100dvh - var(--vp-dock-clearance, 76px) - 24px);
    margin: 0;
    padding: 16px;
    transform: translateX(-50%);
    overflow: auto;
    overscroll-behavior: contain;
    border: 1px solid #eedfe7;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 16px 54px #32162e40;
    box-sizing: border-box;
    scrollbar-width: thin;
    transition: none;
}
#expanded-menu.vp-create-sheet:not([hidden]) { display: block; animation: vp-create-in .18s ease-out; }
body:has(#expanded-menu.vp-create-sheet:not([hidden])) #footer-menu.vp-bottom-nav { z-index: 10050; }
.vp-create-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 12px; }
.vp-create-eyebrow { margin: 0 0 3px; color: #a33c6b; font-family: inherit; font-size: 10px; font-weight: 700; line-height: 1.4; letter-spacing: .08em; }
.vp-create-heading h2,
.vp-create-dialog h2 { margin: 0; padding: 0; border: 0; background: none; color: #332d39; font-family: inherit; font-size: 19px; font-weight: 700; line-height: 1.5; }
.vp-create-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.vp-create-choice,
.vp-create-option {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    min-height: 76px;
    margin: 0;
    padding: 12px;
    border: 1px solid #eee5ea;
    border-radius: 12px;
    background: #fffafc;
    color: #393240;
    font-family: inherit;
    line-height: 1.5;
    text-align: left;
    text-decoration: none;
    box-sizing: border-box;
    cursor: pointer;
    transition: border-color .16s, background-color .16s;
}
.vp-create-icon { display: grid; place-items: center; flex: 0 0 38px; width: 38px; height: 38px; border-radius: 11px; background: #f5e5ee; color: #a24070; }
.vp-create-copy { flex: 1 1 auto; min-width: 0; }
.vp-create-copy strong { display: block; font-size: 14px; font-weight: 600; line-height: 1.5; }
.vp-create-copy small { display: block; margin-top: 3px; color: #756775; font-size: 11px; font-weight: 400; line-height: 1.6; overflow-wrap: anywhere; }
.vp-create-choice > .vp-ui-icon,
.vp-create-option > .vp-ui-icon { width: 14px; height: 14px; color: #a991a0; }
.vp-create-close,
.vp-create-back { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 40px; min-height: 40px; margin: 0; padding: 8px; border: 1px solid #e9dfe5; border-radius: 10px; background: #fff; color: #766171; font-family: inherit; font-size: 12px; line-height: 1.4; cursor: pointer; }
.vp-create-close .vp-ui-icon { width: 20px; height: 20px; }
.vp-create-back { padding-inline: 10px; border-color: transparent; }
.vp-create-back .vp-ui-icon { width: 16px; height: 16px; }
:is(#popup-overlay, #popup-overlay2, #popup-overlay3, #popup-overlay4, #popup-overlay5, #popup-overlay6).vp-create-overlay[data-vp-create-overlay] { position: fixed; inset: 0; z-index: 10060; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 12px max(12px, env(safe-area-inset-right, 0px)) max(12px, env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px)); background: #23122266; box-sizing: border-box; overflow-y: auto; overscroll-behavior: contain; }
.vp-create-dialog { width: 100%; max-width: 480px; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px - env(safe-area-inset-bottom, 0px)); padding: 16px; border: 1px solid #eedfe7; border-radius: 18px; background: #fff; color: #393240; box-shadow: 0 16px 54px #32162e40; box-sizing: border-box; overflow-y: auto; scrollbar-width: thin; }
.vp-create-dialog__controls { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: -4px -4px 10px; }
.vp-create-lead { margin: 6px 0 14px; color: #756775; font-size: 13px; line-height: 1.7; }
.vp-create-options { display: grid; gap: 8px; }
.vp-create-option { min-height: 78px; }
.vp-create-note { margin: 12px 0 0; padding: 10px 12px; border-radius: 9px; background: #faf4f7; color: #756775; font-size: 12px; line-height: 1.75; }
#vp-create-backdrop[hidden],
#expanded-menu.vp-create-sheet[hidden],
body .vp-create-overlay[data-vp-create-overlay][hidden] { display: none !important; }
@media (hover: hover) {
    #footer-menu .vp-bottom-nav__link:hover,
    #footer-menu .menu-center-button:hover { background: #fbedf3; color: #a22d65; }
    .vp-create-choice:hover,
    .vp-create-option:hover { border-color: #dca8c0; background: #f9eaf1; color: #833657; }
    .vp-create-close:hover,
    .vp-create-back:hover { background: #faf0f5; }
}
@media (min-width: 901px) {
    body.voicepa-product-ui { --vp-dock-clearance: calc(88px + env(safe-area-inset-bottom, 0px)); }
    #footer-menu.vp-bottom-nav { left: 50%; right: auto; bottom: 12px; width: min(620px, calc(100% - 32px)); border: 1px solid #e9dfe5; border-radius: 16px; transform: translateX(-50%); box-shadow: 0 5px 24px #4423381c; }
}
@media (max-width: 480px) {
    #expanded-menu.vp-create-sheet { padding: 12px; border-radius: 16px; }
    .vp-create-grid { gap: 6px; }
    .vp-create-choice { flex-wrap: wrap; gap: 7px; min-height: 108px; padding: 10px; }
    .vp-create-choice .vp-create-icon { width: 30px; height: 30px; flex-basis: 30px; border-radius: 9px; }
    .vp-create-choice .vp-create-icon .vp-ui-icon { width: 21px; height: 21px; }
    .vp-create-choice .vp-create-copy { flex-basis: 100%; }
    .vp-create-choice > .vp-ui-icon { display: none; }
    .vp-create-choice .vp-create-copy strong { font-size: 13px; }
    .vp-create-choice .vp-create-copy small { margin-top: 1px; font-size: 11px; }
    .vp-create-dialog { padding: 14px; }
}
@keyframes vp-create-in { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }
@media (prefers-reduced-motion: reduce) {
    #expanded-menu.vp-create-sheet:not([hidden]) { animation: none; }
    #footer-menu .vp-bottom-nav__link, #footer-menu .menu-center-button, .vp-bottom-nav__plus .vp-ui-icon, .vp-create-choice, .vp-create-option { transition: none; }
}
