/**
 * 留言板：聊天气泡样式。
 *
 * 布局思路跟常见的聊天软件一致：每条留言是"头像 + (昵称/时间 + 气泡)"，
 * 默认头像在左、气泡靠左；自己发的那条（.is-self）整行 row-reverse，
 * 头像换到右边、气泡靠右并换成强调色，一眼能分出"谁说的"。
 */

.wpnav-guestbook {
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    padding: 8px 0 24px;
    /* flex 容器：手机端要靠 order 把发言框挪到最上面（见文件末尾的媒体查询），
       order 只在 flex/grid 容器的直接子元素上生效，所以这里必须是 flex。 */
    display: flex;
    flex-direction: column;
}

.wpnav-guestbook-empty {
    text-align: center;
    color: var(--wpnav-text-faint, #6e6e6e);
    font-size: 13.5px;
    padding: 32px 0;
}

/* ---------- 留言列表 ---------- */
.wpnav-guestbook-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-bottom: 24px;
}

.wpnav-guestbook-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    /* 单条留言最多占容器的 88%，留出另一侧的空白——聊天气泡靠"两边不对齐"
       来体现方向感，铺满整行就看不出左右之分了。 */
    max-width: 88%;
    align-self: flex-start;
}
.wpnav-guestbook-item.is-self {
    flex-direction: row-reverse;
    align-self: flex-end;
}

.wpnav-guestbook-avatar {
    position: relative;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    flex-shrink: 0;
    overflow: hidden;
    display: block;
    background: var(--wpnav-surface, rgba(255,255,255,.06));
}
.wpnav-guestbook-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* 首字母兜底头像：WordPress 后台关掉"显示头像"时 get_avatar_url() 返回
   false，或者 Gravatar 加载失败（国内很常见）时顶上，保证任何情况下
   都不会出现空白的头像位。 */
.wpnav-guestbook-avatar-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,.25);
}

.wpnav-guestbook-body { min-width: 0; }

.wpnav-guestbook-meta {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 5px;
    padding: 0 2px;
}
.wpnav-guestbook-item.is-self .wpnav-guestbook-meta { flex-direction: row-reverse; }

.wpnav-guestbook-author {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--wpnav-text-dim, #9e9e9e);
}
.wpnav-guestbook-time {
    font-size: 11.5px;
    color: var(--wpnav-text-faint, #6e6e6e);
}

.wpnav-guestbook-bubble {
    position: relative;
    padding: 10px 14px;
    border-radius: 16px;
    /* 左下角切一个小直角，形成"从头像那侧长出来"的指向感，
       比画一个三角形小尾巴更干净、也不会在深浅背景下露出接缝。 */
    border-bottom-left-radius: 5px;
    background: var(--wpnav-surface, rgba(255,255,255,.05));
    border: 1px solid var(--wpnav-border, rgba(255,255,255,.08));
    color: var(--wpnav-text, #ebebeb);
    font-size: 14px;
    line-height: 1.65;
    overflow-wrap: anywhere;
}
.wpnav-guestbook-item.is-self .wpnav-guestbook-bubble {
    /* 自己的气泡：切角换到右下（指向右边的头像），底色用带一点强调色的
       半透明，跟别人的中性灰区分开，但不至于刺眼。 */
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 5px;
    background: color-mix(in srgb, var(--wpnav-accent-a, #7c5cff) 18%, transparent);
    border-color: color-mix(in srgb, var(--wpnav-accent-a, #7c5cff) 32%, transparent);
}

/* ---------- 发言表单 ---------- */
.wpnav-guestbook-form {
    position: sticky;
    bottom: 12px;
    padding: 14px;
    border-radius: var(--wpnav-radius-lg, 22px);
    background: var(--wpnav-glass-bg, rgba(255,255,255,.06));
    border: 1px solid var(--wpnav-glass-border, rgba(255,255,255,.14));
    backdrop-filter: var(--wpnav-glass-blur, blur(16px) saturate(180%));
    -webkit-backdrop-filter: var(--wpnav-glass-blur, blur(16px) saturate(180%));
    box-shadow: 0 16px 32px -20px rgba(0,0,0,.5);
}

.wpnav-guestbook-identity {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 10px;
}
@media (max-width: 480px) {
    .wpnav-guestbook-identity { grid-template-columns: 1fr; }
}

.wpnav-guestbook-compose {
    display: flex;
    align-items: flex-end;
    gap: 10px;
}

.wpnav-guestbook-form input[type="text"],
.wpnav-guestbook-form input[type="email"],
.wpnav-guestbook-form textarea {
    width: 100%;
    padding: 10px 14px;
    background: var(--wpnav-surface, rgba(255,255,255,.04));
    border: 1px solid var(--wpnav-border, rgba(255,255,255,.08));
    border-radius: var(--wpnav-radius-sm, 12px);
    color: var(--wpnav-text, #ebebeb);
    font-size: 14px;
    font-family: inherit;
    line-height: 1.6;
    resize: vertical;
    transition: border-color var(--wpnav-dur-fast, .16s) var(--wpnav-ease, ease);
}
.wpnav-guestbook-form input::placeholder,
.wpnav-guestbook-form textarea::placeholder { color: var(--wpnav-text-faint, #6e6e6e); }
.wpnav-guestbook-form input:focus,
.wpnav-guestbook-form textarea:focus {
    outline: none;
    border-color: var(--wpnav-accent-a, #7c5cff);
}

.wpnav-guestbook-send {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--wpnav-glass-border, rgba(255,255,255,.2));
    background: color-mix(in srgb, var(--wpnav-accent-a, #7c5cff) 22%, transparent);
    color: var(--wpnav-text, #ebebeb);
    cursor: pointer;
    transition: transform var(--wpnav-dur-fast, .16s) var(--wpnav-ease, ease), background var(--wpnav-dur-fast, .16s) var(--wpnav-ease, ease);
}
.wpnav-guestbook-send:hover {
    background: color-mix(in srgb, var(--wpnav-accent-a, #7c5cff) 36%, transparent);
    transform: scale(1.06);
}
.wpnav-guestbook-send:active { transform: scale(0.94); }

.wpnav-guestbook-captcha {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}
.wpnav-guestbook-captcha label {
    font-size: 12.5px;
    color: var(--wpnav-text-dim, #9e9e9e);
    white-space: nowrap;
}
.wpnav-guestbook-captcha input[type="text"] { max-width: 110px; padding: 7px 12px; }

.wpnav-guestbook-locked {
    text-align: center;
    font-size: 13.5px;
    color: var(--wpnav-text-dim, #9e9e9e);
    padding: 18px;
    border-radius: var(--wpnav-radius-md, 16px);
    background: var(--wpnav-surface, rgba(255,255,255,.04));
    border: 1px solid var(--wpnav-border, rgba(255,255,255,.08));
}
/* 这条选择器带上外层 class 提高优先级——短代码内容是塞进正文容器
   .wpnav-single-content 里渲染的，那边有一条全局给正文链接加下划线的规则
   （详见 assets/front/submit-friend.css 里同样问题的说明）。 */
.wpnav-guestbook .wpnav-guestbook-locked a {
    color: var(--wpnav-accent-a, #7c5cff);
    font-weight: 600;
    margin-left: 4px;
}


/* ---------- 回复 ---------- */
/* 回复的留言整体缩进一段，视觉上挂在被回复那条的下面。只做一层嵌套——
   聊天场景里"回复的回复"再往里缩会越来越窄，所以更深的层级也平铺在这里，
   靠气泡开头的 @昵称 体现回复关系。 */
.wpnav-guestbook-replies {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: -4px 0 0 30px;
    padding-left: 14px;
    border-left: 2px solid var(--wpnav-border, rgba(255,255,255,.08));
}
.wpnav-guestbook-replies .wpnav-guestbook-item { max-width: 100%; }
/* 回复区里自己发的那条不再靠右——这一小块本来就已经缩进了，再拆左右
   反而会挤成很窄的一条，读起来更累。 */
.wpnav-guestbook-replies .wpnav-guestbook-item.is-self {
    flex-direction: row;
    align-self: flex-start;
}
.wpnav-guestbook-replies .wpnav-guestbook-item.is-self .wpnav-guestbook-meta { flex-direction: row; }

.wpnav-guestbook-at {
    color: var(--wpnav-accent-a, #7c5cff);
    font-weight: 600;
    margin-right: 4px;
}

.wpnav-guestbook-reply-btn {
    border: none;
    background: none;
    padding: 0;
    font-size: 11.5px;
    color: var(--wpnav-text-faint, #6e6e6e);
    cursor: pointer;
    opacity: 0;
    transition: opacity var(--wpnav-dur-fast, .16s) ease, color var(--wpnav-dur-fast, .16s) ease;
}
.wpnav-guestbook-item:hover .wpnav-guestbook-reply-btn { opacity: 1; }
.wpnav-guestbook-reply-btn:hover { color: var(--wpnav-accent-a, #7c5cff); }
/* 触屏设备没有hover，回复按钮直接常驻显示，否则根本点不到。 */
@media (hover: none) {
    .wpnav-guestbook-reply-btn { opacity: 1; }
}

/* 发送框上方的"正在回复 XXX"提示条 */
/* 必须显式写这条：HTML 的 hidden 属性是靠浏览器默认样式表里的
   display:none 生效的，而下面给了 display:flex——作者样式优先级高于
   默认样式表，会把 hidden 完全盖掉。结果就是这个提示条从页面一加载
   就一直显示着（哪怕没在回复任何人），点×设了 hidden=true 也没有任何
   视觉变化，看起来就是"关不上"。 */
.wpnav-guestbook-replying[hidden] { display: none !important; }
.wpnav-guestbook-replying {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
    padding: 7px 12px;
    border-radius: var(--wpnav-radius-sm, 12px);
    background: color-mix(in srgb, var(--wpnav-accent-a, #7c5cff) 14%, transparent);
    font-size: 12.5px;
    color: var(--wpnav-text-dim, #9e9e9e);
}
.wpnav-guestbook-replying strong { color: var(--wpnav-text, #ebebeb); }
.wpnav-guestbook-replying button {
    border: none;
    background: none;
    color: var(--wpnav-text-faint, #6e6e6e);
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
    padding: 0 2px;
}
.wpnav-guestbook-replying button:hover { color: var(--wpnav-text, #ebebeb); }


/* ---------- 手机端：发言框放到最上面 ---------- */
/* 列表已经是"最新的在最上面"，发言框跟着放到列表上方，发完就能立刻在
   下面第一条看到自己刚发的内容，不用来回滚动找输入框。
   桌面端屏幕高、列表和输入框基本能同屏看到，保持原来的吸底不动。 */
@media (max-width: 960px) {
    .wpnav-guestbook-form,
    .wpnav-guestbook-locked {
        order: -1;
        margin-bottom: 20px;
    }
    /* 挪到顶部之后就不需要吸底了——sticky bottom 会让它在滚动时一直粘在
       屏幕下沿，跟"它现在应该在列表上方"的位置关系互相打架。 */
    .wpnav-guestbook-form {
        position: static;
        bottom: auto;
    }
}