/* ==========================================================================
   模型试用页样式（PlaygroundView.vue + ModelPicker.vue scoped 样式静态化）
   ========================================================================== */

/* Hero */
.pg-hero { padding: 120px 0 32px; text-align: center; }
.pg-hero h1 { font-size: 40px; font-weight: 800; margin-bottom: 12px; }
.pg-hero p { font-size: 16px; color: #8b8b9e; }

/* Content */
.pg-content { padding: 0 0 80px; }

/* 未登录卡片 */
.login-card { max-width: 480px; margin: 0 auto; background: #111118; border: 1px solid #23233a; border-radius: 16px; padding: 48px 40px; text-align: center; }
.login-card[hidden] { display: none; }
.login-card-icon { font-size: 40px; margin-bottom: 16px; }
.login-card h2 { font-size: 22px; font-weight: 700; margin-bottom: 8px; }
.login-card p { font-size: 14px; color: #8b8b9e; margin-bottom: 28px; }
.login-card-actions { display: flex; gap: 12px; justify-content: center; }
.login-card .btn-primary { padding: 10px 28px; border-radius: 8px; background: linear-gradient(135deg, #6366f1, #8b5cf6); color: #fff; font-size: 14px; font-weight: 500; }
.login-card .btn-ghost { padding: 10px 28px; border-radius: 8px; border: 1px solid #23233a; color: #e8e8ed; font-size: 14px; }

/* 模型能力过滤标签（样式对齐模型价格页） */
.capability-tags { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.cap-tag { padding: 8px 16px; background: #16161f; border: 1px solid #23233a; border-radius: 20px; font-size: 13px; color: #8b8b9e; cursor: pointer; transition: all 0.2s; user-select: none; }
.cap-tag:hover { border-color: #6366f1; color: #e8e8ed; background: rgba(99,102,241,0.1); }
.cap-tag.active { border-color: #6366f1; background: #6366f1; color: white; }

/* 对话面板 */
.chat-card { max-width: 860px; margin: 0 auto; background: #111118; border: 1px solid #23233a; border-radius: 16px; padding: 20px 24px; display: flex; flex-direction: column; gap: 16px; }
.chat-card[hidden] { display: none; }

.chat-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.model-picker { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.model-picker label { font-size: 14px; color: #8b8b9e; flex-shrink: 0; }

.btn-clear { padding: 8px 16px; background: transparent; border: 1px solid #23233a; border-radius: 8px; color: #8b8b9e; font-size: 13px; cursor: pointer; transition: all 0.2s; }
.btn-clear:hover:not(:disabled) { color: #e8e8ed; border-color: #6366f1; }
.btn-clear:disabled { opacity: 0.4; cursor: not-allowed; }

/* 消息列表 */
.chat-messages { min-height: 320px; max-height: 520px; overflow-y: auto; background: #0a0a0f; border: 1px solid #23233a; border-radius: 12px; padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.chat-empty { margin: auto; text-align: center; color: #5c5c72; }
.chat-empty-icon { font-size: 36px; margin-bottom: 10px; }
.chat-empty p { font-size: 14px; }

.msg-row { display: flex; }
.msg-row.user { justify-content: flex-end; }
.msg-row.assistant { justify-content: flex-start; }
.msg-bubble { max-width: 78%; padding: 12px 16px; border-radius: 12px; font-size: 14px; line-height: 1.7; word-break: break-word; white-space: pre-wrap; }
.msg-row.user .msg-bubble { background: linear-gradient(135deg, #6366f1, #8b5cf6); color: #fff; border-bottom-right-radius: 4px; }
.msg-row.assistant .msg-bubble { background: #16161f; border: 1px solid #23233a; color: #e8e8ed; border-bottom-left-radius: 4px; }
.msg-meta { margin-top: 8px; padding-top: 8px; border-top: 1px solid #23233a; font-size: 12px; color: #5c5c72; white-space: normal; }

/* 打字中动画 */
.typing { display: flex; gap: 5px; padding: 4px 2px; }
.typing span { width: 7px; height: 7px; border-radius: 50%; background: #5c5c72; animation: typing-bounce 1.2s infinite ease-in-out; }
.typing span:nth-child(2) { animation-delay: 0.15s; }
.typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30% { transform: translateY(-4px); opacity: 1; }
}

/* 错误条（与登录页 alert 一致） */
.chat-card .alert { padding: 12px; border-radius: 8px; font-size: 14px; }
.chat-card .alert[hidden] { display: none; }
.chat-card .alert-error { background: rgba(239, 68, 68, 0.1); color: #ef4444; border: 1px solid rgba(239, 68, 68, 0.2); }

/* 输入区 */
.chat-input { display: flex; gap: 12px; align-items: flex-end; }
.chat-input textarea { flex: 1; padding: 12px 14px; background: #0a0a0f; border: 1px solid #23233a; border-radius: 8px; color: #e8e8ed; font-size: 14px; font-family: inherit; line-height: 1.6; outline: none; resize: none; transition: border-color 0.2s; }
.chat-input textarea:focus { border-color: #6366f1; }
.chat-input textarea::placeholder { color: #5c5c72; }
.btn-send { padding: 12px 28px; border: none; border-radius: 8px; background: linear-gradient(135deg, #6366f1, #8b5cf6); color: #fff; font-size: 14px; font-weight: 500; cursor: pointer; transition: opacity 0.2s; }
.btn-send:disabled { opacity: 0.4; cursor: not-allowed; }

@media (max-width: 768px) {
  .chat-toolbar { flex-direction: column; align-items: stretch; }
  .msg-bubble { max-width: 92%; }
}

/* ==========================================================================
   可搜索模型下拉（ModelPicker.vue 移植）
   ========================================================================== */
.picker { position: relative; flex: 1; max-width: 420px; }

.picker-trigger { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px; background: #0a0a0f; border: 1px solid #23233a; border-radius: 8px; color: #e8e8ed; font-size: 14px; cursor: pointer; user-select: none; transition: border-color 0.2s; }
.picker-trigger:hover, .picker-trigger.open { border-color: #6366f1; }
.picker-placeholder { color: #8b8b9e; }
.picker-selected { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker-selected-id { color: #8b8b9e; font-size: 12px; }
.picker-arrow { color: #8b8b9e; font-size: 12px; transition: transform 0.2s; }
.picker-trigger.open .picker-arrow { transform: rotate(180deg); }

.picker-panel { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: #16161f; border: 1px solid #23233a; border-radius: 10px; overflow: hidden; z-index: 20; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); }
.picker-panel[hidden] { display: none; }

.picker-search { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid #23233a; }
.picker-search-icon { font-size: 13px; }
.picker-search input { flex: 1; min-width: 0; background: transparent; border: none; outline: none; color: #e8e8ed; font-size: 14px; }
.picker-search input::placeholder { color: #5c5c72; }

.picker-list { max-height: 240px; overflow-y: auto; padding: 6px; scrollbar-width: thin; scrollbar-color: #2e2e3e transparent; }
.picker-list::-webkit-scrollbar { width: 4px; }
.picker-list::-webkit-scrollbar-thumb { background: #2e2e3e; border-radius: 4px; }
.picker-list::-webkit-scrollbar-thumb:hover { background: #3d3d52; }
.picker-list::-webkit-scrollbar-track { background: transparent; }
.picker-option { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 6px; cursor: pointer; font-size: 14px; color: #e8e8ed; }
.picker-option.highlighted { background: rgba(99, 102, 241, 0.12); }
.picker-option.active { color: #a5b4fc; }
.picker-option-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker-option-vendor { flex-shrink: 0; font-size: 11px; color: #8b8b9e; background: #1e1e2a; border-radius: 4px; padding: 1px 6px; }
.picker-option-id { flex-shrink: 0; font-size: 11px; color: #5c5c72; }
.picker-empty { padding: 16px; text-align: center; color: #8b8b9e; font-size: 13px; }