/* From https://developer.apple.com/design/human-interface-guidelines/color */
/* From https://www.figma.com/community/file/1527721578857867021/ios-and-ipados-26 */
/* TODO: iMessage colours from beta-versions */
/* TODO: Figure out systemGray, I've de-blued it but maybe convert it to a transparancy thing like the text (??) */
@media (prefers-color-scheme: light) {
	:root {
		--apple-colour-red: rgb(255, 56, 60);
		--apple-colour-orange: rgb(255, 141, 40);
		--apple-colour-yellow: rgb(255, 204, 0);
		--apple-colour-green: rgb(52, 199, 89);
		--apple-colour-mint: rgb(0, 200, 179);
		--apple-colour-teal: rgb(0, 195, 209);
		--apple-colour-cyan: rgb(0, 192, 232);
		--apple-colour-blue: rgb(0, 136, 255);
		--apple-colour-indigo: rgb(97, 85, 245);
		--apple-colour-purple: rgb(203, 48, 224);
		--apple-colour-pink: rgb(255, 45, 85);
		--apple-colour-brown: rgb(172, 127, 94);
		--apple-text-primary: rgb(0, 0, 0);
		--apple-text-primary-inverted: rgb(255, 255, 255);
		--apple-text-secondary: rgb(0, 0, 5, 0.50); /* Based on #8A8A8E, increased from 45% to 50% */
		--apple-text-tertiary: rgb(0, 0, 3, 0.40); /* Based on #C4C4C7, increased from 25% to 40% */
		--apple-text-quaternary: rgb(0, 0, 1, 0.25); /* Based on #DCDCDD, increased from 15% to 25% */
		--apple-gray-systemGray: rgb(142, 142, 142);
		--apple-gray-systemGray2: rgb(174, 174, 174);
		--apple-gray-systemGray3: rgb(199, 199, 199);
		--apple-gray-systemGray4: rgb(209, 209, 209);
		--apple-gray-systemGray5: rgb(229, 229, 229);
		--apple-gray-systemGray6: rgb(242, 242, 242);
		--apple-imessage-base: rgb(255, 255, 255);
		--apple-imessage-sidebar: rgb(247, 247, 247);
		--apple-imessage-search: rgb(0, 0, 0, 0.026); /* Based on rgb(240, 240, 240) */
		--apple-imessage-composer: rgb(0, 0, 0, 0.03); /* Based on rgb(247, 247, 247) */
	}
	@media (prefers-contrast: more) {
		:root {
			--apple-colour-red: rgb(233, 21, 45);
			--apple-colour-orange: rgb(197, 83, 0);
			--apple-colour-yellow: rgb(161, 106, 0);
			--apple-colour-green: rgb(0, 137, 50);
			--apple-colour-mint: rgb(0, 133, 117);
			--apple-colour-teal: rgb(0, 129, 152);
			--apple-colour-cyan: rgb(0, 126, 174);
			--apple-colour-blue: rgb(30, 110, 244);
			--apple-colour-indigo: rgb(86, 74, 222);
			--apple-colour-purple: rgb(176, 47, 194);
			--apple-colour-pink: rgb(231, 18, 77);
			--apple-colour-brown: rgb(149, 109, 81);
			--apple-text-secondary: rgb(0, 0, 5, 0.9);
			--apple-text-tertiary: rgb(0, 0, 3, 0.8);
			--apple-text-quaternary: rgb(0, 0, 1, 0.5);
			--apple-gray-systemGray: rgb(108, 108, 108);
			--apple-gray-systemGray2: rgb(142, 142, 142);
			--apple-gray-systemGray3: rgb(174, 174, 174);
			--apple-gray-systemGray4: rgb(188, 188, 188);
			--apple-gray-systemGray5: rgb(216, 216, 216);
			--apple-gray-systemGray6: rgb(235, 235, 235);
		}
	}
	@media (prefers-reduced-transparency), (prefers-contrast: more) {
		:root {
			--apple-imessage-sidebar: rgb(234, 234, 234);
			--apple-imessage-composer: rgb(0, 0, 0, 0.10); /* Based on rgb(229, 229, 229) */
		}
	}
	@media screen and (max-width: 45rem) and (any-pointer: coarse) {
		:root {
			--apple-imessage-base: rgb(255, 255, 255) !important; /* Double-check for iOS 26; This is the iOS 18 colour */
			--apple-imessage-sidebar: rgb(255, 255, 255) !important; /* Double-check for iOS 26 */
			--apple-imessage-search: rgb(238, 238, 239); /* Double-check for iOS 26 + turn into RGBA format; This is the iOS 18 colour */
			--apple-imessage-composer: rgb(255, 255, 255, 0) !important; /* Double-check for iOS 26; This is the iOS 18 colour */
		}
	}
	
}
@media (prefers-color-scheme: dark) {
	:root {
		--apple-colour-red: rgb(255, 66, 69);
		--apple-colour-orange: rgb(255, 146, 48);
		--apple-colour-yellow: rgb(255, 214, 0);
		--apple-colour-green: rgb(48, 209, 88);
		--apple-colour-mint: rgb(0, 218, 195);
		--apple-colour-teal: rgb(0, 210, 224);
		--apple-colour-cyan: rgb(60, 211, 224);
		--apple-colour-blue: rgb(0, 145, 255);
		--apple-colour-indigo: rgb(107, 93, 255);
		--apple-colour-purple: rgb(219, 52, 242);
		--apple-colour-pink: rgb(255, 55, 95);
		--apple-colour-brown: rgb(183, 138, 102);
		--apple-text-primary: #FFFFFF;
		--apple-text-primary-inverted: #000000;
		--apple-text-secondary: rgb(249, 249, 255, 0.50); /* Based on #8D8D93, Increased from 45% to 50% */
		--apple-text-tertiary: rgb(252, 252, 255, 0.40); /* Based on #47474A, Increased from 25% to 40% */
		--apple-text-quaternary: rgb(254, 254, 255, 0.25); /* Based on #262627, Increased from 15% to 25% */
		--apple-gray-systemGray: rgb(142, 142, 142);
		--apple-gray-systemGray2: rgb(99, 99, 99);
		--apple-gray-systemGray3: rgb(72, 72, 72);
		--apple-gray-systemGray4: rgb(58, 58, 58);
		--apple-gray-systemGray5: rgb(44, 44, 44);
		--apple-gray-systemGray6: rgb(28, 28, 28);
		--apple-imessage-base: rgb(30, 30, 32); /* Technically its 30,30,30; Changed for the blue-tint consistency */
		--apple-imessage-sidebar: rgb(27, 27, 27);
		--apple-imessage-search: rgb(30, 30, 30); /* Based on rgb(30, 30, 30); TODO Change into RGBA later */
		--apple-imessage-composer: rgb(255, 255, 255, 0.033); /* Based on rgb(40, 40, 40) */
	}
	@media (prefers-contrast: more) {
		:root {
			--apple-colour-red: rgb(255, 97, 101);
			--apple-colour-orange: rgb(255, 160, 86);
			--apple-colour-yellow: rgb(254, 223, 67);
			--apple-colour-green: rgb(74, 217, 104);
			--apple-colour-mint: rgb(84, 223, 203);
			--apple-colour-teal: rgb(59, 221, 236);
			--apple-colour-cyan: rgb(109, 217, 255);
			--apple-colour-blue: rgb(92, 184, 255);
			--apple-colour-indigo: rgb(167, 170, 255);
			--apple-colour-purple: rgb(234, 141, 255);
			--apple-colour-pink: rgb(255, 138, 196);
			--apple-colour-brown: rgb(219, 166, 121);
			--apple-text-secondary: rgb(249, 249, 255, 0.9);
			--apple-text-tertiary: rgb(252, 252, 255, 0.8);
			--apple-text-quaternary: rgb(254, 254, 255, 0.5);
			--apple-gray-systemGray: rgb(174, 174, 174);
			--apple-gray-systemGray2: rgb(124, 124, 124);
			--apple-gray-systemGray3: rgb(84, 84, 84);
			--apple-gray-systemGray4: rgb(68, 68, 68);
			--apple-gray-systemGray5: rgb(54, 54, 54);
			--apple-gray-systemGray6: rgb(36, 36, 36);
		}
	}
	@media (prefers-reduced-transparency), (prefers-contrast: more) {
		:root {
			--apple-imessage-base: rgb(32, 32, 34); /* Technically its 30,30,30; Changed for the blue-tint consistency */
			--apple-imessage-sidebar: rgb(28, 28, 28);
			--apple-imessage-composer: rgb(255, 255, 255, 0.015); /* Technically its 35,35,35; Changed for the blue-tint consistency */
		}
	}
	@media screen and (max-width: 45rem) and (any-pointer: coarse) {
		:root {
			--apple-imessage-base: rgb(0, 0, 0) !important; /* Double-check for iOS 26; This is the iOS 18 colour */
			--apple-imessage-sidebar: rgb(0, 0, 0); /* Double-check for iOS 26 */
			--apple-imessage-search: rgb(28, 28, 30); /* Double-check for iOS 26 + turn into RGBA format; This is the iOS 18 colour */
			--apple-imessage-composer: rgb(0, 0, 0, 0) !important; /* Double-check for iOS 26; This is the iOS 18 colour */
		}
	}
}

:root {
	/* Border Radii's */
	--apple-corner-radius-1-selection: 0.5rem; /* ~ Border radius of macOS sidebar selections */
	--apple-corner-radius-2: 1rem; /* */
	--apple-corner-radius-3-macos-inner: 1.5rem; /* Border radius of macOS app "inner" sidebars */
	--apple-corner-radius-4-macos: 2rem; /* ~ Border radius of macOS windows + popups + "sliding tab" */
	--apple-corner-radius-5-capsule: 100rem; /* Buttons, elements near screen borders, etc. */
	
	/* [MIT] from https://github.com/Nezz/homeassistant-visionos-theme/blob/master/themes/Liquid%20Glass.yaml */
	/* TODO: Different light/dark mode shadows, this one is more for dark-mode */
	--apple-glass-box-shadow: 3px 3px 0.5px -3.5px rgba(255, 255, 255, 0.30) inset, -2px -2px 0.5px -2px rgba(255, 255, 255, 0.30) inset, 0 0 8px 1px rgba(255, 255, 255, 0.10) inset, 0 0 2px 0 rgba(0, 0, 0, 0.10);
	
	/* TODO: Add standardised backdrop-filter as well as one for hovering (should utilise darkening via brightness()?) */
	@media (prefers-color-scheme: light) {
		--apple-glass-backdrop: blur(8px) !important;
	}
	@media (prefers-color-scheme: dark) {
		--apple-glass-backdrop: blur(8px) !important;
	}
	
	--apple-opacity-timeline: 50%;
	--apple-opacity-timeline-colour-hover: 75%;
	--apple-opacity-room: 75%;
	--apple-opacity-cosmetic-basic: 50%;
	--apple-opacity-cosmetic-overlay: 75%;
	--apple-opacity-inactive-background: 70%;
	--apple-opacity-glass-overlay: 40%;
	--apple-opacity-glass-context: 70%;
	--apple-opacity-glass-composer: 60%;
	
	
	@media (prefers-reduced-transparency) {
		--apple-opacity-cosmetic-basic: 100%;
		--apple-opacity-cosmetic-overlay: 100%;
		--apple-opacity-inactive-background: 90%;
		--apple-opacity-glass-overlay: 75%;
		--apple-opacity-glass-composer: 90%;
		
	}
	@media (prefers-contrast: more) {
		--apple-opacity-cosmetic-basic: 100%;
		--apple-opacity-cosmetic-overlay: 100%;
		--apple-opacity-inactive-background: 98%;
		--apple-opacity-glass-overlay: 100%;
		--apple-opacity-glass-composer: 100%;
		--apple-opacity-room: 80%;
	}
	
	/* Gomuks stuff */
	/** Refer to https://github.com/gomuks/gomuks/blob/main/web/src/index.css **/
	/** Last fetched 45f0841e5dae27a84f3d29211447afea853af6b0 **/
	--background-color: var(--apple-imessage-base) !important;
	/* TODO: --login-background-color: #eee; */
	--text-color: var(--apple-text-primary) !important;
	--inverted-text-color: var(--apple-text-primary-inverted) !important;
	--secondary-text-color: var(--apple-text-secondary) !important;
	--semisecondary-text-color: var(--apple-text-tertiary) !important;
	--link-text-color: var(--apple-colour-blue) !important;
	--visited-link-text-color: var(--link-text-color) !important;
	
	--code-background-color: rgb(from var(--apple-gray-systemGray5) r g b / var(--apple-opacity-cosmetic-basic)) !important;
	--media-placeholder-default-background: var(--apple-gray-systemGray4) !important;
	--media-placeholder-button-background: rgb(from  var(--apple-gray-systemGray6) r g b / var(--apple-opacity-cosmetic-overlay)) !important;
	
	--primary-color: var(--apple-colour-green) !important;
	--primary-color-dark: var(--apple-colour-green) !important; /* Should be fine...? */
	--error-color: var(--apple-colour-red) !important;
	
	--border-color: var(--apple-gray-systemGray3) !important; /* Colour for ALL the borders */
	@media (prefers-contrast: more) {
		--border-color: var(--apple-gray-systemGray) !important;
	}
	--pill-background-color: rgb(from var(--apple-gray-systemGray2) r g b / var(--apple-opacity-glass-overlay)) !important;
	--url-preview-background-color: rgb(from var(--apple-gray-systemGray2) r g b / var(--apple-opacity-glass-overlay)) !important;
	--highlight-pill-background-color: var(--primary-color) !important;
	--highlight-pill-text-color: var(--inverted-text-color) !important;
	--button-hover-color: rgb(from var(--apple-gray-systemGray3) r g b / var(--apple-opacity-glass-overlay)) !important; /* Hover colour for ALL the buttons*/
	--light-hover-color: rgb(from var(--apple-gray-systemGray3) r g b / var(--apple-opacity-glass-overlay)) !important; /* Hover colour for reactions */
	
	--composer-background-color: var(--apple-imessage-composer) !important;
	
	--timeline-hover-bg-color: rgb(from var(--apple-gray-systemGray4) r g b / var(--apple-opacity-timeline)) !important;
	--timeline-highlight-bg-color: rgb(from var(--apple-colour-yellow) r g b / calc(var(--apple-opacity-timeline) - 40%)) !important;
	--timeline-highlight-hover-bg-color: rgb(from var(--apple-colour-yellow) r g b / calc(var(--apple-opacity-timeline-colour-hover) - 50%)) !important;
	--timeline-jump-bg-color: rgb(from var(--apple-colour-green) r g b / var(--apple-opacity-timeline)) !important;
	--timeline-jump-hover-bg-color: rgb(from var(--apple-colour-green) r g b / var(--apple-opacity-timeline-colour-hover)) !important;
	--timeline-soft-failed-bg-color: rgb(from var(--apple-colour-red) r g b / 30%) !important;
	--timeline-policy-server-spammy-bg-color: rgb(from var(--apple-colour-red) r g b / 20%) !important;
	
	--room-list-background: var(--apple-imessage-sidebar) !important;
	--room-list-background-overlay: transparent !important;
	--room-list-search-background-overlay: transparent !important;
	--space-list-background-overlay: transparent !important;
	--room-list-scrollbar-color: var(--apple-gray-systemGray2) var(--apple-imessage-sidebar) !important;
	--room-list-entry-hover-color: rgb(from var(--apple-gray-systemGray4) r g b / var(--apple-opacity-room)) !important;
	--room-list-entry-selected-color: rgb(from var(--apple-gray-systemGray3) r g b / var(--apple-opacity-room)) !important;
	
	--dimmed-overlay-background-color: rgb(from var(--apple-imessage-base) r g b / var(--apple-opacity-inactive-background)) !important;
	--modal-box-shadow-color: rgba(0, 0, 0, 0.1); /* Composer, Emoji/Sticker/GIF box-shadow */
	
	--emoji-selected-border-color: var(--primary-color) !important;
	
	/* TODO: Unread counters */
	--unread-counter-text-color: var(--inverted-text-color);
	--unread-counter-message-bg: rgba(0, 0, 0, 0.35);
	--unread-counter-notification-bg: rgba(50, 150, 0, 0.7);
	--unread-counter-marked-unread-bg: var(--unread-counter-notification-bg);
	--unread-counter-highlight-bg: rgba(200, 0, 0, 0.7);
	--space-unread-counter-message-bg: rgb(100, 100, 100, 0.9);
	--space-unread-counter-notification-bg: rgb(50, 150, 0);
	--space-unread-counter-highlight-bg: rgb(200, 0, 0);
	@media (prefers-color-scheme: dark) {
		--unread-counter-message-bg: rgba(255, 255, 255, 0.5);
		--unread-counter-notification-bg: rgba(150, 255, 0, 0.7);
		--unread-counter-highlight-bg: rgba(255, 50, 50, 0.7);
		--space-unread-counter-message-bg: rgb(200, 200, 200, 0.8);
		--space-unread-counter-notification-bg: rgb(150, 255, 0);
		--space-unread-counter-highlight-bg: rgb(255, 50, 50);
	}
	
	/* Green is reserved for gomuks */
	--sender-color-0: var(--apple-colour-red) !important;
	--sender-color-1: var(--apple-colour-orange) !important;
	--sender-color-2: var(--apple-colour-yellow) !important;
	--sender-color-3: var(--apple-colour-mint) !important;
	--sender-color-4: var(--apple-colour-teal) !important;
	--sender-color-5: var(--apple-colour-cyan) !important;
	--sender-color-6: var(--apple-colour-blue) !important;
	--sender-color-7: var(--apple-colour-indigo) !important;
	--sender-color-8: var(--apple-colour-purple) !important;
	--sender-color-9: var(--apple-colour-pink) !important;
	
	--sent-ok-color: var(--border-color);
	--sent-error-color: var(--error-color);
	--blockquote-border-color: var(--apple-gray-systemGray2) !important;
	--lightbox-button-color: var(--border-color);
}

/* Accesibility stuff */
@media (prefers-contrast: more) {
	div.event-reactions > div.reaction {
		background-color: var(--apple-gray-systemGray4) !important;
		&:hover {
			background-color: var(--apple-gray-systemGray2) !important;
		}
	}
}

/**** Globals ****/
/*** Context Menu ***/
div.context-menu {
	/** Desktop / Mouse **/
	@media screen and (any-pointer: fine) {
		background-color: rgb(from var(--apple-imessage-base) r g b / var(--apple-opacity-glass-context)) !important;
		backdrop-filter: var(--apple-glass-backdrop) !important;
		width: 12rem !important;
		padding: 0.25rem !important;
		border: 1px solid rgb(from var(--apple-gray-systemGray2) r g b / var(--apple-opacity-glass-context)) !important;
		border-radius: var(--apple-corner-radius-1-selection) !important;
		filter: drop-shadow(0 0 0.75rem rgb(0, 0, 0, 0.125)) !important;
		& > hr {
			margin: 0.5rem 0.5rem !important;
			opacity: 50% !important;
		}
		& > button {
			border-radius: inherit !important;
			
			&:hover, &:focus, &:active {
				background-color: rgb(from var(--apple-colour-green) r g b / var(--apple-opacity-glass-context)) !important;
			}
			&.redact-button {
				color: inherit !important; /* No individual text colouring in Apple's Context Menus */
			}
		}
	}
	/** Phones / Touchscreen **/
	/** FIXME: Colours from iOS 18 with a bit of iOS 26, double-check and re-do **/
	/* TODO: Make it less ugly looking */
	@media screen and (any-pointer: coarse) {
		background-color: rgb(from var(--apple-text-primary-inverted) r g b / var(--apple-opacity-glass-overlay)) !important; /* figure out colours later */
		box-shadow: var(--apple-glass-box-shadow) !important;
		backdrop-filter: var(--apple-glass-backdrop) !important;
		padding: 0.5rem 0.4rem !important;
		border-radius: var(--apple-corner-radius-4-macos);
		& > button {
			border-radius: inherit !important;
			padding: .75rem 1rem !important;
			&:hover, &:focus, &:active {
				background-color: rgb(from var(--apple-gray-systemGray3) r g b / var(--apple-opacity-glass-overlay)) !important;
			}
		}
	}
}
/*** Scrollbars (Blend-in) ***/

/*** Buttons ***/


/**** Modals ****/

/*** Styling ***/

/*** Mobile Modal Layout ***/
@media screen and (max-width: 45rem) {
	/* Hide room scrollbar when modal pops up */
	div.room-list:has(div.modal.overlay) {
		overflow: hidden !important;
	}
	div.modal.overlay > div.modal-box {
		border-radius: var(--apple-corner-radius-4-macos) var(--apple-corner-radius-4-macos) 0 0 !important;
		min-height: 50vh !important;
		max-height: 90vh !important;
		
		/* Bottom-sticky */
		position: fixed !important;
		bottom: 0 !important;
		width: 100vw !important;
	}
}


/*** MODAL: Create Room ***/
div.modal-box.create-room-view-modal > div.modal-box-inner > form.create-room-view {
	& > div.form-fields {
		gap: .5rem .75rem !important;
		& > label {
			text-align: right !important;
		}
		& > input,
		& > label.room-alias-container,
		& > select[id="room-create-preset"] {
			border-radius: var(--apple-corner-radius-1-selection) !important;
			height: 2.5rem !important; /* Uniform height */
		}
	}
	
	& > button[type="submit"] {
		/* TODO: Liquid Glass Submit Button */
		border-radius: var(--apple-corner-radius-5-capsule) !important;
		background-color: var(--primary-color) !important;
		color: var(--inverted-text-color) !important;
		box-shadow: var(--apple-glass-box-shadow) !important;
	}
	& > div#room-create-invite {
		&:has(input.item-list-item) {
			border-radius: var(--apple-corner-radius-1-selection) !important;
			background-color: var(--apple-gray-systemGray6) !important;
			padding: 0.5rem !important;
		}
		& > div.item-list-header > button.item-list-add {
			border-radius: var(--apple-corner-radius-1-selection) !important;
			padding: 0.25rem !important;
		}
	}
	/* TODO: Style stuff in "Advanced Options" */
}


/* [TMP] */
div.modal.dimmed {
	backdrop-filter: blur(4px) brightness(0.8) !important;
}

/**** Room List ****/
/* TODO: Pad space and search so it starts from the same place */
/* TODO: Padding or the Margins for each room feels kinda off... */

/*** Desktop/Tablet: Make room list into a floating sidebar ***/
@media screen and (min-width: 45rem) {
	div.room-list-wrapper {
		margin: 0.5rem 0px 0.5rem 0.5rem !important;
		border-radius: var(--apple-corner-radius-3-macos-inner) !important;
		box-shadow: var(--apple-glass-box-shadow) !important;
		backdrop-filter: var(--apple-glass-backdrop) !important;
	}
	div.room-list-wrapper > div.space-bar > div.space-entry {
		border-radius: var(--apple-corner-radius-5-capsule);
		& > img {
			border-radius: var(--apple-corner-radius-5-capsule) !important;
		}
	}
}

/*** Search ***/
/* TODO: Animation, hide create room button when search is focused */
div.room-list-wrapper > div.room-search-wrapper {
	/** Re-order and re-style elements **/
	display: flex !important;
	flex-direction: row !important;
	& > button:disabled,
	& > input.room-search {
		background-color: var(--apple-imessage-search) !important;
		height: 3rem !important;
	}
	& > button:disabled {
		order: 1 !important;
		margin: 0 0 0 0.5rem !important;
		padding: 0 0 0 1rem !important;
		border-radius: var(--apple-corner-radius-5-capsule) 0 0 var(--apple-corner-radius-5-capsule) !important;
		& > svg {
			color: var(--apple-text-secondary) !important;
			height: 1.5rem !important;
		}
	}
	& > input.room-search {
		order: 2 !important;
		padding: 0 0 0 0.5rem !important;
		border-radius: 0 var(--apple-corner-radius-5-capsule) var(--apple-corner-radius-5-capsule) 0 !important;
		&::placeholder {
			color: var(--apple-text-secondary) !important;
		}
	}
	& > button[title="Create room"] {
		order: 3 !important;
		margin: 0 0.5rem 0 0.5rem !important;
		border-radius: var(--apple-corner-radius-5-capsule) !important;
	}
	
}

/*** Individual Rooms ***/
div.room-list-wrapper > div.room-list {
	padding: 0.25rem 0.5rem !important;
	& > div.room-entry {
		border-radius: var(--apple-corner-radius-1-selection) !important;
		margin: 0.5rem 0rem !important;
	}
	& > div.room-entry > div.room-entry-right > div.message-preview {
		color: var(--apple-text-secondary) !important;
	}
}

/**** Room View ****/

/** [TMP!!!] So theme is some-what usable; imported from old rewrite **/
div.message-composer, div.input-area {
	backdrop-filter: blur(4px) saturate(200%);
}


/**** Right Panel ****/