/* 113-AE: the live demo's own layer, on top of style.css (which this file never
   edits). Everything here is scoped to #try.

   Dennis, 2026-09-23: "after I'm booking an appointment, I want the section of
   the CRM to glow a little bit with pulses... when I'm hovering my mouse over
   that CRM card or over the card that's New Viewing Booked, I want some sort of
   a feeling of waves inside those cards... with a different contrast color, but
   it won't be so fast... Every detail, when it's updated, also has to be
   pulsing." And a WhatsApp voice note: record, play back, read the transcript.

   Motion budget, same as style.css: transforms and opacity only (no animated
   blur), hover effects only where there is a real hover, and nothing moves
   under prefers-reduced-motion (style.css already stops every animation there;
   the rules at the bottom make the still states explicit). */

/* ── The record: two more rows, and "Next" gets the room it needs ────────── */
#try .crm-live dl>div{position:relative;min-width:0}
#try .crm-live dl>div.wide{grid-column:span 2;border-right:0}
#try .crm-live dd{display:block;overflow-wrap:anywhere}
@media (max-width:640px){
  #try .crm-live dl>div.wide{grid-column:auto}
}

/* A value that changes: the cell pulses twice while the old text slides out
   and the new one slides in. The pulse is a layer, so it never shifts text. */
#try .crm-live dl>div::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(130% 150% at 0% 0%,rgba(32,217,169,.26),rgba(59,123,255,.12) 55%,transparent 82%);
  box-shadow:inset 0 0 0 1px rgba(32,217,169,.5)}
#try .crm-live dl>div.pulse::before{animation:om-cell-pulse 1s var(--ease) 2}
@keyframes om-cell-pulse{0%{opacity:0}30%{opacity:1}100%{opacity:0}}
#try .crm-live dd.swap-out{animation:om-dd-out .2s ease-in forwards}
#try .crm-live dd.swap-in{animation:om-dd-in .5s var(--ease)}
@keyframes om-dd-out{to{opacity:0;transform:translate3d(0,-7px,0)}}
@keyframes om-dd-in{0%{opacity:0;transform:translate3d(0,8px,0);color:var(--teal)}60%{opacity:1;transform:none;color:var(--teal)}100%{opacity:1;transform:none}}
html[data-theme="light"] #try .crm-live dl>div::before{
  background:radial-gradient(130% 150% at 0% 0%,rgba(32,217,169,.22),rgba(59,123,255,.10) 55%,transparent 82%);
  box-shadow:inset 0 0 0 1px rgba(11,143,110,.45)}
html[data-theme="light"] #try .crm-live dd.swap-in{animation-name:om-dd-in-light}
@keyframes om-dd-in-light{0%{opacity:0;transform:translate3d(0,8px,0);color:#0B8F6E}60%{opacity:1;transform:none;color:#0B8F6E}100%{opacity:1;transform:none}}

/* A booking landed or moved: the whole record glows, a few soft pulses. */
#try .crm-live.glow{animation:om-crm-glow 1.4s ease-in-out 3}
@keyframes om-crm-glow{50%{border-color:rgba(32,217,169,.7);
  box-shadow:0 0 0 1px rgba(32,217,169,.55),0 0 36px 4px rgba(32,217,169,.28),0 0 80px 10px rgba(59,123,255,.22)}}
html[data-theme="light"] #try .crm-live.glow{animation-name:om-crm-glow-light}
@keyframes om-crm-glow-light{50%{border-color:rgba(11,143,110,.6);
  box-shadow:0 0 0 1px rgba(11,143,110,.45),0 0 32px 4px rgba(32,217,169,.30),0 0 70px 8px rgba(59,123,255,.18)}}

/* The agent card: a second booking event rings it once. */
#try .agent-alert.ping{animation:om-alert-ping 1.2s var(--ease)}
@keyframes om-alert-ping{40%{border-color:rgba(32,217,169,.8);box-shadow:0 0 0 1px rgba(32,217,169,.5),0 24px 70px -18px rgba(32,217,169,.55)}}

/* ── Waves on hover: slow water inside the two cards ─────────────────────
   Two strips, masked to a sine wave and filled with the ring's own colours,
   drifting in opposite directions at 16 s and 11 s a lap - a feeling, not a
   spinner. The mask carries the shape so the colours stay tokens in both
   themes. Paused (not merely hidden) until hovered, so an unseen card costs
   nothing. */
#try .crm-live,#try .agent-alert{isolation:isolate}
#try .agent-alert{overflow:hidden;overflow:clip}
#try .crm-live>.bar,#try .crm-live>dl,#try .agent-alert>div{position:relative;z-index:1}
#try .waves{position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;overflow:hidden;opacity:0;transition:opacity .9s var(--ease)}
#try .waves i{position:absolute;left:0;bottom:0;width:200%;height:62%;
  background:linear-gradient(90deg,var(--teal),var(--blue) 35%,var(--violet) 65%,var(--teal));
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0 60Q150 18 300 60T600 60T900 60T1200 60V120H0Z'/%3E%3C/svg%3E") repeat-x 0 100%/50% 100%;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0 60Q150 18 300 60T600 60T900 60T1200 60V120H0Z'/%3E%3C/svg%3E") repeat-x 0 100%/50% 100%;
  opacity:.17;animation:om-wave 16s linear infinite paused;will-change:transform}
#try .waves i+i{height:46%;opacity:.13;animation-duration:11s;animation-direction:reverse;
  background:linear-gradient(90deg,var(--violet),var(--btn) 40%,var(--btn-liquid) 70%,var(--violet))}
@keyframes om-wave{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@media (hover:hover){
  #try .crm-live:hover .waves,#try .agent-alert:hover .waves{opacity:1}
  #try .crm-live:hover .waves i,#try .agent-alert:hover .waves i{animation-play-state:running}
}
html[data-theme="light"] #try .waves i{opacity:.16}
html[data-theme="light"] #try .waves i+i{opacity:.12}

/* ── The microphone and the recording bar ──────────────────────────────── */
#try .wa .bar{position:relative}
#try .mic-btn{width:28px;height:28px;flex:none;border:0;padding:0;border-radius:50%;cursor:pointer;display:grid;place-items:center;
  background:#2A3942;color:#d1d7db;transition:background .2s,color .2s;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
#try .mic-btn[hidden]{display:none}
#try .mic-btn::before,#try .rec-cancel::before,#try .rec-send::before{content:"";display:block;background:currentColor}
#try .mic-btn::before{width:13px;height:13px;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 15a3.5 3.5 0 0 0 3.5-3.5v-6a3.5 3.5 0 1 0-7 0v6A3.5 3.5 0 0 0 12 15Zm6.3-3.5a.9.9 0 0 0-1.8 0 4.5 4.5 0 0 1-9 0 .9.9 0 0 0-1.8 0 6.3 6.3 0 0 0 5.4 6.2V20H9.5a.9.9 0 0 0 0 1.8h5a.9.9 0 0 0 0-1.8h-1.6v-2.3a6.3 6.3 0 0 0 5.4-6.2Z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 15a3.5 3.5 0 0 0 3.5-3.5v-6a3.5 3.5 0 1 0-7 0v6A3.5 3.5 0 0 0 12 15Zm6.3-3.5a.9.9 0 0 0-1.8 0 4.5 4.5 0 0 1-9 0 .9.9 0 0 0-1.8 0 6.3 6.3 0 0 0 5.4 6.2V20H9.5a.9.9 0 0 0 0 1.8h5a.9.9 0 0 0 0-1.8h-1.6v-2.3a6.3 6.3 0 0 0 5.4-6.2Z'/%3E%3C/svg%3E") center/contain no-repeat}
@media (hover:hover){#try .mic-btn:hover{background:#00A884;color:#fff}}
#try .mic-btn:focus-visible,#try .rec button:focus-visible,#try .vn-play:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
#try .mic-btn:disabled{opacity:.5;cursor:default}

#try .rec{position:absolute;left:10px;right:10px;top:8px;height:30px;display:flex;align-items:center;gap:8px;background:#1F2C34;z-index:2}
#try .rec[hidden]{display:none}
#try .rec button{border:0;padding:0;cursor:pointer;flex:none;display:grid;place-items:center}
#try .rec-cancel{width:28px;height:28px;border-radius:50%;background:transparent;color:#8696a0;transition:color .2s,background .2s}
#try .rec-cancel::before{width:14px;height:14px;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 3h6l1 2h4v2H4V5h4l1-2Zm-3 6h12l-1 12H7L6 9Z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 3h6l1 2h4v2H4V5h4l1-2Zm-3 6h12l-1 12H7L6 9Z'/%3E%3C/svg%3E") center/contain no-repeat}
@media (hover:hover){#try .rec-cancel:hover{color:#F15C6D;background:rgba(241,92,109,.12)}}
#try .rec-dot{width:8px;height:8px;border-radius:50%;background:#F15C6D;flex:none;animation:om-rec-dot 1.1s ease-in-out infinite}
@keyframes om-rec-dot{50%{opacity:.25}}
#try .rec-time{font:600 .7rem var(--mono);color:#e9edef;min-width:2.6em;flex:none}
#try .rec-level{flex:1;min-width:0;height:22px;display:flex;align-items:center;justify-content:flex-end;gap:2px;overflow:hidden}
#try .rec-level i{flex:none;width:3px;height:calc(var(--h,.15) * 100%);min-height:3px;border-radius:2px;background:#8696a0;transition:height .1s linear}
#try .rec-send{width:28px;height:28px;border-radius:50%;background:#00A884;color:#fff}
#try .rec-send::before{width:12px;height:12px;margin-left:2px;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 20.5 21 12 3 3.5 3 10l12 2-12 2z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 20.5 21 12 3 3.5 3 10l12 2-12 2z'/%3E%3C/svg%3E") center/contain no-repeat}
#try .wa .bar.recording>input,#try .wa .bar.recording>.mic-btn,#try .wa .bar.recording>.send-btn{visibility:hidden}

/* ── The voice note, as WhatsApp draws one ─────────────────────────────── */
#try .msg.voice{white-space:normal;min-width:196px;max-width:86%;padding:7px 8px 5px}
#try .vn{display:flex;align-items:center;gap:7px}
#try .vn-play{width:24px;height:24px;flex:none;border:0;padding:0;background:transparent;color:#aebac1;cursor:pointer;display:grid;place-items:center}
#try .vn-play::before{content:"";width:0;height:0;border-left:11px solid currentColor;border-top:7px solid transparent;border-bottom:7px solid transparent;margin-left:3px}
#try .msg.voice.playing .vn-play::before{width:10px;height:13px;border:0;margin:0;
  background:linear-gradient(90deg,currentColor 0 35%,transparent 35% 65%,currentColor 65%)}
#try .msg.voice[dir="rtl"] .vn-play::before{margin-left:0;margin-right:0}
#try .vn-wave{flex:1;min-width:0;height:26px;display:flex;align-items:center;gap:2px}
#try .vn-wave i{flex:1;min-width:2px;height:calc(var(--h,.3) * 100%);min-height:3px;border-radius:2px;background:#8696a0;transition:background .15s}
#try .vn-wave i.p{background:#53BDEB}
#try .vn-av{position:relative;width:30px;height:30px;flex:none;border-radius:50%;
  background:radial-gradient(circle at 50% 38%,#dfe5e7 0 22%,transparent 23%),radial-gradient(circle at 50% 100%,#dfe5e7 0 42%,transparent 43%),#6b7c85}
#try .vn-av b{position:absolute;left:-3px;bottom:-2px;width:14px;height:14px;border-radius:50%;background:#1F2C34;display:grid;place-items:center}
#try .vn-av b::before{content:"";width:9px;height:9px;background:#00A884;transition:background .4s;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 15a3.5 3.5 0 0 0 3.5-3.5v-6a3.5 3.5 0 1 0-7 0v6A3.5 3.5 0 0 0 12 15Zm6.3-3.5a.9.9 0 0 0-1.8 0 4.5 4.5 0 0 1-9 0 .9.9 0 0 0-1.8 0 6.3 6.3 0 0 0 5.4 6.2V20H9.5a.9.9 0 0 0 0 1.8h5a.9.9 0 0 0 0-1.8h-1.6v-2.3a6.3 6.3 0 0 0 5.4-6.2Z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 15a3.5 3.5 0 0 0 3.5-3.5v-6a3.5 3.5 0 1 0-7 0v6A3.5 3.5 0 0 0 12 15Zm6.3-3.5a.9.9 0 0 0-1.8 0 4.5 4.5 0 0 1-9 0 .9.9 0 0 0-1.8 0 6.3 6.3 0 0 0 5.4 6.2V20H9.5a.9.9 0 0 0 0 1.8h5a.9.9 0 0 0 0-1.8h-1.6v-2.3a6.3 6.3 0 0 0 5.4-6.2Z'/%3E%3C/svg%3E") center/contain no-repeat}
#try .msg.voice[dir="rtl"] .vn-av b{left:auto;right:-3px}
#try .vn-meta{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-inline-start:31px;margin-top:1px;font:500 .55rem var(--mono);color:#8696a0}
#try .vn-meta time{margin:0}
/* Read by a screen reader, not drawn: the recording state (review round 1). */
#try .sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* WhatsApp's own shape for "the app is talking, not the other person". */
#try .sysnote{align-self:center;flex:none;max-width:88%;margin:4px 0;padding:5px 10px;border-radius:8px;background:#182229;color:#FFD279;font-size:.62rem;line-height:1.35;text-align:center}

/* ── Nothing moves when motion was asked to stop ───────────────────────── */
@media (prefers-reduced-motion:reduce){
  #try .waves{display:none}
  #try .crm-live dl>div.changed::before{opacity:1}
  #try .rec-dot{opacity:1}
}

/* ── 113-AK: the guided demo ──────────────────────────────────────────────
   The property card leads with the development's name, highlighted the way
   the chat highlights it (WhatsApp's *bold*, in a warm gold that reads on the
   green bubble), then the unit and area, the facts, and the price. */
#try .msg .hl{font-weight:700;color:#FFE08A}
#try .msg.pcard{max-width:92%}
#try .msg.pcard img{height:118px;min-height:118px}
#try .msg.pcard .cap{display:grid;gap:5px;padding:9px 11px 6px;white-space:normal}
#try .pc-name{display:block;font:800 .92rem/1.2 var(--display);letter-spacing:-.01em;color:#FFE08A;text-align:start}
#try .pc-unit{font-size:.66rem;line-height:1.35;color:#bfe3d8}
#try .pc-facts{font-size:.66rem;line-height:1.5;color:#e9edef;padding:6px 0;border-top:1px solid rgba(255,255,255,.14);border-bottom:1px solid rgba(255,255,255,.14)}
#try .pc-price{font:700 .8rem/1.3 var(--body);color:#fff}
#try .msg.pcard time{justify-self:end}

/* The chip row: a mouse drags it sideways or turns it with the wheel; soft edges
   say there is more to see that way. */
@media (hover:hover) and (pointer:fine){#try .chips{cursor:grab}}
#try .chips.dragging{cursor:grabbing}
#try .chips.dragging .chip{pointer-events:none}
#try .chips.more-end{-webkit-mask-image:linear-gradient(90deg,#000 82%,transparent);mask-image:linear-gradient(90deg,#000 82%,transparent)}
#try .chips.more-start{-webkit-mask-image:linear-gradient(90deg,transparent,#000 18%);mask-image:linear-gradient(90deg,transparent,#000 18%)}
#try .chips.more-start.more-end{-webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}