/**
 * TechTalk Members global shell.
 * Minimal styles allowed outside Members pages.
 */

:root {
	--ttm-color-primary: var(--color-accent, #775c31);
	--ttm-color-text: var(--color-text, #e6edf3);
	--ttm-color-bg: var(--color-background, #0b1a22);
	--ttm-color-surface: #131e2b;
	--ttm-color-border: rgba(255, 255, 255, 0.25);
	--ttm-color-error: var(--tt-color-error, #e74c3c);
	--ttm-color-success: var(--tt-color-success, #27ae60);
	--ttm-color-muted: var(--color-text-secondary, #8b949e);
	--ttm-color-warning: #f39c12;
	--ttm-color-bg-hover: rgba(255, 255, 255, 0.06);
	--ttm-color-bg-active: rgba(255, 255, 255, 0.12);
	--ttm-scrollbar-thumb: rgba(119, 92, 49, 0.3);
	--ttm-radius: 8px;
	--ttm-font-size-base: 1rem;
	--ttm-msg-theirs-bg: rgba(255, 255, 255, 0.1);
}

html.light-mode {
	--ttm-color-text: var(--color-text, #4A3B31);
	--ttm-color-bg: var(--color-background, #FAF0E6);
	--ttm-color-surface: var(--color-component-background, #EADDCA);
	--ttm-color-border: rgba(119, 92, 49, 0.4);
	--ttm-color-muted: var(--color-text-secondary, #5D4E42);
	--ttm-color-bg-hover: rgba(0, 0, 0, 0.04);
	--ttm-color-bg-active: rgba(0, 0, 0, 0.08);
	--ttm-scrollbar-thumb: rgba(119, 92, 49, 0.2);
	--ttm-msg-theirs-bg: rgba(119, 92, 49, 0.12);
}

.ttm-unread-badge,
.avatar-unread-counter,
.unread-messages-counter {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	border-radius: 9px;
	background: var(--ttm-color-error);
	color: #fff;
	font-size: 0.65rem;
	font-weight: 700;
	line-height: 1;
}

.ttm-unread-badge {
	background-color: var(--ttm-color-primary);
	font-size: 0.7rem;
}

.avatar-unread-counter {
	border: 2px solid var(--color-background, #0b1a22);
	box-sizing: content-box;
}

.unread-messages-counter {
	margin-left: auto;
	flex-shrink: 0;
}

.ttm-unread-badge[hidden],
.avatar-unread-counter[hidden],
.unread-messages-counter[hidden] {
	display: none;
}

.ttm-toast {
	position: fixed;
	bottom: 1.5rem;
	left: 50%;
	z-index: 99999;
	padding: 0.5rem 1.25rem;
	border: 1px solid var(--ttm-color-border);
	border-radius: var(--ttm-radius);
	background: var(--ttm-color-surface);
	color: var(--ttm-color-text);
	font-size: 0.875rem;
	white-space: nowrap;
	pointer-events: none;
	animation: ttm-toast-in 0.2s ease both;
}

.ttm-toast--error {
	border-color: var(--ttm-color-error);
	color: var(--ttm-color-error);
}

@keyframes ttm-toast-in {
	from { opacity: 0; transform: translateX(-50%) translateY(6px); }
	to { opacity: 1; transform: translateX(-50%) translateY(0); }
}