/* Voice memos popup (voice-memos.js). Colours come from the app theme (premium.css --p-*),
   so every theme and light mode work; orange is the button's own tint (icons.css). */
.vm-overlay{position:fixed;inset:0;z-index:1300;display:grid;place-items:center;padding:16px;background:rgba(3,8,20,.62);animation:vm-in .16s ease-out}
@keyframes vm-in{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.vm-overlay{animation:none}}
.vm-card{--vm-tint:#fb923c;width:min(100%,460px);max-height:min(86dvh,720px);display:flex;flex-direction:column;overflow:hidden;
  background:var(--p-panel,var(--panel,#151a22));color:var(--p-text,var(--text,#eee));border:1px solid var(--p-hair-strong,var(--border,#2a3240));
  border-radius:22px;box-shadow:0 24px 70px rgba(0,0,0,.45);font-family:var(--p-font,inherit)}
.vm-head{display:flex;align-items:center;gap:12px;padding:16px 16px 12px}
.vm-head>div{flex:1;min-width:0}
.vm-head h2{margin:0;font-size:18px;font-weight:700}
.vm-head small{display:flex;align-items:center;gap:5px;color:var(--p-muted,var(--muted,#9aa4b2));font-size:12px}
.vm-head small .ico,.vm-head small .ico svg{width:12px;height:12px}
.vm-head-icon{width:40px;height:40px;flex:0 0 40px;border-radius:13px;display:grid;place-items:center;color:var(--vm-tint);background:color-mix(in srgb,var(--vm-tint) 17%,transparent)}
.vm-close{width:38px;height:38px;flex:0 0 38px;border-radius:50%;border:1px solid var(--p-hair-strong,var(--border));background:var(--p-lift,transparent);color:inherit;display:grid;place-items:center;cursor:pointer}

.vm-recorder{display:flex;align-items:center;gap:14px;margin:0 16px 12px;padding:14px;border-radius:18px;background:var(--p-lift,rgba(127,127,127,.08));border:1px solid var(--p-hair,var(--border))}
.vm-rec{width:58px;height:58px;flex:0 0 58px;border-radius:50%;border:0;cursor:pointer;display:grid;place-items:center;color:#fff;background:var(--vm-tint);box-shadow:0 6px 18px color-mix(in srgb,var(--vm-tint) 40%,transparent);transition:transform .15s}
.vm-rec:active{transform:scale(.94)}
.vm-rec .ico,.vm-rec .ico svg{width:24px;height:24px}
.vm-rec.recording{background:#ef4444;animation:vm-pulse 1.2s ease-in-out infinite}
@keyframes vm-pulse{0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,.5)}50%{box-shadow:0 0 0 10px rgba(239,68,68,0)}}
@media (prefers-reduced-motion:reduce){.vm-rec.recording{animation:none}}
.vm-rec-info{display:flex;flex-direction:column;gap:3px;min-width:0}
.vm-rec-info strong{font-size:15px;font-variant-numeric:tabular-nums}
.vm-rec-info small{color:var(--p-muted,var(--muted));font-size:12px}

.vm-draft{margin:0 16px 12px;padding:12px;border-radius:18px;border:1px solid color-mix(in srgb,var(--vm-tint) 45%,transparent);display:flex;flex-direction:column;gap:10px}
.vm-draft[hidden],.vm-share-form[hidden]{display:none}
.vm-draft input,.vm-share-form input{flex:1;min-width:0;height:40px;padding:0 12px;border-radius:12px;border:1px solid var(--p-hair-strong,var(--border));background:var(--p-bg,transparent);color:inherit;font:inherit;font-size:14px}
.vm-draft-actions{display:flex;justify-content:flex-end;gap:8px}
.vm-pill{height:40px;padding:0 18px;border-radius:999px;border:0;background:var(--vm-tint);color:#fff;font-weight:700;font-size:13px;cursor:pointer}
.vm-pill:disabled{opacity:.6;cursor:default}
.vm-text-btn{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px;border-radius:999px;border:1px solid var(--p-hair,var(--border));background:transparent;color:inherit;font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.vm-text-btn .ico,.vm-text-btn .ico svg{width:15px;height:15px}
.vm-text-btn.danger{color:#f87171}

.vm-tabs{display:flex;gap:6px;margin:0 16px;padding:4px;border-radius:999px;background:var(--p-lift,rgba(127,127,127,.08))}
.vm-tabs button{flex:1;height:36px;border:0;border-radius:999px;background:transparent;color:var(--p-muted,var(--muted));font:inherit;font-size:13px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.vm-tabs button[aria-selected="true"]{background:var(--p-panel,var(--panel));color:var(--p-text,var(--text));box-shadow:0 1px 4px rgba(0,0,0,.25)}
.vm-tab-badge{min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:#ef4444;color:#fff;font-size:11px;line-height:18px}
.vm-tab-badge[hidden]{display:none}

.vm-list{flex:1;min-height:120px;overflow-y:auto;padding:12px 16px 18px;display:flex;flex-direction:column;gap:10px;-webkit-overflow-scrolling:touch}
.vm-empty{margin:24px 0;text-align:center;color:var(--p-muted,var(--muted));font-size:14px}
.vm-item{padding:12px;border-radius:16px;background:var(--p-lift,rgba(127,127,127,.06));border:1px solid var(--p-hair,var(--border));display:flex;flex-direction:column;gap:10px}
.vm-item-head{display:flex;flex-direction:column;gap:2px;min-width:0}
.vm-item-head strong{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vm-item-head small{color:var(--p-muted,var(--muted));font-size:12px}
.vm-load{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border-radius:999px;border:0;cursor:pointer;font:inherit;font-size:13px;font-weight:700;color:var(--vm-tint);background:color-mix(in srgb,var(--vm-tint) 15%,transparent)}
.vm-load .ico,.vm-load .ico svg{width:16px;height:16px}
.vm-load:disabled{opacity:.7;cursor:default}
.vm-play-slot .voice-note-player{max-width:100%}
.vm-share-form{display:flex;gap:8px}
.vm-actions{display:flex;gap:8px;flex-wrap:wrap}
.vm-shared-with{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:12px;color:var(--p-muted,var(--muted))}
.vm-chip{display:inline-flex;align-items:center;gap:4px;padding:3px 4px 3px 10px;border-radius:999px;background:color-mix(in srgb,var(--vm-tint) 14%,transparent);color:var(--p-text,var(--text));font-weight:600}
.vm-chip button{width:20px;height:20px;border-radius:50%;border:0;background:rgba(0,0,0,.2);color:inherit;cursor:pointer;line-height:1}
@media (max-width:520px){.vm-overlay{place-items:end center;padding:0}.vm-card{width:100%;max-height:90dvh;border-radius:22px 22px 0 0;padding-bottom:env(safe-area-inset-bottom)}}