/*
 * Shahdad AI — beta 4.4 shell refinements
 * The Manzume and every descendant remain outside this stylesheet's scope.
 */

/*
 * Small ambient doodles sit beneath real dashboard children. They therefore
 * appear only through exposed pastel gutters, never over cards or content.
 */
body.mobile-shell-original-manzume .main {
  position: relative;
}

body.mobile-shell-original-manzume .main::before {
  content: "";
  position: absolute;
  inset: 3px;
  z-index: 0;
  pointer-events: none;
  opacity: 0.54;
  background:
    radial-gradient(circle, transparent 36%, rgba(106, 179, 155, 0.44) 40% 52%, transparent 56%) 7px 11% / 12px 12px no-repeat,
    radial-gradient(circle, rgba(228, 198, 125, 0.58) 0 2px, transparent 3px) calc(100% - 8px) 23% / 9px 9px no-repeat,
    radial-gradient(circle, transparent 34%, rgba(139, 82, 102, 0.30) 38% 52%, transparent 57%) 7px 56% / 11px 11px no-repeat,
    radial-gradient(circle, rgba(103, 85, 130, 0.38) 0 2px, transparent 3px) calc(100% - 8px) 74% / 8px 8px no-repeat,
    linear-gradient(45deg, transparent 43%, rgba(47, 125, 107, 0.34) 44% 56%, transparent 57%) 7px 86% / 10px 10px no-repeat,
    linear-gradient(-45deg, transparent 43%, rgba(47, 125, 107, 0.34) 44% 56%, transparent 57%) 7px 86% / 10px 10px no-repeat;
  animation: shellDoodlesFloat 11s ease-in-out infinite alternate;
}

body.mobile-shell-original-manzume .right-col::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.42;
  background:
    radial-gradient(circle, transparent 34%, rgba(106, 179, 155, 0.42) 39% 53%, transparent 58%) 8% 18% / 12px 12px no-repeat,
    radial-gradient(circle, rgba(228, 198, 125, 0.55) 0 2px, transparent 3px) 91% 39% / 8px 8px no-repeat,
    radial-gradient(circle, transparent 34%, rgba(103, 85, 130, 0.28) 39% 52%, transparent 57%) 7% 71% / 10px 10px no-repeat,
    linear-gradient(45deg, transparent 42%, rgba(139, 82, 102, 0.28) 43% 57%, transparent 58%) 93% 87% / 9px 9px no-repeat,
    linear-gradient(-45deg, transparent 42%, rgba(139, 82, 102, 0.28) 43% 57%, transparent 58%) 93% 87% / 9px 9px no-repeat;
  animation: shellDoodlesFloat 13s 1.4s ease-in-out infinite alternate-reverse;
}

body.mobile-shell-original-manzume .right-col .rc-fit {
  position: relative;
  z-index: 1;
}

@keyframes shellDoodlesFloat {
  0% {
    transform: translate3d(0, -2px, 0);
    opacity: 0.40;
  }
  55% {
    transform: translate3d(1px, 2px, 0);
    opacity: 0.60;
  }
  100% {
    transform: translate3d(-1px, 5px, 0);
    opacity: 0.48;
  }
}

/* Align the official wordmark with the physical right edge of the header. */
body.mobile-shell-original-manzume .brand {
  justify-content: flex-start;
  padding-inline-start: 14px;
  padding-inline-end: 0;
}

/* In RTL, inline-end is the physical left edge. */
body.mobile-shell-original-manzume .searchbar {
  padding-inline-start: 20px;
  padding-inline-end: 6px;
}

/*
 * The SVGs receive a fixed light stroke from the original component. Override
 * both stroke and currentColor so every action gets a readable semantic tint.
 */
body.mobile-shell-original-manzume .right-col .qa:nth-child(1) svg {
  color: #247563 !important;
  stroke: #247563 !important;
}

body.mobile-shell-original-manzume .right-col .qa:nth-child(2) svg {
  color: #a44f70 !important;
  stroke: #a44f70 !important;
}

body.mobile-shell-original-manzume .right-col .qa:nth-child(3) svg {
  color: #39778f !important;
  stroke: #39778f !important;
}

body.mobile-shell-original-manzume .right-col .qa:nth-child(4) svg {
  color: #8a681f !important;
  stroke: #8a681f !important;
}

@media (prefers-reduced-motion: reduce) {
  body.mobile-shell-original-manzume .main::before,
  body.mobile-shell-original-manzume .right-col::before {
    animation: none !important;
  }
}