/* Phantom Shop: support chat. */

.ps-chat {
	--chat-blue: #2d6fb7;
	--chat-blue-dark: #1d5797;
	--chat-blue-soft: #edf4fc;
	--chat-ink: #0b0c0e;
	--chat-text: #334155;
	--chat-muted: #64748b;
	--chat-line: #e3e8ef;
	position: fixed;
	left: 20px;
	bottom: 20px;
	z-index: 999990;
	font-family: "Spartan MB", "Segoe UI", system-ui, -apple-system, sans-serif;
	font-variant-ligatures: no-common-ligatures;
	-webkit-font-smoothing: antialiased;
	opacity: 0;
	pointer-events: none;
	transform: translateY(10px);
	transition: opacity .3s, transform .3s;
}
.ps-chat.is-ready { opacity: 1; pointer-events: auto; transform: none; }
.ps-chat *, .ps-chat *::before, .ps-chat *::after { box-sizing: border-box; }
.ps-chat button, .ps-chat input, .ps-chat textarea { font-family: inherit; }
.ps-chat svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Launcher */
.ps-chat__launcher { position: relative; display: grid; place-items: center; width: 60px; height: 60px; padding: 0; border: 0; border-radius: 50%; background: linear-gradient(160deg, #3a7dc6, var(--chat-blue) 50%, var(--chat-blue-dark)); color: #fff; cursor: pointer; box-shadow: 0 14px 30px -10px rgba(29, 87, 151, .75), inset 0 1px 0 rgba(255, 255, 255, .3); transition: transform .2s; }
.ps-chat__launcher:hover { transform: scale(1.05); }
.ps-chat__launcher svg { width: 26px; height: 26px; transition: transform .25s, opacity .25s; }
.ps-chat__ico-close { position: absolute; opacity: 0; transform: rotate(-90deg); }
.ps-chat[data-state="open"] .ps-chat__ico-open { opacity: 0; transform: rotate(90deg); }
.ps-chat[data-state="open"] .ps-chat__ico-close { opacity: 1; transform: none; }

/* Greeting bubble */
.ps-chat__greet { position: absolute; left: 0; bottom: 74px; display: flex; align-items: flex-start; animation: ps-chat-pop .35s ease-out; }
.ps-chat__greet[hidden] { display: none; }
.ps-chat .ps-chat__greet-text { display: block; width: max-content; max-width: min(320px, calc(100vw - 40px)); margin: 0; padding: 12px 18px; border: 1px solid var(--chat-line); border-radius: 16px 16px 16px 4px; background: #fff; color: var(--chat-ink); font-size: 14px; font-weight: 600; line-height: 1.4; text-align: left; cursor: pointer; box-shadow: 0 14px 32px -16px rgba(8, 35, 74, .45); white-space: normal; text-transform: none; letter-spacing: 0; }
.ps-chat__greet-x { position: absolute; top: -8px; right: -8px; display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 1px solid var(--chat-line); border-radius: 50%; background: #fff; color: var(--chat-muted); font-size: 14px; line-height: 1; cursor: pointer; }
/* Unread "1" on the launcher */
.ps-chat__badge { position: absolute; top: -3px; right: -3px; display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border: 2px solid #fff; border-radius: 999px; background: #ef4444; color: #fff; font-size: 12px; font-weight: 700; line-height: 1; box-shadow: 0 4px 10px -2px rgba(239, 68, 68, .6); animation: ps-chat-badge .4s cubic-bezier(.3, 1.6, .5, 1), ps-chat-pulse 2s 1s infinite; }
.ps-chat__badge[hidden] { display: none; }
@keyframes ps-chat-badge { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes ps-chat-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, .55); } 60% { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); } }
@keyframes ps-chat-pop { from { opacity: 0; transform: translateY(8px) scale(.96); } to { opacity: 1; transform: none; } }

/* Panel */
.ps-chat__panel { position: absolute; left: 0; bottom: 76px; display: flex; flex-direction: column; width: 370px; height: min(600px, calc(100vh - 120px)); overflow: hidden; border-radius: 20px; background: #fff; box-shadow: 0 30px 70px -20px rgba(8, 35, 74, .5), 0 0 0 1px rgba(8, 35, 74, .06); transform-origin: bottom left; animation: ps-chat-open .28s cubic-bezier(.2, .8, .2, 1); }
.ps-chat__panel[hidden] { display: none; }
@keyframes ps-chat-open { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } }

.ps-chat__head { display: flex; align-items: center; gap: 10px; padding: 14px 14px 14px 10px; background: linear-gradient(135deg, #3a7dc6, var(--chat-blue) 45%, var(--chat-blue-dark)); color: #fff; }
.ps-chat__back, .ps-chat__close { display: grid; flex: none; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #fff; cursor: pointer; }
.ps-chat__back:hover, .ps-chat__close:hover { background: rgba(255, 255, 255, .16); }
.ps-chat__back svg, .ps-chat__close svg { width: 20px; height: 20px; }
.ps-chat__avatar { position: relative; flex: none; width: 42px; height: 42px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px rgba(255, 255, 255, .35); }
.ps-chat__avatar img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: contain; padding: 3px; }
.ps-chat__avatar i { position: absolute; right: -1px; bottom: -1px; width: 12px; height: 12px; border: 2px solid #fff; border-radius: 50%; background: #22c55e; }
.ps-chat__who { display: flex; flex: 1; flex-direction: column; min-width: 0; line-height: 1.25; }
.ps-chat__who strong { font-size: 16px; font-weight: 700; }
.ps-chat__who span { color: rgba(255, 255, 255, .82); font-size: 12px; }

.ps-chat__log { flex: 1; padding: 16px 14px 8px; overflow-y: auto; overscroll-behavior: contain; background: linear-gradient(180deg, #f7f9fc, #fff 120px); scroll-behavior: smooth; }
.ps-chat__msg { display: flex; margin: 0 0 10px; }
.ps-chat__msg.is-user { justify-content: flex-end; }
.ps-chat__bubble { max-width: 86%; padding: 11px 14px; border-radius: 16px 16px 16px 4px; background: #fff; color: var(--chat-text); font-size: 14px; line-height: 1.55; box-shadow: 0 1px 0 rgba(8, 35, 74, .04), 0 0 0 1px var(--chat-line); animation: ps-chat-pop .25s ease-out; }
.ps-chat__msg.is-user .ps-chat__bubble { border-radius: 16px 16px 4px 16px; background: linear-gradient(160deg, #3a7dc6, var(--chat-blue-dark)); color: #fff; box-shadow: none; }
.ps-chat__bubble p { margin: 0 0 8px; }
.ps-chat__bubble p:last-child, .ps-chat__bubble ul:last-child { margin-bottom: 0; }
.ps-chat__bubble ul { margin: 0 0 8px; padding-left: 18px; }
.ps-chat__bubble li { margin: 0 0 4px; }
.ps-chat__bubble strong { color: var(--chat-ink); }
.ps-chat__msg.is-user .ps-chat__bubble strong { color: #fff; }
.ps-chat__bubble a { color: var(--chat-blue); font-weight: 700; }
.is-typing .ps-chat__bubble { display: inline-flex; gap: 4px; padding: 14px 16px; }
.is-typing .ps-chat__bubble span { width: 7px; height: 7px; border-radius: 50%; background: #9fb3c8; animation: ps-chat-dot 1s infinite ease-in-out; }
.is-typing .ps-chat__bubble span:nth-child(2) { animation-delay: .15s; }
.is-typing .ps-chat__bubble span:nth-child(3) { animation-delay: .3s; }
@keyframes ps-chat-dot { 0%, 80%, 100% { opacity: .35; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }

.ps-chat__chips { display: flex; flex-wrap: wrap; gap: 6px; margin: -2px 0 12px; }
.ps-chat__chip { padding: 8px 13px; border: 1.5px solid var(--chat-blue); border-radius: 999px; background: #fff; color: var(--chat-blue); font-size: 13px; font-weight: 700; line-height: 1.2; text-decoration: none; cursor: pointer; transition: background .15s, color .15s; }
.ps-chat__chip:hover { background: var(--chat-blue); color: #fff; }
.ps-chat__chip.is-link::after { content: " ↗"; font-weight: 400; }
.ps-chat__chips.is-old .ps-chat__chip:not(.is-link) { border-color: var(--chat-line); color: var(--chat-muted); pointer-events: none; }
.ps-chat__chips.is-old .ps-chat__chip.is-link { border-color: var(--chat-line); color: var(--chat-muted); }

/* Forms inside a bot bubble */
.ps-chat__form { margin-top: 10px; }
.ps-chat__form label { display: block; margin: 0 0 8px; color: var(--chat-ink); font-size: 12px; font-weight: 700; }
.ps-chat__form label em { color: var(--chat-muted); font-style: normal; font-weight: 500; }
.ps-chat__form input, .ps-chat__form textarea { display: block; width: 100%; margin: 4px 0 0; padding: 9px 11px; border: 1px solid #d6dee8; border-radius: 10px; background: #fff; color: var(--chat-ink); font-size: 14px; font-weight: 500; box-shadow: none; resize: vertical; }
.ps-chat__form input:focus, .ps-chat__form textarea:focus { border-color: var(--chat-blue); outline: 0; box-shadow: 0 0 0 3px var(--chat-blue-soft); }
.ps-chat__form button { width: 100%; margin-top: 4px; padding: 11px; border: 0; border-radius: 999px; background: linear-gradient(180deg, #3a7dc6, var(--chat-blue-dark)); color: #fff; font-size: 14px; font-weight: 700; cursor: pointer; }
.ps-chat__form button:disabled { opacity: .7; cursor: progress; }
.ps-chat__form-msg { margin: 0 0 8px; color: #c2410c; font-size: 12px; font-weight: 600; }
.ps-chat__hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.ps-chat__order-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; margin: 0 0 4px !important; color: var(--chat-ink); font-weight: 700; }
.ps-chat__order-head span { padding: 3px 9px; border-radius: 999px; background: var(--chat-blue-soft); color: var(--chat-blue-dark); font-size: 11px; font-weight: 700; }
.ps-chat__order-head span.is-completed { background: #ebf7f0; color: #15803d; }
.ps-chat__order-head span.is-cancelled, .ps-chat__order-head span.is-failed { background: #fff4ed; color: #c2410c; }
.ps-chat__order-meta { color: var(--chat-muted); font-size: 12px; }
.ps-chat__order ul { margin: 6px 0 8px; font-size: 13px; }
.ps-chat__track { display: block; margin-top: 6px; color: var(--chat-blue); font-weight: 700; }

/* Input */
.ps-chat__input { display: flex; gap: 8px; margin: 0; padding: 10px 12px; border-top: 1px solid var(--chat-line); background: #fff; }
.ps-chat .ps-chat__input input[type] { flex: 1; min-width: 0; height: 42px; margin: 0; padding: 0 14px; border: 1px solid #d6dee8; border-radius: 999px; background: #f7f9fc; color: var(--chat-ink); font-size: 14px; box-shadow: none; }
.ps-chat .ps-chat__input input[type]:focus { border-color: var(--chat-blue); outline: 0; background: #fff; }
.ps-chat__input button { display: grid; flex: none; place-items: center; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 50%; background: var(--chat-blue); color: #fff; cursor: pointer; }
.ps-chat__input button svg { width: 18px; height: 18px; }
.ps-chat__foot { margin: 0; padding: 0 12px 10px; color: #94a3b8; font-size: 11px; text-align: center; background: #fff; }

@media (max-width: 600px) {
	.ps-chat { left: 14px; bottom: 16px; }
	.ps-chat__launcher { width: 54px; height: 54px; }
	.ps-chat__panel { position: fixed; left: 8px; right: 8px; bottom: 82px; width: auto; height: min(620px, calc(100dvh - 100px)); }
	.ps-chat .ps-chat__input input[type] { font-size: 16px; } /* no zoom-in on iPhone */
}
@media (prefers-reduced-motion: reduce) {
	.ps-chat, .ps-chat__panel, .ps-chat__bubble, .ps-chat__greet, .ps-chat__badge { animation: none; transition: none; }
}