.incoming-real-answer{display:grid;place-items:center;width:100%;min-height:112px;--ghost-border:rgba(255,255,255,.46)}
.real-answer-button{position:relative;display:grid;place-items:center;width:68px;height:68px;padding:0;border:0;border-radius:50%;color:#fff;cursor:grab;touch-action:none;transform:translate(var(--answer-x,0),var(--answer-y,0));transition:transform .24s cubic-bezier(.2,.8,.2,1),scale .15s}.real-answer-button.dragging{cursor:grabbing;scale:.92;transition:none}.real-answer-button svg{width:28px;height:28px;fill:currentColor}.real-answer-button.accept{background:#15985d}.real-answer-button.reject{background:#e53935}.real-default{display:flex;justify-content:space-between;align-items:center;width:100%;padding:0 8px}.real-default>div{display:flex;flex-direction:column;align-items:center}
.real-chevrons{display:flex;position:relative;width:44px;height:34px;align-items:center;justify-content:center}.real-chevrons i{position:absolute;width:19px;height:19px;border-color:#aaa;border-style:solid;border-width:2.5px 2.5px 0 0;border-radius:2px;opacity:.2;animation:real-chevron 1.1s linear infinite}.real-chevrons i:nth-child(2){animation-delay:.18s}.real-chevrons i:nth-child(3){animation-delay:.36s}.real-chevrons.up i{transform:rotate(-45deg)}.real-chevrons.down i{transform:rotate(135deg)}.real-chevrons.left i{transform:rotate(-135deg)}.real-chevrons.right i{transform:rotate(45deg)}.inc-arrows-on .real-chevrons.accept i{border-color:#15985d}.inc-arrows-on .real-chevrons.reject i{border-color:#e53935}@keyframes real-chevron{0%{opacity:.1;scale:.65}50%{opacity:.75}100%{opacity:.1;scale:1.05}}
.real-default>div:first-child>.real-chevrons.up,.real-default>div:last-child>.real-chevrons.down{visibility:hidden}
.real-ghost{position:relative;display:flex;align-items:center;justify-content:space-between;width:100%;height:116px}.real-ghost.vertical{height:216px;width:120px;flex-direction:column}.real-answer-button.neutral{background:rgba(255,255,255,.12);border:2px solid var(--ghost-border);color:rgba(255,255,255,.58)}
.real-style-slide_to_answer{gap:9px}.incoming-real-message[hidden]{display:none}.real-slide-actions{display:flex;justify-content:space-evenly;width:100%;color:rgba(255,255,255,.82)}.real-slide-actions>button{display:grid;place-items:center;gap:4px;padding:0;border:0;background:transparent;color:inherit;font:inherit;cursor:pointer}.real-slide-actions svg{width:27px;height:27px;fill:currentColor}.real-slide-actions small{font-size:11px}.real-slide{position:relative;display:grid;place-items:center;width:100%;height:62px;padding:4px;border:1px solid rgba(255,255,255,.2);border-radius:31px;background:rgba(255,255,255,.14);color:rgba(255,255,255,.78);font-size:14px}.real-slide .slide-handle{position:absolute;left:4px;width:54px;height:54px;background:#fff;color:#15985d}
.real-central{position:relative;display:flex;align-items:center;justify-content:space-between;width:100%;height:130px;padding:0 13px}.real-central .neutral{position:absolute;left:50%;margin-left:-36px;width:72px;height:72px}.real-central .neutral:before,.real-central .neutral:after{content:"";position:absolute;inset:-2px;border:1.5px solid #fff;border-radius:50%;animation:real-ring 1.1s ease-out infinite}.real-central .neutral:after{animation-delay:.55s}.real-dots{display:flex;gap:5px}.real-dots i{width:6px;height:6px;border-radius:50%;background:currentColor;animation:real-dot 1.1s ease-in-out infinite}.real-dots i:nth-child(2){animation-delay:.15s}.real-dots i:nth-child(3){animation-delay:.3s}.real-dots.reject{color:#e53935}.real-dots.accept{color:#15985d}@keyframes real-ring{to{scale:1.55;opacity:0}}@keyframes real-dot{50%{opacity:.25;scale:.75}}
.real-color-track{position:relative;display:flex;align-items:center;width:95%;height:70px}.track-end{display:flex;align-items:center;width:50%;height:66px;padding:0 17px;background:rgba(229,57,53,.46)}.track-end.reject{justify-content:flex-start;border-radius:33px 0 0 33px}.track-end.accept{justify-content:flex-end;border-radius:0 33px 33px 0;background:rgba(21,152,93,.46)}.track-end svg{width:18px;height:18px;fill:#fff}.real-color-track .track-handle{position:absolute;left:50%;margin-left:-35px;width:70px;height:70px;border:7px solid #e8eef1;background:#b9c3c9;color:#60717b}.real-color-track .track-handle:after{content:"";position:absolute;inset:-8px;border:3px solid #fff;border-radius:50%;animation:real-ring 1.05s ease-out infinite}.real-diagonal{display:flex;align-items:flex-end;justify-content:space-between;width:100%;height:142px}.real-diagonal .real-answer-button{width:70px;height:70px}.real-diagonal .accept{order:1}.real-diagonal .reject{order:2}
@media(max-height:760px){.incoming-real-answer{min-height:96px}.real-answer-button{width:58px;height:58px}.real-ghost{height:98px}.real-ghost.vertical{height:155px}.real-diagonal{height:108px}.real-central{height:100px}}

/* The light follows the inside edge of the display, as in the Android app. */
.demo-page .incoming-real-phone.inc-edge-flash{outline:0!important;animation:none!important}
.demo-page .incoming-real-phone.inc-edge-flash:before{content:"";position:absolute;z-index:30;inset:3px;border:3px solid var(--edge-color,#42f5c8);border-radius:27px;pointer-events:none;animation:real-edge-light 1.1s ease-in-out infinite}
@keyframes real-edge-light{0%,100%{opacity:.4;box-shadow:inset 0 0 5px var(--edge-color,#42f5c8),0 0 5px var(--edge-color,#42f5c8)}50%{opacity:1;box-shadow:inset 0 0 14px 3px var(--edge-color,#42f5c8),0 0 12px 2px var(--edge-color,#42f5c8)}}
.demo-effects [data-edge-color].is-selected,.inc-text-color-list .inc-color-dot.is-selected,.inc-bg-extra [data-bg-color].is-selected{box-sizing:border-box;border:3px solid #15985d!important;outline:0!important;box-shadow:inset 0 0 0 2px #fff}

/* Demo page theme integration. */
body.demo-page{background:var(--white)}
html[data-theme="dark"] .demo-page .incoming-real{--inc-green:#1fb574;--inc-surface:#171d1a;--inc-text:#e9f1ec;--inc-secondary:#93a69c;--inc-border:#34413b}
html[data-theme="dark"] .demo-page .incoming-real-preview{background:radial-gradient(circle,rgba(31,181,116,.18),rgba(31,181,116,.05) 48%,transparent 72%)}
html[data-theme="dark"] .demo-page .incoming-real-phone{border-color:#3b4741;box-shadow:0 0 0 1px rgba(255,255,255,.12),0 28px 76px rgba(0,0,0,.72)}
html[data-theme="dark"] .demo-page .inc-card,html[data-theme="dark"] .demo-page .inc-radio-list{background:var(--inc-surface);border-color:var(--inc-border)}
html[data-theme="dark"] .demo-page .inc-background-tabs button,html[data-theme="dark"] .demo-page .inc-radio-row,html[data-theme="dark"] .demo-page .inc-reset{border-color:var(--inc-border);color:var(--inc-secondary)}
html[data-theme="dark"] .demo-page .inc-radio-row strong,html[data-theme="dark"] .demo-page .inc-setting-title,html[data-theme="dark"] .demo-page .inc-answer-title{color:var(--inc-text)}
html[data-theme="dark"] .demo-page .inc-switch{background:#425149}
html[data-theme="dark"] .demo-page .inc-switch:checked{background:var(--inc-green)}
html[data-theme="dark"] .demo-page .demo-effects [data-edge-color].is-selected,html[data-theme="dark"] .demo-page .inc-text-color-list .inc-color-dot.is-selected,html[data-theme="dark"] .demo-page .inc-bg-extra [data-bg-color].is-selected{border-color:var(--inc-green)!important;box-shadow:inset 0 0 0 2px #171d1a}
.demo-page .inc-image-tile{padding:0;border:0;background:transparent;font:inherit}
.demo-page .inc-image-tile figure{border-color:transparent;background:transparent}
.demo-page .inc-image-tile.is-selected figure{border-color:var(--inc-green)}

@media(max-width:860px){
  .demo-page .customizer-shell{display:block!important}
  .demo-page .incoming-real{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:0!important}
  .demo-page .incoming-real-preview{grid-column:1!important;grid-row:1!important;width:100%;position:sticky!important;z-index:18;top:68px!important;height:280px;min-height:280px!important;padding:8px;overflow:hidden;border:1px solid var(--line);border-radius:0 0 20px 20px;background:color-mix(in srgb,var(--white) 94%,transparent);backdrop-filter:blur(14px);box-shadow:0 14px 28px rgba(16,35,28,.12)}
  .demo-page .incoming-real-phone{position:absolute!important;top:8px!important;left:50%;width:290px!important;height:auto!important;margin-left:-54px;transform:scale(.37);transform-origin:top left;box-shadow:0 18px 44px rgba(16,35,28,.32)}
  .demo-page .incoming-real-settings{position:relative;z-index:1;padding-top:14px}
  .demo-page .inc-switch-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px}
  .demo-page .inc-switch{flex:0 0 42px;width:42px;min-width:42px;margin:0}
  .demo-page .inc-color-list,.demo-page .inc-text-color-list,.demo-page .inc-image-list{max-width:100%;overflow-x:auto;overflow-y:hidden;touch-action:pan-x;overscroll-behavior-inline:contain;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch}
  .demo-page .inc-color-list::-webkit-scrollbar,.demo-page .inc-text-color-list::-webkit-scrollbar,.demo-page .inc-image-list::-webkit-scrollbar{display:none;width:0;height:0}
  .demo-page .inc-color-dot,.demo-page .inc-image-tile{scroll-snap-align:start}
  html[data-theme="dark"] .demo-page .incoming-real-preview{background:color-mix(in srgb,#0f1411 94%,transparent);box-shadow:0 14px 30px rgba(0,0,0,.5)}
}