:root {
    --bg-color: #e8ecef; /* 低饱和水灰色 */
    --text-main: #3a3a3c; /* 深灰 */
    --text-sub: #8e8e93; /* 浅灰 */
    --accent-water: rgba(156, 195, 213, 0.3); /* 水色点缀 */
    --accent-coffee: rgba(166, 145, 133, 0.2); /* 咖色点缀 */
    --glass-bg: rgba(255, 255, 255, 0.45);
    --glass-border: rgba(255, 255, 255, 0.7);
    --shadow-light: rgba(255, 255, 255, 0.9);
    --shadow-dark: rgba(174, 184, 195, 0.4);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #d5dadd;
}

.phone-container {
    width: 375px;
    height: 812px;
    background: linear-gradient(135deg, #f5f7fa 0%, #e4e9ed 100%);
    border-radius: 30px; /* 减小圆角，使其更像一个普通的容器而不是手机外壳 */
    box-shadow: 
        20px 20px 60px rgba(0,0,0,0.1),
        -20px -20px 60px rgba(255,255,255,0.8);
    /* 移除了 inset 模拟手机边框的阴影 */
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* 状态栏 */
.status-bar {
    height: 20px; /* 减小高度，因为移除了时间 */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 24px;
    z-index: 10;
}

/* 大时间显示 */
.large-time {
    font-size: 64px;
    font-weight: 800;
    text-align: center;
    color: transparent;
    -webkit-text-stroke: 2px rgba(255, 255, 255, 0.9); /* 白色镂空效果 */
    text-stroke: 2px rgba(255, 255, 255, 0.9);
    margin-top: 5px; /* 减小上边距 */
    margin-bottom: 10px; /* 减小下边距，使下方组件整体上移 */
    letter-spacing: 2px;
    text-shadow: 0 4px 10px rgba(0,0,0,0.1); /* 轻微阴影增加立体感 */
}

/* 屏幕内容区 */
.screen-content {
    flex: 1;
    display: flex;
    width: 300%; /* 3页 */
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.page {
    width: 375px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative; /* 创建定位上下文，让 memo-widget.expanded 相对于本页居中 */
}

/* 第一页特定布局 */
.page-1 {
    gap: 15px; /* 增加间距使布局更松弛 */
    padding: 15px;
    height: calc(100% - 100px); /* 调整高度 */
    overflow-y: auto;
}

/* 第二页特定布局 */
.page-2 {
    gap: 15px;
    padding: 15px;
    height: calc(100% - 100px);
    overflow-y: auto;
}

/* 第三页特定布局 */
.page-3 {
    gap: 15px;
    padding: 15px;
    height: calc(100% - 100px);
    overflow-y: auto;
}

/* 隐藏滚动条但保留滚动功能 */
.page-1::-webkit-scrollbar,
.page-2::-webkit-scrollbar,
.page-3::-webkit-scrollbar {
    display: none;
}

.page-row {
    display: flex;
    gap: 10px;
    width: 100%;
    flex-shrink: 0; /* 防止被压缩 */
}

.half-widget {
    flex: 1;
    height: 120px; /* 统一高度 */
}

.tall-widget {
    height: 160px; /* 为 2x2 App 网格提供足够空间 */
}

.small-widget {
    height: 80px; /* 第四行稍微矮一点，节省空间 */
}

/* 备忘录组件 */
.memo-widget {
    flex: 1;
    height: 120px;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 16px;
    box-shadow: 
        4px 4px 10px var(--shadow-dark),
        -4px -4px 10px var(--shadow-light);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
    backdrop-filter: blur(10px);
}

.memo-widget.expanded {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 320px;
    height: 60%;
    z-index: 1000;
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
    margin: 0;/* 现在 .page 是 position:relative，会相对于当前页居中 */
}

.memo-header {
    height: 20px;
    background-color: var(--accent-water); /* 水色半透明 */
    background-image: radial-gradient(rgba(255,255,255,0.5) 2px, transparent 2px); /* 波点效果 */
    background-size: 10px 10px;
    border-bottom: 1px solid rgba(255,255,255,0.5);
}

.memo-body {
    flex: 1;
    padding: 0 10px;
    font-size: 14px;
    line-height: 24px; /* 与背景横线间距一致 */
    color: var(--text-main);
    outline: none;
    background-image: linear-gradient(transparent 23px, rgba(156, 195, 213, 0.3) 24px); /* 水色横线 */
    background-size: 100% 24px;
    background-attachment: local; /* 背景随内容滚动 */
    overflow-y: auto;
    white-space: pre-wrap; /* 保留换行 */
}

/* 日历组件 */
.calendar-widget {
    width: 100%;
    padding: 8px;
    background: rgba(230, 222, 210, 0.6); /* 淡卡其色 */
    display: flex;
    flex-direction: column;
    gap: 4px;
    height: auto; /* 自适应高度 */
}

.calendar-header {
    font-weight: bold;
    color: #5c5042;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    margin-bottom: 2px;
    padding: 0 10px;
}

.cal-btn {
    cursor: pointer;
    padding: 2px 8px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.3);
    transition: background 0.2s;
    user-select: none;
}

.cal-btn:hover {
    background: rgba(255, 255, 255, 0.6);
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.calendar-day {
    aspect-ratio: 2 / 1.2; /* 改变宽高比，使其更扁平，减小整体高度 */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 9px;
    color: #5c5042;
    border-radius: 4px;
    background-color: rgba(255, 255, 255, 0.4);
}

.calendar-day.today {
    background-color: rgba(166, 145, 133, 0.8);
    color: white;
    font-weight: bold;
}

.calendar-day.empty {
    background-color: transparent;
}

/* 紧凑型 App 网格 */
.compact-app-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 10px;
    min-height: 160px; /* 增加高度以容纳正常大小的 App */
    margin: 0;
    padding: 5px; /* 减小内边距 */
    /* 移除了背景、边框、阴影和模糊效果，取消外框 */
    background: transparent;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* 移除紧凑网格中对 App 图标大小的限制，使其与全局 .app-icon 保持一致 */
.compact-app-grid .app-icon {
    gap: 8px;
}

/* 天气组件 */
.weather-widget {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.weather-icon {
    color: #8e8e93;
    transition: all 0.3s ease;
}

.weather-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px; /* 减小间距防止重叠 */
    width: 100%;
    height: 100%;
    padding: 5px;
}

.weather-info .temp {
    font-size: 20px; /* 稍微减小字号 */
    font-weight: bold;
    color: var(--text-main);
    line-height: 1;
}

.weather-info .humidity {
    font-size: 10px; /* 稍微减小字号 */
    color: var(--text-sub);
    margin-bottom: 2px;
}

.weather-info .sun-times {
    font-size: 8px; /* 最小字号 */
    color: var(--text-sub);
    opacity: 0.8;
    text-align: center;
    line-height: 1.2;
    transform: scale(0.9); /* 进一步缩小以适应空间 */
}

/* 玻璃浮雕通用类 */
.glass-panel {
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    border-radius: 24px;
    box-shadow: 
        6px 6px 16px var(--shadow-dark),
        -6px -6px 16px var(--shadow-light),
        inset 2px 2px 4px rgba(255,255,255,0.5);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.glass-panel:active {
    transform: scale(0.98);
    box-shadow: 
        2px 2px 8px var(--shadow-dark),
        -2px -2px 8px var(--shadow-light),
        inset 4px 4px 8px rgba(0,0,0,0.05);
}

/* 小组件 */
.widget {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
}

.widget::before {
    content: '';
    position: absolute;
    top: -50%; left: -50%;
    width: 200%; height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.8) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.5s;
    pointer-events: none;
}

.widget:hover::before {
    opacity: 1;
    animation: rotateLight 4s linear infinite;
}

@keyframes rotateLight {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.large-widget { height: 160px; }
.medium-widget { height: 100px; }

.widget-placeholder {
    color: var(--text-sub);
    font-size: 14px;
    letter-spacing: 1px;
    border: 1px dashed rgba(142, 142, 147, 0.3);
    padding: 10px 20px;
    border-radius: 12px;
}

.widget-text {
    color: var(--text-main);
    font-size: 15px;
    line-height: 1.6;
    text-align: center;
    font-weight: 500;
    outline: none;
    cursor: text;
    width: 100%;
    padding: 10px;
}

.image-widget {
    cursor: pointer;
    background-size: cover;
    background-position: center;
}

.mixed-widget {
    flex-direction: column;
    gap: 15px;
}

/* 拍立得组件 */
.polaroid-container {
    position: relative;
    height: 260px; /* 稍微减小高度以适应新布局 */
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
    flex-shrink: 0;
}

.polaroid {
    position: absolute;
    width: 180px;
    height: 220px;
    background-color: #ffffff;
    padding: 10px 10px 40px 10px;
    box-shadow: 
        0 10px 20px rgba(0,0,0,0.15),
        0 2px 5px rgba(0,0,0,0.1);
    border-radius: 4px;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    cursor: pointer;
    display: flex;
    flex-direction: column;
}

.polaroid-img {
    flex: 1;
    background-color: #f0f0f0;
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #e0e0e0;
}

.polaroid-1 {
    transform: rotate(-10deg) translateX(-30px);
    z-index: 1;
}

.polaroid-2 {
    transform: rotate(5deg) translateX(20px);
    z-index: 2;
}

.polaroid-3 {
    transform: rotate(-5deg) translateY(20px);
    z-index: 3;
}

.polaroid.active {
    transform: rotate(0deg) scale(1.1) translateY(-10px);
    z-index: 10;
    box-shadow: 
        0 20px 40px rgba(0,0,0,0.2),
        0 5px 10px rgba(0,0,0,0.1);
}

/* App 网格 */
.app-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 84px; /* 固定行高，形成隐形网格 */
    gap: 16px 10px;
    margin-top: 16px; /* 不再用 auto 把图标顶到底部 */
    margin-bottom: 10px;
    align-content: start;
    min-height: 184px;
}

/* 隐形网格槽位：每个槽位最多放一个 App，空槽位即可作为落点 */
.app-slot {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 76px;
    border-radius: 16px;
}

.compact-app-grid .app-slot {
    min-height: 0;
}

/* Dock 槽位：横向均分 */
.dock-slot {
    flex: 1;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    align-self: stretch; /* 撑满 dock 的高度，确保空槽位能被鼠标命中，同时不改变 dock 整体高度 */
}

/* 拖拽落点高亮 */
.app-drop-target {
    outline: 2px dashed rgba(156, 195, 213, 0.85);
    outline-offset: 3px;
    border-radius: 16px;
    background: rgba(156, 195, 213, 0.08);
}

/* 主屏 App 图标内 SVG 居中显示（如“分你一半”耳机图标） */
.app-grid .icon-glass > svg,
.compact-app-grid .icon-glass > svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--text-main);
    opacity: 0.75;
    z-index: 1;
}

/* ===== 身份卡组件 ===== */
.id-cards-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
    padding: 5px 0;
}

.id-card {
    width: 85%;
    border-radius: 2px;
    padding: 12px 12px 20px 12px;
    display: flex;
    position: relative;
    z-index: 0;
}

.id-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 10px;
    background: rgba(80, 80, 80, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 2px 2px 0 0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: -1;
}

.id-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: rgba(80, 80, 80, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 0 0 2px 2px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    z-index: -1;
}

.id-card-left {
    align-self: flex-start;
}

.id-card-right {
    align-self: flex-end;
}

.id-card-avatar {
    width: 50px;
    height: 65px;
    background-color: #fff;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.id-card-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    color: #fff;
    font-family: "Comic Sans MS", cursive, sans-serif;
}

.id-card-left .id-card-info {
    margin-left: 12px;
}

.id-card-right .id-card-info {
    margin-right: 12px;
}

.id-card-row1, .id-card-row2, .id-card-row3 {
    display: flex;
    width: 100%;
}

.id-card-left .id-card-row1 { justify-content: flex-start; }
.id-card-left .id-card-row2 { justify-content: flex-end; padding-right: 20px; }
.id-card-left .id-card-row3 { justify-content: flex-start; align-items: flex-start; margin-top: 6px; }

.id-card-right .id-card-row1 { justify-content: flex-end; }
.id-card-right .id-card-row2 { justify-content: flex-start; padding-left: 20px; }
.id-card-right .id-card-row3 { justify-content: flex-end; align-items: flex-start; margin-top: 6px; }

.id-card-name {
    font-size: 15px;
    outline: none;
    line-height: 1.2;
}

.id-card-add {
    font-size: 13px;
    outline: none;
    line-height: 1.2;
}

.id-card-text {
    font-size: 12px;
    outline: none;
    word-break: break-word;
    max-width: 160px;
    line-height: 1.3;
}

.id-card-colon {
    font-size: 14px;
    margin: 0 4px;
    line-height: 1.2;
}

/* 预留的页内 App 层不参与布局 */
.page-app-layer {
    display: none;
}

.app-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px; /* 稍微减小图标和文字的间距 */
    cursor: grab;
    user-select: none;
}

.app-icon:active {
    cursor: grabbing;
}

.app-icon.dragging {
    opacity: 0.5;
    transform: scale(1.05);
}

.icon-glass {
    width: 55px; /* 从 60px 缩小到 55px (约 92% 比例) */
    height: 55px;
    background: linear-gradient(135deg, rgba(255,255,255,0.6), rgba(255,255,255,0.1));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    border-radius: 16px; /* 稍微减小圆角 */
    box-shadow: 
        4px 4px 10px var(--shadow-dark),
        -4px -4px 10px var(--shadow-light);
    position: relative;
    transition: all 0.3s ease;
}

/* 给不同图标添加淡淡的水色/咖色渐变（按槽位交替）*/
.app-slot:nth-child(odd) .icon-glass {
    background: linear-gradient(135deg, var(--accent-water), rgba(255,255,255,0.2));
}
.app-slot:nth-child(even) .icon-glass {
    background: linear-gradient(135deg, var(--accent-coffee), rgba(255,255,255,0.2));
}

.icon-glass::after {
    content: '';
    position: absolute;
    top: 2px; left: 2px; right: 2px; height: 40%;
    background: linear-gradient(to bottom, rgba(255,255,255,0.8), transparent);
    border-radius: 16px 16px 0 0;
}

#settingsIcon .icon-glass {
    background: linear-gradient(135deg, rgba(156, 195, 213, 0.14), rgba(255,255,255,0.32));
    border-color: rgba(255, 255, 255, 0.82);
    box-shadow:
        3px 3px 8px rgba(174, 184, 195, 0.24),
        -3px -3px 8px rgba(255, 255, 255, 0.85);
}

#settingsIcon .icon-glass::after {
    opacity: 0.72;
}

.gear-svg {
    width: 29px;
    height: 29px;
    color: rgba(58, 58, 60, 0.72);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    stroke-width: 1.7;
    z-index: 1;
}

.app-icon:active .icon-glass {
    transform: scale(0.9);
    box-shadow: 
        2px 2px 5px var(--shadow-dark),
        -2px -2px 5px var(--shadow-light);
}

.app-icon span {
    font-size: 11px;
    color: var(--text-main);
    font-weight: 500;
    text-align: center;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 2px;
}

/* 分页指示器 */
.pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 15px;
}

.dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: rgba(0,0,0,0.15);
    transition: all 0.3s ease;
    cursor: pointer;
}

.dot.active {
    background-color: var(--text-main);
    width: 16px;
    border-radius: 3px;
}

/* Dock 栏 */
.dock {
    margin: 0 15px 20px 15px;
    padding: 12px 10px 25px 10px; /* 减小上下 padding，降低整体高度 */
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: 30px; /* 稍微减小圆角 */
    display: flex;
    justify-content: space-around;
    align-items: flex-start; /* 顶部对齐 */
    box-shadow: 
        0 10px 20px rgba(0,0,0,0.05),
        inset 0 1px 0 rgba(255,255,255,0.6);
    position: absolute; /* 绝对定位，确保始终在底部 */
    bottom: 0;
    left: 0;
    right: 0;
    min-height: 85px; /* 减小最小高度 */
    z-index: 50;
}

.dock .app-icon {
    position: relative;
}

.dock .app-icon span {
    display: block; /* 显示文字 */
    position: absolute;
    bottom: -20px; /* 将文字定位到图标下方 */
    font-size: 10px;
    color: var(--text-main);
    text-shadow: 0 1px 2px rgba(255,255,255,0.8);
}
.dock .app-icon {
    gap: 0;
}
.dock .icon-glass {
    background: linear-gradient(135deg, rgba(255,255,255,0.8), rgba(255,255,255,0.3));
}

/* ===== PawTalk 爪印图标 ===== */
.paw-svg {
    width: 30px;
    height: 30px;
    color: var(--text-main);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    opacity: 0.75;
}

/* ===== PawTalk 应用界面 ===== */
.pawtalk-app {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #f5f7fa 0%, #e4e9ed 100%);
    z-index: 2000;
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.35s ease;
    border-radius: 30px;
    overflow: hidden;
}

.pawtalk-app.open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

/* 悬浮返回按钮（无顶栏） */
.pt-back-float {
    position: absolute;
    top: 14px;
    left: 14px;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-main);
    cursor: pointer;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: background 0.2s, transform 0.15s;
    z-index: 40;
}

.pt-back-float:active {
    transform: scale(0.92);
}

/* 悬浮操作按钮组（仅联系人页显示） */
.pt-actions-float {
    position: absolute;
    top: 14px;
    right: 14px;
    display: flex;
    gap: 8px;
    align-items: center;
    z-index: 40;
}

.pt-action-btn {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-main);
    cursor: pointer;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: background 0.2s, transform 0.15s;
}

.pt-action-btn:active {
    transform: scale(0.92);
}

/* 当不是联系人页时隐藏右上角操作按钮 */
.pt-actions-float.hidden {
    display: none;
}

/* 顶栏颜文字 */
.pt-topbar-deco {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: var(--text-sub);
    pointer-events: none;
    z-index: 30;
    background: linear-gradient(to bottom, rgba(245, 247, 250, 0.9) 0%, rgba(245, 247, 250, 0) 100%);
}

/* 内容区 */
.pt-content {
    flex: 1;
    position: relative;
    overflow: hidden;
}

.pt-view {
    position: absolute;
    inset: 0;
    overflow-y: auto;
    padding: 60px 12px 12px; /* 增加顶部 padding，避免被悬浮按钮和颜文字遮挡 */
    display: none;
}

.pt-view::-webkit-scrollbar {
    display: none;
}

.pt-view.active {
    display: block;
}

/* 空状态 */
.pt-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-height: 60vh;
    color: var(--text-sub);
    font-size: 14px;
    letter-spacing: 1px;
}

.pt-view {
    display: none;
    flex-direction: column;
}

.pt-view.active {
    display: flex;
}

/* 好友列表框架 */
.pt-friend-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

/* 个人页 (账号管理) */
.pt-profile-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px 20px;
    background: rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 24px;
    margin: 10px 20px 20px;
    box-shadow: 6px 6px 16px var(--shadow-dark), -6px -6px 16px var(--shadow-light);
    gap: 16px;
}

.pt-avatar-large {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-water), var(--accent-coffee));
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.8), 0 4px 12px rgba(0,0,0,0.1);
    flex-shrink: 0;
}

.pt-profile-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 100%;
}

.pt-profile-name {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-main);
}

.pt-profile-id {
    font-size: 12px;
    color: var(--text-sub);
    font-family: monospace;
    background: rgba(255, 255, 255, 0.5);
    padding: 2px 8px;
    border-radius: 10px;
}

.pt-profile-sign {
    font-size: 13px;
    color: var(--text-sub);
    text-align: center;
    max-width: 90%;
    word-break: break-word;
    margin-top: 4px;
    line-height: 1.4;
}

.pt-switch-account-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    border-radius: 20px;
    border: none;
    background: rgba(255, 255, 255, 0.8);
    color: var(--text-main);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 2px 2px 8px rgba(0,0,0,0.05);
    transition: transform 0.15s, background 0.2s;
    margin-top: 5px;
}

.pt-switch-account-btn:active {
    transform: scale(0.96);
    background: rgba(255, 255, 255, 0.6);
}

/* 账号列表面板 */
.pt-account-list-panel {
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.pt-account-list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-main);
    padding: 0 4px;
}

.pt-add-account-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border-radius: 12px;
    border: none;
    background: linear-gradient(135deg, rgba(166, 145, 133, 0.8), rgba(156, 195, 213, 0.8));
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
    transition: transform 0.15s;
}

.pt-add-account-btn:active {
    transform: scale(0.95);
}

.pt-mask-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pt-mask-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 20px;
    box-shadow: 4px 4px 12px var(--shadow-dark), -4px -4px 12px var(--shadow-light);
    cursor: pointer;
    transition: transform 0.15s, background 0.2s, border-color 0.2s;
}

.pt-mask-item.active-account {
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(156, 195, 213, 0.8);
    box-shadow: 0 0 0 2px rgba(156, 195, 213, 0.3), 4px 4px 12px var(--shadow-dark);
}

.pt-mask-item:hover {
    background: rgba(255, 255, 255, 0.8);
}

.pt-mask-item:active {
    transform: scale(0.98);
}

.pt-mask-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-water), var(--accent-coffee));
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}

.pt-mask-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow: hidden;
}

.pt-mask-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pt-mask-desc {
    font-size: 12px;
    color: var(--text-sub);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pt-mask-actions {
    display: flex;
    gap: 8px;
}

.pt-mask-edit,
.pt-mask-delete {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-sub);
    cursor: pointer;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.8);
    transition: all 0.2s;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.pt-mask-edit:hover {
    color: var(--text-main);
    background: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

.pt-mask-delete:hover {
    color: #e74c3c;
    background: #fff;
    border-color: rgba(231, 76, 60, 0.2);
    box-shadow: 0 2px 6px rgba(231, 76, 60, 0.1);
}

/* 面具编辑器 */
.pt-mask-editor {
    position: absolute;
    inset: 0;
    background: rgba(40, 44, 48, 0.4);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 60;
    display: flex;
    align-items: flex-end;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.pt-mask-editor.open {
    opacity: 1;
    pointer-events: auto;
}

  .pt-mask-editor-panel {
      width: 100%;
      height: 92%;
      background: rgba(250, 250, 250, 0.95);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border-radius: 32px 32px 0 0;
      display: flex;
      flex-direction: column;
      transform: translateY(100%);
      transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
      box-shadow: 0 -12px 48px rgba(0, 0, 0, 0.12);
      border-top: 1px solid rgba(255, 255, 255, 0.8);
  }

.pt-mask-editor.open .pt-mask-editor-panel {
    transform: translateY(0);
}

  .pt-mask-editor-header {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px 24px 16px;
      font-size: 20px;
      font-weight: 800;
      color: #333;
      flex-shrink: 0;
      position: relative;
  }

  .pt-mask-editor-close {
      position: absolute;
      right: 20px;
      top: 50%;
      transform: translateY(-50%);
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #888;
      cursor: pointer;
      border-radius: 50%;
      background: rgba(0, 0, 0, 0.04);
      transition: all 0.2s;
  }

  .pt-mask-editor-close:hover {
      background: rgba(0, 0, 0, 0.08);
      color: #333;
  }

  .pt-mask-editor-close:active {
      background: rgba(0, 0, 0, 0.12);
      transform: translateY(-50%) scale(0.95);
  }

  .pt-mask-editor-body {
      flex: 1;
      overflow-y: auto;
      padding: 10px 28px 30px;
      display: flex;
      flex-direction: column;
      gap: 24px;
  }

.pt-mask-editor-body::-webkit-scrollbar {
    display: none;
}

.pt-mask-avatar-field {
    display: flex;
    justify-content: center;
    padding: 10px 0;
}

  .pt-mask-avatar-upload {
      width: 110px;
      height: 110px;
      border-radius: 50%;
      background: #f0f2f5;
      border: 2px dashed #cfd4db;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      background-size: cover;
      background-position: center;
      overflow: hidden;
      box-shadow: 0 4px 12px rgba(0,0,0,0.06);
      transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  .pt-mask-avatar-upload:hover {
      border-color: #a0b4c8;
      transform: scale(1.02);
      box-shadow: 0 6px 16px rgba(0,0,0,0.1);
  }
  
  .pt-mask-avatar-upload:active {
      transform: scale(0.96);
  }

  .pt-mask-avatar-hint {
      font-size: 13px;
      color: #88929e;
      text-align: center;
      font-weight: 600;
      letter-spacing: 0.5px;
  }

  .pt-mask-editor-footer {
      display: flex;
      gap: 16px;
      padding: 16px 28px 32px;
      flex-shrink: 0;
      background: rgba(250, 250, 250, 0.85);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-top: 1px solid rgba(0,0,0,0.04);
  }

  /* 输入框样式重构 */
  .pt-mask-field {
      display: flex;
      flex-direction: column;
      gap: 10px;
  }

  .pt-mask-field label {
      font-size: 14px;
      color: #555;
      font-weight: 700;
      margin-left: 4px;
      letter-spacing: 0.5px;
  }

  .pt-mask-field input[type="text"],
  .pt-mask-field textarea {
      width: 100%;
      border: 1px solid #e0e4e8;
      background: #ffffff;
      color: #333;
      border-radius: 20px;
      padding: 16px 20px;
      outline: none;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
      font-size: 15px;
      font-family: inherit;
      transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  .pt-mask-field textarea {
      resize: vertical;
      min-height: 120px;
      line-height: 1.6;
      border-radius: 24px;
  }

  .pt-mask-field input:focus,
  .pt-mask-field textarea:focus {
      border-color: #9cbcd5;
      background: #fff;
      box-shadow: 0 4px 16px rgba(156, 195, 213, 0.15), 0 0 0 3px rgba(156, 195, 213, 0.1);
      transform: translateY(-1px);
  }
  
  .pt-mask-field-note {
      font-size: 12px;
      color: #88929e;
      margin-left: 8px;
      margin-top: -2px;
  }

  /* 按钮样式重构 */
  .pt-mask-btn {
      flex: 1;
      height: 52px;
      border-radius: 26px;
      cursor: pointer;
      font-weight: 800;
      font-size: 16px;
      border: none;
      letter-spacing: 0.5px;
      transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
      display: flex;
      align-items: center;
      justify-content: center;
  }

  .pt-mask-btn-cancel {
      background: #f0f2f5;
      color: #555;
      box-shadow: 0 2px 6px rgba(0,0,0,0.04);
  }
  
  .pt-mask-btn-cancel:hover {
      background: #e4e7eb;
      color: #333;
  }

  .pt-mask-btn-save {
      color: #fff;
      background: linear-gradient(135deg, #a69185, #9cbcd5);
      box-shadow: 0 8px 20px rgba(156, 195, 213, 0.3);
  }
  
  .pt-mask-btn-save:hover {
      box-shadow: 0 10px 24px rgba(156, 195, 213, 0.4);
      transform: translateY(-2px);
  }

  .pt-mask-btn:active {
      transform: scale(0.96) !important;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
  }

/* 底栏Tabbar */
.pt-tabbar {
    display: flex;
    height: 64px;
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(255, 255, 255, 0.6);
    flex-shrink: 0;
    padding-bottom: 6px;
}

.pt-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: var(--text-sub);
    cursor: pointer;
    transition: color 0.2s, transform 0.15s;
}

.pt-tab span {
    font-size: 10px;
}

.pt-tab.active {
    color: var(--text-main);
}

.pt-tab:active {
    transform: scale(0.9);
}

/* ===== 设置应用界面 ===== */
.settings-app {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #f5f7fa 0%, #e4e9ed 100%);
    z-index: 2100;
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.35s ease;
    border-radius: 30px;
    overflow: hidden;
}

.settings-app.open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.set-topbar {
    display: flex;
    align-items: center;
    height: 54px;
    padding: 0 14px;
    background: rgba(255, 255, 255, 0.52);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.6);
    flex-shrink: 0;
}

.set-back {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-main);
    cursor: pointer;
    border-radius: 50%;
    transition: background 0.2s;
    flex-shrink: 0;
}

.set-back:active {
    background: rgba(0, 0, 0, 0.05);
}

.set-title {
    flex: 1;
    text-align: center;
    font-size: 17px;
    font-weight: 600;
    color: var(--text-main);
}

.set-placeholder {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
}

.set-content {
    flex: 1;
    overflow-y: auto;
    padding: 16px 14px 20px;
}

.set-content::-webkit-scrollbar {
    display: none;
}

.set-section-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-sub);
    margin: 4px 2px 10px;
    letter-spacing: 0.5px;
}

.set-card {
    background: rgba(255, 255, 255, 0.46);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 22px;
    box-shadow: 6px 6px 16px var(--shadow-dark), -6px -6px 16px var(--shadow-light);
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 14px;
}

.set-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.set-field label {
    font-size: 12px;
    color: var(--text-sub);
    font-weight: 600;
}

.set-field input[type="text"],
.set-field input[type="password"],
.set-field select {
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.72);
    color: var(--text-main);
    border-radius: 14px;
    padding: 12px 14px;
    outline: none;
    box-shadow: inset 2px 2px 4px rgba(0,0,0,0.04);
}

.set-field input:focus,
.set-field select:focus {
    border-color: rgba(156, 195, 213, 0.65);
    box-shadow: 0 0 0 3px rgba(156, 195, 213, 0.16);
}

.set-inline-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.set-inline-row > *:first-child {
    flex: 1;
}

.set-key-wrap {
    display: flex;
    gap: 8px;
    align-items: center;
}

.set-key-wrap input {
    flex: 1;
}

.set-key-toggle,
.set-secondary-btn {
    height: 42px;
    padding: 0 12px;
    border: 1px solid rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.7);
    color: var(--text-main);
    border-radius: 12px;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
}

.set-secondary-btn {
    min-width: 68px;
    font-size: 12px;
    font-weight: 600;
}

.set-fetch-btn,
.set-save-btn {
    width: 100%;
    height: 44px;
    border: none;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 700;
    cursor: pointer;
    color: #fff;
    background: linear-gradient(135deg, rgba(166, 145, 133, 0.95), rgba(156, 195, 213, 0.95));
    box-shadow: 0 10px 18px rgba(0, 0, 0, 0.08);
}

.set-fetch-btn:active,
.set-save-btn:active,
.set-key-toggle:active,
.set-secondary-btn:active {
    transform: scale(0.98);
}

.set-fetch-btn[disabled] {
    opacity: 0.6;
    cursor: wait;
}

.set-hint {
    min-height: 18px;
    font-size: 12px;
    color: var(--text-sub);
    padding: 0 2px;
}

.set-hint-compact {
    min-height: 0;
    margin-top: -6px;
}

.set-field-tight {
    margin-top: -2px;
}

.set-action-row {
    display: flex;
    gap: 10px;
    align-items: center;
}

.set-action-row .set-action-btn {
    flex: 1;
    width: auto;
    height: 44px;
    min-width: 0;
}

.set-action-row .set-secondary-btn.set-action-btn {
    background: rgba(255, 255, 255, 0.7);
    color: var(--text-main);
    border: 1px solid rgba(255, 255, 255, 0.8);
    font-size: 14px;
    border-radius: 14px;
}

.set-temp-value {
    color: var(--text-main);
    font-weight: 700;
}

/* 修复 range input 样式 */
.set-field input[type="range"],
.pt-cs-subfield input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    background: rgba(0, 0, 0, 0.1);
    height: 6px;
    border-radius: 3px;
    outline: none;
    padding: 0;
    border: none;
    box-shadow: none;
}

.set-field input[type="range"]::-webkit-slider-thumb,
.pt-cs-subfield input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #a69185;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    border: none;
}

.set-field input[type="range"] {
    width: 100%;
    margin: 10px 0;
}

.pt-cs-subfield input[type="range"] {
    width: 120px;
}

.set-temp-scale {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--text-sub);
}

/* Modern Toggle Switch */
.pt-cs-subfield input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    width: 42px;
    height: 24px;
    background: rgba(0, 0, 0, 0.15);
    border-radius: 12px;
    position: relative;
    cursor: pointer;
    outline: none;
    transition: background 0.3s ease;
    flex-shrink: 0;
    margin: 0;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
}

.pt-cs-subfield input[type="checkbox"]::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.pt-cs-subfield input[type="checkbox"]:checked {
    background: #a69185; /* 咖色 */
}

.pt-cs-subfield input[type="checkbox"]:checked::after {
    transform: translateX(18px);
}

.pt-cs-subfield input[type="checkbox"]:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Translation UI */
.pt-translation-container {
    margin-top: 6px;
    margin-bottom: 2px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.pt-translation-btn {
    font-size: 11px;
    color: var(--text-sub);
    padding: 6px 10px;
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 500;
}

.pt-translation-btn:active {
    background: rgba(0, 0, 0, 0.08);
}

.pt-translation-content {
    font-size: 13px;
    color: var(--text-main);
    padding: 0 10px 10px 10px;
    display: none;
    border-top: 1px dashed rgba(0, 0, 0, 0.08);
    margin-top: 2px;
    padding-top: 8px;
}

.pt-translation-container.expanded .pt-translation-content {
    display: block;
}

.pt-msg-row.user {
    flex-direction: row-reverse;
}

.set-saved-toast {
    margin-top: 10px;
    text-align: center;
    font-size: 12px;
    color: #6b6b6f;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.2s, transform 0.2s;
}

.set-saved-toast.show {
    opacity: 1;
    transform: translateY(0);
}

/* ===== 通讯录应用界面（创建角色卡）===== */
.contacts-app {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #f5f7fa 0%, #e4e9ed 100%);
    z-index: 2050;
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.35s ease;
    border-radius: 30px;
    overflow: hidden;
}

.contacts-app.open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.ct-back-float {
    position: absolute;
    top: 14px;
    left: 14px;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-main);
    cursor: pointer;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: background 0.2s, transform 0.15s;
    z-index: 40;
}

.ct-back-float:active {
    transform: scale(0.92);
}

.ct-actions-float {
    position: absolute;
    top: 14px;
    right: 14px;
    display: flex;
    gap: 8px;
    align-items: center;
    z-index: 40;
}

.ct-action-btn {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-main);
    cursor: pointer;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: background 0.2s, transform 0.15s;
}

.ct-action-btn:active {
    transform: scale(0.92);
}

.ct-content {
    flex: 1;
    overflow-y: auto;
    padding: 64px 14px 20px;
}

.ct-content::-webkit-scrollbar {
    display: none;
}

.ct-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 70%;
    color: var(--text-sub);
    font-size: 14px;
    letter-spacing: 1px;
    text-align: center;
    padding: 0 30px;
}

/* 角色卡列表：网格视图 */
.ct-char-list.grid-view {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

.ct-char-list.grid-view .ct-empty {
    grid-column: 1 / -1;
}

.ct-char-list.grid-view .ct-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 16px 12px;
    background: rgba(255, 255, 255, 0.46);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 20px;
    box-shadow: 4px 4px 12px var(--shadow-dark), -4px -4px 12px var(--shadow-light);
    cursor: pointer;
    transition: transform 0.15s;
}

.ct-char-list.grid-view .ct-card .ct-card-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
}

.ct-char-list.grid-view .ct-card .ct-card-desc {
    display: none;
}

/* 角色卡列表：列表视图 */
.ct-char-list.list-view {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ct-char-list.list-view .ct-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.46);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 18px;
    box-shadow: 4px 4px 12px var(--shadow-dark), -4px -4px 12px var(--shadow-light);
    cursor: pointer;
    transition: transform 0.15s;
}

.ct-char-list.list-view .ct-card .ct-card-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    flex-shrink: 0;
}

.ct-char-list.list-view .ct-card .ct-card-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    overflow: hidden;
}

.ct-card:active {
    transform: scale(0.97);
}

.ct-card-avatar {
    background: linear-gradient(135deg, var(--accent-water), var(--accent-coffee));
    background-size: cover;
    background-position: center;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}

.ct-card-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.ct-card-desc {
    font-size: 12px;
    color: var(--text-sub);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

/* 角色卡编辑器 */
.ct-editor {
    position: absolute;
    inset: 0;
    background: rgba(40, 44, 48, 0.35);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 60;
    display: flex;
    align-items: flex-end;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.ct-editor.open {
    opacity: 1;
    pointer-events: auto;
}

.ct-editor-panel {
    width: 100%;
    max-height: 90%;
    background: linear-gradient(135deg, #f7f9fb 0%, #e9eef1 100%);
    border-radius: 26px 26px 30px 30px;
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1);
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.12);
}

.ct-editor.open .ct-editor-panel {
    transform: translateY(0);
}

.ct-editor-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px 10px;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-main);
    flex-shrink: 0;
}

.ct-editor-close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-sub);
    cursor: pointer;
    border-radius: 50%;
    transition: background 0.2s;
}

.ct-editor-close:active {
    background: rgba(0, 0, 0, 0.05);
}

.ct-editor-body {
    flex: 1;
    overflow-y: auto;
    padding: 6px 18px 14px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ct-editor-body::-webkit-scrollbar {
    display: none;
}

.ct-avatar-field {
    display: flex;
    justify-content: center;
    padding: 6px 0;
}

.ct-avatar-upload {
    width: 86px;
    height: 86px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.6);
    border: 1px dashed rgba(142, 142, 147, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    box-shadow: 4px 4px 10px var(--shadow-dark), -4px -4px 10px var(--shadow-light);
}

.ct-avatar-hint {
    font-size: 11px;
    color: var(--text-sub);
    text-align: center;
}

.ct-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ct-field label {
    font-size: 12px;
    color: var(--text-sub);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ct-badge {
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, rgba(166, 145, 133, 0.95), rgba(156, 195, 213, 0.95));
    padding: 2px 8px;
    border-radius: 8px;
    letter-spacing: 0.5px;
}

.ct-field input[type="text"],
.ct-field select,
.ct-field textarea {
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.72);
    color: var(--text-main);
    border-radius: 14px;
    padding: 12px 14px;
    outline: none;
    box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.04);
    font-size: 14px;
    font-family: inherit;
}

.ct-field textarea {
    resize: vertical;
    min-height: 90px;
    line-height: 1.5;
}

.ct-field input:focus,
.ct-field select:focus,
.ct-field textarea:focus {
    border-color: rgba(156, 195, 213, 0.65);
    box-shadow: 0 0 0 3px rgba(156, 195, 213, 0.16);
}

.ct-field-note {
    font-size: 11px;
    color: var(--text-sub);
    line-height: 1.4;
    padding: 0 2px;
}

.ct-editor-footer {
    display: flex;
    gap: 10px;
    padding: 12px 18px 22px;
    flex-shrink: 0;
}

.ct-cancel-btn,
.ct-save-btn {
    flex: 1;
    height: 46px;
    border-radius: 14px;
    cursor: pointer;
    font-weight: 700;
    font-size: 14px;
    border: none;
}

.ct-cancel-btn {
    background: rgba(255, 255, 255, 0.7);
    color: var(--text-main);
    border: 1px solid rgba(255, 255, 255, 0.8);
}

.ct-save-btn {
    color: #fff;
    background: linear-gradient(135deg, rgba(166, 145, 133, 0.95), rgba(156, 195, 213, 0.95));
    box-shadow: 0 10px 18px rgba(0, 0, 0, 0.08);
}

.ct-cancel-btn:active,
.ct-save-btn:active {
    transform: scale(0.98);
}

/* ===== 开场白多条编辑区 ===== */
.ct-greeting-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ct-greeting-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.7);
    box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.03);
}

.ct-greeting-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ct-greeting-index {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-main);
}

.ct-greeting-remove {
    border: 1px solid rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.7);
    color: #c0392b;
    border-radius: 10px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.ct-greeting-remove:disabled {
    color: var(--text-sub);
    opacity: 0.5;
    cursor: not-allowed;
}

.ct-greeting-item textarea {
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.72);
    color: var(--text-main);
    border-radius: 12px;
    padding: 10px 12px;
    outline: none;
    font-size: 13px;
    font-family: inherit;
    line-height: 1.5;
    resize: vertical;
    min-height: 70px;
}

.ct-greeting-item textarea:focus {
    border-color: rgba(156, 195, 213, 0.65);
    box-shadow: 0 0 0 3px rgba(156, 195, 213, 0.16);
}

.ct-add-greeting {
    align-self: flex-start;
    border: 1px dashed rgba(142, 142, 147, 0.5);
    background: rgba(255, 255, 255, 0.55);
    color: var(--text-main);
    border-radius: 12px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.ct-add-greeting:active {
    transform: scale(0.97);
}

/* ===== PawTalk 好友列表卡片 ===== */
.pt-friend-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.46);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 18px;
    box-shadow: 4px 4px 12px var(--shadow-dark), -4px -4px 12px var(--shadow-light);
    cursor: pointer;
    transition: transform 0.15s;
}

.pt-friend-card:active {
    transform: scale(0.98);
}

.pt-friend-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--accent-water), var(--accent-coffee));
    background-size: cover;
    background-position: center;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}

.pt-friend-meta {
    display: flex;
    flex-direction: column;
    gap: 3px;
    overflow: hidden;
    flex: 1;
}

.pt-friend-name {
    align-self: flex-start;
    border: none;
    background: transparent;
    padding: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-main);
    cursor: pointer;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pt-friend-sub {
    font-size: 12px;
    color: var(--text-sub);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* ===== 消息操作菜单 ===== */
.pt-msg-menu {
    position: absolute;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    padding: 10px;
    display: none;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    z-index: 1000;
    width: 260px;
    transform-origin: top center;
    animation: menuPop 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes menuPop {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

.pt-msg-menu.show {
    display: grid;
}

.pt-msg-menu-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 0;
    font-size: 13px;
    color: var(--text-main);
    cursor: pointer;
    border-radius: 10px;
    transition: background 0.2s;
    background: rgba(0, 0, 0, 0.02);
}

.pt-msg-menu-item:hover {
    background: rgba(0, 0, 0, 0.06);
}

.pt-msg-menu-item[data-action="delete"],
.pt-msg-menu-item[data-action="recall"] {
    color: #e74c3c;
}

/* ===== 撤回详情弹窗 ===== */
.pt-recall-modal {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1100;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s;
}

.pt-recall-modal.show {
    display: flex;
    opacity: 1;
}

.pt-recall-modal-content {
    background: #fff;
    width: 80%;
    max-width: 300px;
    border-radius: 16px;
    overflow: hidden;
    transform: translateY(20px);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.pt-recall-modal.show .pt-recall-modal-content {
    transform: translateY(0);
}

.pt-recall-modal-header {
    padding: 16px;
    font-weight: 600;
    font-size: 16px;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pt-recall-modal-close {
    background: none;
    border: none;
    font-size: 20px;
    color: var(--text-sub);
    cursor: pointer;
}

.pt-recall-modal-body {
    padding: 16px;
    font-size: 14px;
    color: var(--text-main);
    max-height: 60vh;
    overflow-y: auto;
}

.pt-recall-label {
    font-weight: 600;
    margin-bottom: 4px;
    color: var(--text-sub);
    font-size: 12px;
}

.pt-recall-text {
    background: rgba(0,0,0,0.03);
    padding: 10px;
    border-radius: 8px;
    margin-bottom: 12px;
    word-break: break-word;
    white-space: pre-wrap;
}

/* 回复消息样式 */
.pt-msg-reply-ref {
    font-size: 12px;
    color: var(--text-sub);
    background: rgba(0,0,0,0.05);
    padding: 4px 8px;
    border-radius: 4px;
    margin-bottom: 4px;
    border-left: 2px solid var(--text-sub);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* ===== 聊天设置弹窗 ===== */
.pt-chat-settings-modal {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.4);
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.pt-chat-settings-modal.show {
    display: flex;
    opacity: 1;
}
.pt-chat-settings-panel {
    width: 90%;
    max-height: 85%;
    background: #fff;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    transform: translateY(20px);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.pt-chat-settings-modal.show .pt-chat-settings-panel {
    transform: translateY(0);
}
.pt-chat-settings-header {
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eee;
    font-weight: 600;
    font-size: 16px;
}
.pt-chat-settings-close {
    background: none;
    border: none;
    font-size: 24px;
    color: #999;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}
.pt-chat-settings-tabs {
    display: flex;
    border-bottom: 1px solid #eee;
    background: #fafafa;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    flex-shrink: 0;
}
.pt-chat-settings-tabs::-webkit-scrollbar {
    display: none;
}
.pt-cs-tab {
    padding: 12px 15px;
    font-size: 14px;
    color: #666;
    cursor: pointer;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
}
.pt-cs-tab.active {
    color: #007aff;
    border-bottom-color: #007aff;
    font-weight: 500;
}
.pt-chat-settings-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.pt-chat-settings-body::-webkit-scrollbar {
    display: none;
}
.pt-cs-view {
    display: none;
}
.pt-cs-view.active {
    display: block;
}
.pt-cs-field {
    margin-bottom: 20px;
}
.pt-cs-field > label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #333;
    margin-bottom: 8px;
}
.pt-cs-field select,
.pt-cs-field input[type="text"],
.pt-cs-field input[type="number"],
.pt-cs-field textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
    box-sizing: border-box;
    background: #fafafa;
}
.pt-cs-field textarea {
    height: 80px;
    resize: vertical;
}
.pt-cs-subfield {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 13px;
    color: #555;
}
.pt-cs-subfield input[type="range"] {
    width: 120px;
}
.pt-cs-subfield input[type="color"] {
    width: 40px;
    height: 30px;
    padding: 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
.pt-cs-subfield input[type="number"] {
    width: 60px;
    padding: 5px;
}
.pt-cs-bg-upload {
    width: 100%;
    height: 100px;
    border: 2px dashed #ddd;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background-size: cover;
    background-position: center;
    color: #999;
    font-size: 14px;
}
.pt-cs-btn-small {
    padding: 6px 12px;
    font-size: 12px;
    border-radius: 6px;
    border: 1px solid #ddd;
    background: #fff;
    cursor: pointer;
}
.pt-chat-settings-footer {
    padding: 15px 20px;
    border-top: 1px solid #eee;
}
.pt-cs-btn-save {
    width: 100%;
    padding: 12px;
    background: #007aff;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
}

/* 桌宠容器 */
.pt-pet-container {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
    z-index: 900;
    overflow: hidden;
}
.pt-pet {
    position: absolute;
    width: 60px;
    height: 60px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: auto;
    cursor: grab;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.2));
    transition: transform 0.1s;
}
.pt-pet:active {
    cursor: grabbing;
    transform: scale(1.1);
}

/* ===== PawTalk 聊天层 ===== */
.pt-chat-shell {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #f5f7fa 0%, #e4e9ed 100%);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: 30;
}

.pt-chat-shell.open {
    transform: translateX(0);
}

.pt-chat-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.6);
    padding-top: 40px; /* 留出状态栏空间 */
    z-index: 50;
}

.pt-chat-back {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-main);
    cursor: pointer;
    border-radius: 50%;
    transition: background 0.2s;
}

.pt-chat-back:active {
    background: rgba(0, 0, 0, 0.05);
}

.pt-chat-title {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pt-chat-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-water), var(--accent-coffee));
    background-size: cover;
    background-position: center;
}

.pt-chat-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-main);
}

.pt-chat-settings {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-main);
    cursor: pointer;
    border-radius: 50%;
    transition: background 0.2s;
}

.pt-chat-settings:active {
    background: rgba(0, 0, 0, 0.05);
}

.pt-chat-body {
    flex: 1;
    overflow-y: auto;
    padding: 90px 14px 80px; /* 顶部留出 header 空间，底部留出 bottom 空间 */
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pt-chat-body::-webkit-scrollbar {
    display: none;
}

.pt-chat-empty {
    margin: auto;
    color: var(--text-sub);
    font-size: 13px;
    text-align: center;
    padding: 0 30px;
    line-height: 1.6;
}

.pt-msg-row {
    display: flex;
    width: 100%;
}

.pt-msg-row.user {
    justify-content: flex-start;
    flex-direction: row-reverse;
}

.pt-msg-row.char {
    justify-content: flex-start;
}

.pt-msg-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: #ddd;
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
    align-self: flex-end;
}

.pt-msg-row.user .pt-msg-avatar {
    margin-left: 10px;
}

.pt-msg-row.char .pt-msg-avatar {
    margin-right: 10px;
}

.pt-msg-row.system {
    justify-content: center;
    margin: 4px 0;
}

.pt-msg-system-text {
    font-size: 12px;
    color: var(--text-sub);
    text-align: center;
    padding: 2px 12px;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    line-height: 1.4;
}

.pt-msg-system-text.recalled {
    cursor: pointer;
}

.pt-msg-system-text.recalled:active {
    opacity: 0.7;
}

.pt-msg-bubble {
    max-width: 72%;
    padding: 10px 14px;
    border-radius: 16px;
    font-size: 14px;
    line-height: 1.5;
    word-break: break-word;
    white-space: pre-wrap;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.05);
}

.pt-msg-bubble.char {
    background: rgba(255, 255, 255, 0.85); /* 保持白色或淡灰色 */
    color: var(--text-main);
    border-bottom-left-radius: 4px;
}

.pt-msg-bubble.user {
    background: rgba(166, 145, 133, 0.85); /* 咖色 */
    color: #fff;
    border-bottom-right-radius: 4px;
}

/* 聊天输入区 */
.pt-chat-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 24px 24px 0 0;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.05);
    transform: translateY(calc(100% - 70px)); /* 默认只露出输入框部分 */
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: 40;
    display: flex;
    flex-direction: column;
}

.pt-chat-bottom.expanded {
    transform: translateY(0);
}

.pt-chat-input-wrapper {
    padding: 8px 14px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: grab; /* 提示可拖拽 */
}

.pt-chat-input-wrapper:active {
    cursor: grabbing;
}

.pt-chat-drag-handle {
    width: 36px;
    height: 4px;
    background: rgba(0, 0, 0, 0.15);
    border-radius: 2px;
    margin-bottom: 10px;
}

.pt-chat-input-row {
    display: flex;
    width: 100%;
    gap: 10px;
    align-items: flex-end;
}

.pt-chat-input {
    flex: 1;
    border: 1px solid rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.8);
    color: var(--text-main);
    border-radius: 20px;
    padding: 10px 14px;
    outline: none;
    font-size: 14px;
    resize: none;
    max-height: 100px;
    line-height: 1.4;
    font-family: inherit;
    box-shadow: inset 2px 2px 5px rgba(0,0,0,0.02);
}

.pt-chat-input:focus {
    border-color: rgba(156, 195, 213, 0.65);
}

.pt-chat-actions {
    display: flex;
    gap: 8px;
    padding-bottom: 2px;
}

.pt-chat-btn {
    width: 36px;
    height: 36px;
    border: none;
    background: transparent !important;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.15s;
    padding: 0;
}

.pt-chat-btn:active {
    transform: scale(0.92);
}

.voice-btn {
    color: var(--text-main);
}

.ai-btn {
    color: var(--text-main);
}

.pt-chat-btn svg {
    width: 24px;
    height: 24px;
}

.pt-chat-toolbar {
    padding: 10px 0 30px;
    height: 220px;
    overflow: hidden;
}

.pt-toolbar-scroll-container {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 20px;
}

.pt-toolbar-scroll-container::-webkit-scrollbar {
    display: none;
}

.pt-toolbar-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px 10px;
    padding-bottom: 20px;
}

.pt-toolbar-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.pt-toolbar-icon {
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-main);
    box-shadow: 2px 2px 10px rgba(0,0,0,0.05);
    transition: transform 0.15s;
}

.pt-toolbar-dot {
    width: 6px;
    height: 6px;
    background-color: var(--text-sub);
    border-radius: 50%;
    opacity: 0.5;
}

.pt-toolbar-item:active .pt-toolbar-icon {
    transform: scale(0.92);
}

.pt-toolbar-item span {
    font-size: 11px;
    color: var(--text-sub);
    white-space: nowrap;
}

/* ===== PawTalk 选择器（开场白 / 添加好友）===== */
.pt-picker {
    position: absolute;
    inset: 0;
    background: rgba(40, 44, 48, 0.35);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: flex-end;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 50;
}

.pt-picker.open {
    opacity: 1;
    pointer-events: auto;
}

.pt-picker-panel {
    width: 100%;
    max-height: 75%;
    background: linear-gradient(135deg, #f7f9fb 0%, #e9eef1 100%);
    border-radius: 26px 26px 30px 30px;
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1);
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.12);
    padding-bottom: 16px;
}

.pt-picker.open .pt-picker-panel {
    transform: translateY(0);
}

.pt-picker-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px 8px;
}

.pt-picker-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-main);
}

.pt-picker-close {
    border: none;
    background: transparent;
    font-size: 24px;
    line-height: 1;
    color: var(--text-sub);
    cursor: pointer;
    width: 30px;
    height: 30px;
    border-radius: 50%;
}

.pt-picker-close:active {
    background: rgba(0, 0, 0, 0.05);
}

.pt-picker-hint {
    padding: 0 18px 10px;
    font-size: 12px;
    color: var(--text-sub);
    line-height: 1.4;
}

.pt-picker-list {
    overflow-y: auto;
    padding: 0 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pt-picker-list::-webkit-scrollbar {
    display: none;
}

.pt-picker-item {
    text-align: left;
    border: 1px solid rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.6);
    border-radius: 14px;
    padding: 12px 14px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: transform 0.15s;
}

.pt-picker-item:active {
    transform: scale(0.98);
}

.pt-picker-item-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-main);
}

.pt-picker-item-sub {
    font-size: 12px;
    color: var(--text-sub);
    line-height: 1.4;
}

.pt-picker-empty {
    text-align: center;
    color: var(--text-sub);
    font-size: 13px;
    padding: 30px 0;
}

/* ===== PawTalk 轻提示 ===== */
.pt-toast {
    position: absolute;
    bottom: 90px;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background: rgba(40, 44, 48, 0.85);
    color: #fff;
    font-size: 13px;
    padding: 10px 18px;
    border-radius: 20px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s, transform 0.25s;
    z-index: 80;
    white-space: nowrap;
}

.pt-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}