/* SPDX-License-Identifier: AGPL-3.0-only */
.mobile-system {
    --mobile-status-height:20px; --mobile-navigation-height:35px; --mobile-tray-height:96px;
    background:#000!important; overflow:hidden!important; font-family:Helvetica,Arial,sans-serif;
}
.mobile-system.mobile-device-frame { --mobile-navigation-height:0px; }
.mobile-system .desktop,.mobile-system .taskbar,.mobile-system .toolbar { visibility:hidden!important; pointer-events:none!important; }
#mobile-shell,#mobile-shell *,.mobile-launch-surface,.mobile-launch-surface * { box-sizing:border-box; }
#mobile-shell {
    position:fixed; inset:0; z-index:10; overflow:hidden;
    background:#4e718c url('/classic-assets/wallpaper.png') center/cover no-repeat;
    color:#fff; font:13px Helvetica,Arial,sans-serif; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none;
}
#mobile-shell [hidden],.mobile-sleep-screen[hidden] { display:none!important; }
.mobile-status {
    position:absolute; inset:0 0 auto; height:var(--mobile-status-height); z-index:120;
    display:flex; align-items:center; justify-content:space-between; padding:0 6px;
    background:linear-gradient(#42474d,#13171c); box-shadow:0 1px #0008;
    font-size:11px; font-weight:bold; text-shadow:0 -1px #000;
}
.mobile-edit-done { border:1px solid #222; border-radius:4px; padding:1px 7px; background:linear-gradient(#8aa4c1,#36577b); color:white; font:bold 10px Helvetica,Arial,sans-serif; }
.mobile-edit-manage{border:1px solid #222;border-radius:4px;padding:1px 7px;background:linear-gradient(#8aa4c1,#36577b);color:#fff;font:bold 10px Helvetica,Arial,sans-serif}
.mobile-folder-panel{position:absolute;inset:60px 0 0;z-index:125;background:#34373c url('/classic-assets/linen.png');box-shadow:0 6px 12px #000b;border-block:2px solid #111}.mobile-folder-panel header{display:flex;justify-content:space-between;align-items:center;padding:10px 15px;background:linear-gradient(#666,#333);font-size:17px}.mobile-folder-panel header button{border:0;background:none;color:white;font-size:22px}.mobile-folder-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:80px;min-height:80px;padding:12px 8px;touch-action:none}.mobile-folder-face{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;padding:5px;background:linear-gradient(#8b929c,#454b55)!important}.mobile-folder-face>.mobile-icon-face{width:13px;height:13px;margin:0;border-radius:3px;font-size:10px}.mobile-folder-face:after{display:none}
.mobile-alert{position:fixed;inset:155px 20px auto;z-index:2147483300;border:2px solid #aeb9cb;border-radius:12px;background:linear-gradient(#4d6286ee,#142b51f5);box-shadow:0 5px 20px #000a;color:white;text-align:center;text-shadow:0 -1px #000;padding:17px;font:16px Helvetica,Arial,sans-serif}.mobile-alert[hidden]{display:none}.mobile-alert p{font-size:14px;white-space:pre-wrap;overflow-wrap:anywhere;max-height:150px;overflow:auto}.mobile-alert button{width:100%;border:1px solid #10213e;border-radius:6px;padding:9px;background:linear-gradient(#8695ac,#3c5073);color:white;font:bold 16px Helvetica,Arial,sans-serif}.mobile-asleep .mobile-alert{visibility:hidden}
.mobile-editing .mobile-battery { display:none; }
.mobile-shortcut-remove{display:none;position:absolute;top:-7px;left:0;z-index:4;width:21px;height:21px;border:2px solid white;border-radius:50%;background:linear-gradient(#888,#111);color:white;font:bold 18px/18px Helvetica;text-align:center;box-shadow:0 1px 3px #000}.mobile-editing .mobile-shortcut-remove{display:block}
.mobile-springboard { position:absolute; inset:var(--mobile-status-height) 0 var(--mobile-navigation-height); overflow:hidden; transform-origin:center; transition:transform 300ms cubic-bezier(.22,.7,.2,1); }
.mobile-pages-viewport { position:absolute; inset:0 0 112px; overflow:hidden; touch-action:none; }
.mobile-pages { position:absolute; inset:0; width:100%; height:100%; display:flex; overflow:visible; transition:transform 360ms cubic-bezier(.22,.7,.2,1); touch-action:none; }
.mobile-pages.mobile-pages-dragging { transition:none; cursor:grabbing; }
.mobile-page {
    display:grid; flex:0 0 100%; width:100%; min-width:0; height:100%; overflow:hidden;
    grid-template-columns:repeat(4,minmax(0,1fr)); grid-auto-rows:80px;
    gap:0; padding:15px 8px 10px; align-content:start;
}
.mobile-icon {
    display:block; position:relative; width:100%; min-width:0; max-width:80px; margin:0; padding:0; align-self:start;
    border:0; background:none; color:white; cursor:pointer; text-align:center;
    font:bold 11px/14px Helvetica,Arial,sans-serif; text-shadow:0 1px 2px #000;
    touch-action:none; user-select:none; -webkit-user-select:none;
    transition:filter 100ms ease; -webkit-tap-highlight-color:transparent;
}
.mobile-icon-visual { display:block; transform-origin:center; backface-visibility:hidden; }
.mobile-icon-face {
    position:relative; display:flex; align-items:center; justify-content:center;
    width:57px; height:57px; margin:0 auto 5px; overflow:hidden; border-radius:11px;
    font-size:39px; color:white; background:linear-gradient(#64b1e1,#126ab1);
    box-shadow:0 2px 3px #0009,inset 0 1px #ffffff6b;
}
.mobile-icon-face:after { content:''; position:absolute; inset:0 0 47%; border-radius:10px 10px 50% 50%; background:linear-gradient(#ffffff80,#ffffff08); pointer-events:none; }
.mobile-icon-face:has(img) { background:none; box-shadow:0 2px 3px #0009; }
.mobile-icon-face:has(img):after { display:none; }
.mobile-icon-face img { display:block; width:100%; height:100%; object-fit:contain; pointer-events:none; -webkit-user-drag:none; }
.mobile-icon-face.purple { background:linear-gradient(#d394eb,#663b9d); }
.mobile-icon-face.silver { background:linear-gradient(#e2e6ed,#64717d); color:#444; }
.mobile-icon-label { display:block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mobile-system:not(.mobile-editing) .mobile-icon:active .mobile-icon-face { filter:brightness(.65); }
.mobile-calendar-day { position:absolute; inset:19px 0 auto; z-index:1; color:#202020; font-size:35px; line-height:35px; font-weight:normal; text-shadow:0 1px white; }
.mobile-dock { position:absolute; inset:auto 0 0; height:99px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; padding:17px 8px 9px; background:url('/classic-assets/dock.png') center bottom/100% 100% no-repeat; align-items:start; }
.mobile-dock .mobile-icon-face { filter:drop-shadow(0 3px 2px #0008); }
.mobile-page-dots { position:absolute; inset:auto 0 102px; display:flex; align-items:center; justify-content:center; gap:6px; height:10px; }
.mobile-page-dots button { border:0; padding:2px; background:none; color:#ffffff55; font-size:9px; line-height:10px; text-shadow:0 1px 2px #000; cursor:pointer; }
.mobile-page-dots button.selected { color:white; }
.mobile-app-status { position:absolute; inset:auto 10px 122px; padding:0; color:white; text-align:center; font-size:10px; text-shadow:0 1px #000; pointer-events:none; }
.mobile-navigation { position:absolute; inset:auto 0 0; z-index:140; height:35px; display:flex; background:linear-gradient(#363a40,#101215); border-top:1px solid #6b6c6e; }
.mobile-navigation button { flex:1; border:0; background:none; color:#ddd; font-size:16px; cursor:pointer; }
.mobile-navigation span { margin-left:4px; font-size:10px; }
.mobile-device-frame .mobile-navigation { display:none; }

/* The classic tray has a single row. It does not introduce a second status/header bar. */
.mobile-switcher { position:absolute; inset:auto 0 var(--mobile-navigation-height); z-index:110; height:var(--mobile-tray-height); overflow:hidden; padding:0; background:#383a3d url('/classic-assets/linen.png') center/320px auto; box-shadow:0 -2px 7px #0009; border-top:1px solid #171717; }
.mobile-task-strip { display:flex; width:100%; height:100%; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; -ms-overflow-style:none; scroll-snap-type:x mandatory; overscroll-behavior-x:contain; }
.mobile-task-strip::-webkit-scrollbar { display:none; }
.mobile-task { position:relative; flex:0 0 25%; min-width:0; height:100%; padding:11px 4px 6px; scroll-snap-align:start; }
.mobile-task-open { display:block; width:100%; padding:0; border:0; color:white; background:none; text-align:center; cursor:pointer; font:11px/14px Helvetica,Arial,sans-serif; }
.mobile-task-face { display:block; width:57px; height:57px; margin:0 auto 5px; border-radius:11px; background:linear-gradient(#91bce2,#2c658f); box-shadow:0 2px 3px #0009; }
.mobile-task-face img { display:block; width:100%; height:100%; border-radius:11px; pointer-events:none; }
.mobile-task-open{touch-action:none;-webkit-touch-callout:none;user-select:none;-webkit-user-select:none}
.mobile-task-drag-ghost{position:fixed;z-index:2147483400;pointer-events:none;transform-origin:50% 30px;filter:drop-shadow(0 7px 5px #0008);will-change:transform,opacity}
.mobile-task-drag-ghost .mobile-task-face{animation:none!important}
.mobile-task-dragging .mobile-task-close{display:none}
.mobile-task-dismissing{opacity:0;pointer-events:none}
.mobile-task-label { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-shadow:0 1px #000; }
.mobile-task-close { display:none; position:absolute; left:5px; top:5px; width:20px; height:20px; padding:0; border:2px solid white; border-radius:50%; color:white; background:linear-gradient(#ed7b77,#a6120b); font:bold 19px/14px Helvetica,Arial,sans-serif; box-shadow:0 1px 3px #000b; cursor:pointer; }
.mobile-task-editing .mobile-task-close { display:block; }
.mobile-switcher p { width:100%; margin:30px 0; text-align:center; font-size:12px; color:#ddd; }
.mobile-system.mobile-switcher-present .window:not(.mobile-background) { pointer-events:none!important; }
.mobile-system.mobile-switcher-present .mobile-springboard {transition:none;}

.mobile-lock { position:absolute; inset:var(--mobile-status-height) 0 var(--mobile-navigation-height); z-index:130; text-align:center; overflow:hidden; background:url('/classic-assets/wallpaper.png') center/cover no-repeat; }
.mobile-clock { padding-top:12px; background:linear-gradient(#2b354675,#0b16276b); font:200 64px/1.02 Helvetica,Arial,sans-serif; letter-spacing:-2px; text-shadow:0 2px 2px #0006; }
.mobile-date { padding:6px 0 12px; border-bottom:1px solid #ffffff29; background:linear-gradient(#0b16276b,#0b162777); font-size:16px; text-shadow:0 1px 2px #0009; }
.mobile-unlock { position:absolute; inset:auto 0 0; height:96px; padding:22px 25px; border-top:1px solid #ffffff44; background:linear-gradient(#333a4280,#11151db3); }
.mobile-unlock span { position:absolute; top:35px; left:88px; color:transparent; text-shadow:0 -1px #000; font-size:20px; letter-spacing:.1px; pointer-events:none; background:linear-gradient(105deg,#92969a 25%,#fff 45%,#92969a 65%); background-size:230% 100%; background-clip:text; -webkit-background-clip:text; animation:mobile-unlock-shimmer 3s linear infinite; transition:opacity 90ms linear; }
.mobile-unlock input { position:relative; appearance:none; -webkit-appearance:none; width:100%; height:50px; margin:0; border:1px solid #000; border-radius:11px; background:linear-gradient(#111a,#3338); box-shadow:0 1px #ffffff44,inset 0 2px 4px #000b; touch-action:pan-x; }
.mobile-unlock input::-webkit-slider-thumb { appearance:none; -webkit-appearance:none; width:62px; height:46px; border:0; border-radius:10px; background:url('/classic-assets/unlock-thumb.png') center/100% 100% no-repeat; box-shadow:0 1px 2px #0009; cursor:grab; }
.mobile-unlock input::-moz-range-thumb { width:62px; height:46px; border:0; border-radius:10px; background:url('/classic-assets/unlock-thumb.png') center/100% 100% no-repeat; }
.mobile-lock[hidden] .mobile-unlock span { animation:none; }
.mobile-sleep-screen { position:fixed; inset:0; z-index:2147483646; background:#000; pointer-events:auto; }
.mobile-system.mobile-asleep #mobile-shell { visibility:hidden; }
.mobile-system.mobile-locked .mobile-icon-visual,.mobile-system.mobile-locked .mobile-dock { opacity:0; }

.mobile-system .window { position:fixed!important; inset:var(--mobile-status-height) 0 var(--mobile-navigation-height)!important; width:100%!important; height:calc(100% - var(--mobile-status-height) - var(--mobile-navigation-height))!important; min-width:0!important; min-height:0!important; max-width:none!important; max-height:none!important; border-radius:0!important; transform:none; transform-origin:center; box-shadow:none!important; border:0!important; z-index:20!important; transition:none!important; backface-visibility:hidden; }
.mobile-system .window.window-active { z-index:30!important; }
.mobile-system .window.mobile-background { visibility:hidden!important; pointer-events:none!important; }
.mobile-system .window.mobile-window-leaving { visibility:visible!important; pointer-events:none!important; z-index:40!important; }
.mobile-system .window.mobile-window-preparing,.mobile-system.mobile-locked .window,.mobile-system.mobile-asleep .window { visibility:hidden!important; pointer-events:none!important; }
.mobile-system .window-head { height:43px!important; background:linear-gradient(#b5c7dc,#839bb9 49%,#6b86a8 50%,#748faf)!important; border-bottom:1px solid #33475f!important; border-radius:0!important; }
.mobile-system .window-head-title { color:white!important; font: bold 16px Helvetica,Arial,sans-serif; text-shadow:0 -1px #456; }
.mobile-system .window-body { max-width:100%; border-radius:0!important; overflow:auto; }
.mobile-system .window-minimize-btn,.mobile-system .window-maximize-btn,.mobile-system .window-resize-handle,.mobile-system .ui-resizable-handle { display:none!important; }
.mobile-system .window-app-iframe { width:100%!important; }
.mobile-system .window[data-app^="classic-"] .window-body { height:100%!important; padding:0!important; overflow:hidden!important; }
.mobile-system .window[data-app^="classic-"] .window-app-iframe { height:100%!important; border:0!important; }
.mobile-system .notification-container { z-index:150!important; }
.mobile-system .mobile-launch-surface { position:fixed; inset:var(--mobile-status-height) 0 var(--mobile-navigation-height); z-index:2147483000; background:#e3e7ed; color:#35445c; overflow:hidden; transform-origin:center; box-shadow:0 0 0 1px #0004; contain:paint; font:14px Helvetica,Arial,sans-serif; }
.mobile-launch-title { display:flex; align-items:center; justify-content:center; height:43px; border-bottom:1px solid #33475f; color:white; background:linear-gradient(#b5c7dc,#839bb9 49%,#6b86a8 50%,#748faf); font-size:19px; font-weight:bold; text-shadow:0 -1px #456; }
.mobile-launch-preview { position:absolute; inset:44px 0 0; display:flex; align-items:center; justify-content:center; background:repeating-linear-gradient(90deg,#d5dce5 0 2px,#dde3eb 2px 5px); }
.mobile-launch-preview>img { width:72px; height:72px; border-radius:14px; box-shadow:0 3px 8px #0004; }
.mobile-launch-loading { position:absolute; inset:auto 0 22px; text-align:center; color:#718096; font-size:11px; }
.mobile-launch-loading:before { content:''; display:inline-block; vertical-align:-2px; width:11px; height:11px; margin-right:7px; border:2px solid #6f7f9630; border-top-color:#6f7f96; border-radius:50%; animation:mobile-launch-spin .8s linear infinite; }
.mobile-launch-surface[data-app=notes] .mobile-launch-title { background:linear-gradient(#c29c77,#a47b55 48%,#896340 50%,#a37b55); border-color:#66452d; }
.mobile-launch-surface[data-app=notes] .mobile-launch-preview { background:repeating-linear-gradient(#fff5c5 0 27px,#d9cb94 27px 28px); }
.mobile-launch-surface[data-app=notes] .mobile-launch-preview>img { display:none; }
.mobile-launch-surface[data-app=clock] .mobile-launch-title { background:linear-gradient(#666,#333 50%,#1d1d1d 51%,#252525); border-color:#111; }
.mobile-system.mobile-locked .mobile-launch-surface { visibility:hidden; }

.mobile-editing .mobile-icon-visual,.mobile-task-editing .mobile-task-face { animation:mobile-icon-wiggle .14s ease-in-out infinite alternate; }
.mobile-editing .mobile-icon:nth-child(2n) .mobile-icon-visual { animation-direction:alternate-reverse; animation-duration:.17s; }
.mobile-icon-placeholder { opacity:.22; }
.mobile-icon-picked { cursor:grabbing; }
.mobile-system .mobile-drag-ghost { width:80px; z-index:2147483200!important; pointer-events:none; opacity:1!important; filter:drop-shadow(0 8px 5px #0007); }
.mobile-drag-ghost .mobile-icon-visual { animation:none!important; transform:scale(1.12); }
.mobile-editing .mobile-icon { touch-action:none; }
.mobile-icon:focus-visible,.mobile-task-open:focus-visible,.mobile-edit-done:focus-visible { outline:2px solid #b9d7ff; outline-offset:3px; }
@keyframes mobile-unlock-shimmer { from{background-position:130% 0}to{background-position:-100% 0} }
@keyframes mobile-launch-spin { to{transform:rotate(360deg)} }
@keyframes mobile-icon-wiggle { from{transform:rotate(-1.7deg)}to{transform:rotate(1.7deg)} }
@media(prefers-reduced-motion:reduce) { .mobile-system:not([data-mobile-motion="full"]) * { animation:none!important; transition:none!important; } }
.mobile-system[data-mobile-motion=reduce] * { animation:none!important; transition:none!important; }
.mobile-system[data-mobile-motion=reduce].mobile-switcher-open .window { transition:none!important; }