/* YuBlogAI 全局样式 — 明暗主题完整兼容（跟随 :root / :root.dark 与 CSS 变量） */

/* ── 显隐 ── */
.yublogai-hidden { display: none !important; }

/* ── 触发按钮 ── */
#yublogai-toggle {
  position: fixed;
  right: 1.25rem;
  bottom: 5.5rem;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  padding: 0.65rem 0.85rem;
  min-width: 2.75rem;
  min-height: 2.75rem;
  border: 3px solid color-mix(in srgb, var(--primary) 35%, transparent);
  border-radius: 9999px;
  background: color-mix(in srgb, var(--card-bg) 88%, transparent);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  color: var(--primary);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.25s ease, box-shadow 0.25s ease, opacity 0.3s ease,
    background-color 0.25s ease;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--deep-text, #000) 8%, transparent);
  font-family: inherit;
}
:root.dark #yublogai-toggle {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
  border-color: color-mix(in srgb, var(--primary) 45%, transparent);
  background: color-mix(in srgb, var(--card-bg) 80%, transparent);
}
#yublogai-toggle:hover {
  transform: scale(1.06);
  border-color: var(--primary);
  box-shadow: 0 6px 24px color-mix(in srgb, var(--primary) 22%, transparent);
}
:root.dark #yublogai-toggle:hover {
  box-shadow: 0 6px 28px color-mix(in srgb, var(--primary) 30%, transparent);
}
#yublogai-toggle.open {
  opacity: 0;
  transform: scale(0.85);
  pointer-events: none;
}
#yublogai-toggle .yublogai-toggle-icon { font-size: 1.25rem; line-height: 1; }
#yublogai-toggle .yublogai-cat-emoji,
.yublogai-header-icon.yublogai-cat-emoji {
  font-style: normal;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}
.yublogai-header-icon.yublogai-cat-emoji { font-size: 1.25rem; line-height: 1; }

/* ── 面板 ── */
#yublogai-panel {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 1000;
  width: 22rem;
  max-width: calc(100vw - 2.5rem);
  height: 34rem;
  max-height: calc(100vh - 2.5rem);
  border-radius: var(--radius-large, 1.25rem);
  border: 3px solid var(--tk-card-border, color-mix(in srgb, var(--deep-text, #000) 10%, transparent));
  overflow: hidden;
  transform: translateY(calc(100% + 1.5rem));
  opacity: 0;
  visibility: hidden;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0.35s,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
  box-shadow:
    0 8px 32px color-mix(in srgb, var(--deep-text, #000) 10%, transparent),
    0 2px 8px color-mix(in srgb, var(--deep-text, #000) 4%, transparent);
  color: var(--deep-text, oklch(0.25 0.02 var(--hue, 172)));
}
:root.dark #yublogai-panel {
  border-color: var(--tk-card-border, oklch(1 0 0 / 0.06));
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.45),
    0 2px 12px rgba(0, 0, 0, 0.3);
  color: oklch(0.90 0.01 var(--hue, 172));
}
#yublogai-panel.open {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}

/* ── 玻璃背景 ── */
#yublogai-glass-container {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  overflow: hidden;
}
/* 无 WebGL 时的 CSS 玻璃回退 */
#yublogai-glass-container:empty {
  background:
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--primary) 8%, transparent) 0%,
      transparent 50%,
      color-mix(in srgb, var(--primary) 5%, transparent) 100%
    );
}
:root.dark #yublogai-glass-container:empty {
  background:
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--primary) 12%, transparent) 0%,
      transparent 55%,
      color-mix(in srgb, white 3%, transparent) 100%
    );
}

/* ── 内容层 ── */
.yublogai-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: color-mix(in srgb, var(--card-bg, white) 86%, transparent);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  color: inherit;
  transition: background-color 0.25s ease, color 0.25s ease;
}
:root.dark .yublogai-content {
  background: color-mix(in srgb, var(--card-bg, oklch(0.175 0.014 var(--hue))) 82%, transparent);
}

/* ── 标题栏 ── */
.yublogai-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem 0.5rem;
  border-bottom: 1px dashed var(--line-divider, color-mix(in srgb, var(--deep-text, #000) 8%, transparent));
  flex-shrink: 0;
}
.yublogai-header-left { display: flex; align-items: center; gap: 0.4rem; }
.yublogai-header-icon { font-size: 1rem; color: var(--primary); }
.yublogai-header-title {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--deep-text, oklch(0.25 0.02 var(--hue)));
}
:root.dark .yublogai-header-title {
  color: oklch(0.92 0.01 var(--hue));
}
.yublogai-header-actions { display: flex; align-items: center; gap: 0.2rem; }

/* ── 图标按钮 ── */
.yublogai-btn-icon {
  display: flex; align-items: center; justify-content: center;
  width: 1.75rem; height: 1.75rem; border: none; border-radius: 0.5rem;
  background: transparent;
  color: var(--btn-content, oklch(0.55 0.12 var(--hue)));
  font-size: 0.8125rem; cursor: pointer; transition: all 0.2s;
  font-family: inherit;
}
.yublogai-btn-icon:hover:not(:disabled) {
  background: var(--btn-plain-bg-hover, color-mix(in srgb, var(--primary) 8%, transparent));
  color: var(--primary);
}
.yublogai-btn-icon:disabled { opacity: 0.3; cursor: default; }
.yublogai-btn-close:hover { color: #ef4444 !important; }

/* ── 快捷功能栏 ── */
.yublogai-actions {
  display: flex; gap: 0.4rem; padding: 0.5rem 1rem; flex-shrink: 0;
}
.yublogai-action-btn {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 0.3rem;
  padding: 0.4rem 0.5rem;
  border: 2px solid color-mix(in srgb, var(--primary) 22%, transparent);
  border-radius: 0.75rem;
  background: color-mix(in srgb, var(--primary) 4%, transparent);
  color: var(--primary);
  font-size: 0.75rem; font-weight: 500; cursor: pointer; transition: all 0.2s; white-space: nowrap;
  font-family: inherit;
}
:root.dark .yublogai-action-btn {
  background: color-mix(in srgb, var(--primary) 8%, transparent);
  border-color: color-mix(in srgb, var(--primary) 28%, transparent);
}
.yublogai-action-btn:hover:not(:disabled) {
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  border-color: var(--primary);
}
.yublogai-action-btn:disabled { opacity: 0.4; cursor: default; }
.yublogai-action-btn span { font-size: 0.72rem; }
.yublogai-action-btn svg { margin-right: 0.1rem; }

/* ── 消息列表 ── */
.yublogai-messages {
  flex: 1; overflow-y: auto; padding: 0.75rem 1rem;
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-bg, color-mix(in srgb, var(--deep-text, #000) 30%, transparent)) transparent;
}
.yublogai-messages::-webkit-scrollbar { width: 4px; }
.yublogai-messages::-webkit-scrollbar-thumb {
  background: var(--scrollbar-bg, color-mix(in srgb, var(--deep-text, #000) 30%, transparent));
  border-radius: 4px;
}
.yublogai-messages::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-bg-hover, color-mix(in srgb, var(--deep-text, #000) 40%, transparent));
}

/* ── 空状态 ── */
.yublogai-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 100%; text-align: center; gap: 0.5rem;
}
.yublogai-empty-icon {
  font-size: 2rem;
  color: color-mix(in srgb, var(--primary) 55%, transparent);
  margin-bottom: 0.25rem;
}
.yublogai-empty-text {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--deep-text, oklch(0.35 0.02 var(--hue)));
  opacity: 0.85;
}
:root.dark .yublogai-empty-text {
  color: oklch(0.82 0.01 var(--hue));
  opacity: 0.9;
}
.yublogai-empty-hint {
  font-size: 0.75rem;
  color: color-mix(in srgb, var(--deep-text, #000) 45%, transparent);
}
:root.dark .yublogai-empty-hint {
  color: oklch(0.62 0.01 var(--hue));
}

/* ── 消息气泡 ── */
.yublogai-msg {
  display: flex; gap: 0.5rem; margin-bottom: 0.75rem;
  animation: yublogai-msg-in 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.yublogai-msg-user { flex-direction: row-reverse; }
@keyframes yublogai-msg-in {
  0% { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}
.yublogai-msg-avatar {
  width: 1.75rem; height: 1.75rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem; flex-shrink: 0; margin-top: 0.15rem;
}
.yublogai-ai-avatar {
  background: color-mix(in srgb, var(--primary) 12%, var(--btn-regular-bg, transparent));
  color: var(--primary);
  border: 1px solid color-mix(in srgb, var(--primary) 18%, transparent);
}
:root.dark .yublogai-ai-avatar {
  background: color-mix(in srgb, var(--primary) 18%, transparent);
  border-color: color-mix(in srgb, var(--primary) 25%, transparent);
}

/* AI / 系统消息气泡 */
.yublogai-msg-bubble {
  max-width: 85%;
  padding: 0.5rem 0.75rem;
  border-radius: 1rem;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--deep-text, oklch(0.28 0.02 var(--hue)));
  border: 2px solid var(--tk-card-border, color-mix(in srgb, var(--deep-text, #000) 8%, transparent));
  background: color-mix(in srgb, var(--float-panel-bg, var(--card-bg, white)) 92%, transparent);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--deep-text, #000) 4%, transparent);
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
:root.dark .yublogai-msg-bubble {
  color: oklch(0.90 0.01 var(--hue));
  border-color: var(--tk-card-border, oklch(1 0 0 / 0.06));
  background: color-mix(in srgb, var(--float-panel-bg, var(--card-bg)) 88%, oklch(1 0 0 / 0.04));
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

/* 用户消息气泡 */
.yublogai-msg-bubble-user {
  background: color-mix(in srgb, var(--primary) 88%, white);
  border-color: color-mix(in srgb, var(--primary) 70%, transparent);
  color: #fff;
  box-shadow: 0 1px 3px color-mix(in srgb, var(--primary) 25%, transparent);
}
:root.dark .yublogai-msg-bubble-user {
  background: color-mix(in srgb, var(--primary) 55%, oklch(0.22 0.02 var(--hue)));
  border-color: color-mix(in srgb, var(--primary) 45%, transparent);
  color: oklch(0.98 0.01 var(--hue));
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.yublogai-msg-content { word-break: break-word; }
.yublogai-msg-content p { margin: 0.25rem 0; }
.yublogai-msg-content p:first-child { margin-top: 0; }
.yublogai-msg-content p:last-child { margin-bottom: 0; }
.yublogai-msg-content strong { font-weight: 650; }
.yublogai-msg-content em { opacity: 0.92; }
.yublogai-cursor {
  display: inline-block;
  animation: blink 0.8s step-end infinite;
  color: var(--primary);
  font-weight: 700;
}
@keyframes blink { 50% { opacity: 0; } }

/* ── 输入区域 ── */
.yublogai-input-area {
  padding: 0.5rem 1rem 0.75rem;
  flex-shrink: 0;
  border-top: 1px dashed var(--line-divider, color-mix(in srgb, var(--deep-text, #000) 8%, transparent));
}
.yublogai-input-wrapper {
  display: flex;
  align-items: flex-end;
  gap: 0.4rem;
  background: var(--btn-regular-bg, color-mix(in srgb, var(--primary) 6%, var(--card-bg, white)));
  border-radius: 1rem;
  border: 2px solid var(--tk-card-border, color-mix(in srgb, var(--deep-text, #000) 10%, transparent));
  padding: 0.3rem 0.3rem 0.3rem 0.75rem;
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
:root.dark .yublogai-input-wrapper {
  background: color-mix(in srgb, var(--btn-regular-bg, oklch(0.25 0.025 var(--hue))) 85%, transparent);
  border-color: var(--tk-card-border, oklch(1 0 0 / 0.06));
}
.yublogai-input-wrapper:focus-within {
  border-color: color-mix(in srgb, var(--primary) 50%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent);
}
.yublogai-input {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--deep-text, oklch(0.25 0.02 var(--hue)));
  font-size: 0.8125rem;
  line-height: 1.4;
  resize: none;
  outline: none;
  max-height: 4rem;
  font-family: inherit;
}
:root.dark .yublogai-input {
  color: oklch(0.92 0.01 var(--hue));
  caret-color: var(--primary);
}
.yublogai-input::placeholder {
  color: color-mix(in srgb, var(--deep-text, #000) 40%, transparent);
}
:root.dark .yublogai-input::placeholder {
  color: oklch(0.55 0.01 var(--hue));
}
.yublogai-input:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.yublogai-send-btn {
  display: flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; border: none; border-radius: 0.75rem;
  background: var(--primary);
  color: #fff;
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
}
:root.dark .yublogai-send-btn {
  color: oklch(0.16 0.02 var(--hue));
}
.yublogai-send-btn:hover:not(:disabled) { opacity: 0.9; transform: scale(1.05); }
.yublogai-send-btn:disabled { opacity: 0.4; cursor: default; }
.yublogai-spin { animation: yu-spin 1s linear infinite; }
@keyframes yu-spin { 100% { transform: rotate(360deg); } }

/* ── 移动端 ── */
@media (max-width: 768px) {
  #yublogai-toggle { right: 1rem; bottom: 4rem; padding: 0.55rem 0.7rem; }
  #yublogai-panel {
    right: 0; bottom: 0; width: 100vw; max-width: 100vw; height: 85vh; max-height: 85vh;
    border-radius: var(--radius-large, 1.25rem) var(--radius-large, 1.25rem) 0 0;
    border-bottom: none;
  }
  #yublogai-panel.open { transform: translateY(0); }
  .yublogai-msg-bubble { max-width: 90%; font-size: 0.8125rem; }
}

/* ── Markdown / 代码 ── */
.yu-blog-ai-code {
  background: var(--codeblock-bg, oklch(0.96 0.01 var(--hue)));
  color: var(--deep-text, oklch(0.28 0.02 var(--hue)));
  border: 1px solid var(--tk-card-border, color-mix(in srgb, var(--deep-text, #000) 8%, transparent));
  border-radius: 0.5rem;
  padding: 0.5rem;
  overflow-x: auto;
  font-size: 0.75rem;
  margin: 0.4rem 0;
  display: block;
}
:root.dark .yu-blog-ai-code {
  background: var(--codeblock-bg, oklch(0.12 0.012 var(--hue)));
  color: oklch(0.88 0.01 var(--hue));
  border-color: oklch(1 0 0 / 0.06);
}
.yu-blog-ai-inline-code {
  background: var(--inline-code-bg, var(--btn-regular-bg));
  color: var(--inline-code-color, var(--btn-content));
  border-radius: 0.25rem;
  padding: 0.1rem 0.3rem;
  font-size: 0.75rem;
}
.yu-blog-ai-link {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: color-mix(in srgb, var(--primary) 40%, transparent);
}
.yu-blog-ai-link:hover {
  opacity: 0.85;
  text-decoration-color: var(--primary);
}
.yu-blog-ai-cite {
  color: var(--primary);
  font-weight: 600;
  font-size: 0.85em;
}

/* ── Tool use ── */
.yublogai-tool-use {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0;
  color: var(--primary);
  font-size: 0.8125rem;
}
.yublogai-tool-use svg { width: 0.875rem; height: 0.875rem; flex-shrink: 0; }
.yublogai-tool-text { font-weight: 500; }

/* ── 来源链接在亮色下的对比度 ── */
.yublogai-sources {
  border-top-color: color-mix(in srgb, var(--primary) 18%, transparent) !important;
}
:root.dark .yublogai-sources {
  border-top-color: color-mix(in srgb, var(--primary) 22%, transparent) !important;
}