/* ── Desktop picker shell ─────────────────────────────────────────
   Fluxer-style expression picker. Top stripe of tabs (GIFs / Media
   / Stickers / Emojis), search bar below, main row with a vertical
   category sidebar on the left and a collapsible emoji grid on the
   right, hover inspector pinned at the bottom. */
.picker {
	width: 480px;
	height: 460px;
	display: flex;
	flex-direction: column;
	background-color: var(--background-tertiary);
	border: 1px solid var(--background-modifier-accent);
	border-radius: 10px;
	box-shadow:
		0 8px 24px rgba(0, 0, 0, 0.35),
		0 0 0 1px rgba(0, 0, 0, 0.3);
	overflow: hidden;
}

/* Mobile variant: fill the parent (a BottomSheet body), no fixed
   dimensions, no rounding/shadow — the sheet owns those. */
.pickerMobile {
	width: 100%;
	height: 100%;
	max-width: 100%;
	max-height: 100%;
	border: none;
	border-radius: 0;
	box-shadow: none;
	background-color: transparent;
}

/* ── Top tab bar (GIFs / Media / Stickers / Emojis) ───────────── */
.tabBar {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 10px 12px 0;
	flex-shrink: 0;
}

.tabButton {
	padding: 6px 12px;
	border: none;
	border-radius: 6px;
	background: transparent;
	color: var(--text-primary-muted, #a0a3a8);
	font: inherit;
	font-size: 0.875rem;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.12s, color 0.12s;
}

.tabButton:hover {
	color: var(--text-primary);
	background-color: var(--background-modifier-hover);
}

.tabButtonActive {
	color: var(--text-primary);
	background-color: var(--background-modifier-selected, var(--background-modifier-hover));
}

/* ── Search row ───────────────────────────────────────────────── */
.searchRow {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 12px;
	flex-shrink: 0;
	border-bottom: 1px solid var(--background-modifier-hover);
}

/* On the Media tab the divider moves down one level to the filter
   chip row (which sits between the search bar and the grid), so
   the search row itself drops its bottom border to avoid a double
   line. */
.searchRowFlush {
	border-bottom: none;
}

.searchBar {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 12px;
	border-radius: 8px;
	border: 1px solid var(--background-modifier-accent);
	background-color: color-mix(in srgb, var(--form-surface-background) 85%, black);
}

.searchIcon {
	flex-shrink: 0;
	color: var(--text-primary-muted, #a0a3a8);
}

.searchInput {
	flex: 1;
	height: 100%;
	background: transparent;
	border: none;
	padding: 0;
	font-size: 0.875rem;
	color: var(--text-primary);
	outline: none;
	font-family: inherit;
}

/* Kill the browser's default focus ring — the search bar's own
   border already signals the interactive state, a blue outline
   on top of it reads as a bug. */
.searchInput:focus,
.searchInput:focus-visible {
	outline: none;
	box-shadow: none;
	border: none;
}

.searchInput::placeholder {
	color: var(--text-tertiary);
}

.searchInput:disabled {
	cursor: not-allowed;
	opacity: 0.6;
}

.searchClear {
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	cursor: pointer;
	color: var(--text-tertiary);
	padding: 2px;
}

.searchClear:hover {
	color: var(--text-primary);
}

/* ── Main area (sidebar + grid) ───────────────────────────────── */
.main {
	flex: 1;
	min-height: 0;
	display: flex;
	align-items: stretch;
}

/* Vertical category sidebar — narrow column of icon buttons on
   the left edge. The active category pill is a rounded square
   matching Fluxer. */
.sideBar {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 4px 6px;
	width: 48px;
	flex-shrink: 0;
	overflow-y: auto;
	scrollbar-width: none;
	background-color: var(--background-primary);
	box-shadow: inset -1px 0 0 var(--background-modifier-accent);
}

.sideBar::-webkit-scrollbar {
	display: none;
}

.sideTab {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: none;
	border-radius: 8px;
	background: transparent;
	color: var(--text-primary-muted, #a0a3a8);
	cursor: pointer;
	flex-shrink: 0;
	transition: background-color 0.12s, color 0.12s;
}

.sideTab:hover {
	background-color: var(--background-modifier-hover);
	color: var(--text-primary);
}

.sideTabActive {
	background-color: var(--background-modifier-selected, var(--background-modifier-hover));
	color: var(--text-primary);
}

/* ── Scrollable emoji grid ────────────────────────────────────── */
.grid {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	padding: 4px 12px 12px;
	-webkit-overflow-scrolling: touch;
}

.pickerMobile .grid {
	padding: 4px 12px;
}

/* GIFs tab — the GifPicker owns its own `.searchRow` + `.body`
   layout and needs to paint edge-to-edge so its
   `--background-primary` body fills the picker surface. Strips the
   `.grid` wrapper's padding so the hairline + body bleed to the
   picker's border. */
.gridGifs {
	padding: 0;
}

.pickerMobile .gridGifs {
	padding: 0;
}

/* ── Collapsible section (desktop only) ───────────────────────── */
.section {
	margin-top: 4px;
}

.sectionHeader {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	padding: 8px 4px;
	background: transparent;
	border: none;
	cursor: pointer;
	color: var(--text-primary);
	font: inherit;
	font-size: 0.9375rem;
	font-weight: 700;
	text-align: left;
}

.sectionHeaderLabel {
	flex-shrink: 0;
}

.sectionHeaderCaret {
	color: var(--text-primary-muted, #a0a3a8);
	transition: transform 0.15s ease;
}

/* Caret points DOWN when expanded (default), rotated to RIGHT when
   the section is collapsed. Matches the Fluxer reference where
   expanded sections show a `v` and collapsed sections show `>`. */
.sectionHeaderCaretCollapsed {
	transform: rotate(-90deg);
}

/* Mobile sticky headers (legacy flat layout) reuse a subset of
   the desktop header styles; they don't need the caret. */
.categoryHeader {
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--text-tertiary);
	letter-spacing: 0.02em;
	padding: 8px 4px 4px;
	position: sticky;
	top: 0;
	background-color: var(--background-secondary-lighter, var(--background-primary));
	z-index: 1;
}

.emojiGrid {
	display: grid;
	grid-template-columns: repeat(9, 1fr);
	gap: 0;
}

.pickerMobile .emojiGrid {
	grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
}

.emojiButton {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1;
	font-size: 1.75rem;
	line-height: 1;
	border: none;
	background: none;
	border-radius: 6px;
	cursor: pointer;
	padding: 0;
	transition: background-color 0.1s;
}

.emojiButton:hover {
	background-color: var(--background-modifier-hover);
}

.noResults {
	text-align: center;
	color: var(--text-tertiary);
	font-size: 0.875rem;
	padding: 2rem;
}

/* Placeholder rendered when the user clicks an unimplemented
   top-level tab (GIFs / Media / Stickers). */
.comingSoon {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	padding: 2rem;
	text-align: center;
	color: var(--text-primary-muted, #a0a3a8);
	font-size: 0.9375rem;
}

/* ── Mobile-only bottom category bar ──────────────────────────── */
.categoryBar {
	display: none;
}

.pickerMobile .categoryBar {
	display: flex;
	border-top: 1px solid var(--background-modifier-accent);
	padding: 8px 12px;
	gap: 4px;
	justify-content: space-between;
	overflow-x: auto;
	flex-shrink: 0;
}

.pickerMobile .categoryTab {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 6px;
	background: none;
	border: none;
	cursor: pointer;
	color: var(--text-tertiary);
	flex-shrink: 0;
	transition: color 0.15s, background-color 0.15s;
}

.pickerMobile .categoryTab:hover {
	color: var(--text-primary);
	background-color: var(--background-modifier-hover);
}

.pickerMobile .categoryTabActive {
	color: var(--text-primary);
	background-color: var(--background-modifier-selected);
}

/* ── Media tab ────────────────────────────────────────────────
   Body content rendered when the user selects the top-level
   "Media" tab. Saved-item grid + hover-delete X. The filter
   chip row is rendered OUTSIDE this container (at the EmojiPicker
   top level, directly under the search row), so `.mediaTab` only
   owns the grid and its empty state. */

.mediaTab {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 8px 0;
}

/* Filter chip row — sits between the search row and the main
   content when `activeTab === 'media'`. Rendered at the picker
   top level so it stays pinned while the grid scrolls. */
.filterChips {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
	padding: 8px 12px;
	flex-shrink: 0;
	border-bottom: 1px solid var(--background-modifier-hover);
}

/* Mobile: the sheet already owns its own horizontal padding and the
   bottom sheet surface doesn't need a secondary divider under the
   chips, so drop both so the chip row sits flush inside the sheet. */
@media (max-width: 768px) {
	.filterChips {
		padding: 0;
		border-bottom: none;
	}
}

.filterChip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	background: transparent;
	border: none;
	border-radius: var(--radius-md, 0.375rem);
	color: var(--text-primary-muted, #a0a3a8);
	font: inherit;
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.25rem;
	cursor: pointer;
	transition: background-color 0.12s, color 0.12s;
}

.filterChip:hover {
	background-color: var(--background-modifier-hover);
	color: var(--text-primary);
}

.filterChipActive {
	background-color: var(--background-modifier-selected);
	color: var(--text-primary);
}

.filterChipActive:hover {
	background-color: var(--background-modifier-selected);
	color: var(--text-primary);
}

/* Media tab background override — the emoji tab uses
   `--background-tertiary` (inherited from `.picker`), but the
   Media tab reads as a lighter surface more like the rest of
   the app. Applied to the main row wrapper only when the user
   is on the Media tab. */
.mainMedia {
	background-color: var(--background-primary);
}

.mainMedia .grid {
	background-color: var(--background-primary);
}

.mediaGrid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
	gap: 8px;
	padding: 0 4px 4px;
}

.mediaCard {
	position: relative;
	aspect-ratio: 1;
	border-radius: 8px;
	overflow: hidden;
	background-color: var(--background-secondary);
	border: 1px solid var(--background-modifier-accent);
	cursor: pointer;
	transition: border-color 0.12s, transform 0.12s;
}

.mediaCard:hover {
	border-color: var(--brand-primary, #4641d9);
}

.mediaCardImage {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Small play badge overlay for video tiles in the Media tab.
   Sits in the bottom-right corner of the tile so the thumbnail
   reads as a video at a glance without mistaking it for a
   still image. Only rendered when the card's kind is 'video'. */
.mediaCardPlayBadge {
	position: absolute;
	bottom: 6px;
	right: 6px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background-color: rgba(0, 0, 0, 0.7);
	color: #fff;
	pointer-events: none;
	/* Nudge the play triangle 1px right — same geometric-
	   centroid fix the AttachmentVideo play badge uses. */
	padding-left: 2px;
	box-sizing: border-box;
}

.mediaCardPlaceholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--text-primary-muted, #a0a3a8);
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.mediaCardRemove {
	position: absolute;
	top: 6px;
	right: 6px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	padding: 0;
	background-color: rgba(0, 0, 0, 0.7);
	border: none;
	border-radius: 50%;
	color: #fff;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.12s ease, visibility 0.12s ease, background-color 0.12s;
}

.mediaCard:hover .mediaCardRemove,
.mediaCard:focus-within .mediaCardRemove {
	opacity: 1;
	visibility: visible;
}

.mediaCardRemove:hover {
	background-color: var(--status-danger, #ed4245);
}

/* ── Inspector bar ────────────────────────────────────────────── */
.inspector {
	display: flex;
	align-items: center;
	gap: 10px;
	height: 44px;
	padding: 0 14px;
	border-top: 1px solid var(--background-modifier-accent);
	background-color: var(--background-primary);
	flex-shrink: 0;
}

.inspectorEmoji {
	display: inline-flex;
	align-items: center;
	font-size: 1.5rem;
}

.inspectorName {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--text-primary);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.inspectorHint {
	font-size: 0.8125rem;
	color: var(--text-tertiary);
}

/* ── Light theme overrides ────────────────────────────────────
   Promote the picker chrome rows (tab bar, search row, media-tab
   filter chips) from the inherited --background-tertiary up to
   --background-primary in light theme so the picker reads as a
   brighter surface than the chat body instead of a dimmer gray
   one. Dark theme keeps the original inherited look. */
[data-theme='light'] .tabBar,
[data-theme='light'] .searchRow,
[data-theme='light'] .filterChips {
	background-color: var(--background-primary);
}

/* The inner rounded search input itself sits on top of the
   now-white search row, so the dark-theme color-mix surface
   reads as a muddy tan against it. Switch it to the hover
   modifier shade so it stays distinct from the row without
   looking off-palette. */
[data-theme='light'] .searchBar {
	background-color: var(--background-modifier-hover);
}
