/* Comic Chat message presentation. Keep protocol and character rendering styles
 * isolated from Gamja's core stylesheet so upstream style changes remain easy to
 * merge. This file is loaded after style.css and contains the effective values
 * from the former duplicated Comic Chat blocks. */

#buffer .logline.comicchat-line {
	display: flex;
	align-items: center;
	gap: 14px;
	overflow: visible;
	margin: 0 0 8px 0;
	padding: 12px 14px;
	border-radius: 10px;
}

#buffer .logline.comicchat-line:hover {
	background: rgba(255, 255, 255, 0.04);
}

/* These appeared after the old Comic Chat rules in style.css. Re-state them
 * here so moving this stylesheet later in the cascade does not weaken mention
 * highlighting. */
#buffer .logline.comicchat-line.highlight {
	background: rgba(88, 101, 242, 0.14);
}

#buffer .logline.comicchat-line.highlight:hover {
	background: rgba(88, 101, 242, 0.20);
}

#buffer .comicchat-avatar-slot {
	flex: 0 0 72px;
	width: 72px;
	min-width: 72px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
}

#buffer .comicchat-avatar {
	display: block;
	width: 72px;
	height: 96px;
	object-fit: contain;
	background: transparent !important;
	border: none;
	box-shadow: none;
}

#buffer .comicchat-avatar-fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	border-radius: 999px;
	box-sizing: border-box;
	background: rgba(255, 255, 255, 0.10);
	border: 1px solid rgba(255, 255, 255, 0.08);
	font-size: 2.5rem;
	font-weight: 900;
	line-height: 1;
	text-transform: uppercase;
	user-select: none;
}

#buffer .comicchat-line-body {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-top: 0;
	background: transparent;
}

#buffer .comicchat-meta {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin-bottom: 4px;
}

#buffer .comicchat-content {
	color: var(--main-color);
	line-height: 1.45;
}

#buffer .comicchat-meta .nick {
	font-weight: 700;
	font-size: 1rem;
}

#buffer .comicchat-meta .timestamp {
	color: var(--gray);
	font-size: 0.85rem;
	font-weight: 500;
}

/* The current Gamja integration wraps non-chat lines in the same structural
 * containers. Keep their traditional compact layout until that markup can be
 * simplified independently. */
#buffer .logline.talk:not(.comicchat-line) {
	padding-top: 14px;
	padding-bottom: 14px;
}

#buffer .logline:not(.comicchat-line) .comicchat-avatar-slot {
	display: none;
}

#buffer .logline:not(.comicchat-line) .comicchat-line-body {
	display: block;
	padding-top: 0;
}

#buffer .logline:not(.comicchat-line) {
	margin: 0 0 2px 0;
	padding: 2px 12px;
	border-radius: 0;
	background: transparent;
}

#buffer .logline:not(.comicchat-line) .timestamp {
	display: inline;
	margin-right: 10px;
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--gray);
}

#buffer .logline:not(.comicchat-line):hover {
	background: transparent;
}

/* Source-defined Comic Chat message modes. These are deliberately modest
 * presentation hints, not an attempt to reproduce comic panels or balloons. */
#buffer .logline.comicchat-mode-think .comicchat-content {
	font-style: italic;
	padding-left: 10px;
	border-left: 2px dotted currentColor;
}

#buffer .logline.comicchat-mode-whisper .comicchat-content {
	font-size: 0.94em;
	padding-left: 10px;
	border-left: 2px solid currentColor;
}

#buffer .logline.comicchat-mode-action .comicchat-content {
	font-style: italic;
	font-weight: 600;
	padding-left: 10px;
	border-left: 3px solid currentColor;
}

/* Spoken labels remain available to assistive technology without adding a
 * visible badge to the compact message layout. */
#buffer .comicchat-mode-label {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Converted native AVB packages. Complex characters are composed from the
 * separately decoded torso and face layers inside the existing avatar box. */
#buffer .comicchat-avatar-complex {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	overflow: visible;
}

#buffer .comicchat-avatar-complex-stage {
	position: relative;
	flex: 0 0 auto;
	transform-origin: center center;
}

#buffer .comicchat-avatar-layer {
	position: absolute;
	display: block;
	pointer-events: none;
	max-width: none;
	max-height: none;
	background: transparent !important;
	border: none;
	box-shadow: none;
}

/* Optional close-up presentation for locally bundled converted characters.
 * The source composition is unchanged: it is fitted to the 72px width, aligned
 * to the top, and clipped only where it extends below the 96px viewport. */
#buffer .comicchat-avatar-portrait {
	width: 72px;
	height: 96px;
	overflow: hidden;
	display: flex;
	align-items: flex-start;
	justify-content: center;
}

#buffer .comicchat-avatar-portrait .comicchat-avatar-complex-stage {
	flex: 0 0 auto;
}

#buffer .comicchat-avatar-portrait-image {
	display: block;
	width: 72px;
	height: auto;
	max-width: none;
	max-height: none;
	object-position: top center;
	background: transparent !important;
	border: none;
	box-shadow: none;
}