/* ===========================================================
   数学乐园 · AI 思维伙伴与动态题目样式（css/ai-coach.css）
   =========================================================== */

/* 1. AI 声明式安全图形积木 */
.ai-vis-array {
  display: inline-flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 16px;
  background: #FFFDF7;
  border: 2px dashed #E8DFC8;
  border-radius: 16px;
  margin: 6px auto;
}
.ai-vis-row {
  display: flex;
  gap: 8px;
  justify-content: center;
  font-size: 24px;
  line-height: 1.2;
}
.ai-vis-row i { font-style: normal; }

.ai-vis-seq {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px;
  background: #F6F3FF;
  border-radius: 16px;
  margin: 6px 0;
}
.ai-seq-cell {
  min-width: 42px;
  padding: 8px 12px;
  background: #FFFFFF;
  border: 2px solid #D8CEFF;
  border-radius: 12px;
  font-weight: 800;
  font-size: 19px;
  color: #3D2E7C;
  text-align: center;
  box-shadow: 0 2px 0 rgba(124, 92, 232, 0.12);
}
.ai-seq-cell.ask {
  background: #FFF3D6;
  border-color: #F5A524;
  color: #C97A00;
}
.ai-seq-arr {
  color: #9B8EC7;
  font-weight: 700;
  font-size: 16px;
}

.ai-vis-bars {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  background: #F8FAFF;
  border: 1.5px solid #E1ECFF;
  border-radius: 16px;
  margin: 6px 0;
  text-align: left;
}
.ai-bar-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ai-bar-lb {
  flex: 0 0 68px;
  font-weight: 700;
  font-size: 15px;
  color: #334155;
  text-align: right;
}
.ai-bar-track {
  flex: 1;
  background: #EAF1FB;
  border-radius: 999px;
  padding: 3px;
  overflow: hidden;
}
.ai-bar-fill {
  min-width: 58px;
  padding: 5px 12px;
  border-radius: 999px;
  color: #FFFFFF;
  font-weight: 800;
  font-size: 14px;
  white-space: nowrap;
  transition: width 0.35s ease;
}

/* 2. 答题反馈区：AI 苏格拉底启发小气泡 */
.ai-nudge {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 10px;
  padding: 12px 14px;
  background: linear-gradient(135deg, #F5F0FF 0%, #FFF8EB 100%);
  border: 1.5px solid #D8C7FF;
  border-radius: 16px;
  color: #3B2F63;
  font-size: 15.5px;
  line-height: 1.55;
  animation: aiFadeUp 0.28s ease-out;
}
.ai-nudge-emo {
  font-size: 22px;
  line-height: 1.2;
  flex-shrink: 0;
}
.ai-nudge-body {
  flex: 1;
}
.ai-nudge-body b {
  color: #6B46E5;
  display: block;
  font-size: 14px;
  margin-bottom: 2px;
}
.ai-nudge-say {
  flex-shrink: 0;
  border: none;
  background: #FFFFFF;
  border-radius: 999px;
  width: 34px;
  height: 34px;
  cursor: pointer;
  font-size: 16px;
  box-shadow: 0 2px 6px rgba(107, 70, 229, 0.14);
}

@keyframes aiFadeUp {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 3. AI 思维伙伴主场大厅（#ai-coach） */
.ai-hub {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ai-hero {
  background: linear-gradient(135deg, #F3EEFF 0%, #EBF5FF 55%, #FFF7E6 100%);
  border: 2px solid #DFD3FF;
  border-radius: 22px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ai-hero-top {
  display: flex;
  align-items: center;
  gap: 14px;
}
.ai-hero-emo {
  font-size: 42px;
  width: 64px;
  height: 64px;
  border-radius: 20px;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px rgba(124, 92, 232, 0.15);
  flex-shrink: 0;
}
.ai-hero-t h2 {
  margin: 0 0 4px;
  font-size: 22px;
  color: #2D225A;
}
.ai-hero-t p {
  margin: 0;
  font-size: 14.5px;
  color: #554A7C;
  line-height: 1.5;
}
.ai-greet {
  background: rgba(255, 255, 255, 0.85);
  border-radius: 14px;
  padding: 10px 14px;
  font-size: 14.5px;
  color: #433575;
  border-left: 4px solid #7C5CE8;
}
.ai-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ai-pill {
  background: #FFFFFF;
  border: 1px solid #E2DAFF;
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 13px;
  color: #4B3F72;
  font-weight: 600;
}
.ai-pill b {
  color: #6D4AFF;
}

.ai-modes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
}
.ai-mode-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 18px;
  border-radius: 20px;
  background: #FFFFFF;
  border: 2px solid #EAE6F8;
  text-align: left;
  cursor: pointer;
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}
.ai-mode-card:hover, .ai-mode-card:focus-visible {
  transform: translateY(-2px);
  border-color: #9B7BF7;
  box-shadow: 0 8px 20px rgba(124, 92, 232, 0.14);
}
.ai-mode-card.primary {
  background: linear-gradient(180deg, #FAF7FF 0%, #FFFFFF 100%);
  border-color: #B79EFF;
}
.ai-mode-emo {
  font-size: 30px;
}
.ai-mode-card h3 {
  margin: 0;
  font-size: 17.5px;
  color: #291F52;
}
.ai-mode-card p {
  margin: 0;
  font-size: 14px;
  color: #5E567A;
  line-height: 1.5;
  flex: 1;
}
.ai-mode-go {
  display: inline-block;
  margin-top: 4px;
  padding: 6px 14px;
  border-radius: 999px;
  background: #7C5CE8;
  color: #FFFFFF;
  font-weight: 700;
  font-size: 13.5px;
}

.ai-loading-card {
  text-align: center;
  padding: 36px 20px;
  border-radius: 22px;
  background: #FAF8FF;
  border: 2px dashed #D5C8FF;
}
.ai-loading-emo {
  font-size: 46px;
  display: inline-block;
  animation: aiPulse 1.1s infinite ease-in-out;
}
@keyframes aiPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

/* 4. 首页与智慧岛入口点缀 */
.ai-home-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px;
  margin: 14px 0;
  border-radius: 20px;
  background: linear-gradient(135deg, #F4EEFF 0%, #EBF6FF 100%);
  border: 2px solid #DCD0FF;
  cursor: pointer;
  width: 100%;
  text-align: left;
}
.ai-home-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ai-home-emo {
  font-size: 32px;
}
.ai-home-left b {
  display: block;
  font-size: 16.5px;
  color: #2E215B;
}
.ai-home-left small {
  display: block;
  margin-top: 2px;
  font-size: 13.5px;
  color: #5B5083;
}
.ai-home-cta {
  padding: 8px 14px;
  border-radius: 999px;
  background: #7C5CE8;
  color: #FFFFFF;
  font-weight: 700;
  font-size: 13.5px;
  white-space: nowrap;
}

.sw-lv-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

/* 5. 家长报告：AI 思维成长观察卡 */
.rp-ai {
  background: linear-gradient(180deg, #FBF9FF 0%, #FFFFFF 100%);
  border: 1.5px solid #E1D6FF;
}
.rp-ai-head {
  font-size: 15px;
  color: #362966;
  font-weight: 700;
  margin: 0 0 10px;
  line-height: 1.55;
}
.rp-ai-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
  margin: 10px 0;
}
.rp-ai-box {
  background: #F6F3FF;
  border-radius: 14px;
  padding: 11px 13px;
}
.rp-ai-box.warm {
  background: #FFF7EC;
}
.rp-ai-box b {
  display: block;
  font-size: 13.5px;
  color: #533FB0;
  margin-bottom: 4px;
}
.rp-ai-box.warm b {
  color: #B86B00;
}
.rp-ai-box ul {
  margin: 0;
  padding-left: 18px;
  font-size: 13.5px;
  color: #3F3A56;
  line-height: 1.55;
}
.rp-ai-talk {
  margin: 10px 0 0;
  padding: 10px 13px;
  background: #EEF8F5;
  border-radius: 12px;
  font-size: 13.5px;
  color: #1F574C;
  line-height: 1.55;
}