/* Home proportions and materials ported from Sabi's hero-home.css.
   Controls are live here; the source marketing phone is deliberately inert. */
.demo-mode{overscroll-behavior:none}
.demo-mode body{overflow:hidden;background:#f6f6f6}
.demo-mode .site-header{height:76px;background:transparent;border:0;position:relative;padding:14px 32px}
.demo-mode .site-header .brand>span{display:none}
.demo-layout{height:calc(100dvh - 76px);min-height:0;display:grid;grid-template-columns:268px minmax(0,1fr);gap:24px;max-width:1480px;margin:auto;padding:0 32px 24px}
.demo-sidebar{display:flex;flex-direction:column;min-height:0;padding-top:10px}
.demo-sidebar-head{display:flex;align-items:center;justify-content:space-between;padding:0 8px 18px}
.demo-wordmark{font:500 21px/1.2 Selecta,Arial,sans-serif;letter-spacing:-.4px;background:none;padding:8px 0;text-align:left}
.demo-wordmark img{width:81px;height:auto}
.demo-new-button{display:grid;place-items:center;width:38px;height:38px;background:linear-gradient(#fff,#f1f1f1);box-shadow:inset 0 1px 1px #fff,0 2px 5px #00000008;border-radius:50%;border:1px solid #fff}
.demo-new-button .icon{width:18px;height:18px}
.demo-search-field{display:flex;align-items:center;gap:9px;border:1px solid #e6e6e6;box-shadow:inset 0 1px 4px #00000003;background:#ededed70;border-radius:15px;padding:0 12px;margin-bottom:16px;height:44px;flex:none}
.demo-search-field>.icon{width:16px;height:16px;color:#8b8b8b;flex:none}
.demo-search-field input{width:100%;min-width:0;background:none;border:0;outline:none;padding:9px 0;font:400 14px/20px Selecta,sans-serif}
.demo-search-field:focus-within{outline:2px solid #246bfe;outline-offset:2px}
.demo-example-list{flex:1;overflow-y:auto;min-height:0;scrollbar-width:thin;scrollbar-color:#dedede transparent;padding:0 7px 12px 0;overscroll-behavior:contain}
.demo-category{margin-bottom:21px}
.demo-category h2{font:400 11px/1.3 Selecta,sans-serif;color:#888;margin:8px 10px}
.demo-example{display:flex;align-items:center;gap:11px;width:100%;min-height:40px;border-radius:13px;font-size:13px;text-align:left;padding:10px;background:transparent;color:#585858;border:1px solid transparent}
.demo-example>.icon{width:17px;height:17px;flex:none;opacity:.7}
.demo-example.selected{background:linear-gradient(#fff,#f9f9f9);border-color:#fff;color:#161616;box-shadow:0 2px 6px #00000006}
.demo-example.selected>.icon{color:#246bfe;opacity:1}
.demo-sidebar-foot{display:flex;justify-content:space-between;align-items:center;padding:10px 8px 0;color:#939393;font-size:11px;flex:none}
.demo-sidebar-foot .icon-button{width:32px;height:32px;background:none;box-shadow:none;border:0;color:#939393}
.demo-stage.preview-stage{height:100%;min-height:0;padding:18px 28px 24px;display:flex;align-items:center;justify-content:center;border:1px solid #fff;border-radius:38px;background:radial-gradient(ellipse at 50% 37%,#fff 15%,#f4f4f4 60%,#ededed);box-shadow:inset 0 1px 2px #fff;overflow:hidden}
.demo-mode .device-viewport{scroll-margin:0}
.demo-mode .iphone-frame{box-shadow:inset 0 0 0 1px #888,inset 0 0 0 3px #dededb,inset 0 0 0 4px #666763,inset 0 0 0 6px #161718,0 30px 45px -25px #00000040,0 5px 12px #00000010}
.hero-home{--hh-widget-size:159.2px;position:absolute;inset:0;display:flex;flex-direction:column;background:#fafafa;color:#14171a;font-family:Selecta,Arial,sans-serif;letter-spacing:0;text-align:left}
.hh-top{display:flex;align-items:center;justify-content:space-between;padding:76px 20px 20px;flex:none}
.hh-logo{display:block;width:101px;height:auto}
.hh-me{position:relative;width:36px;height:36px;border-radius:50%;padding:0;background:#e5e5e5;flex:none}
.hh-orb{border-radius:50%;isolation:isolate;box-shadow:0 2.6px 5.2px #00000020}
.hh-orb::after{content:"";position:absolute;inset:0;z-index:2;border-radius:50%;pointer-events:none;background:url('assets/wabi-home/orb-overlay.png') center/100% 100% no-repeat;mix-blend-mode:multiply;box-shadow:inset 0 -2.8px 4.8px #00000022,inset 0 1.2px 2.8px #ffffff70}
.hh-avatar{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;display:block;object-fit:cover}
.hh-body{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;overscroll-behavior:contain;padding-bottom:120px;scroll-padding-bottom:120px;mask-image:linear-gradient(#000 calc(100% - 80px),transparent calc(100% - 5px))}
.hh-rail{display:grid;grid-template-rows:1fr 1fr;grid-auto-flow:column;grid-auto-columns:var(--hh-widget-size);gap:12px;padding:4px 20px 15px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;scroll-padding-left:20px;overscroll-behavior-x:contain}
.hh-cell{width:var(--hh-widget-size);height:var(--hh-widget-size);position:relative;border-radius:26.5px;padding:0;box-shadow:0 4px 14px #0000001a;overflow:hidden;scroll-snap-align:start;background:#eee}
.hh-cell>img{display:block;width:100%;height:100%;object-fit:cover}
.hh-list{display:flex;flex-direction:column;gap:6px;padding:0 20px 12px}
.hh-row{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:12px;border-radius:20px;background:rgba(147,147,147,.08);text-align:left;border:1px solid transparent;color:#14171a}
.hh-row:first-child{box-shadow:inset 0 0 0 1.5px #fff}
.hh-icon{flex:none;width:58px;height:58px;position:relative}
.hh-thread-orb{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 2.6px 4px #0000001c)}
.hh-text{flex:1;min-width:0}
.hh-text b{display:block;font-weight:400;font-size:17.7px;line-height:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hh-text>span{display:block;margin-top:2px;font-size:15.3px;line-height:17.7px;color:#8a9099;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hh-row.is-new .hh-text>span{font-weight:500;color:#14171a}
.hh-when{flex:none;display:flex;align-items:center;gap:8px;font-size:15.3px;line-height:17.7px;color:#8a9099;opacity:.7}
.hh-when i{width:6px;height:6px;border-radius:50%;background:#246bfe}
.hh-dock{position:absolute;left:50%;bottom:30px;transform:translateX(-50%);z-index:20;display:flex;align-items:center;gap:14px}
.hh-search,.hh-plus{height:54px;border-radius:60px;background:rgba(244,244,244,.3);backdrop-filter:blur(18px) saturate(1.6);-webkit-backdrop-filter:blur(18px) saturate(1.6);box-shadow:inset -1px -1px 2px #ffffff52,inset 1px 1px 1px #ffffff1f,0 6px 18px #0000001a;display:flex;align-items:center;border:1px solid #ffffffd0}
.hh-search{width:282px;padding:0 17px;gap:10px;color:#8a9099;font-size:17px}
.hh-search .icon{width:18px;height:18px;flex:none}
.hh-plus{width:54px;justify-content:center;color:#222}
.hh-plus .icon{width:28px;height:28px}
.hh-all{display:flex;align-items:center;gap:10px;margin:4px auto 0;padding:14px;color:#7c7c7c;font-size:14px;background:none}
.demo-mode .phone-header{pointer-events:auto}
.demo-mode .phone-header button{cursor:pointer}
.demo-mode .chat-flow{padding-top:112px}
.demo-mode .chat-title-pill img{border-radius:50%}
.demo-mode .wabi-compose input{font:400 17px/22px Selecta,Arial,sans-serif;color:#171717;flex:1;min-width:0;background:none;border:0;outline:none;padding:7px 0}
.demo-mode .wabi-compose input::placeholder{color:#96999f}
.demo-mode .phone-footer:focus-within{border-color:#246bfe55}
.demo-mode .wabi-compose .compose-send-control{background:#171717;color:#fff;box-shadow:inset 0 1px 1px #ffffff40}
.demo-mode .wabi-compose .compose-send-control:disabled{color:#929292;background:#efefef;opacity:1}
.demo-mode .wabi-compose .compose-send-control .icon{width:22px;height:22px}
.demo-mode .chat-followup{display:flex;flex-wrap:wrap;gap:8px;padding-bottom:8px}
.demo-mode .chat-followup button{min-height:40px}
.demo-choice{display:flex;align-items:center;width:100%;padding:12px 0;gap:12px;border-bottom:1px solid #ededed;text-align:left;background:none;border-radius:0}
.demo-choice-icon{width:40px;height:40px;border-radius:14px;background:linear-gradient(#fff,#f4f4f4);box-shadow:inset 0 0 0 1px #eee;display:grid;place-items:center;flex:none;color:#777}
.demo-choice>span:nth-child(2){min-width:0;flex:1}
.demo-choice strong{display:block;font:500 15px/20px Selecta,sans-serif}
.demo-choice small{display:block;font:400 12px/17px Selecta,sans-serif;color:#8c8c8c;margin-top:3px}
.demo-choice>.icon{width:16px;height:16px;flex:none;color:#a0a0a0}
.demo-no-results{font-size:14px;line-height:1.5;color:#888;padding:16px 10px}
.demo-picker .demo-search-field{margin-bottom:10px;background:#f4f4f4}
.demo-picker .demo-search-field input{font-size:16px}
.demo-picker .dialog-content{overflow-y:auto}
.demo-member{display:flex;align-items:center;gap:14px;padding:16px 0;font-size:17px}
.demo-member img{width:44px;height:44px;border-radius:50%;object-fit:contain}
.demo-member small{display:block;color:#888;font-size:12px;margin-top:3px}
@media(hover:hover) and (pointer:fine){.demo-example:hover{background:#ffffff85;color:#171717}.hh-row:hover{background:#eaeaea}.demo-choice:hover{background:#fafafa}.hh-cell:hover{filter:brightness(1.025)}}
.hh-row:active,.hh-cell:active{filter:brightness(.96)}
.hh-search:active,.hh-plus:active,.demo-new-button:active{background:#eee}
@media(max-width:900px){.demo-layout{grid-template-columns:220px minmax(0,1fr);gap:12px;padding-inline:18px}.demo-stage.preview-stage{padding:16px}.demo-mode .site-header{padding-inline:20px}}
@media(max-width:700px){.demo-sidebar{display:none}.demo-layout{display:block;padding:0 10px 12px}.demo-stage.preview-stage{padding:14px 8px;border-radius:30px}.demo-mode .site-header{height:64px;padding:8px 16px;gap:8px}.demo-layout{height:calc(100dvh - 64px)}.demo-mode .brand img{width:63px}.demo-mode .main-nav{gap:0}.demo-mode .main-nav button{padding:10px 11px;font-size:11px}.demo-mode .main-nav .icon{display:none}.demo-mode .research-entry{width:36px;height:36px;padding:8px}.demo-mode .research-entry span{display:none}}
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more){.hh-search,.hh-plus{background:#fafafa;backdrop-filter:none}.hh-body{mask-image:none}.hh-text>span,.hh-when{color:#666;opacity:1}}
@media(forced-colors:active){.hh-search,.hh-plus,.hh-row,.demo-example,.demo-choice{border:1px solid CanvasText}.hh-body{mask-image:none}}
.hh-icon:has(.hh-thread-orb){filter:drop-shadow(0 2.6px 4px #0000001c)}
.hh-thread-orb{border-radius:50%;clip-path:circle(48%);filter:none}
.demo-mode .chat-flow:focus:not(:focus-visible){outline:none}
dialog.demo-picker.device-dialog[open]{height:782px;display:flex;flex-direction:column}
.demo-picker .dialog-header{flex:none}
.demo-picker .dialog-header h2{font:500 24px/1.15 var(--hs-font-ui);letter-spacing:-.5px}
.demo-picker .dialog-content{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}
.demo-picker .demo-search-field{flex:none}
#demo-picker-results{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;flex:1;min-height:0}
.demo-mode .chat-followup button{display:inline-flex;align-items:center;gap:6px}

/* Original Sabi widget captures retain their own shape, color and materials. */
.hh-widget{background:transparent;border:0;touch-action:pan-x pan-y}
.hh-widget img{object-fit:contain;pointer-events:none;user-select:none}
.hh-widget:focus-visible{outline:3px solid #246bfe;outline-offset:3px}
.home-widget-dialog .dialog-content{padding:6px 24px 32px}
.home-widget-art{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain;border-radius:16.67%;box-shadow:0 8px 24px #00000014}
/* Full apps expand inside the same physical phone; home keeps its scroll. */
dialog.widget-full-dialog{position:fixed;inset:auto;margin:0;padding:0;border:0;width:402px;height:874px;max-width:none;max-height:none;background:transparent;border-radius:55px;overflow:hidden;transform-origin:top left;box-shadow:none;opacity:1;transition:none}
dialog.widget-full-dialog::backdrop{background:transparent;backdrop-filter:none}
.widget-full-dialog iframe{display:block;width:100%;height:100%;border:0;background:transparent;opacity:0}
.widget-full-dialog.is-ready iframe{opacity:1}
.iphone-screen .hero-home{transition:opacity 180ms cubic-bezier(.23,1,.32,1)}
.iphone-screen.home-app-open .hero-home{opacity:.14;filter:blur(3px)}
@media(prefers-reduced-motion:reduce){.iphone-screen .hero-home{transition:none}.iphone-screen.home-app-open .hero-home{filter:none}}

.widget-load-fallback{position:absolute;inset:62px 10px 66px;border-radius:32px;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px}.widget-load-fallback[hidden]{display:none}.widget-load-fallback p{margin:0;color:#737373}.widget-load-fallback button{border:1px solid #ddd;border-radius:99px;background:linear-gradient(#fff,#eee);padding:12px 22px;min-height:44px}