/* Sayble live pill — NEW LOOK (2026-10-14). The REAL overlay, interactive, on the call stage.
 * Generated by web-v2-tools/build_live_pill_css.py from the measured values of the shipped 1.2.46 overlay
 * (Night + Violet). Every class is prefixed sy- so the site's own rules can never leak in. Lives inside .ld.
 * Rollback: _site-backups/live-pill-before-newlook-2026-10-14/ */

/* focusing the input inside a scaled overflow:hidden canvas made the browser SCROLL the canvas sideways. clip = not a scroll container. */
.ld:has(.sy){overflow:clip}
.ld-app.is-live{pointer-events:none}
.ld-app.is-live>video,.ld-app.is-live>img{display:none}

.sy{--ic-sparkle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5c.5 3.9 2.2 6 6 6.5-3.8.5-5.5 2.6-6 6.5-.5-3.9-2.2-6-6-6.5 3.8-.5 5.5-2.6 6-6.5z'/%3E%3Cpath d='M18.5 15.5c.2 1.4.8 2.1 2 2.3-1.2.2-1.8.9-2 2.2-.2-1.3-.8-2-2-2.2 1.2-.2 1.8-.9 2-2.3z'/%3E%3C/svg%3E");--ic-chev-up:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6.5 14.5 5.5-5.5 5.5 5.5'/%3E%3C/svg%3E");--ic-chev-down:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6.5 9.5 5.5 5.5 5.5-5.5'/%3E%3C/svg%3E");--ic-plus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4.5v15M4.5 12h15'/%3E%3C/svg%3E");--ic-mic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='3.5' width='6' height='11' rx='3'/%3E%3Cpath d='M5.5 11.5a6.5 6.5 0 0 0 13 0M12 18v2.5'/%3E%3C/svg%3E");--ic-reply:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 14.5 5 10l4.5-4.5'/%3E%3Cpath d='M5 10h9a5 5 0 0 1 5 5v3.5'/%3E%3C/svg%3E");--ic-question:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M9.6 9.6a2.5 2.5 0 0 1 4.8 1c0 1.7-2.4 2.1-2.4 3.4'/%3E%3Cpath d='M12 16.9v.1'/%3E%3C/svg%3E");--ic-refresh:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19.5 12a7.5 7.5 0 1 1-2.2-5.3'/%3E%3Cpath d='M19.5 4.5v4h-4'/%3E%3C/svg%3E");--ic-mail:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5.5' width='17' height='13' rx='2.5'/%3E%3Cpath d='m4.5 7.5 7.5 5.5 7.5-5.5'/%3E%3C/svg%3E");--ic-arrow-up:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5.5M6.5 11 12 5.5 17.5 11'/%3E%3C/svg%3E");--ic-think:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18.5h6M10 21h4'/%3E%3Cpath d='M12 3a6 6 0 0 0-3.5 10.9c.6.5 1 1.2 1 2V16h5v-.1c0-.8.4-1.5 1-2A6 6 0 0 0 12 3z'/%3E%3C/svg%3E");--ic-globe:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M3.5 12h17M12 3.5c2.3 2.4 3.5 5.2 3.5 8.5s-1.2 6.1-3.5 8.5c-2.3-2.4-3.5-5.2-3.5-8.5S9.7 5.9 12 3.5z'/%3E%3C/svg%3E");--ic-bolt:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 3 5 13.5h6.5L11 21l8-10.5h-6.5L13 3z'/%3E%3C/svg%3E");--ic-file:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3.5H7.5a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2h9a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3.5V8h4.5'/%3E%3C/svg%3E");--ic-copy:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8.5' y='8.5' width='11' height='11' rx='2.5'/%3E%3Cpath d='M15.5 8.5V6.5a2 2 0 0 0-2-2h-7a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h2'/%3E%3C/svg%3E");--ic-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5.5 12.5 4 4 9-9'/%3E%3C/svg%3E");--ic-grip:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6h.01M15 6h.01M9 12h.01M15 12h.01M9 18h.01M15 18h.01' stroke-width='2.6'/%3E%3C/svg%3E");--ic-stop:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6.5' y='6.5' width='11' height='11' rx='2'/%3E%3C/svg%3E");
  --accent:#A77BF3;--ink:#140F08;--label:#BB98F6;--text:#F2F0F7;--sub:#9C95AF;--panel:#1A1722;
  --glass:rgba(26,23,34,.88);--hair:rgba(242,240,247,.16);--fill:rgba(242,240,247,.06);--fill2:rgba(242,240,247,.11);
  --glow:rgba(167,123,243,.48);--accent-text:var(--label);--border:var(--hair);--surface:var(--fill);--surface2:var(--fill2);
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Segoe UI Variable Text","Segoe UI",system-ui,sans-serif;
  position:absolute;inset:0;padding:8px;display:flex;flex-direction:column;align-items:center;gap:8px;
  font-family:var(--font);font-size:13px;line-height:1.35;letter-spacing:-.01em;text-align:left;
  color:var(--text);-webkit-font-smoothing:antialiased}
.sy *{box-sizing:border-box;margin:0;padding:0}
.sy [hidden]{display:none!important}
.sy button{font-family:inherit;cursor:pointer;pointer-events:auto;line-height:1.2;letter-spacing:inherit;text-transform:none}
.sy button:focus-visible,.sy input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sy .sy-glass{background:var(--glass);border:.5px solid var(--hair);pointer-events:auto}

/* ---- line icons (the app's own set) ---- */
.sy [data-ic="sparkle"]{--ic:var(--ic-sparkle)}.sy [data-ic="chev-up"]{--ic:var(--ic-chev-up)}.sy [data-ic="chev-down"]{--ic:var(--ic-chev-down)}.sy [data-ic="plus"]{--ic:var(--ic-plus)}.sy [data-ic="mic"]{--ic:var(--ic-mic)}.sy [data-ic="reply"]{--ic:var(--ic-reply)}.sy [data-ic="question"]{--ic:var(--ic-question)}.sy [data-ic="refresh"]{--ic:var(--ic-refresh)}.sy [data-ic="mail"]{--ic:var(--ic-mail)}.sy [data-ic="arrow-up"]{--ic:var(--ic-arrow-up)}.sy [data-ic="think"]{--ic:var(--ic-think)}.sy [data-ic="globe"]{--ic:var(--ic-globe)}.sy [data-ic="bolt"]{--ic:var(--ic-bolt)}.sy [data-ic="file"]{--ic:var(--ic-file)}.sy [data-ic="copy"]{--ic:var(--ic-copy)}.sy [data-ic="check"]{--ic:var(--ic-check)}.sy [data-ic="grip"]{--ic:var(--ic-grip)}.sy [data-ic="stop"]{--ic:var(--ic-stop)}
.sy .sy-i{display:inline-block;flex:none;width:16px;height:16px;background:currentColor;
  -webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat}

/* ---- the Sayble mark ("Ditto") ---- */
.sy .sy-mark{position:relative;display:inline-block;width:28px;height:28px;flex:none;color:var(--accent)}
.sy .sy-mark i{position:absolute;top:27%;width:38%;height:46%;background:currentColor;border-radius:50% 50% 50% 0}
.sy .sy-mark i:first-child{left:9%}
.sy .sy-mark i:last-child{left:55%}

/* ---- compact control pill: 48px, buttons 42px, icons 26px ---- */
.sy .sy-top{display:flex;align-items:center;gap:2px;height:48px;padding:3px;border-radius:24px;flex:none;
  box-shadow:0 1px 2px rgba(0,0,0,.07),0 4px 12px -6px rgba(0,0,0,.28)}
.sy .sy-brand{width:42px;height:42px;display:grid;place-items:center;border-radius:50%;background:transparent;
  color:var(--accent);cursor:grab;touch-action:none;pointer-events:auto}
.sy.dragging .sy-brand{cursor:grabbing}
.ld.is-phone .sy .sy-brand{cursor:default}
.sy .sy-ask{display:flex;align-items:center;gap:7px;height:42px;padding:0 20px 0 16px;border:none;border-radius:21px;
  background:var(--accent);color:var(--ink);font-size:16px;font-weight:700;letter-spacing:-.01em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28);transition:.14s}
.sy .sy-ask:hover{filter:brightness(1.07)}
.sy .sy-ask .sy-spark{display:inline-block;width:17px;height:17px;background:currentColor;font-size:0;
  -webkit-mask:var(--ic-chev-up) center/contain no-repeat;mask:var(--ic-chev-up) center/contain no-repeat}
.sy .sy-ask .sy-spark.is-collapsed{-webkit-mask-image:var(--ic-sparkle);mask-image:var(--ic-sparkle)}
.sy .sy-round,.sy .sy-mic{position:relative;width:42px;height:42px;border-radius:50%;border:none;background:transparent;
  color:var(--sub);font-size:0;display:grid;place-items:center;transition:.14s}
.sy .sy-round .sy-i,.sy .sy-mic .sy-i{width:26px;height:26px}
.sy .sy-round:hover,.sy .sy-mic:hover{background:var(--fill2)}
.sy .sy-round:active{transform:scale(.92)}
.sy .sy-round.flash{background:rgba(167,123,243,.3);color:var(--label)}
.sy .sy-mic.on{background:rgba(167,123,243,.14);color:var(--accent)}
.sy .sy-micdot{position:absolute;top:7px;right:7px;width:8px;height:8px;border-radius:50%;background:var(--sub);
  border:1.5px solid var(--panel);box-sizing:content-box;transition:.2s}
.sy .sy-mic.on .sy-micdot{background:var(--accent);box-shadow:0 0 0 0 var(--glow);animation:sy-pulse 1.6s infinite}
@keyframes sy-pulse{0%{box-shadow:0 0 0 0 var(--glow)}70%{box-shadow:0 0 0 8px transparent}100%{box-shadow:0 0 0 0 transparent}}

/* ---- expanded panel ---- */
.sy .sy-panel{position:relative;width:100%;flex:1 1 auto;min-height:0;display:flex;flex-direction:column;border-radius:20px;
  padding:12px;box-shadow:0 0 0 .5px rgba(0,0,0,.25),0 18px 48px -20px rgba(0,0,0,.6)}
.sy .sy-actions{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:10px;flex:none}
.sy .sy-act{display:flex;align-items:center;justify-content:center;gap:6px;height:36px;padding:0 8px;background:var(--fill);
  border:none;color:var(--text);border-radius:10px;font-size:12.5px;font-weight:500;letter-spacing:-.01em;transition:.14s}
.sy .sy-act .sy-i{width:16px;height:16px;color:var(--sub)}
.sy .sy-act:hover{background:var(--fill2)}
.sy .sy-act.busy{background:rgba(167,123,243,.18);color:var(--label)}
.sy .sy-act.busy .sy-i{color:var(--label)}
.sy .sy-act.hint{box-shadow:inset 0 0 0 1px rgba(167,123,243,.7);animation:sy-hint 1.4s ease-in-out infinite}
@keyframes sy-hint{50%{box-shadow:inset 0 0 0 1px rgba(167,123,243,.7),0 0 0 4px rgba(167,123,243,.16)}}

/* ask field: the round send arrow lives INSIDE the field, faded until there is text */
.sy .sy-inputrow{position:relative;display:block;height:44px;flex:none}
.sy .sy-input{display:block;width:100%;height:44px;background:var(--fill);border:.5px solid var(--hair);border-radius:22px;
  padding:0 50px 0 16px;color:var(--text);font:inherit;font-size:14px;letter-spacing:-.01em;outline:none;pointer-events:auto;
  -webkit-appearance:none;appearance:none;transition:border-color .2s,box-shadow .2s}
.sy .sy-input{text-overflow:ellipsis}
.sy .sy-input::placeholder{color:var(--sub);opacity:1;text-overflow:ellipsis}
.sy .sy-input:focus{border-color:rgba(167,123,243,.7);box-shadow:0 0 0 3px rgba(167,123,243,.14)}
.ld.is-phone .sy .sy-input{font-size:16px}        /* 16px: iOS never zooms the page on focus */
.sy .sy-send{position:absolute;right:6px;top:6px;width:32px;height:32px;display:grid;place-items:center;border:none;border-radius:50%;
  background:var(--accent);color:var(--ink);font-size:0;opacity:.38;transition:opacity .18s,transform .1s}
.sy .sy-send .sy-i{width:18px;height:18px}
.sy .sy-send.ready{opacity:1}
.sy .sy-send.ready:hover{filter:brightness(1.08)}
.sy .sy-send:active{transform:scale(.94)}

.sy .sy-subrow{position:relative;display:flex;align-items:center;gap:5px;margin-top:10px;flex-wrap:wrap;flex:none}
.sy .sy-chip{display:inline-flex;align-items:center;gap:4px;height:28px;padding:0 7px;background:var(--fill);border:none;color:var(--sub);
  border-radius:8px;font-size:11.5px;font-weight:500;letter-spacing:-.01em;transition:.14s}
.sy .sy-chip .sy-i{width:13px;height:13px}
.sy .sy-chip:hover{color:var(--text);background:var(--fill2)}
.sy .sy-chip.on{background:var(--accent);color:var(--ink);font-weight:600;box-shadow:0 4px 12px -6px var(--glow)}
.sy .sy-mode{max-width:190px}
.sy .sy-mode b{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sy .sy-mode .sy-caret{display:inline-block;width:11px;height:11px;opacity:.7;font-size:0}
.sy .sy-mode.open{color:var(--text);background:var(--fill2)}
.sy .sy-menu{position:absolute;z-index:40;left:0;top:calc(100% + 6px);min-width:190px;padding:6px;border-radius:14px;
  background:var(--panel);border:.5px solid var(--hair);box-shadow:0 0 0 .5px rgba(0,0,0,.3),0 18px 40px -12px rgba(0,0,0,.6);
  display:flex;flex-direction:column;gap:2px;pointer-events:auto}
.sy .sy-mhead{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--label);padding:6px 10px 4px}
.sy .sy-mi{display:flex;align-items:center;gap:8px;min-height:34px;background:transparent;border:none;color:var(--text);
  border-radius:9px;padding:0 10px;font-size:13px;font-weight:500;text-align:left;transition:.12s;white-space:nowrap}
.sy .sy-mi:hover{background:var(--fill)}
.sy .sy-mi .sy-check{margin-left:auto;width:14px;height:14px;color:var(--accent)}

/* ---- answers (on top, "answersFirst") + transcript ---- */
.sy .sy-sec{display:flex;flex-direction:column;min-height:0;margin-top:12px;border-top:.5px solid var(--hair);padding-top:10px}
.sy .sy-answer{order:4;flex:2.2 1 0}
.sy .sy-transcript{order:5;flex:1 1 0}
.sy .sy-head{display:flex;align-items:center;gap:8px;margin-bottom:6px;min-height:24px;flex:none}
.sy .sy-head::before{content:"";width:14px;height:14px;flex:none;background:var(--sub);opacity:.5;
  -webkit-mask:var(--ic-grip) center/contain no-repeat;mask:var(--ic-grip) center/contain no-repeat}
.sy .sy-eyebrow{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--label);
  flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sy .sy-status{font-size:11px;color:var(--sub)}
.sy .sy-stop{display:inline-flex;align-items:center;gap:4px;margin-left:auto;background:var(--fill);color:var(--sub);border:none;border-radius:8px;
  padding:3px 9px;font-size:11px;font-weight:600}
.sy .sy-stop .sy-i{width:11px;height:11px}
.sy .sy-stop:hover{color:var(--text)}
.sy .sy-feed,.sy .sy-tfeed{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;pointer-events:auto;
  scrollbar-width:none}
.sy .sy-feed::-webkit-scrollbar,.sy .sy-tfeed::-webkit-scrollbar{display:none}   /* macOS hides scrollbars at rest */
.sy .sy-feed{display:flex;flex-direction:column;gap:8px}
.sy .sy-tfeed{font-size:13px;line-height:1.5}
.sy .sy-tl{margin:3px 0;color:var(--text)}
.sy .sy-tl b{color:var(--label);font-weight:800;font-size:11px;letter-spacing:.06em;margin-right:8px}
.sy .sy-card{flex:none;border:.5px solid rgba(167,123,243,.22);border-radius:14px;padding:12px 14px;background:rgba(167,123,243,.07);font-size:14px;line-height:1.5}
.sy .sy-chead{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--label);margin-bottom:6px}
.sy .sy-clabel{flex:1}
.sy .sy-copy{display:grid;place-items:center;width:24px;height:24px;background:transparent;border:none;color:var(--sub);font-size:0;border-radius:7px}
.sy .sy-copy .sy-i{width:15px;height:15px}
.sy .sy-copy:hover{color:var(--text);background:var(--fill)}
.sy .sy-md{user-select:text;-webkit-user-select:text}
.sy .sy-md p{margin:0 0 8px}
.sy .sy-md p:last-child,.sy .sy-md ul:last-child,.sy .sy-md ol:last-child{margin-bottom:0}
.sy .sy-md ul,.sy .sy-md ol{margin:0 0 8px 18px}
.sy .sy-md li{margin:2px 0}
.sy .sy-md strong{color:var(--text);font-weight:700}
.sy .sy-md em{font-style:normal;font-weight:600;color:var(--text)}
.sy .sy-think{color:var(--sub);font-size:12px}
.sy .sy-cursor{display:inline-block;width:7px;height:15px;background:var(--accent);vertical-align:text-bottom;margin-left:2px;border-radius:2px;animation:sy-blink 1s steps(2) infinite}
@keyframes sy-blink{50%{opacity:0}}

/* ---- the line under the stage that tells people it is clickable ---- */
.ld-try{margin:14px auto 0;max-width:560px;text-align:center;font-size:14px;line-height:1.5;color:var(--v-sub,#6E6455)}
.ld-try b{color:#7B5CC6;font-weight:600}

@media (prefers-reduced-motion:reduce){
  .sy .sy-mic.on .sy-micdot,.sy .sy-act.hint,.sy .sy-cursor{animation:none}
}