/* ===== 学习页：现代童趣高颜值视觉设计 ===== */
  .mastery-header-card{
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 248, 242, 0.92) 100%);
    border-radius: 20px;
    padding: 14px 18px 12px;
    border: 1.5px solid rgba(255, 222, 203, 0.85);
    box-shadow: 0 6px 20px rgba(184, 66, 18, 0.06), 0 1px 3px rgba(61, 50, 41, 0.04);
    margin-bottom: 12px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  .mastery-row{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
  }
  .mastery-label{
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
  }
  .mastery-meta-row{
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
  }
  .learn-curriculum-pill{
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 800;
    color: #943A0C;
    background: #FFEAD9;
    border: 1px solid #FFD1B5;
    border-radius: 999px;
    padding: 2px 9px;
    letter-spacing: 0.2px;
  }
  .level-names{
    font-size: 12px;
    color: var(--ink-light);
    font-weight: 700;
  }
  .level-names span{
    color: var(--orange-strong, #D44E0E);
    font-weight: 800;
  }
  .learn-unit-title{
    margin: 0;
    font-size: 19px;
    font-weight: 900;
    color: var(--ink);
    letter-spacing: -0.2px;
    line-height: 1.3;
  }
  .learn-unit-title b{
    font-weight: 900;
  }

  .mastery-right-controls{
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .level-dots{
    display: flex;
    gap: 6px;
    align-items: center;
    background: #FFF2E6;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid #FFDECB;
  }
  .level-dots .ld{
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #E8D8C7;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .level-dots .ld.on{
    background: linear-gradient(135deg, #FF7A45, #FA541C);
    transform: scale(1.25);
    box-shadow: 0 0 8px rgba(250, 84, 28, 0.45);
  }
  .level-dots .ld.on.g{
    background: linear-gradient(135deg, #52C41A, #389E0D);
    box-shadow: 0 0 8px rgba(82, 196, 26, 0.45);
  }

  .mastery-action-btns{ display:flex; align-items:center; gap:8px; }
  .btn-pill-action{
    border: 1.5px solid #FFD4BC;
    background: #FFFFFF;
    color: #B84212;
    font-size: 13px;
    font-weight: 800;
    padding: 6px 14px;
    border-radius: 999px;
    cursor: pointer;
    transition: all .2s cubic-bezier(0.16, 1, 0.3, 1);
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 44px;
    box-shadow: 0 2px 8px rgba(184,66,18,0.06);
  }
  .btn-pill-action:active:not(:disabled){ transform: scale(0.96); }
  .btn-pill-action:hover:not(:disabled){
    background: #FFE8D6;
    border-color: var(--orange);
    transform: translateY(-1.5px);
    box-shadow: 0 5px 14px rgba(184,66,18,0.18);
  }
  .btn-pill-action.complete{
    border-color: #A3E081;
    color: #265B0E;
    background: #F4FAF0;
  }
  .btn-pill-action.complete:hover:not(:disabled){
    background: #E4F7DA;
    border-color: #55B527;
    box-shadow: 0 5px 14px rgba(56, 158, 13, 0.2);
  }
  .btn-pill-action:disabled{
    opacity: 0.45;
    background: #FAF7F2 !important;
    border-color: #E8DDD0 !important;
    color: #A89B8F !important;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
    filter: grayscale(0.6);
    pointer-events: none;
  }
  .btn-pill-action.ghost{
    border-color: #EBDDCF;
    color: var(--ink-light);
    background: #FFFFFF;
    box-shadow: none;
  }
  .btn-pill-action.ghost:hover:not(:disabled){
    background: #FFF6EE;
    border-color: #FFC79E;
    color: #B84212;
  }

  /* 🌟 童趣关卡探险步进胶囊 (Quest Step Track) */
  .quest-step-track{
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed rgba(235, 214, 195, 0.7);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .quest-step-track::-webkit-scrollbar{ display: none; }
  .quest-step-pill{
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    background: #F8F3ED;
    border: 1px solid #EADBCC;
    font-size: 11.5px;
    font-weight: 750;
    color: var(--ink-light);
    white-space: nowrap;
    transition: all 0.25s ease;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }
  .quest-step-pill:active{
    transform: scale(0.95);
  }
  .quest-step-pill:hover{
    border-color: #FFB385;
    background: #FFF7F0;
  }
  .quest-step-pill .q-icon{ font-size: 13px; }
  .quest-step-pill.current{
    background: linear-gradient(135deg, #FFF5ED 0%, #FFE9DA 100%);
    border-color: #FF9E66;
    color: #B84212;
    font-weight: 850;
    box-shadow: 0 2px 8px rgba(250, 84, 28, 0.16);
    animation: questGlowPulse 2s ease-in-out infinite alternate;
  }
  @keyframes questGlowPulse{
    from{ box-shadow: 0 0 0 2px rgba(255, 122, 69, 0.12); }
    to{ box-shadow: 0 0 0 5px rgba(255, 122, 69, 0.28); }
  }
  .quest-step-pill.done{
    background: #F2F9EE;
    border-color: #B7EB8F;
    color: #237804;
    font-weight: 800;
  }
  .quest-step-arrow{
    font-size: 10px;
    color: #D4C2B0;
    font-weight: 800;
    user-select: none;
  }
  .btn-pill-action.active#challengeBtn{
    background: linear-gradient(135deg, #FFF2E8 0%, #FFE6D6 100%);
    border-color: #FF7A45;
    color: #B84212;
    box-shadow: 0 0 0 3px rgba(255, 122, 69, 0.22), 0 4px 12px rgba(250, 84, 28, 0.18);
  }
  .btn-pill-action.active#completeBtn{
    background: linear-gradient(135deg, #FEFBE8 0%, #FEF3C7 100%);
    border-color: #F59E0B;
    color: #92400E;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.25), 0 4px 12px rgba(217, 119, 6, 0.2);
  }
  .bubble-highlight-flash{
    animation: bubbleHighlightAnim 1.2s ease-out;
  }
  @keyframes bubbleHighlightAnim{
    0%{ box-shadow: 0 0 0 0 rgba(255, 122, 69, 0.6); }
    40%{ box-shadow: 0 0 0 8px rgba(255, 122, 69, 0.2); }
    100%{ box-shadow: 0 0 0 0 rgba(255, 122, 69, 0); }
  }

  /* 🌟 灵动学伴轻态条 (Companion Micro-Bar) */
  .learn-companion-bar{
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: linear-gradient(135deg, #FFF9F3 0%, #FFF2E6 100%);
    border: 1.5px solid #FFDEC9;
    border-radius: 16px;
    padding: 8px 12px;
    margin-bottom: 8px;
    box-shadow: 0 2px 10px rgba(184, 66, 18, 0.05);
  }
  .companion-micro-left{
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
  }
  .learn-companion-bar .l-avatar{
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #FFFFFF, #FFD0B5);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    box-shadow: 0 3px 8px rgba(184, 66, 18, 0.18);
    flex-shrink: 0;
    animation: mascotBob 3s ease-in-out infinite;
  }
  @keyframes mascotBob{
    0%, 100%{ transform: translateY(0); }
    50%{ transform: translateY(-2.5px); }
  }
  .learn-companion-bar .l-bubble{
    font-size: 13px;
    font-weight: 750;
    color: #7D4018;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* 对话区顶部工具条：长对话滚动时入口依旧可见 */
  .chat-toolbar{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 2px 2px 4px;
    margin-top: 2px;
  }
  .chat-toolbar-title{
    font-size: 13px;
    font-weight: 750;
    color: var(--ink-light);
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }

  .chat-wrap{
    margin-top: 4px;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #CCAFA0 rgba(0, 0, 0, 0.04);
    padding-right: 4px;
    padding-bottom: 14px;
  }
  .chat-wrap::-webkit-scrollbar{
    width: 7px;
  }
  .chat-wrap::-webkit-scrollbar-thumb{
    background: #CCAFA0;
    border-radius: 999px;
  }
  .chat-wrap::-webkit-scrollbar-thumb:hover{
    background: #B49583;
  }
  .chat-wrap::-webkit-scrollbar-track{
    background: rgba(0, 0, 0, 0.03);
    border-radius: 999px;
  }
  @media (max-width: 799px) {
    .chat-wrap{
      max-height: min(48vh, 380px);
    }
  }
  .msg{ display: flex; gap: 10px; margin-bottom: 14px; animation: msgIn .3s ease; }
  @keyframes msgIn{ from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);} }
  .msg .avatar{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
  }
  .msg.ai .avatar{
    background: radial-gradient(circle at 35% 35%, #FFFFFF, #FFDDC2);
    box-shadow: 0 4px 10px rgba(255,122,69,.22);
    border: 1.5px solid #FFE3D1;
  }
  .msg.kid{ flex-direction: row-reverse; }
  .msg.kid .avatar{
    background: radial-gradient(circle at 35% 35%, #FFFFFF, #B9DAFB);
    box-shadow: 0 4px 10px rgba(74,144,217,.22);
    border: 1.5px solid #D6E8FB;
  }
  .bubble{
    max-width: 82%;
    padding: 12px 16px;
    font-size: 15px;
    line-height: 1.65;
    border-radius: 20px;
    position: relative;
    box-sizing: border-box;
  }
  .msg.ai .bubble{
    background: #FFFFFF;
    border-top-left-radius: 4px;
    border: 1.5px solid rgba(245, 230, 215, 0.85);
    box-shadow: 0 5px 18px rgba(61, 50, 41, 0.05), 0 1px 4px rgba(61, 50, 41, 0.02);
    color: var(--ink);
  }
  .msg.kid .bubble{
    background: linear-gradient(135deg, #FF7E40 0%, #FA541C 100%);
    color: #FFFFFF;
    border-top-right-radius: 4px;
    box-shadow: 0 5px 16px rgba(250, 84, 28, 0.28);
    font-weight: 550;
  }
  .bubble .voice-tag{
    display: inline-flex; align-items: center; gap: 4px; font-size: 11px;
    opacity: .9; margin-bottom: 4px; font-weight: 700;
  }
  .bubble.hint{
    background: #F4FAF0;
    border: 1.5px dashed #73D13D;
    color: #237804;
  }
  .msg.ai .bubble.hint{ box-shadow: none; }

  /* ===== 会话交互行动区（自评掌握度选项、再讲一遍确认等） ===== */
  .session-actions{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
  }
  .session-actions .btn-secondary{
    border: 1.5px solid #FFD4BC;
    background: linear-gradient(135deg, #FFFFFF 0%, #FFF8F2 100%);
    color: var(--orange-dark, #B84212);
    font-size: 13.5px;
    font-weight: 850;
    padding: 8px 18px;
    min-height: 45px;
    box-sizing: border-box;
    border-radius: 999px;
    cursor: pointer;
    font-family: inherit;
    transition: all .2s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 3px 10px rgba(184, 66, 18, 0.08);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }
  .session-actions .btn-secondary:active{
    transform: scale(0.95);
  }
  .session-actions .btn-secondary:nth-child(1){
    border-color: #FFD591;
    background: linear-gradient(135deg, #FFFDF5 0%, #FFF7E6 100%);
    color: #D46B08;
    box-shadow: 0 3px 10px rgba(250, 140, 22, 0.14);
  }
  .session-actions .btn-secondary:nth-child(1):hover{
    background: #FFE7BA;
    border-color: #FA8C16;
    box-shadow: 0 5px 16px rgba(250, 140, 22, 0.25);
    transform: translateY(-2px);
  }
  .session-actions .btn-secondary:nth-child(2){
    border-color: #FFD4BC;
    background: linear-gradient(135deg, #FFFFFF 0%, #FFF8F2 100%);
    color: #B84212;
    box-shadow: 0 3px 10px rgba(184, 66, 18, 0.1);
  }
  .session-actions .btn-secondary:nth-child(2):hover{
    background: #FFEFE5;
    border-color: var(--orange);
    box-shadow: 0 5px 16px rgba(184, 66, 18, 0.2);
    transform: translateY(-2px);
  }
  .session-actions .btn-secondary:nth-child(3){
    border-color: #B7EB8F;
    background: linear-gradient(135deg, #FBFDF9 0%, #F4FAF0 100%);
    color: #389E0D;
    box-shadow: 0 3px 10px rgba(82, 196, 26, 0.1);
  }
  .session-actions .btn-secondary:nth-child(3):hover{
    background: #E4F7DA;
    border-color: #52C41A;
    box-shadow: 0 5px 16px rgba(82, 196, 26, 0.2);
    transform: translateY(-2px);
  }

  /* ===== 深度思考过程 (Thinking Process) 组件 ===== */
  .thinking-box {
    display: none !important;
  }
  .thinking-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    background: rgba(255, 122, 69, 0.07);
    cursor: pointer;
    user-select: none;
    font-size: 11.5px;
    font-weight: 750;
    color: var(--orange);
    border-bottom: 1px solid transparent;
    transition: background 0.15s ease;
  }
  .thinking-header:hover {
    background: rgba(255, 122, 69, 0.12);
  }
  .thinking-title {
    display: inline-flex;
    align-items: center;
    gap: 5px;
  }
  .thinking-icon {
    font-size: 13px;
    display: inline-block;
    animation: thoughtPulse 2s ease-in-out infinite;
  }
  @keyframes thoughtPulse {
    0%, 100% { transform: scale(1); opacity: 0.9; }
    50% { transform: scale(1.18); opacity: 1; }
  }
  .thinking-toggle-btn {
    font-size: 11px;
    opacity: 0.85;
    font-weight: 600;
  }
  .thinking-body {
    padding: 8px 10px;
    border-top: 1px dashed #FFE3D1;
    color: #705847;
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 12px;
    letter-spacing: 0.2px;
  }
  .thinking-box.collapsed .thinking-body {
    display: none;
  }
  .thinking-box.collapsed .thinking-header {
    border-bottom-color: transparent;
  }
  .speech-text {
    line-height: 1.65;
    font-size: 15px;
  }
  /* 小狐老师（AI）提问与对话统一采用 16px 字重 600，整体连贯且清晰易读 */
  .msg.ai .speech-text {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.65;
    color: var(--ink);
  }
  .msg.kid .speech-text {
    font-size: 15px;
    line-height: 1.65;
  }
  .speech-text p + p {
    margin-top: 8px;
  }

  .chat-chips{
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    gap: 8px;
    padding: 4px 2px 8px;
    margin-bottom: 6px;
  }
  .chat-chips::-webkit-scrollbar{ display:none; }
  .qchip{
    flex-shrink:0; border:1.5px solid var(--orange-soft); background:#fff;
    color:#AD3F10; font-size:13px; font-weight:750; padding:6px 14px;
    border-radius:999px; cursor:pointer; font-family:inherit; transition:all .2s; min-height:45px; min-width:44px;
    box-sizing: border-box;
    display:inline-flex; align-items:center; justify-content:center;
    box-shadow:0 2px 6px rgba(184,66,18,0.06);
  }
  .qchip:hover{ background: #FFF6EE; border-color: var(--orange); }
  .qchip:active{ transform:scale(.94); background:var(--orange-soft); }

  .voice-bar{
    display:flex; align-items:center; gap:14px; padding:8px 0 12px;
  }
  .voice-btn{
    width:74px; height:74px; border-radius:50%; border:none; cursor:pointer;
    background:var(--orange);
    color:#fff; font-size:30px; flex-shrink:0; margin:0 auto;
    box-shadow:0 10px 24px rgba(255,122,69,.4);
    display:flex; align-items:center; justify-content:center;
    transition:transform .15s; position:relative;
    font-family:inherit;
  }
  .voice-btn:active{ transform:scale(.9); }
  .voice-btn::after{
    content:""; position:absolute; inset:-8px; border-radius:50%;
    border:2px solid rgba(255,122,69,.35); animation:ring 1.8s ease-out infinite;
  }
  @keyframes ring{ from{transform:scale(.85); opacity:1;} to{transform:scale(1.25); opacity:0;} }
  .voice-hint{ text-align:center; font-size:12px; color:var(--ink-light); margin-top:-4px; padding-bottom:6px; }

  /* ===== P0: 表达脚手架与语音交互样式 ===== */
  .scaffold-wrap{
    display: none; /* 默认隐藏：无内容时不占位，避免空框压迫感 */
    background: #FFFBF5;
    border: 1.5px dashed #FFD4BC;
    border-radius: 16px;
    padding: 8px 12px;
    margin: 6px 0 8px;
    transition: all .25s ease;
    flex-shrink: 0;
  }
  .scaffold-header{
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
  }
  .scaffold-badge{
    font-size: 11.5px;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(135deg, var(--orange), #FF8547);
    padding: 2px 8px;
    border-radius: 999px;
  }
  .scaffold-tip{
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-light);
  }
  .scaffold-chips-bar{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .scaffold-chip{
    background: #FFFFFF;
    border: 1.5px solid #FFD4BC;
    color: #9A340D;
    font-size: 13.5px;
    font-weight: 700;
    padding: 6px 14px;
    min-height: 45px;
    box-sizing: border-box;
    border-radius: 999px;
    cursor: pointer;
    font-family: inherit;
    transition: all .2s cubic-bezier(0.16, 1, 0.3, 1);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 2px 6px rgba(184, 66, 18, 0.05);
    user-select: none;
  }
  .scaffold-chip:hover{
    background: #FFEFE5;
    border-color: var(--orange);
    transform: translateY(-1.5px);
    box-shadow: 0 4px 10px rgba(184, 66, 18, 0.15);
  }
  .scaffold-chip:active{
    transform: scale(.95);
  }
  .scaffold-chip .chip-tag{
    font-size: 10.5px;
    background: rgba(184,66,18,0.1);
    color: var(--orange);
    padding: 1px 6px;
    border-radius: 6px;
    font-weight: 800;
  }
  .scaffold-chip .chip-text{
    line-height: 1.2;
  }

  .mic-toggle-btn{
    min-width: 52px;
    min-height: 44px;
    border-radius: 12px;
    border: 1.5px solid #FFD4BC;
    background: #FFF6EE;
    color: #B84212;
    font: inherit;
    font-size: 11.5px;
    font-weight: 800;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3px 6px;
    transition: all .2s ease;
    gap: 1px;
    flex-shrink: 0;
  }
  .mic-toggle-btn .mic-icon{
    font-size: 16px;
    line-height: 1;
  }
  .mic-toggle-btn .mic-label{
    font-size: 11px;
    line-height: 1;
    font-weight: 800;
    color: #AD3F10;
  }
  .mic-toggle-btn:hover{
    background: #FFE8D6;
    border-color: var(--orange);
  }
  .mic-toggle-btn.recording{
    background: #FF4D4F !important;
    border-color: #D9363E !important;
    color: #FFFFFF !important;
    box-shadow: 0 0 0 4px rgba(255, 77, 79, 0.25);
    animation: micPulse 1.2s infinite;
  }
  .mic-toggle-btn.recording .mic-label{
    color: #FFFFFF !important;
  }
  @keyframes micPulse{
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.06); }
  }

  .voice-wave-panel{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: linear-gradient(135deg, #FFF0E6 0%, #FFE5D4 100%);
    border: 1.5px solid #FFBA96;
    border-radius: 14px;
    padding: 8px 14px;
    margin-bottom: 8px;
    box-shadow: 0 4px 12px rgba(184, 66, 18, 0.1);
    animation: slideDown .25s ease;
  }
  @keyframes slideDown{
    from{ opacity: 0; transform: translateY(-8px); }
    to{ opacity: 1; transform: translateY(0); }
  }
  .wave-bars{
    display: flex;
    align-items: center;
    gap: 4px;
    height: 24px;
  }
  .wave-bars .bar{
    width: 3.5px;
    height: 10px;
    background: var(--orange);
    border-radius: 2px;
    animation: barWave 1s ease-in-out infinite;
  }
  .wave-bars .bar:nth-child(1){ animation-delay: 0s; height: 12px; }
  .wave-bars .bar:nth-child(2){ animation-delay: 0.2s; height: 20px; }
  .wave-bars .bar:nth-child(3){ animation-delay: 0.4s; height: 24px; }
  .wave-bars .bar:nth-child(4){ animation-delay: 0.1s; height: 16px; }
  .wave-bars .bar:nth-child(5){ animation-delay: 0.3s; height: 10px; }
  @keyframes barWave{
    0%, 100% { transform: scaleY(0.4); opacity: 0.6; }
    50% { transform: scaleY(1.2); opacity: 1; }
  }
  .voice-status-text{
    font-size: 12.5px;
    font-weight: 750;
    color: #8F2D07;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .voice-timer{
    font-size: 13px;
    font-weight: 800;
    color: #B84212;
    font-family: monospace;
    background: #FFF;
    padding: 2px 8px;
    border-radius: 6px;
    border: 1px solid #FFD0B5;
  }
  .voice-cancel-btn{
    border: none;
    background: transparent;
    color: #8A7A6B;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    padding: 6px 12px;
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: all .2s;
  }
  .voice-cancel-btn:hover{
    background: rgba(0,0,0,0.06);
    color: #B42318;
  }

  /* ===== 极简通透吸底输入栏 & 随身状态行动条 ===== */
  .answer-compose{
    position: sticky;
    bottom: 0;
    background: linear-gradient(180deg, rgba(255,249,240,0) 0%, rgba(248,244,238,0.92) 24%, var(--cream) 100%);
    padding: 8px 0 6px;
    z-index: 50;
  }

  @media (max-width: 940px) {
    .answer-compose{
      bottom:var(--mobile-tabbar-total-height);
      padding:10px 0 8px;
      z-index:110;
    }
  }

  @media (min-width: 800px) and (max-width: 940px) {
    .answer-compose{
      position: static;
      bottom: auto;
    }
  }

  /* 🌟 吸底智能行动条（随 Teach-back 状态在输入框上方动态滑出，永远随手可见） */
  .sticky-action-banner{
    margin-bottom: 8px;
    animation: slideUpPill .25s cubic-bezier(0.16, 1, 0.3, 1);
  }
  @keyframes slideUpPill{
    from{ opacity: 0; transform: translateY(10px) scale(0.96); }
    to{ opacity: 1; transform: translateY(0) scale(1); }
  }
  .banner-pill-btn{
    width: 100%;
    min-height: 44px;
    border: none;
    border-radius: 999px;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 850;
    cursor: pointer;
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all .2s ease;
    text-align: center;
  }
  .banner-pill-btn.challenge{
    background: linear-gradient(135deg, #FF7A45 0%, #FA541C 100%);
    color: #FFFFFF;
    box-shadow: 0 5px 16px rgba(250, 84, 28, 0.35);
  }
  .banner-pill-btn.challenge:hover{
    transform: translateY(-1.5px);
    box-shadow: 0 7px 20px rgba(250, 84, 28, 0.45);
  }
  .banner-pill-btn.complete{
    background: linear-gradient(135deg, #52C41A 0%, #389E0D 100%);
    color: #FFFFFF;
    box-shadow: 0 5px 16px rgba(56, 158, 13, 0.32);
  }
  .banner-pill-btn.complete:hover{
    transform: translateY(-1.5px);
    box-shadow: 0 7px 20px rgba(56, 158, 13, 0.42);
  }

  /* 极简圆润一体化胶囊输入槽 */
  .answer-box{
    display: flex;
    align-items: center;
    gap: 8px;
    background: #FFFFFF;
    border-radius: 999px;
    padding: 4px 6px 4px 6px;
    box-shadow: 0 4px 16px rgba(61, 50, 41, 0.07), 0 1px 3px rgba(61, 50, 41, 0.04);
    border: 1.5px solid #FFE4D3;
    transition: border-color .2s, box-shadow .2s;
  }
  .answer-box:focus-within{
    border-color: var(--orange);
    box-shadow: 0 6px 20px rgba(184, 66, 18, 0.14);
  }

  .mic-round-btn{
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1.5px solid #FFD4BC;
    background: #FFF6EE;
    color: #B84212;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
    transition: all .2s ease;
    padding: 0;
  }
  .mic-round-btn:hover{
    background: #FFE8D6;
    border-color: var(--orange);
    transform: scale(1.06);
  }
  .mic-round-btn.recording{
    background: #FF4D4F !important;
    border-color: #D9363E !important;
    color: #FFFFFF !important;
    box-shadow: 0 0 0 4px rgba(255, 77, 79, 0.25);
    animation: micPulse 1.2s infinite;
  }
  .mic-round-btn.speaking{
    background: #FA8C16 !important;
    border-color: #D46B08 !important;
    color: #FFFFFF !important;
    box-shadow: 0 0 0 4px rgba(250, 140, 22, 0.25);
  }

  .answer-box textarea{
    min-width: 0;
    flex: 1;
    resize: none;
    border: none;
    outline: none;
    font: inherit;
    font-size: 14.5px;
    line-height: 1.4;
    color: var(--ink);
    min-height: 24px;
    max-height: 80px;
    padding: 6px 4px;
    background: transparent;
  }
  .answer-box textarea::placeholder{
    color: #9C8C7E;
    font-size: 13.5px;
  }

  .send-round-btn{
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, var(--orange), #FF8547);
    color: #FFFFFF;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
    transition: all .2s ease;
    box-shadow: 0 3px 8px rgba(184, 66, 18, 0.25);
    padding: 0;
  }
  .send-round-btn:hover{
    transform: scale(1.06);
    box-shadow: 0 4px 12px rgba(184, 66, 18, 0.35);
  }
  .send-round-btn:active{
    transform: scale(0.92);
  }

  /* 彻底消除底部无用的灰字解释 */
  .voice-hint{
    display: none !important;
  }
  .result-summary{ background:linear-gradient(145deg,#FFF4E9,#EAF8DF); border-radius:18px; padding:16px; margin-bottom:14px; border:1px solid #F0E3D3; }
  .result-summary h3{ font-size:18px; font-weight:800; margin-bottom:6px; color:var(--ink); }
  .result-summary p{ font-size:15px; color:#65564A; line-height:1.7; overflow-wrap:anywhere; }
  .loading-dot{ display:inline-block; width:7px; height:7px; border-radius:50%; background:currentColor; animation:blink 1s ease-in-out infinite; margin-right:6px; }
  @keyframes blink{ 50%{ opacity:.25; } }