/* MakeDot 精灵：紫色只用在精灵本身（AI 在场信号），其余沿用中性色。 */
.md-root { position: fixed; right: 24px; bottom: 24px; z-index: 90; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; font-family: var(--font); }

.md-launcher {
  position: relative; width: 68px; height: 68px; padding: 0; border: 0; border-radius: 50%;
  display: grid; place-items: center; background: var(--c-surface); cursor: pointer;
  box-shadow: 0 0 0 1px var(--c-line), 0 10px 28px -8px rgba(109, 92, 255, 0.45);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.md-launcher .md-sprout { width: 54px; height: 54px; margin-top: 2px; }
.md-launcher:hover { transform: translateY(-2px); }
.md-launcher-label {
  position: absolute; right: calc(100% + 10px); top: 50%; transform: translateY(-50%);
  padding: 6px 12px; border-radius: 999px; background: var(--c-ink); color: #fff;
  font: 600 13px/1 var(--font); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.15s ease;
}
.md-launcher:hover .md-launcher-label, .md-launcher:focus-visible .md-launcher-label { opacity: 1; }
.md-launcher:focus-visible, .md-close:focus-visible, .md-send:focus-visible, .md-example:focus-visible, .md-source:focus-visible { outline: 2px solid var(--c-ai); outline-offset: 2px; }
.md-root.is-open .md-launcher { box-shadow: 0 0 0 1px var(--c-line), var(--shadow-s); }
/* 小豆芽可以拖到屏幕任意位置；面板朝空间更大的一侧展开 */
.md-launcher { touch-action: none; }
.md-launcher.is-dragging { cursor: grabbing; transform: scale(1.06); transition: none; }
.md-launcher.is-dragging .md-launcher-label { opacity: 0; }
.md-root.is-left { align-items: flex-start; }
.md-root.is-left .md-launcher-label { right: auto; left: calc(100% + 10px); }
.md-root.is-below { flex-direction: column-reverse; }

/* 小豆芽 */
.md-sprout { display: block; overflow: visible; }
.md-sprout-body { fill: #fff8ec; stroke: #ecdcc0; stroke-width: 1.2; }
.md-sprout-stem { fill: none; stroke: var(--c-ai); stroke-width: 2.4; stroke-linecap: round; }
.md-sprout-leaf { fill: var(--c-ai); }
.md-sprout-leaf-r { fill: #8f82ff; }
.md-sprout-eyes { fill: var(--c-ink); transform-origin: 32px 38.5px; }
.md-sprout-mouth { fill: none; stroke: var(--c-ink); stroke-width: 1.8; stroke-linecap: round; }
.md-sprout-cheek { fill: #ffb9c6; opacity: 0.7; }
.md-sprout-leaves { transform-origin: 32px 22px; }
.md-sprout.is-idle .md-sprout-eyes { animation: md-blink 5s infinite; }
.md-sprout.is-idle .md-sprout-leaves { animation: md-sway 4s ease-in-out infinite; }
.md-sprout.is-wave .md-sprout-leaves { animation: md-wave 1.6s ease-in-out 2; }
.md-root.is-thinking .md-sprout-leaves { animation: md-think 0.9s ease-in-out infinite; }
@keyframes md-blink { 0%, 94%, 100% { transform: scaleY(1); } 97% { transform: scaleY(0.1); } }
@keyframes md-sway { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@keyframes md-wave { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-12deg); } 75% { transform: rotate(12deg); } }
@keyframes md-think { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg) translateY(-1px); } }

.md-panel {
  width: 380px; height: min(580px, calc(100vh - 120px)); display: flex; flex-direction: column;
  background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius-l); box-shadow: var(--shadow-l); overflow: hidden;
}
.md-panel[hidden] { display: none; }

.md-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--c-line); }
.md-head-main { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.md-title-box { min-width: 0; }
.md-title-box[hidden] { display: none; }
.md-title-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.md-rename { width: 26px; height: 26px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--c-text-3); cursor: pointer; flex: none; }
.md-rename:hover, .md-rename:focus-visible { background: var(--c-muted); color: var(--c-text); outline: none; }
.md-rename svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.md-name-form { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; align-items: center; flex: 1; min-width: 0; }
.md-name-input { min-width: 0; height: 32px; border: 1px solid var(--c-ai); border-radius: 10px; padding: 0 10px; font: 600 15px/1 var(--font); color: var(--c-text); background: var(--c-surface); outline: none; }
.md-name-save { height: 32px; padding: 0 12px; border: 0; border-radius: 999px; background: var(--c-ink); color: #fff; font: 600 13px/1 var(--font); cursor: pointer; }
.md-name-hint { grid-column: 1 / -1; margin: 0; font-size: 11px; color: var(--c-text-3); }
.md-name-hint.is-error { color: var(--c-danger); }
.md-title { display: flex; align-items: center; gap: 4px; margin: 0; min-width: 0; font-size: 17px; font-weight: 650; color: var(--c-text); }
.md-title-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--c-ai-soft); display: grid; place-items: center; flex: none; }
.md-title-avatar .md-sprout { width: 30px; height: 30px; margin-top: 2px; }
.md-close { width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--c-muted); color: var(--c-text-2); cursor: pointer; }
.md-close svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }

.md-list { position: relative; flex: 1; overflow-y: auto; padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; overscroll-behavior: contain; }

.md-empty { margin: auto 0; text-align: center; }
.md-empty-hero { width: 88px; height: 88px; margin: 0 auto 16px; border-radius: 50%; background: var(--c-ai-soft); display: grid; place-items: center; }
.md-empty-hero .md-sprout { width: 76px; height: 76px; margin-top: 4px; }
.md-examples { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.md-example { border: 1px solid var(--c-line); background: var(--c-surface); border-radius: 999px; padding: 7px 12px; font: 13px/1.3 var(--font); color: var(--c-text); text-align: left; cursor: pointer; }
.md-example:hover { border-color: var(--c-ai); color: var(--c-ai); }

.md-msg { display: flex; flex-direction: column; gap: 8px; max-width: 92%; }
.md-msg-user { align-self: flex-end; }
.md-msg-assistant { flex-direction: row; align-items: flex-start; gap: 8px; max-width: 100%; }
.md-msg-body { display: flex; flex-direction: column; gap: 8px; min-width: 0; max-width: calc(100% - 40px); }
.md-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--c-ai-soft); display: grid; place-items: center; flex: none; }
.md-avatar .md-sprout { width: 26px; height: 26px; margin-top: 2px; }
.md-bubble { margin: 0; padding: 10px 13px; border-radius: 16px; font-size: 14px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; }
.md-msg-user .md-bubble { background: var(--c-ink); color: #fff; border-bottom-right-radius: 6px; }
.md-msg-assistant .md-bubble { background: var(--c-muted); color: var(--c-text); border-bottom-left-radius: 6px; }
.md-msg.is-pending .md-bubble { color: var(--c-text-3); }
.md-msg.is-error .md-bubble { background: #fdf0f0; color: var(--c-danger); }

.md-sources { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.md-source { display: flex; flex-direction: column; gap: 2px; padding: 8px 11px; border: 1px solid var(--c-line); border-radius: var(--radius-s); text-decoration: none; color: inherit; }
a.md-source:hover { border-color: var(--c-ai); }
.md-source-tag { font-size: 11px; color: var(--c-ai); font-weight: 600; }
.md-source-title { font-size: 13px; color: var(--c-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.md-form { border-top: 1px solid var(--c-line); padding: 12px 14px 14px; }
.md-input { width: 100%; resize: none; border: 1px solid var(--c-line); border-radius: 14px; padding: 10px 12px; font: 14px/1.5 var(--font); color: var(--c-text); background: var(--c-bg); }
.md-input:focus { outline: none; border-color: var(--c-ai); background: var(--c-surface); }
.md-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; }
.md-quota { font-size: 12px; color: var(--c-text-3); }
.md-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.md-mic { position: relative; width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--c-line); border-radius: 50%; background: var(--c-surface); color: var(--c-text-2); cursor: pointer; }
.md-mic[hidden] { display: none; }
.md-mic svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.md-mic:hover { color: var(--c-ai); border-color: var(--c-ai); }
.md-mic.is-recording { background: #ff3b30; border-color: #ff3b30; color: #fff; }
.md-mic.is-recording::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid rgba(255, 59, 48, 0.35); animation: md-pulse 1.2s ease-out infinite; }
.md-mic.is-busy { opacity: 0.5; cursor: progress; }
.md-mic:focus-visible { outline: 2px solid var(--c-ai); outline-offset: 2px; }
.md-root.is-listening .md-sprout-leaves { animation: md-think 1.4s ease-in-out infinite; }
@keyframes md-pulse { from { transform: scale(0.9); opacity: 1; } to { transform: scale(1.3); opacity: 0; } }
.md-send { height: 32px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--c-ai); color: #fff; font: 600 13px/1 var(--font); cursor: pointer; }
.md-send:disabled { opacity: 0.4; cursor: default; }

@media (max-width: 640px) {
  .md-root { right: 16px; bottom: 16px; }
  .md-launcher { width: 60px; height: 60px; }
  .md-launcher .md-sprout { width: 48px; height: 48px; }
  /* 手机上是一张紧凑的浮动卡片，不遮住整页 */
  .md-root.is-open { left: 12px !important; right: 12px !important; bottom: 12px !important; top: auto !important; }
  .md-root.is-open .md-panel { max-height: none !important; }
  .md-root.is-open .md-launcher { display: none; }
  .md-panel { width: 100%; height: min(50vh, 420px); }
  .md-list { padding: 12px 14px; }
  .md-empty-hero { width: 64px; height: 64px; margin-bottom: 12px; }
  .md-empty-hero .md-sprout { width: 54px; height: 54px; }
  .md-input { font-size: 16px; } /* iOS 低于 16px 会自动放大页面 */
}
@media (prefers-reduced-motion: reduce) { .md-launcher { transition: none; } .md-sprout *, .md-root.is-thinking .md-sprout-leaves, .md-root.is-listening .md-sprout-leaves, .md-mic.is-recording::after { animation: none !important; } }