/* ============================================================
   Baggy on the portfolio: a Windows Vista Sidebar gadget.

   The site is a Vista window on a desktop, so Baggy lives where
   Vista put live things: a gadget docked to the desktop edge.
   Round glass well (like the Vista clock gadget) with Baggy in
   it, his name and job underneath, the gadget's own hover
   toolbar, and a flyout panel that opens to the side.

   Self-contained so it drops onto any page, including the
   per-brand work pages that don't load the site tokens.
   ============================================================ */
.bgy {
  --bgy-ink: #0b2538;
  --bgy-ink-soft: #3d5a6f;
  --bgy-aqua: #1d8fb8;
  --bgy-aqua-ink: #0b5f87;
  --bgy-orb: radial-gradient(ellipse 130% 120% at 50% 135%, #eaf7ff 0%, #b3e5ff 22%, #4ec0e0 55%, #1d8fb8 88%, #0a6e9c 105%);
  --bgy-shine: linear-gradient(180deg, rgba(255,255,255,0.78) 0%, rgba(255,255,255,0.32) 35%, rgba(255,255,255,0.06) 75%, transparent 100%);
  --bgy-ui: 'Segoe UI', 'Source Sans 3', system-ui, -apple-system, sans-serif;

  /* gadget geometry: the engine and the glass overlay both read these */
  --g-right: 20px;
  --g-bottom: 20px;
  --g-w: 128px;
  --g-h: 162px;
  --well: 104px;
  --well-top: 10px;
}

.bgy-canvas { position: fixed; top: 0; left: 0; z-index: 950; pointer-events: none; }
.bgy.is-min .bgy-canvas { visibility: hidden; }

/* ---------- the gadget ---------- */
.bgy-gadget {
  position: fixed; right: var(--g-right); bottom: var(--g-bottom); z-index: 930;
  width: var(--g-w); height: var(--g-h); border-radius: 14px; cursor: pointer;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.12) 38%, rgba(255,255,255,0) 39%),
    linear-gradient(180deg, rgba(196,232,250,0.92) 0%, rgba(120,196,232,0.9) 55%, rgba(64,152,204,0.92) 100%);
  border: 1px solid rgba(255,255,255,0.9);
  box-shadow:
    inset 0 1px 0 #fff, inset 0 0 0 1px rgba(255,255,255,0.35), inset 0 -10px 18px rgba(10,80,130,0.25),
    0 1px 0 rgba(10,60,100,0.25), 0 14px 34px rgba(5,45,80,0.45);
  -webkit-backdrop-filter: blur(16px) saturate(170%); backdrop-filter: blur(16px) saturate(170%);
  transition: transform .35s cubic-bezier(.2,.85,.25,1), box-shadow .3s, opacity .3s;
  font-family: var(--bgy-ui);
  outline: none;
}
.bgy-gadget:hover { box-shadow: inset 0 1px 0 #fff, inset 0 -10px 18px rgba(10,80,130,0.25), 0 18px 40px rgba(5,45,80,0.5), 0 0 30px rgba(78,192,224,0.45); }
.bgy-gadget:focus-visible { outline: 3px solid #0a6e9c; outline-offset: 3px; }
/* the round well: a recessed porthole with a machined bezel */
.bgy-well {
  position: absolute; left: 50%; top: var(--well-top); width: var(--well); height: var(--well);
  transform: translateX(-50%); border-radius: 50%;
  background:
    radial-gradient(circle at 50% 115%, rgba(255,255,255,0.75), transparent 50%),
    radial-gradient(circle at 50% 35%, #eaf8ff 0%, #b7e3f7 45%, #5fb5df 100%);
  box-shadow:
    inset 0 6px 14px rgba(4,50,85,0.55), inset 0 -2px 6px rgba(255,255,255,0.6),
    0 0 0 3px rgba(255,255,255,0.85), 0 0 0 4px rgba(10,90,140,0.35), 0 3px 8px rgba(5,45,80,0.35);
}
/* the gadget's caption: who he is and what he's for */
.bgy-cap { position: absolute; left: 0; right: 0; bottom: 10px; text-align: center; line-height: 1.15; pointer-events: none; }
.bgy-cap b { display: block; font: 700 15px var(--bgy-ui); color: #04324e; text-shadow: 0 1px 0 rgba(255,255,255,0.7); }
.bgy-cap span { display: block; font: 400 12px var(--bgy-ui); color: #08405f; margin-top: 2px; }
.bgy-cap i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px; vertical-align: 1px;
  background: radial-gradient(ellipse 130% 120% at 50% 135%, #f0fadf 0%, #95d96b 50%, #3d8b27 100%); box-shadow: 0 0 6px rgba(109,190,69,.9); }
.bgy.is-out .bgy-cap span::after { content: " (he's out)"; }

/* glass over the well, drawn above Baggy so he reads as INSIDE the porthole */
.bgy-well-glass {
  position: fixed; z-index: 960; pointer-events: none; border-radius: 50%;
  width: var(--well); height: var(--well);
  right: calc(var(--g-right) + (var(--g-w) - var(--well)) / 2);
  bottom: calc(var(--g-bottom) + var(--g-h) - var(--well-top) - var(--well));
  background: linear-gradient(180deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.08) 40%, transparent 41%);
  -webkit-mask-image: radial-gradient(ellipse 70% 46% at 50% 20%, #000 60%, transparent 62%);
  mask-image: radial-gradient(ellipse 70% 46% at 50% 20%, #000 60%, transparent 62%);
}
.bgy.is-min .bgy-well-glass, .bgy.is-min .bgy-gadget { opacity: 0; pointer-events: none; transform: translateX(30px); }

/* Vista gadget toolbar: appears beside the gadget on hover */
.bgy-tools {
  position: fixed; z-index: 931; right: calc(var(--g-right) + var(--g-w) + 4px); bottom: calc(var(--g-bottom) + var(--g-h) - 64px);
  display: flex; flex-direction: column; gap: 3px; opacity: 0; transform: translateX(6px); transition: opacity .2s, transform .2s; pointer-events: none;
}
.bgy-gadget:hover ~ .bgy-tools, .bgy-tools:hover, .bgy-tools:focus-within { opacity: 1; transform: none; pointer-events: auto; }
.bgy-tools button {
  width: 26px; height: 26px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.8); cursor: pointer; display: grid; place-items: center; color: #04324e;
  background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(190,228,247,0.92) 50%, rgba(160,212,240,0.92) 51%, rgba(196,232,250,0.95));
  box-shadow: 0 2px 6px rgba(5,45,80,0.3);
}
.bgy-tools button:hover { filter: brightness(1.06); }
.bgy-tools svg { width: 14px; height: 14px; }
.bgy-tools [aria-pressed="false"] .on, .bgy-tools [aria-pressed="true"] .off { display: none; }
@media (hover: none) { .bgy-tools { display: none; } }

/* minimized: a slim glass tab on the screen edge */
.bgy-tab {
  position: fixed; right: 0; bottom: 110px; z-index: 930; display: none; align-items: center; gap: 8px;
  padding: 12px 12px 12px 14px; border-radius: 10px 0 0 10px; cursor: pointer; border: 1px solid rgba(255,255,255,0.9); border-right: 0;
  font: 600 14px var(--bgy-ui); color: #04324e;
  background: linear-gradient(180deg, rgba(220,242,252,0.95), rgba(120,196,232,0.95));
  box-shadow: 0 8px 20px rgba(5,45,80,0.35), inset 0 1px 0 #fff;
}
.bgy.is-min .bgy-tab { display: inline-flex; }

/* ---------- speech bubble (passive hints), points at the gadget ---------- */
.bgy-bubble {
  position: fixed; z-index: 940; max-width: 250px; padding: 12px 14px; border-radius: 12px;
  right: calc(var(--g-right) + var(--g-w) + 14px); bottom: calc(var(--g-bottom) + var(--g-h) - 86px);
  border: 1px solid rgba(255,255,255,0.95); background: linear-gradient(180deg, #fff, #eaf6fc);
  box-shadow: 0 10px 28px rgba(6,40,70,0.3), inset 0 1px 0 #fff;
  font: 400 14.5px/1.45 var(--bgy-ui); color: var(--bgy-ink); pointer-events: none;
  animation: bgy-in .35s cubic-bezier(.2,.9,.3,1.2);
}
.bgy-bubble b { color: var(--bgy-aqua-ink); }
.bgy-bubble::after { content: ""; position: absolute; right: -9px; top: 22px; border: 9px solid transparent; border-right: 0; border-left-color: #f4fafe; }
.bgy.is-open .bgy-bubble, .bgy.is-min .bgy-bubble { display: none; }
@keyframes bgy-in { from { opacity: 0; transform: translateX(-8px) scale(.97); } to { opacity: 1; transform: none; } }

/* ---------- the flyout: opens beside the gadget, bottom-aligned ---------- */
.bgy-panel {
  position: fixed; z-index: 945;
  right: calc(var(--g-right) + var(--g-w) + 12px); bottom: var(--g-bottom);
  width: min(390px, calc(100vw - var(--g-w) - 60px)); height: min(560px, calc(100dvh - 140px));
  display: none; flex-direction: column; border-radius: 12px; overflow: hidden;
  background: rgba(250, 253, 255, 0.97);
  -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.95);
  box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(10,90,140,0.14), 0 24px 60px rgba(5,40,70,0.4);
  font-family: var(--bgy-ui); color: var(--bgy-ink); transform-origin: 100% 100%;
}
.bgy.is-open .bgy-panel { display: flex; animation: bgy-pop .28s cubic-bezier(.2,.9,.3,1.1); }
@keyframes bgy-pop { from { opacity: 0; transform: translateX(10px) scale(.97); } to { opacity: 1; transform: none; } }
.bgy-head {
  display: flex; align-items: center; gap: 10px; padding: 0 6px 0 14px; height: 40px; flex-shrink: 0; position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,0.7) 0%, rgba(165,222,245,0.8) 48%, rgba(78,192,224,0.88) 52%, rgba(29,143,184,0.85) 100%);
  border-bottom: 1px solid rgba(255,255,255,0.6);
}
.bgy-head::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 50%; background: linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0.05)); pointer-events: none; }
.bgy-head-title { font: 600 14px var(--bgy-ui); color: var(--bgy-ink); text-shadow: 0 1px 0 rgba(255,255,255,0.75); position: relative; flex: 1; }
.bgy-hbtn {
  position: relative; width: 34px; height: 28px; border-radius: 5px; border: 1px solid rgba(10,110,156,0.42); color: var(--bgy-ink);
  background: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(185,225,245,0.72) 48%, rgba(145,208,238,0.66) 52%, rgba(110,190,228,0.6));
  display: grid; place-items: center; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 1px 3px rgba(0,0,0,.15);
}
.bgy-hbtn.close { background: linear-gradient(180deg, rgba(255,165,140,.95), rgba(230,72,48,.9) 48%, rgba(205,48,26,.85) 52%, rgba(178,26,10,.8)); border-color: rgba(155,32,16,.52); color: #fff; }
.bgy-hbtn svg { width: 15px; height: 15px; }
.bgy-hbtn[aria-pressed="false"] .on, .bgy-hbtn[aria-pressed="true"] .off { display: none; }

.bgy-log { flex: 1; overflow-y: auto; padding: 16px 14px 8px; display: flex; flex-direction: column; gap: 10px; scrollbar-width: thin; overscroll-behavior: contain; }
.bgy-msg { max-width: 90%; padding: 10px 13px; border-radius: 12px; font-size: 15px; line-height: 1.5; animation: bgy-fade .2s ease-out; overflow-wrap: anywhere; }
@keyframes bgy-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.bgy-msg.bot { align-self: flex-start; background: #fff; border: 1px solid rgba(10,110,156,0.14); border-bottom-left-radius: 4px; box-shadow: 0 2px 8px rgba(10,60,100,0.07); }
.bgy-msg.me { align-self: flex-end; color: #fff; background: var(--bgy-orb); border: 1px solid rgba(255,255,255,0.6); border-bottom-right-radius: 4px; text-shadow: 0 1px 1px rgba(6,40,70,0.5); box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 3px 10px rgba(10,80,120,0.22); }
.bgy-msg a { color: var(--bgy-aqua-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.bgy-msg b { color: var(--bgy-ink); }
.bgy-typing { display: inline-flex; gap: 4px; padding: 4px 2px; }
.bgy-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--bgy-aqua); animation: bgy-dot 1s infinite ease-in-out; }
.bgy-typing i:nth-child(2) { animation-delay: .15s; } .bgy-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes bgy-dot { 0%, 80%, 100% { transform: translateY(0); opacity: .4; } 40% { transform: translateY(-4px); opacity: 1; } }

/* suggestions wrap into a tidy set instead of a sideways scroller */
.bgy-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 14px 10px; flex-shrink: 0; max-height: 92px; overflow: hidden; }
.bgy-chip {
  font: 600 13.5px var(--bgy-ui); color: var(--bgy-aqua-ink); cursor: pointer; white-space: nowrap; min-height: 34px;
  background: #fff; border: 1px solid rgba(29,143,184,0.32); border-radius: 999px; padding: 6px 12px;
  transition: background .15s, border-color .15s;
}
.bgy-chip:hover { background: #e9f6fc; border-color: rgba(29,143,184,0.6); }
.bgy-form { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid rgba(10,110,156,0.1); flex-shrink: 0; }
.bgy-input {
  flex: 1; min-width: 0; font: 400 16px var(--bgy-ui); color: var(--bgy-ink); padding: 10px 14px; border-radius: 8px;
  border: 1px solid rgba(10,110,156,0.25); background: #fff; box-shadow: inset 0 1px 3px rgba(10,60,100,0.1); outline: none;
}
.bgy-input:focus { border-color: var(--bgy-aqua); box-shadow: inset 0 1px 3px rgba(10,60,100,0.1), 0 0 0 3px rgba(78,192,224,0.25); }
.bgy-send {
  width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%; border: 1px solid rgba(255,255,255,0.6); background: var(--bgy-orb); color: #fff;
  display: grid; place-items: center; cursor: pointer; position: relative; overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 4px 10px rgba(10,60,100,.3);
}
.bgy-send::before { content: ""; position: absolute; top: 2px; left: 12%; right: 12%; height: 45%; background: var(--bgy-shine); border-radius: 50%; }
.bgy-send svg { width: 18px; height: 18px; position: relative; filter: drop-shadow(0 1px 1px rgba(6,40,70,.5)); }
.bgy-foot { font: 400 12.5px var(--bgy-ui); color: var(--bgy-ink-soft); text-align: center; padding: 0 12px 10px; }

/* ---------- phones: a compact gadget, panel as a bottom sheet ---------- */
@media (max-width: 720px) {
  .bgy { --g-right: 12px; --g-bottom: 12px; --g-w: 100px; --g-h: 100px; --well: 86px; --well-top: 7px; }
  .bgy-gadget { border-radius: 50%; }
  .bgy-cap { display: none; }
  /* stays clear of the sticky site header above it */
  .bgy-panel { left: 10px; right: 10px; width: auto; bottom: calc(var(--g-bottom) + var(--g-h) + 10px); height: min(560px, calc(100dvh - var(--g-h) - 150px)); }
  .bgy-chips { max-height: none; }
  .bgy-chip:nth-child(n+5) { display: none; }
  .bgy-bubble { right: 16px; bottom: calc(var(--g-bottom) + var(--g-h) + 12px); max-width: 230px; }
  .bgy-bubble::after { right: 32px; top: auto; bottom: -9px; border: 9px solid transparent; border-bottom: 0; border-top-color: #eaf6fc; }
}
@media (prefers-reduced-motion: reduce) { .bgy-panel, .bgy-bubble, .bgy-msg { animation: none !important; } }
@media print { .bgy { display: none !important; } }

/* phones: while the reader scrolls down, the gadget tucks mostly off the
   edge so it never sits on top of what they're reading or tapping; it
   slides back on scroll-up or when scrolling stops. Baggy rides along,
   because the engine re-reads the well's position every frame. */
.bgy-well-glass { transition: transform .35s cubic-bezier(.2,.85,.25,1), opacity .3s; }
.bgy.is-tucked .bgy-gadget, .bgy.is-tucked .bgy-well-glass { transform: translateX(64%); }
.bgy.is-tucked .bgy-gadget { opacity: .85; }