/* ─── Voice modal — composant partagé (home + blog) ──────────────────────
   Requires CSS variables --bg, --tx, --dk, --ac, --ff-b, --ff-m from host page.
   Add the class "voice-trigger" to any element to make it open the modal.    */

#vm-dialog {
  border: none; outline: none; padding: 0; margin: auto;
  background: var(--dk); color: var(--bg);
  border-radius: 6px; width: min(460px, 94vw);
  box-shadow: 0 24px 80px rgba(0,0,0,.55);
}
#vm-dialog::backdrop { background: rgba(14,18,16,.75); backdrop-filter: blur(4px); }
.vm-wrap {
  position: relative;
  padding: clamp(36px, 8vw, 52px) clamp(20px, 6vw, 36px) clamp(28px, 6vw, 36px);
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.vm-state { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; }
.vm-h { display: none !important; }
.vm-hint { font-size: 14px; opacity: .72; margin: 0; line-height: 1.55; }
.vm-note { font-family: var(--ff-m); font-size: 10.5px; opacity: .32; margin: 0; letter-spacing: .06em; }
.vm-close { position: absolute; top: 14px; right: 16px; background: none; border: none; color: var(--bg); opacity: .3; cursor: pointer; padding: 4px; transition: opacity .2s; font-size: 20px; line-height: 1; }
.vm-close:hover { opacity: .75; }
.vm-btn-start { display: inline-flex; align-items: center; gap: 10px; padding: 12px 24px; font-size: 14px; font-weight: 500; background: transparent; border: 1.5px solid rgba(248,247,244,.22); color: var(--bg); border-radius: 4px; cursor: pointer; transition: border-color .2s; }
.vm-btn-start:hover { border-color: rgba(248,247,244,.55); }
.vm-session-actions { display: flex; gap: 10px; justify-content: center; margin-top: 4px; }
.vm-btn-end { font-size: 12px; padding: 7px 18px; background: transparent; border: .5px solid rgba(248,247,244,.35); color: var(--bg); border-radius: 4px; cursor: pointer; opacity: .65; transition: opacity .2s; }
.vm-btn-end:hover { opacity: 1; }
.vm-btn-cancel-session { font-size: 12px; padding: 7px 18px; background: transparent; border: none; color: var(--bg); border-radius: 4px; cursor: pointer; opacity: .3; transition: opacity .2s; }
.vm-btn-cancel-session:hover { opacity: .65; }
.vm-label { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; opacity: .45; margin: 0; }
.vm-check { width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid var(--ac); display: flex; align-items: center; justify-content: center; color: var(--ac); }
/* Dots */
.vm-dots { display: flex; gap: 6px; }
.vm-dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--ac); animation: vmb .9s ease-in-out infinite; }
.vm-dots span:nth-child(2) { animation-delay: .15s; }
.vm-dots span:nth-child(3) { animation-delay: .3s; }
@keyframes vmb { 0%,80%,100%{transform:translateY(0);opacity:.4} 40%{transform:translateY(-7px);opacity:1} }
/* Orb listen */
.vm-orb-w { position: relative; width: 56px; height: 56px; }
.vm-orb { position: absolute; inset: 0; border-radius: 50%; background: var(--ac); display: flex; align-items: center; justify-content: center; transition: transform .08s ease-out; }
.vm-ripple { position: absolute; inset: -6px; border-radius: 50%; border: 1.5px solid var(--ac); opacity: .5; animation: vmr 1.8s ease-out infinite; }
.vm-ripple:nth-child(2) { animation-delay: .55s; }
@keyframes vmr { 0%{transform:scale(1);opacity:.6} 100%{transform:scale(1.5);opacity:0} }
/* Bars speak */
.vm-bars { display: flex; gap: 3px; align-items: center; height: 44px; }
.vm-bar { width: 3px; border-radius: 3px; background: var(--ac); animation: vmw linear infinite alternate; }
@keyframes vmw { from{transform:scaleY(.3)} to{transform:scaleY(1)} }
/* Transcript */
.vm-transcript { font-size: 13px; opacity: 0; min-height: 1.5em; max-width: 320px; line-height: 1.55; font-style: italic; transition: opacity .3s; margin: 0; color: var(--bg); }
.vm-transcript.vm-t-vis { opacity: .55; }
.vm-email-wrap { display: flex; flex-direction: column; gap: 5px; width: 100%; max-width: 280px; }
.vm-email-label { font-family: var(--ff-m); font-size: 10.5px; opacity: .45; letter-spacing: .06em; }
.vm-email-input { background: rgba(248,247,244,.07); border: 1px solid rgba(248,247,244,.2); border-radius: 4px; padding: 9px 12px; font-size: 13px; color: var(--bg); width: 100%; box-sizing: border-box; outline: none; transition: border-color .2s; }
.vm-email-input::placeholder { opacity: .35; }
.vm-email-input:focus { border-color: rgba(248,247,244,.5); }
.vm-email-input.vm-input-err { border-color: #e07b5a; }
/* Recap */
.vm-recap-title { font-size: 13px; font-weight: 500; margin: 0; opacity: .7; }
.vm-recap-transcript { width: 100%; max-height: 240px; overflow-y: auto; text-align: left; display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; box-sizing: border-box; background: rgba(248,247,244,.04); border-radius: 4px; border: .5px solid rgba(248,247,244,.1); }
.vm-recap-turn { display: flex; flex-direction: column; gap: 3px; }
.vm-recap-turn-hd { display: flex; align-items: center; justify-content: space-between; }
.vm-recap-role { font-family: var(--ff-m); font-size: 9px; letter-spacing: .09em; text-transform: uppercase; opacity: .35; }
.vm-recap-turn.vm-recap-ai .vm-recap-role { color: var(--ac); opacity: .6; }
.vm-recap-edit { background: none; border: none; color: var(--bg); opacity: 0; cursor: pointer; padding: 2px 3px; border-radius: 2px; line-height: 1; transition: opacity .15s; }
.vm-recap-turn:hover .vm-recap-edit { opacity: .28; }
.vm-recap-edit:hover { opacity: .75 !important; }
.vm-recap-p { margin: 0; font-size: 12.5px; line-height: 1.5; opacity: .82; cursor: pointer; border-radius: 3px; transition: background .15s; outline: none; white-space: pre-wrap; word-break: break-word; }
.vm-recap-p:hover { background: rgba(248,247,244,.05); }
.vm-recap-p[contenteditable="true"] { cursor: text; background: rgba(248,247,244,.08); padding: 3px 6px; margin: -3px -6px; box-shadow: 0 0 0 1px rgba(248,247,244,.2); opacity: 1; }
.vm-recap-email-line { font-family: var(--ff-m); font-size: 10px; opacity: .35; margin: 0; letter-spacing: .04em; }
.vm-btn-confirm { width: 100%; max-width: 240px; padding: 11px 20px; font-size: 13px; font-weight: 500; background: var(--ac); border: none; color: #fff; border-radius: 4px; cursor: pointer; transition: opacity .2s; }
.vm-btn-confirm:hover { opacity: .85; }
.vm-btn-cancel-recap { font-size: 11px; background: transparent; border: none; color: var(--bg); opacity: .28; cursor: pointer; padding: 2px; transition: opacity .2s; }
.vm-btn-cancel-recap:hover { opacity: .65; }

/* Switch voice ↔ form */
.vm-switch {
  margin-top: 6px; background: transparent; border: none;
  color: var(--bg); opacity: .42; font: 11.5px/1.4 var(--ff-b);
  letter-spacing: .02em; cursor: pointer;
  transition: opacity .2s;
}
.vm-switch:hover { opacity: .9; text-decoration: underline; }
.vm-form { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 320px; margin: 12px 0 4px; }
.vm-fi, .vm-fta {
  background: rgba(248,247,244,.06); color: var(--bg);
  border: 1px solid rgba(248,247,244,.15); border-radius: 4px;
  padding: 10px 12px; font: 13px/1.4 var(--ff-b);
  width: 100%; box-sizing: border-box;
}
.vm-fi::placeholder, .vm-fta::placeholder { color: rgba(248,247,244,.35); }
.vm-fi:focus, .vm-fta:focus { outline: none; border-color: rgba(248,247,244,.4); background: rgba(248,247,244,.1); }
.vm-fta { resize: vertical; min-height: 88px; font-family: var(--ff-b); }
.vm-fi.vm-input-err, .vm-fta.vm-input-err { border-color: rgba(220,80,70,.7); }
</content>