/* ==========================================================================
   DAILY PAWS — TEDDY
   teddy.css · the site dog, his speech bubble and his conversation panel
   --------------------------------------------------------------------------
   Teddy lives on every page, so nothing here may depend on a particular
   page's stylesheet: every token carries its own fallback, and every rule is
   namespaced under .dp-teddy. Placement is measured in teddy.js, which sets
   --dp-teddy-bottom / --dp-teddy-size so he never sits on a board, a
   keyboard or a control row.
   ========================================================================== */

/* Only index.html loads a page-wide box-sizing reset (core.css); every other
   page Teddy sits on does not. Since this file claims to depend on nothing
   from the host page, it supplies its own reset rather than inheriting
   border-box on some pages and content-box on others. */
.dp-teddy, .dp-teddy *, .dp-teddy *::before, .dp-teddy *::after{ box-sizing:border-box }

.dp-teddy{
  --t-paper:var(--paper,#F7F2E8);
  --t-paper-2:var(--paper-2,#F1E8D9);
  --t-ink:var(--ink,#1F150C);
  --t-ink-soft:var(--ink-soft,#3D2D1E);
  --t-muted:var(--muted,#7B6751);
  --t-line:var(--line,rgba(31,21,12,.13));
  --t-rust:var(--rust,#BF4E1C);
  --t-status:#6FA84C;
  --t-night:var(--night,#150E08);
  --t-cream:var(--cream,#F4EAD6);
  --t-display:"Fraunces",Georgia,"Times New Roman",serif;
  --t-sans:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --t-mono:"DM Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --t-out:cubic-bezier(.16,.84,.44,1);
  --t-spring:cubic-bezier(.32,1.32,.5,1);
  --t-shadow:0 26px 60px -28px rgba(43,26,10,.62);

  --dp-teddy-size:56px;
  --dp-teddy-bottom:18px;
  --dp-teddy-right:clamp(16px,1.6vw,20px);

  position:fixed;
  right:var(--dp-teddy-right);
  bottom:calc(var(--dp-teddy-bottom) + env(safe-area-inset-bottom,0px));
  z-index:270;
  font-family:var(--t-sans);
  line-height:1.5;
}
.dp-teddy[hidden]{ display:none !important }

/* Teddy's --t-* tokens now read the shared values from shared/css/tokens.css,
   with the old literals kept only as fallbacks. Four of them had drifted
   (paper, paper-2, line, night) and the status dot was a green that was
   not the palette's moss. */

/* ── The dog: a proper floating chat button, not a page illustration ─────
   A small circular avatar with its own border and shadow, so it reads as a
   deliberate control sitting on top of the page rather than as content that
   happens to be in the way. */
.dp-teddy__dog{
  display:block; position:relative; box-sizing:border-box;
  width:var(--dp-teddy-size); height:var(--dp-teddy-size);
  padding:0; cursor:pointer;
  background:var(--t-paper);
  border:2px solid var(--t-cream); border-radius:50%;
  box-shadow:0 10px 24px -10px rgba(31,21,12,.45), 0 2px 6px rgba(31,21,12,.2);
  overflow:visible;
  transition:transform .3s var(--t-spring), box-shadow .3s var(--t-out), border-color .3s var(--t-out);
  animation:dp-teddy-arrive .8s var(--t-spring) both;
}
/* The circular clip lives on this inner wrapper rather than on the button
   itself, so the "what's new" badge below can sit on the button's edge
   without being cropped away with the portrait. */
.dp-teddy__dog-crop{
  display:block; width:100%; height:100%;
  border-radius:50%; overflow:hidden;
}
.dp-teddy__dog-crop img{
  display:block; width:100%; height:100%;
  object-fit:cover; object-position:center;
  pointer-events:none; user-select:none; -webkit-user-drag:none;
}

/* A small dot for a real, un-seen update in the local announcements list
   (see ANNOUNCEMENTS in teddy.js) — never decorative, never for the AI
   conversation itself. Cleared for good once the update has been shown. */
.dp-teddy__badge{
  position:absolute; top:0; right:0;
  width:13px; height:13px; border-radius:50%;
  background:var(--t-status); border:2px solid var(--t-paper);
  pointer-events:none;
}
.dp-teddy__badge[hidden]{ display:none }
.dp-teddy__dog:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 30px -12px rgba(31,21,12,.5), 0 4px 9px rgba(31,21,12,.24);
  border-color:var(--t-rust);
}
.dp-teddy__dog:active{ transform:translateY(-1px) scale(.97) }
.dp-teddy__dog:focus-visible{
  outline:2px solid var(--t-rust); outline-offset:4px;
}

/* "Talk to Teddy" tooltip, shown on hover or keyboard focus only, and
   hidden once the conversation is open (the panel speaks for itself then). */
.dp-teddy__dog::before{
  content:"Talk to Teddy";
  position:absolute; top:50%; right:calc(100% + 10px);
  transform:translateY(-50%) translateX(4px);
  padding:6px 11px;
  background:var(--t-night); color:var(--cream,#F4EAD6);
  font-family:var(--t-sans); font-size:.75rem; font-weight:500; white-space:nowrap;
  border-radius:8px;
  opacity:0; pointer-events:none;
  transition:opacity .2s var(--t-out), transform .2s var(--t-out);
}
.dp-teddy__dog:hover::before,
.dp-teddy__dog:focus-visible::before{ opacity:1; transform:translateY(-50%) translateX(0) }
.dp-teddy[data-state="open"] .dp-teddy__dog::before{ display:none }
/* A short arrival: a taller one would let him clip the bottom edge on the
   first frames, and on a backgrounded tab that first frame is what shows. */
@keyframes dp-teddy-arrive{
  from{ opacity:0; transform:translateY(10px) scale(.96) }
  to{ opacity:1; transform:none }
}

/* A slow, barely-there breath so he reads as alive rather than as a sticker. */
@media (prefers-reduced-motion:no-preference){
  .dp-teddy[data-state="idle"] .dp-teddy__dog img{
    animation:dp-teddy-breathe 5.5s var(--t-out) 1.2s infinite;
    transform-origin:50% 100%;
  }
}
@keyframes dp-teddy-breathe{
  0%,100%{ transform:scale(1) }
  50%{ transform:scale(1.018) }
}

/* ── Speech bubble ─────────────────────────────────────────────────────── */
.dp-teddy__bubble{
  position:absolute; right:calc(var(--dp-teddy-size) + 14px); bottom:22%;
  width:max-content; max-width:min(230px,46vw);
  padding:11px 14px 12px;
  text-align:left;
  background:var(--t-paper); color:var(--t-ink);
  border:1px solid var(--t-line); border-radius:14px;
  box-shadow:0 18px 38px -22px rgba(43,26,10,.6);
  font-size:.8125rem; line-height:1.45;
  cursor:pointer;
  transform-origin:100% 80%;
  animation:dp-teddy-bubble-in .6s var(--t-spring) both;
  transition:transform .3s var(--t-out), box-shadow .3s var(--t-out);
}
.dp-teddy__bubble:hover{ transform:translateY(-2px) }
.dp-teddy__bubble:focus-visible{ outline:2px solid var(--t-rust); outline-offset:3px }
.dp-teddy__bubble b{
  display:block; margin-bottom:2px;
  font-family:var(--t-mono); font-size:.5625rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--t-rust);
}
/* Tail, drawn in CSS: a small square rotated into the bubble's edge. */
.dp-teddy__bubble::after{
  content:""; position:absolute; right:-6px; bottom:16px;
  width:11px; height:11px; background:var(--t-paper);
  border-right:1px solid var(--t-line); border-bottom:1px solid var(--t-line);
  transform:rotate(-45deg);
}
@keyframes dp-teddy-bubble-in{
  from{ opacity:0; transform:translateY(8px) scale(.86) }
  to{ opacity:1; transform:none }
}
.dp-teddy__bubble-close{
  position:absolute; top:-8px; right:-8px;
  width:22px; height:22px; display:grid; place-items:center;
  background:var(--t-paper); color:var(--t-muted);
  border:1px solid var(--t-line); border-radius:50%;
  font-size:12px; line-height:1; cursor:pointer;
}
.dp-teddy__bubble-close:hover{ color:var(--t-rust) }

/* Narrow screens: the bubble sits above him rather than beside him. */
.dp-teddy[data-bubble="above"] .dp-teddy__bubble{
  right:0; bottom:calc(100% - 6px); max-width:min(240px,72vw);
  transform-origin:80% 100%;
}
.dp-teddy[data-bubble="above"] .dp-teddy__bubble::after{
  right:26px; bottom:-6px; border-right:1px solid var(--t-line);
  border-bottom:1px solid var(--t-line); transform:rotate(45deg);
}

/* ── Conversation panel ────────────────────────────────────────────────── */
.dp-teddy__panel{
  position:absolute; right:0; bottom:calc(100% + 12px);
  display:flex; flex-direction:column;
  width:min(354px,calc(100vw - 24px));
  max-height:min(60vh,470px);
  background:var(--t-paper); color:var(--t-ink);
  border:1px solid var(--t-line); border-radius:16px;
  box-shadow:var(--t-shadow);
  overflow:hidden;
  transform-origin:92% 100%;
  animation:dp-teddy-panel-in .42s var(--t-spring) both;
}
@keyframes dp-teddy-panel-in{
  from{ opacity:0; transform:translateY(14px) scale(.94) }
  to{ opacity:1; transform:none }
}
.dp-teddy__panel[hidden]{ display:none }

.dp-teddy__head{
  display:grid; grid-template-columns:36px minmax(0,1fr) auto 44px;
  align-items:center; column-gap:8px;
  padding:10px 10px 6px 14px;
}
.dp-teddy__avatar{
  width:36px; height:36px; display:block; overflow:hidden;
  border:2px solid var(--t-cream); border-radius:50%;
  background:var(--t-paper-2);
}
.dp-teddy__avatar img{
  display:block; width:100%; height:100%; object-fit:cover;
  pointer-events:none; user-select:none; -webkit-user-drag:none;
}
.dp-teddy__name{
  min-width:0; white-space:nowrap;
  font-family:var(--t-display); font-size:.95rem; font-weight:600;
  letter-spacing:-.01em; line-height:1.1;
}
.dp-teddy__clear{
  min-width:0; justify-self:end; white-space:nowrap;
  padding:4px 8px; border:0; border-radius:8px; background:none;
  font-family:var(--t-mono); font-size:.625rem; letter-spacing:.03em;
  color:var(--t-muted); cursor:pointer;
  transition:background .2s var(--t-out), color .2s var(--t-out);
}
.dp-teddy__clear:hover{ background:rgba(31,21,12,.06); color:var(--t-rust) }
.dp-teddy__min{
  width:44px; height:44px; justify-self:end;
  display:grid; place-items:center;
  border:0; border-radius:50%;
  background:rgba(31,21,12,.06); color:var(--t-ink);
  font-size:25px; line-height:1; cursor:pointer;
  transition:background .2s var(--t-out), color .2s var(--t-out);
}
.dp-teddy__min:hover{ background:rgba(31,21,12,.11); color:var(--t-ink) }
.dp-teddy__min:focus-visible{ outline:2px solid var(--t-rust); outline-offset:2px }

.dp-teddy__log{
  flex:1 1 auto; min-height:96px;
  padding:6px 12px; overflow-y:auto; overscroll-behavior:contain;
  display:flex; flex-direction:column; gap:8px;
  background:var(--t-paper);
  scrollbar-width:thin;
}
.dp-teddy__msg{
  max-width:86%; padding:8px 11px;
  font-size:.875rem; line-height:1.5;
  border-radius:13px; white-space:pre-wrap; word-wrap:break-word;
  animation:dp-teddy-msg-in .34s var(--t-out) both;
}
@keyframes dp-teddy-msg-in{
  from{ opacity:0; transform:translateY(6px) }
  to{ opacity:1; transform:none }
}
.dp-teddy__msg--dog{
  align-self:flex-start;
  background:rgba(232,239,227,.96); border:1px solid rgba(101,126,96,.18);
  border-bottom-left-radius:4px; color:var(--t-ink);
}
.dp-teddy__msg--you{
  align-self:flex-end;
  background:rgba(239,229,213,.96); border:1px solid rgba(135,104,72,.14); color:var(--t-ink);
  border-bottom-right-radius:4px;
}
.dp-teddy__msg--note{
  align-self:center; max-width:100%;
  background:none; border:0; padding:2px 0;
  font-family:var(--t-mono); font-size:.6875rem; letter-spacing:.04em;
  color:var(--t-muted); text-align:center;
}

.dp-teddy__dots{ display:inline-flex; gap:4px; align-items:center; padding:2px 0 }
.dp-teddy__dots span{
  width:6px; height:6px; border-radius:50%; background:var(--t-rust); opacity:.35;
  animation:dp-teddy-dot 1.15s var(--t-out) infinite;
}
.dp-teddy__dots span:nth-child(2){ animation-delay:.16s }
.dp-teddy__dots span:nth-child(3){ animation-delay:.32s }
@keyframes dp-teddy-dot{
  0%,100%{ opacity:.3; transform:translateY(0) }
  40%{ opacity:1; transform:translateY(-3px) }
}

.dp-teddy__form{
  display:flex; align-items:flex-end; gap:6px;
  padding:8px 10px calc(8px + env(safe-area-inset-bottom,0px));
}
.dp-teddy__input{
  flex:1 1 auto; min-width:0;
  max-height:104px; min-height:36px; padding:8px 11px;
  font-size:.875rem; line-height:1.4; resize:none;
  color:var(--t-ink); background:rgba(31,21,12,.045);
  border:1px solid transparent; border-radius:11px;
  font-family:inherit;
  transition:background .2s var(--t-out), border-color .2s var(--t-out);
}
.dp-teddy__input::placeholder{ color:var(--t-muted) }
.dp-teddy__input:focus{ outline:none; border-color:rgba(191,78,28,.4); background:#fff }
.dp-teddy__send{
  flex:none; width:36px; height:36px; display:grid; place-items:center;
  background:var(--t-rust); color:#fff; border:0; border-radius:50%;
  font-size:16px; line-height:1; cursor:pointer;
  transition:transform .3s var(--t-spring), background .3s var(--t-out), opacity .3s var(--t-out);
}
.dp-teddy__send:hover:not(:disabled){ background:var(--rust-deep,#8F380F); transform:translateY(-1px) }
.dp-teddy__send:disabled{ opacity:.45; cursor:default }

/* ── States ────────────────────────────────────────────────────────────── */
.dp-teddy[data-state="open"] .dp-teddy__bubble{ display:none }
/* The header carries Teddy's identity while the chat is open. Keep the
   launcher's footprint so the panel stays anchored, but do not show a second
   avatar below or over the drawer. */
.dp-teddy[data-state="open"]{
  min-width:var(--dp-teddy-size); min-height:var(--dp-teddy-size);
}
.dp-teddy[data-state="open"] .dp-teddy__dog{
  display:none !important;
}
.dp-teddy[data-state="open"] .dp-teddy__dog:hover{ transform:none }

/* Games get a smaller dog so the board always wins the eye. */
.dp-teddy[data-room="game"]{ --dp-teddy-size:78px }

/* Homepage hero, desktop: the hero photograph is the point, and floating the
   panel anywhere beside Teddy over it — however it was nudged — always ended
   up sitting over the photo somewhere. So on the desktop homepage only, the
   open panel stops being anchored to him at all and becomes a compact drawer
   pinned to the true right edge of the browser window: fixed positioning,
   independent of --dp-teddy-size or his own corner, so it lands in the same
   place at any desktop width and never drifts over the retriever. Little
   Teddy himself is untouched; only where his open panel goes changes.
   This is the one and only homepage-desktop override for the open panel —
   if it ever needs to move again, change the values here rather than adding
   another rule on top. */
@media (min-width:900px){
  body.homepage .dp-teddy[data-state="open"] .dp-teddy__panel{
    position:fixed;
    top:auto; left:auto;
    right:0; bottom:clamp(18px,4vh,32px);
    width:min(354px,calc(100vw - 32px));
    max-height:min(62vh,470px);
    border-radius:16px 0 0 16px;
    transform-origin:100% 50%;
    animation:dp-teddy-drawer-in .3s var(--t-out) both;
  }
}
@keyframes dp-teddy-drawer-in{
  from{ opacity:0; transform:translateX(24px) }
  to{ opacity:1; transform:none }
}

@media (max-width:719px){
  .dp-teddy{
    --dp-teddy-size:56px;
    --dp-teddy-right:max(16px,env(safe-area-inset-right,0px));
    --dp-teddy-bottom:16px;
  }
  .dp-teddy[data-room="game"]{ --dp-teddy-size:60px }
  /* A mobile conversation is a bottom drawer. The launcher is removed while
     it is open so Teddy is not duplicated, and every edge is kept inside the
     visual/safe viewport. */
  .dp-teddy[data-state="open"] .dp-teddy__dog{ display:none !important }
  .dp-teddy__panel{
    position:fixed;
    right:max(8px,env(safe-area-inset-right,0px));
    left:max(8px,env(safe-area-inset-left,0px));
    width:auto; max-width:none;
    /* --dp-teddy-kb is the on-screen-keyboard inset teddy.js measures from
       window.visualViewport: position:fixed pins to the layout viewport,
       which iOS does not shrink for the keyboard, so without this the panel
       would sit partly behind it. Zero (the default) leaves the sum
       unchanged when nothing is measuring it yet. */
    bottom:calc(max(env(safe-area-inset-bottom,0px),var(--dp-teddy-kb,0px)) + 8px);
    max-height:min(72vh,560px);
    max-height:min(72dvh,560px,calc(var(--dp-teddy-vvh,72dvh) - env(safe-area-inset-top,0px) - 16px));
    /* Warm and legible, but lets a trace of the page's autumn colour remain
       visible instead of landing as a solid desktop card over the hero. */
    background:rgba(251,247,239,.92);
    border-color:rgba(72,46,24,.18);
    border-radius:20px;
    box-shadow:0 18px 42px -22px rgba(43,26,10,.52),0 3px 10px rgba(43,26,10,.12);
  }
  @supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
    .dp-teddy__panel{
      -webkit-backdrop-filter:blur(4px);
      backdrop-filter:blur(4px);
    }
  }
  .dp-teddy__log{ background:transparent }
  .dp-teddy__msg--dog{ background:rgba(232,239,227,.96); border-color:rgba(101,126,96,.18) }
  .dp-teddy__msg--you{ background:rgba(239,229,213,.96); border-color:rgba(135,104,72,.14) }
  .dp-teddy__input{ background:rgba(255,252,246,.95) }
  .dp-teddy__head{ padding:10px 12px 8px 14px }
  .dp-teddy__min{ width:44px; height:44px }
  .dp-teddy__send{ width:44px; height:44px }
  .dp-teddy__bubble{ display:none !important }
  .dp-teddy__msg{ max-width:90% }
  /* iOS Safari zooms the whole page in on focus when an input's font is
     under 16px, which is what makes the panel look oversized and cropped
     once the keyboard opens; 16px here is the fix, not a style choice. */
  .dp-teddy__input{ font-size:16px }
}

/* Keep the title and clear action usable while the close zone remains fixed
   at the right edge on the narrowest supported drawer widths. */
@media (max-width:300px){
  .dp-teddy__head{
    grid-template-columns:32px minmax(0,1fr) auto 44px;
    column-gap:6px; padding-inline:10px 6px;
  }
  .dp-teddy__avatar{ width:32px; height:32px }
  .dp-teddy__clear{ padding-inline:4px; font-size:.5625rem }
}

/* Very short viewports (landscape phones): keep him out of the way. */
@media (max-height:520px){
  .dp-teddy{ --dp-teddy-size:56px }
  .dp-teddy__panel{ max-height:78vh }
}

@media (prefers-reduced-motion:reduce){
  .dp-teddy__dog,
  .dp-teddy__bubble,
  .dp-teddy__panel,
  .dp-teddy__msg{ animation:none !important }
  .dp-teddy__dog:hover{ transform:none }
}

/* The greeting animates in once; later re-measurements must not replay it. */
.dp-teddy__bubble[data-seen]{ animation:none }

/* ── Dark mode ─────────────────────────────────────────────────────────
   The front page marks dark mode with body.dp-dark; game rooms mark it with
   body.is-game-page when their light class is absent. Re-pointing the --t-*
   tokens at the night palette repaints the
   dog, bubble, panel chrome and header for free; the handful of rules below
   that paint fixed rgba() rather than a token (the message bubbles, the
   input field, the hover/focus overlays and the mobile drawer) need their
   own dark values because they were tuned by eye against paper, not tokens. */
body.dp-dark .dp-teddy,
body.is-game-page:not(.light) .dp-teddy{
  --t-paper:var(--night-2,#20160E);
  --t-paper-2:var(--night-3,#2C1E13);
  --t-ink:var(--cream,#F4EAD6);
  --t-ink-soft:rgba(244,234,214,.86);
  --t-muted:var(--cream-mute,rgba(244,234,214,.60));
  --t-line:var(--night-line,rgba(244,234,214,.14));
  --t-cream:var(--night-3,#2C1E13);
}
body.dp-dark .dp-teddy__msg--dog,
body.is-game-page:not(.light) .dp-teddy__msg--dog{
  background:rgba(92,118,71,.32); border-color:rgba(148,168,128,.34);
}
body.dp-dark .dp-teddy__msg--you,
body.is-game-page:not(.light) .dp-teddy__msg--you{
  background:rgba(244,234,214,.10); border-color:rgba(244,234,214,.16);
}
body.dp-dark .dp-teddy__input,
body.is-game-page:not(.light) .dp-teddy__input{ background:rgba(244,234,214,.08) }
body.dp-dark .dp-teddy__input:focus,
body.is-game-page:not(.light) .dp-teddy__input:focus{
  background:rgba(244,234,214,.14); border-color:rgba(191,78,28,.55);
}
body.dp-dark .dp-teddy__clear:hover,
body.is-game-page:not(.light) .dp-teddy__clear:hover{ background:rgba(244,234,214,.10) }
body.dp-dark .dp-teddy__min,
body.is-game-page:not(.light) .dp-teddy__min{ background:rgba(244,234,214,.10) }
body.dp-dark .dp-teddy__min:hover,
body.is-game-page:not(.light) .dp-teddy__min:hover{ background:rgba(244,234,214,.16) }

@media (max-width:719px){
  body.dp-dark .dp-teddy__panel,
  body.is-game-page:not(.light) .dp-teddy__panel{
    background:rgba(21,14,8,.92); border-color:rgba(244,234,214,.16);
  }
}

/* ── Masthead dock ─────────────────────────────────────────────────────
   Used only where a game fills the viewport and leaves Teddy nowhere to sit
   without covering the board or the keyboard. Same 38px outline-only
   treatment as the leaderboard/streak/theme icons beside it (not a solid
   fill, which read as a stray white disc against a dark or photo backdrop),
   and a pre-cropped portrait (teddy-avatar.webp) that already fills its own
   circle, so no manual crop offset is needed here. */
.dp-teddy-dock{
  position:relative;
  flex:none; width:38px; height:38px; padding:0;
  display:grid; place-items:center; overflow:visible;
  border:1px solid var(--dp-line-firm,rgba(31,21,12,.26)); border-radius:999px;
  background:transparent; cursor:pointer;
  transition:transform .3s cubic-bezier(.32,1.32,.5,1), border-color .3s ease, background .25s ease;
}
/* Clipping moves to this wrapper (see .dp-teddy__dog-crop above) so the
   badge below is not cropped away with the portrait. */
.dp-teddy-dock__crop{
  display:block; width:100%; height:100%;
  border-radius:50%; overflow:hidden;
}
.dp-teddy-dock__crop img{
  width:108%; height:108%; object-fit:cover; object-position:center;
  pointer-events:none; display:block;
}
.dp-teddy-dock:hover{ transform:translateY(-1px); background:rgba(31,21,12,.06) }
body.is-game-page:not(.light) .dp-teddy-dock,
.dp-masthead--over:not(.is-stuck) .dp-teddy-dock{ border-color:rgba(244,234,214,.28) }
body.is-game-page:not(.light) .dp-teddy-dock:hover{ background:rgba(244,234,214,.12) }

.dp-teddy-dock__badge{
  position:absolute; top:-1px; right:-1px;
  width:10px; height:10px; border-radius:50%;
  background:var(--t-status); border:1.5px solid var(--t-paper);
  pointer-events:none;
}
.dp-teddy-dock__badge[hidden]{ display:none }
body.is-game-page:not(.light) .dp-teddy-dock__badge,
.dp-masthead--over:not(.is-stuck) .dp-teddy-dock__badge{ border-color:var(--t-night) }

/* Docked: the dog and his bubble stand down, the panel hangs from the top. */
.dp-teddy[data-dock="mast"] .dp-teddy__dog,
.dp-teddy[data-dock="mast"] .dp-teddy__bubble{ display:none }
.dp-teddy[data-dock="mast"]{ top:0; bottom:auto; right:0; left:0; pointer-events:none }
.dp-teddy[data-dock="mast"] .dp-teddy__panel{
  position:fixed; pointer-events:auto;
  top:calc(var(--nav-h,64px) + 10px); bottom:auto;
  right:10px; left:auto; width:min(354px,calc(100vw - 20px));
  max-height:min(64vh,460px);
  transform-origin:88% 0%;
}

/* ── Holding his own ───────────────────────────────────────────────────
   Teddy is dropped into pages that carry broad element rules of their own —
   Pawdle hides every textarea on the page with !important, to keep stray
   inputs off the board. His own parts are restated here so those rules
   cannot reach inside the widget, and no page stylesheet has to change. */
.dp-teddy .dp-teddy__input{ display:block !important }
.dp-teddy .dp-teddy__send,
.dp-teddy .dp-teddy__min{ display:grid !important }
.dp-teddy .dp-teddy__form,
.dp-teddy .dp-teddy__log{ display:flex !important }
.dp-teddy .dp-teddy__msg{ display:block !important }
.dp-teddy .dp-teddy__dog{ display:block !important }
.dp-teddy[data-dock="mast"] .dp-teddy__dog,
.dp-teddy[data-dock="mast"] .dp-teddy__bubble,
.dp-teddy .dp-teddy__panel[hidden],
.dp-teddy .dp-teddy__bubble[hidden]{ display:none !important }