@import './reset.css';

strong,
b {
	font-weight: bold;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

/*
Q: WTF are these sizing calcs with 14 in the denominator??

A: I designed the message sipper to have whole number pixel sizes & offsets at
14px rem. `calc(xrem / 14)` is how you achieve a value that references a specific
pixel value (x) at that scale, while also being dynamic with rem size.
*/

:root {
	color-scheme: light;

	--font-size: 16px;
	--font-size-small: 11.5px;
	--font-base: -apple-system, BlinkMacSystemFont, sans-serif;
	--font-rounded: 'Comfortaa', apple-system, BlinkMacSystemFont, sans-serif;
	--line-height: 1.2;

	--padding-inline: 0.9rem;

	--message-spacing: calc(13.5rem / 14);
	--consecutive-message-spacing: calc(1.5rem / 14);

	--border-radius: 1rem;

	--backdrop-blur: 20px;
	--backdrop-filter: blur(var(--backdrop-blur));

	--message-padding-inline: calc(10rem / 14);
	--message-padding-block: calc(6rem / 14);

	--message-tail-offset: calc(-1 * 4.5rem / 14);

	--single-line-message-height: calc(1lh + 2 * var(--message-padding-block));

	--button-size: calc(32rem / 14);

	--color-body-bg: white;
	--color-page: white;
	--color-ink: black;
	--color-ink-subdued: #7e7f87;

	--color-bubble-self-faded: #53c2fb;
	--color-bubble-self: #007aff;
	--color-bubble-other: #e6e5ec;

	--color-recipient-avatar-bottom: #898e9a;
	--color-recipient-avatar-top: #a3a9b8;

	--color-edge: #ddddde;
	--color-icon: #b4b8c0;
	--color-menu: #e8e9eb;
	--color-header: hsl(0 0% 95% / 0.85);
	--color-overlay: hsl(0 0% 100% / 0.7);

	--color-dialog-overlay: hsl(0 0 0 / 0.5);

	--mask-blend-mode: screen;

	--color-drop-shadow: oklch(0 0 0 / 8%);
	--color-drop-shadow-intense: oklch(0 0 0 / 16%);
	--pane-shadow:
		0 0 16px 0px var(--color-drop-shadow-intense),
		0 0 4px 0 var(--color-drop-shadow);

	/* New component colors */
	--color-text: var(--color-ink);
	--color-text-secondary: var(--color-ink-subdued);
	--color-text-tertiary: #999;
	--color-primary: var(--color-bubble-self);
	--color-border: var(--color-edge);
	--color-card-bg: var(--color-page);
	--color-input-bg: var(--color-page);
	--color-nav-bg: var(--color-header);
	--color-hover: #f5f5f5;
	--color-messages-bg: #f5f5f5;

	/* Status / badge colors */
	--color-status-green: #35c759;
	--color-status-red: #ff3b2f;
}

:root[data-theme='dark'] {
	color-scheme: dark;

	--color-body-bg: #1e1e1e;
	--color-page: #000000;
	--color-ink: #ffffff;
	--color-ink-subdued: #78787d;

	/* iOS-ish blues + bubble gray */
	--color-bubble-self-faded: #3598ff;
	--color-bubble-self: #0d84ff;
	--color-bubble-other: #26252a;

	--color-recipient-avatar-bottom: #80858f;
	--color-recipient-avatar-top: #a4a9b7;

	--color-edge: #212225;
	--color-icon: #4a4b4d;
	--color-menu: #1f1f21;
	--color-header: hsl(0 0% 10% / 0.78);
	--color-overlay: hsl(0 0% 0% / 0.7);

	--color-dialog-overlay: hsl(from var(--color-body-bg) h s l / 0.7);

	--mask-blend-mode: multiply;

	--color-drop-shadow: transparent;
	--color-drop-shadow-intense: transparent;
	--pane-shadow: none;

	/* New component colors - dark mode */
	--color-text: var(--color-ink);
	--color-text-secondary: var(--color-ink-subdued);
	--color-text-tertiary: #666;
	--color-primary: var(--color-bubble-self);
	--color-border: var(--color-edge);
	--color-card-bg: #1a1a1a;
	--color-input-bg: #1a1a1a;
	--color-nav-bg: var(--color-header);
	--color-hover: #2a2a2a;
	--color-messages-bg: #1a1a1a;

	/* Status / badge colors */
	--color-status-green: #31d158;
	--color-status-red: #ff453a;
}

/* Breakpoints: see utils/breakpoints.js — keep values in sync */
@media (min-width: 900px) {
	:root {
		--font-size: 14px;
		--font-size-small: 11px;
		--padding-inline: 1.5rem;
		--message-padding-inline: calc(8rem / 14);
		--message-padding-block: calc(4rem / 14);

		--button-size: calc(24rem / 14);
	}
}

html {
	font-size: var(--font-size);
	overflow: hidden;

	--pane-gap: clamp(1rem, 1.5vw, calc(36rem / 14));
}

body {
	height: calc(var(--vh, 1dvh) * 100);
	max-height: calc(var(--vh, 1dvh) * 100);
	max-width: 100dvw;
	overflow: hidden;
	overscroll-behavior: none;
	font-family: var(--font-base);
	color: var(--color-ink);
	background-color: var(--color-body-bg);

	display: flex;
	flex-direction: column;
}

#root {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
}

.app-container {
	flex: 1 1 auto;
	min-height: 0;
	max-height: 100%;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
	overflow: hidden;
}

/* Admin dashboard renders pane sections as light DOM children */
admin-dashboard {
	display: contents;
}

/* Header nav unused — kept for potential future use */
header-nav {
	display: none;
}

.pane {
	min-height: 0;
}

.pane--threads,
.pane--editor,
.pane--preview {
	min-height: 0;
}

/* ===== Mobile Layout (<900px) ===== */
/* Single pane visible, three modes: list, edit, preview */

.pane--threads,
.pane--editor {
	display: none;
}

.pane--preview {
	display: block;
}

/* List mode: show threads only */
.app-container[data-mode='list'] .pane--threads {
	display: block;
}

.app-container[data-mode='list'] .pane--editor,
.app-container[data-mode='list'] .pane--preview {
	visibility: hidden;
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

/* Edit mode: show editor only */
.app-container[data-mode='edit'] .pane--editor {
	display: block;
}

.app-container[data-mode='edit'] .pane--threads,
.app-container[data-mode='edit'] .pane--preview {
	visibility: hidden;
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

/* Preview mode (default): show preview only */
.app-container[data-mode='preview'] .pane--preview,
.app-container:not([data-mode]) .pane--preview {
	visibility: visible;
	position: static;
	opacity: 1;
	pointer-events: auto;
}

.app-container[data-mode='preview'] .pane--threads,
.app-container[data-mode='preview'] .pane--editor {
	visibility: hidden;
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

/* ===== Tablet+ Layout (>=900px) ===== */

@media (min-width: 900px) {
	/* Default: center single pane content */
	.app-container {
		padding: var(--pane-gap);
		gap: var(--pane-gap);
		/*place-content: center;*/
	}

	.pane {
		background: var(--color-page);
		border-radius: calc(18rem / 14);
		overflow: hidden;
		border: 1px solid var(--color-edge);
		box-shadow: var(--pane-shadow);
	}

	.pane > * {
		display: block;
		min-height: 0;
	}

	/* Single-pane views: constrain width and center */
	.pane--landing,
	.pane--piece {
		min-width: 500px;
		max-width: 500px;
		justify-self: center;
	}

	/* ===== Admin View: Three columns ===== */
	.app-container--admin {
		place-items: stretch;
		place-content: stretch;
		grid-template-columns: 1fr 1fr 1fr;
	}

	.app-container--admin .pane--threads {
		grid-column: 1;
		grid-row: 1;
		display: flex;
		flex-direction: column;
	}

	.app-container--admin .pane--editor {
		grid-column: 2;
		grid-row: 1;
		display: flex;
		flex-direction: column;
	}

	.app-container--admin .pane--preview {
		grid-column: 3;
		grid-row: 1;
		display: block;
	}

	/* ===== Create View: Two columns (tablet) ===== */
	.app-container--create {
		place-items: stretch;
		place-content: stretch;
		grid-template-columns: 1fr 1fr;
	}

	/* Left pane shows either threads or editor based on data-left-view */
	.app-container--create .pane--threads,
	.app-container--create .pane--editor {
		grid-column: 1;
		grid-row: 1;
	}

	.app-container--create .pane--preview {
		grid-column: 2;
		grid-row: 1;
		display: block;
		visibility: visible;
		position: static;
		opacity: 1;
		pointer-events: auto;
	}

	/* Default: show editor in left pane, preview in right */
	.app-container--create .pane--threads {
		display: none;
	}

	.app-container--create .pane--editor {
		display: block;
	}

	/* When data-mode="list", show threads in left pane */
	.app-container--create[data-mode='list'] .pane--threads {
		display: block;
	}

	.app-container--create[data-mode='list'] .pane--editor {
		display: none;
	}

	/* When data-mode="edit", show editor in left pane */
	.app-container--create[data-mode='edit'] .pane--editor {
		display: block;
	}

	.app-container--create[data-mode='edit'] .pane--threads {
		display: none;
	}

	/* Preview pane always visible on tablet - override mobile mode hiding */
	.app-container--create .pane--preview,
	.app-container--create[data-mode='list'] .pane--preview,
	.app-container--create[data-mode='edit'] .pane--preview {
		display: block;
		visibility: visible;
		position: static;
		opacity: 1;
		pointer-events: auto;
	}
}

/* ===== Desktop Layout (>1200px) ===== */
/* Create view: Three columns - threads | editor | preview */

@media (min-width: 1200px) {
	.app-container--create {
		grid-template-columns: 1fr 1fr 1fr;
	}

	/* All three panes visible */
	.app-container--create .pane--threads {
		grid-column: 1;
		grid-row: 1;
		display: block;
	}

	.app-container--create .pane--editor {
		grid-column: 2;
		grid-row: 1;
		display: block;
	}

	.app-container--create .pane--preview {
		grid-column: 3;
		grid-row: 1;
		display: block;
	}

	/* Override any data-mode settings - show all panes at desktop */
	.app-container--create[data-mode='list'] .pane--threads,
	.app-container--create[data-mode='list'] .pane--editor,
	.app-container--create[data-mode='edit'] .pane--threads {
		display: block;
	}
}

.hide-scrollbar {
	/* For Internet Explorer and Edge */
	-ms-overflow-style: none;
	/* For Firefox */
	scrollbar-width: none;
}

/* For Chrome, Safari, and Opera (WebKit browsers) */
.hide-scrollbar::-webkit-scrollbar {
	display: none;
}