.animal-scope-selector { display:flex; gap:10px; height:64px; overflow-x:auto; overflow-y:hidden; padding:4px 2px; margin-bottom:6px; scrollbar-width:none; overflow-anchor:none; transition:height 320ms cubic-bezier(.22,.8,.25,1); }
.animal-scope-selector.show-animal-names { height:88px; }
.global-search-field + .animal-scope-selector { margin-top:12px; }
.animal-scope-selector > button { position:relative; display:flex; flex-direction:column; align-items:center; flex:0 0 66px; align-self:flex-start; padding:2px 5px; border:0; border-radius:8px; background:transparent; color:#6d8390; font:inherit; font-size:11px; font-weight:400; cursor:pointer; }
.animal-scope-photo { position:relative; display:grid; place-items:center; flex:none; width:52px; height:52px; border-radius:50%; background:#e8eff3; }
.animal-scope-photo::after { content:""; position:absolute; inset:-3px; border:1.5px solid #5995ad; border-radius:50%; opacity:0; transition:opacity 180ms ease; }
.animal-scope-selector > button[aria-pressed="true"] .animal-scope-photo::after { opacity:1; }
.animal-scope-selector > button[aria-pressed="true"] { color:#2d718d; }
.animal-scope-name { display:block; max-width:66px; margin-top:7px; line-height:16px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; opacity:0; transform:translateY(-5px); pointer-events:none; transition:opacity 160ms ease,transform 260ms cubic-bezier(.22,.8,.25,1); }
.show-animal-names .animal-scope-name { opacity:1; transform:translateY(0); transition-delay:50ms; }
@media(prefers-reduced-motion:reduce) { .animal-scope-selector,.animal-scope-name,.animal-scope-photo::after { transition:none; } }
.animal-scope-photo > :is(img,.pet-image,.pet-avatar-placeholder) { width:100%; height:100%; object-fit:cover; border-radius:50%; }
.animal-scope-photo > svg { width:25px; height:25px; }
.animal-scope-selector button:focus-visible { outline:2px solid #4299b9; outline-offset:2px; }
.event-animal { display:flex; align-items:center; gap:6px; margin-top:7px; color:#69818e; font-size:11px; font-weight:400; }
.event-animal i { display:block; width:22px; height:22px; flex:none; overflow:hidden; border-radius:50%; }
.event-animal i > * { width:100%; height:100%; object-fit:cover; }
.app-shell.events-mode { padding-top:calc(env(safe-area-inset-top,0px) + 20px); }
.app-shell.events-mode .topbar { display:none; }
.events-mode .page-heading h1 { font-size:26px; font-weight:600; }