/* ── 상단 도구 — 언어·채팅·회원 정보 ─────────────────── */
.topbar-tools .locale-switcher > wa-button::part(caret) { display: none; }

.topbar-tools .account-member {
	justify-content: center;
	inline-size: 42px;
	padding: 0;
}
.topbar-tools .account-member span { display: none; }

.topbar-tools .talk-badge {
	position: relative;
	inline-size: 42px;
	padding: 0;
}
.topbar-tools .talk-badge span {
	position: absolute;
	inset-block-start: calc(-1 * var(--wa-space-2xs));
	inset-inline-end: calc(-1 * var(--wa-space-2xs));
	box-sizing: border-box;
	border: 2px solid var(--shell-bar-bg);
}

/* ── 기기 알림 — 벨 아래 선택 안내·브라우저 설정 도움말 ─── */
.notification-bell { position: relative; }
.notification-trigger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 42px;
	block-size: 42px;
	padding: 0;
	border: 1px solid var(--shell-bar-tool-line);
	border-radius: var(--wa-border-radius-l);
	background: var(--shell-bar-tool-bg);
	color: var(--shell-bar-ink);
	font-size: var(--wa-font-size-m);
	cursor: pointer;
}
.notification-trigger[data-on='true'] { color: var(--wa-color-brand-fill-loud); }
.notification-trigger:hover { background: var(--shell-bar-hover); }
.notification-bell button:disabled { cursor: wait; opacity: 0.65; }
.notification-prompt,
.notification-help {
	box-sizing: border-box;
	inline-size: min(22rem, calc(100vw - 2 * var(--wa-space-s)));
	padding: var(--wa-space-l);
	border: 1px solid var(--wa-color-surface-border);
	border-radius: var(--wa-border-radius-l);
	background: var(--wa-color-surface-raised);
	color: var(--wa-color-text-normal);
	box-shadow: var(--wa-shadow-l);
	font-size: var(--wa-font-size-s);
	text-align: start;
}
.notification-prompt {
	position: absolute;
	inset-block-start: calc(100% + var(--wa-space-xs));
	inset-inline-end: 0;
	z-index: 40;
	max-block-size: calc(100dvh - var(--bar-height) - var(--wa-space-l));
	overflow: auto;
}
.notification-help { position: fixed; max-block-size: calc(100dvh - 2 * var(--wa-space-l)); }
.notification-help::backdrop { background: rgb(0 0 0 / 0.4); }
.notification-bell h2 { margin-block: 0 var(--wa-space-s); padding-inline-end: var(--wa-space-l); font-size: var(--wa-font-size-m); }
.notification-bell p { margin-block: var(--wa-space-s); line-height: 1.6; }
.notification-help ol { padding-inline-start: var(--wa-space-l); }
.notification-help li + li { margin-block-start: var(--wa-space-s); }
.notification-close {
	position: absolute;
	inset-block-start: var(--wa-space-xs);
	inset-inline-end: var(--wa-space-xs);
	display: grid;
	place-items: center;
	inline-size: 32px;
	block-size: 32px;
	padding: 0;
	border: 0;
	border-radius: var(--wa-border-radius-m);
	background: transparent;
	color: inherit;
	cursor: pointer;
}
.notification-close:hover { background: var(--wa-color-surface-lowered); }
.notification-action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-block-size: 40px;
	margin-block-start: var(--wa-space-xs);
	padding: var(--wa-space-xs) var(--wa-space-m);
	border: 0;
	border-radius: var(--wa-border-radius-m);
	background: var(--wa-color-brand-fill-loud);
	color: var(--wa-color-brand-on-loud);
	font: inherit;
	text-decoration: none;
	cursor: pointer;
}
.notification-settings {
	display: block;
	margin-block-start: var(--wa-space-m);
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--wa-color-text-normal);
	font: inherit;
	text-decoration: underline;
	text-align: start;
	cursor: pointer;
}

@media (max-width: 599px) {
	.notification-trigger { inline-size: 34px; block-size: 34px; font-size: var(--wa-font-size-s); }
	.topbar-tools .locale-switcher > wa-button:not(:defined),
	.topbar-tools .locale-switcher > wa-button::part(base) {
		inline-size: auto;
		padding-inline: var(--wa-space-xs);
	}
	.topbar-tools .locale-code { display: inline; }
	.topbar-tools .account-member,
	.topbar-tools .talk-badge { inline-size: 34px; }
}