/* 夏日留言板 v3 - 快速回复功能 */
/* ==================== 快速回复功能 ==================== */

/* 快速回复面板进出场动画 */
@keyframes slideUpIn {
    from {
        opacity: 0;
        transform: translateY(100%);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideUpOut {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(100%);
    }
}

/* 回复按钮：跟点赞按钮对齐视觉重量，透明底 + 细描边 */
.btn-reply {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 16px;
    background: rgba(0, 0, 0, 0.02);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: var(--radius-pill);
    color: var(--text-tertiary);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.reply-btn-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.btn-reply:active {
    transform: scale(0.95);
    background: rgba(100, 181, 246, 0.12);
    border-color: rgba(100, 181, 246, 0.25);
    color: var(--sky-blue);
}

/* 回复按钮点击后跳转前的即时反馈 */
.btn-reply.tapped {
    transform: scale(0.93) !important;
    background: rgba(100, 181, 246, 0.18) !important;
    border-color: rgba(100, 181, 246, 0.35) !important;
    color: var(--sky-blue) !important;
    transition: transform 0.1s ease, background 0.1s ease !important;
}

/* 引用块：胶囊式设计，带转角箭头和渐变左边条。
   配色走 --quote-* 变量，由所在卡片的 data-author 决定（见文件末尾角色配色区），
   兜底值为 MDB 青色，供极少数拿不到作者的场景使用。 */
.message-reply-quote {
    position: relative;
    margin-bottom: 10px;
    padding: 10px 14px 10px 38px;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg,
        var(--quote-bg-1, rgba(77, 208, 225, 0.08)) 0%,
        var(--quote-bg-2, rgba(77, 208, 225, 0.04)) 100%);
    border: 1px solid var(--quote-border, rgba(77, 208, 225, 0.16));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* 左侧渐变装饰条 */
.message-reply-quote::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    border-radius: var(--radius-md) 0 0 var(--radius-md);
    background: linear-gradient(180deg,
        var(--quote-accent, var(--mdb-primary)) 0%,
        var(--quote-accent-dark, var(--mdb-dark)) 100%);
}

/* 转角回复箭头图标 */
.message-reply-quote::after {
    content: '↩';
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: var(--quote-accent, var(--mdb-primary));
    opacity: 0.6;
}

.reply-quote-author {
    font-size: 13px;
    font-weight: 700;
    color: var(--quote-accent-dark, var(--mdb-dark));
    margin-bottom: 4px;
}

.reply-quote-content {
    font-size: 14px;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-style: italic;
    opacity: 0.85;
}

.reply-quote-content::before {
    content: '"';
    opacity: 0.4;
}

.reply-quote-content::after {
    content: '"';
    opacity: 0.4;
}

/* 回复卡内的引用块（深层拍平时出现）：宽度紧张，整体收紧一档 */
.message-card-reply .message-reply-quote {
    margin-bottom: 8px;
    padding: 7px 10px 7px 28px;
}

.message-card-reply .message-reply-quote::before {
    width: 3px;
}

.message-card-reply .message-reply-quote::after {
    left: 10px;
    font-size: 15px;
}

.message-card-reply .reply-quote-author {
    font-size: 12px;
    margin-bottom: 2px;
}

.message-card-reply .reply-quote-content {
    font-size: 13px;
}

/* 快速回复面板：顶部圆角 + 玻璃模糊 */
.quick-reply-input {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--bg-glass);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.14),
                inset 0 1px 0 rgba(255, 255, 255, 0.4);
    z-index: 95;
    animation: slideUpIn 0.3s cubic-bezier(0.32, 0.72, 0, 1);
    padding-bottom: env(safe-area-inset-bottom);
    overflow: hidden;
}

.quick-reply-input.hiding {
    animation: slideUpOut 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}

/* 面板顶部的拖拽指示条 */
.quick-reply-input::before {
    content: '';
    position: absolute;
    top: 7px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: var(--text-tertiary);
    opacity: 0.3;
}

.quick-reply-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 18px 16px 10px;
}

/* 被回复内容做成小卡片，跟输入区分层 */
.reply-preview {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    background: rgba(77, 208, 225, 0.09);
    border-left: 3px solid var(--mdb-primary);
}

.reply-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--mdb-dark);
}

.reply-text {
    font-size: 13px;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.reply-close {
    width: 28px;
    height: 28px;
    border: none;
    background: rgba(0,0,0,0.05);
    border-radius: 50%;
    color: var(--text-tertiary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s;
}

.reply-close svg {
    width: 16px;
    height: 16px;
}

.reply-close:active {
    background: rgba(0,0,0,0.1);
    transform: scale(0.9);
}

.quick-reply-form {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
}

.reply-input {
    flex: 1;
    padding: 10px 16px;
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: var(--radius-pill);
    background: var(--bg-secondary);
    color: var(--text-primary);
    /* 必须 >= 16px：iOS Safari 对小于 16px 的 input 聚焦时会自动放大页面，
       第 1 条放开缩放后这个坑就会发作。视觉差异几乎看不出。（第 2 条） */
    font-size: 16px;
    font-family: inherit;
    outline: none;
    transition: all 0.2s;
}

.reply-input:focus {
    border-color: var(--mdb-primary);
    background: var(--bg-card);
    box-shadow: 0 0 0 3px rgba(77, 208, 225, 0.1);
}

.reply-input::placeholder {
    color: var(--text-tertiary);
}

.reply-input:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.reply-send {
    width: 44px;
    height: 44px;
    border: none;
    background: linear-gradient(135deg, var(--mdb-primary), var(--mdb-dark));
    border-radius: 50%;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s;
    box-shadow: 0 4px 14px rgba(77, 208, 225, 0.4),
                0 0 0 0 rgba(77, 208, 225, 0);
}

.reply-send svg {
    width: 20px;
    height: 20px;
}

.reply-send:active {
    transform: scale(0.92);
    box-shadow: 0 2px 8px rgba(77, 208, 225, 0.3),
                0 0 0 8px rgba(77, 208, 225, 0.15);
}

/* 深夜模式适配 */
html[data-theme="night"] .quick-reply-input {
    background: rgba(19, 35, 56, 0.95);
    box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.5),
                inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

html[data-theme="night"] .reply-preview {
    background: rgba(0, 131, 143, 0.18);
    border-left-color: var(--accent-1);
}

html[data-theme="night"] .reply-input {
    background: var(--bg-secondary);
    border-color: rgba(255, 255, 255, 0.1);
}

html[data-theme="night"] .reply-close {
    background: rgba(255, 255, 255, 0.06);
}

html[data-theme="night"] .message-reply-quote {
    background: linear-gradient(135deg,
        rgba(0, 131, 143, 0.2) 0%,
        rgba(0, 131, 143, 0.12) 100%);
    border-color: rgba(0, 131, 143, 0.25);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

html[data-theme="night"] .message-reply-quote::before {
    background: linear-gradient(180deg,
        var(--accent-1) 0%,
        var(--accent-3) 100%);
}

html[data-theme="night"] .btn-reply {
    background: rgba(100, 181, 246, 0.08);
    border-color: rgba(100, 181, 246, 0.15);
}

html[data-theme="night"] .btn-reply:active {
    background: rgba(100, 181, 246, 0.16);
    border-color: rgba(100, 181, 246, 0.28);
}

/* ==================== 引用块角色配色 ====================
   注意取色维度：引用块属于「消息展示」，必须跟随卡片作者 data-author，
   不能用 body[data-identity]（当前登录者）——否则 FJD 登录时连 MDB 发的
   引用块也会变橙，颜色随观看者而变，失去区分作者的意义。 */
.message-card[data-author="MDB"] {
    --quote-bg-1: rgba(77, 208, 225, 0.08);
    --quote-bg-2: rgba(77, 208, 225, 0.04);
    --quote-border: rgba(77, 208, 225, 0.16);
    --quote-accent: var(--mdb-primary);
    --quote-accent-dark: var(--mdb-dark);
}

.message-card[data-author="FJD"] {
    --quote-bg-1: rgba(255, 138, 101, 0.1);
    --quote-bg-2: rgba(255, 138, 101, 0.05);
    --quote-border: rgba(255, 138, 101, 0.2);
    --quote-accent: var(--fjd-primary);
    --quote-accent-dark: var(--fjd-dark);
}

html[data-theme="night"] .message-card[data-author="MDB"] {
    --quote-bg-1: rgba(0, 131, 143, 0.18);
    --quote-bg-2: rgba(0, 131, 143, 0.12);
    --quote-border: rgba(77, 208, 225, 0.22);
}

html[data-theme="night"] .message-card[data-author="FJD"] {
    --quote-bg-1: rgba(230, 74, 25, 0.18);
    --quote-bg-2: rgba(230, 74, 25, 0.12);
    --quote-border: rgba(255, 138, 101, 0.22);
}

/* ==================== FJD 输入态配色覆盖 ====================
   以下都是「当前用户正在操作」的控件（快捷回复面板、发送按钮、回复按钮按下态），
   跟随登录者身份 data-identity 才是对的，保持不变。 */
body[data-identity="FJD"] .reply-preview {
    background: rgba(255, 138, 101, 0.09);
    border-left-color: var(--fjd-primary);
}

body[data-identity="FJD"] .reply-icon {
    color: var(--fjd-dark);
}

body[data-identity="FJD"] .reply-input:focus {
    border-color: var(--fjd-primary);
    box-shadow: 0 0 0 3px rgba(255, 138, 101, 0.12);
}

body[data-identity="FJD"] .reply-send {
    background: linear-gradient(135deg, var(--fjd-primary), var(--fjd-dark));
    box-shadow: 0 4px 14px rgba(255, 138, 101, 0.4),
                0 0 0 0 rgba(255, 138, 101, 0);
}

body[data-identity="FJD"] .reply-send:active {
    box-shadow: 0 2px 8px rgba(255, 138, 101, 0.3),
                0 0 0 8px rgba(255, 138, 101, 0.15);
}

body[data-identity="FJD"] .btn-reply:active {
    background: rgba(255, 138, 101, 0.12);
    border-color: rgba(255, 138, 101, 0.25);
    color: var(--fjd-dark);
}

html[data-theme="night"] body[data-identity="FJD"] .reply-preview {
    background: rgba(230, 74, 25, 0.2);
    border-left-color: var(--fjd-primary);
}

/* 降低动效偏好：关闭快捷回复面板动画 */
@media (prefers-reduced-motion: reduce) {
    .quick-reply-input {
        animation: none;
    }
}

/* 移动端触控优化：确保按钮触控区最小 44px */
@media (pointer: coarse) {
    .btn-reply {
        min-height: 44px;
        padding: 10px 18px;
    }

    /* 回复卡内宽度紧张，横向内距收窄但保留 44px 高度 */
    .message-card-reply .btn-reply {
        padding: 10px 12px;
    }

    .reply-close {
        width: 44px;
        height: 44px;
    }
}