/* AI Pet Companion v0.7 — frosted-glass UI, compact one-row sheets, locked camera */
:root {
  --ink: #fff8ef;
  --soft-ink: #f1e3d5;
  --nav-height: clamp(64px, 8.45dvh, 76px);
  --sub-height: clamp(55px, 7.2dvh, 64px);
  --nav-bottom: calc(15px + env(safe-area-inset-bottom, 0px));
  --nav-gap: clamp(8px, 3.1vw, 16px);
  --frost-bg: linear-gradient(151deg, rgba(144,124,112,.64) 0%, rgba(102,82,73,.54) 46%, rgba(68,51,45,.60) 100%);
  --frost-edge: rgba(255,244,227,.50);
  --frost-highlight: rgba(255,252,240,.42);
  --gold-bg: linear-gradient(149deg, rgba(249,201,128,.92), rgba(224,158,77,.88) 54%, rgba(187,114,59,.83));
  --glass-blur: blur(19px) saturate(155%);
}
* { box-sizing: border-box; }
html, body { width:100%; height:100%; margin:0; overflow:hidden; font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",Inter,Arial,sans-serif; -webkit-font-smoothing:antialiased; background:#3b302c; color:var(--ink); }
button { font:inherit; color:inherit; cursor:pointer; border:0; -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
button:focus-visible { outline:2px solid #ffe0a5;outline-offset:2px; }
.hidden { display:none !important; }
.svg-defs { position:absolute;left:0;top:0;width:0;height:0;overflow:hidden; }
.svg-icon { width:25px;height:25px;stroke:currentColor;stroke-width:1.85;stroke-linecap:round;stroke-linejoin:round;fill:none; flex-shrink:0; }
.svg-icon.tiny { width:15px;height:15px;stroke-width:2.1; }
.desktop-surround { height:100dvh;width:100%;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 26%,#9c816d,#34251f 85%); }
.app { width:min(100%,460px);height:100dvh;max-height:100dvh;position:relative;isolation:isolate;overflow:hidden;background:#b5a28c;box-shadow:0 10px 55px #261b1666; }
.photo-bg { position:absolute;inset:0;z-index:0;background:#c5aa8e url('./assets/living-day.webp') center center / cover no-repeat;transition:background-image .15s ease; }
.bg-shading { position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(50,40,32,.10) 0%,transparent 16%,transparent 70%,rgba(57,34,25,.04) 80%,rgba(49,32,28,.17) 100%); }
.scene-stage { position:absolute;inset:0;z-index:2;overflow:hidden;touch-action:manipulation; }
.scene-stage canvas { position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none; }
/* All control tiers are from one frosted material family (not opaque solid-brown blocks). */
.control-surface, .secondary-row {
  background:var(--frost-bg);
  color:var(--ink);
  border:1px solid var(--frost-edge);
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
  box-shadow:inset 0 1px 0 var(--frost-highlight),inset 0 -1px 0 rgba(34,23,21,.10),0 5px 16px rgba(40,29,24,.18),0 1px 3px rgba(36,24,18,.12);
}
.top-controls { position:absolute;z-index:10;top:calc(18px + env(safe-area-inset-top, 0px));left:calc(17px + env(safe-area-inset-left, 0px));right:calc(17px + env(safe-area-inset-right, 0px));display:flex;justify-content:space-between;align-items:flex-start;gap:9px;pointer-events:none; }
.top-controls button { pointer-events:auto; }
.pet-profile { display:flex;gap:8px;align-items:center;width:auto;min-width:116px;max-width:178px;height:47px;padding:4px 12px 4px 4px;border-radius:100px;text-align:left; }
.pet-avatar { width:38px;height:38px;border:1.5px solid rgba(255,255,246,.90);border-radius:50%;background:#dac4ac;box-shadow:0 1px 5px #44302750;object-fit:cover;object-position:center;flex-shrink:0; }
.pet-profile-copy { min-width:0;display:flex;align-items:flex-start;flex-direction:column;gap:0;line-height:1.2;white-space:nowrap; }
.pet-profile-copy strong { font-size:15px;font-weight:730;text-shadow:0 1px 2px #30232166; }
.pet-profile-copy small { display:none; }
.pet-profile > .tiny { width:14px;height:14px;margin-left:1px; }
.settings-btn { width:43px;height:43px;display:grid;place-items:center;border-radius:50%; }
.settings-btn .svg-icon { width:23px;height:23px; }
.day-night { position:absolute;z-index:9;top:calc(105px + env(safe-area-inset-top,0px));right:calc(18px + env(safe-area-inset-right,0px));width:49px;padding:3px;display:flex;flex-direction:column;gap:1px;border-radius:25px; }
.time-option { min-height:54px;width:41px;border-radius:21px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:3px;background:transparent;color:var(--soft-ink); }
.time-option .svg-icon { width:21px;height:21px; }
.time-option span { font-size:10px;font-weight:650;text-shadow:0 1px 2px #271b1744; }
.time-option.selected { background:var(--gold-bg);color:#4a3024;border:1px solid rgba(255,239,191,.82);box-shadow:inset 0 1px 0 #fff5d1a6,0 0 12px rgba(255,184,87,.66); }
.time-option.selected span { text-shadow:none; }
.pet-menu { position:absolute;z-index:16;top:calc(73px + env(safe-area-inset-top,0px));left:calc(17px + env(safe-area-inset-left,0px));max-width:calc(100% - 32px);display:flex;gap:6px;padding:7px;border-radius:18px; }
.pet-option { min-width:76px;display:flex;align-items:center;flex-direction:column;gap:4px;border-radius:13px;padding:7px 7px 6px;background:rgba(61,46,41,.20);border:1px solid rgba(255,241,222,.30);color:var(--ink);font-size:11px; }
.pet-option .face { width:37px;height:37px;display:block;object-fit:cover;object-position:center;border-radius:50%;border:1px solid #fff8e6c7;background:#c7ae94; }
.pet-option.selected { background:linear-gradient(145deg,rgba(251,204,135,.85),rgba(209,131,65,.80));border-color:rgba(255,240,207,.95);color:#46291b;box-shadow:0 0 9px #f7bb777d; }
/* Four bottom buttons, compact and detached from each other, with no giant bar. */
.main-nav { position:absolute;z-index:11;left:50%;transform:translateX(-50%);bottom:var(--nav-bottom);width:min(338px,calc(100% - 38px));height:var(--nav-height);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--nav-gap); }
.nav-action { min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;border-radius:19px;position:relative;transition:transform .12s ease,background .18s ease; }
.nav-action:active { transform:translateY(1px); }
.nav-action .svg-icon { width:27px;height:27px;stroke-width:2;filter:drop-shadow(0 1px 1px #41322944); }
.nav-action span { font-size:12px;font-weight:730;line-height:1.1;letter-spacing:.1px;white-space:nowrap;text-shadow:0 1px 3px #291d1980; }
.nav-action.active { background:var(--gold-bg);color:#4b3021;border-color:rgba(255,243,209,.94);box-shadow:inset 0 1px 0 #fff6d5d9,inset 0 -1px #a86e4566,0 0 0 1px #ffe5b063,0 0 17px #ffc37c99,0 6px 15px #7551333a; }
.nav-action.active span { text-shadow:none; }
.nav-action.active .svg-icon { filter:drop-shadow(0 1px #fff1d26b); }
/* One-row popover: shorter than first-level buttons; same translucent dark glass. */
.secondary-row { position:absolute;z-index:10;left:50%;transform:translateX(-50%);bottom:calc(var(--nav-bottom) + var(--nav-height) + 12px);height:var(--sub-height);width:min(346px,calc(100% - 34px));padding:5px;display:flex;align-items:stretch;justify-content:space-evenly;gap:5px;border-radius:19px;animation:popIn .17s ease-out; }
.secondary-row::before { content:"";position:absolute;top:3px;left:50%;width:29px;height:3px;border-radius:99px;transform:translateX(-50%);background:rgba(255,247,231,.43);pointer-events:none; }
.sub-option { flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1px;padding:2px 1px;border-radius:13px;background:linear-gradient(155deg,rgba(124,105,94,.28),rgba(77,60,54,.26));border:1px solid rgba(255,240,218,.24);color:var(--ink);box-shadow:inset 0 1px rgba(255,249,234,.15);transition:background .14s ease; }
.sub-option .sub-icon { height:25px;line-height:25px;font-size:23px;flex-shrink:0;display:flex;align-items:center;justify-content:center;filter:drop-shadow(0 1px 2px #32221c35); }
.sub-option .sub-title { font-size:12px;font-weight:680;line-height:1.16;max-width:100%;min-height:14px;white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:normal;word-break:keep-all;text-align:center;text-shadow:0 1px 2px #30201755; }
.sub-option.selected { background:var(--gold-bg);color:#553424;border-color:rgba(255,244,219,.88);box-shadow:inset 0 1px #fff6dfd9,0 0 9px #ffcc8580,0 2px 7px rgba(93,54,32,.17); }
.sub-option.selected .sub-title { text-shadow:none; }
.sub-option.scene-option .sub-icon { width:87%;max-width:58px;height:24px;border-radius:6px;display:block;border:1px solid rgba(255,244,220,.46);background-size:cover;background-position:center;box-shadow:0 1px 4px #2b1b1b55; }
.toast { position:absolute;z-index:18;left:50%;bottom:calc(var(--nav-bottom) + var(--nav-height) + var(--sub-height) + 28px);transform:translateX(-50%);padding:7px 12px;max-width:80%;font-size:11px;font-weight:650;line-height:1.4;text-align:center;white-space:normal;border-radius:99px;color:#fff7ed;background:rgba(70,54,46,.73);-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);border:1px solid #ffefd2aa;box-shadow:0 4px 12px #291a1533;pointer-events:none; }
.settings-panel { position:absolute;z-index:17;top:calc(73px + env(safe-area-inset-top,0px));right:calc(16px + env(safe-area-inset-right,0px));width:min(242px,calc(100% - 32px));padding:13px;border-radius:18px; }
.panel-top { display:flex;align-items:center;justify-content:space-between;margin-bottom:8px; }
.panel-top strong { font-size:15px; }
.small-close { height:28px;width:28px;border-radius:9px;background:#fff2e42e;font-size:22px; }
.setting-line { display:flex;align-items:center;justify-content:space-between;width:100%;padding:10px 4px;border-bottom:1px solid #fff3e029;background:transparent;font-size:12px; }
.setting-line strong { font-size:11px;color:#ffe3b0; }
.demo-note { display:block;font-size:10px;line-height:1.55;color:#f5e4d7;margin-top:10px; }
.webgl-warning { position:absolute;z-index:7;left:10%;right:10%;top:42%;font-size:12px;text-align:center;padding:14px;border-radius:15px;background:#493329b8;border:1px solid #d4b397;color:white;line-height:1.55; }
.fallback-pet { position:absolute;z-index:3;left:50%;top:55.25%;height:41%;max-height:none;max-width:84%;width:auto;object-fit:contain;transform:translate(-50%,-50%);filter:drop-shadow(0 5px 4px rgba(60,38,25,.19));pointer-events:auto;touch-action:none;animation:fallbackBreath 3.1s ease-in-out infinite;user-select:none;-webkit-user-drag:none; }
.fallback-pet[data-action="pet"] { animation:fallbackWag .42s ease-in-out 3; }
.fallback-pet[data-action="feed"] { animation:fallbackEat .43s ease-in-out 4; }
.fallback-pet[data-action="play"] { animation:fallbackPlay .65s ease-in-out 3; }
.fallback-pet[data-action="rest"] { animation:none;transform:translate(-50%,-46%) scale(.95) rotate(2deg); }
@keyframes fallbackBreath { 50% { transform:translate(-50%,-50%) scale(1.013); } }
@keyframes fallbackWag { 25% { transform:translate(-50%,-50%) rotate(-2.6deg); } 75% { transform:translate(-50%,-50%) rotate(2.6deg); } }
@keyframes fallbackEat { 50% { transform:translate(-50%,-46%) rotate(1.5deg); } }
@keyframes fallbackPlay { 50% { transform:translate(-50%,-53%) rotate(-2deg); } }
.floating-heart { position:absolute;z-index:12;color:#ffb7a1;font-size:28px;pointer-events:none;text-shadow:0 2px 7px #59251599;transform:translate(-50%,-50%);animation:heartRise .8s ease-out forwards; }
@keyframes heartRise { to { opacity:0;transform:translate(-50%,-120%) scale(1.3); } }
@keyframes popIn { from { opacity:0;translate:0 7px; } to {opacity:1;translate:0 0;} }
/* Narrow screens: avoid cropping by reducing gaps before font size. */
@media (max-width:355px) {
  :root { --nav-gap:8px;--nav-height:64px;--sub-height:56px; }
  .main-nav { width:calc(100% - 30px); }
  .secondary-row { width:calc(100% - 22px);gap:3px;padding:4px; }
  .pet-profile { height:43px;min-width:110px; }
  .pet-avatar { width:34px;height:34px; }
  .pet-profile-copy strong { font-size:14px; }
  .day-night { right:10px; }
  .top-controls { right:10px;left:10px; }
  .nav-action { border-radius:16px; }
  .nav-action .svg-icon { width:24px;height:24px; }
  .nav-action span { font-size:11px; }
  .sub-option .sub-icon { font-size:22px;line-height:22px;height:22px; }
  .sub-option .sub-title { font-size:11px; line-height:1.17; }
  .sub-option.scene-option .sub-icon { height:22px; }
}
@media (max-height:690px) {
  :root { --nav-height:61px;--sub-height:52px;--nav-bottom:calc(10px + env(safe-area-inset-bottom, 0px)); }
  .day-night { top:calc(91px + env(safe-area-inset-top,0px)); }
  .fallback-pet { height:41%;top:55.25%; }
}
@media (min-width:600px) {
  .app { border-radius:18px;height:min(100dvh - 26px,960px);max-height:960px;width:min(100%,420px);border:1px solid #ffedde52; }
}
@media (prefers-reduced-motion:reduce) {
  .fallback-pet,.secondary-row,.floating-heart { animation:none; }
}

.sub-icon .menu-item-img {display:block;width:30px;height:25px;object-fit:contain;filter:drop-shadow(0 1px 2px rgba(54,36,25,.20));}

/* Soft ground contact shown only for the fallback photo; real WebGL pet has its own contact shadow. */
.pet-foot-shadow { position:absolute;z-index:2;left:50%;top:75.9%;width:40%;height:15px;border-radius:50%;transform:translate(-50%,-50%);background:rgba(80,54,39,.15);filter:blur(11px);pointer-events:none; }

/* Codex real GLB render canvas stays within the original fixed-view scene layer. */
.scene-stage canvas.pet-pbr-canvas { z-index:2; pointer-events:auto; touch-action:none; }

/* v0.8: real GLB loading indicator, no screenshot pet fallback. */
.model-loader { position:absolute;z-index:8;left:50%;top:55%;transform:translate(-50%,-50%);width:min(240px,calc(100% - 80px));border-radius:19px;padding:14px 15px 12px;text-align:center;pointer-events:none;color:#fff7ea; }
.model-loader.hidden { display:none !important; }
.load-title {font-size:13px;font-weight:700;letter-spacing:.2px;text-shadow:0 1px 2px #32201770;margin-bottom:10px;}
.load-meter {height:7px;width:100%;background:rgba(22,20,21,.30);border-radius:99px;overflow:hidden;border:1px solid rgba(255,239,201,.25);}
.load-fill {height:100%;width:0%;background:linear-gradient(90deg,#e4ab69,#ffe0a1);border-radius:99px;box-shadow:0 0 8px #ffd2a875;transition:width .18s ease;}
.load-meter.is-indeterminate .load-fill {width:37%;animation:modelLoading 1.2s ease-in-out infinite;}
@keyframes modelLoading {from {transform:translateX(-110%)} to {transform:translateX(285%)}}
.load-detail {font-size:10px;line-height:1.4;min-height:15px;margin-top:8px;color:#fff1db;text-shadow:0 1px 2px #291a1959;}
.load-retry {pointer-events:auto;background:rgba(255,214,142,.89);color:#513520;font-size:12px;font-weight:700;border-radius:9px;margin:9px auto 2px;padding:8px 14px;}
@media(prefers-reduced-motion:reduce) {.load-meter.is-indeterminate .load-fill {animation:none;width:100%;transform:none;opacity:.55;} }


/* v0.9 flow demo onboarding */
.empty-state { position:absolute; z-index:7; left:50%; top:45%; transform:translate(-50%,-50%); width:min(300px,calc(100% - 48px)); padding:14px 16px; border-radius:18px; text-align:center; pointer-events:none; }
.empty-state.hidden { display:none !important; }
.empty-title { font-size:16px; font-weight:760; margin-bottom:6px; }
.empty-copy { font-size:12px; line-height:1.55; color:#fff0df; }
.flow-overlay { position:absolute; inset:0; z-index:19; display:flex; align-items:flex-end; justify-content:center; padding:calc(110px + env(safe-area-inset-top,0px)) 14px calc(112px + env(safe-area-inset-bottom,0px)); background:linear-gradient(180deg, rgba(34,23,18,.10) 0%, rgba(29,20,17,.18) 32%, rgba(23,15,13,.28) 100%); }
.flow-overlay.hidden { display:none !important; }
.flow-card { width:min(100%,380px); border-radius:24px; padding:16px 16px 14px; }
.flow-head { margin-bottom:14px; }
.flow-kicker { font-size:11px; font-weight:700; color:#ffe2b7; letter-spacing:.4px; margin-bottom:5px; }
.flow-title { margin:0; font-size:20px; line-height:1.2; }
.flow-desc { margin:7px 0 0; font-size:12px; line-height:1.6; color:#f6e5d4; }
.photo-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.photo-choice { display:flex; flex-direction:column; gap:7px; padding:8px; border-radius:17px; border:1px solid rgba(255,239,219,.22); background:linear-gradient(155deg,rgba(124,105,94,.28),rgba(77,60,54,.24)); color:var(--ink); text-align:left; }
.photo-choice img { width:100%; aspect-ratio:1 / 1; object-fit:cover; border-radius:13px; border:1px solid rgba(255,244,225,.50); background:#c9b39e; }
.photo-choice strong { font-size:14px; }
.photo-choice span { font-size:11px; line-height:1.4; color:#f0dfcf; }
.photo-choice.selected { background:var(--gold-bg); color:#4b3021; border-color:rgba(255,245,219,.92); box-shadow:inset 0 1px #fff6dfd9,0 0 12px rgba(255,193,123,.42); }
.photo-choice.selected span { color:#5a3b28; }
.flow-actions { display:flex; gap:10px; margin-top:14px; }
.flow-btn { flex:1; min-height:44px; border-radius:14px; font-weight:720; }
.flow-btn.primary { background:var(--gold-bg); color:#4c3021; border:1px solid rgba(255,238,199,.88); box-shadow:inset 0 1px #fff6d9; }
.flow-btn.secondary { background:rgba(255,244,224,.10); color:var(--ink); border:1px solid rgba(255,240,220,.22); }
.flow-btn:disabled { opacity:.45; cursor:default; }
.flow-preview-mini { width:110px; margin:2px auto 12px; }
.flow-preview-mini img { display:block; width:100%; aspect-ratio:1 / 1; object-fit:cover; border-radius:18px; border:1px solid rgba(255,241,222,.55); background:#ccb29c; }
.flow-preview-mini.is-model img { border-radius:50%; }
.flow-progress-wrap { display:flex; flex-direction:column; gap:8px; }
.flow-progress { height:10px; border-radius:999px; overflow:hidden; background:rgba(25,18,15,.28); border:1px solid rgba(255,238,210,.22); }
.flow-progress-fill { width:0%; height:100%; border-radius:999px; background:linear-gradient(90deg,#d79255,#f6c98a,#ffe5b0); box-shadow:0 0 10px rgba(255,199,130,.45); transition:width .22s ease; }
.flow-progress-meta { display:flex; flex-direction:column; gap:5px; align-items:center; text-align:center; }
.flow-progress-meta strong { font-size:14px; color:#ffe1b2; }
.flow-progress-meta span { font-size:12px; line-height:1.55; color:#f7e6d7; }
.sheet-preview { border-radius:18px; overflow:hidden; background:rgba(255,245,232,.06); border:1px solid rgba(255,242,220,.28); }
.sheet-preview img { display:block; width:100%; height:auto; }
.sheet-note { margin-top:10px; font-size:12px; line-height:1.6; color:#f3e1d0; }
.control-disabled { opacity:.48; pointer-events:none; }
.pet-profile.control-disabled, .main-nav.control-disabled, .day-night.control-disabled, .settings-btn.control-disabled { filter:saturate(.65); }
@media (max-width:355px) {
  .flow-overlay { padding-left:10px; padding-right:10px; }
  .flow-card { padding:14px 13px 13px; }
  .photo-grid { gap:6px; }
  .photo-choice { padding:7px; }
  .flow-title { font-size:18px; }
}

/* v0.9.1: single visual system for onboarding and interaction. */
.pet-profile.control-disabled { opacity:.88; filter:none; }
.pet-profile.control-disabled .pet-avatar { opacity:.90; }
.flow-overlay { z-index:19; padding:calc(124px + env(safe-area-inset-top,0px)) 12px calc(104px + env(safe-area-inset-bottom,0px)); background:linear-gradient(180deg,rgba(35,25,20,.08),rgba(36,25,18,.12) 35%,rgba(27,20,15,.24) 100%); }
.flow-card { width:min(100%,394px); max-height:100%; overflow:auto; scrollbar-width:none; border-radius:24px; padding:15px 15px 13px; box-shadow:inset 0 1px rgba(255,253,240,.55),0 12px 42px #35211850; }
.flow-card::-webkit-scrollbar { display:none; }
.flow-steps { display:flex; gap:5px; align-items:center; justify-content:center; margin:0 0 13px; }
.flow-steps i { flex:1; max-width:17px; height:1px; background:#fff2db71; }
.flow-step-pill { display:flex; gap:4px; align-items:center; color:#e3d3c5; opacity:.70; white-space:nowrap; font-size:10px; font-weight:660; }
.flow-step-pill b { display:grid; place-items:center; width:21px; height:21px; font-size:10px; border-radius:50%; border:1px solid #fff2db77; font-variant-numeric:tabular-nums; }
.flow-step-pill.active { color:#ffe0ab; opacity:1; }
.flow-step-pill.active b { background:var(--gold-bg);color:#4b3021;border-color:#ffeaca;box-shadow:0 0 10px #ffd09c9a; }
.flow-step-pill.done { color:#fff1d4;opacity:.88; }
.flow-head { margin-bottom:13px; }
.flow-title { font-size:19px; }
.flow-desc { font-size:11.5px; }
.photo-choice { padding:6px;border-radius:14px;gap:5px;position:relative; }
.photo-choice img { aspect-ratio:4/5; border-radius:10px; object-position:center 42%; }
.photo-choice strong { font-size:12.5px; }
.photo-choice span { font-size:10px; line-height:1.3; }
.photo-choice.selected::after { content:'✓'; position:absolute;right:11px;top:10px;color:#503323;background:#ffe2a2;border-radius:99px;display:grid;place-items:center;width:19px;height:19px;font-size:13px;font-weight:900;box-shadow:0 1px 5px #28181170; }
.flow-actions { margin-top:12px; }
.flow-footnote { text-align:center;color:#f2ddc6;font-size:10px;line-height:1.4;margin:9px 0 0; }
.flow-preview-mini { position:relative;width:132px;overflow:hidden;border-radius:16px; }
.flow-preview-mini img {border-radius:16px;aspect-ratio:4/5;max-height:170px;}
.flow-scanline {position:absolute;left:0;right:0;top:-5%;height:3px;background:#ffe2a6;box-shadow:0 0 8px 4px #f7d28e9c;animation:scanPhoto 2.0s ease-in-out infinite alternate;}
@keyframes scanPhoto { to{top:101%;} }
.sheet-preview {border-radius:13px;background:#d6d3d2;}
.sheet-preview img {aspect-ratio:4/3;object-fit:contain;}
.sheet-labels {display:flex;justify-content:space-between;gap:5px;margin-top:7px;font-size:10px;color:#fce9ca;font-weight:650;}
.sheet-note {font-size:11px;margin-top:8px;}
.flow-model-icon {display:flex;align-items:center;justify-content:center;width:108px;height:108px;margin:0 auto 14px;border-radius:23px;border:1px solid #ffecd061;background:radial-gradient(circle at 28% 20%,#f6c28477,#79574036 67%);color:#ffe6ba;box-shadow:inset 0 1px #fff1d65e,0 4px 18px #30201444;animation:cubeFloat 2.3s ease-in-out infinite;}
@keyframes cubeFloat {50%{transform:translateY(-5px);}}
/* When the server omits Content-Length, indicate real network activity
   without fabricating a numeric percentage. */
#model-progress-meter.is-indeterminate {position:relative;}
#model-progress-meter.is-indeterminate .flow-progress-fill {
  position:absolute;left:0;top:0;width:32% !important;
  animation:actualModelLoading 1.25s ease-in-out infinite;
}
@keyframes actualModelLoading {
  0% {transform:translateX(-110%);}
  100% {transform:translateX(330%);}
}
@media(max-height:700px) {
 .flow-overlay {padding-top:calc(85px + env(safe-area-inset-top,0px));padding-bottom:calc(85px + env(safe-area-inset-bottom,0px));}
 .flow-card {padding:10px 12px;}
 .flow-head {margin-bottom:9px;}
 .flow-steps {margin-bottom:9px;}
 .flow-desc {margin-top:5px;}
 .photo-choice img {aspect-ratio:1/1;}
 .flow-title {font-size:18px;}
 .flow-preview-mini {width:85px;}
 .flow-preview-mini img {max-height:120px;}
 .flow-model-icon {width:76px;height:76px;margin-bottom:8px;}
 .flow-model-icon svg {width:54px;height:54px;}
}
@media(prefers-reduced-motion:reduce) {.flow-scanline,.flow-model-icon {animation:none;}}

/* Ensure the entire secondary-step action row remains visible on compact phones. */
.photo-choice:disabled {opacity:.48;filter:saturate(.45);cursor:default;}
.add-pet-face {display:grid!important;place-items:center;font-size:26px;font-weight:400;color:#ffdfac;background:rgba(255,255,255,.10);}
@media(max-height:700px) {
 .flow-card {padding:9px 11px 10px;}
 .flow-steps {margin-bottom:7px;}
 .flow-head {margin-bottom:7px;}
 .flow-desc {line-height:1.42;font-size:10.6px;}
 .sheet-preview img {height:min(25dvh,145px);aspect-ratio:auto;object-fit:contain;}
 .sheet-labels {margin-top:5px;font-size:9px;}
 .sheet-note {margin-top:5px;font-size:10px;line-height:1.35;}
 .flow-actions {margin-top:8px;}
 .flow-btn {min-height:39px;font-size:12px;}
 .flow-footnote {margin-top:6px;}
 .flow-model-icon {margin:0 auto 7px;}
}