/*
 * The demo banner, and nothing else.
 *
 * Deliberately almost empty: every other rule on this page belongs to the
 * product, and a demo stylesheet that starts adjusting the chat is a demo that
 * stops showing what people are buying.
 */

.talkzyo-demo__note {
	margin: 0 0 14px;
	padding: 10px 14px;
	border: 1px solid #f0d49a;
	border-left-width: 3px;
	border-radius: 9px;
	background: #fffaf0;
	color: #7a5620;
	font-size: 13px;
	line-height: 1.55;
}

.talkzyo-demo__note strong { font-weight: 650; }

/*
 * The "that would have been sent on a real site" message.
 *
 * It carries two links now, which changes two things it used to get away
 * with. pointer-events was none - fine for a message nobody can act on, and
 * fatal for one with buttons in it, which would have been visible and dead.
 * And z-index was 99999, under the embedded panel at 2147483000, so on the
 * demo page the notice was appearing behind the thing it was about.
 */
/*
 * A dialog, centred, on its own backdrop.
 *
 * z-index above the embedded panel ( 2147483000 ) and above the floating
 * window and launcher, because this is a message about the thing underneath
 * it and has to be in front of all of it.
 */
.talkzyo-demo-modal {
	position: fixed;
	inset: 0;
	z-index: 2147483100;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	/* Dark enough to quieten the page, light enough to keep it visible, so it
	   reads as "paused" rather than "you have left the demo". */
	background: rgba(17, 20, 28, .55);
	opacity: 0;
	visibility: hidden;
	transition: opacity .16s ease, visibility 0s linear .16s;
}

.talkzyo-demo-modal.is-on {
	opacity: 1;
	visibility: visible;
	transition: opacity .16s ease;
}

.talkzyo-demo-modal__card {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	max-width: 420px;
	padding: 30px 28px 26px;
	border-radius: 18px;
	background: #fff;
	color: #1d2327;
	text-align: center;
	box-shadow: 0 24px 60px -18px rgba(17, 20, 28, .45), 0 2px 8px rgba(17, 20, 28, .08);
	transform: translateY(8px) scale(.98);
	transition: transform .18s cubic-bezier(.2, .8, .3, 1);
}

.talkzyo-demo-modal.is-on .talkzyo-demo-modal__card {
	transform: none;
}

/* Top-right, inside the padding, and a hit area bigger than the glyph. */
.talkzyo-demo-modal__close {
	position: absolute;
	top: 12px;
	right: 12px;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #6b7280;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}

.talkzyo-demo-modal__close:hover,
.talkzyo-demo-modal__close:focus-visible {
	background: #f1f2f6;
	color: #1d2327;
}

.talkzyo-demo-modal__icon {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	margin: 0 auto 16px;
	border-radius: 50%;
	background: rgba(35, 86, 250, .08);
	color: #2356fa;
}

.talkzyo-demo-modal__title {
	margin: 0 0 8px;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.3;
	color: #1d2327;
}

.talkzyo-demo-modal__text {
	margin: 0 0 22px;
	font-size: 14px;
	line-height: 1.55;
	color: #5b6472;
}

.talkzyo-demo-modal__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
}

.talkzyo-demo-modal__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 1 1 150px;
	padding: 11px 18px;
	border-radius: 999px;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	text-decoration: none;
	transition: background-color .15s ease, color .15s ease;
}

.talkzyo-demo-modal__button.is-free {
	background: #f1f2f6;
	color: #1d2327;
}

.talkzyo-demo-modal__button.is-free:hover {
	background: #e6e8ef;
	color: #1d2327;
}

.talkzyo-demo-modal__button.is-pro {
	background: #2356fa;
	color: #fff;
}

.talkzyo-demo-modal__button.is-pro:hover {
	background: #1b47d6;
	color: #fff;
}

/* On a phone the two buttons stack rather than squeezing side by side. */
@media (max-width: 420px) {

	.talkzyo-demo-modal__card { padding: 26px 20px 22px; }

	.talkzyo-demo-modal__button { flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {

	.talkzyo-demo-modal,
	.talkzyo-demo-modal__card { transition: none; }
}

/*
 * Above whatever the marketing site is floating over the page.
 *
 * The chat sets its own stacking on the assumption it is the most important
 * thing on screen, which is true on a member's inbox and false on a sales
 * site carrying a countdown bar, a cookie notice and a support bubble. On the
 * demo page the chat IS the page, so it wins.
 *
 * Scoped to .talkzyo-demo, so nothing here changes how the plugin stacks on a
 * customer's site - that would be this stylesheet reaching outside the one
 * page it owns.
 */
.talkzyo-demo { position: relative; z-index: 2147483000; }

.talkzyo-demo .talkzyo_app,
.talkzyo-demo #talkzyo-chat-center { position: relative; z-index: 2147483000; }

/*
 * The parts the chat renders into the body rather than into the page - the
 * emoji picker, the lightbox, the dropdown menus - escape the container
 * above, so they are raised on their own.
 */
.talkzyo-emoji-picker,
.emojionearea-picker,
.talkzyo-menu-chat,
.talkzyo-dropdown,
.pswp { z-index: 2147483001 !important; }

/* ------------------------------------------------------- "View demo" -- */

/*
 * A label beside the chat launcher.
 *
 * The launcher is a circle with a speech bubble in it, which on a marketing
 * site reads as a support widget - the thing visitors have learned to ignore.
 * Saying what it actually is turns it from furniture into an invitation.
 *
 * Positioned against the viewport rather than nested in the launcher, because
 * the launcher is injected by an AJAX response and putting anything inside it
 * means the plugin owns our markup. Same z-index, so the two stay together.
 */
.talkzyo-demo-cta {
	position: fixed;
	bottom: 48px;
	right: 97px;
	z-index: 99999999;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 9px 15px;
	border: 0;
	border-radius: 999px;
	background: #fff;
	color: #11151f;
	font: 650 13px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	white-space: nowrap;
	cursor: pointer;

	/*
	 * A hairline, because a white pill on a white page is an invisible pill.
	 * The shadow alone is not enough once it is sitting over the hero, which
	 * is nearly white itself.
	 */
	border: 1px solid rgba(17, 21, 31, .10);
	box-shadow: 0 10px 26px -10px rgba(17, 21, 31, .35);
}

/* Follows the launcher when the sidebar is set to the left. */
.talkzyo-demo-cta.is-left { right: auto; left: 97px; }

.talkzyo-demo-cta::after {
	content: "";
	position: absolute;
	right: -5px;
	width: 10px;
	height: 10px;
	background: #fff;

	/* Only the two outer edges, so the hairline does not cross the pill. */
	border-right: 1px solid rgba(17, 21, 31, .10);
	border-top: 1px solid rgba(17, 21, 31, .10);
	transform: rotate(45deg);
}

.talkzyo-demo-cta.is-left::after {
	right: auto;
	left: -5px;
	border: 0;
	border-left: 1px solid rgba(17, 21, 31, .10);
	border-bottom: 1px solid rgba(17, 21, 31, .10);
}

.talkzyo-demo-cta__hand {
	font-size: 15px;
	line-height: 1;

	/*
	 * Its own small motion, out of step with the pill's nudge, so the hand
	 * looks like it is pointing rather than like the whole pill twitched.
	 */
	animation: talkzyo-demo-point 1.6s ease-in-out infinite;
}

@keyframes talkzyo-demo-point {
	0%, 100% { transform: translateX(0); }
	50%      { transform: translateX(3px); }
}

.talkzyo-demo-cta.is-left .talkzyo-demo-cta__hand {
	animation-name: talkzyo-demo-point-left;
}

@keyframes talkzyo-demo-point-left {
	0%, 100% { transform: translateX(0); }
	50%      { transform: translateX(-3px); }
}

/*
 * The nudge.
 *
 * Short, and it stops for good once the chat has been opened - an animation
 * that keeps going after somebody has acted on it is no longer a hint, it is
 * a fidget on their screen.
 */
@keyframes talkzyo-demo-shake {
	0%, 100%      { transform: translateX(0) rotate(0) scale(1); }
	10%           { transform: scale(1.06); }
	20%, 50%, 80% { transform: translateX(-6px) rotate(-4deg) scale(1.04); }
	35%, 65%, 95% { transform: translateX(6px) rotate(4deg) scale(1.04); }
}

.talkzyo-demo-cta.is-nudging,
.talkzyo-chat-mini-side-bar.talkzyo-demo-nudging {
	animation: talkzyo-demo-shake .7s ease;
}

@media (prefers-reduced-motion: reduce) {
	.talkzyo-demo-cta.is-nudging,
	.talkzyo-chat-mini-side-bar.talkzyo-demo-nudging,
	.talkzyo-demo-cta__hand { animation: none; }
}

/* Under 420px the circle is enough; a pill beside it would cover the page. */
@media (max-width: 420px) {
	.talkzyo-demo-cta { display: none; }
}

/* ---------------------------------------------------- above the banner -- */

/*
 * The chat panel sits at z-index 999 and the store's promo bar at 9999, so
 * the bar covered the top of the sidebar - the tabs and the search box, which
 * is the part somebody opens it to use. The launcher never showed the problem
 * because it carries 99999999 of its own.
 *
 * The chat is raised rather than the bar lowered. On the home page the bar is
 * doing its job and should stay over the page; it is only the open chat, an
 * overlay the visitor just asked for, that has to be in front of it.
 *
 * This stylesheet only loads on the home page and the demo page, so a
 * customer's own site keeps the plugin's stacking exactly as shipped.
 */
#talkzyo-chat,
#talkzyo-chat-windows { z-index: 100000000; }

/* Its own notices panel sits one above, as the plugin intends. */
#talkzyo-chat.talkzyo-has-notices-open { z-index: 100000001; }

/*
 * Gone once the chat is open, and for the rest of the session after that.
 * Visibility rather than display so the pill does not reflow the page when
 * it leaves, and so a reopened chat does not make it pop back mid-animation.
 */
.talkzyo-demo-cta.is-hidden {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

/*
 * The file card, until the chat itself carries this.
 *
 * Two things in Talkzyo combine against a message that carries a document and
 * a photograph at once. The wrapper's data-talkzyo-type names only the LAST
 * attachment, so such a message is labelled "image"; and the picture rule for
 * that type selects every .talkzyo-attachment-item inside, which includes the
 * document's card. The card is flattened to display:block, its name and size
 * are display:block inside an inline span, and they drop onto their own line
 * under the icon - so the same ZIP looks like one component on its own and a
 * different one next to a picture.
 *
 * Both fixed in talkzyo-chat.css: the layout moved onto the card, and the
 * picture rule now excludes it. This repeats that here so the demo does not
 * wait for a release, at a specificity that beats the picture rule whichever
 * stylesheet loads second. Identical values, so it is a no-op once the fix
 * ships, and can be deleted then.
 */
.talkzyo-message-attachment[data-talkzyo-type] .talkzyo-attachment-item.talkzyo-message-file {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	padding: 8px;
}

.talkzyo-message-attachment .talkzyo-file-icon svg {
	width: 38px;
	height: 38px;
	padding: 8px;
	display: block;
}

.talkzyo-message-attachment .yzw-file-title { font-size: 12px; }
.talkzyo-message-attachment .yzw-file-size { font-size: 10px; }

/*
 * The reply and forward controls, until the chat itself carries this.
 *
 * They sit in the row beside the message, and a flex item shrinks before it
 * overflows - so a wide bubble, a long unbroken word or an attachment card
 * squeezed them until the forward icon had no width left and was simply not
 * drawn. Present on some messages, missing on others, with nothing different
 * about the messages themselves except how much room was left.
 *
 * .talkzyo-react-message already holds its ground with flex: 0 0 auto. Fixed
 * properly in talkzyo-chat.css for these three; repeated here so the demo
 * does not wait for a release. A no-op once it ships.
 */
.talkzyo-message-row .talkzyo-reply-message,
.talkzyo-message-row .talkzyo-resend-message,
.talkzyo-message-row .talkzyo-message-tools,
.talkzyo-reply-message svg,
.talkzyo-resend-message svg {
	flex-shrink: 0;
}

/*
 * The reaction picker, over the chat rather than behind it.
 *
 * The picker is portalled out to <body> so a scrolling message list cannot
 * clip it, and it sits at z-index 99999 - which clears the chat's own 999
 * everywhere else in the world. It does not clear the demo page, where the
 * embedded panel is raised to 2147483000 to sit over the store's chrome. The
 * emoji row was being portalled out of the panel and straight underneath it.
 *
 * One above .pswp, which is the only other thing lifted to that layer.
 *
 * `body` on the front, and not for weight alone: this stylesheet is enqueued
 * BEFORE the chat's own, so a rule of equal specificity loses the cascade to
 * core no matter what it says. Several overrides further up this file are
 * written as bare #talkzyo-chat and quietly do nothing for that reason - see
 * the note at the end.
 */
body .talkzyo-reaction-picker.is-portal {
	z-index: 2147483002;
}

/*
 * Dialogs, over the panel rather than beneath it.
 *
 * The chat's own layers assume it is the top of the page: the members modal
 * sits at 9999, its overlay at 1000, the confirm dialogs at 99999. All of
 * that clears the chat's 999 anywhere else. On the demo page the embedded
 * panel is raised to 2147483000, so every one of them opened underneath it -
 * the request went out, the server answered with the members, the markup was
 * added to the page with display:block, and the visitor saw nothing happen.
 *
 * Ordered as the chat orders them, just shifted above the panel, so a dialog
 * still covers its own overlay and the confirm still covers the modal that
 * raised it.
 *
 * `body` on the front for the same reason as the picker above: this file is
 * enqueued before the chat's, so equal specificity loses.
 */
body .talkzyo-modal-overlay { z-index: 2147483003; }
body #talkzyo-modal,
body .talkzyo-modal { z-index: 2147483004; }
body .talkzyo-dialog { z-index: 2147483005; }
body .talkzyo-msg-dialog { z-index: 2147483006; }

/*
 * Member cards lined up with the tabs above them, until the chat carries it.
 *
 * Two parts. The modal's own inset goes to 35px on the sides, matching the
 * 35px already under it, so the dialog reads as one column. And the card list
 * stops adding a second 15px on top of that - it was what put the cards one
 * step inside the tab strip above them.
 *
 * Fixed in talkzyo-chat.css; mirrored here so the demo does not wait for a
 * release. Both are no-ops once it ships.
 *
 * The id in the chat's own selector outweighs a plain class, so the first
 * rule needs one of its own to land.
 */
body #talkzyo-modal .talkzyo-modal-content {
	padding-left: 35px;
	padding-right: 35px;
}

body .talkzyo-modal-content > .talkzyo-form-list-items {
	padding-left: 0;
	padding-right: 0;
	/* The list's 10px scrollbar sits in the modal's padding, or it eats into
	   the cards and leaves them short of the right-hand line. The gutter is
	   reserved whether the list scrolls or not, so the two always cancel -
	   without it a short list has no bar to take the space back and the cards
	   overhang instead. */
	scrollbar-gutter: stable;
	margin-right: -10px;
}