/* 梦联 App 专用样式 */

/* 微信风格导航 */
.wechat-container { display: flex; flex-direction: column; height: 100%; background: #ededed; }
.wechat-content { 
    flex: 1; 
    overflow-y: auto; 
    display: flex; 
    flex-direction: column;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}
.wechat-content::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}
.wechat-nav {
    height: 55px; background: #fff; border-top: 2px solid #000;
    border-bottom: 2px solid #000;
    display: flex; justify-content: space-around; align-items: center;
    flex-shrink: 0;
}
.wechat-nav-item { display: flex; flex-direction: column; align-items: center; font-size: 10px; color: #555; cursor: pointer; }
.wechat-nav-item.active { color: #07c160; }
.wechat-nav-icon { font-size: 22px; margin-bottom: 2px; }

.wechat-header {
    height: 64px !important;
    background: #fff !important;
    border-bottom: 2px solid #000 !important;
    border-top: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 24px 0 0 !important;
    position: relative;
}

.wechat-header .header-main {
    justify-content: center;
    padding: 0 15px;
    width: 100%;
    display: flex;
    align-items: center;
    position: relative;
}

.wechat-header .back-btn {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 100;
    margin: 0;
    padding: 0 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 100%;
    cursor: pointer;
}

.wechat-header .header-right-btns {
    position: absolute;
    right: 10px;
    top: 72%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 100;
}

.wechat-header .app-title {
    font-size: 17px;
    font-weight: 600;
    max-width: 60%;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 聊天列表 */
.chat-item {
    display: flex; padding: 12px 15px; border-bottom: 1px solid #f5f5f5;
    background: #fff; cursor: pointer;
}
.chat-item:active { background: #f2f2f2; }
.chat-avatar {
    width: 48px; height: 48px; border-radius: 8px;
    background-size: cover; background-position: center; margin-right: 12px;
    border: 2px solid #000;
    position: relative;
}
.unread-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background-color: #fa5151;
    color: white;
    font-size: 12px;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    border: 1px solid #fff;
    font-weight: bold;
    z-index: 10;
}
.chat-info { flex: 1; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.chat-top { display: flex; justify-content: space-between; margin-bottom: 4px; }
.chat-name { font-size: 16px; font-weight: 500; color: #000; }
.chat-time { font-size: 12px; color: #b2b2b2; }
.chat-msg { font-size: 14px; color: #b2b2b2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 聊天窗口布局 */
.chat-window { display: flex; flex-direction: column; height: 100%; background: #f3f3f3; }
.chat-messages { 
    flex: 1; 
    overflow-y: auto; 
    padding: 15px; 
    display: flex; 
    flex-direction: column;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}
.chat-messages::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}
.msg-group { display: flex; margin-bottom: 15px; width: 100%; }
.msg-avatar { width: 40px; height: 40px; border-radius: 5px; background-size: cover; flex-shrink: 0; border: 2px solid #000; }
.msg-bubble {
    max-width: 70%; padding: 10px 12px; border-radius: 7px;
    font-size: 15px; line-height: 1.4; position: relative; word-wrap: break-word;
}

/* HTML内容气泡特殊样式 - 支持自适应和响应式显示 */
.msg-bubble.msg-html-content {
    max-width: 95%; /* 允许更宽的显示 */
    width: auto;
    min-width: 120px;
}

.msg-bubble.msg-html-content .msg-text-content {
    overflow-x: auto; /* 支持横向滚动 */
    overflow-y: hidden;
    max-width: 100%;
    -webkit-overflow-scrolling: touch; /* iOS 平滑滚动 */
}

/* HTML内容内部元素自适应 */
.msg-bubble.msg-html-content table {
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
    font-size: inherit;
}

.msg-bubble.msg-html-content th,
.msg-bubble.msg-html-content td {
    padding: 6px 10px;
    border: 1px solid #ddd;
    text-align: left;
}

.msg-bubble.msg-html-content th {
    background: rgba(0, 0, 0, 0.05);
    font-weight: 600;
}

.msg-bubble.msg-html-content img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}

.msg-bubble.msg-html-content pre,
.msg-bubble.msg-html-content code {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 4px;
    padding: 2px 6px;
    font-family: 'Courier New', monospace;
    font-size: 13px;
    overflow-x: auto;
}

.msg-bubble.msg-html-content pre {
    padding: 10px;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.msg-bubble.msg-html-content ul,
.msg-bubble.msg-html-content ol {
    margin: 8px 0;
    padding-left: 20px;
}

.msg-bubble.msg-html-content li {
    margin: 4px 0;
}

.msg-bubble.msg-html-content blockquote {
    border-left: 3px solid #ccc;
    margin: 8px 0;
    padding: 5px 15px;
    background: rgba(0, 0, 0, 0.03);
}

.msg-bubble.msg-html-content h1,
.msg-bubble.msg-html-content h2,
.msg-bubble.msg-html-content h3,
.msg-bubble.msg-html-content h4,
.msg-bubble.msg-html-content h5,
.msg-bubble.msg-html-content h6 {
    margin: 10px 0 5px;
    line-height: 1.3;
}

.msg-bubble.msg-html-content h1 { font-size: 1.4em; }
.msg-bubble.msg-html-content h2 { font-size: 1.3em; }
.msg-bubble.msg-html-content h3 { font-size: 1.2em; }
.msg-bubble.msg-html-content h4 { font-size: 1.1em; }

.msg-bubble.msg-html-content a {
    color: #07c160;
    text-decoration: none;
}

.msg-bubble.msg-html-content a:hover {
    text-decoration: underline;
}

/* 修复HTML内容中的div/span等块级元素显示 */
.msg-bubble.msg-html-content div,
.msg-bubble.msg-html-content section,
.msg-bubble.msg-html-content article {
    max-width: 100%;
    box-sizing: border-box;
}
.msg-left { flex-direction: row; }
.msg-left .msg-avatar { margin-right: 10px; }
.msg-left .msg-bubble { background: #fff; }

.msg-right { flex-direction: row-reverse; }
.msg-right .msg-avatar { margin-left: 10px; }
.msg-right .msg-bubble { background: #95ec69; }

/* 气泡轮廓线样式 */
.msg-bubble.with-outline {
    border: 1.5px solid #000;
}

/* 消息卡片基础样式（红包、转账、位置等） */
.msg-card {
    max-width: 70%;
    position: relative;
    word-wrap: break-word;
    border-radius: 8px;
    overflow: hidden !important; /* 强制裁剪内部背景 */
    padding: 0 !important;
    background: none !important;
    /* 注意：如果用户自定义了边框，这里不应该设为 none，
       但为了防止双边框，我们让外层容器承载边框，内部背景填充。 */
}

/* 特殊消息卡片样式 */
.msg-bubble.transfer-card {
    background: #fa9e3b !important;
    padding: 0 !important;
    overflow: hidden;
    min-width: 180px;
  
}

.msg-bubble.location-card {
    background: #fff !important;
    padding: 0 !important;
    overflow: hidden;
    min-width: 200px;
    
    border: 1px solid #eee;
}

/* 发送失败/拉黑感叹号 */
.msg-error-icon {
    width: 20px;
    height: 20px;
    background-color: #fa5151 !important;
    color: #ffffff !important;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: bold;
    margin: 0 8px;
    align-self: center;
    flex-shrink: 0;
    cursor: pointer;
    z-index: 10;
    border: none;
}

.chat-input-area {
    padding: 10px; background: #f7f7f7; 
    border-top: 2px solid #000 !important;
    border-bottom: 2px solid #000 !important;
    flex-shrink: 0;
}
.chat-input-wrapper { 
    display: flex; 
    align-items: center; 
    gap: 8px; /* 统一间距，避免拥挤 */
}
.chat-input {
    flex: 1; min-height: 38px; max-height: 100px;
    background: #fff; border-radius: 10px; border: 2px solid #000;
    padding: 8px 12px; font-size: 15px; /* 稍微缩小一点字体以腾出空间 */
    outline: none;
    min-width: 0; /* 防止 flex 溢出 */
}

/* 加号功能菜单 */
.plus-menu-container {
    background: #f7f7f7; /* 与输入栏背景保持一致 */
    border-top: 2px solid #000;
    display: none;
    margin-top: 15px; /* 保持下移距离，确保线条清晰可见 */
    margin-left: -10px; /* 抵消父级 padding，使线条延伸到边缘 */
    margin-right: -10px;
    padding: 25px 10px 40px; /* 图标随之下移 */
    grid-template-columns: repeat(4, 1fr);
    gap: 20px 10px;
    position: relative;
    z-index: 5;
    width: calc(100% + 20px); /* 宽度补偿 */
}

.plus-menu-container.active {
    display: grid;
}

.plus-menu-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.plus-menu-icon {
    width: 54px;
    height: 54px;
    background: #fff;
    border: 2px solid #000;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 4px 4px 0px #000;
}

.plus-menu-icon:active {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0px #000;
}

.plus-menu-label {
    font-size: 12px;
    color: #333;
}
.send-btn {
    background: #fff; color: #000; 
    border: 2px solid #000;
    padding: 0 10px; border-radius: 12px; font-weight: bold;
    cursor: pointer;
    box-shadow: 4px 4px 0px #000;
    transition: all 0.1s;
    height: 38px;
    display: flex; align-items: center; justify-content: center;
    white-space: nowrap; /* 强制文字横向不换行 */
    flex-shrink: 0;
}
.send-btn:active {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0px #000;
}

.plus-btn {
    background: #fff;
    border: 2px solid #000;
    border-radius: 12px; /* 半圆角方形 */
    width: 38px;
    height: 38px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    box-shadow: 4px 4px 0px #000;
    transition: all 0.1s;
    flex-shrink: 0;
}
.plus-btn:active {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0px #000;
}

.ai-trigger-btn {
    background: #fff;
    border: 2px solid #000;
    border-radius: 12px;
    width: 38px;
    height: 38px;
    box-shadow: 4px 4px 0px #000;
    transition: all 0.1s;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.ai-trigger-btn:active {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0px #000;
}
.ai-trigger-btn svg {
    stroke: #000;
}

/* 资料/设置页 */
.profile-header {
    display: flex;
    align-items: center;
    padding: 20px;
    background: #fff;
    margin: 15px;
    border: 2px solid #000;
    border-radius: 20px; /* 半圆角方形 */
    cursor: pointer;
    box-shadow: 4px 4px 0px #ccc;
}
.profile-header:active {
    background: #f9f9f9;
}
.profile-avatar {
    width: 64px;
    height: 64px;
    border-radius: 12px;
    background-size: cover;
    background-position: center;
    margin-right: 20px;
    border: 2px solid #000; /* 手绘轮廓感 */
}
.profile-info { flex: 1; }
.profile-info h2 { font-size: 20px; margin: 0; font-weight: 600; }
.profile-info p { color: #888; font-size: 14px; margin: 5px 0 0; }
.profile-status-btn {
    margin-top: 12px;
    display: inline-block;
    padding: 3px 10px;
    border: 1px solid #ddd;
    border-radius: 15px;
    font-size: 12px;
    color: #555;
}

.profile-arrow {
    font-size: 18px;
    color: #bbb;
    margin-left: 10px;
}

/* 列表组通用样式 - 强化卡片式半圆角信息栏感 */
.list-group {
    background: #fff;
    margin: 12px 15px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 4px 4px 0px #ccc;
    border: 2px solid #000; /* 强化黑边以匹配整体手绘风格 */
}

/* 分组文件夹样式 */
.contact-group-folder {
    border-bottom: 1px solid #f0f0f0;
    background: #fff;
}

.group-header {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    cursor: pointer;
    transition: background 0.2s;
}

.group-header:active {
    background: #f5f5f5;
}

.group-arrow {
    width: 20px;
    display: flex;
    justify-content: center;
    transition: transform 0.3s ease;
    order: 3;
    margin-left: 8px;
}

.contact-group-folder.is-expanded .group-arrow {
    transform: rotate(0deg);
}

.group-icon-wrapper {
    margin-right: 12px;
    display: flex;
    align-items: center;
    order: 0;
}

.group-name {
    flex: 1;
    font-weight: 600;
    font-size: 16px;
    color: #333;
    order: 1;
}

.group-count {
    color: #999;
    font-size: 13px;
    background: #f0f0f0;
    padding: 2px 8px;
    border-radius: 10px;
    order: 2;
}

.group-content {
    overflow: hidden;
    background: #fafafa;
    transition: max-height 0.3s ease-out;
}

/* 默认收起状态由 JS display:none 控制，但我们可以通过 CSS 优化内部项目 */
.group-empty-tip {
    padding: 15px;
    font-size: 13px;
    color: #bbb;
    text-align: center;
}

.contact-item-avatar {
    width: 36px !important;
    height: 36px !important;
    margin-right: 12px;
}

.contact-item-name {
    font-size: 15px;
}

/* 输入指示器 */
.typing-bubble {
    background: #fff !important;
    padding: 12px 15px !important;
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 60px;
}

.dot-typing {
    width: 6px;
    height: 6px;
    background-color: #999;
    border-radius: 50%;
    display: inline-block;
    animation: typing 1.4s infinite ease-in-out both;
}

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

@keyframes typing {
    0%, 80%, 100% { transform: scale(0); opacity: 0.3; }
    40% { transform: scale(1); opacity: 1; }
}

.list-item {
    display: flex;
    align-items: center;
    padding: 14px 16px;
    background: #fff;
    cursor: pointer;
    border-bottom: 1px solid #eee;
}
.list-item:last-child {
    border-bottom: none;
}
.list-item:active {
    background: #f2f2f2;
}
.list-item-icon {
    width: 28px;
    height: 28px;
    margin-right: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000 !important;
}
.list-item-icon svg {
    stroke-width: 1.5px; /* 增强手绘感 */
    filter: drop-shadow(1px 1px 0px rgba(0,0,0,0.1)); /* 模拟纸上笔触 */
}
.list-item-title {
    flex: 1;
    font-size: 16px;
    color: #000;
}
.list-item-arrow {
    font-size: 16px;
    color: #bbb;
    margin-left: 5px;
}

/* 个人信息编辑页特定样式 */
.edit-profile-input {
    border: none;
    text-align: right;
    font-size: 16px;
    width: 180px;
    outline: none;
    background: transparent;
    color: #333;
}
.edit-profile-input:focus {
    color: #000;
}

.moments-view .wechat-header {
    background: #fff !important;
    border-bottom: 2px solid #000 !important;
}

.moments-view .wechat-header .app-title,
.moments-view .wechat-header .back-btn,
.moments-view .wechat-header .header-right-btn {
    color: #000 !important;
    text-shadow: none !important;
}

.moments-header {
    height: 280px; 
    background-color: #333;
    background-position: center; 
    background-size: cover; 
    position: relative; 
    margin-bottom: 40px;
    margin-top: 0;
    width: 100%;
    flex-shrink: 0;
}

.moments-view .wechat-content {
    display: block !important; /* 朋友圈不需要 flex 布局，避免高度塌陷 */
    background: #fff !important;
}

/* 日记特定样式 */
.diary-card {
    transition: transform 0.2s, background-color 0.2s;
    border: 1px solid rgba(0,0,0,0.05);
}
.diary-card:active {
    transform: scale(0.98);
    background-color: #f9f9f9 !important;
}
.diary-card-excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
}
#diary-title::placeholder, #diary-content::placeholder {
    color: #ccc;
    font-style: italic;
}

/* 消息长按上下文菜单 */
.msg-context-menu {
    position: fixed;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    z-index: 1000;
    padding: 5px 0;
    min-width: 120px;
    display: flex;
    flex-direction: column;
}

.context-menu-item {
    padding: 10px 15px;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    transition: background 0.2s;
    text-align: center;
    border-bottom: 1px solid #f5f5f5;
}

.context-menu-item:last-child {
    border-bottom: none;
}

.context-menu-item:active {
    background: #f0f0f0;
}

/* @提及相关样式 */
.mentioned-msg .msg-bubble {
    background-color: #fff9c4 !important; /* 淡淡的提醒黄 */
    border: 1.5px solid #fbc02d !important;
    box-shadow: 0 0 8px rgba(251, 192, 45, 0.3);
}

/* 线下模式简笔画便签样式 */
.portal-bubble {
    position: relative;
    border: 2px solid #333 !important;
    border-radius: 2px 2px 2px 20px / 2px 2px 2px 25px !important;
    box-shadow: 5px 5px 0px rgba(0,0,0,0.1) !important;
    background-image: 
        linear-gradient(rgba(0,0,0,0.05) 1px, transparent 1px) !important;
    background-size: 100% 1.6em !important;
    padding: 15px !important;
}

.portal-bubble::after {
    content: '';
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 25px;
    height: 25px;
    background: linear-gradient(135deg, transparent 50%, rgba(0,0,0,0.05) 50%, rgba(0,0,0,0.1) 100%);
    border-radius: 0 0 2px 0;
    pointer-events: none;
}

.portal-msg.msg-right .portal-bubble {
    border-radius: 2px 2px 20px 2px / 2px 2px 25px 2px !important;
}

.portal-msg.msg-right .portal-bubble::after {
    left: -2px;
    right: auto;
    background: linear-gradient(225deg, transparent 50%, rgba(0,0,0,0.05) 50%, rgba(0,0,0,0.1) 100%);
}

.mention-item:hover {
    background-color: #f5f5f5;
}

/* 顶部通知弹窗 */
.msg-notification-popup {
    position: absolute;
    top: 30px;
    left: 10px;
    right: 10px;
    background: #fff;
    border: 2px solid #000;
    border-radius: 12px;
    padding: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 9999;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15), 4px 4px 0 #000;
    animation: notification-slide-in 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
    cursor: pointer;
}

.msg-notification-popup:active {
    transform: scale(0.98);
}

.msg-notification-avatar {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    border: 1.5px solid #000;
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
}

.msg-notification-content {
    flex: 1;
    overflow: hidden;
}

.msg-notification-title {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.msg-notification-text {
    font-size: 13px;
    color: #666;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@keyframes notification-slide-in {
    from { transform: translateY(-120%); }
    to { transform: translateY(0); }
}

@keyframes notification-slide-out {
    from { transform: translateY(0); opacity: 1; }
    to { transform: translateY(-120%); opacity: 0; }
}

/* 动画定义 */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes fadeInDown {
    from { opacity: 0; transform: translate(-50%, -10px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-10px); }
    60% { transform: translateY(-5px); }
}

/* 语音消息动画 */
.voice-bubble-content:active .voice-icon-svg {
    animation: voice-pulse 0.6s infinite ease-in-out;
}

@keyframes voice-pulse {
    0% { transform: scale(1); opacity: 1; }
    30% { transform: scale(1.1) translateX(2px); opacity: 0.8; }
    100% { transform: scale(1); opacity: 1; }
}

/* 模拟语音播放时的声波动效 - 仅在 playing 类激活时显示 */
.msg-bubble.playing .voice-icon-svg path:nth-child(2) { animation: voice-wave 1s infinite 0.2s; }
.msg-bubble.playing .voice-icon-svg path:nth-child(3) { animation: voice-wave 1s infinite 0.4s; }

@keyframes voice-wave {
    0%, 100% { opacity: 1; stroke-width: 2.5; }
    50% { opacity: 0.3; stroke-width: 1.5; }
}

.voice-transcription {
    animation: fadeIn 0.3s ease-out;
}

/* 通用隐藏滚动条样式 */
.no-scrollbar {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}
.no-scrollbar::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}