/* One rounded surface expands down from the current value. */
.song-select{position:relative;isolation:isolate;min-width:0;width:100%;height:54px}
.song-select.is-open{z-index:12}
.song-select-trigger{scroll-margin-top:100px}
.song-select-trigger{position:relative;z-index:1;display:flex;align-items:center;justify-content:flex-start;width:100%;height:54px;min-height:54px;padding:0 43px 0 18px;border:1px solid transparent;border-radius:27px;background:transparent;color:var(--ink);font:inherit;font-size:15px;font-weight:400;line-height:1.4;text-align:left;cursor:pointer}
.song-select-current{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.song-select-chevron{position:absolute;right:19px;top:50%;width:8px;height:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-70%) rotate(45deg);transition:transform .32s ease;pointer-events:none}
.is-open>.song-select-trigger .song-select-chevron{transform:translateY(-20%) rotate(225deg)}
.song-select-curtain{position:absolute;inset:0 0 auto;max-height:54px;overflow:hidden;border:1px solid rgba(235,245,220,.24);border-radius:27px;background:linear-gradient(145deg,rgba(36,44,31,.97),rgba(19,25,17,.98));box-shadow:0 0 0 #0000;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);transition:max-height .38s cubic-bezier(.22,.7,.25,1),border-color .2s,box-shadow .38s}
.song-select:hover>.song-select-curtain,.song-select:focus-within>.song-select-curtain{border-color:#d9fa7780}
.song-select.is-open>.song-select-curtain{max-height:calc(54px + min(300px,42dvh));box-shadow:0 18px 34px #0006}
.song-select-options{display:grid;gap:3px;max-height:min(300px,42dvh);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#82915f transparent;margin-top:53px;padding:5px 8px 10px;opacity:0;transform:translateY(-8px);pointer-events:none;transition:opacity .2s ease,transform .3s ease}
.is-open>.song-select-curtain>.song-select-options{opacity:1;transform:translateY(0);transition-delay:.05s;pointer-events:auto}
.song-select-option{position:relative;display:flex;align-items:center;min-height:42px;width:100%;padding:10px 28px 10px 10px;border:1px solid transparent;border-radius:19px;background:transparent;color:var(--ink);font:inherit;font-size:14px;font-weight:400;line-height:1.4;text-align:left;cursor:pointer}
.song-select-option:hover,.song-select-option.is-active{background:#d9fa7712;color:var(--lime)}
.song-select-option.is-active{border-color:#d9fa7740}
.song-select-option[aria-selected=true]{color:var(--lime)}
.song-select-option[aria-selected=true]:after{content:'';position:absolute;right:13px;top:50%;width:5px;height:9px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-65%) rotate(45deg)}
.account-empty>.button,.wizard-actions>.button,.wizard-actions>.wizard-back{display:inline-flex;align-items:center;justify-content:center;text-align:center;line-height:1.4;gap:0}
.wizard-actions>.wizard-back{min-width:88px;min-height:52px}
.wizard-actions>#song-next{min-height:52px;max-width:100%}
.generation-actions{display:flex;align-items:center;gap:16px 20px;flex-wrap:wrap;margin:22px 0 16px}
.generation-actions>.button{width:auto;flex:1 1 150px;max-width:100%;justify-content:center;text-align:center;line-height:1.4}
.generation-actions>.text-link{flex:1 1 135px;justify-content:center;text-align:center;line-height:1.6;margin-left:4px}
@media(max-width:520px){.song-select-trigger{font-size:16px}.wizard-actions>.wizard-back{min-width:76px}.wizard-actions>#song-next{font-size:12px;line-height:1.5}.generation-actions{gap:14px 16px}}
@media(prefers-reduced-motion:reduce){.song-select-curtain,.song-select-options,.song-select-chevron{transition:none!important}}

/* Shared song choices for the website and Telegram Mini App. */
.recipient-choices{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 20px;min-width:0}
.recipient-choices .recipient-choice{appearance:none;display:inline-flex;align-items:center;justify-content:center;min-height:44px;max-width:100%;padding:9px 16px;margin:0;border:1px solid rgba(230,244,210,.2);border-radius:999px;background:rgba(255,255,255,.035);color:inherit;font:inherit;font-size:14px;line-height:1.35;cursor:pointer;transition:background .18s,border-color .18s;color:#e8eddf}
.recipient-choices .recipient-choice:hover,.manual-style-toggle:hover{border-color:rgba(202,241,160,.65);background:rgba(202,241,160,.09)}
.recipient-choices .recipient-choice[aria-pressed="true"],.manual-style-toggle[aria-pressed="true"]{background:#c5ed9d;color:#151b10;border-color:#c5ed9d}
.recipient-choice:focus-visible,.manual-style-toggle:focus-visible{outline:2px solid #c5ed9d;outline-offset:3px}
.choice-help{margin:5px 0 16px;font-size:14px;line-height:1.5;color:#adb6a5}
.manual-style-toggle{display:flex;align-items:center;justify-content:center;width:100%;min-height:46px;padding:12px 18px!important;border:1px solid rgba(230,244,210,.22)!important;border-radius:999px!important;margin:0 0 18px!important;font-size:14px!important;line-height:1.4;text-align:center;white-space:normal}
.custom-style-field,.custom-occasion-field{margin:16px 0 22px;min-width:0}
.custom-style-field[hidden],.custom-occasion-field[hidden],.song-select-option[hidden]{display:none!important}
.custom-style-field textarea{width:100%;box-sizing:border-box;resize:vertical;min-height:100px}
.custom-occasion-field input{width:100%;box-sizing:border-box}
@media(max-width:480px){.recipient-choices{gap:7px}.recipient-choices .recipient-choice{padding:9px 13px;font-size:13px}.manual-style-toggle{font-size:13px!important}}

/* Compact optional fields shared by the website and Telegram. */
.narrator-field{margin-bottom:24px}
.custom-mood-field{margin-top:16px;min-width:0}
.custom-mood-field[hidden]{display:none!important}
.custom-mood-field input{width:100%;box-sizing:border-box}
.sound-preview{grid-column:1/-1;min-width:0;margin:18px 0 8px;padding:16px 20px;border:1px solid rgba(197,237,157,.28);border-radius:22px;background:rgba(197,237,157,.045);color:inherit;line-height:1.55;overflow-wrap:anywhere;text-align:left}
.sound-preview[hidden]{display:none!important}
.sound-preview strong{display:block;font-size:15px;font-weight:600;color:#d6edbf}
.sound-preview p{margin:6px 0 0;font-size:13px;color:#adb6a5}
@media(max-width:480px){.sound-preview{padding:14px 16px;margin-top:14px}.sound-preview strong{font-size:14px}}
