/* Screen chrome, notification gestures and spatial page transitions. */
:root { --home-gesture-height:28px; }
html[data-device-preview="mobile"] { --home-gesture-height:max(24px,env(safe-area-inset-bottom,0px)); }
html[data-system-chrome="native"],html[data-system-chrome="native"] body { background:var(--system-background,#d9d9d9); }
.native-notification-gesture { position:absolute; top:env(safe-area-inset-top,0px); left:0; right:0; width:100%; height:16px; padding:0; z-index:50; touch-action:none; }
html[data-system-chrome="native"] .phone-screen[data-current-page="home"]>.native-notification-gesture,
html[data-system-chrome="native"] .phone-screen[data-current-page="lock"]>.native-notification-gesture,
html[data-system-chrome="native"] .notifications-open>.native-notification-gesture { height:44px; }
html[data-system-chrome="native"] #phone .phone-content { top:env(safe-area-inset-top,0px); }
html[data-system-chrome="native"] #phone .phone-content.on-desktop { top:0; }
html[data-system-chrome="native"] #phone .home-page { padding-top:calc(clamp(44px,5vh,56px) + env(safe-area-inset-top,0px)); }
html[data-system-chrome="native"] .notification-center { padding-top:calc(36px + env(safe-area-inset-top,0px)); }
#phone .status-bar { height:calc(59px + env(safe-area-inset-top,0px)); padding:calc(18px + env(safe-area-inset-top,0px)) clamp(22px,5vw,42px) 0; color:#172433; z-index:50; pointer-events:auto; touch-action:none; user-select:none; }
#phone .light-status .status-bar { color:#f7f9ff; }
#phone .notifications-open .status-bar { color:#222; }
.system-time { padding:0; font-size:16px; font-weight:650; line-height:22px; min-width:46px; text-align:left; font-variant-numeric:tabular-nums; }
#phone .status-icons { gap:6px; padding:2px 0 0; height:23px; }
#phone .dynamic-island { top:calc(10px + env(safe-area-inset-top,0px)); width:119px; height:34px; transition:width .4s cubic-bezier(.22,1,.36,1); }
#phone .notifications-open .dynamic-island { width:126px; }
.system-battery { position:relative; display:flex; align-items:center; justify-content:center; width:27px; height:14px; margin-left:1px; border:1px solid currentColor; border-radius:4px; }
.system-battery::before { content:''; position:absolute; inset:1px; right:5px; background:currentColor; border-radius:2px; opacity:.9; }
.system-battery::after { content:''; position:absolute; right:-4px; top:4px; width:2px; height:4px; background:currentColor; opacity:.55; border-radius:1px; }
.system-battery>span { color:var(--app-bg,#f7f7f7); mix-blend-mode:multiply; z-index:1; font-size:9px; font-weight:800; line-height:12px; }
.light-status .system-battery>span,.notifications-open .system-battery>span { color:#293d5e; mix-blend-mode:normal; }
#phone .phone-content { top:calc(59px + env(safe-area-inset-top,0px)); view-transition-name:screen-content; }
#phone .phone-content.on-desktop { top:0; }
#phone .home-page { padding-top:calc(clamp(86px,12vh,112px) + env(safe-area-inset-top,0px)); }
.system-overlay { position:absolute; inset:0; z-index:40; pointer-events:none; }
.notification-center { position:relative; isolation:isolate; height:100%; display:flex; flex-direction:column; padding:calc(93px + env(safe-area-inset-top,0px)) 20px calc(18px + env(safe-area-inset-bottom,0px)); color:#222; background:var(--tomo-wallpaper,#ddd); pointer-events:auto; animation:notification-pull .48s cubic-bezier(.16,1,.3,1) both; overflow:hidden; }
.notification-clock { text-align:center; flex-shrink:0; }
.notification-clock>p { margin:0 0 4px; font-size:17px; font-weight:500; letter-spacing:.4px; }
.notification-clock>time { font-size:clamp(72px,15vw,98px); font-weight:250; line-height:1.12; letter-spacing:-4px; font-variant-numeric:tabular-nums; }
.notification-scroll { width:100%; max-width:460px; align-self:center; margin-top:auto; height:38%; max-height:38%; flex-shrink:0; overflow-y:auto; overflow-x:hidden; padding:16px 2px 25px; overscroll-behavior:contain; scrollbar-width:none; overflow-anchor:none; }
.notification-heading { display:flex; align-items:center; justify-content:space-between; padding:0 9px; min-height:34px; }
.notification-heading h2 { margin:0; font-size:21px; font-weight:650; letter-spacing:.2px; }
.notification-heading>button { background:#eee; padding:7px 13px; border:0; border-radius:20px; color:#555; font-size:12px; }
.notification-demo { font-size:10px; color:#999; margin:7px 9px 17px; }
.notification-stack { position:relative; display:block; width:100%; text-align:left; padding:0; margin-bottom:22px; isolation:isolate; }
.stack-layer { position:absolute; inset:0; display:block; border-radius:25px; background:#e3e3e6; border:0; z-index:-1; }
.stack-layer.layer-middle { transform:translateY(9px) scale(.96); }
.stack-layer.layer-back { transform:translateY(18px) scale(.92); opacity:.65; }
.stack-front,.notification-card { display:flex; gap:11px; align-items:center; border-radius:21px; padding:10px 13px; background:#f2f2f3; color:#222; border:0; box-shadow:0 4px 16px #00000005; backdrop-filter:blur(24px); }
.notification-icon { flex-shrink:0; }
.notification-icon .app-icon { width:34px; height:34px; border-radius:9px; }
.notification-copy { flex:1; min-width:0; }
.notification-meta { display:flex; align-items:baseline; gap:8px; }
.notification-meta>strong { font-size:14px; font-weight:650; }
.notification-meta>time { margin-left:auto; font-size:10px; color:#999; }
.notification-text { display:block; margin:3px 0 0; font-size:13px; line-height:1.4; overflow-wrap:anywhere; }
.stack-count { display:block; font-size:10px; color:#888; margin-top:5px; }
.notification-list { display:flex; flex-direction:column; gap:8px; }
.notification-card { width:100%; min-height:62px; text-align:left; animation:notification-expand .25s ease-out both; animation-delay:calc(var(--notification-order,0)*45ms); }
.notification-card:first-child { animation:none; }
.notification-dismiss { color:#222; flex-shrink:0; width:100%; padding:15px 0 0; margin-top:10px; display:flex; flex-direction:column; align-items:center; gap:9px; touch-action:none; }
.notification-scroll[hidden]+.notification-dismiss { margin-top:auto; }
.notification-dismiss>span { display:block; width:120px; height:5px; border-radius:5px; background:#222; }
.notification-dismiss>small { font-size:10px; color:#999; }
#phone .phone-toast { z-index:70; }
.phone-content[inert] { user-select:none; }
.screen-navigation { border:0; }
.screen-navigation button { width:100%; height:100%; justify-content:center; align-items:flex-end; padding:0 0 8px; touch-action:none; }
.screen-navigation button>.icon,.screen-navigation button>span { display:none; }
.screen-navigation button::after { content:''; display:block; width:125px; height:5px; border-radius:5px; background:#172433; }
.script-import-screen .screen-navigation button::after { background:#f0f5fb; }
@keyframes notification-pull { from { transform:translateY(-100%); } to { transform:translateY(0); } }
@keyframes notification-expand { from { opacity:0; } to { opacity:1; } }
/* One shared owner for app/search transitions on every device. */
::view-transition { clip-path:var(--screen-transition-clip,none); }
::view-transition-group(screen-content) { animation:none; overflow:clip; }
::view-transition-old(screen-content),::view-transition-new(screen-content) { mix-blend-mode:normal; height:100%; }
html[data-route-motion="app-open"]::view-transition-old(screen-content) { animation:none; }
html[data-route-motion="app-open"]::view-transition-new(screen-content) { transform-origin:var(--launch-origin,50% 50%); animation:app-open .52s cubic-bezier(.16,1,.3,1) both; }
html[data-route-motion="app-close"]::view-transition-old(screen-content) { transform-origin:var(--launch-origin,50% 50%); animation:app-close .36s cubic-bezier(.4,0,.6,1) both; z-index:2; }
html[data-route-motion="app-close"]::view-transition-new(screen-content) { animation:none; }
html[data-route-motion="push"]::view-transition-old(screen-content) { animation:page-left .35s cubic-bezier(.22,1,.36,1) both; }
html[data-route-motion="push"]::view-transition-new(screen-content) { animation:page-in .38s cubic-bezier(.22,1,.36,1) both; }
html[data-route-motion="pop"]::view-transition-old(screen-content) { animation:page-out .35s cubic-bezier(.22,1,.36,1) both; z-index:2; }
html[data-route-motion="pop"]::view-transition-new(screen-content) { animation:page-return .35s cubic-bezier(.22,1,.36,1) both; }
html[data-route-motion="tab"]::view-transition-old(screen-content) { animation:fade-out .12s both; }
html[data-route-motion="tab"]::view-transition-new(screen-content) { animation:fade-in .18s both; }
html[data-route-motion="search-open"]::view-transition-old(screen-content),
html[data-route-motion="search-close"]::view-transition-new(screen-content) { animation:none; }
html[data-route-motion="search-open"]::view-transition-new(screen-content) { animation:spotlight-enter .38s cubic-bezier(.16,1,.3,1) both; }
html[data-route-motion="search-close"]::view-transition-old(screen-content) { animation:spotlight-exit .26s ease-in both; }
@keyframes spotlight-enter { from { opacity:0; transform:translateY(20px) scale(.97); filter:blur(8px); } to { opacity:1; transform:none; filter:blur(0); } }
@keyframes spotlight-exit { to { opacity:0; transform:translateY(15px) scale(.98); filter:blur(5px); } }
@keyframes app-open { 0% { transform:scale(.14); opacity:0; border-radius:100px; filter:blur(6px); } 35% { opacity:1; filter:blur(0); } 100% { transform:scale(1); opacity:1; border-radius:0; filter:blur(0); } }
@keyframes app-close { from { transform:scale(1); opacity:1; border-radius:0; } to { transform:scale(.16); opacity:0; border-radius:95px; } }
@keyframes page-in { from { transform:translateX(100%); } to { transform:translateX(0); } }
@keyframes page-left { to { transform:translateX(-24%); filter:brightness(.88); } }
@keyframes page-out { to { transform:translateX(100%); } }
@keyframes page-return { from { transform:translateX(-24%); filter:brightness(.88); } to { transform:translateX(0); filter:brightness(1); } }
@keyframes fade-in { from { opacity:0; } to { opacity:1; } }
@keyframes fade-out { to { opacity:0; } }
@media(prefers-reduced-motion:reduce) {
  .notification-center,.notification-card { animation:none; }
  #phone .dynamic-island { transition:none; }
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*) { animation:none!important; }
}
@media(max-height:590px) {
  #phone .home-page { padding-top:76px; }
  .notification-center { padding-top:68px; }
  .notification-clock>time { font-size:60px; }
  .notification-clock>p { font-size:14px; }
  .notification-scroll { height:48%; max-height:48%; }
}

/* Shared autocomplete: all search animation styling stays with the system motion rules. */
.search-suggestions { position:absolute; z-index:65; box-sizing:border-box; background:#fff; color:#222; border:0; border-radius:20px; padding:4px; overflow:auto; overscroll-behavior:contain; box-shadow:0 8px 30px #00000015; scrollbar-width:thin; transition:height .18s ease,opacity .14s ease; font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei UI",sans-serif; }
.search-suggestions[data-closing] { opacity:0; pointer-events:none; }
.suggestion-slot { display:grid; grid-template-rows:1fr; opacity:1; transition:grid-template-rows .18s ease,opacity .14s ease; }
.suggestion-slot[data-entering],.suggestion-slot[data-leaving] { grid-template-rows:0fr; opacity:0; }
.suggestion-slot[data-leaving] { pointer-events:none; }
.suggestion-slot>div { min-height:0; overflow:hidden; }
.suggestion-option { height:44px; display:flex; align-items:center; padding:0 12px; border-radius:16px; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer; }
.suggestion-option[aria-selected="true"] { background:#ededf0; color:#111; }
.suggestion-empty { height:44px; display:flex; align-items:center; justify-content:center; font-size:12px; color:#999; margin:0; }
@media(prefers-reduced-motion:reduce) { .search-suggestions,.suggestion-slot { transition:none; } }

.search-suggestions { animation:search-candidates-in .14s ease-out; }
@keyframes search-candidates-in { from { opacity:0; transform:translateY(3px); } to { opacity:1; transform:none; } }
@media(prefers-reduced-motion:reduce) { .search-suggestions { animation:none; } }

.notifications-open .system-battery>span { color:#fff; mix-blend-mode:normal; }