/* voice-memo-player-v1.css
   Self-contained styles for the Workroom voice-memo player.
   Drop-in: <link rel="stylesheet" href="/voice-memo-player-v1.css">
   Namespaced under .vmemo so it cannot collide with existing styles.
*/
.vmemo{
  display:flex;gap:18px;align-items:center;
  max-width:560px;margin:28px 0;padding:18px 20px;
  background:rgba(12,12,16,.55);
  border:1px solid rgba(200,180,140,.22);
  border-radius:10px;
}
.vmemo__phone{
  flex:0 0 84px;height:118px;border-radius:8px;
  background-size:cover;background-position:center;
  filter:grayscale(.2) contrast(1.05);
}
.vmemo__body{flex:1 1 auto;min-width:0}
.vmemo__label{
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  opacity:.7;margin-bottom:10px;
}
.vmemo__btn{
  display:inline-flex;align-items:center;gap:8px;
  background:transparent;border:1px solid rgba(200,180,140,.5);
  color:inherit;border-radius:999px;padding:7px 16px;
  font:inherit;font-size:13px;cursor:pointer;
  transition:border-color .2s,background .2s;
}
.vmemo__btn:hover{border-color:rgba(200,180,140,.9);background:rgba(200,180,140,.08)}
.vmemo__icon{font-size:11px;line-height:1}
.vmemo__wave{
  position:relative;height:30px;margin:12px 0 6px;
  background-size:contain;background-repeat:no-repeat;background-position:left center;
  opacity:.55;
}
.vmemo__progress{
  position:absolute;top:0;left:0;height:100%;width:0;
  background:rgba(200,180,140,.18);transition:width .15s linear;
}
.vmemo__time{font-size:11px;opacity:.6;letter-spacing:.05em}
@media (max-width:520px){
  .vmemo{flex-direction:row;padding:14px}
  .vmemo__phone{flex-basis:64px;height:90px}
}