.dialog:has(#morning-panel) { width: min(570px, calc(100% - 28px)); }
.dialog:has(#morning-panel) .dialog-top { position: sticky; top: 0; z-index: 3; background: #131a2d; box-shadow: 0 -26px 0 #131a2d; border-bottom: 1px solid var(--line); padding-bottom: 15px; margin-bottom: 22px; }
.dialog:has(#morning-panel) .dialog-top h2 { min-width: 0; flex: 1; overflow-wrap: anywhere; }
.dialog:has(#morning-panel) .dialog-top .icon-button { flex-shrink: 0; }
.morning-panel { text-align: center; padding: 2px 0 4px; overflow-wrap: anywhere; }
.morning-sky { position: relative; width: min(216px, 74%); height: 126px; margin: 0 auto 22px; overflow: hidden; }
.morning-orbit { position: absolute; width: 178px; height: 178px; border: 1px solid var(--line); border-radius: 50%; top: 25px; left: 50%; transform: translateX(-50%); }
.morning-orbit::after { content: ''; position: absolute; inset: 18px; border: 1px solid color-mix(in srgb, var(--gold) 20%, transparent); border-radius: 50%; }
.morning-sun { position: absolute; display: grid; place-items: center; left: 50%; top: 40px; transform: translateX(-50%); width: 92px; height: 92px; border-radius: 50%; font-size: 46px; color: var(--gold); background: radial-gradient(circle, color-mix(in srgb, var(--gold) 24%, transparent), transparent 72%); animation: morning-rise 2.2s ease-out both; }
.morning-star { position: absolute; color: var(--lavender); font-size: 30px; }.morning-star-one { top: 8px; left: 34px; }.morning-star-two { top: 20px; right: 30px; font-size: 22px; }.morning-star-three { top: 74px; left: 12px; }
.morning-panel .eyebrow { justify-content: center; letter-spacing: .15em; font-size: 11px; margin-bottom: 14px; }
.morning-panel h3 { margin: 0 auto; max-width: 460px; font-size: clamp(26px, 5.8vw, 38px); line-height: 1.22; font-family: Georgia, serif; font-weight: 400; color: var(--ink); }
.morning-date { color: var(--muted); font-size: 12px; margin: 12px 0 24px; }
.morning-advice { margin: 0 auto; max-width: 460px; line-height: 1.85; font-size: 16px; white-space: pre-line; }
.morning-wish { color: var(--gold); font-size: 19px; line-height: 1.5; margin: 24px auto 8px; }
.morning-source { color: var(--muted); font-size: 12px; margin-bottom: 26px; }
.morning-preview-label { display: inline-block; font-size: 11px; line-height: 1.5; padding: 7px 12px; border-radius: 20px; border: 1px solid var(--line); color: var(--lavender); margin: 0 0 16px; }
.morning-voice { border-top: 1px solid var(--line); padding-top: 24px; }.morning-play { width: min(100%, 320px); }
.morning-voice audio { width: 100%; display: block; max-width: 430px; margin: 14px auto; min-height: 44px; }.morning-voice audio[hidden] { display: none; }
.morning-auto { justify-content: center; text-align: left; font-size: 13px; margin: 18px auto 8px; width: fit-content; }
.morning-voice-hint { color: var(--muted); font-size: 11px; line-height: 1.7; max-width: 380px; margin: 10px auto; }
.morning-continue { min-height: 44px; margin: 18px auto 0; padding: 10px; }.morning-error { line-height: 1.7; font-size: 14px; color: var(--muted); }
.personal-insights-grid:has(> :only-child) { grid-template-columns: 1fr; }.personal-insights-grid .chart-teaser { padding: 26px; }
@keyframes morning-rise { from { opacity: 0; translate: 0 24px; } to { opacity: 1; translate: 0 0; } }
@media (max-width: 360px) { .morning-advice { font-size: 15px; line-height: 1.8; }.morning-panel h3 { font-size: 27px; }.morning-sky { margin-bottom: 16px; height: 115px; }.personal-insights-grid .chart-teaser { padding: 20px; } }
@media (max-height: 700px) and (max-width: 600px) {
  .dialog:has(#morning-panel) .dialog-top { margin-bottom: 12px; }
  .morning-sky { width: 120px; height: 58px; margin: 0 auto 14px; }
  .morning-orbit { width: 110px; height: 110px; top: 16px; }
  .morning-sun { width: 50px; height: 50px; top: 8px; font-size: 32px; }
  .morning-star-one { top: -8px; left: 8px; }.morning-star-two { top: 0; right: 4px; font-size: 16px; }.morning-star-three { top: 36px; left: 4px; }
  .morning-panel .eyebrow { display: none; }
  .morning-preview-label { font-size: 10px; padding: 5px 9px; margin-bottom: 12px; }
  .morning-panel h3 { font-size: 27px; }
  .morning-date { margin: 8px 0 16px; }
  .morning-wish { margin-top: 18px; font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) { .morning-sun { animation: none; } }