/* contact-modal.css - styles for contact modal (mobile friendly, portable) */
.contact-modal-container{
    display:flex;
    gap:22px;
    align-items:flex-start;
    justify-content:center;
    padding:18px 12px;
    box-sizing:border-box;
    align-content: center;
}
.contact-modal-item{
    text-align:center;
    width:220px;
    max-width:44vw;
    display:flex;
    flex-direction:column;
    align-items:center;
}
.contact-modal-item img{
    width:120px;
    height:120px;
    object-fit:cover;
    border-radius:8px;
    box-shadow:0 6px 18px rgba(0,0,0,0.08);
}
.contact-modal-item .label{
    margin-top:10px;
    font-size:15px;
    color:#333;
    word-break:break-all;
}

/* 行内显示文本与复制按钮 */
.contact-meta{
    display:flex;
    align-items:center;
    gap:10px;
    margin-top:10px;
    justify-content:center;
}
.contact-meta .contact-text{
    font-size:15px;
    color:#273043;
    background:transparent;
    line-height:1;
}
.copy-icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:20px;
    height:20px;
    padding:6px;
    border-radius:4px;
    color:#1f6fb3;
    cursor:pointer;
    transition:background 0.15s ease, color 0.15s ease;
}
.copy-icon:hover{ background:#e8f6ff; color:#155a96; }

/* 在窄屏设备上堆叠显示 */
@media (max-width:640px){
    .contact-modal-container{
        flex-direction:column;
        gap:12px;
        align-items:center;
    }
    .contact-modal-item{ width:84vw; max-width:360px; }
    .contact-meta{ justify-content:center; }
    .contact-modal-item img{ width:120px; height:120px; }
}

/* 简单的点击提示样式 */
.contact-trigger{ cursor:pointer; }

/* inline 文本处的联系我们图标（用于正文内小图标替换） */
.inline-contact{ display:inline-flex; align-items:center; justify-content:center; padding:2px; margin-left:6px; vertical-align:middle; }
.inline-contact:focus{ outline: none; }
.inline-contact-icon{ display:block; width:18px; height:18px; transition: transform 0.12s ease, opacity 0.12s ease; }
.inline-contact:hover .inline-contact-icon{ transform: scale(1.08); opacity:0.95; }

/* 浮动联系按钮，始终可见（可移除或覆盖） */
.floating-contact{
    position:fixed;
    right:18px;
    top:50%;
    transform:translateY(-50%);
    z-index:99999;
    font-size:14px;
    cursor:pointer;
}

/* FAB 样式 */
.contact-fab{ display:flex; align-items:center; justify-content:center; width:68px; height:68px; border-radius:34px; background:linear-gradient(135deg,#1677ff 0%, #409EFF 100%); box-shadow:0 12px 30px rgba(64,158,255,0.28); transition:transform 0.18s ease, box-shadow 0.18s ease; position:relative; }
.contact-fab:focus{ outline: none; box-shadow:0 14px 36px rgba(64,158,255,0.36); transform:translateY(-50%) scale(1.04); }
.contact-fab:hover{ transform:translateY(-50%) scale(1.06); }
.contact-fab-icon{ display:block; pointer-events:none; width:26px; height:26px; }
.contact-fab-badge{ position:absolute; right:8px; top:8px; width:12px; height:12px; background:#ff4d4f; border-radius:50%; box-shadow:0 2px 6px rgba(0,0,0,0.24); }

/* 脉冲动画背景 */
.contact-fab::after{ content: ''; position: absolute; width: 86px; height:86px; border-radius:43px; left:50%; top:50%; transform:translate(-50%,-50%); z-index:-1; background: radial-gradient(circle, rgba(64,158,255,0.22) 0%, rgba(64,158,255,0.08) 40%, transparent 65%); animation: pulse 2s infinite ease-out; }
@keyframes pulse { 0% { transform: scale(0.9); opacity: 0.9 } 60% { transform: scale(1.15); opacity: 0.45 } 100% { transform: scale(1.4); opacity: 0 } }

@media (max-width:520px){
    /* 窄屏：移到底部中间，减小尺寸 */
    .floating-contact{ right:12px; top:auto; bottom:14px; transform:none; }
    .contact-fab{ width:56px; height:56px; border-radius:28px; }
    .contact-fab::after{ width:70px; height:70px; border-radius:35px; }
    .contact-fab-badge{ right:8px; top:6px; }
}

/* 悬停时显示标签（桌面） */
.contact-fab-label{ position:absolute; right:78px; top:50%; transform:translateY(-50%); background:rgba(0,0,0,0.75); color:#fff; padding:6px 10px; border-radius:6px; font-size:13px; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity 0.16s ease, transform 0.16s ease; }
.contact-fab:hover .contact-fab-label, .contact-fab:focus .contact-fab-label{ opacity:1; transform:translateY(-50%) translateX(-6px); }

/* 提高正文内图标可见性：圆形背景 */
.inline-contact{ display:inline-flex; align-items:center; justify-content:center; padding:4px; margin-left:6px; vertical-align:middle; background: rgba(64,158,255,0.08); border-radius:6px; }
.inline-contact-icon{ display:block; width:18px; height:18px; transition: transform 0.12s ease, opacity 0.12s ease; color:#1677ff; }
.inline-contact:hover{ background: rgba(64,158,255,0.12); }