/* ==========================================================================
   模型试用页样式（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; }

/* ==========================================================================
   全部模型列表（pg-models.js，参考 tokenrouter.com/models 布局）
   ========================================================================== */
.pg-models { margin-top: 56px; }
.pg-models-head { text-align: center; margin-bottom: 24px; }
.pg-models-head h2 { font-size: 28px; font-weight: 700; margin-bottom: 8px; }
.pg-models-count { color: #8b8b9e; font-size: 18px; font-weight: 500; margin-left: 6px; }
.pg-models-head p { font-size: 14px; color: #8b8b9e; }

.pg-models-toolbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; }
.pg-models-search { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 220px; max-width: 360px; padding: 9px 14px; background: #0a0a0f; border: 1px solid #23233a; border-radius: 8px; transition: border-color 0.2s; }
.pg-models-search:focus-within { border-color: #6366f1; }
.pg-models-search input { flex: 1; min-width: 0; background: transparent; border: none; outline: none; color: #e8e8ed; font-size: 14px; }
.pg-models-search input::placeholder { color: #5c5c72; }
.pg-models-toolbar .capability-tags { justify-content: flex-start; }
.pg-models-sort { padding: 9px 12px; background: #0a0a0f; border: 1px solid #23233a; border-radius: 8px; color: #e8e8ed; font-size: 13px; outline: none; cursor: pointer; transition: border-color 0.2s; }
.pg-models-sort:hover, .pg-models-sort:focus { border-color: #6366f1; }

.pg-models .alert { padding: 12px; border-radius: 8px; font-size: 14px; margin-bottom: 16px; }
.pg-models .alert[hidden] { display: none; }
.pg-models .alert-error { background: rgba(239, 68, 68, 0.1); color: #ef4444; border: 1px solid rgba(239, 68, 68, 0.2); }

.pg-models-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.pgm-state { grid-column: 1 / -1; padding: 48px 0; text-align: center; color: #8b8b9e; font-size: 14px; }
.pg-models-empty { padding: 48px 0; text-align: center; color: #8b8b9e; font-size: 14px; }
.pg-models-empty[hidden] { display: none; }

.pgm-card { display: flex; flex-direction: column; gap: 12px; background: #111118; border: 1px solid #23233a; border-radius: 12px; padding: 18px; transition: border-color 0.2s, transform 0.2s; }
.pgm-card:hover { border-color: #6366f1; transform: translateY(-2px); }

.pgm-card-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pgm-icon { width: 28px; height: 28px; border-radius: 6px; flex-shrink: 0; background: #1e1e2a; }
.pgm-title { display: flex; flex-direction: column; min-width: 0; }
/* 名称行：模型名 + 复制按钮同行（.pgm-title 是纵向 flex，按钮需包一层横向行） */
.pgm-name-row { display: flex; align-items: center; min-width: 0; }
.pgm-name { font-size: 14px; font-weight: 600; color: #e8e8ed; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pgm-vendor { font-size: 12px; color: #8b8b9e; }

.pgm-badges { display: flex; gap: 6px; flex-wrap: wrap; min-height: 20px; }
.pgm-badge { font-size: 11px; color: #a5b4fc; background: rgba(99, 102, 241, 0.12); border: 1px solid rgba(99, 102, 241, 0.25); border-radius: 10px; padding: 2px 8px; }

.pgm-prices { display: flex; flex-direction: column; gap: 5px; font-size: 13px; }
.pgm-price-row { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.pgm-price-row span { color: #8b8b9e; flex-shrink: 0; }
.pgm-price-row em { color: #8b8b9e; font-style: normal; font-size: 12px; }
.pgm-price-row b { color: #e8e8ed; font-weight: 600; }
.pgm-price-row i { color: #5c5c72; font-style: normal; font-size: 12px; }
.pgm-saving { color: #22c55e; background: rgba(34, 197, 94, 0.12); border: 1px solid rgba(34, 197, 94, 0.25); border-radius: 8px; padding: 0 6px; font-size: 11px; text-decoration: none; }

.pgm-foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 10px; border-top: 1px solid #23233a; }
.pgm-paygo { font-size: 12px; color: #5c5c72; }
/* 「接入」按钮：接入方式抽屉入口（2026-09-01 替换原 Pay as You Go 英文标签，用户定中文文案；
   样式与「试用」按钮一致——用户要求同款背景与样式） */
.pgm-access { padding: 6px 18px; border: none; border-radius: 8px; background: linear-gradient(135deg, #6366f1, #8b5cf6); color: #fff; font-size: 13px; font-weight: 500; cursor: pointer; transition: opacity 0.2s; }
.pgm-access:hover { opacity: 0.85; }
/* 模型名后的复制按钮（2026-09-01 用户需求）：弱化会看不清（实证反馈），改为常驻可见的小 chip */
.pgm-copy { background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12); border-radius: 6px; padding: 1px 5px; margin-left: 6px; font-size: 12px; line-height: 1.4; cursor: pointer; vertical-align: middle; transition: background 0.2s, border-color 0.2s; }
.pgm-copy:hover { background: rgba(99,102,241,0.25); border-color: #6366f1; }
.pgm-copy.copied { background: rgba(34,197,94,0.25); border-color: #22c55e; }
.pgm-try { padding: 6px 18px; border: none; border-radius: 8px; background: linear-gradient(135deg, #6366f1, #8b5cf6); color: #fff; font-size: 13px; font-weight: 500; cursor: pointer; transition: opacity 0.2s; }
.pgm-try:hover { opacity: 0.85; }

@media (max-width: 1024px) {
  .pg-models-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .pg-models-grid { grid-template-columns: 1fr; }
  .pg-models-toolbar { flex-direction: column; align-items: stretch; }
  .pg-models-search { max-width: none; }
}

/* ==========================================================================
   接入方式抽屉（pg-models.js，参考 tokenrouter.com/models 卡片抽屉）
   ========================================================================== */
.pgm-card { cursor: pointer; }
.pgm-card:focus-visible { outline: 2px solid #6366f1; outline-offset: 2px; }
.pgm-card .pgm-try { cursor: pointer; }

.pgm-drawer-mask { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); z-index: 200; display: flex; justify-content: flex-end; }
.pgm-drawer-mask[hidden] { display: none; }

.pgm-drawer { width: 440px; max-width: 100%; height: 100%; background: #111118; border-left: 1px solid #23233a; padding: 24px; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; animation: pgm-drawer-in 0.2s ease-out; }
@keyframes pgm-drawer-in {
  from { transform: translateX(40px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

.pgm-drawer-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pgm-drawer-icon { width: 36px; height: 36px; border-radius: 8px; }
.pgm-drawer-head .pgm-title { flex: 1; }
.pgm-drawer-name { font-size: 16px; }
.pgm-drawer-close { flex-shrink: 0; width: 30px; height: 30px; border: 1px solid #23233a; border-radius: 8px; background: transparent; color: #8b8b9e; font-size: 14px; cursor: pointer; transition: all 0.2s; }
.pgm-drawer-close:hover { color: #e8e8ed; border-color: #6366f1; }

.pgm-drawer-body { display: flex; flex-direction: column; gap: 12px; }
.pgm-drawer-body h3 { font-size: 14px; font-weight: 600; color: #e8e8ed; margin-top: 4px; }

.pgm-endpoints { display: flex; flex-direction: column; gap: 8px; }
.pgm-endpoint { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: #0a0a0f; border: 1px solid #23233a; border-radius: 8px; padding: 9px 12px; }
.pgm-method { flex-shrink: 0; font-size: 11px; font-weight: 700; color: #22c55e; background: rgba(34, 197, 94, 0.12); border-radius: 4px; padding: 2px 6px; }
.pgm-path { font-size: 13px; color: #e8e8ed; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.pgm-endpoint-desc { flex-basis: 100%; font-size: 12px; color: #8b8b9e; }

.pgm-code-tabs { display: flex; gap: 8px; align-items: center; }
.pgm-code-tab { padding: 6px 14px; background: #16161f; border: 1px solid #23233a; border-radius: 8px; color: #8b8b9e; font-size: 13px; cursor: pointer; transition: all 0.2s; }
.pgm-code-tab:hover { border-color: #6366f1; color: #e8e8ed; }
.pgm-code-tab.active { border-color: #6366f1; background: #6366f1; color: #fff; }
.pgm-copy { margin-left: auto; padding: 6px 14px; background: transparent; border: 1px solid #23233a; border-radius: 8px; color: #8b8b9e; font-size: 13px; cursor: pointer; transition: all 0.2s; }
.pgm-copy:hover { color: #e8e8ed; border-color: #6366f1; }

.pgm-code { background: #0a0a0f; border: 1px solid #23233a; border-radius: 10px; padding: 14px; overflow-x: auto; font-size: 12.5px; line-height: 1.7; }
.pgm-code code { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; color: #e8e8ed; white-space: pre; }
.pgm-code .tk-c { color: #5c5c72; }
.pgm-code .tk-s { color: #a5d6a7; }
.pgm-code .tk-k { color: #a5b4fc; }

.pgm-drawer-foot { margin-top: auto; padding-top: 14px; border-top: 1px solid #23233a; display: flex; justify-content: space-between; gap: 12px; }
.pgm-drawer-foot a { font-size: 13px; color: #a5b4fc; }
.pgm-drawer-foot a:hover { color: #c7d2fe; }

@media (max-width: 640px) {
  .pgm-drawer { width: 100%; border-left: none; }
}