:root { color-scheme: light; font-family: system-ui, sans-serif; background: #b7d9d5; color: #203f3a; }
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; min-width: 0; }
#comet-root, .ai-shell { width: 100%; height: 100dvh; min-width: 0; }
.ai-shell { position: relative; }
.ai-shell > [data-slot="topBar.right"] { position: absolute; z-index: 2; inset: auto max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) auto; }
.ai-shell > [data-slot="topBar.right"] button { font: inherit; font-size: 11px; border: 0; border-radius: 8px; padding: 8px; background: #fff4e7; color: #1E2233; }
#comet-root .ai-shell > [data-slot="screen"] { position: absolute; inset: 0; height: 100%; min-width: 0; }
[data-slot="screen"] > .ui-custom { height: 100%; min-width: 0; }
[data-host]:empty { display: none; }
#boot-status { position: fixed; z-index: 100; inset: 20px 20px auto; margin: auto; max-width: 540px; padding: 18px; border-radius: 16px; background: #fff4e7; border: 1px solid #1e223344; overflow-wrap: anywhere; }
#boot-status[hidden] { display: none; }
#boot-status:empty { display: none; }
.comet-boot-panel { position: fixed; z-index: 100; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; padding: max(24px,env(safe-area-inset-top)) 20px max(32px,env(safe-area-inset-bottom)); overflow: hidden; color: #fff9e6; background: #b7d9d5; font: 800 16px/1.5 system-ui, sans-serif; }
.comet-boot-panel:has(#boot-status[hidden]) { display: none; }
.comet-boot-panel #boot-status { position: relative; inset: auto; z-index: 1; max-width: 360px; padding: 12px 20px; border: 1px solid #fff6d0; border-radius: 999px; color: #284b45; background: #fff9e9ed; text-align: center; box-shadow: 0 8px 24px #16434877; }
.comet-boot-art { position: absolute; inset: 0; overflow: hidden; background: linear-gradient(#77bfd0,#f5d6a4); }
.comet-boot-art img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.comet-boot-ball { position: absolute; left: 50%; top: 37%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: #fff6d2; box-shadow: 0 0 14px 7px #ffc36d,0 0 36px 18px #ff7d28aa; animation: comet-boot-fall 2.2s ease-in-out infinite; }
.comet-boot-ring { position: absolute; left: 50%; top: 68%; width: 90px; height: 22px; margin-left: -45px; border: 3px solid #fff4d8; border-radius: 50%; box-shadow: 0 0 18px #ffefad; animation: comet-boot-pulse 2.2s ease-out infinite; }
@keyframes comet-boot-fall { 0% { transform: translateY(-28px) scale(.8); opacity: 0; } 40% { opacity: 1; } 72% { transform: translateY(130px) scale(1.25); opacity: 1; } 100% { transform: translateY(155px) scale(.7); opacity: 0; } }
@keyframes comet-boot-pulse { 0%,60% { transform: scale(.6); opacity: 0; } 72% { opacity: 1; } 100% { transform: scale(2); opacity: 0; } }
html[data-boot="failed"] .comet-boot-ball,html[data-boot="failed"] .comet-boot-ring { animation: none; display: none; }
@media (prefers-reduced-motion: reduce) { .comet-boot-ball,.comet-boot-ring { animation: none; } }

/* Reveal complete screen surfaces together; keep network work outside the transition. */
:where(.comet-meta-overlay, .comet-settings-overlay, .comet-profile-overlay, .comet-iap-overlay) {
  animation: comet-overlay-arrive .18s ease-out both;
}
:where(.comet-meta-panel, .comet-settings-panel, .comet-profile-panel, .comet-iap-panel) {
  animation: comet-panel-arrive .23s cubic-bezier(.2,.8,.3,1) both;
}
.comet-home-screen:not([hidden]) { animation: comet-home-arrive .2s ease-out both; }
@keyframes comet-overlay-arrive { from { opacity: 0; } to { opacity: 1; } }
@keyframes comet-panel-arrive { from { opacity: .7; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes comet-home-arrive { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  :where(.comet-meta-overlay, .comet-settings-overlay, .comet-profile-overlay, .comet-iap-overlay,
    .comet-meta-panel, .comet-settings-panel, .comet-profile-panel, .comet-iap-panel,
    .comet-home-screen:not([hidden])) { animation: none; }
}