.books-chat-widget,.books-chat-widget *{box-sizing:border-box}
.books-chat-widget{position:fixed;right:16px;bottom:16px;z-index:9999;font-family:inherit;--books-chat-accent:var(--wp--preset--color--accent-3);--books-chat-on-accent:var(--wp--preset--color--base-2,#fff)}
@media (min-width:768px){.books-chat-widget{right:22px;bottom:22px}}

.books-chat-widget__launcher{display:flex;align-items:center;gap:10px;position:relative}
/* 未读角标：客服回复后即使面板关着也能看见 */
.books-chat-widget__badge{position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:#d63638;color:#fff;font-size:11px;font-weight:700;line-height:20px;text-align:center;box-shadow:0 2px 8px rgba(0,0,0,.25);pointer-events:none;z-index:1}
.books-chat-widget__badge[hidden]{display:none}

.books-chat-widget__pill{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;background:var(--wp--preset--color--base-2,#fff);border:1px solid rgba(0,0,0,.10);box-shadow:0 10px 26px rgba(0,0,0,.10);cursor:pointer;user-select:none}
.books-chat-widget__pill-text{font-size:13px;font-weight:800;color:rgba(0,0,0,.72)}
.books-chat-widget__pill:hover{box-shadow:0 14px 32px rgba(0,0,0,.12)}

.books-chat-widget.is-open .books-chat-widget__pill{display:none}

.books-chat-widget__bubble{width:48px;height:48px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;background:var(--books-chat-accent);color:var(--books-chat-on-accent);border:0;box-shadow:0 14px 34px rgba(0,0,0,.16);cursor:pointer}
.books-chat-widget__bubble:hover{filter:brightness(.98)}

.books-chat-widget__bubble-ico{display:none}
.books-chat-widget:not(.is-open) .books-chat-widget__bubble-ico.is-chat{display:inline-flex}
.books-chat-widget.is-open .books-chat-widget__bubble-ico.is-close{display:inline-flex}

.books-chat-widget__panel{position:fixed;right:16px;bottom:78px;width:min(360px,calc(100vw - 32px));max-height:min(500px,calc(100vh - 120px));background:var(--wp--preset--color--base-2,#fff);border-radius:22px;border:1px solid rgba(0,0,0,.10);box-shadow:0 24px 70px rgba(0,0,0,.18);overflow:hidden;display:block;opacity:0;transform:translateY(10px) scale(.98);transform-origin:bottom right;pointer-events:none;visibility:hidden;transition:opacity .22s ease, transform .22s ease}
@media (min-width:768px){.books-chat-widget__panel{right:22px;bottom:92px}}

.books-chat-widget.is-open .books-chat-widget__panel{opacity:1;transform:translateY(0) scale(1);pointer-events:auto;visibility:visible}

/* 头部：返回键与关闭键与标题同行。
   原先是 padding-top:52px 撑出一条空带、两个按钮 absolute 浮在里面，
   面板本就不高，白白吃掉约 44px。改用 grid 摆位，不需要动 HTML 结构。 */
.books-chat-widget__panel-header{background:var(--books-chat-accent);color:var(--books-chat-on-accent);padding:12px 12px 14px;position:relative;display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"back title close" "back subtitle close";align-items:center;column-gap:10px}
.books-chat-widget__panel-title{grid-area:title}
.books-chat-widget__panel-subtitle{grid-area:subtitle}
.books-chat-widget__panel-header,.books-chat-widget__panel-body,.books-chat-widget__panel-footer{width:100%}
.books-chat-widget__panel-title{margin:0;font-size:16px;font-weight:900;letter-spacing:-.01em}
.books-chat-widget__panel-subtitle{margin:6px 0 0;font-size:12px;font-weight:700;opacity:.92;line-height:1.6}

.books-chat-widget__close{grid-area:close;width:34px;height:34px;border-radius:999px;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.16);color:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.books-chat-widget__close:hover{background:rgba(255,255,255,.22)}

/* 用 visibility 而非 display，保住栅格列宽，切到聊天视图时标题不会左右跳一下 */
.books-chat-widget__back{grid-area:back;width:34px;height:34px;border-radius:999px;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.16);color:#fff;display:inline-flex;visibility:hidden;align-items:center;justify-content:center;cursor:pointer}
.books-chat-widget__back:hover{background:rgba(255,255,255,.22)}
.books-chat-widget.is-chat .books-chat-widget__back{visibility:visible}

.books-chat-widget__panel-body{padding:14px;background:var(--wp--preset--color--base,#f8fafc)}
.books-chat-widget__card{background:var(--wp--preset--color--base-2,#fff);border:1px solid rgba(0,0,0,.08);border-radius:16px;padding:12px 12px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.books-chat-widget__card{cursor:pointer}
.books-chat-widget__card-left{min-width:0}
.books-chat-widget__card-title{margin:0;font-size:13px;font-weight:900;color:rgba(0,0,0,.82)}
.books-chat-widget__card-desc{margin:4px 0 0;font-size:12px;font-weight:700;color:rgba(0,0,0,.55)}
.books-chat-widget__card-cta{width:36px;height:36px;border-radius:999px;background:rgba(0,0,0,.04);color:rgba(0,0,0,.48);display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}

.books-chat-widget__messages{display:none;height:220px;overflow:auto;background:var(--wp--preset--color--base-2,#fff);border-radius:16px;border:1px solid rgba(0,0,0,.08);padding:12px;gap:10px}
.books-chat-widget.is-chat .books-chat-widget__card{display:none}
.books-chat-widget.is-chat:not(.is-guest-gate) .books-chat-widget__messages{display:flex;flex-direction:column}

.books-chat-widget__msg{max-width:85%;padding:10px 12px;border-radius:14px;font-size:12px;line-height:1.6;font-weight:700}
.books-chat-widget__msg.is-user{align-self:flex-end;background:rgba(0,0,0,.06);color:rgba(0,0,0,.78)}
.books-chat-widget__msg.is-bot{align-self:flex-start;background:rgba(0,0,0,.02);border:1px solid rgba(0,0,0,.08);color:rgba(0,0,0,.70)}

.books-chat-widget__panel-footer{display:none;padding:10px 14px 14px;border-top:1px solid rgba(0,0,0,.08);background:var(--wp--preset--color--base-2,#fff)}
.books-chat-widget.is-chat .books-chat-widget__panel-footer{display:block}
.books-chat-widget__guest-gate{display:none;flex-direction:column;gap:8px;width:100%}
.books-chat-widget__email{width:100%;max-width:100%}
.books-chat-widget__guest-help{margin:0;font-size:11px;line-height:1.5;font-weight:700;color:rgba(0,0,0,.52)}
.books-chat-widget__input-row{display:flex;align-items:center;gap:8px;width:100%}
.books-chat-widget.is-chat.is-guest-gate .books-chat-widget__guest-gate{display:flex}
.books-chat-widget.is-chat.is-guest-gate .books-chat-widget__input-row{display:none}
.books-chat-widget__input{flex:1;min-width:0;border-radius:999px;border:1px solid rgba(0,0,0,.10);background:#fff;padding:10px 12px;font-size:13px;font-weight:700;outline:none}
.books-chat-widget__input:focus{border-color:rgba(0,0,0,.20);box-shadow:0 0 0 4px rgba(0,0,0,.06)}
.books-chat-widget__input.is-disabled{background:rgba(0,0,0,.03);color:rgba(0,0,0,.45);cursor:not-allowed}
.books-chat-widget__input.is-invalid{border-color:#0b7a70;box-shadow:0 0 0 3px rgba(11, 122, 112,.14)}
.books-chat-widget__send{width:40px;height:40px;border-radius:999px;border:0;background:var(--books-chat-accent);color:var(--books-chat-on-accent);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.books-chat-widget__send:hover{filter:brightness(.98)}
.books-chat-widget__send.is-disabled,.books-chat-widget__send:disabled{opacity:.55;cursor:not-allowed;filter:none}

.books-chat-widget__sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ==== 2026-08-05 购物车抽屉避让：抽屉打开时聊天球左移让位，关闭复原 ==== */
.books-chat-widget{transition:right .28s ease}
body:has(.wc-block-components-drawer__screen-overlay:not(.wc-block-components-drawer__screen-overlay--is-hidden) .wc-block-mini-cart__drawer) .books-chat-widget{right:min(calc(480px + 24px), calc(100vw - 72px)) !important}
/* 聊天面板是独立 fixed 定位，跟随同步左移 */
body:has(.wc-block-components-drawer__screen-overlay:not(.wc-block-components-drawer__screen-overlay--is-hidden) .wc-block-mini-cart__drawer) .books-chat-widget__panel{right:min(calc(480px + 24px), calc(100vw - 72px)) !important}
/* 窄屏抽屉近全宽，左移无处可让，直接隐藏，关抽屉即恢复 */
@media (max-width: 767px){
	body:has(.wc-block-components-drawer__screen-overlay:not(.wc-block-components-drawer__screen-overlay--is-hidden) .wc-block-mini-cart__drawer) .books-chat-widget{opacity:0;pointer-events:none}
}

/* ==== 2026-08-20 移动端：全屏面板 + 气泡可拖拽/边缘自动半隐藏 ==============
   原先移动端沿用桌面浮层尺寸(right/bottom + 固定 360px 宽)，配合 JS 拖拽写入的
   内联 left/top，会出现面板溢出视口、关闭按钮被切、气泡压住发送键等问题。
   改为从底部升起的全屏面板：不需要任何与底栏/气泡的避让计算。
   气泡保留拖拽，松手吸附到最近的左右边缘，拖过头进入半隐藏(peek)。
   用 !important 是为了压过 books-product-mobile 对 __panel 的 !important 避让规则。 */
@media (max-width: 767px){
	/* 优先级说明：books-product-mobile 里有
	     body.single-product .books-chat-widget__panel                       (0,2,1) !important
	     body.single-product.prb-sticky-cart-visible .books-chat-widget__panel (0,3,1) !important
	   给【旧的浮层布局】做底栏避让，设了 right:12px / bottom:138px / max-height。
	   两边都带 !important 时比优先级，那两条更高，于是全屏面板在商品页被顶起
	   138px，底部购买栏和导航栏就露出来了。这里把选择器提到 (0,4,1) 压过去。
	   正解是把那几个移动端插件迁出 docker 卷并删掉这些过时避让规则，
	   但它们目前没有 bind mount、无版本控制，留待后续。 */
	body .books-chat-widget.books-chat-widget .books-chat-widget__panel.books-chat-widget__panel{
		position:fixed !important;
		inset:0 !important;
		top:0 !important;
		right:0 !important;
		bottom:0 !important;
		left:0 !important;
		width:100% !important;
		max-width:none !important;
		height:100% !important;
		max-height:none !important;
		border:0 !important;
		border-radius:0 !important;
		transform:translateY(100%) !important;
		transform-origin:bottom center !important;
		display:flex !important;
		flex-direction:column !important;
		box-shadow:none !important;
	}
	body .books-chat-widget.is-open .books-chat-widget__panel.books-chat-widget__panel{
		transform:translateY(0) !important;
	}

	/* 全屏时顶部要避开状态栏/刘海 */
	.books-chat-widget__panel-header{
		flex:0 0 auto;
		padding-top:calc(20px + env(safe-area-inset-top, 0px));
	}

	/* 头部与输入行固定，消息区吃满剩余高度 */
	.books-chat-widget__panel-body{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
	.books-chat-widget__panel-footer{
		flex:0 0 auto;
		padding-bottom:calc(14px + env(safe-area-inset-bottom, 0px));
	}
	.books-chat-widget.is-chat:not(.is-guest-gate) .books-chat-widget__messages{
		flex:1 1 auto;
		height:auto;
		min-height:0;
	}

	/* 抽屉打开时气泡会被盖住，直接隐藏，靠抽屉自带的 × 关闭 */
	.books-chat-widget.is-open .books-chat-widget__launcher{display:none}

	/* 移动端气泡缩小 */
	.books-chat-widget__bubble{width:40px;height:40px}
	.books-chat-widget__bubble svg{width:18px;height:18px}
	.books-chat-widget__badge{min-width:17px;height:17px;line-height:17px;font-size:10px;top:-3px;right:-3px}

	/* 半隐藏：移动端的【默认状态】就是缩进去一半。
	   这样 JS 还没执行时它已经是收着的，页面加载不会出现
	   "先完整弹出来、2 秒后再缩回去" 的多余动作。
	   展开(is-awake)才是需要主动加的状态。
	   用 transform 而不是改坐标 —— 未拖动过的气泡由 CSS 的 right/bottom 定位，
	   改 left 那套只在拖过之后才生效，绝大多数访客永远碰不到。 */
	.books-chat-widget__launcher{
		transition:transform .3s cubic-bezier(.4,0,.2,1), opacity .3s ease;
		transform:translateX(48%);
		opacity:.55;
	}
	/* 拖到左侧后往左缩 */
	.books-chat-widget.is-peek-left .books-chat-widget__launcher{
		transform:translateX(-48%);
	}
	/* 展开：手指碰到、面板打开、或有未读（红点必须看得见） */
	.books-chat-widget.is-awake .books-chat-widget__launcher,
	.books-chat-widget.is-open .books-chat-widget__launcher,
	.books-chat-widget.has-unread .books-chat-widget__launcher{
		transform:none;
		opacity:1;
	}

	/* 移动端正文放大到可读尺寸（桌面维持原样） */
	.books-chat-widget__msg{font-size:14px;font-weight:600;max-width:90%}
}

/* ==== 2026-10-01 容器尺寸跟随气泡 ====================================================
   气泡被拖动过之后，JS 会写入内联 left/top；而移动端商品页（books-product-mobile 的
   prb-product-mobile-fix）和 homepage-mobile.css 对 right / bottom 用了 !important。
   四条边同时生效、又没有给尺寸，容器就被拉伸成一大块透明区域盖在页面上，
   区域里的点击全部落在容器身上，页面内容点不动（安卓真机实测：391×679）。
   给定尺寸后，浏览器对拖动过的气泡忽略 right / bottom，对没拖过的照常使用。
   面板是 position:fixed，不受容器尺寸影响。 */
.books-chat-widget{width:max-content;height:max-content}