/* 添加好友弹层（PlainView 内的小卡片表单）——
 * 主页 + 消息页 + 入口共用同一份 UI，由 static/js/util/addfriend.js 渲染。
 * CSS 必须全站加载：主页 ProfileView 不依赖 messages.css，从其他渠道（聊天顶部跳转等）
 * 打开的 ProfileView 里的"添加好友"按钮才会拿到样式。
 * PlainView 负责标题栏和 × 关闭；本样式只负责表单卡片本身。
 * 卡片在 .pv-body（flex:1 纵向 flex 容器）里用 max-width + margin:auto 居中。 */
.add-friend-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 360px;
    width: 100%;
    box-sizing: border-box;
    margin: 24px auto 0;          /* 居中：横向 auto，顶部留一点呼吸距离 */
    padding: 0 20px calc(24px + env(safe-area-inset-bottom, 0px));
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}
.add-friend-hint {
    color: var(--text-3, #718096);
    font-size: 0.84rem;
    line-height: 1.55;
    margin: -2px 0 6px;            /* 贴近上面的 label，与输入框拉开 */
}
/* 常规左对齐表单 label（label 关联输入框，点击可聚焦） */
.add-friend-title {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-1, #2d3748);
    cursor: pointer;
}
.add-friend-title + input[type=text],
.add-friend-title + textarea {
    margin-bottom: 6px;            /* 两组字段之间拉开 */
}
.add-friend-form input[type=text],
.add-friend-form textarea {
    width: 100%;
    box-sizing: border-box;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 10px;
    font-size: 16px;               /* 16px 防 iOS Safari 聚焦时自动放大 */
    font-family: inherit;
    background: #fff;
    color: var(--text-1, #2d3748);
    outline: none;
    transition: border-color 0.15s;
}
.add-friend-form input[type=text]:focus,
.add-friend-form textarea:focus {
    border-color: var(--primary, #667eea);
}
.add-friend-form textarea {
    resize: none;                  /* 弹层内不允许拖拽改变尺寸，保持排版稳定 */
    line-height: 1.5;
}
.add-friend-form .err {
    color: #e53e3e;
    font-size: 0.84rem;
    line-height: 1.4;
    min-height: 18px;              /* 留位置避免错误出现时按钮跳动 */
    margin-top: -4px;
}
.add-friend-actions {
    display: flex;
    gap: 10px;
    margin-top: 6px;
}
.add-friend-form .cancel-btn,
.add-friend-form .submit-btn {
    flex: 1;
    min-height: 44px;
    border: none;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s, opacity 0.15s;
    font-family: inherit;
}
.add-friend-form .cancel-btn {
    background: #edf2f7;
    color: var(--text-2, #4a5568);
}
.add-friend-form .cancel-btn:active { background: #e2e8f0; }
.add-friend-form .submit-btn {
    background: var(--primary, #667eea);
    color: #fff;
}
.add-friend-form .submit-btn:active { background: #5a67d8; }
.add-friend-form .cancel-btn:disabled,
.add-friend-form .submit-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
/* 危险动作按钮（撤回好友请求等）：复用 submit-btn 形状但用红色语义 */
.add-friend-form .submit-btn.danger {
    background: #fff5f5;
    color: #c53030;
    border: 1px solid #feb2b2;
}
.add-friend-form .submit-btn.danger:active { background: #fed7d7; }