/* Presentation only: PHP owns OTP, analysis and persistence. */
.chart-flow-modal,.chart-flow-document{font-family:Meiryo,'メイリオ',sans-serif;color:#315d4b}
.chart-flow-modal .modal-dialog{max-width:590px;margin:16px auto;width:calc(100% - 24px)}
.chart-flow-modal .modal-content{padding:38px 24px 26px;max-height:calc(100dvh - 32px);overflow:auto;border:1px solid #dce9e2;border-radius:26px;background:linear-gradient(145deg,#fff,#f4faf6)}
.chart-flow-modal .btn-close{position:absolute;right:14px;top:12px;z-index:2;padding:12px;background-size:14px}
.chart-flow-modal [hidden],.chart-flow-report[hidden]{display:none!important}
.chart-flow-frame{width:100%;border:0;min-height:360px;background:transparent;display:block}
.chart-flow-report{margin-top:24px;width:100%;min-width:0}.chart-flow-report .chart-flow-frame{min-height:660px}
.chart-flow-preparing,.chart-flow-thinking{text-align:center;padding:26px 6px 10px;overflow-wrap:anywhere}
.chart-flow-preparing h2,.chart-flow-thinking h2,.chart-flow-document h2{font-size:22px;line-height:1.7;font-weight:700;margin:16px 0;overflow-wrap:anywhere}
.chart-flow-orbit{width:118px;height:118px;margin:0 auto 22px;border-radius:50%;position:relative;display:grid;place-items:center;background:#eaf5ee;box-shadow:0 12px 38px #519b7030}
.chart-flow-orbit:before{content:'';position:absolute;inset:-6px;border:4px solid transparent;border-top-color:#8cbcab;border-right-color:#b5a4d9;border-radius:50%;animation:chart-flow-spin 2s linear infinite}
.chart-flow-orbit i{font-size:54px;animation:chart-flow-bob 2s ease-in-out infinite}.chart-flow-orbit span{position:absolute;right:0;top:0;color:#c9a458;animation:chart-flow-twinkle 1.5s ease-in-out infinite}
.chart-flow-topic{font-size:16px;line-height:1.8;padding:16px;border:1px solid #d7e7dc;border-radius:16px;background:#fff;min-height:74px;display:flex;align-items:center;justify-content:center}
.chart-flow-progress{height:9px;border-radius:20px;background:#e1eae4;overflow:hidden;margin:22px 0 14px}.chart-flow-progress span{display:block;width:35%;height:100%;background:linear-gradient(90deg,#66ba9e,#a49dd3);animation:chart-flow-slide 2.4s ease-in-out infinite}
.chart-flow-thinking small{display:block;color:#75897f;font-size:11px;line-height:1.8;overflow-wrap:anywhere}
.chart-flow-slow{border:1px solid #efd5ba;border-radius:18px;padding:16px;margin-top:18px;background:#fff8ef}.chart-flow-slow p{line-height:1.9;margin:12px 0;font-size:14px}.chart-flow-overload{font-size:30px;animation:chart-flow-bob 1s ease-in-out infinite;color:#a87952}
.chart-flow-document{background:transparent;margin:0}.chart-flow-document-body{padding:20px 14px;max-width:1100px;margin:0 auto;text-align:center;overflow-wrap:anywhere}
.chart-flow-document .chart-native-otp{width:min(100%,280px);text-align:center;font-size:30px;letter-spacing:.3em;padding:16px;margin:18px auto;border:1px solid #cbded1;border-radius:16px;display:block;color:#315d4b}
.chart-flow-document .chart-modal-button{display:flex;align-items:center;justify-content:center;margin:20px auto 0;width:100%;min-height:52px;height:auto;white-space:normal;line-height:1.8;border:0;border-radius:16px;box-shadow:0 8px 20px #315d4b18;padding:14px;color:#fff;background:linear-gradient(115deg,#288364,#398c6e);font-family:Meiryo,'メイリオ',sans-serif}
.chart-flow-document .chart-otp-email{font-size:13px;padding:12px;border:1px solid #deebe1;border-radius:12px;background:#f0f7f2;overflow-wrap:anywhere}
.chart-flow-envelope{width:70px;height:70px;display:grid;place-items:center;background:#ebf5ef;border-radius:20px;margin:0 auto;color:#398c6e;font-size:32px}.chart-flow-warning{background:#fff1e6;color:#bd7858}
.chart-flow-error{border:1px solid #edc7bb;padding:14px;border-radius:14px;background:#fff5f1;color:#a4493b;line-height:1.9;white-space:pre-line}.chart-flow-document p{line-height:1.9}
.chart-flow-celebration{background:linear-gradient(120deg,#effaf3,#f5f0fc);border:1px solid #cfe8d7;border-radius:20px;padding:22px;margin-bottom:24px}.chart-flow-celebration i{font-size:36px;color:#379269}.chart-flow-celebration h2{margin:12px 0;font-size:22px}.chart-flow-celebration p{margin:0;font-size:14px}
.chart-flow-document .chart-native-result{text-align:left;margin:0}.chart-flow-document .chart-native-result>h3{font-size:22px;line-height:1.7}.chart-flow-document .chart-native-result small{display:block;line-height:1.8}
.chart-flow-confetti{position:fixed;inset:0;z-index:1090;pointer-events:none;overflow:hidden}.chart-flow-confetti span{position:absolute;top:-20px;width:8px;height:14px;border-radius:3px;animation:chart-flow-fall 3s ease-in forwards}
@keyframes chart-flow-spin{to{transform:rotate(360deg)}}@keyframes chart-flow-bob{50%{transform:translateY(-7px)}}@keyframes chart-flow-twinkle{50%{opacity:.35;transform:scale(.7)}}@keyframes chart-flow-slide{50%{transform:translateX(180%)}}@keyframes chart-flow-fall{to{transform:translateY(110vh) rotate(600deg);opacity:.2}}
@media(max-width:575px){.chart-flow-modal .modal-content{padding:32px 12px 18px}.chart-flow-thinking h2,.chart-flow-document h2{font-size:19px}.chart-flow-document-body{padding:18px 8px}.chart-flow-orbit{width:92px;height:92px}.chart-flow-orbit i{font-size:42px}.chart-flow-topic{font-size:14px}.chart-flow-document .chart-result-actions{display:grid;gap:12px}.chart-flow-document .chart-result-actions>*{max-width:100%;white-space:normal}.chart-flow-document .chart-result-grid{grid-template-columns:minmax(0,1fr)}}
@media(prefers-reduced-motion:reduce){.chart-flow-orbit:before,.chart-flow-orbit i,.chart-flow-orbit span,.chart-flow-progress span,.chart-flow-overload,.chart-flow-confetti span{animation:none!important}.chart-flow-confetti{display:none}}

.chart-flow-modal.is-report{display:block!important;position:static!important;inset:auto;overflow:visible;z-index:auto;padding:0!important;width:100%;height:auto;opacity:1!important}
.chart-flow-modal.is-report .modal-dialog{width:100%!important;max-width:none!important;min-width:0;margin:0!important;padding:0!important;transform:none!important}
.chart-flow-modal.is-report .modal-content{width:100%;min-width:0;padding:0!important;max-height:none;overflow:visible;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important}
.index-page .chart-flow-modal.is-report .modal-content .btn-close,.chart-flow-modal.is-report .btn-close{display:none!important}

/* Completed reports use the available phone width, not the OTP dialog inset. */
.chart-flow-modal.is-report .chart-flow-frame{width:100%;max-width:100%;min-width:0}
@media(max-width:600px){
    body.index-page #tab10 .guest-chart-card:has(.chart-flow-modal.is-report),
    .chart-shared-page .guest-chart-card:has(.chart-flow-modal.is-report),
    body.index-page #tab10 .guest-chart-card:has(>.chart-sub-pane>.chart-shared-result),
    .chart-shared-page .guest-chart-card:has(>.chart-sub-pane>.chart-shared-result){padding:8px!important}
    .chart-flow-document[data-chart-flow-stage="result"] .chart-flow-document-body{width:100%;min-width:0;max-width:none;padding:0 2px;box-sizing:border-box}
    .chart-flow-document[data-chart-flow-stage="result"] .chart-native-result{padding:12px}
    .chart-flow-document[data-chart-flow-stage="result"] .chart-native-result>h3{font-size:18px;line-height:1.6}
    .chart-flow-document[data-chart-flow-stage="result"] .chart-flow-celebration{padding:16px 12px;margin-bottom:16px}
}