/* 接客・クレーム対応ロールプレイAI スタイル */
header { background: linear-gradient(135deg, #9a3412, #c2410c, #f97316); color: white; padding: 20px 24px 16px; }
header h1 { font-size: 22px; }
header p  { font-size: 13px; opacity: .85; margin-top: 4px; }

.tab-nav { display: flex; background: #9a3412; padding: 0 24px; overflow-x: auto; }
.tab { padding: 10px 20px; color: rgba(255,255,255,.65); font-size: 14px; cursor: pointer; border-bottom: 3px solid transparent; white-space: nowrap; }
.tab:hover { color: white; }
.tab.active { color: white; border-bottom-color: white; font-weight: bold; }

.container { max-width: 960px; margin: 24px auto; padding: 0 16px; }
.tab-content { display: none; }
.tab-content.active { display: block; }
.box { background: white; border-radius: 12px; padding: 20px; margin-bottom: 16px; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.box h2 { font-size: 15px; color: #1e293b; margin-bottom: 14px; font-weight: 700; }
.box h3 { font-size: 13px; color: #1e293b; margin-bottom: 8px; font-weight: 700; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.full { grid-column: span 2; }
@media(max-width:640px){ .form-grid{grid-template-columns:1fr;} .full{grid-column:span 1;} }
label { display: block; font-size: 12px; color: #64748b; margin-bottom: 4px; font-weight: 600; }

/* ── シナリオ選択カード ── */
.scenario-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.scenario-card { display: block; cursor: pointer; }
.scenario-card input { position: absolute; opacity: 0; pointer-events: none; }
.scenario-card-body { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; padding: 12px 14px; transition: background .15s, border-color .15s; height: 100%; }
.scenario-card:has(input:checked) .scenario-card-body { background: #fff7ed; border-color: #f97316; box-shadow: 0 0 0 1px #f97316 inset; }
.scenario-card:hover .scenario-card-body { background: #fffbeb; }
.scenario-industry { font-size: 11px; color: #c2410c; font-weight: 700; background: #ffedd5; display: inline-block; padding: 1px 8px; border-radius: 20px; margin-bottom: 6px; }
.scenario-label { font-size: 13px; color: #1e293b; font-weight: 600; line-height: 1.5; }

/* ── 難易度チップ ── */
.goal-grid { display: flex; gap: 8px; flex-wrap: wrap; }
.goal-chip { display: flex; align-items: center; gap: 6px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 20px; padding: 5px 14px; cursor: pointer; font-size: 12px; font-weight: normal; transition: background .15s; }
.goal-chip:has(input:checked) { background: #ea580c; color: white; border-color: #ea580c; }
.goal-chip:hover { background: #fff7ed; }
.goal-chip:has(input:checked):hover { background: #c2410c; }

.btn-row { margin-top: 16px; }
.btn-primary  { background: #ea580c; color: white; }
.btn-primary:hover { background: #c2410c; }
.btn-secondary { background: #fff7ed; color: #c2410c; border: 1px solid #fed7aa; }
.btn-secondary:hover { background: #ffedd5; }

.progress-wrap { margin-top: 12px; }
.progress-bar  { background: #ffedd5; border-radius: 8px; height: 8px; overflow: hidden; }
.progress-fill { background: linear-gradient(90deg, #ea580c, #fb923c); height: 100%; transition: width .4s; width: 0%; animation: indeterminate 1.2s ease-in-out infinite; }
.progress-text { font-size: 12px; color: #c2410c; margin-top: 6px; }
@keyframes indeterminate { 0% { width: 10%; margin-left: 0; } 50% { width: 60%; margin-left: 20%; } 100% { width: 10%; margin-left: 90%; } }

/* ── ロールプレイ チャット ── */
.card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.card-header h2 { font-size: 15px; color: #1e293b; font-weight: 700; }
.turn-counter { font-size: 12px; color: #c2410c; font-weight: 700; background: #ffedd5; padding: 3px 10px; border-radius: 20px; }

.chat-window { display: flex; flex-direction: column; gap: 10px; min-height: 280px; max-height: 420px; overflow-y: auto; padding: 12px; background: #f8fafc; border-radius: 10px; margin-bottom: 12px; }
.chat-msg { max-width: 80%; }
.chat-bubble { padding: 10px 14px; border-radius: 14px; font-size: 13px; line-height: 1.6; white-space: pre-wrap; }
.chat-role { font-size: 10px; color: #94a3b8; margin-top: 3px; }

.chat-customer { align-self: flex-start; }
.chat-customer .chat-bubble { background: #ffffff; border: 1px solid #e2e8f0; color: #1e293b; border-bottom-left-radius: 4px; }
.chat-customer .chat-role { text-align: left; }

.chat-staff { align-self: flex-end; }
.chat-staff .chat-bubble { background: #ea580c; color: white; border-bottom-right-radius: 4px; }
.chat-staff .chat-role { text-align: right; }

.chat-input-row { display: flex; gap: 8px; align-items: flex-end; }
.chat-input-row textarea { flex: 1; resize: vertical; font-family: inherit; font-size: 13px; padding: 10px 12px; border: 1px solid #e2e8f0; border-radius: 8px; }
.chat-input-row textarea:focus { outline: 2px solid #fb923c; border-color: #fb923c; }
.chat-input-row button { white-space: nowrap; }

/* ── 採点結果 ── */
.total-score { font-size: 48px; font-weight: 800; line-height: 1; color: #ea580c; text-align: center; }
.total-score-unit { font-size: 18px; font-weight: 600; color: #94a3b8; }
.total-comment { font-size: 13px; color: #475569; text-align: center; margin: 8px 0 16px; }

.score-rows { display: flex; flex-direction: column; gap: 10px; }
.score-row { display: grid; grid-template-columns: 110px 1fr 50px; align-items: center; gap: 10px; }
.score-label { font-size: 12px; color: #64748b; font-weight: 600; }
.score-bar { background: #ffedd5; border-radius: 6px; height: 8px; overflow: hidden; }
.score-bar-fill { background: linear-gradient(90deg, #ea580c, #fb923c); height: 100%; }
.score-value { font-size: 12px; color: #475569; font-weight: 700; text-align: right; }

#score-result ul { font-size: 13px; color: #475569; line-height: 1.8; padding-left: 20px; }
#score-result p { font-size: 13px; color: #475569; line-height: 1.8; }