.chat-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  max-width: 900px;
  margin: 0 auto;
  background: var(--surface);
}

.chat-header {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  position: sticky;
  top: 0;
  z-index: 10;
}

.back-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-lg);
  color: var(--text-secondary);
  transition: all var(--transition-base);
}

.back-button:hover {
  background: var(--background);
  color: var(--text-primary);
}

.chat-character-info {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 1;
}

.chat-avatar {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  color: white;
  overflow: hidden;
  flex-shrink: 0;
}

.chat-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.chat-character-meta h1 {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 2px 0;
}

.chat-status {
  font-size: 13px;
  color: var(--text-tertiary);
}

.chat-actions {
  display: flex;
  gap: var(--space-2);
}

.icon-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-lg);
  background: transparent;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-base);
}

.icon-button:hover:not(:disabled) {
  background: var(--background);
  color: var(--text-primary);
}

.icon-button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-6) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  color: var(--text-tertiary);
  text-align: center;
  padding: var(--space-6);
}

.message {
  display: flex;
  gap: var(--space-3);
  max-width: 85%;
}

.message.user {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.message.assistant {
  align-self: flex-start;
}

.message-avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 14px;
  color: white;
  overflow: hidden;
  flex-shrink: 0;
}

.message-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.message-bubble {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  line-height: 1.6;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.message.user .message-bubble {
  background: var(--primary);
  color: white;
  border-bottom-right-radius: var(--radius-sm);
}

.message.assistant .message-bubble {
  background: var(--background);
  color: var(--text-primary);
  border-bottom-left-radius: var(--radius-sm);
}

.message-bubble.typing {
  display: flex;
  gap: 4px;
  align-items: center;
  padding: var(--space-3) var(--space-4);
}

.typing-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-tertiary);
  animation: typing 1.4s infinite;
}

.typing-dot:nth-child(2) {
  animation-delay: 0.2s;
}

.typing-dot:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes typing {
  0%, 60%, 100% {
    opacity: 0.3;
    transform: translateY(0);
  }
  30% {
    opacity: 1;
    transform: translateY(-4px);
  }
}

.chat-composer {
  border-top: 1px solid var(--border);
  background: var(--surface);
  padding: var(--space-4);
}

.chat-error {
  background: #FEF2F2;
  border: 1px solid #FCA5A5;
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.chat-error p {
  margin: 0;
  color: #991B1B;
  font-size: 14px;
}

.chat-error button {
  padding: var(--space-2) var(--space-3);
  background: #991B1B;
  color: white;
  border: none;
  border-radius: var(--radius-md);
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
}

.composer-form {
  display: flex;
  gap: var(--space-3);
  align-items: flex-end;
}

.composer-form textarea {
  flex: 1;
  min-height: 44px;
  max-height: 120px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--background);
  color: var(--text-primary);
  font-size: 15px;
  line-height: 1.5;
  resize: none;
  font-family: inherit;
  transition: all var(--transition-base);
}

.composer-form textarea:focus {
  outline: none;
  border-color: var(--primary);
  background: var(--surface);
}

.composer-form textarea:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.send-button {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-xl);
  background: var(--primary);
  color: white;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-base);
  flex-shrink: 0;
}

.send-button:hover:not(:disabled) {
  background: var(--primary-hover);
  transform: scale(1.05);
}

.send-button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: scale(1);
}

/* History Modal */
.chat-action-dialog {
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(480px, calc(100vw - 32px));
  max-height: calc(100dvh - 48px);
  overflow: auto;
  box-sizing: border-box;
  padding: 24px;
  border: 1px solid var(--color-border);
  border-radius: 20px;
  background: var(--surface);
  color: var(--text-primary);
  box-shadow: var(--shadow-lg);
}
.chat-action-dialog::backdrop { background: rgba(0, 0, 0, .4); }
.chat-action-dialog h3 { margin: 0 0 12px; }
.chat-action-dialog p { line-height: 1.6; }
.chat-action-dialog textarea { width: 100%; min-height: 120px; font-size: 16px; }
.chat-action-dialog blockquote { margin: 12px 0; padding: 12px; background: var(--background); border-radius: 12px; overflow-wrap: anywhere; white-space: pre-wrap; }
.chat-action-dialog .parity-actions { margin-top: 16px; }
.chat-action-dialog .btn { min-height: 44px; }
.chat-action-error { color: #991B1B; }
.chat-action-feedback {
  position: fixed;
  z-index: 1200;
  top: max(20px, env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100vw - 32px);
  box-sizing: border-box;
  padding: 12px 18px;
  border-radius: 12px;
  background: #292534;
  color: white;
  box-shadow: var(--shadow-lg);
  pointer-events: none;
}
.message-tools button { min-height: 36px; cursor: pointer; touch-action: manipulation; }
.message-tools button:disabled { opacity: .45; cursor: not-allowed; }

.history-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: var(--space-4);
}

.history-panel {
  background: var(--surface);
  border-radius: var(--radius-xl);
  width: 100%;
  max-width: 480px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-lg);
}

.history-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5) var(--space-5) var(--space-4);
  border-bottom: 1px solid var(--border);
}

.history-header h2 {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
  color: var(--text-primary);
}

.close-button {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  background: transparent;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-base);
}

.close-button:hover {
  background: var(--background);
  color: var(--text-primary);
}

.history-list {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-2);
}

.history-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: none;
  background: transparent;
  border-radius: var(--radius-lg);
  cursor: pointer;
  text-align: left;
  transition: all var(--transition-base);
  position: relative;
}

.history-item:hover:not(:disabled) {
  background: var(--background);
}

.history-item:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.history-item.selected {
  background: var(--primary-light);
}

.history-item-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.history-item-content strong {
  color: var(--text-primary);
  font-weight: 500;
  font-size: 15px;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.history-item-content small {
  color: var(--text-tertiary);
  font-size: 13px;
}

.selected-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary);
  flex-shrink: 0;
}

.empty-state {
  padding: var(--space-6);
  text-align: center;
  color: var(--text-tertiary);
}

.delete-conversation-button {
  margin: var(--space-4);
  padding: var(--space-3);
  background: var(--danger);
  color: white;
  border: none;
  border-radius: var(--radius-lg);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-base);
}

.delete-conversation-button:hover:not(:disabled) {
  background: var(--danger-hover);
}

.delete-conversation-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .chat-container {
    height: 100dvh;
  }

  .chat-header {
    padding: var(--space-3);
  }

  .chat-avatar {
    width: 40px;
    height: 40px;
  }

  .chat-character-meta h1 {
    font-size: 16px;
  }

  .chat-messages {
    padding: var(--space-4) var(--space-3);
  }

  .message {
    max-width: 90%;
  }

  .message-avatar {
    width: 32px;
    height: 32px;
    font-size: 13px;
  }

  .message-bubble {
    padding: var(--space-2-5) var(--space-3);
    font-size: 15px;
  }

  .chat-composer {
    padding: var(--space-3);
    padding-bottom: max(var(--space-3), env(safe-area-inset-bottom));
  }

  .history-modal {
    padding: 0;
    align-items: flex-end;
  }

  .history-panel {
    max-width: 100%;
    max-height: 90vh;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
}

.model-picker{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-width:0;max-width:100%}.model-picker select{max-width:100%;min-width:0}.model-picker small{font-size:11px;color:var(--text-secondary)}.model-picker [role=alert]{font-size:12px;overflow-wrap:anywhere}.inner-message{font-size:13px;color:var(--text-secondary);margin:8px 0}.inner-message summary{cursor:pointer}.inner-message p{white-space:pre-wrap}

/* Dedicated chat viewport. High specificity keeps global parity styles out. */
.app-layout.chat-focus {
  --chat-background-overlay: rgba(245,248,252,.78);
  position: fixed; inset-inline: 0; top: var(--chat-viewport-top,0px);
  height: var(--chat-viewport-height,100dvh); min-height: 0;
  overflow: hidden; background: var(--color-bg-base);
}
[data-theme="night"] .app-layout.chat-focus { --chat-background-overlay: rgba(12,22,33,.76); }
.chat-focus .app-main.full-width { margin: 0!important; padding: 0!important; width: 100%; height: 100%!important; min-height: 0; max-width: none; overflow:hidden; }
.chat-focus .chat-workspace { display: flex; padding: 0; margin: 0 auto; height: 100%; width: 100%; max-width: 920px; min-height: 0; }
.chat-focus .chat-workspace .chat-container { display:flex; flex-direction:column; width:100%; height:100%; min-height:0; max-width:none; border:0; border-radius:0; background:var(--color-bg-base); }
.chat-focus .chat-header { display:flex; flex:none; flex-wrap:nowrap; gap:4px; height:56px; min-height:56px; padding:0 8px; box-sizing:border-box; position:relative; top:auto; border-bottom:1px solid var(--color-border); background:var(--color-bg-surface); }
.chat-focus .chat-character-info { min-width:0; gap:8px; }
.chat-focus .chat-avatar { width:32px; height:32px; border-radius:11px; }
.chat-focus .chat-character-meta { min-width:0; }
.chat-focus .chat-character-meta h1 { font-size:15px; line-height:20px; margin:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chat-focus .chat-status { font-size:10px; line-height:14px; display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chat-focus .chat-actions { display:flex; gap:0; flex:none; }
.chat-focus .icon-button,.chat-focus .back-button { width:40px; height:44px; min-width:40px; min-height:44px; padding:0; border:0; border-radius:12px; background:transparent; color:var(--color-text-primary); text-decoration:none; touch-action:manipulation; }
.chat-focus .chat-messages { flex:1 1 0; min-height:0; height:auto; max-height:none; padding:20px 12px; gap:18px; overflow-y:auto; overflow-x:hidden; overscroll-behavior-y:contain; background-size:cover; background-position:center; background-attachment:local; scroll-behavior:auto; -webkit-overflow-scrolling:touch; }
.chat-focus .chat-messages .empty-state { flex:1; min-height:0; font-size:14px; }
.chat-focus .chat-container .message { display:flex; width:fit-content; max-width:85%; gap:8px; align-items:flex-start; }
.chat-focus .message-content { min-width:0; max-width:100%; }
.chat-focus .message-avatar { width:30px; height:30px; border-radius:10px; margin-top:3px; flex:none; }
.chat-focus .message.user { align-self:flex-end; }
.chat-focus .message.assistant { align-self:flex-start; }
.chat-focus .chat-container .message-bubble { max-width:100%; padding:12px 14px; font-size:15px; line-height:1.65; border-radius:18px; white-space:pre-wrap; overflow-wrap:anywhere; -webkit-touch-callout:none; touch-action:pan-y; border:1px solid var(--color-border); box-shadow:0 2px 8px rgba(30,55,90,.035); }
.chat-focus .message.user .message-bubble { background:var(--v8-user,var(--color-primary-light)); color:var(--color-text-primary); border-color:transparent; border-top-right-radius:5px; }
.chat-focus .message.assistant .message-bubble { background:var(--color-bg-surface); color:var(--color-text-primary); border-top-left-radius:5px; }
.chat-focus .message-attachment { max-width:100%; max-height:320px; object-fit:contain; height:auto; border-radius:12px; }
.chat-focus .inner-message { margin:7px 0 0; font-size:12px; }
.chat-focus .inner-message summary { min-height:32px; display:flex; align-items:center; width:fit-content; padding:0 8px; border-radius:14px; background:var(--color-bg-surface); color:var(--color-text-secondary); }
.chat-focus .inner-message p { margin:6px 0 0; padding:12px; border-radius:14px; background:var(--color-bg-surface); line-height:1.65; }
.chat-focus .chat-composer { flex:none; padding:10px 10px max(26px,calc(10px + env(safe-area-inset-bottom,0px))); margin:0; background:var(--color-bg-surface); border-top:1px solid var(--color-border); }
.chat-focus .composer-form { display:flex; align-items:flex-end; gap:8px; padding:0; margin:0; }
.chat-focus .composer-form textarea { flex:1; width:0; min-width:0; min-height:44px; max-height:120px; box-sizing:border-box; resize:none; padding:10px 12px; line-height:23px; font-size:16px; border-radius:20px; background:var(--color-bg-base); color:var(--color-text-primary); border:1px solid var(--color-border); }
.chat-focus .composer-form textarea { scrollbar-width:none; }
.chat-focus .composer-form textarea::-webkit-scrollbar { display:none; }
.chat-focus .send-button { width:44px; height:44px; min-width:44px; border-radius:16px; background:var(--color-primary); color:var(--color-text-primary); }
.chat-focus .chat-plus { border:1px solid var(--color-border); border-radius:16px; height:44px; }
.chat-focus .chat-tools-panel { padding:0 0 12px; max-height:min(45dvh,320px); overflow:auto; }
.chat-focus .chat-tools-panel[hidden] { display:none; }
.chat-focus .chat-extra { margin:0; }
.chat-focus .chat-extra .parity-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.chat-focus .chat-extra .chip { display:flex; align-items:center; justify-content:center; min-height:48px; font-size:13px; border-radius:16px; padding:8px; background:var(--color-bg-base); }
.chat-focus .chat-extra input[type="file"] { position:absolute; width:1px; height:1px; opacity:0; }
.chat-focus .chat-error { margin:0 0 8px; padding:8px 10px; max-height:88px; overflow:auto; font-size:12px; background:var(--color-bg-base); border-color:var(--color-border); }
.chat-focus .chat-error p { font-size:12px; color:var(--color-text-primary); }
.chat-focus .chat-composer > .chat-extra { font-size:12px; margin-bottom:8px; }
.chat-dialog-heading { display:flex; gap:8px; align-items:center; justify-content:space-between; margin-bottom:12px; }
.chat-dialog-heading h3 { margin:0; font-size:17px; }
.chat-dialog-heading .icon-button { flex:none; width:44px; height:44px; }
.chat-action-dialog { z-index:1500; max-height:calc(var(--chat-viewport-height,100dvh) - 32px); width:min(480px,calc(100vw - 24px)); background:var(--color-bg-surface); color:var(--color-text-primary); padding:16px; border-radius:24px; }
dialog.chat-action-dialog { background:var(--color-bg-surface)!important; color:var(--color-text-primary)!important; max-width:min(480px,calc(100vw - 24px)); }
.chat-settings-list { display:flex; flex-direction:column; gap:8px; }
.chat-settings-list > button,.chat-settings-list > a { display:flex; align-items:center; min-height:48px; padding:10px 14px; font-size:14px; border:1px solid var(--color-border); border-radius:14px; background:var(--color-bg-base); color:var(--color-text-primary); text-decoration:none; overflow-wrap:anywhere; text-align:left; }
.chat-settings-list .chat-destructive { color:#c24050; }
.chat-settings-list small { font-size:12px; color:var(--color-text-secondary); }
.chat-action-dialog .model-picker { display:block; }
.chat-action-dialog .current-model-name { white-space:normal; overflow-wrap:anywhere; font-size:14px; color:var(--color-text-secondary); }
.chat-action-dialog .model-picker > select[aria-label="聊天模型"] { display:none; }
.chat-action-dialog .model-picker > select { width:100%; font-size:16px; min-height:44px; }
.chat-model-list { display:flex; flex-direction:column; gap:8px; margin-top:12px; max-height:50dvh; overflow:auto; }
.chat-model-option { display:flex; flex-direction:column; align-items:flex-start; gap:5px; flex:none; width:100%; min-height:64px; padding:12px; border:1px solid var(--color-border); border-radius:14px; background:var(--color-bg-base); color:var(--color-text-primary); text-align:left; }
.chat-model-option strong { font-size:14px; white-space:normal; overflow-wrap:anywhere; font-weight:600; }
.chat-model-option span { font-size:12px; color:var(--color-text-secondary); }
.chat-model-option.selected { border-color:var(--color-primary); background:var(--color-primary-light,var(--color-bg-base)); }
.chat-model-option:disabled { opacity:.5; }
@media(min-width:769px){ .chat-focus .chat-workspace { border-inline:1px solid var(--color-border); } }
@media(prefers-reduced-motion:reduce){ .chat-focus *, .chat-action-dialog * { animation:none!important; transition:none!important; } }

/* Companion conversation: one identity header, quiet chrome, independent messages. */
.chat-focus .chat-header{height:62px;min-height:62px;padding-inline:10px;gap:4px}
.chat-focus .chat-avatar{width:38px;height:38px;border-radius:14px}
.chat-focus .chat-character-meta h1{font-size:17px;line-height:23px}.chat-focus .chat-status{font-size:11px;line-height:16px}
.chat-focus .chat-model-chip{display:flex;align-items:center;gap:5px;max-width:116px;min-width:0;min-height:40px;padding:6px 8px;border:0;border-radius:12px;background:var(--color-bg-base);color:var(--color-text-secondary);font-size:11px}.chat-model-chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chat-model-chip svg{flex:none}
.chat-context-bar{display:flex;align-items:center;justify-content:space-between;flex:none;gap:8px;padding:2px 16px 6px;border-bottom:1px solid var(--color-border);background:var(--color-bg-surface);font-size:11px;color:var(--color-text-secondary)}
.chat-identity-chip{border:0;background:transparent;color:inherit;font-size:11px;text-align:left;min-width:0;max-width:80%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:4px 0;min-height:28px}.chat-quota{position:relative;flex:none}.chat-quota summary{cursor:pointer;min-height:28px;display:flex;align-items:center}.chat-quota[open]>small{position:absolute;z-index:12;right:0;top:100%;width:min(260px,75vw);padding:12px;border:1px solid var(--color-border);border-radius:12px;background:var(--color-bg-surface);font-size:12px;line-height:1.7;box-shadow:0 4px 16px #0001}
.chat-focus .chat-messages{padding:18px 12px 14px;gap:16px}.chat-focus .chat-container .message{max-width:92%;gap:8px}.chat-focus .message-content{display:flex;flex-direction:column;min-width:0}.chat-focus .message-author{font-size:10px;line-height:16px;color:var(--color-text-secondary);margin:0 3px 4px}.chat-focus .message.user .message-author{text-align:right}.chat-focus .message.user .message-content{align-items:flex-end}
.chat-focus .chat-container .message-bubble{font-size:16px;line-height:1.8;padding:11px 14px;letter-spacing:.01em;box-shadow:none;border-radius:17px}.chat-focus .message.assistant .message-bubble{border-top-left-radius:5px}.chat-focus .message.user .message-bubble{background:var(--v8-user,var(--color-primary-light,var(--color-bg-hover)));color:var(--color-text-primary);border:1px solid var(--color-border)}.chat-focus .message-continuation{margin-top:-10px}.chat-focus .message-continuation>.message-avatar{visibility:hidden}.chat-focus .message-action{color:var(--color-text-secondary);font-size:.94em}.chat-focus .message-avatar{width:28px;height:28px;border-radius:10px}.chat-focus .player-avatar{margin-top:22px}
.chat-focus .message-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:0;min-height:32px;margin:3px 0 0;color:var(--color-text-secondary)}.chat-focus .message-toolbar>button{border:0;background:transparent;color:inherit;padding:5px 8px;font:inherit;font-size:11px;min-height:32px;cursor:pointer}.chat-focus .message-toolbar>button:disabled{opacity:.4}.chat-focus .message-toolbar .message-voice{margin:0;width:auto;display:flex;align-items:center;flex-wrap:wrap;gap:4px;max-width:100%}.chat-focus .message-toolbar .voice-generate{width:34px;height:32px;min-height:32px;padding:5px;border:0;background:transparent;color:var(--color-text-secondary);border-radius:8px}.chat-focus .message-toolbar .voice-strip{padding:6px 8px;gap:6px;max-width:100%;min-width:170px;border-radius:12px;box-shadow:none}.chat-focus .message-toolbar .voice-play{width:28px;height:28px;min-height:28px;flex-basis:28px}.chat-focus .message-toolbar .voice-error{flex-basis:100%;font-size:11px}.chat-focus .message-toolbar .voice-notice{margin:0;font-size:11px}
.chat-focus .chat-composer{position:relative;padding:10px 10px max(10px,env(safe-area-inset-bottom,0px))}.chat-focus .chat-sync-notice{display:flex;align-items:center;gap:8px;justify-content:space-between;font-size:11px;line-height:1.5;padding:0 2px 7px;color:var(--color-text-secondary)}.chat-sync-notice button{flex:none;font:inherit;color:var(--color-primary);background:transparent;border:0;min-height:30px;text-decoration:underline;text-underline-offset:3px}.chat-send-status{margin:0 2px 7px;font-size:11px;color:var(--color-text-secondary)}.chat-focus .chat-latest{position:absolute;right:16px;bottom:calc(100% + 12px);border:1px solid var(--color-border);border-radius:20px;min-height:38px;padding:8px 14px;background:var(--color-bg-surface);color:var(--color-text-primary);box-shadow:0 3px 12px #0001;font-size:12px;z-index:5}
@media(min-width:769px){.chat-focus .chat-workspace{max-width:1000px}.chat-focus .chat-messages{padding:28px clamp(24px,5vw,72px)}.chat-focus .chat-container .message{max-width:78%}.chat-focus .chat-header{padding-inline:24px}.chat-context-bar{padding-inline:28px}.chat-focus .chat-composer{padding:14px 28px}.chat-focus .message-toolbar>button{font-size:12px}}
@media(max-width:350px){.chat-focus .chat-model-chip{max-width:85px}.chat-focus .chat-character-info{gap:5px}.chat-focus .chat-avatar{width:30px;height:30px}.chat-focus .chat-character-meta h1{font-size:15px}.chat-focus .chat-header{padding-inline:5px}.chat-focus .chat-messages{padding-inline:8px}}
.chat-focus .message.user{flex-direction:row}.chat-focus .message.user .player-avatar{order:1}
.chat-sync-notice details{min-width:0;flex:1}.chat-sync-notice summary{cursor:pointer}.chat-sync-notice details small{display:block;max-height:72px;overflow:auto;font-size:11px;overflow-wrap:anywhere;margin-top:4px}.chat-sync-notice details[open]{max-width:100%}
.chat-focus .chat-header .v22-listen-entry{width:36px;min-width:36px;padding:0;justify-content:center;border:0;background:transparent}.chat-focus .v22-listen-entry span{display:none}.v22-real:has(.chat-focus) #v23-weather-canvas{opacity:.06!important}
.chat-focus .message-toolbar:has(.voice-strip)>.message-voice{flex-basis:100%;margin-bottom:2px}.chat-focus .message-toolbar .voice-strip{flex:1;max-width:240px}

/* Saved audio belongs to its own message, rather than a separate player card. */
.chat-focus .message.assistant .message-content:has(.voice-strip){background:var(--color-bg-surface);border:1px solid var(--color-border);border-radius:17px;border-top-left-radius:5px;overflow:hidden}
.chat-focus .message.assistant .message-content:has(.voice-strip)>.message-author{margin:6px 14px 0}
.chat-focus .message.assistant .message-content:has(.voice-strip)>.message-bubble{border:0;background:transparent}
.chat-focus .message-content:has(.voice-strip)>.message-toolbar{margin:0;padding:0 8px 5px;gap:2px}
.chat-focus .message-toolbar:has(.voice-strip)>.message-voice{flex:1 1 150px;min-width:0;margin:0}
.chat-focus .message-toolbar .voice-strip{padding:3px 4px;min-width:0;max-width:none;border:0;background:transparent;gap:7px}
.chat-focus .message-toolbar .voice-track-heading{margin:0}.chat-focus .message-toolbar .voice-track input.voice-seek[type=range]{height:18px;min-height:18px}
.chat-focus .message-toolbar:has(.voice-strip)>button:not([aria-label="更多消息操作"]){display:none}
.chat-focus .chat-composer{overflow:visible}
.chat-focus .chat-header [aria-label="打开调色轮盘"]{display:none}

.player-identity-editor{display:flex;flex-direction:column;gap:16px;min-width:0;color:var(--color-text-primary)}
.player-identity-editor form{display:flex;flex-direction:column;gap:12px}.player-identity-editor label{display:flex;flex-direction:column;gap:7px;font-size:13px;color:var(--color-text-secondary)}
.player-identity-editor input,.player-identity-editor select,.player-identity-editor textarea{box-sizing:border-box;max-width:100%;width:100%;padding:11px 12px;border:1px solid var(--color-border);border-radius:12px;background:var(--color-bg-base);color:var(--color-text-primary);font:inherit;font-size:16px;line-height:1.5;min-height:44px}.player-identity-editor textarea{resize:vertical}
.player-profile-heading,.player-card-heading{display:flex;align-items:center;gap:12px}.player-profile-heading>.v18-avatar{width:48px;height:48px;flex:none}.player-profile-heading small{display:block;font-size:12px;color:var(--color-text-secondary);margin-top:4px}.player-card-heading{justify-content:space-between}.player-card-heading h3{margin:0;font-size:17px}.player-card-hint{margin:0;font-size:12px;line-height:1.7;color:var(--color-text-secondary)}.player-card-actions{display:flex;flex-wrap:wrap;gap:8px}.player-card-actions button{min-height:44px;white-space:normal}.player-card-error{color:var(--color-danger,#bd4859);font-size:13px}.player-identity-editor [role=status]{font-size:13px;line-height:1.6;margin:0}

.voice-message-compact {margin-top:8px;min-width:0;max-width:100%;width: min(100%, 360px);font-size:12px;line-height:1.55;color:var(--text,var(--color-text-primary,#242a30))}
.voice-message-compact .voice-strip {display:flex;align-items:center;gap:12px;min-width:0;padding:12px 14px;border:1px solid var(--line,var(--color-border,#ddd));border-radius:18px;background:var(--pane,var(--color-bg-surface,#fffefa));box-shadow:0 2px 8px rgba(30,35,40,.025)}
.voice-strip audio[hidden] {display:none!important}
.voice-message-compact .voice-play {display:grid;place-items:center;flex:0 0 40px;width:40px;height:40px;min-height:40px;margin:0;padding:0;border:0;border-radius:50%;background:var(--text,var(--color-text-primary,#242a30));color:var(--pane,var(--color-bg-surface,#fffefa));cursor:pointer}
.voice-message-compact .voice-play:hover {opacity:.85}
.voice-message-compact .voice-play:disabled {opacity:.45;cursor:wait}
.voice-track {min-width:0;flex:1}
.voice-track-heading {display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:3px}
.voice-name {min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:13px;font-weight:600}
.voice-time {flex-shrink:0;font-size:10px;font-variant-numeric:tabular-nums;color:var(--sub,var(--color-text-secondary,#6b7280))}
.voice-message-compact .voice-track input.voice-seek[type=range] {display:block;appearance:none;-webkit-appearance:none;box-sizing:border-box;width:100%;min-width:0;min-height:24px;height:24px;margin:0;padding:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:transparent!important;cursor:pointer;accent-color:var(--text,var(--color-text-primary,#242a30))}
.voice-seek::-webkit-slider-runnable-track {height:3px;border-radius:3px;background:linear-gradient(to right,var(--text,var(--color-text-primary,#242a30)) var(--voice-progress),var(--line,var(--color-border,#ddd)) var(--voice-progress))}
.voice-seek::-webkit-slider-thumb {appearance:none;-webkit-appearance:none;width:9px;height:9px;margin-top:-3px;border:0;border-radius:50%;background:var(--text,var(--color-text-primary,#242a30))}
.voice-seek::-moz-range-track {height:3px;border-radius:3px;background:var(--line,var(--color-border,#ddd))}
.voice-seek::-moz-range-progress {height:3px;background:var(--text,var(--color-text-primary,#242a30))}
.voice-seek::-moz-range-thumb {width:9px;height:9px;border:0;border-radius:50%;background:var(--text,var(--color-text-primary,#242a30))}
.voice-seek:disabled {opacity:.45;cursor:wait}
.voice-message-compact :is(button,input,summary,a):focus-visible {outline:2px solid var(--gold,var(--color-primary,#9c8057));outline-offset:3px}
.voice-message-compact .voice-link {display:inline-flex;align-items:center;justify-content:center;min-height:36px;margin:0;padding:6px 8px;border:0;border-radius:10px;background:transparent;color:var(--sub,var(--color-text-secondary,#6b7280));font:inherit;cursor:pointer;white-space:normal;text-align:left}
.voice-message-compact .voice-link:hover {background:var(--pane2,var(--color-bg-hover,#f2f0e9));color:var(--text,var(--color-text-primary,#242a30))}
.voice-message-compact button:disabled {opacity:.5;cursor:not-allowed}
.voice-message-compact .voice-notice,.voice-message-compact .voice-error {margin:8px 0;padding:10px 12px;border-radius:12px;background:var(--pane2,var(--color-bg-hover,#f2f0e9));font-size:12px;overflow-wrap:anywhere}
.voice-message-compact .voice-error p {margin:0}
.voice-player-error {flex-basis:100%;margin:6px 0 0;font-size:11px;overflow-wrap:anywhere}
.voice-strip:has(.voice-player-error) {flex-wrap:wrap}

.voice-message-compact .voice-generate {display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--line,#ddd);border-radius:50%;background:var(--pane,#fffefa);color:var(--text,#242a30);cursor:pointer}
.voice-track-heading {justify-content:flex-end}
.voice-confirm-dialog {box-sizing:border-box;width:min(320px,calc(100vw - 32px));padding:24px;border:1px solid var(--line,#ddd);border-radius:20px;background:var(--pane,#fffefa);color:var(--text,#242a30);box-shadow:0 16px 64px #0003}
.voice-confirm-dialog::backdrop {background:#0005}
.voice-confirm-dialog h2 {margin:0 0 12px;font-size:18px}
.voice-confirm-dialog p {margin:0 0 24px;font-size:14px}
.voice-dialog-actions {display:flex;gap:12px}
.voice-dialog-actions button {flex:1;min-height:44px;border:1px solid var(--line,#ddd);border-radius:12px;background:var(--pane,#fffefa);color:var(--text,#242a30);cursor:pointer}
.voice-dialog-actions button:last-child {background:var(--text,#242a30);color:var(--pane,#fffefa)}
.voice-dialog-actions button:disabled {opacity:.5;cursor:not-allowed}
.voice-confirm-dialog {position:fixed;inset:0;margin:auto}