/* The desktop pet's own bubble, status, options and listening-trail styles, from src/vendor/ui/pet.css
   (the revision in THIRD_PARTY_NOTICES.md), scoped to .pet-ui so they leave the page's own styles alone.
   The colours are the pet's light theme. Sizes for the website are set in hero.css. */
.pet-ui{
  --bg:#F3F2F6; --surface:#FFFFFF; --text:#1B1626; --muted:#6A6577; --line:#E2DFE8;
  --skin-ink:#1B1626; --skin-eye:#00A870; --shadow:rgba(27,22,38,.12);
  font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  color:var(--text); line-height:1.55;
}
:root[data-theme="dark"] .pet-ui{
  --bg:#0D1117; --surface:#151A22; --text:#E9EDF2; --muted:#8C95A3; --line:#252C37;
  --skin-ink:#FFFFFF; --skin-eye:#2FD59B; --shadow:rgba(0,0,0,.32);
}
/* the whale's blue lends the accents (option numbers, a chosen option, the status icons) */
:root[data-skin="whale"] .pet-ui{--skin-eye:#4D6BFE}
:root[data-skin="whale"][data-theme="dark"] .pet-ui{--skin-eye:#7D94FF}
/* a bubble is Coo talking, not page text: it is not selected with the page (inputs in it still are) */
.pet-ui .bubble, .pet-ui .tools{user-select:none; -webkit-user-select:none}
.pet-ui svg[viewBox="0 0 24 24"][stroke="currentColor"]{stroke-width:1.6px}
.pet-ui svg[viewBox="0 0 24 24"][stroke="currentColor"] *{vector-effect:non-scaling-stroke}
/* activity borrows the speech bubble, but never takes the pointer or competes with dialogue */
.pet-ui .bubble.status{
  display:flex; align-items:center; gap:6px;
  max-width:min(220px, calc(100vw - 20px)); padding:6px 10px;
  font-size:12.5px; line-height:1.4; pointer-events:none; user-select:none; transition:opacity .2s;
}
.pet-ui .status[hidden]{display:none}
.pet-ui .status.fading{opacity:0}
.pet-ui .bubble.status.pop{animation:status-in .24s cubic-bezier(.3,1.4,.5,1)}
.pet-ui .status-text{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pet-ui .status-icon{display:flex; flex:none; color:color-mix(in srgb, var(--skin-eye) 78%, var(--skin-ink))}
.pet-ui .status-icon svg{width:14px; height:14px; overflow:visible}
.pet-ui .status[data-kind="think"]{justify-content:center}
.pet-ui .status[data-kind="think"] .status-text{display:none}
.pet-ui .status[data-kind="think"] .status-icon svg{width:24px}
.pet-ui .status-icon svg, .pet-ui .status-icon svg *{transform-box:fill-box; transform-origin:center}
.pet-ui .status[data-kind="think"] circle{animation:status-think 1.3s ease-in-out infinite}
.pet-ui .status[data-kind="think"] circle:nth-child(2){animation-delay:.16s}
.pet-ui .status[data-kind="think"] circle:nth-child(3){animation-delay:.32s}
.pet-ui .status .scan{animation:status-read 1.8s ease-in-out infinite}
.pet-ui .status .flap{transform-origin:center bottom; animation:status-browse 1.6s ease-in-out infinite}
.pet-ui .status[data-kind="search"] svg{animation:status-search 2s linear infinite}
.pet-ui .status[data-kind="write"] svg{animation:status-write 1.2s ease-in-out infinite}
.pet-ui .status .lid{transform-origin:left bottom; animation:status-delete 1.5s ease-in-out infinite}
.pet-ui .status .arrow{animation:status-save 1.5s ease-in-out infinite}
.pet-ui .status .pupil{animation:status-look 2.2s ease-in-out infinite}
.pet-ui .status .ripple{animation:status-click 1.2s ease-out infinite}
.pet-ui .status .wheel{animation:status-scroll 1.1s ease-in-out infinite}
.pet-ui .status .keycap{animation:status-type .9s ease-in-out infinite}
.pet-ui .status[data-kind="wait"] svg{animation:status-wait 2.8s ease-in-out infinite}
.pet-ui .status[data-kind="alarm"] svg{animation:status-alarm 1.8s ease-in-out infinite}
.pet-ui .status[data-kind="work"] svg{animation:status-work 4s linear infinite}
@keyframes status-in{from{transform:translateY(3px) scale(.92); opacity:0}}
@keyframes status-think{0%,60%,100%{transform:none; opacity:.45} 30%{transform:translateY(-3px); opacity:1}}
@keyframes status-read{0%,100%{transform:translateY(0); opacity:.5} 70%{transform:translateY(6px); opacity:1}}
@keyframes status-browse{50%{transform:scaleY(.72) skewX(-8deg)}}
@keyframes status-search{0%,100%{transform:translate(-1px,0)} 25%{transform:translate(0,-1px)} 50%{transform:translate(1px,0)} 75%{transform:translate(0,1px)}}
@keyframes status-write{0%,100%{transform:translate(-1px,1px) rotate(-5deg)} 50%{transform:translate(1px,-1px) rotate(5deg)}}
@keyframes status-delete{20%,60%{transform:rotate(-12deg)} 40%,80%{transform:none}}
@keyframes status-save{0%{transform:translateY(-3px); opacity:.3} 70%,100%{transform:translateY(2px); opacity:1}}
@keyframes status-look{25%{transform:translateX(-2px)} 75%{transform:translateX(2px)}}
@keyframes status-click{0%{transform:scale(.7); opacity:0} 35%{opacity:1} 100%{transform:scale(1.4); opacity:0}}
@keyframes status-scroll{0%{transform:translateY(-1px) scaleY(1); opacity:.4} 50%{transform:translateY(2px) scaleY(.5); opacity:1} 100%{transform:translateY(-1px) scaleY(1); opacity:.4}}
@keyframes status-type{40%,65%{transform:translateY(3px)}}
@keyframes status-wait{0%,30%{transform:rotate(0)} 60%,100%{transform:rotate(180deg)}}
@keyframes status-alarm{10%,30%{transform:rotate(-10deg)} 20%,40%{transform:rotate(10deg)} 50%,100%{transform:none}}
@keyframes status-work{to{transform:rotate(360deg)}}

/* bubbles; the min-width keeps an empty one (its line not typed yet) wide enough for the tail to sit on its bottom edge */
.pet-ui .bubble{
  position:fixed; left:0; top:0; z-index:3; width:max-content; min-width:46px; max-width:min(300px, calc(100vw - 20px));
  padding:10px 14px; border-radius:18px; background:var(--surface); color:var(--text);
  border:2.5px solid var(--skin-ink); box-shadow:0 8px 22px var(--shadow);
  font-size:14.5px; line-height:1.55;
  transform-origin:var(--tail, 50%) calc(100% + 10px);
}
/* tail: an outline triangle whose base lies inside the border, so its sides join the border, and a
   surface triangle one line width inside it that opens the border between the sides. Neither is
   rotated. y=0 is the padding edge, the border spans 0..2.5, the tip sits 8.5px past the border, at
   --tail from the outer left edge (the same point transform-origin scales from). The outline's base
   sits .75px into the border: the border is drawn on whole device pixels and the triangle is not, so a
   base on the border's inner edge showed as a nub above the line at each corner of the tail. */
.pet-ui .bubble::before, .pet-ui .bubble::after{
  content:""; position:absolute; left:calc(var(--tail, 50%) - 13.5px); bottom:-11px; width:22px; height:11.5px;
}
.pet-ui .bubble::before{background:var(--skin-ink); clip-path:path('M0.75 1.25 L8.9 9.4 Q11 11.5 13.1 9.4 L21.25 1.25 Z')}
.pet-ui .bubble::after{background:var(--surface); clip-path:path('M3.04 0 L10.53 7.49 Q11 7.96 11.47 7.49 L18.96 0 Z')}
.pet-ui .bubble.heard{border-style:dashed; box-shadow:none; max-width:min(260px, calc(100vw - 20px))}
.pet-ui .bubble.heard::before, .pet-ui .bubble.heard::after{display:none}
.pet-ui .bubble.ask{min-width:min(236px, calc(100vw - 20px)); padding-right:32px}
.pet-ui .bubble.pop{animation:bubble-in .26s cubic-bezier(.3,1.5,.5,1)}
@keyframes bubble-in{from{transform:scale(.5); opacity:0}}
.pet-ui .b-text{margin:0; min-height:1.55em; white-space:pre-wrap; text-wrap:pretty}
.pet-ui .b-text .interim{color:var(--muted)}
.pet-ui .caret{display:inline-block; width:2px; height:1.05em; margin-left:2px; vertical-align:-2px; background:var(--skin-eye); animation:caret 1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
.pet-ui .b-hint{display:block; margin-top:2px; font-size:12px; color:var(--muted)}
.pet-ui .b-close{position:absolute; top:5px; right:6px; width:24px; height:24px; padding:0; border:0; border-radius:50%; background:none; color:var(--muted); font-size:18px; line-height:1; cursor:pointer}
.pet-ui .b-close:hover{color:var(--text)}
.pet-ui .b-opts{display:flex; flex-direction:column; gap:6px; margin:10px -18px 2px 0}
.pet-ui .b-opt, .pet-ui .b-own{animation:opt-in .24s cubic-bezier(.3,1.4,.5,1) both; transition:border-color .15s, opacity .2s}
@keyframes opt-in{from{transform:translateY(6px) scale(.92); opacity:0}}
.pet-ui .b-opt{
  display:flex; align-items:center; gap:8px; width:100%; text-align:left; font:inherit; font-size:14px;
  padding:6px 10px; border-radius:11px; border:1.5px solid var(--line); background:var(--bg); color:var(--text); cursor:pointer;
}
.pet-ui .b-opt:hover, .pet-ui .b-opt.chosen{border-color:var(--skin-eye)}
.pet-ui .b-opt kbd{
  flex:none; display:grid; place-items:center; width:20px; height:20px; border-radius:50%;
  border:2px solid var(--skin-eye); font:500 11px/1 ui-monospace,Consolas,monospace; color:var(--text);
}
.pet-ui .b-own{display:flex; align-items:center; gap:6px; padding:3px 3px 3px 10px; border-radius:11px; border:1.5px dashed var(--line); background:var(--bg)}
.pet-ui .b-own:focus-within, .pet-ui .b-own.chosen{border-style:solid; border-color:var(--skin-eye)}
.pet-ui .b-own input{flex:1; min-width:0; border:0; background:transparent; font:inherit; font-size:14px; color:var(--text); outline:none; padding:4px 0}
.pet-ui .b-own button[type="submit"]{flex:none; font:inherit; font-size:12.5px; padding:4px 10px; border-radius:8px; border:0; background:var(--text); color:var(--surface); cursor:pointer}
.pet-ui .b-expand{flex:none; display:grid; place-items:center; width:26px; height:26px; padding:0; border:0; border-radius:50%; background:none; color:var(--muted); cursor:pointer}
.pet-ui .b-expand:hover{color:var(--text)}
.pet-ui .b-expand svg{width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.6px; stroke-linecap:round; stroke-linejoin:round}
.pet-ui .b-expand svg *{vector-effect:non-scaling-stroke}
.pet-ui .b-opt.dim, .pet-ui .b-own.dim{opacity:.35}
.pet-ui .trail{position:fixed; inset:0; pointer-events:none; z-index:3}
.pet-ui .trail i{position:absolute; border-radius:50%; border:2.5px solid var(--skin-ink); background:var(--surface); animation:trail-bob 1.2s ease-in-out infinite}
.pet-ui .trail i:nth-child(2){animation-delay:.15s}
.pet-ui .trail i:nth-child(3){animation-delay:.3s}
@keyframes trail-bob{50%{transform:translateY(-3px)}}

/* hover tools, from pet.css */
@keyframes dress-hue{
  0%{color:#FF6B8B; border-color:#FF6B8B} 20%{color:#FF9F43; border-color:#FF9F43} 40%{color:#FFC43D; border-color:#FFC43D}
  60%{color:#2FD59B; border-color:#2FD59B} 80%{color:#4CC9F0; border-color:#4CC9F0} 100%{color:#B388FF; border-color:#B388FF}
}
@keyframes dress-wiggle{25%{transform:rotate(-12deg)} 75%{transform:rotate(12deg)}}
.pet-ui .tools{position:fixed; left:0; top:0; z-index:4; display:grid; grid-auto-flow:column; gap:8px; animation:bubble-in .18s cubic-bezier(.3,1.5,.5,1)}
.pet-ui .tools[hidden]{display:none}
.pet-ui .tool{
  position:relative; display:grid; place-items:center; width:34px; height:34px; padding:0; border-radius:50%; cursor:pointer;
  background:var(--surface); color:var(--text); border:2px solid var(--skin-ink); box-shadow:0 6px 16px var(--shadow);
}
.pet-ui .tool .ic{position:relative; display:grid; place-items:center}
.pet-ui .tool:hover{color:var(--skin-eye); border-color:var(--skin-eye)}
.pet-ui .tool svg{width:20px; height:20px; display:block}
/* the hover tools: three rows of two, as on the desktop (the homepage's #pet-tools layout) */
.pet-ui .tools{pointer-events:auto; grid-template-rows:repeat(3, auto)}
.pet-ui .tool[data-action="dress"]:hover{animation:dress-hue 1.6s linear infinite}
.pet-ui .tool[data-action="dress"]:hover .ic{animation:dress-wiggle .5s ease-in-out}