/* mod_my_helpdesk - หน้าต่างแชทลอย */

/*
 * Hidden means hidden. Several parts of this window are laid out with flex or
 * grid, and a rule like ".my-hdw__tools { display: flex }" beats the browser's
 * own "[hidden] { display: none }" on specificity - which once put the
 * office's block button in front of every visitor. One rule at the top so no
 * new part has to remember.
 */
.my-hdw [hidden] { display: none !important; }

.my-hdw {
	/* Written inline only when colours were picked by hand; otherwise the site's tone. */
	--hdw-c1: var(--my-primary, #1b5fa8);
	--hdw-c2: var(--my-light, #2e80d6);
	--hdw-x: 20px;
	--hdw-y: 20px;

	position: fixed; z-index: 1150;
	display: flex; flex-direction: column; align-items: flex-end; gap: 12px;
}

/* Which corner the button lives in, and which way the window opens. */
.my-hdw.corner-br { inset-inline-end: var(--hdw-x); inset-block-end: var(--hdw-y); flex-direction: column-reverse; align-items: flex-end; }
.my-hdw.corner-bl { inset-inline-start: var(--hdw-x); inset-block-end: var(--hdw-y); flex-direction: column-reverse; align-items: flex-start; }
.my-hdw.corner-tr { inset-inline-end: var(--hdw-x); inset-block-start: var(--hdw-y); align-items: flex-end; }
.my-hdw.corner-tl { inset-inline-start: var(--hdw-x); inset-block-start: var(--hdw-y); align-items: flex-start; }
.my-hdw.corner-mr { inset-inline-end: var(--hdw-x); top: 50%; transform: translateY(-50%); align-items: flex-end; }
.my-hdw.corner-ml { inset-inline-start: var(--hdw-x); top: 50%; transform: translateY(-50%); align-items: flex-start; }

/* ---------------------------------------------------------- the button -- */
.my-hdw__fab {
	position: relative; display: inline-flex; align-items: center; gap: 10px;
	border: 0; cursor: pointer; border-radius: 999px;
	min-height: 56px; padding: 0 22px;
	background: linear-gradient(135deg, var(--hdw-c1), var(--hdw-c2)); color: #fff;
	font-family: inherit; font-size: .95rem; font-weight: 600;
	box-shadow: 0 10px 26px rgba(16, 40, 80, .34);
	transition: transform .18s ease, box-shadow .18s ease;
}
.my-hdw__fab:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(16, 40, 80, .42); }
.my-hdw__fab-icon { font-size: 1.25rem; }
.my-hdw__fab-close { display: none; font-size: 1.25rem; }

/* Icon-only button stays a perfect circle. */
.my-hdw__fab:not(:has(.my-hdw__fab-label)) { width: 56px; padding: 0; justify-content: center; }

.my-hdw.is-open .my-hdw__fab-icon,
.my-hdw.is-open .my-hdw__fab-label { display: none; }
.my-hdw.is-open .my-hdw__fab-close { display: inline-block; }
.my-hdw.is-open .my-hdw__fab { width: 56px; padding: 0; justify-content: center; }

/* A gentle pulse until the visitor has used it once. */
.my-hdw.has-pulse .my-hdw__fab::after {
	content: ""; position: absolute; inset: 0; border-radius: inherit;
	box-shadow: 0 0 0 0 var(--hdw-c2);
	animation: my-hdw-pulse 2.2s ease-out infinite;
}
@keyframes my-hdw-pulse {
	0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--hdw-c2, #2e80d6) 60%, transparent); }
	70%  { box-shadow: 0 0 0 18px color-mix(in srgb, var(--hdw-c2, #2e80d6) 0%, transparent); }
	100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--hdw-c2, #2e80d6) 0%, transparent); }
}

/*
 * Launchers. "nav" means the chat is opened from the bottom bar and owns no
 * button of its own; "auto" keeps the floating button on wide screens, where
 * the bottom bar is usually hidden, and drops it on phones.
 */
.my-hdw.launcher-nav .my-hdw__fab { display: none; }

/*
 * Opened from the bottom bar, the window has to clear the bar itself - and
 * the phone's home indicator underneath it.
 */
.my-hdw.launcher-nav.corner-br,
.my-hdw.launcher-nav.corner-bl {
	inset-block-end: calc(var(--hdw-y) + 76px + env(safe-area-inset-bottom, 0px));
}

@media (max-width: 767px) {
	.my-hdw.launcher-auto .my-hdw__fab { display: none; }
}

/* ----------------------------------------------------------- the window -- */
.my-hdw__panel {
	display: flex; flex-direction: column;
	width: min(360px, calc(100vw - 32px));

	/*
	 * A phone browser's own bar sits inside vh but outside dvh, which is why
	 * the top of the window used to end up underneath it. dvh tracks what is
	 * really on screen; the max-height keeps a margin above the window so the
	 * header is always reachable. vh stays first as the fallback.
	 */
	height: min(74vh, 560px);
	height: min(74dvh, 560px);
	max-height: calc(100dvh - var(--hdw-y) - 64px);
	background: #fff; border-radius: 18px; overflow: hidden;
	box-shadow: 0 20px 50px rgba(6, 18, 35, .3);
	opacity: 0; transform: translateY(10px) scale(.98);
	transition: opacity .2s ease, transform .2s ease;
}
.my-hdw.is-open .my-hdw__panel { opacity: 1; transform: none; }
.my-hdw__panel[hidden] { display: none; }

/* --------------------------------------------------------------- header -- */
.my-hdw__head {
	flex: 0 0 auto; display: flex; align-items: center; gap: 9px; padding: 10px 12px;
	background: linear-gradient(135deg, var(--hdw-c1), var(--hdw-c2)); color: #fff;
}

.my-hdw__avatar {
	flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	background: rgba(255, 255, 255, .22); font-size: 1.05rem;
}

/*
 * The header stays two lines tall whatever is in it: a long room name or a
 * full set of opening hours runs off the end rather than wrapping, which
 * otherwise pushes the conversation itself down the window.
 */
.my-hdw__ident { flex: 1 1 auto; min-width: 0; }

.my-hdw__title {
	display: block; font-size: .95rem; line-height: 1.25; color: #fff;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.my-hdw__presence {
	display: flex; align-items: center; gap: 6px; min-width: 0;
	font-size: .72rem; color: rgba(255, 255, 255, .82); margin-top: 1px;
}
.my-hdw__presence > span {
	min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.my-hdw__dot { width: 7px; height: 7px; border-radius: 50%; background: #4ade80; flex: 0 0 auto; }

.my-hdw__close {
	flex: 0 0 auto; width: 30px; height: 30px; border: 0; border-radius: 50%;
	background: rgba(255, 255, 255, .18); color: #fff; cursor: pointer;
	display: inline-flex; align-items: center; justify-content: center;
}
.my-hdw__close:hover { background: rgba(255, 255, 255, .3); }

/* ------------------------------------------------------------ the thread -- */
.my-hdw__log {
	flex: 1 1 auto; overflow-y: auto; padding: 14px;
	background: #f4f7fb; display: flex; flex-direction: column; gap: 10px;
	overscroll-behavior: contain;
}

.my-hdw__msg { display: flex; align-items: flex-end; gap: 7px; max-width: 100%; flex-wrap: wrap; }

/*
 * "อ่านแล้ว" under the newest of your own lines the other side has read.
 * Takes a whole line of its own so it sits below the bubble rather than
 * beside it, and stays on the sender's side of the window.
 */
.my-hdw__read {
	flex: 0 0 100%; text-align: end;
	margin-top: 2px; font-size: .66rem; color: var(--my-muted, #6b7280);
}

.my-hdw__msg-avatar {
	flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--hdw-c1); color: #fff; font-size: .7rem;
}

.my-hdw__bubble {
	max-width: 80%; padding: 9px 13px; border-radius: 16px;
	font-size: .87rem; line-height: 1.65; word-break: break-word;
	background: #fff; color: #23324d; border-end-start-radius: 5px;
	box-shadow: 0 1px 3px rgba(16, 40, 80, .1);
}
.my-hdw__bubble-lead { margin: 0 0 8px; font-weight: 600; font-size: .84rem; }

/* -------------------------------------------------------- the channels -- */
.my-hdw__channels { display: grid; gap: 7px; }

.my-hdw__channel {
	display: flex; align-items: center; gap: 10px;
	padding: 8px 10px; border-radius: 11px; text-decoration: none;
	border: 1px solid var(--my-line, #e5e7eb); color: #23324d;
	transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.my-hdw__channel:hover {
	text-decoration: none; color: #23324d; transform: translateX(2px);
	border-color: var(--ch, var(--hdw-c1));
	box-shadow: 0 4px 14px rgba(16, 40, 80, .16);
}

.my-hdw__channel-icon {
	flex: 0 0 auto; width: 32px; height: 32px; border-radius: 9px;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--ch, var(--hdw-c1)); color: #fff; font-size: .92rem;
}
.my-hdw__channel-label { flex: 1 1 auto; font-size: .84rem; font-weight: 600; min-width: 0; }
.my-hdw__channel-go { color: #9aa4b2; font-size: .68rem; }

.my-hdw__channel.is-line { border-color: #06c755; background: rgba(6, 199, 85, .06); }

.my-hdw__qr { margin: 10px 0 0; text-align: center; }
.my-hdw__qr img { width: 132px; height: 132px; object-fit: contain; background: #fff; border-radius: 10px; padding: 6px; border: 1px solid var(--my-line, #e5e7eb); }
.my-hdw__qr figcaption { font-size: .74rem; color: #6b7280; margin-top: 4px; }

/* ---------------------------------------------------------- responsive -- */
@media (max-width: 575px) {
	.my-hdw { --hdw-x: 12px; --hdw-y: 12px; }
	.my-hdw__fab { min-height: 50px; padding: 0 16px; font-size: .88rem; }
	.my-hdw__fab:not(:has(.my-hdw__fab-label)),
	.my-hdw.is-open .my-hdw__fab { width: 50px; padding: 0; }
	.my-hdw__panel {
		width: calc(100vw - 24px);
		height: min(68vh, 520px);
		height: min(68dvh, 520px);
		max-height: calc(100dvh - var(--hdw-y) - 76px);
	}
	.my-hdw.corner-mr, .my-hdw.corner-ml { top: auto; bottom: var(--hdw-y); transform: none; }
}

.my-hdw.hide-mobile { display: flex; }

@media (max-width: 767px) {
	.my-hdw.hide-mobile { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.my-hdw__panel, .my-hdw__fab, .my-hdw__channel { transition: none; }
	.my-hdw.has-pulse .my-hdw__fab::after { animation: none; }
}

/* ----------------------------------------------------- ช่องพิมพ์แชท --- */
/*
 * The window is a conversation: a scrolling log with a composer pinned under
 * it, and - for the office - a way in that is only a code away.
 */
.my-hdw__log { scroll-behavior: smooth; }

.my-hdw__msg.is-me { flex-direction: row-reverse; }
.my-hdw__msg.is-me .my-hdw__bubble {
	background: linear-gradient(135deg, var(--hdw-c1, #1b5fa8), var(--hdw-c2, #2e80d6));
	color: #fff; border-radius: 14px 14px 4px 14px;
}

.my-hdw__bubble .my-hdw__when {
	display: block; margin-top: 4px;
	font-size: .68rem; opacity: .7;
}

.my-hdw__who { padding: 10px 12px 0; }

.my-hdw__field { display: block; min-width: 0; }
.my-hdw__field > span {
	display: block; margin: 0 0 3px;
	font-size: .72rem; font-weight: 600; color: #5b6b80;
}
.my-hdw__field input {
	width: 100%; box-sizing: border-box;
	border: 1px solid #d7dfea; border-radius: 9px;
	padding: 7px 10px; font: inherit; font-size: .82rem;
	background: #fff; color: inherit;
}
.my-hdw__field input:focus {
	outline: 2px solid var(--hdw-c2, #2e80d6); outline-offset: 1px; border-color: transparent;
}

/* The composer. The textarea grows with what is typed. */
.my-hdw__composer {
	display: flex; align-items: flex-end; gap: 8px;
	padding: 10px 12px; border-top: 1px solid #e7edf4;
}
.my-hdw__composer textarea {
	flex: 1; min-width: 0; resize: none; overflow-y: auto;
	min-height: 40px; max-height: 110px;
	border: 1px solid #d7dfea; border-radius: 20px;
	padding: 9px 14px; font: inherit; font-size: .86rem; line-height: 1.45;
	background: #f6f8fb; color: inherit;
}
.my-hdw__composer textarea:focus {
	outline: 2px solid var(--hdw-c2, #2e80d6); outline-offset: 1px;
	border-color: transparent; background: #fff;
}

.my-hdw__sendbtn {
	flex: 0 0 auto; width: 40px; height: 40px; border: 0; border-radius: 50%;
	cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
	background: linear-gradient(135deg, var(--hdw-c1, #1b5fa8), var(--hdw-c2, #2e80d6));
	color: #fff; font-size: .95rem;
	transition: filter .15s ease;
}
.my-hdw__sendbtn:hover { filter: brightness(1.1); }
.my-hdw__sendbtn:disabled { opacity: .55; cursor: default; }

/* The office's way in, kept quiet at the foot of the window. */
.my-hdw__staff { padding: 0 12px 10px; }

.my-hdw__stafflink {
	display: inline-flex; align-items: center; gap: 7px;
	border: 0; background: transparent; cursor: pointer; padding: 4px 2px;
	font: inherit; font-size: .74rem; color: #7b8ba0;
	text-decoration: underline; text-underline-offset: 3px;
}
.my-hdw__stafflink:hover { color: var(--hdw-c1, #1b5fa8); }

.my-hdw__unlock { margin-top: 8px; }
.my-hdw__hint { margin: 0 0 7px; font-size: .74rem; color: #6b7a8d; }

.my-hdw__coderow { display: flex; gap: 8px; }
.my-hdw__coderow input {
	flex: 1; min-width: 0; box-sizing: border-box;
	border: 1px solid #d7dfea; border-radius: 9px;
	padding: 8px 12px; font: inherit; font-size: 1rem; font-weight: 700;
	letter-spacing: .22em; text-transform: uppercase; text-align: center;
	background: #fff; color: var(--hdw-c1, #1b5fa8);
}
.my-hdw__coderow input:focus {
	outline: 2px solid var(--hdw-c2, #2e80d6); outline-offset: 1px; border-color: transparent;
}

/* The list of conversations waiting for an answer. */
.my-hdw__chats { flex: 1; overflow-y: auto; padding: 10px 12px; }

.my-hdw__chat {
	display: block; width: 100%; text-align: start; cursor: pointer;
	border: 1px solid #e7edf4; border-radius: 11px; background: #fff;
	padding: 10px 12px; margin-bottom: 8px; font: inherit;
	transition: border-color .15s ease, transform .15s ease;
}
.my-hdw__chat:hover { border-color: var(--hdw-c2, #2e80d6); transform: translateY(-1px); }

.my-hdw__chat-top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.my-hdw__chat-when { font-size: .7rem; color: #8c9bb0; }
.my-hdw__chat-sub {
	display: block; margin: 3px 0 6px;
	font-size: .78rem; color: #5b6b80;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.my-hdw__state {
	display: inline-block; border-radius: 999px; padding: 2px 10px;
	font-size: .68rem; font-weight: 600;
	background: #fef3c7; color: #92400e;
}
.my-hdw__state.is-s1 { background: #e0f2fe; color: #075985; }
.my-hdw__state.is-s2 { background: #dcfce7; color: #15803d; }

/* Back out of a conversation, or out of the list. */
.my-hdw__back {
	border: 0; background: transparent; cursor: pointer;
	color: inherit; font-size: .95rem; padding: 4px 6px; margin-inline-start: -4px;
}

.my-hdw__note {
	margin: 0 12px 10px; padding: 7px 10px; border-radius: 8px;
	font-size: .76rem; background: #eef2f7; color: #44576e;
}
.my-hdw__note.is-bad  { background: #fee2e2; color: #b91c1c; }
.my-hdw__note.is-good { background: #dcfce7; color: #15803d; }
.my-hdw__note.is-warn { background: #fef3c7; color: #92400e; }

@media (prefers-reduced-motion: reduce) {
	.my-hdw__log { scroll-behavior: auto; }
	.my-hdw__sendbtn, .my-hdw__chat { transition: none; }
}

/*
 * Answering mode: the header says so, and leaving it is one deliberate tap.
 * The window is narrow, so this stays a round icon - its wording lives in the
 * tooltip and for screen readers.
 */
.my-hdw__leave {
	flex: 0 0 auto; width: 30px; height: 30px;
	display: inline-flex; align-items: center; justify-content: center;
	border: 0; border-radius: 50%; cursor: pointer;
	background: rgba(255, 255, 255, .18); color: inherit; font-size: .82rem;
}
.my-hdw__leave:hover { background: rgba(255, 255, 255, .33); }
.my-hdw__leave span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

.my-hdw.is-staff .my-hdw__presence { font-weight: 700; }
.my-hdw.is-staff .my-hdw__dot { background: #fbbf24; }


/* Unread badge, worn by this window's own button and by the bottom bar's. */
.my-hdw__badge {
	position: absolute; top: -4px; inset-inline-end: -4px;
	min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box;
	border-radius: 999px; border: 2px solid #fff;
	background: #ef4444; color: #fff;
	font-size: .66rem; font-weight: 700; line-height: 14px; text-align: center;
	pointer-events: none;
}

/* The host button has to be a positioning context for it. */
.my-hdw__fab.has-badge,
[data-hdw-open].has-badge { position: relative; }

/* In the bottom bar the button is tall, so sit the badge over the icon. */
.my-nb__link.has-badge .my-hdw__badge { top: 4px; inset-inline-end: 18%; }

/* Who said it. The visitor gets a plain face, the office its headset. */
.my-hdw__msg-avatar.is-guest { background: #8c9bb0; }

.my-hdw__who-said {
	display: block; margin-bottom: 2px;
	font-size: .7rem; font-weight: 700; opacity: .75;
}

/* On the blue "mine" bubble the muted grey would disappear. */
.my-hdw__msg.is-me .my-hdw__who-said { opacity: .85; }

/* Putting the code box away - it is in the visitor's way once opened. */
.my-hdw__unlock { position: relative; }

.my-hdw__hidecode {
	position: absolute; top: -2px; inset-inline-end: 0;
	width: 24px; height: 24px; border: 0; border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	background: #eef2f7; color: #6b7a8d; cursor: pointer; font-size: .72rem;
}
.my-hdw__hidecode:hover { background: #dde5ee; color: #23324d; }

/* Leave room for it beside the explanation. */
.my-hdw__unlock .my-hdw__hint { padding-inline-end: 28px; }

/* The "which conversation" box, above the waiting list. */
.my-hdw__jump { padding: 10px 12px 0; }
.my-hdw__jump .my-hdw__coderow input { letter-spacing: .18em; }

/* ------------------------------------------- shutting a nuisance out --- */
/*
 * Only on screen while the office has a conversation open. Quiet by default
 * and red only under the pointer: it is a rare, deliberate thing to press,
 * not something to catch the eye on every reply.
 */
.my-hdw__tools { padding: 0 12px 8px; display: flex; justify-content: flex-end; gap: 6px; flex-wrap: wrap; }

.my-hdw__block {
	display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
	border: 1px solid #e3d3d3; border-radius: 999px; background: #fff;
	padding: 5px 12px; font: inherit; font-size: .74rem; color: #9a6060;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.my-hdw__block:hover, .my-hdw__block:focus-visible {
	background: #c0392b; border-color: #c0392b; color: #fff;
}

/* Its opposite: same shape, the colour of putting something right. */
.my-hdw__unblock {
	display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
	border: 1px solid #cfe0d4; border-radius: 999px; background: #fff;
	padding: 5px 12px; font: inherit; font-size: .74rem; color: #4a7c59;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.my-hdw__unblock:hover, .my-hdw__unblock:focus-visible {
	background: #2f7d4f; border-color: #2f7d4f; color: #fff;
}

/*
 * Throwing the thread away. Quieter than the block button until it is pointed
 * at: this is the one with no undo, so it should not invite a passing press,
 * and the question that follows is where the weight belongs.
 */
.my-hdw__remove {
	display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
	border: 1px solid #ddd8d8; border-radius: 999px; background: #fff;
	padding: 5px 12px; font: inherit; font-size: .74rem; color: #7d7676;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.my-hdw__remove:hover, .my-hdw__remove:focus-visible {
	background: #5d5757; border-color: #5d5757; color: #fff;
}

/*
 * The question, in place of the button that raised it. One line, small, and
 * inside the chat - never the browser's own box over the whole page.
 */
.my-hdw__confirm {
	display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
	border: 1px solid #e6dcc6; border-radius: 999px; background: #fdfaf2;
	padding: 4px 5px 4px 12px; font-size: .74rem; color: #7a6a45;
}

.my-hdw__confirm-text { margin-inline-end: 2px; }

.my-hdw__yes, .my-hdw__no {
	cursor: pointer; font: inherit; font-size: .72rem; line-height: 1.5;
	border-radius: 999px; padding: 3px 12px; border: 1px solid transparent;
}

.my-hdw__yes { background: #c0392b; color: #fff; }
.my-hdw__yes:hover, .my-hdw__yes:focus-visible { background: #a93226; }

.my-hdw__no { background: #fff; border-color: #ddd3bd; color: #6b7a8d; }
.my-hdw__no:hover, .my-hdw__no:focus-visible { border-color: #b9ab8d; color: #4a5568; }

@media (prefers-reduced-motion: reduce) {
	.my-hdw__block, .my-hdw__unblock, .my-hdw__remove { transition: none; }
}