#child-advice { position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 9990; font: 14px/1.6 Arial, sans-serif; color: #e9edf5; }
#child-advice[hidden], #child-advice [hidden] { display: none !important; }
#child-advice * { box-sizing: border-box; }
#child-advice .child-advice-toggle { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 14px 12px; border: 1px solid #40536a; border-right: 0; border-radius: 12px 0 0 12px; background: #172333; color: #e9edf5; box-shadow: 0 4px 22px #0004; cursor: pointer; font: 600 12px/1.2 Arial, sans-serif; writing-mode: vertical-rl; }
#child-advice .child-advice-toggle svg { flex: 0 0 auto; color: #7cdcc2; }
#child-advice .child-advice-panel { position: absolute; right: calc(100% + 10px); top: 50%; transform: translateY(-50%); width: min(310px, calc(100vw - 76px)); padding: 25px 23px 22px; border: 1px solid #34445a; border-radius: 16px; background: #111b29; box-shadow: 0 12px 40px #0006; animation: child-advice-reveal .18s ease-out; }
#child-advice .child-advice-eyebrow { display: block; margin: 0 20px 11px 0; color: #7cdcc2; font-size: 10px; font-weight: 700; letter-spacing: 1.4px; }
#child-advice h2 { margin: 0 10px 12px 0; padding: 0; color: #fff; font: 700 21px/1.25 Arial, sans-serif; }
#child-advice p { margin: 0; color: #cad2df; font: 14px/1.6 Arial, sans-serif; }
#child-advice .child-advice-close { position: absolute; top: 4px; right: 4px; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 10px; background: transparent; color: #a9b8ca; font: 24px/1 Arial, sans-serif; cursor: pointer; }
#child-advice button:hover { background-color: #25374b; }
#child-advice button:focus-visible { outline: 2px solid #7cdcc2; outline-offset: 3px; }
@keyframes child-advice-reveal { from { opacity: 0; margin-right: -6px; } to { opacity: 1; margin-right: 0; } }
@media (max-width: 480px) { #child-advice .child-advice-panel { padding: 24px 18px 18px; } #child-advice h2 { font-size: 19px; } }
@media (max-height: 420px) { #child-advice .child-advice-panel { max-height: calc(100dvh - 24px); overflow-y: auto; } }
@media (prefers-reduced-motion: reduce) { #child-advice .child-advice-panel { animation: none; } }