/**
 * AskMe Sidebar — theme component styles.
 *
 * One #askme-sidebar element, two behaviors, purely custom (no
 * bootstrap.Collapse / bootstrap.Offcanvas — Bootstrap only allows ONE
 * component instance per DOM element, so two different Bootstrap
 * components can't share this single sidebar the way the desktop/
 * mobile split needs; see askme-sidebar.js):
 *
 *   Desktop (>=768px): `.is-expanded` toggles the rail's width between
 *   76px and 270px, animated by the plain `transition: width` below.
 *
 *   Mobile (<=767px): `.is-open` toggles the SAME element between
 *   off-screen (`translateX(-100%)`) and visible, with its own
 *   backdrop `<div id="askme-sidebar-overlay">`.
 *
 * Both defaults (collapsed rail / hidden drawer) are set directly
 * under a `@media` query rather than behind a JS-added body class —
 * that's what makes them correct on the very first paint, before
 * askme-sidebar.js has even run, so there's no flash / slide-in from
 * the left on reload.
 *
 * The toggle button (#askme-sidebar-toggle) is a sibling of <aside>,
 * never a child, and is ALWAYS positioned outside the sidebar's own
 * box — it does not sit "inside" the rail's footprint on either
 * breakpoint:
 *
 *   Desktop: its `left` is `sidebar-width + gap`, driven by the SAME
 *   `body.askme-sidebar-expanded` class the rail's own width reacts
 *   to, so the two transition in lockstep — the button "pushes" along
 *   with the rail's edge, collapsed or expanded, per the Grok-style
 *   reference screenshot (never overlapping the rail, never left
 *   behind).
 *
 *   Mobile: pinned at a fixed (14px, 14px) — but with a z-index BELOW
 *   the drawer's — so when the off-canvas drawer slides open over it,
 *   the drawer visually covers the button (it sits "under" the
 *   sidebar, per spec) rather than floating above it like on desktop.
 *
 * Because the button never overlaps the sidebar's own box on either
 * breakpoint, .askme-sidebar-header no longer needs the old "reserve
 * clearance" top-padding hack — it uses normal padding now.
 */

:root {
	--askme-sb-collapsed: 76px;
	--askme-sb-expanded: 270px;
	--askme-sb-bg: #ffffff;
	--askme-sb-border: #e8e8eb;
	--askme-sb-text: #141414;
	--askme-sb-muted: #6f7178;
	--askme-sb-hover: #f1f1f3;
	--askme-sb-active: #fafafa;
	--askme-sb-danger: #d92d20;
	--askme-sb-transition: 0.24s ease;
	--askme-sb-z: 1040;
	--askme-sb-toggle-size: 38px;
	--askme-sb-toggle-top: 3px;
	--askme-sb-toggle-gap: 12px; /* gap between the sidebar's current edge and the button, desktop only */
	--askme-topbar-edge: 5px; /* matches the plugin's .askme-chat-titlebar right offset, see chat.css */
}

/* ------------------------------------------------------------------ *
 * Shell
 * ------------------------------------------------------------------ */

#askme-sidebar {
	position: fixed;
	top: 0; left: 0;
	height: 100vh;
	height: 100dvh;
	width: var(--askme-sb-collapsed);
	background: var(--askme-sb-bg);
	border-right: 1px solid var(--askme-sb-border);
	display: flex;
	flex-direction: column;
	z-index: var(--askme-sb-z);
	overflow: hidden; /* clips content during the width/transform transition
	                     only — the tooltip is positioned fixed via JS, so
	                     it's never affected by this (see "Tooltips" below). */
	transition: width var(--askme-sb-transition), transform var(--askme-sb-transition), box-shadow var(--askme-sb-transition);
	font-family: "Sarabun", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	color: var(--askme-sb-text);
	outline: 0;
}
#askme-sidebar.is-expanded { width: var(--askme-sb-expanded); }

/* ------------------------------------------------------------------ *
 * Toggle button — a fixed-position SIBLING of <aside>, ALWAYS outside
 * the sidebar's own box (see breakpoint-specific `left`/z-index rules
 * further down: desktop tracks the rail's edge, mobile is pinned but
 * stacks below the drawer).
 * ------------------------------------------------------------------ */

#askme-sidebar-toggle {
	position: fixed;
	top: var(--askme-sb-toggle-top);
	width: var(--askme-sb-toggle-size);
	height: var(--askme-sb-toggle-size);
	border: 0;
	background: transparent;
	display: flex; align-items: center; justify-content: center;
	cursor: pointer;
	transition: left var(--askme-sb-transition), background var(--askme-sb-transition), color var(--askme-sb-transition);
}
#askme-sidebar-toggle:focus {outline: none!important;}
#askme-sidebar-toggle:hover { background: var(--askme-sb-hover); color: var(--askme-sb-text); border-radius: 100%;}

/* ------------------------------------------------------------------ *
 * Top bar furniture — centered brand text + theme-toggle, top-right.
 *
 * Both are `position: fixed` siblings of #askme-sidebar-toggle (same
 * pattern, same top offset), independent of the sidebar's own box so
 * they read as one shared top bar across the whole page rather than
 * "belonging" to the rail.
 *
 * .theme-toggle sits at the top-right corner by default — i.e. exactly
 * where the plugin's three-dot chat menu (#askme-chat-titlebar) would
 * be — and only shifts left, to make room beside it, when that menu is
 * actually present AND visible. The plugin signals that by adding
 * `askme-chat-titlebar-active` to <body> (see chat-history.js); on any
 * page where the chat title bar doesn't exist or hasn't got a
 * conversation loaded yet, .theme-toggle simply stays put in the
 * three-dot button's spot, per spec.
 * ------------------------------------------------------------------ */

/* Keyed off IDs (not the plain class names) and !important throughout —
   "theme-toggle" / "dark-button" / "light-button" / "bds-text" are
   generic enough that the theme almost certainly already has site-wide
   rules for them elsewhere; IDs + !important guarantees these win
   regardless of that stylesheet's specificity or load order. */
#askme-topbar-brand {
	position: fixed !important;
	top: var(--askme-sb-toggle-top) !important;
	left: var(--askme-sb-collapsed, 76px) !important;
	right: 0 !important;
	transform: none !important;
	max-width: 760px;
	margin: 0 auto;
	padding: 0 70px; 
	height: var(--askme-sb-toggle-size);
	display: flex !important;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	z-index: calc(var(--askme-sb-z) + 2) !important;
	pointer-events: none; 
	transition: left var(--askme-sb-transition);
}

#askme-theme-toggle {
	position: fixed !important;
	top: var(--askme-sb-toggle-top) !important;
	right: var(--askme-topbar-edge, 5px) !important;
	left: auto !important;
	bottom: auto !important;
	display: flex !important;
	align-items: center;
	gap: 2px;
	z-index: calc(var(--askme-sb-z) + 2) !important;
	transition: right var(--askme-sb-transition);
}

/* Shift left to clear the plugin's three-dot chat menu when it's on
   screen — see the plugin's chat.css (.askme-chat-titlebar) for the
   matching right offset / button size this is built from. */
body.askme-chat-titlebar-active #askme-theme-toggle {
	right: calc(var(--askme-topbar-edge, 5px) + 20px + 8px) !important;
}

/* ------------------------------------------------------------------ *
 * Header / brand
 *
 * Normal padding now — the toggle button no longer shares any space
 * with the sidebar's own box (see above), so there's nothing left to
 * reserve clearance for.
 * ------------------------------------------------------------------ */

.askme-sidebar-header {
	flex: 0 0 auto;
	padding: 11px 14px 4px;
	display: flex;
	align-items: center;
	gap: 12px;
}

.askme-sidebar-brand {
	display: flex;
	align-items: center;
	min-width: 0;
	gap: 12px;
}

.askme-site-icon {
	width: 46px; height: 46px; flex: 0 0 46px;
	border-radius: 15px;
	background: #6C6439;
	display: grid; place-items: center;
	font-weight: 800; letter-spacing: -0.04em;
	font-size: 15px;
	box-shadow: 0 6px 18px rgba(0,0,0,.12);
	overflow: hidden;
}
.askme-site-budh {
    background-color: #B9AF7C;
    border-radius: 100%;
    width: 27px;
    height: 26px;
    text-align: center;
    color: #6C6439;
}
.sabublist {
    width: 26px;
    height: 26px;
    background-color: #eee;
    border-radius: 100%;
    text-align: center;
    line-height: 1.3;
}
.more-menu-list {
    width: 26px;
    height: 26px;
    background-color: #eee;
    border-radius: 100%;
    text-align: center;
    line-height: 1.7;
    font-size: 14px;
}
.askme-site-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }

.askme-top-text {
	display: flex; flex-direction: column;
	min-width: 0;
	white-space: nowrap; overflow: hidden;
	opacity: 0; max-width: 0;
	transition: opacity .16s ease, max-width var(--askme-sb-transition);
}
#askme-sidebar.is-expanded .askme-top-text  { opacity: 1; max-width: 160px; }
.askme-top-text  strong { font-size: 15px; overflow: hidden; text-overflow: ellipsis; }
.askme-top-text  span { margin-top: 2px; font-size: 12px; color: var(--askme-sb-muted); overflow: hidden; text-overflow: ellipsis; }

/* ------------------------------------------------------------------ *
 * Nav / menu items (New chat, Search, History — from the plugin — plus
 * any general-audience items you add to #askme-sidebar-theme-menu)
 * ------------------------------------------------------------------ */

.askme-sidebar-nav {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overflow-x: hidden;
	scroll-behavior: smooth;
	overscroll-behavior: contain;
	padding: 3px 10px 7px;
	display: flex;
	flex-direction: column;
	gap: 5px;
	margin-top: 15px;
}
.askme-sidebar-nav::-webkit-scrollbar { width: 6px; }
.askme-sidebar-nav::-webkit-scrollbar-thumb { background: rgba(0,0,0,.12); border-radius: 999px; }

/* The plugin renders these inside a plain <ul>; unwrap it visually so
   items sit in the same flex flow as everything else in the rail. */
#askme-sidebar .askme-sidebar-menu {
	list-style: none; margin: 0; padding: 0;
	display: flex; flex-direction: column; gap: 5px;
}
#askme-sidebar .askme-sidebar-menu li { display: contents; }

#askme-sidebar .askme-menu-item {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	text-align: left;
	gap: 14px;
	min-height: 48px;
	padding: 0 14px;
	border-radius: 14px;
	color: var(--askme-sb-text);
	text-decoration: none;
	white-space: nowrap;
	background: transparent;
	border: none;
	font-family: inherit;
	font-size: 14.5px;
	cursor: pointer;
	transition: background .16s ease;
	width: 100%;
}
/* Expanded: the whole row is the hover/active target. */
#askme-sidebar.is-expanded .askme-menu-item:hover,
#askme-sidebar.is-expanded .askme-menu-item:focus-visible {
	background: var(--askme-sb-hover);
	outline: none;
}
#askme-sidebar.is-expanded .askme-menu-item.is-active { background: var(--askme-sb-active); font-weight: 650; }

/* Collapsed: only the icon itself gets a circular hover/active
   background — not the full-width row — and everything is centered in
   the rail rather than left-hugging (there's no label to align to). */
@media (min-width: 768px) {
	#askme-sidebar:not(.is-expanded) .askme-menu-item {
		justify-content: center;
		padding: 0;
		gap: 0;
	}
	#askme-sidebar:not(.is-expanded) .askme-menu-icon {
		width: 44px; height: 44px;
		border-radius: 50%;
		transition: background .16s ease;
	}
	#askme-sidebar:not(.is-expanded) .askme-menu-item:hover .askme-menu-icon,
	#askme-sidebar:not(.is-expanded) .askme-menu-item:focus-visible .askme-menu-icon {
		background: var(--askme-sb-hover);
	}
	#askme-sidebar:not(.is-expanded) .askme-menu-item.is-active .askme-menu-icon {
		background: var(--askme-sb-active);
	}
}

.askme-menu-icon {
	flex: 0 0 auto;
	display: flex; align-items: center; justify-content: center;
	font-size: 19px; line-height: 1;
}
.askme-menu-icon:not(:has(i)) { font-size: 18px; } /* emoji-as-icon items (no <i>) read slightly large otherwise */

/* Collapsed the label collapses its own box to zero width (not just
   opacity) — so it never contributes layout width or forces the row to
   overflow the 76px rail. */
.askme-menu-label {
	max-width: 180px;
	opacity: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: max-width .18s ease, opacity .12s ease;
}
#askme-sidebar:not(.is-expanded) .askme-menu-label {
	max-width: 0;
	opacity: 0;
}

.askme-sidebar-guest-note {
	font-size: 12.5px;
	color: var(--askme-sb-muted);
	padding: 8px 10px;
	line-height: 1.4;
}
#askme-sidebar:not(.is-expanded) .askme-sidebar-guest-note { display: none; }

.askme-sidebar-theme-menu {
	display: flex; flex-direction: column; gap: 5px;
	margin-top: 4px;
}
.askme-sidebar-theme-menu:not(:empty) { padding-top: 8px; border-top: 1px solid var(--askme-sb-border); }

/* ------------------------------------------------------------------ *
 * Tooltips (collapsed desktop rail only)
 *
 * Positioned via JS as position:fixed (see askme-sidebar.js
 * positionTooltip()) rather than CSS-only absolute + :hover — a
 * fixed-position element is NOT clipped by an ancestor's
 * overflow:hidden the way an absolutely-positioned one nested inside
 * the scrolling nav list is, which is what made it invisible before.
 * ------------------------------------------------------------------ */

#askme-sidebar .askme-menu-tooltip {
	display: block !important; /* override chat.css's default "hidden everywhere else" */
	position: fixed;
	transform: translateY(-50%);
	pointer-events: none;
	opacity: 0;
	background: #111; color: #fff;
	border-radius: 8px;
	padding: 7px 10px;
	font-size: 12px;
	white-space: nowrap;
	box-shadow: 0 8px 25px rgba(0,0,0,.16);
	transition: opacity .15s ease;
	z-index: 9999;
}
#askme-sidebar .askme-menu-item.askme-tooltip-active .askme-menu-tooltip {
	opacity: 1;
}

/* ------------------------------------------------------------------ *
 * Footer — [ai_chat_account] output (avatar/delete/logout, or the
 * signed-out Google button). Unchanged, per spec: preserve the bottom
 * section exactly.
 * ------------------------------------------------------------------ */

.askme-sidebar-footer {
	flex: 0 0 auto;
	border-top: 1px solid var(--askme-sb-border);
	padding: 12px 10px 15px;
}

#askme-sidebar .askme-account-row {
	display: grid;
	grid-template-columns: 42px 1fr 1fr;
	align-items: center;
	gap: 8px;
}
#askme-sidebar:not(.is-expanded) .askme-account-row { grid-template-columns: 1fr; justify-items: center; }
#askme-sidebar:not(.is-expanded) .askme-account-action { display: none; }

#askme-sidebar .askme-account-avatar {
	width: 42px; height: 42px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid #fff;
	box-shadow: 0 0 0 1px var(--askme-sb-border);
}
#askme-sidebar .askme-account-action {
	border: 0;
	background: #fafafa;
	border-radius: 10px;
	padding: 9px 8px;
	cursor: pointer;
	color: var(--askme-sb-muted);
	font-size: 12px;
	white-space: nowrap;
}
#askme-sidebar .askme-account-action:hover { background: var(--askme-sb-hover); color: var(--askme-sb-text); }
#askme-sidebar .askme-account-action-delete:hover { color: var(--askme-sb-danger); background: #fff1f0; }

#askme-sidebar:not(.is-expanded) .askme-google-btn span { display: none; }
#askme-sidebar:not(.is-expanded) .askme-google-btn { padding: 10px; justify-content: center; }
#askme-sidebar .askme-auth-error { font-size: 11.5px; margin-top: 8px; }
#askme-sidebar:not(.is-expanded) .askme-auth-error { display: none !important; }

/* ------------------------------------------------------------------ *
 * Desktop (>=768px) — push-content rail. Default state (this base
 * rule, no class needed) IS the collapsed rail, so it's correct on
 * first paint with no JS required — every page load starts collapsed,
 * by design, and never slides in from anywhere; it's just always
 * there, static, at its collapsed width.
 * ------------------------------------------------------------------ */

@media (min-width: 768px) {
	#askme-sidebar { transform: none; }

	.askme-has-sidebar-offset {
		margin-left: var(--askme-sb-collapsed);
		transition: margin-left var(--askme-sb-transition);
	}
	body.askme-sidebar-expanded .askme-has-sidebar-offset {
		margin-left: var(--askme-sb-expanded);
	}

	.askme-sidebar-overlay { display: none !important; }

	/* Toggle button tracks the rail's own edge — same width variables
	   and the same body class the rail itself reacts to, so both
	   animate together at exactly the same width/left, never drifting
	   out of sync. Always above the sidebar since it's outside its box
	   either way. */
	#askme-sidebar-toggle {
		left: calc(var(--askme-sb-collapsed) + var(--askme-sb-toggle-gap));
		z-index: calc(var(--askme-sb-z) + 2);
	}
	body.askme-sidebar-expanded #askme-sidebar-toggle {
		left: calc(var(--askme-sb-expanded) + var(--askme-sb-toggle-gap));
	}

	/* Brand text's centering box tracks the SAME rail width the content
	   column itself reacts to (.askme-has-sidebar-offset, above) and the
	   plugin's #askme-chat-form uses (see chat.css) — so all three stay
	   lined up together as the rail collapses/expands. */
	body.askme-sidebar-expanded #askme-topbar-brand {
		left: var(--askme-sb-expanded) !important;
	}
}

/* ------------------------------------------------------------------ *
 * Mobile (<=767px) — off-canvas drawer. Default state (this base rule)
 * IS off-screen, so it's correct on first paint with no JS required —
 * never a flash of the full drawer before it slides away. Always
 * rendered "expanded" (labels visible) — there's no icon-only state on
 * a drawer, nothing to collapse to.
 * ------------------------------------------------------------------ */

@media (max-width: 767px) {
	#askme-sidebar {
		width: min(86vw, 300px);
		transform: translateX(-103%);
		border-right: 0;
	}
	#askme-sidebar.is-open { transform: translateX(0); }

	.askme-top-text { opacity: 1 !important; max-width: 160px !important; }
	.askme-menu-label { opacity: 1 !important; max-width: 180px !important; }
	#askme-sidebar .askme-account-action,
	#askme-sidebar .askme-google-btn span,
	.askme-sidebar-guest-note { display: revert !important; }
	#askme-sidebar .askme-account-row { grid-template-columns: 42px 1fr 1fr !important; }
	#askme-sidebar .askme-menu-item { justify-content: flex-start !important; padding: 0 14px !important; }
	#askme-sidebar .askme-menu-item.is-active { background: var(--askme-sb-active); font-weight: 650; }
	#askme-sidebar .askme-menu-icon { width: auto !important; height: auto !important; border-radius: 0 !important; background: none !important; }
	#askme-sidebar .askme-menu-tooltip { display: none !important; }

	.askme-sidebar-overlay {
		position: fixed; inset: 0;
		background: rgba(10,10,10,.34);
		backdrop-filter: blur(2px);
		z-index: calc(var(--askme-sb-z) - 1);
		opacity: 0; visibility: hidden;
		transition: .22s ease;
	}
	body.askme-sidebar-open .askme-sidebar-overlay { opacity: 1; visibility: visible; }

	.askme-has-sidebar-offset { margin-left: 0 !important; }

	/* Toggle button: pinned top-left, but stacked BELOW the drawer
	   (drawer is --askme-sb-z, this is --askme-sb-z minus 2, which is
	   also below the overlay at --askme-sb-z minus 1) — so once the
	   drawer opens and slides over this spot, it visually covers the
	   button rather than floating above it. When the drawer is closed
	   it's off-screen (translateX) regardless of z-index, so the
	   button reads normally as the open trigger. */
	#askme-sidebar-toggle {
		left: 0px;
		z-index: calc(var(--askme-sb-z) - 2);
	}

	/* Same "stacked below the drawer" treatment as #askme-sidebar-toggle
	   above, so the open drawer visually covers the whole top bar
	   (brand text + theme-toggle) on mobile, not just the toggle
	   button. */
	#askme-topbar-brand,
	#askme-theme-toggle {
		z-index: calc(var(--askme-sb-z) - 2) !important;
	}

	/* Narrower corner buttons + a smaller side padding so all three
	   top-bar pieces fit without colliding on small screens. Also
	   matches .askme-chat-conversation #askme-chat-form's own mobile
	   rule: no rail to offset for on mobile (drawer overlays instead of
	   pushing), so left goes back to 0. */
	#askme-topbar-brand { left: 0 !important; padding: 0 44px; }
}

body.askme-sidebar-open { overflow: hidden; }