/* AI 陪读浮窗样式 */

/* 主层 */
.buddy-layer {
  position: fixed;
  right: 18px;
  bottom: 96px;          /* 留出底部导航 */
  z-index: 80;
  pointer-events: none;  /* 让子元素各自开 hit */
}
@media (max-height: 720px) {
  .buddy-layer { bottom: 84px; }
}

/* 浮动按钮 */
.buddy-fab {
  pointer-events: auto;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  border: 4px solid #fff;
  background: linear-gradient(135deg, #ffd54a 0%, #ff8a65 100%);
  box-shadow: 0 6px 18px rgba(255, 138, 101, .35), 0 2px 6px rgba(0,0,0,.18);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: transform .2s ease;
}
.buddy-fab:active { transform: scale(.92); }
.buddy-fab-avatar {
  font-size: 40px;
  line-height: 1;
}
.buddy-fab-dot {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ff5252;
  border: 2px solid #fff;
  display: none;
  animation: pulse 1.2s infinite;
}
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.25); }
}

/* 面板 */
.buddy-panel {
  pointer-events: auto;
  position: fixed;
  right: 18px;
  bottom: 190px;                 /* 底部导航 96 + 按钮 76 + 间距 18 */
  width: 420px;
  max-width: calc(100vw - 36px);
  height: calc(100vh - 230px);
  max-height: 600px;
  background: #fffaf2;
  border-radius: 22px;
  box-shadow: 0 12px 36px rgba(0,0,0,.22);
  border: 3px solid #ffd54a;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: slideUp .25s ease;
}
@keyframes slideUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.buddy-panel.hidden { display: none; }

/* 头部 */
.buddy-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: linear-gradient(135deg, #ffe082 0%, #ffab91 100%);
  color: #4a2c0a;
  font-weight: 900;
}
.buddy-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  border: 2px solid #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,.15);
}
.buddy-meta { flex: 1; }
.buddy-name { font-size: 20px; line-height: 1.1; }
.buddy-sub { font-size: 13px; opacity: .8; font-weight: 700; }
.buddy-mini {
  width: 44px;          /* 触摸目标 ≥44px：原来 36px 偏小 */
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,.4);
  color: #4a2c0a;
  font-size: 17px;
  font-weight: 900;
  cursor: pointer;
  flex: 0 0 auto;
}
.buddy-mini:active { background: rgba(255,255,255,.7); }

/* 窄屏（手机）：浮窗按钮会压在页面底部操作按钮上——底部预留出它的高度。
   宽度 ≥701px（平板）不需要，FAB 落在面板下方的空白处。
   用 body:has() 限定只在浮窗层存在时生效；不支持 :has 的老浏览器只是不生效，不影响使用。 */
@media (max-width: 700px) {
  body:has(.buddy-fab) .scroll { padding-bottom: 172px; }
}

/* 小任务进度条（孩子看得见的"我们还差几个"） */
.buddy-quest {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: #fff4d6;
  border-bottom: 2px solid #ffe1a8;
  font-size: 15px;
  font-weight: 800;
  color: #7a4a00;
}
.buddy-quest .bq-ico { font-size: 18px; }
.buddy-quest .bq-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.buddy-quest .bq-bar {
  flex: 0 0 84px;
  height: 12px;
  border-radius: 6px;
  background: #ffe9bd;
  overflow: hidden;
}
.buddy-quest .bq-bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #ffc53d, #ff8a3d);
  border-radius: 6px;
  transition: width .35s ease;
}
.buddy-quest .bq-num { font-size: 14px; color: #b07400; }

/* 消息 */
.buddy-msgs {
  flex: 1;
  min-height: 0;        /* 关键：允许在 flex 容器内收缩，否则内容会撑破面板 */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 14px;
  background: #fffaf2;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bubble {
  max-width: 82%;
  padding: 10px 14px;
  border-radius: 18px;
  font-size: 18px;
  line-height: 1.45;
  font-weight: 700;
  word-break: break-word;
  position: relative;
  animation: bubbleIn .25s ease;
}
@keyframes bubbleIn {
  from { opacity: 0; transform: translateY(8px) scale(.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.bubble.ai {
  background: #fff;
  color: #3a2a18;
  border: 2px solid #ffd54a;
  border-bottom-left-radius: 4px;
  align-self: flex-start;
  padding-left: 38px;
}
.bubble.ai .bubble-tail {
  position: absolute;
  left: -22px;
  top: 6px;
  font-size: 22px;
}
.bubble.user {
  background: linear-gradient(135deg, #ffb74d, #ff8a65);
  color: #fff;
  border-bottom-right-radius: 4px;
  align-self: flex-end;
}
.bubble.sys {
  background: transparent;
  color: #a08560;
  font-size: 14px;
  text-align: center;
  align-self: center;
  border: 1px dashed #d7b890;
  font-weight: 600;
  padding: 6px 12px;
}
.bubble.typing { padding: 14px 18px; }
.bubble.typing .dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #d7b890;
  margin: 0 2px;
  animation: typingBounce 1.2s infinite;
}
.bubble.typing .dot:nth-child(2) { animation-delay: .15s; }
.bubble.typing .dot:nth-child(3) { animation-delay: .3s; }
@keyframes typingBounce {
  0%, 60%, 100% { transform: translateY(0); opacity: .4; }
  30% { transform: translateY(-6px); opacity: 1; }
}

/* 输入区 */
.buddy-input {
  border-top: 2px solid #ffd54a;
  padding: 10px;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.buddy-bubbles {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 44px;
}
/* 快捷回复气泡：低龄孩子不认字也不会打字，点气泡几乎是他唯一能"接话"的方式，
   所以这里刻意做大做醒目（触摸目标 ≥48px、字号 18px、整行可换行）。 */
.buddy-chip {
  border: 2px solid #ffc53d;
  background: #fffaf0;
  color: #6e4a18;
  border-radius: 22px;
  padding: 10px 16px;
  font-size: 18px;
  font-weight: 800;
  cursor: pointer;
  font-family: inherit;
  min-height: 48px;
  max-width: 100%;
  white-space: normal;
  text-align: center;
  line-height: 1.25;
  box-shadow: 0 2px 5px rgba(255, 165, 0, .18);
  transition: transform .15s, background .15s, box-shadow .15s;
}
.buddy-chip:active {
  transform: scale(.94);
  background: #ffe082;
  box-shadow: 0 1px 2px rgba(255, 165, 0, .25);
}
/* 朵朵说完话后，气泡轻轻跳一下，提示"该你啦" */
@keyframes bq-nudge {
  0%, 100% { transform: translateY(0); }
  40% { transform: translateY(-4px); }
}
.buddy-bubbles.attn .buddy-chip {
  animation: bq-nudge .5s ease 2;
  border-color: #ff8a3d;
}
@media (prefers-reduced-motion: reduce) {
  .buddy-bubbles.attn .buddy-chip { animation: none; }
}
.reduce-motion .buddy-bubbles.attn .buddy-chip { animation: none; }
.buddy-tools {
  display: flex;
  gap: 8px;
  align-items: center;
}
.buddy-text {
  flex: 1;
  border: 2px solid #ffd54a;
  background: #fffaf0;
  border-radius: 22px;
  padding: 8px 14px;
  font-size: 16px;
  font-family: inherit;
  color: #3a2a18;
  outline: none;
  min-height: 44px;
}
.buddy-text.hidden { display: none; }
.buddy-text:focus { border-color: #ff8a65; }
.buddy-tool {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid #ffd54a;
  background: #fffaf0;
  font-size: 22px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.buddy-tool:active { transform: scale(.92); }
.buddy-tool.voice.rec {
  background: #ff5252;
  border-color: #ff5252;
  color: #fff;
  animation: pulse 1s infinite;
}

/* 平板大屏适配 */
@media (min-width: 1024px) {
  .buddy-layer { right: 32px; bottom: 100px; }
  .buddy-fab { width: 88px; height: 88px; }
  .buddy-fab-avatar { font-size: 48px; }
  .buddy-panel {
    right: 32px;
    bottom: 206px;
    width: 480px;
    height: calc(100vh - 250px);
    max-height: 640px;
  }
  .bubble { font-size: 20px; }
}

/* 横屏窄高度 */
@media (max-height: 620px) {
  .buddy-panel {
    height: calc(100vh - 190px);
    max-height: none;
    bottom: 178px;
  }
}

/* 家长中心 AI 配置 */
.ai-section {
  background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 16px;
}
.ai-section h4 {
  margin: 0 0 8px;
  color: #6e4a18;
  font-size: 18px;
  font-weight: 900;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ai-section .ai-hint {
  font-size: 13px;
  color: #8d6e3b;
  font-weight: 700;
  margin-bottom: 10px;
  line-height: 1.5;
}
.ai-key-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.ai-key-row input {
  flex: 1;
  border: 2px solid #ffcc80;
  background: #fff;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 15px;
  font-family: inherit;
  color: #3a2a18;
  outline: none;
  min-height: 44px;
}
.ai-key-row input:focus { border-color: #ff8a65; }
.ai-key-row button {
  border: 2px solid #ffcc80;
  background: #fff;
  border-radius: 10px;
  padding: 0 14px;
  font-size: 16px;
  font-weight: 800;
  color: #6e4a18;
  cursor: pointer;
  min-height: 44px;
  font-family: inherit;
}
.ai-key-row button:active { transform: scale(.95); }
.ai-key-row button.ok { background: #c8e6c9; border-color: #66bb6a; color: #2e7d32; }
.ai-key-row button.fail { background: #ffcdd2; border-color: #ef5350; color: #c62828; }
.ai-status {
  margin-top: 8px;
  font-size: 14px;
  font-weight: 800;
  min-height: 22px;
}
.ai-status.ok { color: #2e7d32; }
.ai-status.fail { color: #c62828; }
.ai-usage {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: #8d6e3b;
  font-weight: 800;
  margin-top: 8px;
}

/* 独立聊天页 */
.buddy-chat {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 220px);
  min-height: 420px;
  max-width: 760px;
  margin: 0 auto;
  background: #fffaf2;
  border-radius: 20px;
  border: 3px solid #ffd54a;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}
.buddy-chat > .buddy-msgs {
  flex: 1;
  min-height: 0;
  background: #fffaf2;
  overflow-y: auto;
}
.buddy-chat-empty {
  text-align: center;
  padding: 40px 20px;
  color: #8d6e3b;
}
.buddy-chat-empty .big {
  font-size: 72px;
  margin-bottom: 12px;
}
.buddy-chat-empty .ttl { font-size: 24px; font-weight: 900; color: #4a2c0a; margin-bottom: 8px; }
.buddy-chat-empty .tip { font-size: 15px; line-height: 1.6; }

/* 横屏时聊天页占满 */
@media (min-width: 1024px) {
  .buddy-chat { height: calc(100vh - 180px); }
}