/* VYRITY-005P1D — Natural Voice narration controls */
.vyrity-listen-button{
  appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:40px;
  padding:10px 16px;
  border:1px solid var(--zen-line,rgba(37,65,91,.14));
  border-radius:999px;
  background:var(--zen-glass,rgba(255,255,255,.72));
  color:var(--zen-ink,#203247);
  font:inherit;
  font-size:.86rem;
  font-weight:900;
  cursor:pointer;
  box-shadow:var(--zen-shadow-soft,0 12px 34px rgba(41,67,91,.08));
  transition:transform .15s ease,border-color .15s ease,background .15s ease;
}
.vyrity-listen-button:hover{
  transform:translateY(-1px);
  border-color:var(--zen-cyan,#33c4d7);
}
.vyrity-listen-button:focus-visible{
  outline:3px solid color-mix(in srgb,var(--zen-cyan,#33c4d7) 30%,transparent);
  outline-offset:2px;
}
.vyrity-listen-icon{font-size:1rem;line-height:1}

.vyrity-listen-dock{
  position:fixed;
  left:50%;
  bottom:22px;
  z-index:5000;
  width:min(760px,calc(100vw - 28px));
  transform:translate(-50%,18px);
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease,transform .18s ease;
}
.vyrity-listen-dock.is-open{
  opacity:1;
  transform:translate(-50%,0);
  pointer-events:auto;
}
.vyrity-listen-panel{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:14px;
  padding:14px 16px;
  border:1px solid var(--zen-line,rgba(37,65,91,.14));
  border-radius:20px;
  background:color-mix(in srgb,var(--zen-surface-solid,#fff) 92%,transparent);
  color:var(--zen-ink,#203247);
  box-shadow:0 24px 70px rgba(12,31,52,.22);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
.vyrity-listen-main{
  display:flex;
  gap:8px;
  align-items:center;
}
.vyrity-listen-control,
.vyrity-listen-close{
  appearance:none;
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border:1px solid var(--zen-line,rgba(37,65,91,.14));
  border-radius:50%;
  background:var(--zen-glass,rgba(255,255,255,.7));
  color:var(--zen-ink,#203247);
  cursor:pointer;
  font:inherit;
  font-weight:900;
}
.vyrity-listen-control.primary{
  background:var(--zen-gradient,linear-gradient(105deg,#9bf1f3,#c9bcff,#f3b9d8));
  color:var(--zen-button-text,#071b33);
  border-color:transparent;
}
.vyrity-listen-copy{min-width:0}
.vyrity-listen-title{
  display:block;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-weight:900;
  font-size:.9rem;
}
.vyrity-listen-status{
  display:block;
  margin-top:3px;
  color:var(--zen-muted,#66788d);
  font-size:.75rem;
}
.vyrity-listen-disclosure{
  display:block;
  margin-top:2px;
  color:var(--zen-muted-2,#8192a6);
  font-size:.67rem;
}
.vyrity-listen-options{
  display:flex;
  align-items:center;
  gap:8px;
}
.vyrity-listen-speed{
  min-height:36px;
  border:1px solid var(--zen-line,rgba(37,65,91,.14));
  border-radius:999px;
  padding:0 10px;
  background:var(--zen-surface-solid,#fff);
  color:var(--zen-ink,#203247);
  font:inherit;
  font-size:.76rem;
  font-weight:800;
}
.vyrity-listen-progress{
  grid-column:1/-1;
  height:4px;
  overflow:hidden;
  border-radius:999px;
  background:var(--zen-line,rgba(37,65,91,.14));
}
.vyrity-listen-progress>i{
  display:block;
  width:0;
  height:100%;
  background:var(--zen-gradient,linear-gradient(105deg,#9bf1f3,#c9bcff,#f3b9d8));
  transition:width .2s ease;
}
@media(max-width:650px){
  .vyrity-listen-panel{grid-template-columns:auto minmax(0,1fr)}
  .vyrity-listen-options{grid-column:1/-1;justify-content:flex-end}
}
@media(prefers-reduced-motion:reduce){
  .vyrity-listen-dock,.vyrity-listen-button{transition:none}
}


/* Automatic long-form narration placement */
.vyrity-listen-auto-actions{
  display:flex;
  align-items:center;
  gap:10px;
  margin:18px 0 6px;
}

.blog-article-header .vyrity-listen-auto-actions{
  margin-top:22px;
}

.blog-article-header .vyrity-listen-button,
.vyrity-listen-auto-actions .vyrity-listen-button{
  font-family:var(--vyrity-ui-font,"Montserrat",system-ui,sans-serif);
  font-weight:600;
}

.print-controls .vyrity-listen-button{
  margin-right:8px;
}

@media(max-width:650px){
  .vyrity-listen-auto-actions{
    margin-top:14px;
  }
}