/* ===========================================================
   桌面右侧悬浮联系方式（带弹出面板）
   由 inc/helpers.php scotech_floating_social() 输出，
   交互见 assets/js/float-contact.js
   =========================================================== */

#scotech-float{
	position:fixed;right:12px;top:50%;transform:translateY(-50%);z-index:9990;
	display:flex;flex-direction:column;
	/* 悬停时按钮会横向展开成胶囊，flex-end 让未展开的圆形按钮保持贴右对齐 */
	align-items:flex-end;gap:8px;
}

.scfloat-item{position:relative}

/* —— 竖排按钮本体 —— */
.scfloat-trigger{
	display:flex;align-items:center;justify-content:center;
	width:48px;height:48px;padding:0;border:0;border-radius:50%;
	background:var(--sc-fbg,var(--color));color:#FFFFFF;
	box-shadow:0 6px 16px rgba(0,0,0,.18);
	cursor:pointer;overflow:hidden;
	transition:width .3s ease,border-radius .3s ease;
}
.scfloat-trigger em{font-size:22px;flex-shrink:0;width:48px;text-align:center;font-style:normal}
.scfloat-trigger .scfloat-name{
	white-space:nowrap;max-width:0;opacity:0;font-size:14px;
	transition:max-width .3s ease,opacity .3s ease,padding .3s ease;
}
.scfloat-trigger:hover,
.scfloat-item.is-open .scfloat-trigger{width:160px;border-radius:24px;justify-content:flex-start}
.scfloat-trigger:hover .scfloat-name,
.scfloat-item.is-open .scfloat-trigger .scfloat-name{max-width:120px;opacity:1;padding-right:14px}
.scfloat-trigger:focus-visible{outline:2px solid #FFFFFF;outline-offset:-4px}

/* —— 弹出面板 —— */
.scfloat-panel{
	position:absolute;right:calc(100% + 14px);top:50%;
	width:236px;padding:18px 16px 16px;
	background:#FFFFFF;border-radius:10px;
	box-shadow:0 12px 34px rgba(0,0,0,.18);
	text-align:center;
	/* 关闭态：向右偏移 + 透明，配合 JS 的 hidden 属性做淡入 */
	transform:translateY(-50%) translateX(12px);opacity:0;pointer-events:none;
	transition:opacity .22s ease,transform .22s ease;
}
.scfloat-panel.is-open{transform:translateY(-50%) translateX(0);opacity:1;pointer-events:auto}
/* 指向按钮的小三角 */
.scfloat-panel::after{
	content:"";position:absolute;left:100%;top:50%;transform:translateY(-50%);
	border:7px solid transparent;border-left-color:#FFFFFF;
}

.scfloat-panel-close{
	position:absolute;top:6px;right:6px;
	width:24px;height:24px;padding:0;border:0;border-radius:50%;
	background:transparent;color:#999;cursor:pointer;line-height:1;
}
.scfloat-panel-close em{font-size:14px;font-style:normal}
.scfloat-panel-close:hover{background:#f2f2f2;color:#333}

.scfloat-panel-title{
	margin:0 0 10px;font-size:12px;font-weight:600;letter-spacing:.08em;
	text-transform:uppercase;color:#999;
}

/* 二维码：容器固定 140×140，JS 生成的是 SVG，上传的是 <img>，两者都撑满 */
.scfloat-qr{
	width:140px;height:140px;margin:0 auto 8px;padding:6px;
	background:#FFFFFF;border:1px solid #eee;border-radius:6px;
	display:flex;align-items:center;justify-content:center;
}
.scfloat-qr img,
.scfloat-qr svg{display:block;width:100%;height:100%}
.scfloat-qr-tip{margin:0 0 10px;font-size:12px;color:#999}

.scfloat-panel-value{
	margin:0 0 12px;font-size:15px;font-weight:600;color:var(--fontcolor,#333);
	word-break:break-all;line-height:1.4;
}

.scfloat-panel-actions{display:flex;gap:8px}
.scfloat-panel-go,
.scfloat-panel-copy{
	flex:1 1 0;min-width:0;
	height:36px;line-height:34px;padding:0 10px;
	border-radius:18px;font-size:13px;text-align:center;
	white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
	cursor:pointer;transition:opacity .2s ease,background .2s ease,color .2s ease;
}
.scfloat-panel-go{
	background:var(--sc-fbg,var(--color));color:#FFFFFF;border:1px solid transparent;
	text-decoration:none;display:block;
}
.scfloat-panel-go:hover{opacity:.88;color:#FFFFFF}
.scfloat-panel-copy{
	background:#FFFFFF;color:#666;border:1px solid #ddd;
	/* 复制按钮只在有号码/邮箱时输出，Teams 面板里不会出现 */
	flex:0 0 auto;
}
.scfloat-panel-copy:hover{border-color:var(--sc-fbg,var(--color));color:var(--sc-fbg,var(--color))}
.scfloat-panel-copy.is-copied{background:var(--sc-fbg,var(--color));border-color:transparent;color:#FFFFFF}

/* Teams 面板没有号码可显示，按钮独占整行 */
.scfloat-teams .scfloat-panel-actions{display:block}

/* 移动端用页脚固定的 .bottom-btn 快捷条（一触即达），不重复出这套面板 */
@media(max-width:768px){
	#scotech-float{display:none}
}