/* site-webchat:generated:0bee84d479ca3f4b37f5f967fd16f0d2 */
/* チャット本文だけの共用スタイル。サイトのヘッダー・メニュー・外枠へ適用しない。 */
.wsc-chat:where(:not(.wsc-chat .wsc-chat)) {
	--wsc-primary: #2863e8;
	--wsc-primary-hover: #1f50bd;
	--wsc-text: #18304e;
	--wsc-muted: #496079;
	--wsc-soft: #edf4ff;
	--wsc-bubble: #dceaff;
	--wsc-border: #b1c1d4;
	--wsc-surface: #ffffff;
	--wsc-radius: 12px;
	--wsc-density: 14px;
}
.wsc-chat {
	container-type: inline-size;
	color: var(--wsc-text);
	font: 14px/1.6 system-ui, sans-serif;
}
.wsc-chat[data-theme="2"] { --wsc-primary:#1753b6;--wsc-primary-hover:#103d8a;--wsc-soft:#edf3ff;--wsc-bubble:#dfe9ff;--wsc-radius:6px; }
.wsc-chat[data-theme="3"] { --wsc-primary:#08766d;--wsc-primary-hover:#05534e;--wsc-soft:#eaf9f6;--wsc-bubble:#cceee7;--wsc-radius:16px; }
.wsc-chat[data-theme="4"] { --wsc-primary:#23743a;--wsc-primary-hover:#18552a;--wsc-soft:#edf8ef;--wsc-bubble:#d5edda;--wsc-radius:8px; }
.wsc-chat[data-theme="5"] { --wsc-primary:#8b5709;--wsc-primary-hover:#653e06;--wsc-soft:#fff7e8;--wsc-bubble:#f9e9c9;--wsc-radius:4px; }
.wsc-chat[data-theme="6"] { --wsc-primary:#a62950;--wsc-primary-hover:#79203b;--wsc-soft:#fff0f4;--wsc-bubble:#f7dce5;--wsc-radius:18px; }
.wsc-chat[data-theme="7"] { --wsc-primary:#42556e;--wsc-primary-hover:#293b52;--wsc-soft:#f0f3f7;--wsc-bubble:#dfe5ed;--wsc-radius:2px; }
.wsc-chat .wsc-pane, .wsc-chat .wsc-inbox { border-radius:var(--wsc-radius); }
.wsc-chat .wsc-pane-header, .wsc-chat .wsc-composer { padding:var(--wsc-density); }
.wsc-chat input { font:inherit;color:var(--wsc-text);border:1px solid var(--wsc-border);padding:8px;max-width:100%; }
.wsc-chat input:focus-visible { outline:3px solid var(--wsc-primary);outline-offset:2px; }
.wsc-chat *, .wsc-chat *::before, .wsc-chat *::after { box-sizing: border-box; }
.wsc-chat [hidden] { display: none; }
.wsc-chat h2, .wsc-chat h3, .wsc-chat p { margin: 0; overflow-wrap: anywhere; }
.wsc-chat h2 { font-size: 24px; }
.wsc-chat h3 { font-size: 18px; }
.wsc-chat button, .wsc-chat select, .wsc-chat textarea {
	font: inherit;
	color: inherit;
	border: 1px solid var(--wsc-border);
	border-radius: 7px;
	background: var(--wsc-surface);
}
.wsc-chat button { padding: 7px 12px; cursor: pointer; font-weight: 600; }
.wsc-chat button:hover { border-color: var(--wsc-primary); background: var(--wsc-soft); }
.wsc-chat button:disabled { cursor: not-allowed; opacity: .5; }
.wsc-chat button:focus-visible, .wsc-chat select:focus-visible, .wsc-chat textarea:focus-visible { outline: 3px solid var(--wsc-primary); outline-offset: 2px; }
.wsc-chat button[aria-pressed="true"], .wsc-chat [data-send], .wsc-chat [data-confirm] { color: var(--wsc-surface); background: var(--wsc-primary); border-color: var(--wsc-primary); }
.wsc-chat [data-send]:hover, .wsc-chat [data-confirm]:hover { background: var(--wsc-primary-hover); }
.wsc-chat select { padding: 6px; max-width: 100%; }
.wsc-chat textarea { display: block; width: 100%; margin: 8px 0; padding: 10px 12px; resize: vertical; }
.wsc-chat textarea:disabled { background: #edf1f6; }
.wsc-chat label { display: block; }
.wsc-chat [data-result]:not(:empty), .wsc-chat [data-note]:not(:empty), .wsc-chat [data-confirm-error]:not(:empty) { margin: 8px 0; color: #9c3434; }
.wsc-toolbar, .wsc-actions { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.wsc-chat > .wsc-toolbar { justify-content: flex-end; margin-bottom: 16px; }
.wsc-help, .wsc-chat [data-customer] { color: var(--wsc-muted); font-size: 12px; }
.wsc-workbench { display: grid; grid-template-columns: minmax(210px, 270px) minmax(0, 1fr); gap: 16px; align-items: start; }
.wsc-inbox-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.wsc-inbox-heading [data-waiting] { white-space: nowrap; font-size: 13px; }
.wsc-inbox, .wsc-pane { min-width: 0; background: var(--wsc-surface); border: 1px solid var(--wsc-border); border-radius: 12px; overflow: hidden; }
.wsc-inbox { padding: 14px; }
.wsc-inbox [data-list] { margin-top: 14px; max-height: 650px; overflow-y: auto; }
.wsc-inbox [data-pages]:not([hidden]) { margin-top: 12px; }
.wsc-chat .wsc-row { display: block; width: 100%; margin: 0 0 8px; padding: 12px; text-align: left; white-space: normal; }
.wsc-chat .wsc-row[aria-current="true"] { border-color: var(--wsc-primary); background: var(--wsc-soft); }
.wsc-row strong, .wsc-row span { display: block; overflow-wrap: anywhere; }
.wsc-row span { color: var(--wsc-muted); font-size: 12px; }
.wsc-row strong { font-size: 15px; }
.wsc-row .wsc-row-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 9px 0; }
.wsc-row .wsc-row-state, .wsc-inbox-heading [data-waiting] { padding: 2px 8px; border-radius: 20px; color: #247054; background: #e9f5ee; font-weight: 600; }
.wsc-row .wsc-row-state.is-waiting, .wsc-inbox-heading [data-waiting] { color: #946013; background: #fff3d9; }
.wsc-row .wsc-row-preview { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 8px; color: #496079; font-size: 13px; font-weight: 400; }
.wsc-row .wsc-row-unread { color: var(--wsc-primary); font-weight: 700; }
.wsc-chat .wsc-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.wsc-workspace, .wsc-slot { min-width: 0; }
.wsc-tabs { display: flex; gap: 8px; margin-bottom: 8px; }
.wsc-panes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.wsc-panes[data-occupied="0"], .wsc-panes[data-occupied="1"] { grid-template-columns: minmax(0, 1fr); }
.wsc-pane { --wsc-pane-color: var(--wsc-border); display: flex; flex-direction: column; min-height: 650px; border-color: var(--wsc-pane-color); container: wsc-pane / inline-size; }
.wsc-pane.is-active { --wsc-pane-color: var(--wsc-primary); border-width: 3px; }
.wsc-pane.is-replying .wsc-pane-header, .wsc-pane.is-replying .wsc-composer { background: var(--wsc-soft); }
.wsc-pane-header { padding: 14px; border-bottom: 1px solid var(--wsc-border); }
.wsc-pane-header h3 { margin-top: 10px; }
.wsc-pane-header .wsc-actions { justify-content: flex-start; margin-top: 10px; }
.wsc-pane [data-empty] { padding: 24px 14px; color: var(--wsc-muted); }
.wsc-thread { flex: 1; min-height: 220px; max-height: 440px; overflow-y: auto; padding: 14px; }
.wsc-message { width: fit-content; margin: 0 0 14px; max-width: 84%; }
.wsc-message-meta { margin-bottom: 4px; font-size: 12px; color: var(--wsc-muted); }
.wsc-message p { width: fit-content; max-width: 100%; overflow-wrap: anywhere; padding: 10px 12px; background: #f0f3f8; border: 1px solid var(--wsc-border); border-radius: 10px; white-space: pre-wrap; }
.wsc-message.is-outgoing { margin-left: auto; }
.wsc-message.is-outgoing .wsc-message-meta { text-align: right; }
.wsc-message.is-outgoing p { margin-left: auto; background: var(--wsc-bubble); border-color: var(--wsc-bubble); }
.wsc-composer { padding: 14px; border-top: 1px solid var(--wsc-border); }
.wsc-composer label { font-weight: 600; }
.wsc-composer .wsc-actions { justify-content: flex-end; }
.wsc-composer .wsc-actions > .wsc-help { margin-left: auto; text-align: right; }
.wsc-chat [data-older], .wsc-chat [data-typing] { margin: 6px 14px; }
.wsc-confirm, .wsc-expand { color: var(--wsc-text); border: 0; border-radius: 12px; padding: 24px; box-shadow: 0 24px 70px #10253d40; }
.wsc-confirm { width: min(520px, calc(100vw - 32px)); }
.wsc-confirm p, .wsc-confirm label { margin: 14px 0; }
.wsc-confirm select { width: 100%; }
.wsc-expand { width: min(940px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow-y: auto; }
.wsc-expand [data-expanded] { margin-top: 12px; }
.wsc-expand .wsc-pane { min-height: 0; }
.wsc-confirm::backdrop, .wsc-expand::backdrop { background: #10253db3; }
.wsc-panes[data-layout="single"] { grid-template-columns: minmax(0, 1fr); }
.wsc-panes[data-layout="single"] .wsc-slot:not(:has(.is-active)) { display: none; }
@container (max-width: 1050px) {
	.wsc-toolbar button[data-layout] { display: none; }
	.wsc-panes { grid-template-columns: minmax(0, 1fr); }
	.wsc-panes .wsc-slot:not(:has(.is-active)) { display: none; }
}
@container (max-width: 600px) {
	.wsc-workbench { grid-template-columns: minmax(0, 1fr); }
	.wsc-inbox [data-list] { max-height: 220px; }
	.wsc-pane { min-height: 550px; }
}
/* サンプルの本文。サイト固有の外枠は同梱しない。 */
.wsc-front { max-width: 940px; margin: auto; }
.wsc-front > section { margin-top: 18px; padding: 24px; border: 1px solid var(--wsc-border); border-radius: 14px; background: var(--wsc-surface); }
.wsc-front .wsc-message.is-outgoing p { background: #eef9d9; border-color: #eef9d9; }
.wsc-front .wsc-thread { min-height: 320px; }
.wsc-front [data-front-notice] { margin-top: 14px; padding: 12px 16px; border: 1px solid #bfdcff; border-radius: 8px; background: #eff7ff; }
.wsc-front [data-send] { min-width: 160px; color: var(--wsc-text); background: #b4e623; border-color: #b4e623; }
.wsc-front [data-send]:hover { background: #a4d91b; }
.wsc-front [data-front-intro] { padding: 60px 16px; text-align: center; color: #496079; }

.wsc-badge { display: inline-block; min-width: 1.4em; padding: 0 .3em; border-radius: 1em; background: #c43645; color: var(--wsc-surface); text-align: center; font: 600 13px/1.7 system-ui; }
.wsc-badge[hidden] { display: none; }

/* template1共通部品。公開側のサイト外枠には適用しない。 */

.wsc-row .wsc-row-state.is-ended { background: #737373; color: var(--wsc-surface); }
.wsc-chat .wsc-row.is-mine { border: 2px solid #e6a1c9; }
.wsc-chat .wsc-row.is-unread { border-left: 3px solid var(--wsc-primary); }
.wsc-chat [data-slot].is-mine, .wsc-chat [data-slot].is-mine[aria-pressed="true"] { color: var(--wsc-text); background: #ffccff; border-color: #df99c3; }
.wsc-pane.is-mine { --wsc-pane-color: #e6a1c9; }
.wsc-pane-heading { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; }
.wsc-pane-heading [data-chat-number], .wsc-pane-heading [data-state] { font-size: 12px; flex-shrink: 0; }
.wsc-pane-heading h3 { margin: 0; min-width: 0; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wsc-pane-heading [data-expand] { margin-left: auto; flex-shrink: 0; }
.wsc-chat [data-assignment] { margin-top: 12px; text-align: center; font-weight: 700; }
.wsc-icon { display: inline-block; width: 22px; height: 22px; vertical-align: middle; background: currentColor; mask: var(--wsc-icon) center / contain no-repeat; }
.wsc-loading { --wsc-icon: url('./icons/wsc-loading.svg'); background: #777; animation: wsc-spin 4s linear infinite; }
.wsc-check-circle { --wsc-icon: url('./icons/wsc-check-circle.svg'); background: #a8ffa8; }
.wsc-operator { --wsc-icon: url('./icons/wsc-operator.svg'); }
.wsc-chat [data-assignment].is-mine::before, .wsc-chat [data-slot].is-mine::before { content: ''; display: inline-block; width: 22px; height: 22px; margin-right: 6px; vertical-align: middle; background: #ff9e9e; mask: url('./icons/wsc-headphone.svg') center / contain no-repeat; }
.wsc-idle-warning { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 24px; background: #242424cc; color: var(--wsc-surface); font: 700 20px/1.6 system-ui, sans-serif; text-align: center; }
.wsc-idle-warning[hidden] { display: none; }
@keyframes wsc-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .wsc-loading { animation: none; } }

/* チャットの指定ボタンとアーカイブ。通常の担当色・サイト外枠には適用しない。 */
.wsc-chat [data-archive], .wsc-chat [data-archive]:hover, .wsc-chat [data-front-end], .wsc-chat [data-front-end]:hover, .wsc-chat [data-complete], .wsc-chat [data-complete]:hover, [data-gb-chat] .btn[data-chat-end], [data-gb-chat] .btn[data-chat-end]:hover { color: var(--wsc-surface); background: #3a3a3a; border-color: #3a3a3a; }
.wsc-chat [data-delete], .wsc-chat [data-delete]:hover { color: var(--wsc-surface); background: #dc3545; border-color: #dc3545; }
.wsc-chat .wsc-row.is-archive, .wsc-chat .wsc-row.is-archive[aria-current="true"] { border-color: #3a3a3a; background: #f2f2f2; }
.wsc-chat .wsc-pane.is-archive { --wsc-pane-color: #3a3a3a; background: var(--wsc-surface); }
.wsc-chat [data-archive][aria-pressed="true"], .wsc-chat [data-archive][aria-pressed="true"]:hover { color: var(--wsc-surface); background: #1e90ef; border-color: #1e90ef; }
.wsc-chat.is-archive [data-slot][aria-pressed="true"] { color: var(--wsc-surface); background: #3a3a3a; border-color: #3a3a3a; }
.wsc-expand [data-expand] { display: none; }
.wsc-close { --wsc-icon: url('./icons/wsc-close.svg'); }
.wsc-glass { --wsc-icon: url('./icons/wsc-glass.svg'); }
.wsc-storage { --wsc-icon: url('./icons/wsc-storage.svg'); }
.wsc-exclamation { --wsc-icon: url('./icons/wsc-exclamation.svg'); }
.wsc-reload { --wsc-icon: url('./icons/wsc-reload.svg'); }
.wsc-talk { --wsc-icon: url('./icons/wsc-talk.svg'); }
.wsc-start { --wsc-icon: url('./icons/wsc-cursor-fill.svg'); }
[data-gb-chat] [data-chat-refresh], [data-gb-chat] [data-chat-end] { white-space: nowrap; }

@container wsc-pane (max-width: 600px) {
	.wsc-pane .wsc-composer .wsc-compose-call-actions { flex-wrap: wrap; }
	.wsc-pane .wsc-composer .wsc-compose-call-actions > .wsc-help { flex-basis: 100%; }
	.wsc-pane .wsc-composer .wsc-compose-call-actions > button { flex-shrink: 0; white-space: nowrap; }
}

/* 接続待ちの文字の直後だけ、同じ文字サイズの既存アイコンを表示する。 */
.wsc-front-actions [data-front-state].is-waiting::after{content:"";display:inline-block;width:1em;height:1em;margin-inline-start:.35em;vertical-align:-.12em;background:currentColor;mask:url('./icons/wsc-loading.svg') center/contain no-repeat;animation:wsc-spin 4s linear infinite}
@media(prefers-reduced-motion:reduce){.wsc-front-actions [data-front-state].is-waiting::after{animation:none}}

/* 生成元はchat.css。手編集せず再生成します。 */
.wsc-chat{--wsc-selected-theme:1;}