:root{--paper:#f7f8f5;--ink:#192e3b;--muted:#62747c;--teal:#187d73;--sage:#e7f1ec;--line:#e4e9e4;--radius:22px;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input,textarea,select{font:inherit}button{cursor:pointer;color:inherit}button:disabled{cursor:default;opacity:.65}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid #187d73;outline-offset:4px}button{border:0}button,textarea,input,select{-webkit-tap-highlight-color:transparent}svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}[hidden]{display:none!important}.shell{max-width:900px;margin:auto;min-height:100dvh;padding:0 32px;display:flex;flex-direction:column}.header{display:flex;align-items:center;justify-content:space-between;padding:28px 0 34px}.brand{background:none;display:flex;align-items:center;gap:12px;padding:0;text-align:left}.brand strong{display:block;font-size:20px;letter-spacing:-.7px}.brand small{display:block;color:var(--muted);font-size:12px;margin-top:3px}.brand-mark{width:42px;height:42px;background:var(--ink);color:white;border-radius:14px;display:grid;place-items:center;font-size:27px;font-weight:600}.header-right{display:flex;gap:18px;align-items:center}.demo-label{font-size:11px;color:var(--muted);border:1px solid var(--line);border-radius:20px;padding:7px 10px}.icon-button{background:none;display:grid;place-items:center;min-width:44px;min-height:44px}main{flex:1;width:100%;max-width:640px;margin:0 auto;padding:0 0 24px}main:focus{outline:none}h1{font-size:clamp(28px,5vw,38px);font-weight:650;letter-spacing:-1.4px;line-height:1.15;margin:0 0 12px}h2{font-size:21px;letter-spacing:-.5px;margin:0 0 8px}h3{font-size:16px;margin:0}.intro{padding:22px 0 30px}.eyebrow{color:var(--teal);text-transform:uppercase;letter-spacing:1.8px;font-size:10px;font-weight:700;margin:0 0 15px}.subtitle{color:var(--muted);font-size:15px;line-height:1.6;margin:0}.list{display:grid;gap:11px}.row{width:100%;min-height:74px;border-radius:19px;background:white;display:flex;align-items:center;gap:16px;text-align:left;padding:16px 18px;box-shadow:0 3px 15px #192e3b05;border:1px solid #192e3b04;transition:background .16s,transform .16s}.row:hover{background:#f0f5f1;transform:translateY(-1px)}.row .row-icon{width:43px;height:43px;background:#edf5f1;color:var(--teal);display:grid;place-items:center;border-radius:15px}.row .row-copy{flex:1;min-width:0}.row strong{font-size:15px;font-weight:600;display:block;line-height:1.4}.row small{display:block;color:var(--muted);font-size:12px;line-height:1.4;margin-top:4px}.row .arrow{width:17px;height:17px;color:#7e8d91}.row.primary{background:var(--teal);color:white;margin-bottom:18px}.row.primary small{color:#e0f1ed}.row.primary .row-icon{color:white;background:#ffffff20}.row.primary .arrow{color:white}.section-heading{display:flex;align-items:center;gap:10px;margin:4px 0 25px}.back{background:white;border:1px solid var(--line);border-radius:14px;min-width:44px;height:44px;display:grid;place-items:center}.section-heading h1{font-size:28px;margin:0}.section-heading p{margin-top:5px}.card{background:white;border:1px solid var(--line);border-radius:var(--radius);padding:22px;margin-bottom:16px;box-shadow:0 5px 25px #192e3b03}.card p{font-size:14px;line-height:1.7;color:var(--muted)}.tag{display:inline-block;font-size:11px;border-radius:20px;padding:5px 9px;background:var(--sage);color:var(--teal);white-space:nowrap}.tag.pending{background:#f2f1ec;color:#7a7769}.tag.waiting{background:#fff2de;color:#9a6418}.card-top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:18px}.detail{display:grid;gap:0;margin:14px 0}.detail div{display:flex;justify-content:space-between;gap:15px;padding:14px 0;border-bottom:1px solid var(--line);font-size:14px}.detail dt{color:var(--muted)}.detail dd{margin:0;text-align:right}.actions{display:flex;gap:10px;flex-wrap:wrap}.action{min-height:46px;border-radius:12px;padding:12px 18px;background:var(--teal);color:white;font-size:14px;font-weight:600}.action.secondary{background:white;color:var(--ink);border:1px solid #cbd5d3}.action.wide{width:100%}.helper{font-size:12px!important;line-height:1.6;color:var(--muted)}.tabs{display:flex;gap:7px;flex-wrap:wrap;margin:0 0 20px}.tab{background:white;border:1px solid var(--line);border-radius:20px;padding:10px 14px;font-size:12px;min-height:40px}.tab[aria-pressed=true]{background:var(--sage);border-color:#b8d7ca;color:#126960}.field{display:block;font-size:13px;font-weight:600;margin:16px 0 8px}textarea,select{width:100%;background:#fafbf9;border:1px solid #dbe3dd;border-radius:12px;padding:13px;color:var(--ink);line-height:1.7}textarea{min-height:145px;resize:vertical}.art{aspect-ratio:1.4;border-radius:15px;margin:14px 0;overflow:hidden;background:#e5eee5;position:relative}.art svg{width:100%;height:100%;stroke:none}.art-label{position:absolute;bottom:12px;left:14px;color:#fff;font-size:11px;background:#192e3bcc;padding:5px 9px;border-radius:20px}.bubble{background:var(--sage);padding:12px 16px;border-radius:16px 16px 4px 16px;font-size:14px;margin:0 0 22px auto;width:fit-content;max-width:90%}.empty{text-align:center;padding:40px 18px}.empty-icon{display:grid;place-items:center;width:58px;height:58px;border-radius:20px;background:var(--sage);color:var(--teal);margin:0 auto 20px}.notice{position:relative;max-width:640px;width:100%;margin:0 auto 16px;background:#fff3df;border:1px solid #ead8b8;border-radius:15px;padding:13px 16px;font-size:13px;line-height:1.6}.assistant{position:sticky;bottom:76px;margin:0 auto;max-width:640px;width:100%;border-radius:27px;background:linear-gradient(140deg,#e6f1ebf5,#edf6f2f5);border:1px solid #dcebe3;backdrop-filter:blur(16px);padding:14px 22px 12px;box-shadow:0 8px 25px #192e3b06;z-index:4}.assistant-meta{display:flex;justify-content:center;align-items:center;gap:6px;font-size:12px;font-weight:550;min-height:20px}.status-dot{width:5px;height:5px;border-radius:50%;background:var(--teal)}.assistant-controls{position:relative;display:flex;align-items:center;justify-content:center;gap:30px;height:86px}.orb-button{background:none;border-radius:100%;padding:6px;display:grid;place-items:center}.orb{width:69px;height:69px;border-radius:50%;display:block;position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(circle at 30% 25%,#dcfff0 0,#6bd1be 22%,#238f85 50%,#0f615e 85%);box-shadow:inset -5px -8px 14px #034d5c66,inset 3px 5px 12px #ecfff699,0 6px 18px #187d7328;animation:breathe 5s ease-in-out infinite}.orb i{position:absolute;inset:8%;border-radius:36% 64% 60% 40%;background:linear-gradient(125deg,#b7fce088,transparent 60%,#00596799);box-shadow:inset 2px 3px 3px #eafff7aa;transform:rotate(35deg);animation:flow 11s linear infinite}.orb i:nth-child(2){inset:15% -5%;transform:rotate(110deg);animation-direction:reverse;animation-duration:15s}.orb i:nth-child(3){inset:5% 20%;transform:rotate(210deg);animation-duration:9s}.orb b{position:absolute;inset:20%;border-radius:50%;background:radial-gradient(circle at 25% 25%,#beffe188,transparent 65%)}.orb[data-state=listening]{animation-duration:1.7s}.orb[data-state=thinking] i{animation-duration:3s}.orb[data-state=stopped]{filter:grayscale(1);animation:none}.orb[data-state=stopped] i{animation:none}.quiet-control{position:absolute;right:5%;display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;background:#ffffff99;border-radius:14px;color:var(--ink)}#stop{left:5%;right:auto}.dock-hint{font-size:10px;color:var(--muted);text-align:center;margin:0}.command-form{display:flex;gap:8px;margin-top:14px;border-top:1px solid #d4e5dc;padding-top:12px}.command-form input{min-width:0;flex:1;padding:12px;border:1px solid #cdded3;border-radius:12px;background:white;font-size:13px}.command-form button{width:44px;border-radius:12px;background:var(--teal);color:white;display:grid;place-items:center}.bottom-nav{position:sticky;bottom:0;display:grid;grid-template-columns:repeat(3,1fr);background:var(--paper);padding:12px 0 max(12px,env(safe-area-inset-bottom));z-index:5;margin-top:8px;border-top:1px solid var(--line)}.bottom-nav button{background:none;display:flex;align-items:center;flex-direction:column;gap:5px;color:#74858b;font-size:10px;min-height:48px;justify-content:center}.bottom-nav button[aria-current=page]{color:var(--teal);font-weight:650}.bottom-nav svg{width:22px;height:22px}.preview-note{text-align:center;font-size:10px;color:#7d8b8b;margin:9px 0 16px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.spaced{margin-top:24px}.count-note{font-size:12px;color:var(--muted);margin:20px 0}.customer-avatar{width:52px;height:52px;display:grid;place-items:center;border-radius:50%;background:var(--sage);color:var(--teal);font-weight:600}.customer-head{display:flex;align-items:center;gap:15px}.menu-separator{height:1px;background:var(--line);margin:22px 0}.calendar-item{display:flex;gap:16px;align-items:center}.date-box{background:var(--sage);border-radius:14px;padding:12px;color:var(--teal);text-align:center;min-width:54px}.date-box strong{display:block;font-size:20px}.date-box small{font-size:10px}@keyframes breathe{50%{transform:scale(.95);box-shadow:inset -5px -8px 14px #034d5c66,inset 3px 5px 12px #ecfff699,0 7px 20px #187d7345}}@keyframes flow{to{rotate:360deg}}@media(min-width:760px){.shell{padding:0 48px}.header{padding-top:36px}.intro{padding-top:30px}.assistant{bottom:85px}.bottom-nav{max-width:640px;width:100%;margin:8px auto 0}.row{min-height:78px}.preview-note{margin-bottom:15px}}@media(max-width:480px){.shell{padding:0 20px}.header{padding:22px 0 24px}.demo-label{font-size:9px;padding:6px 8px}.header-right{gap:8px}.brand-mark{width:36px;height:36px;font-size:23px;border-radius:12px}.intro{padding-top:20px}.row{padding:14px;gap:13px;min-height:70px}.row strong{font-size:14px}.card{padding:18px}.section-heading h1{font-size:26px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* The content owns its scroll area. The voice control never overlays a card. */
.shell{height:100dvh;min-height:0;overflow:hidden}
.header{flex-shrink:0}
main{min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#c9d8cf transparent;flex:1;padding-bottom:24px}
.notice{flex-shrink:0;margin-top:8px;margin-bottom:8px}
.bottom-bar{flex-shrink:0;width:100%;max-width:640px;margin:0 auto;background:var(--paper);padding-bottom:env(safe-area-inset-bottom)}
.bottom-dock{position:relative;padding-top:8px}
.bottom-bar .bottom-nav{position:relative;bottom:auto;width:100%;height:64px;max-width:none;margin:0;padding:4px 0;display:flex;justify-content:space-between;align-items:end;border:0;background:transparent;pointer-events:none}
.bottom-bar .bottom-nav>button{pointer-events:auto;display:flex;align-items:center;justify-content:center;flex-direction:column;width:48px;height:48px;min-height:48px;padding:0;gap:5px;white-space:nowrap}
.bottom-bar .assistant{position:absolute;left:50%;transform:translateX(-50%);bottom:4px;width:calc(100% - 112px);max-width:240px!important;padding:0 4px;background:transparent;border:0;box-shadow:none;backdrop-filter:none;max-width:none;margin:0;min-width:0;z-index:6}
.bottom-bar .assistant-meta{height:18px;min-height:18px;font-size:11px;gap:5px;line-height:18px;white-space:nowrap;overflow:hidden}
.bottom-bar #orbLabel{overflow:hidden;text-overflow:ellipsis}
.bottom-bar .assistant-controls{height:44px;gap:0}
.bottom-bar .orb-button{width:44px;min-height:44px;padding:6px;display:grid;background:transparent;border-radius:50%;margin:0}
.bottom-bar .orb{width:28px;height:28px}
.bottom-bar .quiet-control{right:0;bottom:0;min-width:44px;min-height:44px;width:44px;padding:0;background:transparent;border-radius:12px;color:var(--muted)}
.bottom-bar #stop{left:0;right:auto}
.bottom-bar .quiet-control svg{width:19px;height:19px}
.bottom-bar .dock-hint{display:none}
.bottom-bar .command-form{margin:9px 0 4px;padding-top:10px}
.preview-note{flex-shrink:0;font-size:9px;margin:6px 0 9px}
.shell[data-view=home] .bottom-dock{padding-top:104px}
.shell[data-view=home] .assistant{padding:8px 0 4px}
.shell[data-view=home] .assistant-meta{font-size:12px;height:20px}
.shell[data-view=home] .assistant-controls{height:116px}
.shell[data-view=home] .orb-button{width:108px;height:108px;padding:6px}
.shell[data-view=home] .orb{width:96px;height:96px}
.shell[data-view=home] .dock-hint{display:none}
@media(max-height:620px){.shell[data-view=home] .bottom-dock{padding-top:74px}.header{padding-top:12px;padding-bottom:12px}.shell[data-view=home] .assistant-controls{height:86px}.shell[data-view=home] .orb{width:72px;height:72px}.shell[data-view=home] .orb-button{width:84px;height:84px}.preview-note{display:none}}

.bottom-bar #write{flex-direction:column;gap:2px}
.control-caption{font-size:9px;font-weight:500;line-height:12px}
.bottom-bar #write[aria-expanded=true]{background:var(--sage);color:var(--teal)}

/* The home orb sits in its own cradle in the bottom navigation. */
.shell[data-view=home] .intro{padding:20px 0 26px}
.shell[data-view=home] h1{font-size:clamp(30px,5vw,38px);margin-bottom:10px}
.shell[data-view=home] .subtitle{font-size:14px}
.shell[data-view=home] .list{gap:10px}
.shell[data-view=home] .row{min-height:64px;padding:12px 16px;box-shadow:0 3px 18px #192e3b03;border-radius:18px}
.shell[data-view=home] .row .row-icon{width:38px;height:38px;border-radius:13px}
.shell[data-view=home] .row strong{font-size:14px}
.shell[data-view=home] .row small{font-size:11px;margin-top:3px}
.shell[data-view=home] .bottom-dock{--cradle-width:78px;--cradle-depth:90px;--cradle-center:-26px}
.shell[data-view=home] .bottom-dock::before{content:"";position:absolute;left:0;right:0;bottom:0;height:56px;border-radius:16px 16px 0 0;pointer-events:none;background:radial-gradient(ellipse var(--cradle-width) var(--cradle-depth) at 50% var(--cradle-center),transparent 99%,var(--sage) 100%)}
.bottom-bar .bottom-nav{padding-left:4px;padding-right:4px}
.shell[data-view=home] .quiet-control{bottom:-4px}
@media(max-height:620px){.shell[data-view=home] .bottom-dock{--cradle-width:64px;--cradle-depth:82px;--cradle-center:-11px}}

.shell[data-view=home] .orb-button{transform:translateY(10px)}
