/*
 * Off-canvas drawer — an original, MIT-licensed implementation: a right
 * side panel that slides in over a darkening backdrop.
 *
 * Panel layout (ChatGPT/Claude-style two-column chat, above 700px): a
 * full-height chat column on the left (messages, then the input + send
 * button pinned to the bottom of that column) and a full-height sidebar on
 * the right (search, "New conversation", the conversation list) — the
 * drawer itself opens from the right edge of the screen, so the sidebar
 * sits at that same outer edge while the chat sits next to the rest of the
 * page, same relative arrangement as a left-opening ChatGPT/Claude sidebar.
 * Visual order is set with the `order` property below rather than DOM
 * order, so markup order (nav, then chat) stays a stable, unrelated
 * concern. Below 700px the two stack vertically instead — a fixed-width
 * sidebar stops making sense once the whole drawer itself is only as wide
 * as a phone screen. Note: the breakpoint is hardcoded in the @media rules
 * below rather than read from --maia-nav-width, since CSS custom
 * properties cannot be used inside a media query condition.
 */

/*
 * Theme color variables (--maia-text, --maia-surface, etc.) are declared in
 * maia-chat.css, not here — that file loads for both shells, this one only
 * for the drawer. Only drawer-specific layout constants live below.
 */
:root {
	--maia-drawer-width: 66.6667%;
	--maia-nav-width: 300px;
	--maia-nav-item-height: 44px;
	--maia-nav-indent: 16px;
	--maia-nav-line-height: 22px;
}

.maia-launcher {
	position: fixed;
	right: 20px;
	bottom: 20px;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	border: 0;
	padding: 0;
	overflow: hidden;
	cursor: pointer;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
	z-index: 99998;
	background: var(--maia-surface);
}
.maia-launcher img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.maia-drawer {
	position: fixed;
	inset: 0 0 100% 0;
	z-index: 99999;
	background: rgba(0, 0, 0, 0);
	transition: background .3s ease, bottom 0s ease .3s;
	color: var(--maia-text);
}
.maia-drawer--open {
	bottom: 0;
	background: rgba(0, 0, 0, .3);
	transition: background .3s ease, bottom 0s ease 0s;
}

.maia-drawer__panel {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	width: var(--maia-drawer-width);
	min-width: 320px;
	max-width: 100vw;
	background: var(--maia-surface);
	box-shadow: -2px 0 16px rgba(0, 0, 0, .2);
	transform: translate3d(100%, 0, 0);
	transition: transform .3s ease;
	display: flex;
	flex-direction: row;
	overflow: hidden;
}
@media screen and (max-width: 700px) {
	.maia-drawer__panel { flex-direction: column; }
}
.maia-drawer--open .maia-drawer__panel {
	transform: translate3d(0, 0, 0);
}
body.admin-bar .maia-drawer__panel {
	top: 32px;
}
@media screen and (max-width: 782px) {
	body.admin-bar .maia-drawer__panel { top: 46px; }
}

.maia-drawer__backdrop {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: var(--maia-drawer-width);
}

.maia-drawer__close {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 0;
	background: var(--maia-surface-2);
	color: var(--maia-text);
	cursor: pointer;
	z-index: 2;
}

.maia-nav {
	flex: 0 0 var(--maia-nav-width);
	order: 2;
	display: flex;
	flex-direction: column;
	min-height: 0;
	border-left: 1px solid var(--maia-border);
}
@media screen and (max-width: 700px) {
	.maia-nav {
		flex: 0 0 auto;
		order: 1;
		max-height: 42%;
		border-left: 0;
		border-bottom: 1px solid var(--maia-border);
		padding-top: 8px;
	}
}

.maia-nav__search {
	/* Top padding clears .maia-drawer__close, which floats over the
	   panel's top-right corner. Nav's own top-right corner lands there
	   in BOTH layouts: as the right-hand column above 700px, and as the
	   full-width top row (order: 1) below it — so this isn't conditional
	   on the breakpoint. */
	padding: 46px var(--maia-nav-indent) 8px;
}
.maia-nav__search-input {
	width: 100%;
	box-sizing: border-box;
	padding: 8px 10px;
	border-radius: 6px;
	border: 1px solid var(--maia-border);
	background: var(--maia-surface-2);
	color: var(--maia-text);
	font-size: 14px;
}

.maia-nav__header {
	padding: 0 var(--maia-nav-indent) 4px;
}
.maia-nav__new {
	width: 100%;
	text-align: left;
	padding: 10px var(--maia-nav-indent);
	background: var(--maia-accent);
	color: var(--maia-accent-contrast);
	border: 0;
	border-radius: 6px;
	cursor: pointer;
	font-weight: 600;
}

.maia-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
}
.maia-nav__item {
	display: flex;
	align-items: center;
	border-bottom: 1px solid var(--maia-border);
}
.maia-nav__link {
	flex: 1 1 auto;
	text-align: left;
	background: none;
	border: 0;
	min-height: var(--maia-nav-item-height);
	line-height: var(--maia-nav-line-height);
	padding: 0 var(--maia-nav-indent);
	color: var(--maia-text);
	cursor: pointer;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.maia-nav__link--active {
	font-weight: 600;
	background: var(--maia-surface-2);
}
.maia-nav__action {
	flex: 0 0 auto;
	background: none;
	border: 0;
	padding: 0 10px;
	color: var(--maia-text, #1e1e1e);
	opacity: .5;
	cursor: pointer;
}
.maia-nav__action:hover { opacity: 1; }

.maia-nav__search-agent {
	border-top: 1px solid var(--maia-border);
	list-style: none;
}
.maia-nav__search-agent button {
	width: 100%;
	text-align: left;
	background: none;
	border: 0;
	padding: 10px var(--maia-nav-indent);
	cursor: pointer;
	color: var(--maia-accent);
}

.maia-nav__item--clear {
	justify-content: center;
}
.maia-nav__clear {
	background: none;
	border: 0;
	padding: 8px var(--maia-nav-indent);
	color: #b32d2e;
	cursor: pointer;
	font-size: 13px;
}

.maia-drawer__chat {
	flex: 1 1 auto;
	order: 1;
	min-width: 0;
	min-height: 0;
	display: flex;
	flex-direction: column;
}
@media screen and (max-width: 700px) {
	.maia-drawer__chat { order: 2; }
}