/* Homepage note demo: two phones side by side, each a looping walkthrough built
   on the real note viewer (/desktop/note-viewer.js). Hover a phone (tap on
   touch screens) and the walkthrough steps aside for the live sample note. */

.tile-demo { padding-bottom: 76px; }
.vis-demo {
    position: relative; display: flex; justify-content: center; align-items: flex-start;
    gap: clamp(28px, 5vw, 80px); margin: 48px auto 0; padding: 0 22px;
}
.demo-pane {
    --pw: 340px; --navy: #011c94; --mint: #02ff42;
    position: relative; display: flex; flex-direction: column; align-items: center;
}
.demo-label {
    display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px;
    font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: #1d1d1f;
}
.demo-label svg { color: var(--blue); flex: none; }

/* Phone */
.demo-phone { cursor: pointer; transition: transform .5s var(--ease), outline-color .3s var(--ease); outline: 3px solid transparent; outline-offset: 7px; }
.demo-phone .screen { background: #fff; }
.demo-pane.is-live .demo-phone { transform: translateY(-4px); outline-color: rgba(37, 99, 235, .4); }
.demo-screen {
    position: absolute; inset: 0; display: flex; flex-direction: column;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif; color: #000;
}
.demo-status {
    flex: none; display: flex; align-items: center; justify-content: space-between;
    height: 44px; padding: 10px 24px 0; font-size: 14px; font-weight: 600;
}
.demo-status svg { display: block; }
.demo-status-right { display: flex; align-items: center; gap: 5px; }
.demo-stage { position: relative; flex: 1; min-height: 0; transition: opacity .3s var(--ease); }
.demo-screen.swap .demo-stage { opacity: 0; }
.demo-stage .phone-body {
    position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch; padding-bottom: 28px; scrollbar-width: none;
}
.demo-stage .phone-body::-webkit-scrollbar { display: none; }

/* The real note viewer inside the phone */
.demo-note { transition: opacity .5s var(--ease); }
.demo-note .sfv { margin-top: 0; animation: none; }
.demo-note .sfv-bar { height: 22px; }
.demo-note .sfv-title-row { margin-top: 2px; }
.tile .demo-note .sfv-patient {
    font-size: 26px; font-weight: 700; line-height: 1.2; letter-spacing: .01em; color: var(--sfv-navy, #011c94);
}
.demo-note .sfv-refresh { display: none; }
.demo-note .sfv-card { background: rgba(128, 128, 128, .07); }
.demo-note .sfv-info { margin: 12px 16px 0; }
.demo-note .sfv-picker { width: min(300px, calc(100% - 24px)); left: 12px; }
.demo-pane[data-mode="rec"] .demo-note { opacity: 0; }
.demo-pane:not(.is-live) .demo-note { pointer-events: none; }
.demo-note.reveal .sfv-row {
    opacity: 0; animation: demoRow .55s var(--ease) forwards;
    animation-delay: calc(.15s + var(--i, 0) * .14s);
}
.demo-note.reveal .sfv-info, .demo-note.reveal .sfv-actions {
    opacity: 0; animation: demoRow .55s var(--ease) forwards; animation-delay: 1.3s;
}
@keyframes demoRow { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.demo-pane.is-live .demo-note { opacity: 1; pointer-events: auto; }
.demo-pane.is-live .demo-note .sfv-row,
.demo-pane.is-live .demo-note .sfv-info,
.demo-pane.is-live .demo-note .sfv-actions { opacity: 1; animation: none; }

/* Recording layer (left phone): a conceptual copy of the iOS recording screen.
   States on .rec: .picking (procedure sheet up), .picked (procedure chosen),
   .on (recording), .prompt-2 (second prompt bubble), .writing (note in progress). */
.demo-pane[data-pane="record"] .demo-phone { cursor: default; }
.demo-rec {
    --ios-blue: #007aff; --ios-green: #34c759; --ios-red: #ff3b30; --ios-gray: #f2f2f7; --ios-label2: rgba(60, 60, 67, .6);
    position: absolute; inset: 0; overflow: hidden; background: var(--ios-gray); color: #000;
    transition: opacity .45s var(--ease);
}
.demo-pane[data-mode="note"] .demo-rec { opacity: 0; pointer-events: none; }
.rec > * { transition: opacity .35s var(--ease); }

.rec-nav { display: flex; align-items: center; gap: 8px; height: 50px; padding: 6px 12px 0; }
.rec-circ { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #fff; color: #000; box-shadow: 0 1px 4px rgba(0, 0, 0, .06); }
.rec-circ svg { display: block; }
.rec-title { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 0; font-size: 14px; font-weight: 600; white-space: nowrap; }
.rec-title svg { flex: none; }

/* Home state */
.rec-home { position: absolute; inset: 0; }
.rec-assist {
    position: relative; margin: 14px 14px 0; padding: 12px 14px 14px; border-radius: 16px; background: #fff;
}
.rec-assist::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none;
    background: linear-gradient(90deg, var(--navy), var(--mint));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
.rec-assist-head { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; }
.rec-ai { flex: none; display: grid; place-items: center; width: 34px; height: 34px; }
.rec-ai svg { display: block; }
.rec-assist-chev { margin-left: auto; color: #000; }
.rec-assist p { margin: 8px 0 0 42px; font-size: 13px; line-height: 1.4; color: var(--ios-label2); }
/* Returning patient: last visit (tappable, chevron), personal details, opener */
.rec-assist-rows { display: flex; flex-direction: column; gap: 9px; margin: 10px 2px 0 4px; }
.rec-assist-row { display: flex; align-items: center; gap: 10px; font-size: 13px; line-height: 1.35; color: var(--ios-label2); }
.rec-assist-row > svg { flex: none; color: var(--ios-blue); }
.rec-assist-row > span { flex: 1; min-width: 0; }
.rec-assist-ice { font-weight: 700; }
.rec-ready { margin: 18px 0 0; text-align: center; font-size: 19px; font-weight: 600; letter-spacing: -.01em; }

/* Recording overlay */
.rec-live {
    position: absolute; inset: 0; opacity: 0;
    background: radial-gradient(120% 70% at 50% 100%, #c5dcf7 0%, #d7e8fb 55%, #dbeafc 100%);
}
.rec.on .rec-live, .rec.writing .rec-live { opacity: 1; }
.rec-bubbles { display: flex; flex-direction: column; gap: 10px; padding: 22px 14px 0; }
.rec-bubble {
    margin: 0; padding: 16px; border-radius: 14px; background: rgba(0, 122, 255, .2);
    font-size: 14px; line-height: 1.35; font-weight: 700; text-align: center; color: rgba(0, 0, 0, .7);
    opacity: 0; transform: translateY(8px); transition: opacity .4s var(--ease) .25s, transform .4s var(--ease) .25s;
}
.rec.on .rec-bubble:first-child, .rec.prompt-2 .rec-bubble, .rec.writing .rec-bubble { opacity: 1; transform: none; }
.rec.writing .rec-bubble { opacity: .45; }

/* Live insight cards (ClinicalInsightBubbleView / MedicationInsightBubbleView):
   stacked above the record button, newest in front, the ones behind stepping
   back 8px and shrinking 5% per level like the app. --depth is set by JS. */
.rec-insights { position: absolute; left: 14px; right: 14px; bottom: 30%; display: grid; z-index: 4; pointer-events: none; }
.rec-insight {
    --depth: 0; --lift: 0px; --ink: #5a46b8;
    --stack: translateY(calc(var(--depth) * -10px - var(--lift))) scale(calc(1 - var(--depth) * .05));
    grid-area: 1 / 1; align-self: end; padding: 12px 13px 10px; border-radius: 15px; color: #fff;
    background: linear-gradient(135deg, #664dcc, #4d33b3); border: 1px solid rgba(255, 255, 255, .2);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .28);
    opacity: 0; transform: var(--stack) scale(.85);
    transform-origin: 50% 0; z-index: calc(10 - var(--depth));
    transition: opacity .35s var(--ease), transform .45s cubic-bezier(.22, 1, .36, 1);
}
.rec-insight.medication { --ink: #2f8f78; background: linear-gradient(135deg, #339980, #268066); }
.rec-insight.show { opacity: calc(1 - var(--depth) * .15); transform: var(--stack); }
.rec-insight.gone { opacity: 0; transform: translateX(60%) scale(.9); transition-duration: .4s; }
.rec-insight-head { display: flex; align-items: center; gap: 7px; }
.rec-insight-head svg { flex: none; display: block; }
.rec-insight-head b { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rec-insight-x { color: var(--ink); line-height: 0; }
.rec-insight p { margin: 7px 0 0; font-size: 12px; line-height: 1.38; color: rgba(255, 255, 255, .95); }
.rec-insight small { display: block; margin-top: 6px; font-size: 9px; color: rgba(255, 255, 255, .6); white-space: pre; }
.rec.writing .rec-insights { opacity: 0; }

/* The conversation, floating beside the phone while it records: dark bubbles,
   newest at the bottom, older ones fading up and out. */
.demo-talk {
    position: absolute; bottom: 24%; left: calc(-1 * var(--pw) * .68); width: calc(var(--pw) * .62); z-index: 3;
    display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; gap: 10px; pointer-events: none;
}
.demo-talk.done .talk-bubble { opacity: 0; transform: translateY(-8px) scale(.96); animation: none; }
.talk-bubble {
    position: relative; max-width: 92%; padding: 10px 13px 11px; border-radius: 16px;
    background: #111; color: #f5f5f7; font-size: 13px; line-height: 1.4; font-weight: 500; letter-spacing: -.01em;
    box-shadow: 0 14px 30px -16px rgba(0, 0, 0, .55);
    opacity: 0; transform: translateY(14px) scale(.92); transform-origin: 20% 100%;
    transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.talk-bubble.patient { transform-origin: 80% 100%; }
.talk-bubble.show { opacity: 1; transform: none; animation: talkIn .6s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes talkIn {
    0% { opacity: 0; transform: translateY(16px) scale(.9); }
    55% { opacity: 1; }
    100% { opacity: 1; transform: none; }
}
.talk-bubble.old { opacity: .35; animation: none; }
.talk-bubble.gone { opacity: 0; transform: translateY(-10px) scale(.96); animation: none; }
.talk-bubble b { display: block; margin-bottom: 2px; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }
.talk-bubble.dentist { align-self: flex-start; border-bottom-left-radius: 5px; }
.talk-bubble.patient { align-self: flex-end; border-bottom-right-radius: 5px; background: #1f3a8a; }
.talk-bubble.patient b { color: rgba(255, 255, 255, .6); }

/* Bottom controls tray */
.rec-tray {
    position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; gap: 7px;
    padding: 14px 16px 0; border-radius: 28px 28px 0 0; background: rgba(255, 255, 255, .96);
    box-shadow: 0 -4px 18px rgba(0, 0, 0, .04); transition: background .35s var(--ease), box-shadow .35s var(--ease);
}
.rec.on .rec-tray, .rec.writing .rec-tray { background: transparent; box-shadow: none; }
.rec-pick { position: relative; display: grid; height: 32px; }
.rec-pick > span { grid-area: 1 / 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px; transition: opacity .3s var(--ease); }
.rec-pick-empty {
    padding: 0 14px; border-radius: 999px; border: 1.5px dashed rgba(52, 199, 89, .7);
    color: var(--ios-green); font-size: 13px; font-weight: 600;
}
.rec-pick-empty svg:first-child { width: 16px; height: 16px; }
.rec-pick-empty svg:first-child circle { fill: var(--ios-green); }
.rec-pick-chosen { opacity: 0; }
.rec-pick-chip { padding: 6px 11px; border-radius: 999px; background: var(--ios-blue); color: #fff; font-size: 13px; font-weight: 600; }
.rec.picked .rec-pick-empty { opacity: 0; }
.rec.picked .rec-pick-chosen { opacity: 1; }
.rec-lang { display: inline-flex; align-items: center; gap: 8px; }
.rec-lang i { width: 11px; height: 11px; border-radius: 50%; background: var(--ios-green); }
.rec-lang-pill {
    display: inline-flex; align-items: center; gap: 4px; padding: 7px 14px; border-radius: 999px;
    background: rgba(52, 199, 89, .14); color: #1d1d1f; font-size: 14px;
}
.rec-lang b { padding: 2px 6px; border-radius: 4px; background: rgba(0, 122, 255, .12); color: var(--ios-blue); font-size: 9px; font-weight: 700; letter-spacing: .03em; }
.rec.on .rec-pick, .rec.on .rec-lang, .rec.on .rec-count, .rec.on .rec-tabs,
.rec.writing .rec-pick, .rec.writing .rec-lang, .rec.writing .rec-count, .rec.writing .rec-tabs { opacity: 0; }
.rec-btn-wrap { position: relative; display: grid; place-items: center; width: 58px; height: 58px; margin-top: 4px; }
.rec-btn {
    position: relative; display: grid; place-items: center; width: 58px; height: 58px;
    border-radius: 50%; border: 3px solid #8e8e93; background: transparent;
    transition: border-color .3s var(--ease), background .3s var(--ease);
}
.rec-btn i { display: block; width: 48px; height: 48px; border-radius: 50%; background: var(--ios-red); transition: width .3s var(--ease), height .3s var(--ease), border-radius .3s var(--ease); }
.rec.on .rec-btn { border-color: rgba(255, 59, 48, .7); background: rgba(255, 255, 255, .6); animation: recPulse 1s ease-in-out infinite alternate; }
.rec.on .rec-btn i { width: 24px; height: 24px; border-radius: 3px; }
.rec.writing .rec-btn { opacity: 0; }
@keyframes recPulse { from { transform: scale(1); } to { transform: scale(1.08); } }
.rec-time {
    position: absolute; left: calc(100% + 12px); top: 50%; transform: translateY(-50%);
    font-size: 11px; font-weight: 500; font-variant-numeric: tabular-nums; color: #000; opacity: 0; transition: opacity .3s var(--ease);
}
.rec.on .rec-time { opacity: 1; }
.rec-count { margin-top: -2px; font-size: 15px; font-weight: 600; }
.rec-tabs {
    display: flex; justify-content: space-between; width: 100%; margin: 4px -4px 12px; padding: 5px;
    border-radius: 999px; background: #fff; box-shadow: 0 2px 14px rgba(0, 0, 0, .08);
}
.rec-tabs span { display: flex; flex-direction: column; align-items: center; gap: 2px; flex: 1; padding: 5px 0 4px; border-radius: 999px; font-size: 9px; font-weight: 500; color: #1d1d1f; }
.rec-tabs span.on { background: rgba(0, 122, 255, .12); color: var(--ios-blue); }
.rec-tabs svg { display: block; }

/* Procedure picker sheet */
.rec-sheet {
    position: absolute; left: 0; right: 0; top: 26px; bottom: 0; display: flex; flex-direction: column;
    border-radius: 18px 18px 0 0; background: var(--ios-gray); box-shadow: 0 -10px 40px rgba(0, 0, 0, .18);
    transform: translateY(104%); transition: transform .45s var(--ease);
}
.rec.picking .rec-sheet { transform: none; }
.rec-sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 14px 10px; background: #fff; border-radius: 18px 18px 0 0; font-size: 14px; }
.rec-sheet-head span { padding: 6px 10px; border-radius: 999px; background: var(--ios-gray); }
.rec-sheet-head b { font-weight: 600; }
.rec-search-wrap { padding: 0 14px 10px; background: #fff; }
.rec-search { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 10px; background: rgba(118, 118, 128, .12); color: var(--ios-label2); font-size: 14px; }
.rec-search svg { color: var(--ios-label2); }
.rec-chosen { display: flex; gap: 6px; min-height: 0; padding: 0 14px; background: #fff; overflow: hidden; max-height: 0; transition: max-height .3s var(--ease), padding .3s var(--ease); }
.rec.picked .rec-chosen { max-height: 40px; padding-bottom: 10px; }
.rec-chosen-chip { display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border-radius: 999px; background: var(--ios-blue); color: #fff; font-size: 13px; font-weight: 500; }
.rec-chosen-chip i { font-style: normal; font-size: 12px; opacity: .85; }
.rec-sheet-label { margin: 14px 16px 6px; font-size: 15px; font-weight: 600; color: #6e6e73; }
.rec-list { flex: 1; min-height: 0; margin: 0 14px; padding: 0 0 0 10px; list-style: none; border-radius: 14px; background: #fff; overflow: hidden; }
.rec-row { display: flex; align-items: center; gap: 10px; height: 42px; padding-right: 12px; font-size: 14px; border-bottom: .5px solid rgba(60, 60, 67, .2); }
.rec-row:last-child { border-bottom: 0; }
.rec-radio { flex: none; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid #c7c7cc; color: transparent; transition: background .2s var(--ease), border-color .2s var(--ease); }
.rec-radio svg { opacity: 0; transition: opacity .2s var(--ease); }
.rec.picked .rec-row.pick .rec-radio { background: var(--ios-blue); border-color: var(--ios-blue); }
.rec.picked .rec-row.pick .rec-radio svg { opacity: 1; }
.rec-star { margin-left: auto; color: #aeaeb2; display: grid; }

/* Writing the note */
.rec-writing {
    position: absolute; left: 16px; right: 16px; bottom: 20px; display: flex; align-items: center; justify-content: center; gap: 10px;
    padding: 12px; border-radius: 14px; background: #111; color: #fff; font-size: 14px; font-weight: 600;
    opacity: 0; transform: translateY(8px); transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.rec.writing .rec-writing { opacity: 1; transform: none; }
.rec-writing i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff; animation: recSpin .8s linear infinite; }
@keyframes recSpin { to { transform: rotate(360deg); } }

/* The walkthrough's finger */
.demo-finger {
    position: absolute; left: 0; top: 0; z-index: 6; width: 30px; height: 30px; margin: -15px 0 0 -15px;
    border-radius: 50%; background: rgba(1, 28, 148, .26);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .9), 0 6px 16px rgba(0, 0, 0, .25);
    opacity: 0; pointer-events: none;
    transition: transform .7s var(--ease), opacity .3s var(--ease);
}
.demo-finger.show { opacity: 1; }
.demo-finger.press { animation: fingerPress .45s var(--ease); }
@keyframes fingerPress { 0% { scale: 1; } 40% { scale: .97; background: rgba(1, 28, 148, .5); } 100% { scale: 1; } }

/* In-phone toast */
.demo-toast {
    position: absolute; left: 16px; right: 16px; bottom: 22px; z-index: 5;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 13px 14px; border-radius: 14px; background: #111; color: #fff;
    font-size: 14px; font-weight: 600; line-height: 1.35; text-align: center;
    box-shadow: 0 16px 40px -18px rgba(0, 0, 0, .6);
    opacity: 0; transform: translateY(8px); pointer-events: none;
    transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.demo-toast.show { opacity: 1; transform: none; }
.demo-toast svg { flex: none; color: var(--green); }

/* Floating chips (same component as the other tiles) */
.demo-pane .float-chip { top: 19%; }
.demo-pane[data-pane="record"] .float-chip { left: calc(-1 * var(--pw) * .6); }
.demo-pane[data-pane="review"] .float-chip { right: calc(-1 * var(--pw) * .5); }
.demo-pane .float-chip.show { animation: chipPop .7s var(--ease) forwards; }
.demo-pane .chip-ic svg { display: block; }
.demo-pane.is-live .float-chip, .demo-pane.is-live .demo-finger, .demo-pane.is-live .demo-toast:not(.live) { opacity: 0; animation: none; }

/* Under the phone */
.demo-hint { margin-top: 20px; min-height: 20px; font-size: 13px; font-weight: 500; letter-spacing: -.01em; color: #6e6e73; transition: color .3s var(--ease); }
.demo-pane.is-live .demo-hint { color: var(--blue); }
.demo-try {
    margin-top: 18px; padding: 8px 16px; border: 0; border-radius: 980px; cursor: pointer;
    background: transparent; box-shadow: inset 0 0 0 1px #1d1d1f; color: #1d1d1f;
    font-size: 14px; font-weight: 500; letter-spacing: -.01em;
}
.demo-pane.is-live .demo-try { background: #1d1d1f; color: #f5f5f7; }

@media (max-width: 1200px) {
    .demo-talk { display: none; }
}
@media (max-width: 1068px) {
    .demo-pane { --pw: 300px; }
    .vis-demo { gap: 28px; }
    .demo-pane .float-chip { display: none; }
    .rec-nav { gap: 6px; }
    .rec-circ { width: 32px; height: 32px; }
    .rec-title { font-size: 13px; }
}
@media (max-width: 734px) {
    .tile-demo { padding-bottom: 56px; }
    .vis-demo { flex-direction: column; align-items: center; gap: 52px; margin-top: 36px; }
    .demo-pane { --pw: 300px; }
}
@media (prefers-reduced-motion: reduce) {
    .demo-finger, .demo-rec { display: none; }
    .demo-pane[data-mode="rec"] .demo-note { opacity: 1; }
}