/*
 * Gemini Chat Widget - Refined & Themed Version
 *
 * - Light/Dark mode support
 * - Enhanced animations
 * - Improved layout and details
 */

@keyframes slide-in-bottom {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes message-pop-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* --- 2. 主题颜色变量 --- */
:root {
  /* Light Mode (Default) */
  --bg-primary: #f0f4f9;        /* 主背景 */
  --bg-secondary: #ffffff;      /* 次级背景，如消息气泡 */
  --bg-input: #e3e8ee;         /* 输入框背景 */
  --text-primary: #1f1f1f;     /* 主要文字 */
  --text-secondary: #5f6368;   /* 次要文字 */
  --accent-gradient: linear-gradient(135deg, #4285F4, #9b72cb, #d96570); /* 渐变色 */
  --shadow-color: rgba(95, 100, 104, 0.2); /* 阴影颜色 */
  --border-color: rgba(0, 0, 0, 0.1);
  --font-family: 'Google Sans', 'Noto Sans SC', sans-serif; /* 增加了中文字体回退 */
}

.dark-mode {
  /* Dark Mode Overrides */
  --bg-primary: #131314;
  --bg-secondary: #1e1f20;
  --bg-input: #303134;
  --text-primary: #e8eaed;
  --text-secondary: #9aa0a6;
  --shadow-color: rgba(0, 0, 0, 0.5);
  --border-color: rgba(255, 255, 255, 0.1);
}

/* --- 3. 全局与基础样式 --- */
#gemini-chat-widget, #gemini-chat-widget * {
  font-family: var(--font-family);
  box-sizing: border-box;
}

/* --- 4. 主窗口样式 --- */
#chat-window {
  width: 400px;
  height: 700px;
  max-height: 85vh;
  background: var(--bg-primary);
  color: var(--text-primary);
  border-radius: 20px;
  box-shadow: 0 12px 32px var(--shadow-color);
  border: 1px solid var(--border-color);
  animation: slide-in-bottom 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  
  /* 其他已有样式 */
  position: fixed; bottom: 90px; right: 20px; z-index: 1000;
  display: flex; flex-direction: column; overflow: hidden;
  transition: opacity 0.3s, transform 0.3s; transform-origin: bottom right;
}
#chat-window.hidden {
  opacity: 0;
  transform: translateY(20px) scale(0.95);
  pointer-events: none;
}

/* --- 5. 头部与图标 --- */
.chat-header {
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
}
.chat-header h3 {
  margin: 0;
  font-size: 1.1em;
  font-weight: 500;
  color: var(--text-primary);
  flex-grow: 1;
}
#gemini-header-logo {
  width: 28px;
  height: 28px;
  background-image: url(/img/gemini.png); /* 您的Logo */
  background-size: cover;
  background-position: center;
  border-radius: 50%;
}
#close-chat-button {
  background: none; border: none; padding: 4px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: transform 0.2s, color 0.2s;
}
#close-chat-button:hover {
  transform: scale(1.2);
  color: var(--text-primary);
}

/* --- 6. 消息区域 --- */
#chat-messages {
  flex-grow: 1;
  padding: 24px 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
#chat-messages::-webkit-scrollbar { width: 8px; }
#chat-messages::-webkit-scrollbar-track { background: var(--bg-primary); }
#chat-messages::-webkit-scrollbar-thumb { background: var(--bg-input); border-radius: 4px; }

.message {
  display: flex;
  max-width: 90%;
  align-items: flex-start;
  gap: 12px;
  animation: message-pop-in 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.message p {
  padding: 12px 18px;
  border-radius: 22px;
  margin: 0;
  line-height: 1.6;
  font-size: 1rem;
  word-wrap: break-word;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.bot-message { align-self: flex-start; }
.bot-avatar {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 50%;
  background-image: url(/img/dog.jpg); /* 您的机器人头像 */
  background-size: cover;
  background-position: center;
  border: 2px solid var(--bg-primary);
  box-shadow: 0 2px 4px var(--shadow-color);
}
.bot-message p {
  background: var(--bg-secondary);
  color: var(--text-primary);
  border-top-left-radius: 6px;
}

.user-message { align-self: flex-end; flex-direction: row-reverse; }
.user-message p {
  background: var(--accent-gradient);
  color: #ffffff;
  border-top-right-radius: 6px;
}

/* --- 7. 输入区域 --- */
.chat-input-area {
  padding: 16px 20px 24px 20px;
  border-top: 1px solid var(--border-color);
  background: transparent; /* 与主背景融合 */
  flex-shrink: 0;
}
.input-wrapper {
  display: flex;
  align-items: center;
  background: var(--bg-input);
  border-radius: 28px;
  padding: 4px 8px 4px 20px;
  transition: box-shadow 0.2s ease-in-out; /* 增加过渡动画 */
  border: 1px solid transparent;
}
.input-wrapper:focus-within {
  box-shadow: 0 0 0 3px rgba(66, 133, 244, 0.4); /* 柔和的发光效果 */
  border-color: #4285F4;
}
#chat-input {
  flex-grow: 1; border: none; background: transparent;
  padding: 12px 0; font-size: 1rem;
  color: var(--text-primary);
  outline: none;
}
#chat-input::placeholder { color: var(--text-secondary); }

#send-button {
  background: none; border: none; border-radius: 50%;
  width: 44px; height: 44px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-secondary);
  transition: all 0.2s;
}
#send-button:hover {
  color: #4285F4;
  transform: scale(1.1);
}

/* --- 8. 悬浮按钮 --- */
#chat-toggle-button {
  background: var(--accent-gradient); color: white; border: none;
  border-radius: 50%; width: 60px; height: 60px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3); cursor: pointer;
  display: flex; justify-content: center; align-items: center;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: fixed; bottom: 20px; right: 20px; z-index: 999;
}
#chat-toggle-button:hover { transform: scale(1.15) rotate(15deg); }

/*
 * ===================================================================
 * 响应式设计：移动端适配 (当屏幕宽度 <= 768px 时生效)
 * ===================================================================
 */
@media (max-width: 768px) {

  /* 1. 聊天窗口：让它像一个从底部弹出的全屏应用 */
  #chat-window {
    /* 宽度占满整个屏幕，左右留出一点边距 */
    width: 100vw; 
    left: 0;
    right: 0;
    
    /* 高度占满大部分屏幕 */
    height: 90%;
    max-height: 100vh; /* 覆盖掉电脑端的 max-height */
    
    bottom: 0; /* 完全贴底 */
    border-radius: 20px 20px 0 0; /* 只有顶部是圆角，看起来像从底部滑出的面板 */
    border: none; /* 在小屏幕上可以移除边框，更简洁 */

    /* 动画效果从底部中心滑出 */
    transform-origin: bottom center;
    /* 确保 transition 生效 */
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s;
  }

  /* 2. 隐藏时的状态：从屏幕正下方滑出 */
  #chat-window.hidden {
    /* 使用 Y 轴位移，让它完全滑到屏幕下方 */
    transform: translateY(100%);
    opacity: 1; /* 透明度可以保持，主要靠 transform 隐藏 */
  }

  /* 3. 悬浮按钮：调整大小和位置，使其更适合手机操作 */
  #chat-toggle-button {
    width: 56px;
    height: 56px;
    bottom: 15px;
    right: 15px;
  }
  
  /* 4. 细节微调：减小间距和字体，让小屏幕不拥挤 */
  #chat-messages {
    padding: 16px;
    gap: 16px;
  }
  .message p {
    font-size: 0.9rem; /* 略微减小字体 */
    padding: 8px 14px;
  }
  .bot-avatar {
    width: 30px;
    height: 30px;
  }
#gemini-header-logo {
  width: 28px;
  height: 28px;
  position: relative;
}

/* 内层 div：专门负责显示图片 */
#gemini-header-logo .avatar-image {
  width: 100%;
  height: 100%;
  background-image: url(/img/gemini.png); /* 您的 Logo 图片 */
  background-size: cover;
  background-position: center;
  border-radius: 50%;
}
  .chat-header {
    padding-top: 20px; /* 适配手机顶部安全区域 */
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
/* --- 全新的 Gemini 风格“思考中”动画 --- */

.bot-avatar {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  position: relative;
  border-radius: 50%;
  box-shadow: 0 2px 4px var(--shadow-color);
}

/* 内层 div：专门负责显示图片和边框 */
.bot-avatar .avatar-image {
  width: 100%;
  height: 100%;
  background-image: url(/images/avatar.gif); /* 您的机器人头像 */
  background-size: cover;
  background-position: center;
  border-radius: 50%;
  border: 2px solid var(--bg-primary); /* 边框加在这里 */
}


/* --- 3. “思考中”的旋转光环样式 --- */
/* 这个样式会作用于外层容器的伪元素，而内层的图片 div 不会受影响 */
.bot-avatar.thinking::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: -3px; left: -3px; right: -3px; bottom: -3px;
  border-radius: 50%;
  background: conic-gradient(
    from 90deg, #036d1e, #9b72cb, #d96570, #f2994a, #4285F4
  );
  animation: spin 1.5s linear infinite;
}