/*
 * The docked conversation (scripts/components/ChatDock.js).
 *
 * Everything here is scoped under .chatDock. The chat components carry ids —
 * #wrapper, #messages — sized for a full screen (#messages is 70vw), so the panel
 * has to re-size them rather than inherit them. Scoping means the full-screen chat,
 * which is still what a phone gets, is untouched by this file.
 *
 * Colours come from the tokens in common.css, so the panel follows the theme the
 * head script sets before first paint rather than defining a second palette.
 */

.chatDock {
	position: fixed;
	right: 1.5rem;
	bottom: 0;
	z-index: 40;
	background: #ffffff;
	border: 1px solid rgba(0, 0, 0, .15);
	border-bottom: none;
	border-radius: 10px 10px 0 0;
	box-shadow: 0 -2px 14px rgba(0, 0, 0, .18);
	font-family: inherit;
}

html[data-theme="dark"] .chatDock {
	background: #242526;
	border-color: rgba(255, 255, 255, .2);
	box-shadow: 0 -2px 14px rgba(0, 0, 0, .5);
}

.chatDockOpen { width: 27rem; }

.chatDockBar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: .5rem .5rem .5rem .9rem;
	border-bottom: 1px solid rgba(0, 0, 0, .12);
}

html[data-theme="dark"] .chatDockBar { border-bottom-color: rgba(255, 255, 255, .18); }

.chatDockName {
	font-weight: 700;
	color: var(--relay-blue-text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/*
 * competitorsStyle.css carries a bare `button { width: 8em }`, which lands on every
 * button in the app — including these two. It made the ✕ 141px wide and squeezed the
 * name into 60px of a 276px pill, so "AndroidQA" rendered as "Andr…". Overridden
 * here rather than there: that global is load-bearing for the buttons it was written
 * for, and this is the dock's problem to solve.
 */
.chatDock .chatDockTitle,
.chatDock .chatDockIcon {
	width: auto;
}

.chatDockIcon {
	background-color: transparent;
	border: none;
	cursor: pointer;
	font-size: 1.1rem;
	line-height: 1;
	padding: .25rem .5rem;
	color: var(--relay-meta);
}

.chatDockIcon:hover { color: var(--relay-blue-text); }

/* Both controls are icon-only, so the focus ring is the whole affordance for a
   keyboard user. */
.chatDockIcon:focus-visible,
.chatDockTitle:focus-visible {
	outline: 3px solid var(--relay-blue-text);
	outline-offset: 2px;
}

.chatDockTitle {
	display: flex;
	align-items: center;
	gap: .45rem;
	background-color: transparent;
	border: none;
	cursor: pointer;
	font-size: 1rem;
	font-weight: 700;
	padding: .6rem .9rem;
	color: var(--relay-blue-text);
	max-width: 16rem;
}

/* Only the name gives way. min-width:0 is what allows a flex item to shrink below
   its text, without which the button grows instead of the label truncating. */
.chatDockLabel {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.chatDockMini {
	display: flex;
	align-items: center;
	padding-right: .3rem;
}

/* A reply to a parked conversation. Red on its own would be the only signal, so
   the dot is paired with a title attribute and an aria-label in the markup. */
.chatDockDot {
	flex: 0 0 auto;   /* never shrinks, never truncates */
	width: .55rem;
	height: .55rem;
	border-radius: 50%;
	background: #e0245e;
}

/* And the pill itself lifts, for anyone who cannot pick out the dot. */
.chatDockUnread {
	border-color: #e0245e;
	box-shadow: 0 -2px 14px rgba(224, 36, 94, .35);
}

/*
 * Re-sizing a full screen into a 27rem panel.
 *
 * The chat was written to own a page: #float is 100vw, the avatar is 8em, the
 * composer has a 2em margin and the message list filled 80vh. None of that is wrong
 * on a screen of its own, so nothing here changes those rules — it overrides them
 * inside .chatDock and leaves the full-screen chat, which is still what a phone
 * gets, exactly as it was.
 *
 * The panel is a fixed-height flex column: header and composer keep their size, the
 * message list takes what is left and scrolls. `min-height: 0` on the scrolling
 * ancestors is what lets it shrink — without it a flex item refuses to go below its
 * content height and the composer is pushed off the bottom.
 */
.chatDock #wrapper {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 68vh;
	max-height: 620px;
	/* chatStyle centres #wrapper's children, which on a column flex container means
	   they size to their CONTENT rather than to the panel — the header then set the
	   panel's width from the length of the name in it. Stretch instead. */
	align-items: stretch;
	justify-content: flex-start;
}

/* Every band in the chat spans the panel and may shrink below its content. */
.chatDock #wrapper > div,
.chatDock #header,
.chatDock #float {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

/* The partner's name is a page heading in the full-screen chat. */
.chatDock #header h1,
.chatDock #header h2,
.chatDock #header h3 {
	font-size: 1.1rem;
	margin: .2rem 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ChatBody's own root: the list and the composer live inside it. */
.chatDock #wrapper > div:last-child {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
}

.chatDock .chatMessageScroll {
	height: auto;
	flex: 1 1 auto;
	min-height: 0;
	padding: 10px !important;
}

.chatDock #float {
	width: 100%;
	height: auto;
	padding: .3rem 0;
}

.chatDock #imga {
	width: 3.2em;
	height: 3.2em;
}

.chatDock #post {
	flex: 0 0 auto;
	padding-bottom: .4em;
	flex-wrap: wrap;
}

.chatDock #mstext {
	margin: .5em;
	width: 100%;
	box-sizing: border-box;
}

.chatDock #lop { width: 100%; }

.chatDock input,
.chatDock textarea {
	max-width: 100%;
	box-sizing: border-box;
}

/*
 * The chat's own header is redundant here — it repeats the name the dock's title bar
 * already shows, and its back button duplicates the ✕ — so ChatWrapper is asked not
 * to render it at all (hideHeader). This rule is only a fallback for a stale bundle.
 */
.chatDock #centerBack,
.chatDock #header { display: none; }

/* Below the breakpoint the app still opens chat as its own screen, which is the only
   thing that fits. This is the SECOND guard, not the first: RelayDock.available()
   unmounts the panel, and only unmounting detaches its Firebase listeners. Keep 899
   in step with DOCK_MIN_WIDTH (900) in ChatDock.js. */
@media (max-width: 899px) {
	.chatDock { display: none; }
}