/*
 * gamja WhatsApp theme
 * Load AFTER gamja's own style.css:
 *   <link rel="stylesheet" href="./style.css">
 *   <link rel="stylesheet" href="./whatsapp.css">
 *
 * Works on stock gamja. Apply gamja-whatsapp.patch as well to get
 * your own messages as green right-side bubbles and drop the <nick> brackets.
 */

:root {
	--wa-green: #00a884;
	--wa-green-dark: #008069;
	--wa-panel: #ffffff;
	--wa-header: #f0f2f5;
	--wa-chat-bg: #efeae2;
	--wa-dots: rgba(0, 0, 0, 0.035);
	--wa-in: #ffffff;
	--wa-out: #d9fdd3;
	--wa-text: #111b21;
	--wa-text-2: #667781;
	--wa-divider: #e9edef;
	--wa-hover: #f5f6f6;
	--wa-active: #f0f2f5;
	--wa-input: #ffffff;
	--wa-pill: #ffffff;
	--wa-pill-text: #54656f;
	--wa-unread-bar: rgba(255, 255, 255, 0.55);
	--wa-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13);
	--wa-mention: #027eb5;
	--wa-error: #ea0038;

	/* remap gamja's own variables so anything left unstyled still matches */
	--main-background: var(--wa-panel);
	--main-color: var(--wa-text);
	--sidebar-background: var(--wa-panel);
	--expander-background: var(--wa-header);
	--expander-background-hover: var(--wa-divider);
	--expander-border: var(--wa-text-2);
	--button-color: #ffffff;
	--button-background: var(--wa-green);
	--button-background-hover: var(--wa-green-dark);
	--button-border: transparent;
	--danger-button-color: #ffffff;
	--danger-button-background: var(--wa-error);
	--danger-button-background-hover: #c2002f;
	--danger-button-border: transparent;
	--green: var(--wa-green);
	--gray: var(--wa-text-2);
	--red: var(--wa-error);
}

@media (prefers-color-scheme: dark) {
	:root {
		--wa-panel: #111b21;
		--wa-header: #202c33;
		--wa-chat-bg: #0b141a;
		--wa-dots: rgba(255, 255, 255, 0.025);
		--wa-in: #202c33;
		--wa-out: #005c4b;
		--wa-text: #e9edef;
		--wa-text-2: #8696a0;
		--wa-divider: #222d34;
		--wa-hover: #202c33;
		--wa-active: #2a3942;
		--wa-input: #2a3942;
		--wa-pill: #182229;
		--wa-pill-text: #8696a0;
		--wa-unread-bar: rgba(17, 27, 33, 0.6);
		--wa-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.3);
		--wa-mention: #53bdeb;
		--wa-error: #f15c6d;
	}
}

/* ---------- base ---------- */

html {
	scrollbar-color: var(--wa-text-2) transparent;
}

body {
	font-family: "Segoe UI", "Helvetica Neue", Helvetica, "Lucida Grande", Arial, Ubuntu, Cantarell, "Fira Sans", sans-serif;
	font-size: 14.2px;
	color: var(--wa-text);
	background: var(--wa-panel);
	-webkit-font-smoothing: antialiased;
}

a {
	color: var(--wa-mention);
}

button {
	border: none;
	border-radius: 18px;
	padding: 0.4rem 0.9rem;
	font: inherit;
	font-size: 0.85rem;
	font-weight: 500;
}

/* ---------- left panel: chat list ---------- */

#buffer-list {
	background: var(--wa-panel);
	border-right: 1px solid var(--wa-divider);
}

#buffer-list ul {
	min-width: 220px;
}

#buffer-list li a,
#buffer-list li:not(.type-server) a {
	position: relative;
	display: block;
	padding: 13px 40px 13px 16px;
	color: var(--wa-text);
	font-size: 15.5px;
	border-bottom: 1px solid var(--wa-divider);
	text-decoration: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

#buffer-list li.type-server a {
	font-weight: 600;
	color: var(--wa-text-2);
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	background: var(--wa-header);
}

#buffer-list li a:hover {
	background: var(--wa-hover);
	text-decoration: none;
}

#buffer-list li.active a {
	color: var(--wa-text);
	background: var(--wa-active);
}

#buffer-list li.error a {
	color: var(--wa-error);
}

#buffer-list li.unread-message a,
#buffer-list li.unread-highlight a {
	color: var(--wa-text);
	font-weight: 600;
}

/* green unread badge on the right, "@" for mentions */
#buffer-list li.unread-message a::after,
#buffer-list li.unread-highlight a::after {
	content: "";
	position: absolute;
	right: 16px;
	top: 50%;
	width: 10px;
	height: 10px;
	margin-top: -5px;
	border-radius: 50%;
	background: var(--wa-green);
}

#buffer-list li.unread-highlight a::after {
	content: "@";
	width: 20px;
	height: 20px;
	margin-top: -10px;
	color: #ffffff;
	font-size: 12px;
	font-weight: 700;
	line-height: 20px;
	text-align: center;
}

/* ---------- chat header ---------- */

#buffer-header {
	background: var(--wa-header);
	color: var(--wa-text);
	border-bottom: 1px solid var(--wa-divider);
	min-height: 59px;
	align-items: center;
}

#buffer-header .title {
	display: block;
	padding: 8px 16px 0;
	font-size: 16px;
	font-weight: 500;
}

#buffer-header .description {
	padding: 2px 16px 8px;
	color: var(--wa-text-2);
	font-size: 13px;
}

#buffer-header .actions {
	align-items: center;
	gap: 8px;
	padding: 0 12px;
}

#buffer-header .actions button {
	border-width: 0;
}

#buffer-header .status-here {
	color: var(--wa-green);
}

/* ---------- chat area ---------- */

#buffer {
	color: var(--wa-text-2);
	background-color: var(--wa-chat-bg);
	/* cheap dot wallpaper, no image request */
	background-image: radial-gradient(var(--wa-dots) 1.2px, transparent 1.4px);
	background-size: 22px 22px;
}

#buffer .logline-list {
	padding: 12px 6% 16px;
}

#buffer .logline {
	overflow: visible;
	overflow-wrap: anywhere;
	margin: 2px 0;
	line-height: 1.35;
}

/* --- message bubbles --- */

#buffer .logline.talk,
#buffer .logline.me-tell {
	position: relative;
	width: fit-content;
	max-width: min(65%, 640px);
	margin: 6px 0 2px 8px;
	padding: 6px 7px 8px 9px;
	color: var(--wa-text);
	background: var(--wa-in);
	border-radius: 7.5px;
	border-top-left-radius: 0;
	box-shadow: var(--wa-shadow);
	white-space: pre-line;
}

/* tail */
#buffer .logline.talk::before,
#buffer .logline.me-tell::before {
	content: "";
	position: absolute;
	top: 0;
	left: -8px;
	width: 8px;
	height: 13px;
	background: inherit;
	clip-path: polygon(0 0, 100% 0, 100% 100%);
}

/* reserves room so the timestamp never sits on top of the text */
#buffer .logline.talk::after,
#buffer .logline.me-tell::after {
	content: "";
	display: inline-block;
	width: 44px;
	height: 1px;
}

#buffer .logline.talk .timestamp,
#buffer .logline.me-tell .timestamp {
	position: absolute;
	right: 7px;
	bottom: 3px;
	color: var(--wa-text-2);
	font-size: 11px;
	line-height: 15px;
	text-decoration: none;
}

#buffer .logline.talk .nick {
	font-weight: 500;
	font-size: 12.8px;
	text-decoration: none;
}

#buffer .logline.me-tell {
	font-style: italic;
}

/* someone mentioned you */
#buffer .logline.highlight .nick {
	color: var(--wa-green);
	background: none;
}

#buffer .logline.talk.highlight {
	box-shadow: var(--wa-shadow), inset 3px 0 0 var(--wa-green);
}

/* --- with gamja-whatsapp.patch applied --- */

/* sender name on its own line, brackets hidden */
#buffer .logline.talk .sender {
	display: block;
	font-size: 0;
	line-height: 1.4;
	margin-bottom: 1px;
}

#buffer .logline.talk .sender .nick {
	font-size: 12.8px;
}

#buffer .logline.talk .text {
	white-space: pre-wrap;
}

/* your own messages: green, right side */
#buffer .logline.talk.self,
#buffer .logline.me-tell.self {
	margin-left: auto;
	margin-right: 8px;
	background: var(--wa-out);
	border-top-left-radius: 7.5px;
	border-top-right-radius: 0;
}

#buffer .logline.talk.self::before,
#buffer .logline.me-tell.self::before {
	left: auto;
	right: -8px;
	clip-path: polygon(0 0, 100% 0, 0 100%);
}

#buffer .logline.talk.self .sender {
	display: none;
}

/* --- joins, parts, modes, etc: small centered system pills --- */

#buffer .logline:not(.talk):not(.me-tell):not(.motd):not(.error) {
	width: fit-content;
	max-width: 80%;
	margin: 6px auto;
	padding: 5px 12px;
	color: var(--wa-pill-text);
	background: var(--wa-pill);
	border-radius: 7.5px;
	box-shadow: var(--wa-shadow);
	font-size: 12.5px;
	text-align: center;
	white-space: normal;
}

#buffer .logline:not(.talk):not(.me-tell) .timestamp {
	display: none;
}

#buffer .logline:not(.talk):not(.me-tell) .nick {
	color: inherit;
	font-weight: 600;
}

#buffer .logline.motd {
	color: var(--wa-text);
	font-family: monospace;
	font-size: 12.5px;
}

#buffer .logline.error {
	width: fit-content;
	margin: 6px auto;
	padding: 5px 12px;
	color: var(--wa-error);
	background: var(--wa-pill);
	border-radius: 7.5px;
	font-size: 12.5px;
}

/* --- date + unread separators --- */

#buffer .separator::before,
#buffer .separator::after {
	display: none;
}

#buffer .date-separator {
	display: block;
	width: fit-content;
	margin: 12px auto;
	padding: 5px 12px;
	color: var(--wa-pill-text);
	background: var(--wa-pill);
	border-radius: 7.5px;
	box-shadow: var(--wa-shadow);
	font-size: 12.5px;
	font-variant: normal;
	text-transform: uppercase;
}

#buffer .unread-separator {
	display: block;
	margin: 10px -7%;
	padding: 6px 0;
	color: var(--wa-text-2);
	background: var(--wa-unread-bar);
	font-size: 12.5px;
	font-variant: normal;
	text-transform: uppercase;
	text-align: center;
}

/* ---------- composer ---------- */

#composer {
	background: var(--wa-header);
	border-top: none;
	padding: 8px 16px;
}

#composer input {
	height: 42px;
	padding: 9px 12px;
	color: var(--wa-text);
	border-radius: 8px;
	font: inherit;
	font-size: 15px;
}

#composer input,
#composer input:focus {
	background: var(--wa-input);
}

#composer input::placeholder {
	color: var(--wa-text-2);
}

/* ---------- right panel: members ---------- */

#member-list {
	background: var(--wa-panel);
	border-left: 1px solid var(--wa-divider);
}

#member-list-header {
	background: var(--wa-header);
	color: var(--wa-text-2);
	border-left: none;
	border-bottom: 1px solid var(--wa-divider);
	padding: 0 16px;
	min-height: 59px;
	display: flex;
	align-items: center;
	font-size: 14px;
}

#member-list ul {
	min-width: 180px;
}

#member-list li a {
	padding: 10px 16px;
	color: var(--wa-text);
	border-bottom: 1px solid var(--wa-divider);
	text-decoration: none;
}

#member-list li a:hover {
	background: var(--wa-hover);
}

#member-list li a.away {
	color: var(--wa-text-2);
}

/* "group admin" style for ops */
.membership.owner,
.membership.admin,
.membership.op {
	color: var(--wa-green);
}

/* ---------- connect screen + dialogs ---------- */

#connect {
	color: var(--wa-text);
	background: var(--wa-header);
}

#connect form {
	max-width: 380px;
	margin-top: 8vh;
	padding: 28px 32px;
	background: var(--wa-panel);
	border-radius: 3px;
	box-shadow: 0 17px 50px 0 rgba(11, 20, 26, 0.19), 0 12px 15px 0 rgba(11, 20, 26, 0.24);
}

form input[type="text"],
form input[type="username"],
form input[type="password"],
form input[type="url"],
form input[type="email"],
form input[type="search"] {
	padding: 8px 2px;
	color: var(--wa-text);
	background: transparent;
	border: none;
	border-bottom: 2px solid var(--wa-divider);
	border-radius: 0;
	outline: none;
	transition: border-color 0.15s;
}

form input[type="text"]:focus,
form input[type="username"]:focus,
form input[type="password"]:focus,
form input[type="url"]:focus,
form input[type="email"]:focus,
form input[type="search"]:focus {
	border-bottom-color: var(--wa-green);
}

/* composer input is a text input inside a form, undo the line above */
#composer input,
#composer input:focus {
	border: none;
}

.dialog {
	background-color: rgba(11, 20, 26, 0.6);
}

.dialog .dialog-body {
	color: var(--wa-text);
	background: var(--wa-panel);
	border: none;
	border-radius: 3px;
	box-shadow: 0 17px 50px 0 rgba(11, 20, 26, 0.19), 0 12px 15px 0 rgba(11, 20, 26, 0.24);
}

#error-msg {
	color: #ffffff;
	background: var(--wa-error);
	border-radius: 6px;
}

ul.switcher-list li a.selected {
	background: var(--wa-active);
}

.expander {
	background: var(--wa-header);
}

/* ---------- mobile ---------- */

@media (max-width: 640px) {
	#buffer .logline-list {
		padding: 10px 10px 14px;
	}

	#buffer .logline.talk,
	#buffer .logline.me-tell {
		max-width: 85%;
	}

	#buffer .unread-separator {
		margin-left: -10px;
		margin-right: -10px;
	}

	#buffer-list ul,
	#member-list ul {
		min-width: 0;
	}

	#buffer-list.expand ul,
	#member-list.expand ul {
		min-width: 220px;
	}
}
/* force dark mode for everyone, neutral black */
:root {
	--wa-panel: #0f0f0f;
	--wa-header: #1c1c1c;
	--wa-chat-bg: #080808;
	--wa-dots: rgba(255, 255, 255, 0.025);
	--wa-in: #1f1f1f;
	--wa-out: #005c4b;
	--wa-text: #ececec;
	--wa-text-2: #8c8c8c;
	--wa-divider: #232323;
	--wa-hover: #1a1a1a;
	--wa-active: #2a2a2a;
	--wa-input: #262626;
	--wa-pill: #171717;
	--wa-pill-text: #8c8c8c;
	--wa-unread-bar: rgba(20, 20, 20, 0.6);
	--wa-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.5);
	--wa-mention: #53bdeb;
	--wa-error: #f15c6d;
	color-scheme: dark;
}