/* =========================================================
   DIGI DOUGHNUT — COMPONENT STYLES
   Mobile-first • Fredoka + Nunito • No UI emojis
   ========================================================= */

/* =========================================================
   1. GLAZE — DONUT MASCOT
   ========================================================= */

.donut-host {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 120px;
  pointer-events: none;
}

.donut-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform-origin: 50% 60%;
  animation: donut-idle 4.8s ease-in-out infinite;
}

.donut-full,
.donut-face-only {
  display: block;
  width: 100%;
  height: 100%;
}

.donut-frosting,
.donut-dough,
.donut-sprinkles,
.donut-face,
.donut-hole-rim,
.donut-body,
.donut-eyes,
.donut-mouth,
.donut-brow-l,
.donut-brow-r,
.donut-cheek {
  transform-box: fill-box;
  transform-origin: center;
}

.donut-dough {
  fill: #e0a866;
}

.donut-frosting {
  fill: #f06292;
}

.donut-hole-rim {
  fill: #a67c4e;
}

.donut-sprinkles {
  stroke-linecap: round;
  stroke-width: 3;
}

.donut-face {
  fill: #4a2c1a;
}

.donut-eye {
  fill: #4a2c1a;
}

.donut-cheek {
  fill: #f8bbd0;
  opacity: 0.9;
}

.donut-mouth {
  fill: none;
  stroke: #4a2c1a;
  stroke-linecap: round;
  stroke-width: 3;
}

.donut-brow,
.donut-brow-l,
.donut-brow-r {
  fill: none;
  stroke: #4a2c1a;
  stroke-linecap: round;
  stroke-width: 2.5;
}

.donut-glint {
  fill: #fff8f0;
}

.donut-spark {
  fill: #00d3ff;
}

.donut-pencil {
  transform-box: fill-box;
  transform-origin: 50% 90%;
}

.donut-line {
  fill: none;
  stroke: #00d3ff;
  stroke-linecap: round;
}

.donut-thought,
.donut-writing {
  opacity: 0;
}

.donut-bub,
.donut-bubble,
.donut-cloud,
.donut-dot {
  transform-box: fill-box;
  transform-origin: center;
}

.donut-enter {
  animation: donut-enter 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.donut-rise {
  animation: donut-rise 0.65s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.donut-thought {
  animation: donut-thought 0.35s ease-out forwards;
}

.donut-writing {
  animation: donut-writing 0.35s ease-out forwards;
}

.donut-svg[data-mood="think"] {
  animation: donut-think 3.8s ease-in-out infinite;
}

.donut-svg[data-mood="happy"] {
  animation: donut-happy 2.4s ease-in-out infinite;
}

.donut-svg[data-mood="write"] {
  animation: donut-write 2.2s ease-in-out infinite;
}

.donut-svg[data-mood="oops"] {
  animation: donut-oops 0.8s ease-in-out both;
}

.donut-svg[data-mood="listen"] .donut-eyes {
  transform: translateY(1px);
}

.donut-svg[data-mood="think"] .donut-brow-l {
  transform: rotate(-8deg) translateY(-2px);
}

.donut-svg[data-mood="think"] .donut-brow-r {
  transform: rotate(8deg) translateY(-2px);
}

.donut-svg[data-mood="happy"] .donut-cheek {
  transform: scale(1.08);
}

.donut-svg[data-mood="write"] .donut-pencil {
  animation: donut-pencil 0.65s ease-in-out infinite alternate;
}

.donut-svg[data-mood="oops"] .donut-face {
  transform: translateX(1px);
}

/* =========================================================
   GLAZE KEYFRAMES
   ========================================================= */

@keyframes donut-idle {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-5px);
  }
}

@keyframes donut-think {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }

  50% {
    transform: translateY(-7px) rotate(-1deg);
  }
}

@keyframes donut-happy {
  0%,
  100% {
    transform: translateY(0);
  }

  25% {
    transform: translateY(-7px) rotate(-1deg);
  }

  50% {
    transform: translateY(0);
  }

  75% {
    transform: translateY(-4px) rotate(1deg);
  }
}

@keyframes donut-write {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-3px);
  }
}

@keyframes donut-oops {
  0% {
    transform: rotate(0deg);
  }

  25% {
    transform: rotate(-4deg);
  }

  55% {
    transform: rotate(3deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

@keyframes donut-pencil {
  from {
    transform: rotate(-5deg);
  }

  to {
    transform: rotate(6deg);
  }
}

@keyframes donut-enter {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.92);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes donut-rise {
  from {
    opacity: 0;
    transform: translateY(22px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes donut-thought {
  from {
    opacity: 0;
    transform: translateY(5px) scale(0.94);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes donut-writing {
  from {
    opacity: 0;
    transform: translateX(5px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* =========================================================
   2. MAGIC HERO STAGE
   ========================================================= */

.magic-stage {
  position: relative;
  width: 100%;
  min-height: 430px;
  overflow: hidden;
  border-radius: 28px;
  background: #fff8f0;
  box-shadow: 0 16px 40px rgba(74, 44, 26, 0.1);
}

/* Scenes are SVG <g> elements inside .magic-svg; hero.js cross-fades them
   per animation frame via the opacity attribute. No CSS on them. */

.magic-svg {
  display: block;
  width: 100%;
  height: 100%;
}

.magic-label {
  position: absolute;
  left: 18px;
  bottom: 18px;
  max-width: calc(100% - 36px);
  padding: 9px 13px;
  border: 2px solid #f8bbd0;
  border-radius: 999px;
  background: rgba(255, 248, 240, 0.94);
  color: #4a2c1a;
  font-family: "Fredoka", sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.15;
  box-shadow: 0 8px 22px rgba(74, 44, 26, 0.1);
}

.magic-label-go,
.magic-label-s {
  color: #d81b60;
}

.magic-hud {
  position: absolute;
  top: 16px;
  right: 16px;
  left: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 12px;
  border: 1px solid rgba(74, 44, 26, 0.08);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 8px 24px rgba(74, 44, 26, 0.08);
  backdrop-filter: blur(8px);
}

.magic-now {
  color: #4a2c1a;
  font-family: "Fredoka", sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
}

.magic-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 5px;
  border-radius: 50%;
  background: #00d3ff;
  box-shadow: 0 0 0 4px rgba(0, 211, 255, 0.12);
}

.magicdots {
  position: absolute;
  display: flex;
  gap: 5px;
  align-items: center;
}

.magicdots .magic-dot {
  width: 5px;
  height: 5px;
  margin: 0;
  box-shadow: none;
  opacity: 0.8;
}

/* =========================================================
   3. MY APPS — SHEET DRAWER
   ========================================================= */

.sheet-drawer {
  position: fixed;
  z-index: 40;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  padding: 20px 18px 24px;
  border-radius: 26px 26px 0 0;
  background: #fff8f0;
  box-shadow: 0 -16px 44px rgba(74, 44, 26, 0.16);
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.sheet-drawer.open {
  transform: translateY(0);
}

.sh-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}

.sh-k {
  color: #d81b60;
  font-family: "Fredoka", sans-serif;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sh-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sh-empty {
  padding: 24px 18px;
  border: 2px dashed #f8bbd0;
  border-radius: 18px;
  color: #8d6e63;
  font-family: "Nunito", sans-serif;
  font-size: 0.92rem;
  text-align: center;
}

.sh-projects {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: sh-project;
}

.sh-projects > li {
  counter-increment: sh-project;
}

.sh-t {
  margin: 0 0 4px;
  color: #4a2c1a;
  font-family: "Fredoka", sans-serif;
  font-size: 1rem;
  font-weight: 600;
}

.sh-p {
  margin: 0;
  color: #8d6e63;
  font-family: "Nunito", sans-serif;
  font-size: 0.86rem;
  line-height: 1.45;
}

.sh-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 9px;
}

.sh-badges span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 8px;
  border-radius: 999px;
  background: #f8bbd0;
  color: #4a2c1a;
  font-family: "Nunito", sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
}

.sh-price {
  margin-top: 10px;
  color: #d81b60;
  font-family: "Fredoka", sans-serif;
  font-size: 1.15rem;
  font-weight: 600;
}

.sh-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border: 0;
  border-radius: 50%;
  background: #f8bbd0;
  color: #4a2c1a;
  font-family: "Nunito", sans-serif;
  font-size: 1rem;
  cursor: pointer;
}

/* =========================================================
   MY APPS — CONTINUED
   ========================================================= */

.sh-sec {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(74, 44, 26, 0.1);
}

.sh-buylist {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sh-buy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 14px;
  border: 1px solid #f8bbd0;
  border-radius: 16px;
  background: #ffffff;
}

.sh-buy2 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 9px 14px;
  border: 0;
  border-radius: 999px;
  background: #f06292;
  color: #ffffff;
  font-family: "Fredoka", sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(216, 27, 96, 0.16);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
}

.sh-buy2:hover {
  background: #d81b60;
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(216, 27, 96, 0.2);
}

.sh-buy2.soon {
  background: #e8ded7;
  color: #8d6e63;
  box-shadow: none;
  cursor: default;
}

.sh-note {
  margin-top: 12px;
  color: #8d6e63;
  font-family: "Nunito", sans-serif;
  font-size: 0.76rem;
  line-height: 1.45;
}

.sh-me {
  margin-top: 24px;
  padding: 18px;
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 8px 24px rgba(74, 44, 26, 0.06);
}

.sh-me input,
.sh-me select {
  display: block;
  width: 100%;
  min-height: 42px;
  margin-top: 8px;
  padding: 9px 12px;
  border: 1px solid #e0d2c8;
  border-radius: 12px;
  outline: none;
  background: #fff8f0;
  color: #4a2c1a;
  font-family: "Nunito", sans-serif;
  font-size: 0.88rem;
}

.sh-me input:focus,
.sh-me select:focus {
  border-color: #00d3ff;
  box-shadow: 0 0 0 3px rgba(0, 211, 255, 0.12);
}

.sh-new {
  position: relative;
  overflow: hidden;
}

.sh-new::before {
  position: absolute;
  top: 0;
  right: 0;
  width: 58px;
  height: 58px;
  content: "";
  border-radius: 0 0 0 58px;
  background: #b3f0ff;
}

.sh-new::after {
  position: absolute;
  top: 8px;
  right: 8px;
  content: "NEW";
  color: #4a2c1a;
  font-family: "Fredoka", sans-serif;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.sh-new > * {
  position: relative;
  z-index: 1;
}

/* =========================================================
   4. GLAZE CHAT HELPER
   (note: the JS emits message bubbles as .msg.bot / .msg.me /
   .msg.err / .msg.note)
   ========================================================= */

.helper {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(74, 44, 26, 0.08);
  border-radius: 26px;
  background: #fff8f0;
  box-shadow: 0 22px 60px rgba(74, 44, 26, 0.2);
  /* docked (in-page) mode: visible, fills its container */
  height: min(640px, calc(100vh - 110px));
  min-height: 420px;
}

/* Floating mode: fixed panel, hidden until the drawer opens.
   The JS toggles the hidden attribute and body.drawer-open. */
.helper.floating {
  position: fixed;
  z-index: 60;
  right: 12px;
  bottom: 12px;
  left: 12px;
  height: min(680px, calc(100vh - 24px));
  min-height: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(18px) scale(0.98);
  transition:
    opacity 0.28s ease,
    transform 0.32s ease,
    visibility 0.28s ease;
}

body.drawer-open .helper.floating {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

/* The JS toggles the hidden attribute; display:flex would override it. */
.helper[hidden] {
  display: none !important;
}

.helper-head {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 14px;
  border-bottom: 1px solid rgba(74, 44, 26, 0.08);
  background: #ffffff;
}

.helper-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 50%;
  background: #f8bbd0;
  overflow: hidden;
}

/* BBDonut.mount adds .donut-host to the chip: its min-height rules
   (base + desktop media query) must not stretch this 38px face. */
.helper-chip.donut-host {
  min-height: 0;
}

.helper-chip .donut-svg {
  width: 100%;
  height: 100%;
}

.h-txt {
  margin: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  color: #4a2c1a;
  font-family: "Fredoka", sans-serif;
  font-size: 1rem;
  font-weight: 600;
}

.h-sub {
  margin: 2px 0 0;
  color: #8d6e63;
  font-family: "Nunito", sans-serif;
  font-size: 0.7rem;
}

.helper-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-left: auto;
  border: 0;
  border-radius: 50%;
  background: #f8bbd0;
  color: #4a2c1a;
  font-family: "Nunito", sans-serif;
  font-size: 1rem;
  cursor: pointer;
}

.msgs {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  overflow-y: auto;
  padding: 15px 13px;
}

.msg {
  max-width: 86%;
  padding: 10px 12px;
  border-radius: 17px;
  color: #4a2c1a;
  font-family: "Nunito", sans-serif;
  font-size: 0.84rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.msg.bot {
  align-self: flex-start;
  border-bottom-left-radius: 6px;
  background: #ffffff;
  box-shadow: 0 4px 12px rgba(74, 44, 26, 0.06);
}

.msg.me {
  align-self: flex-end;
  border-bottom-right-radius: 6px;
  background: #f06292;
  color: #ffffff;
}

.msg.err {
  align-self: flex-start;
  background: #fff0f0;
  color: #a33a3a;
  border: 1px solid #f0baba;
}

.msg.note {
  align-self: center;
  max-width: 95%;
  padding: 4px 8px;
  color: #8d6e63;
  background: transparent;
  font-size: 0.7rem;
  text-align: center;
}

/* =========================================================
   GLAZE CHAT — CONTINUED
   ========================================================= */

.suggest {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 4px;
}

.suggest button {
  min-height: 34px;
  padding: 7px 11px;
  border: 1px solid #f8bbd0;
  border-radius: 999px;
  background: #ffffff;
  color: #4a2c1a;
  font-family: "Nunito", sans-serif;
  font-size: 0.74rem;
  font-weight: 700;
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    background 0.2s ease,
    transform 0.2s ease;
}

.suggest button:hover {
  border-color: #f06292;
  background: #fff4f8;
  transform: translateY(-1px);
}

.compose {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px;
  border-top: 1px solid rgba(74, 44, 26, 0.08);
  background: #ffffff;
}

.compose textarea {
  display: block;
  width: 100%;
  min-height: 42px;
  max-height: 110px;
  resize: none;
  padding: 10px 12px;
  border: 1px solid #e0d2c8;
  border-radius: 15px;
  outline: none;
  background: #fff8f0;
  color: #4a2c1a;
  font-family: "Nunito", sans-serif;
  font-size: 0.84rem;
  line-height: 1.35;
}

.compose textarea:focus {
  border-color: #00d3ff;
  box-shadow: 0 0 0 3px rgba(0, 211, 255, 0.12);
}

.compose button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border: 0;
  border-radius: 50%;
  background: #f06292;
  color: #ffffff;
  font-family: "Fredoka", sans-serif;
  font-size: 1rem;
  cursor: pointer;
  box-shadow: 0 7px 16px rgba(216, 27, 96, 0.18);
  transition:
    transform 0.2s ease,
    background 0.2s ease;
}

.compose button:hover {
  background: #d81b60;
  transform: translateY(-1px);
}

.helper-foot {
  padding: 7px 12px 9px;
  border-top: 1px solid rgba(74, 44, 26, 0.06);
  color: #8d6e63;
  font-family: "Nunito", sans-serif;
  font-size: 0.65rem;
  text-align: center;
}

.typing {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 15px;
}

.typing::before,
.typing::after {
  width: 4px;
  height: 4px;
  content: "";
  border-radius: 50%;
  background: #8d6e63;
  animation: helper-typing 1.1s ease-in-out infinite;
}

.typing::after {
  animation-delay: 0.18s;
}

.pcards {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: 7px;
}

.pcards.multi {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.pcards.mini {
  gap: 5px;
}

.pcard {
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(74, 44, 26, 0.09);
  border-radius: 17px;
  background: #ffffff;
  box-shadow: 0 4px 12px rgba(74, 44, 26, 0.05);
}

.pcards.mini .pcard {
  display: flex;
  align-items: center;
  gap: 9px;
  border-radius: 12px;
}

.pc-pic {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 90px;
  background: #f8bbd0;
  color: #4a2c1a;
}

.pcards.mini .pc-pic {
  width: 54px;
  min-height: 48px;
  flex: 0 0 54px;
}

.pc-body {
  padding: 10px;
}

.pcards.mini .pc-body {
  flex: 1;
  padding: 7px 8px 7px 0;
}

.pc-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 7px;
}

.pc-tag {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 3px 7px;
  border-radius: 999px;
  background: #b3f0ff;
  color: #4a2c1a;
  font-family: "Nunito", sans-serif;
  font-size: 0.62rem;
  font-weight: 800;
}

/* =========================================================
   GLAZE CHAT — PRODUCT CARDS + DRAWER
   ========================================================= */

.pc-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 9px;
}

.pc-add,
.pc-open {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 7px 10px;
  border-radius: 999px;
  font-family: "Fredoka", sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform 0.2s ease,
    background 0.2s ease,
    border-color 0.2s ease;
}

.pc-add {
  border: 1px solid #f06292;
  background: #ffffff;
  color: #d81b60;
}

.pc-add:hover {
  background: #fff0f5;
  transform: translateY(-1px);
}

.pc-add.on {
  background: #f06292;
  color: #ffffff;
}

.pc-open {
  border: 1px solid #f8bbd0;
  background: #fff8f0;
  color: #4a2c1a;
}

.pc-open:hover {
  border-color: #f06292;
  transform: translateY(-1px);
}

/* Floating mode positioning for the helper panel itself is defined above
   (.helper.floating). The round launcher button is .helper-launch. */

body.drawer-open {
  overflow: hidden;
}

.drawer-backdrop {
  position: fixed;
  z-index: 35;
  inset: 0;
  background: rgba(74, 44, 26, 0.28);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
}

body.drawer-open .drawer-backdrop {
  opacity: 1;
  visibility: visible;
}

/* My-apps sheet backdrop: independent of the helper's drawer-open state. */
body.sheet-open {
  overflow: hidden;
}

body.sheet-open .sheet-backdrop {
  opacity: 1;
  visibility: visible;
}

/* Glaze face inside the launcher pill. */
.helper-launch .donut-host {
  width: 30px;
  height: 30px;
  min-height: 0;
  flex: 0 0 30px;
}

.helper-launch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 10px 16px;
  border: 0;
  border-radius: 999px;
  background: #f06292;
  color: #ffffff;
  font-family: "Fredoka", sans-serif;
  font-size: 0.84rem;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 8px 18px rgba(216, 27, 96, 0.16);
  cursor: pointer;
  transition:
    transform 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease;
}

.helper-launch:hover {
  background: #d81b60;
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(216, 27, 96, 0.2);
}

/* =========================================================
   SHARED FOCUS + INTERACTION STATES
   ========================================================= */

.sh-x:focus-visible,
.sh-buy2:focus-visible,
.suggest button:focus-visible,
.compose button:focus-visible,
.pc-add:focus-visible,
.pc-open:focus-visible,
.helper-close:focus-visible,
.helper-launch:focus-visible {
  outline: 3px solid rgba(0, 211, 255, 0.45);
  outline-offset: 2px;
}

.sh-buy2,
.pc-add,
.pc-open,
.helper-launch,
.compose button,
.suggest button,
.helper-close,
.sh-x {
  -webkit-tap-highlight-color: transparent;
}

/* =========================================================
   HELPER KEYFRAMES
   ========================================================= */

@keyframes helper-typing {
  0%,
  100% {
    opacity: 0.35;
    transform: translateY(0);
  }

  50% {
    opacity: 1;
    transform: translateY(-2px);
  }
}

/* =========================================================
   5. DESKTOP — 720PX AND UP
   ========================================================= */

@media (min-width: 720px) {
  .donut-host {
    min-height: 160px;
  }

  .magic-stage {
    min-height: 0;
    aspect-ratio: 16 / 9;
    max-height: 720px;
    border-radius: 32px;
  }

  .magic-label {
    left: 26px;
    bottom: 26px;
    padding: 10px 15px;
    font-size: 0.86rem;
  }

  .magic-hud {
    top: 22px;
    right: 22px;
    left: 22px;
    padding: 10px 14px;
  }

  .sheet-drawer {
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    width: min(470px, 46vw);
    max-height: none;
    padding: 28px 24px 30px;
    border-radius: 26px 0 0 26px;
    box-shadow: -18px 0 50px rgba(74, 44, 26, 0.16);
    transform: translateX(100%);
  }

  .sheet-drawer.open {
    transform: translateX(0);
  }

  .sh-head {
    margin-bottom: 22px;
  }

  .sh-projects {
    gap: 12px;
  }

  .sh-buylist {
    gap: 12px;
  }

  .helper.floating {
    right: 22px;
    bottom: 22px;
    left: auto;
    width: min(420px, calc(100vw - 44px));
    height: min(700px, calc(100vh - 44px));
    border-radius: 28px;
  }

  .helper-head {
    padding: 15px 16px;
  }

  .msgs {
    padding: 17px 15px;
  }

  .msg {
    max-width: 82%;
  }

  .compose {
    padding: 11px;
  }
}

/* =========================================================
   6. WIDER DESKTOP REFINEMENTS
   ========================================================= */

@media (min-width: 980px) {
  .magic-stage {
    border-radius: 36px;
  }

  .magic-label {
    left: 30px;
    bottom: 30px;
  }

  .magic-hud {
    top: 26px;
    right: 26px;
    left: 26px;
  }

  .sheet-drawer {
    width: 480px;
    padding: 32px 28px;
  }

  .helper.floating {
    right: 28px;
    bottom: 28px;
    width: 430px;
  }
}

/* =========================================================
   7. SMALL PHONE SAFETY
   ========================================================= */

@media (max-width: 380px) {
  .magic-stage {
    min-height: 390px;
    border-radius: 24px;
  }

  .magic-label {
    left: 13px;
    bottom: 13px;
    max-width: calc(100% - 26px);
    padding: 8px 11px;
    font-size: 0.74rem;
  }

  .magic-hud {
    top: 12px;
    right: 12px;
    left: 12px;
    padding: 8px 10px;
  }

  .helper.floating {
    right: 7px;
    bottom: 7px;
    left: 7px;
    height: calc(100vh - 14px);
    border-radius: 22px;
  }

  .pcards.multi {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   8. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  .donut-svg,
  .donut-enter,
  .donut-rise,
  .donut-thought,
  .donut-writing,
  .donut-pencil,
  .typing {
    animation: none !important;
  }

  .magic-scene,
  .sheet-drawer,
  .helper,
  .drawer-backdrop,
  .sh-buy2,
  .suggest button,
  .compose button,
  .pc-add,
  .pc-open,
  .helper-launch,
  .sh-x,
  .helper-close {
    transition: none !important;
  }

  .donut-svg[data-mood="think"],
  .donut-svg[data-mood="happy"],
  .donut-svg[data-mood="write"],
  .donut-svg[data-mood="oops"] {
    animation: none !important;
  }

  .donut-svg[data-mood="write"] .donut-pencil {
    animation: none !important;
  }
}

/* =========================================================
   9. FINAL BOX-SIZING / MEDIA SAFETY
   ========================================================= */

.magic-stage *,
.sheet-drawer *,
.helper *,
.donut-host * {
  box-sizing: border-box;
}

.magic-svg,
.donut-svg {
  max-width: 100%;
}

.magic-scene svg,
.magic-svg,
.donut-svg {
  max-width: 100%;
}

.sh-buy,
.sh-me,
.pcard,
.compose,
.helper-head {
  min-width: 0;
}

.sh-p,
.sh-t,
.h-txt,
.h-sub {
  overflow-wrap: anywhere;
}

/* =========================================================
   10. FINAL VISUAL POLISH
   ========================================================= */

.magic-stage,
.sheet-drawer,
.helper,
.sh-me,
.pcard {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.sh-t,
.h-txt,
.magic-label,
.magic-now,
.sh-price,
.helper-launch,
.pc-add,
.pc-open,
.sh-buy2 {
  letter-spacing: -0.01em;
}

.sh-p,
.sh-note,
.h-sub,
.msg,
.helper-foot,
.compose textarea,
.sh-me input,
.sh-me select {
  letter-spacing: 0;
}

/* .donut-face-only uses a tight viewBox cropped on the face — the doughnut
   body stays visible. Nothing is hidden here. */

.donut-full .donut-face-only {
  display: block;
}

.magic-scene[aria-hidden="true"] {
  pointer-events: none;
}

.sh-buy2.soon:hover {
  background: #e8ded7;
  color: #8d6e63;
  transform: none;
}

.pc-add.on:hover {
  background: #d81b60;
  transform: translateY(-1px);
}

.msg a {
  color: #d81b60;
  font-weight: 700;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.msg.me a {
  color: #ffffff;
}

.sh-p a,
.sh-note a {
  color: #d81b60;
  text-underline-offset: 2px;
}

.magic-label a {
  color: #d81b60;
  font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
  .magic-stage *,
  .sheet-drawer *,
  .helper *,
  .donut-host * {
    scroll-behavior: auto !important;
  }
}