/* 聊天：容器 / 气泡 / 在线状态 / 思维链
   —— 由 styles.css 第 892–1278 行原样切分，规则与顺序未改动。 */
/* 应用外层 */
.app-fullscreen{
  position:absolute;inset:0;
  background:linear-gradient(160deg,#FFD4E8 0%,#D4E8FF 100%);
  z-index:150;
  display:flex;flex-direction:column;
  overflow:hidden;
}
.app-topbar{
  height:64px;display:flex;align-items:center;
  padding:0 16px;
  background:rgba(255,255,255,0.5);
  backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(255,255,255,0.3);
  gap:16px;flex-shrink:0;
}
.app-topbar-title{
  font-size:16px;font-weight:600;color:#333;
  flex:1;text-align:center;
}

/* 聊天 */
.chat-app{
  position:absolute;inset:0;
  background:#F4F5F7;
  z-index:200;display:flex;flex-direction:column;
}
.chat-login{
  flex:1;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  padding:24px;overflow-y:auto;
}
.chat-login-title{font-size:32px;color:#1C1C1E;margin-bottom:48px;font-weight:700;}
.chat-form{width:100%;max-width:320px;}
.chat-input-group{margin-bottom:24px;}
.chat-input-label{font-size:14px;color:#8E8E93;margin-bottom:8px;display:block;}
.chat-input{
  width:100%;padding:16px;border-radius:16px;border:none;
  background:rgba(255,255,255,0.9);font-size:16px;outline:none;font-family:inherit;
  color:#1C1C1E;
}
.chat-btn{
  width:100%;padding:16px;border-radius:16px;border:none;
  background:rgba(255,255,255,0.85);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  color:#1C1C1E;font-size:16px;font-weight:600;cursor:pointer;
  margin-top:16px;font-family:inherit;
  box-shadow:0 1px 4px rgba(0,0,0,0.04);
}
.chat-main{flex:1;display:flex;flex-direction:column;background:#F4F5F7;}
.chat-header{
  height:52px;display:flex;align-items:center;
  padding:0 16px;
  background:rgba(255,255,255,0.85);
  backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);
  border-bottom:0.5px solid rgba(0,0,0,0.06);
  flex-shrink:0;gap:8px;
}
.chat-header-title{flex:1;text-align:center;font-size:16px;font-weight:600;color:#1C1C1E;}
.chat-tabs{display:none;}
.friend-list{flex:1;overflow-y:auto;padding:8px 16px;}
.friend-item{
  display:flex;align-items:center;
  padding:12px 14px;margin-bottom:4px;
  border-radius:14px;
  background:rgba(255,255,255,0.7);
  -webkit-user-select:none; user-select:none; -webkit-touch-callout:none;
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  box-shadow:inset 0 0 0 0.5px rgba(0,0,0,0.04), 0 1px 3px rgba(0,0,0,0.03);
  cursor:pointer;
  position:relative;
}
.friend-item:active{transform:scale(0.98);}
.friend-item.pinned{
  background:rgba(255,245,250,0.85);
  box-shadow:inset 0 0 0 0.5px rgba(255,212,232,0.5), 0 1px 4px rgba(255,180,220,0.15);
  border-left:none;
}
.friend-item.pinned .friend-name::after{content:'';display:none;}
.friend-item.starred{
  background:rgba(255,245,250,0.85);
  box-shadow:inset 0 0 0 0.5px rgba(255,212,232,0.5), 0 1px 4px rgba(255,180,220,0.15);
}
.friend-avatar{
  width:44px;height:44px;border-radius:14px;
  background:linear-gradient(135deg,#F0E5EC,#DCE5F0);
  display:flex;align-items:center;justify-content:center;
  font-size:22px;margin-right:12px;flex-shrink:0;
  background-size:cover;background-position:center;overflow:hidden;
}
.friend-info{flex:1;min-width:0;}
.friend-name{font-size:15px;font-weight:600;color:#1C1C1E;margin-bottom:3px;}
.friend-last-message{
  font-size:12px;color:#AEAEB2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.friend-side{
  display:flex;flex-direction:column;align-items:flex-end;justify-content:center;
  gap:6px;flex-shrink:0;margin-left:8px;min-width:32px;
}
.friend-time{
  font-size:10px;line-height:1;color:#AEAEB2;white-space:nowrap;
}
.unread-badge{
  min-width:17px;height:17px;line-height:17px;padding:0 5px;
  border-radius:9px;background:#ff3b30;color:#fff;
  font-size:10px;font-weight:700;text-align:center;
  box-sizing:border-box;white-space:nowrap;
}
.pin-inline{font-size:11px;margin-left:4px;vertical-align:1px;}

/* ===== Batch 2：在线状态 + 已读回执 ===== */
.friend-avatar-wrap{position:relative;flex-shrink:0;margin-right:12px;}
.friend-avatar-wrap .friend-avatar{margin-right:0;}
.presence-dot{
  position:absolute;right:-3px;bottom:-3px;
  width:10px;height:10px;border-radius:50%;
  border:2px solid #fff;box-sizing:content-box;
  background:#34C759;
}
.presence-dot.presence-online{background:#34C759;}
.presence-dot.presence-away{background:#FFCC00;}
.presence-dot.presence-busy{background:#FF9F0A;}
.presence-dot.presence-sleep{background:#8E8E93;}
.presence-dot.presence-offline{background:#C7C7CC;}

.chatroom-header-title-stack{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-width:0;line-height:1.15;
}
.chatroom-title-line{
  display:flex;align-items:center;justify-content:center;
  max-width:100%;white-space:nowrap;overflow:hidden;
  font-size:15px;font-weight:600;
}
.chatroom-presence{
  display:flex;align-items:center;gap:4px;
  font-size:10px;color:#AEAEB2;margin-top:1px;
  max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.chatroom-presence .presence-dot-sm{
  width:6px;height:6px;border-radius:50%;background:#34C759;flex-shrink:0;
}
.chatroom-presence .presence-dot-sm.presence-away{background:#FFCC00;}
.chatroom-presence .presence-dot-sm.presence-busy{background:#FF9F0A;}
.chatroom-presence .presence-dot-sm.presence-sleep{background:#8E8E93;}
.chatroom-presence .presence-dot-sm.presence-offline{background:#C7C7CC;}
.presence-text-online{color:#34C759;}
.presence-text-away{color:#C7A600;}
.presence-text-busy{color:#FF9F0A;}
.presence-text-sleep{color:#8E8E93;}
.presence-text-offline{color:#AEAEB2;}
.message-read-receipt{font-size:9px;color:#AEAEB2;line-height:1;margin-top:2px;}

.chatroom{
  position:absolute;inset:0;
  background:var(--color-bg-glass);
  backdrop-filter:blur(10px);
  z-index:210;display:flex;flex-direction:column;
}
.chatroom-header{
  height:56px;display:flex;align-items:center;
  padding:0 12px;
  background:rgba(255,255,255,0.85);
  backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);
  border-bottom:0.5px solid rgba(0,0,0,0.06);
  gap:8px;flex-shrink:0;
}
.chatroom-messages{
  flex:1;overflow-y:auto;padding:16px 20px;background:rgba(255,255,255,0.25);
  /* 禁止长按选中文字 / 弹出系统菜单，保证长按气泡菜单体验 */
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
  -webkit-tap-highlight-color:transparent;
}
/* 气泡本体同样禁止选中，防止部分浏览器在元素级恢复选中 */
.chatroom-messages .message-bubble,
.chatroom-messages .chat-voice-bubble,
.chatroom-messages .chat-transfer-bubble,
.chatroom-messages .message-think,
.chatroom-messages .message-narratage{
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
}
/* 例外：输入框/可编辑区域仍可正常选中 */
.chatroom-messages textarea,
.chatroom-messages input,
.chatroom-messages [contenteditable="true"]{
  -webkit-user-select:text;
  user-select:text;
  -webkit-touch-callout:default;
}
.message-time{
  text-align:center;font-size:11px;color:#C7C7CC;
  padding:8px 0;font-weight:500;
}
.message-row{
  display:flex;align-items:flex-start;
  margin-bottom:12px;
}
.message-row.user{flex-direction:row-reverse;}
.message-avatar-wrap{
  display:flex;flex-direction:column;align-items:center;
  flex-shrink:0;margin:0 8px;gap:3px;
}
.message-avatar{
  width:36px;height:36px;border-radius:50%;
  background:linear-gradient(135deg,#F0E5EC,#DCE5F0);
  display:flex;align-items:center;justify-content:center;
  font-size:18px;flex-shrink:0;
  background-size:cover;background-position:center;overflow:hidden;
}
.message-avatar-time{
  font-size:10px;color:#C7C7CC;
  text-align:center;line-height:1;white-space:nowrap;
}
.message-bubble{
  max-width:72%;padding:11px 15px;
  border-radius:18px 18px 18px 4px;
  background:var(--bubble-friend-bg);
  word-wrap:break-word;position:relative;
  font-size:14px;line-height:1.5;color:#1C1C1E;
  box-shadow:0 1px 3px rgba(0,0,0,0.05);
}
.message-row.user .message-bubble{
  background:var(--bubble-user-bg);
  border-radius:18px 18px 4px 18px;
  margin-left:auto;
}
/* 角色“正在输入”气泡 */
.message-row.typing-row{margin-bottom:12px;}
.typing-bubble{
  display:flex;align-items:center;justify-content:center;
  min-width:62px;padding:14px 17px;
}
.typing-bubble .typing-dots{gap:4px;}
.typing-bubble .typing-dots span{
  width:6px;height:6px;background:#B9A7B0;
}
.message-narratage{
  text-align:center;font-size:12px;color:#AEAEB2;
  font-style:italic;padding:4px 24px;
}
.message-think{
  font-size:13px;color:#8E8E93;
  background:rgba(240,240,245,0.9);
  padding:8px;border-radius:10px;
  border-left:3px solid #D1D1D6;
  margin:4px 0;cursor:pointer;
}
.message-think-label{font-size:10px;color:#8E8E93;margin-bottom:2px;}
.message-think-body{display:block;white-space:pre-wrap;}
.message-think.collapsed .message-think-body{display:none;}

/* ====== 🟢 新增：独立气泡外的思维链样式（严格放在这里） ====== */
.message-think-outside {
  font-size: 12px; /* 缩小字号 */
  color: #8E8E93;
  background: rgba(240, 240, 245, 0.75);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 6px 12px; /* 缩小内边距 */
  border-radius: 10px;
  border-left: 3px solid #D1D1D6;
  cursor: pointer;
  max-width: 80%; /* 防止展开后太宽 */
  width: fit-content; /* ⭐ 核心：收缩包裹文字，不要撑满全屏 */
  display: inline-block;
  transition: all 0.2s ease;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.02);
  word-break: break-word;
}
.message-think-outside:active {
  background: rgba(230, 230, 235, 0.9);
}
.message-think-outside .message-think-label {
  font-size: 11px;
  color: #AEAEB2;
  font-weight: 600;
}
.message-think-outside .message-think-body {
  display: block;
  white-space: pre-wrap;
  margin-top: 4px; /* 缩小间距 */
  line-height: 1.4;
  color: #666;
}
.message-think-outside.collapsed .message-think-body {
  display: none;
}
/* ========================================================= */

.chatroom-input{
  display:flex;align-items:flex-end;
  padding:10px 16px 16px;
  background:rgba(255,255,255,0.85);
  backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);
  border-top:0.5px solid rgba(0,0,0,0.06);
  gap:8px;position:relative;
  flex-shrink:0;
}
.chatroom-input > div textarea{
  padding:0 !important;
}
.chatroom-input textarea{
  flex:1;padding:10px 14px;border-radius:18px;
  border:none;
  background:#F0F0F5;
  font-size:14px;outline:none;resize:none;
  max-height:100px;min-height:38px;font-family:inherit;
  color:#1C1C1E;
}
.chatroom-input textarea::placeholder{color:#C7C7CC;}

.chatroom-input .menu-btn{
  width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,0.7);
  border:0.5px solid rgba(0,0,0,0.06);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;flex-shrink:0;
}
.chatroom-input .menu-btn svg{width:18px;height:18px;fill:#48484A;}
.send-btn{
  width:38px;height:38px;border-radius:50%;
  background:#FFD4E8;border:none;color:white;
  font-size:16px;display:flex;align-items:center;justify-content:center;
  cursor:pointer;flex-shrink:0;
}
.send-btn.stopping{background:#FF9CB9;}
.stop-square{width:11px;height:11px;border-radius:2px;background:#fff;display:block;}
.input-drawer{
  position:absolute;
  bottom:72px;left:16px;
  background:rgba(255,255,255,0.95);
  backdrop-filter:blur(20px);
  border-radius:24px;
  box-shadow:0 4px 20px rgba(0,0,0,0.12);
  padding:8px;z-index:220;min-width:180px;
}
.input-drawer-item{
  padding:12px 16px;font-size:14px;color:#333;
  cursor:pointer;border-radius:16px;
  display:flex;align-items:center;gap:8px;
}
.bubble-menu{
  position:fixed;background:rgba(255,255,255,0.95);
  backdrop-filter:blur(20px);
  border-radius:16px;
  box-shadow:0 4px 20px rgba(0,0,0,0.15);
  padding:8px;z-index:1000;min-width:120px;
}
.bubble-menu-item{
  padding:12px;text-align:center;font-size:14px;
  color:#333;cursor:pointer;border-radius:8px;
}
.bubble-menu-item.danger{color:#ff3b30;}

.edit-overlay{
  position:absolute;inset:0;background:rgba(0,0,0,0.5);
  z-index:999;display:flex;align-items:center;justify-content:center;
  padding:24px;
  overflow:hidden;
}
.edit-box{
  background:#fff;border-radius:24px;padding:24px;
  width:100%;max-width:400px;
}
.edit-box textarea{
  width:100%;min-height:120px;padding:16px;
  border-radius:16px;border:1px solid rgba(0,0,0,0.1);
  font-size:16px;resize:vertical;outline:none;font-family:inherit;
}
.edit-actions{display:flex;gap:16px;margin-top:16px;}
.edit-actions button{
  flex:1;padding:16px;border-radius:16px;border:none;
  font-size:16px;cursor:pointer;font-family:inherit;
}
.edit-actions .btn-cancel{background:rgba(0,0,0,0.05);color:#333;}
.edit-actions .btn-save{background:#FFD4E8;color:white;}