:root {
			color-scheme: light;

			--bg-page: #fff;
			--bg-panel: #fff;
			--bg-panel-alt: #fafafa;
			--bg-hover: #f3f3f3;
			--bg-hover-soft: #f5f5f5;
			--bg-chip: #f8f8f8;
			--bg-subtle: #eee;
			--bg-tile-header: #fcfcfd;
			--bg-input: #fff;
			--bg-button: #efefef;

			--border-color: #ccc;
			--border-color-soft: #ddd;
			--border-color-faint: #eee;

			--text-primary: #000;
			--text-secondary: #444;
			--text-tertiary: #555;
			--text-muted: #666;
			--text-strong: #222;

			--accent: #0a66d9;
			--accent-bg-soft: #f3f6ff;
			--accent-bg-drop: #f3f8ff;
			--accent-bg-drop2: #f8fbff;

			--danger: #b00020;
			--danger-strong: #e53935;

			--active-bg: #b8d5b2;
			--active-outline: #000;

			--mention-bg: #e8f0ff;
			--mention-color: #1d4ed8;
			--mention-self-bg: #ffe7a8;
			--mention-self-color: #7a4b00;
			--mentioned-msg-bg: #fff8db;
			--mentioned-msg-border: #f0d879;

			--tile-badge-bg: #eef2ff;
			--tile-badge-color: #334155;

			--presence-online: #2fa84f;
			--presence-offline: #b3b6bb;

			--shadow-color: rgba(0, 0, 0, 0.25);
			--shadow-soft: rgba(0, 0, 0, 0.12);
			--shadow-tile: rgba(0, 0, 0, 0.08);
			--bg-overlay: rgba(255, 255, 255, 0.92);
		}

		html[data-theme="dark"] {
			color-scheme: dark;

			--bg-page: #1e1f22;
			--bg-panel: #2b2d31;
			--bg-panel-alt: #232428;
			--bg-hover: #35373c;
			--bg-hover-soft: #35373c;
			--bg-chip: #383a40;
			--bg-subtle: #3a3c42;
			--bg-tile-header: #26282c;
			--bg-input: #1e1f22;
			--bg-button: #3a3c42;

			--border-color: #46484e;
			--border-color-soft: #3f4147;
			--border-color-faint: #3a3c42;

			--text-primary: #e6e6e6;
			--text-secondary: #b5b7bb;
			--text-tertiary: #a6a8ad;
			--text-muted: #949ba4;
			--text-strong: #f2f3f5;

			--accent: #4c9eff;
			--accent-bg-soft: #26344a;
			--accent-bg-drop: #1d2a3d;
			--accent-bg-drop2: #1a2531;

			--danger: #ff6b6b;
			--danger-strong: #e5484d;

			--active-bg: #3a5c34;
			--active-outline: #e6e6e6;

			--mention-bg: #2c3c66;
			--mention-color: #9ec1ff;
			--mention-self-bg: #4a3a12;
			--mention-self-color: #ffd479;
			--mentioned-msg-bg: #3a341a;
			--mentioned-msg-border: #6b5d24;

			--tile-badge-bg: #333752;
			--tile-badge-color: #c7cdf5;

			--presence-online: #3ba55d;
			--presence-offline: #6b6e75;

			--shadow-color: rgba(0, 0, 0, 0.5);
			--shadow-soft: rgba(0, 0, 0, 0.35);
			--shadow-tile: rgba(0, 0, 0, 0.3);
			--bg-overlay: rgba(30, 31, 34, 0.92);
		}

		* {
			box-sizing: border-box;
		}

		html,
		body {
			height: 100%;
			margin: 0;
		}

		body {
			font-family: Arial, sans-serif;
			min-height: 100vh;
			min-height: 100dvh;
			overflow: hidden;
			display: flex;
			flex-direction: column;
			background: var(--bg-page);
			color: var(--text-primary);
		}

		button,
		input,
		select,
		textarea {
			font: inherit;
			color: var(--text-primary);
		}

		button,
		select,
		input:not([type="checkbox"]):not([type="range"]):not([type="file"]),
		textarea {
			background: var(--bg-input);
			border: 1px solid var(--border-color);
		}

		button {
			background: var(--bg-button);
			cursor: pointer;
		}

		/* Browsers keep a button's native focus ring visible after a mouse
		   click (not just keyboard nav), which — with nothing here to
		   suppress it — lingers on whatever was last clicked, in whatever
		   color the browser/OS uses for it. That's independent of and can
		   look like it's clashing with this app's own .active styling
		   (green fill + outline, driven by --active-bg/--active-outline).
		   :focus-visible keeps the ring for real keyboard navigation
		   (accessibility) while dropping it for mouse clicks. */
		button:focus:not(:focus-visible) {
			outline: none;
		}

		img {
			max-width: 100%;
			height: auto;
		}

		#topbar {
			padding: 8px 16px;
			border-bottom: 1px solid var(--border-color);
			flex: 0 0 auto;
			background: var(--bg-panel);
		}

		.topbar-desktop {
			display: grid;
			grid-template-columns: 1fr auto 1fr;
			align-items: center;
			gap: 12px;
			min-height: 44px;
		}

		.topbar-left,
		.topbar-center,
		.topbar-right {
			min-width: 0;
		}

		.topbar-left {
			display: flex;
			align-items: center;
			justify-content: flex-start;
		}

		.topbar-center {
			display: flex;
			align-items: center;
			justify-content: center;
			text-align: center;
			gap: 8px;
		}

		.topbar-right {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			gap: 8px;
			flex-wrap: nowrap;
		}

		#brandName {
			margin: 0;
			font-size: 20px;
			line-height: 1.2;
			font-weight: bold;
			white-space: nowrap;
		}

		#status {
			margin: 0;
			font-size: 14px;
			color: var(--text-secondary);
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			max-width: 100%;
		}

		#topbar button {
			margin: 0;
			min-height: 36px;
			padding: 8px 12px;
		}

		#themeToggleBtn {
			font-size: 16px;
			line-height: 1;
			padding: 8px 10px;
		}

		#authArea {
			padding: 16px;
			flex: 1 1 auto;
			overflow-y: auto;
			min-height: 0;
			-webkit-overflow-scrolling: touch;
		}

		#authArea input,
		#authArea button {
			width: 100%;
			max-width: 420px;
			min-height: 42px;
			padding: 10px 12px;
		}

		#authArea label {
			display: block;
			max-width: 420px;
		}

		#authArea .field-hint {
			max-width: 420px;
			font-size: 12px;
			color: var(--text-muted);
			margin: 4px 0 0;
		}

		#authArea input[type="checkbox"] {
			width: auto;
			min-height: auto;
			padding: 0;
		}

		#app {
			display: none;
			flex: 1 1 auto;
			min-height: 0;
			min-width: 0;
		}

		#layout {
			display: flex;
			flex: 1 1 auto;
			height: 100%;
			min-height: 0;
			min-width: 0;
			overflow: hidden;
		}

		#serversPane,
		#channelsPane {
			flex: 0 0 220px;
			width: 220px;
			max-width: 220px;
			border-right: 1px solid var(--border-color);
			padding: 12px;
			min-width: 0;
			background: var(--bg-panel);
			display: flex;
			flex-direction: column;
		}

		#channelsPane .paneBody {
			display: flex;
			flex-direction: column;
			flex: 1 1 auto;
			min-height: 0;
		}

		#channelsList {
			flex: 1 1 auto;
			min-height: 0;
			overflow-y: auto;
			padding-right: 4px;
		}

		#channelsVoicePanelWrap {
			flex: 0 0 auto;
			margin-top: 12px;
			padding-top: 12px;
			border-top: 1px solid var(--border-color-soft);
		}

		#voicePanel {
			min-width: 0;
			padding: 0 !important;
			border: none !important;
		}

		#voicePanel {
			background: var(--bg-panel-alt);
			border-radius: 10px;
			padding: 8px !important;
		}

		.paneBody {
			min-width: 0;
		}

		#serversPane.collapsed,
		#channelsPane.collapsed {
			flex: 0 0 64px;
			width: 64px;
			max-width: 64px;
			padding-left: 8px;
			padding-right: 8px;
			overflow: hidden;
		}

		#serversPane.collapsed .paneBody,
		#channelsPane.collapsed .paneBody {
			display: none;
		}

		#serversPane.collapsed .paneHeader,
		#channelsPane.collapsed .paneHeader {
			justify-content: center;
		}

		#serversPane.collapsed .paneHeader h3,
		#channelsPane.collapsed .paneHeader h3 {
			display: none;
		}

		#serversPane,
		#channelsPane {
			transition: width 0.2s ease, flex-basis 0.2s ease, padding 0.2s ease;
		}

		@media (min-width: 1200px) {
			#serversPane,
			#channelsPane {
				flex-basis: 280px;
				width: 280px;
				max-width: 280px;
			}
		}

		#membersPane {
			flex: 0 0 220px;
			width: 220px;
			max-width: 220px;
			border-left: 1px solid var(--border-color);
			padding: 12px;
			min-width: 0;
			background: var(--bg-panel);
			display: flex;
			flex-direction: column;
			transition: width 0.2s ease, flex-basis 0.2s ease, padding 0.2s ease;
		}

		#membersPane .paneBody {
			display: flex;
			flex-direction: column;
			flex: 1 1 auto;
			min-height: 0;
			overflow-y: auto;
		}

		#membersPane.collapsed {
			flex: 0 0 64px;
			width: 64px;
			max-width: 64px;
			padding-left: 8px;
			padding-right: 8px;
			overflow: hidden;
		}

		#membersPane.collapsed .paneBody {
			display: none;
		}

		#membersPane.collapsed .paneHeader {
			justify-content: center;
		}

		#membersPane.collapsed .paneHeader h3 {
			display: none;
		}

		@media (min-width: 1200px) {
			#membersPane {
				flex-basis: 260px;
				width: 260px;
				max-width: 260px;
			}
		}

		.member-group-label {
			font-size: 11px;
			font-weight: bold;
			text-transform: uppercase;
			letter-spacing: 0.04em;
			color: var(--text-muted);
			margin: 12px 0 6px;
		}

		.member-group-label:first-child {
			margin-top: 0;
		}

		.member-item {
			display: flex;
			align-items: center;
			gap: 8px;
			padding: 6px 4px;
			border-radius: 6px;
			min-width: 0;
		}

		.member-item-name {
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			min-width: 0;
		}

		.member-item.offline .member-item-name {
			color: var(--text-muted);
		}

		.member-status-dot {
			flex: 0 0 auto;
			width: 9px;
			height: 9px;
			border-radius: 50%;
			background: var(--presence-offline);
		}

		.member-last-seen {
			flex: 0 0 auto;
			margin-left: auto;
			padding-left: 8px;
			font-size: 11px;
			color: var(--text-muted);
		}

		.member-item.online .member-status-dot {
			background: var(--presence-online);
		}

		.friend-item-actions {
			flex: 0 0 auto;
			margin-left: auto;
			padding-left: 8px;
			display: flex;
			gap: 4px;
		}

		.friend-action-btn {
			font-size: 11px;
			padding: 3px 7px;
			border-radius: 4px;
			border: 1px solid var(--border-color-soft);
			background: var(--bg-panel-alt);
			color: var(--text-primary);
			cursor: pointer;
			white-space: nowrap;
		}

		.friend-action-btn.danger {
			color: var(--danger);
		}

		.friend-action-btn.danger:hover {
			background: var(--danger);
			color: #fff;
		}

		.dm-list-item {
			cursor: pointer;
		}

		.dm-list-item:hover {
			background: var(--bg-panel-alt);
		}

		/* Two-line layout shared by the DM list and friend rows: a shrinkable
		   name+subtext column on the left, with a non-shrinking badge/dot
		   pinned to the row. Keeps long preview text or action buttons from
		   squeezing the username down to nothing. */
		.member-item-stacked {
			align-items: center;
		}

		.member-item-text {
			display: flex;
			flex-direction: column;
			min-width: 0;
			flex: 1 1 auto;
			gap: 2px;
		}

		.member-item-subtext {
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			min-width: 0;
			font-size: 11px;
			color: var(--text-muted);
		}

		.friend-row {
			flex-direction: column;
			align-items: stretch;
			gap: 4px;
		}

		.friend-row .member-item-row {
			display: flex;
			align-items: center;
			gap: 8px;
			min-width: 0;
		}

		.friend-row .friend-item-actions {
			margin-left: 0;
			padding-left: 0;
			justify-content: flex-end;
		}

		.add-friend-form {
			display: flex;
			gap: 6px;
			margin-bottom: 12px;
		}

		.add-friend-form input {
			flex: 1 1 auto;
			min-width: 0;
		}

		#chatPane {
			flex: 1 1 auto;
			display: flex;
			flex-direction: column;
			min-width: 0;
			min-height: 0;
		}

		#chatHeader {
			padding: 12px;
			border-bottom: 1px solid var(--border-color);
			word-break: break-word;
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 12px;
		}

		/* Hidden on desktop - shown only under the mobile breakpoint below,
		   where #layout's server/channel list and #chatPane swap full-screen
		   instead of both existing at (unusable) shrunk sizes. */
		#mobileBackToListBtn {
			display: none;
			flex: 0 0 auto;
			font-size: 20px;
			line-height: 1;
			padding: 6px 10px;
			border-radius: 6px;
		}

		.voice-member {
			font-size: 14px;
			margin-bottom: 4px;
		}

		#messages {
			position: relative;
			flex: 1 1 auto;
			padding: 12px;
			overflow-y: auto;
			min-height: 0;
			min-width: 0;
			-webkit-overflow-scrolling: touch;
		}

		.new-messages-pill {
			display: none;
			align-items: center;
			gap: 6px;
			position: absolute;
			left: 50%;
			bottom: 16px;
			transform: translateX(-50%);
			background: #222;
			color: #fff;
			border: none;
			padding: 8px 16px;
			border-radius: 999px;
			font-size: 13px;
			font-weight: bold;
			cursor: pointer;
			box-shadow: 0 2px 8px var(--shadow-color);
			z-index: 5;
		}

		.new-messages-pill:hover {
			background: #000;
		}

		.message {
			position: relative;
			margin-bottom: 12px;
			padding-bottom: 8px;
			border-bottom: 1px solid var(--border-color-faint);
			display: flex;
			gap: 10px;
		}

		.message-body {
			flex: 1 1 auto;
			min-width: 0;
		}

		.message-avatar {
			margin-top: 2px;
		}

		.avatar {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			border-radius: 50%;
			overflow: hidden;
			flex-shrink: 0;
			background: var(--bg-panel-alt);
			color: #fff;
			font-weight: 600;
			user-select: none;
			line-height: 1;
		}

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

		.clickable-avatar {
			cursor: pointer;
		}

		/* Server icons use a rounded square instead of the circle avatars use —
		   shows more of the actual image (a circle crops the corners off). */
		.avatar-rounded-square {
			border-radius: 30%;
		}

		.message-meta {
			font-size: 13px;
			color: var(--text-tertiary);
			margin-bottom: 4px;
			display: flex;
			flex-wrap: wrap;
			align-items: baseline;
			gap: 6px;
		}

		.message-edited-tag {
			font-size: 11px;
			color: var(--text-muted);
			font-style: italic;
		}

		.message-pinned-tag {
			font-size: 11px;
			color: var(--accent);
		}

		.message-content {
			white-space: pre-wrap;
			word-break: break-word;
			overflow-wrap: anywhere;
		}

		.message-hover-actions {
			position: absolute;
			top: -2px;
			right: 0;
			display: flex;
			gap: 4px;
			opacity: 0;
			pointer-events: none;
			background: var(--bg-panel);
			border: 1px solid var(--border-color-soft);
			border-radius: 6px;
			padding: 2px;
		}

		.message:hover .message-hover-actions,
		.message:focus-within .message-hover-actions {
			opacity: 1;
			pointer-events: auto;
		}

		.message-action-btn {
			border: none;
			background: transparent;
			color: var(--text-muted);
			font-size: 12px;
			padding: 4px 8px;
			cursor: pointer;
			border-radius: 4px;
		}

		.message-action-btn:hover {
			background: var(--bg-panel-alt);
			color: var(--text-primary);
		}

		.message-action-btn.danger {
			color: var(--danger);
		}

		.message-action-btn.danger:hover {
			background: var(--danger);
			color: #fff;
		}

		.message-reactions {
			display: flex;
			flex-wrap: wrap;
			gap: 4px;
			margin-top: 4px;
		}

		.reaction-pill {
			display: inline-flex;
			align-items: center;
			gap: 4px;
			font-size: 12px;
			line-height: 1;
			padding: 3px 7px;
			border-radius: 10px;
			border: 1px solid var(--border-color-soft);
			background: var(--bg-panel-alt);
			color: var(--text-secondary, var(--text-muted));
			cursor: pointer;
		}

		.reaction-pill:hover {
			border-color: var(--text-muted);
		}

		.reaction-pill.reacted {
			border-color: var(--mention-color, #5865f2);
			background: color-mix(in srgb, var(--mention-color, #5865f2) 15%, var(--bg-panel-alt));
			color: var(--text-primary);
		}

		.reaction-add-btn {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			font-size: 12px;
			padding: 3px 7px;
			border-radius: 10px;
			border: 1px dashed var(--border-color-soft);
			background: transparent;
			color: var(--text-muted);
			cursor: pointer;
		}

		.reaction-add-btn:hover {
			border-style: solid;
			color: var(--text-primary);
		}

		.emoji-picker-popover {
			position: fixed;
			z-index: 50;
			display: none;
			flex-direction: column;
			gap: 6px;
			padding: 6px;
			background: var(--bg-panel);
			border: 1px solid var(--border-color-soft);
			border-radius: 8px;
			box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
			width: 360px;
		}

		.emoji-picker-popover.show {
			display: flex;
		}

		.emoji-picker-search {
			width: 100%;
			box-sizing: border-box;
			padding: 6px 10px;
			border-radius: 6px;
			font-size: 13px;
			flex: 0 0 auto;
		}

		/* Discord-style continuous scroll through category sections, rather than
		   clickable category tabs - each section header stays pinned while its
		   own emoji scroll past underneath it. */
		.emoji-picker-grid {
			display: flex;
			flex-direction: column;
			gap: 2px;
			max-height: 320px;
			overflow-y: auto;
			overflow-x: hidden;
		}

		.emoji-picker-category-label {
			position: sticky;
			top: 0;
			background: var(--bg-panel);
			font-size: 11px;
			font-weight: 600;
			text-transform: uppercase;
			letter-spacing: 0.03em;
			color: var(--text-muted);
			padding: 4px 2px;
		}

		.emoji-picker-row {
			display: grid;
			grid-template-columns: repeat(9, 1fr);
			gap: 2px;
			margin-bottom: 4px;
		}

		.emoji-picker-empty {
			padding: 12px 4px;
			text-align: center;
			font-size: 12px;
			color: var(--text-muted);
		}

		.emoji-picker-item {
			border: none;
			background: transparent;
			font-size: 18px;
			line-height: 1;
			padding: 4px;
			border-radius: 4px;
			cursor: pointer;
			min-width: 0;
			overflow: hidden;
			white-space: nowrap;
		}

		.emoji-picker-item:hover {
			background: var(--bg-panel-alt);
		}

		.clickable-name {
			cursor: pointer;
		}

		.clickable-name:hover {
			text-decoration: underline;
		}

		.user-profile-popover {
			position: fixed;
			z-index: 50;
			display: none;
			width: 220px;
			padding: 10px;
			background: var(--bg-panel);
			border: 1px solid var(--border-color-soft);
			border-radius: 8px;
			box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
		}

		.user-profile-popover.show {
			display: block;
		}

		.user-profile-popover-header {
			margin-bottom: 8px;
		}

		.user-profile-popover-name {
			font-weight: 600;
			color: var(--text-primary);
		}

		.user-profile-popover-avatar {
			margin-bottom: 6px;
		}

		.user-profile-popover-bio {
			font-size: 12px;
			color: var(--text-secondary);
			margin-top: 6px;
			white-space: pre-wrap;
			word-break: break-word;
		}

		.user-profile-popover-username {
			font-size: 12px;
			color: var(--text-muted);
		}

		.user-profile-popover-id-row {
			display: flex;
			align-items: center;
			gap: 6px;
			font-size: 11px;
			color: var(--text-muted);
			margin-top: 2px;
		}

		.user-profile-popover-id-row .copy-id-btn {
			background: none;
			border: none;
			padding: 0;
			font-size: 11px;
			color: var(--text-link, #5865f2);
			cursor: pointer;
		}

		.user-profile-popover-id-row .copy-id-btn:hover {
			text-decoration: underline;
		}

		.user-profile-popover-roles {
			display: flex;
			flex-wrap: wrap;
			gap: 4px;
			margin-bottom: 8px;
		}

		.user-profile-popover-body {
			display: flex;
			flex-direction: column;
			gap: 6px;
		}

		.user-profile-popover-hint {
			font-size: 12px;
			color: var(--text-muted);
		}

		.user-profile-popover-actions {
			display: flex;
			gap: 6px;
		}

		.user-profile-popover-actions .friend-action-btn {
			flex: 1 1 auto;
		}

		.user-profile-popover-compose {
			display: flex;
			gap: 6px;
		}

		.user-profile-popover-compose input {
			flex: 1 1 auto;
			min-width: 0;
		}

		.mention-list-popover {
			width: 240px;
		}

		.mention-list-popover-body {
			display: flex;
			flex-direction: column;
			max-height: 280px;
			overflow-y: auto;
		}

		.chat-header-actions {
			display: flex;
			align-items: center;
			gap: 8px;
		}

		.search-popover {
			width: 340px;
		}

		.search-popover-input {
			width: 100%;
			box-sizing: border-box;
			margin-bottom: 8px;
		}

		.search-popover-scope {
			display: flex;
			gap: 6px;
			margin-bottom: 8px;
		}

		.search-popover-scope button {
			flex: 1 1 auto;
			font-size: 12px;
			padding: 4px 8px;
		}

		.search-popover-scope button.active {
			background: var(--accent, #5865f2);
			color: #fff;
		}

		.search-popover-results {
			display: flex;
			flex-direction: column;
			gap: 4px;
			max-height: 320px;
			overflow-y: auto;
		}

		.search-result-item {
			display: flex;
			flex-direction: column;
			gap: 2px;
			padding: 6px 8px;
			border-radius: 6px;
			cursor: pointer;
			text-align: left;
		}

		.search-result-item:hover {
			background: var(--bg-hover, rgba(255, 255, 255, 0.06));
		}

		.search-result-item-meta {
			font-size: 12px;
			color: var(--text-muted);
			display: flex;
			gap: 6px;
			flex-wrap: wrap;
		}

		.search-result-item-content {
			font-size: 13px;
			color: var(--text-primary);
			word-break: break-word;
		}

		.search-result-item-content mark {
			background: rgba(255, 220, 0, 0.35);
			color: inherit;
			border-radius: 2px;
		}

		.pinned-popover {
			width: 340px;
		}

		.pinned-popover-list {
			display: flex;
			flex-direction: column;
			gap: 4px;
			max-height: 360px;
			overflow-y: auto;
		}

		.pinned-item {
			display: flex;
			flex-direction: column;
			gap: 2px;
			padding: 6px 8px;
			border-radius: 6px;
			cursor: pointer;
			text-align: left;
		}

		.pinned-item:hover {
			background: var(--bg-hover);
		}

		.pinned-item-meta {
			font-size: 12px;
			color: var(--text-muted);
			display: flex;
			gap: 6px;
			flex-wrap: wrap;
		}

		.pinned-item-content {
			font-size: 13px;
			color: var(--text-primary);
			word-break: break-word;
		}

		.pinned-item-pinned-by {
			font-size: 11px;
			color: var(--text-muted);
			font-style: italic;
		}

		.pinned-popover {
			width: 340px;
		}

		.pinned-popover-list {
			display: flex;
			flex-direction: column;
			gap: 4px;
			max-height: 360px;
			overflow-y: auto;
		}

		.pinned-item {
			display: flex;
			flex-direction: column;
			gap: 2px;
			padding: 6px 8px;
			border-radius: 6px;
			cursor: pointer;
			text-align: left;
		}

		.pinned-item:hover {
			background: var(--bg-hover);
		}

		.pinned-item-meta {
			font-size: 12px;
			color: var(--text-muted);
			display: flex;
			gap: 6px;
			flex-wrap: wrap;
		}

		.pinned-item-content {
			font-size: 13px;
			color: var(--text-primary);
			word-break: break-word;
		}

		.pinned-item-unpin {
			align-self: flex-end;
			font-size: 11px;
			padding: 2px 6px;
		}

		.reply-quote {
			display: flex;
			align-items: baseline;
			gap: 6px;
			font-size: 12px;
			color: var(--text-muted);
			margin-bottom: 4px;
			padding-left: 10px;
			border-left: 3px solid var(--mention-color, var(--border-color));
			cursor: pointer;
			max-width: 100%;
			overflow: hidden;
		}

		.reply-quote:hover {
			color: var(--text-tertiary);
		}

		.reply-quote-author {
			font-weight: bold;
			flex: 0 0 auto;
		}

		.reply-quote-content {
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			min-width: 0;
		}

		.reply-quote-deleted {
			font-style: italic;
		}

		.message-edit-area {
			display: flex;
			flex-direction: column;
			gap: 6px;
			margin-top: 4px;
		}

		.message-edit-textarea {
			width: 100%;
			min-height: 60px;
			padding: 8px;
			font: inherit;
			resize: vertical;
			box-sizing: border-box;
		}

		.message-edit-actions {
			display: flex;
			gap: 8px;
		}

		.message-edit-actions button {
			font-size: 12px;
			padding: 4px 10px;
			cursor: pointer;
		}

		.reply-preview-bar {
			display: flex;
			align-items: center;
			gap: 8px;
			background: var(--bg-panel-alt);
			border-left: 3px solid var(--mention-color, var(--border-color));
			border-radius: 6px;
			padding: 6px 10px;
			margin-bottom: 8px;
			font-size: 13px;
		}

		.reply-preview-bar-label {
			color: var(--text-muted);
			flex: 0 0 auto;
		}

		.reply-preview-bar-content {
			flex: 1 1 auto;
			min-width: 0;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			color: var(--text-tertiary);
		}

		.reply-preview-bar-cancel {
			flex: 0 0 auto;
			border: none;
			background: transparent;
			cursor: pointer;
			font-size: 16px;
			line-height: 1;
			color: var(--text-muted);
			padding: 0 4px;
		}

		.reply-preview-bar-cancel:hover {
			color: var(--danger-strong);
		}

		.typing-indicator {
			font-size: 12px;
			font-style: italic;
			color: var(--text-muted);
			padding: 0 2px 4px;
		}

		.call-overlay {
			position: fixed;
			inset: 0;
			z-index: 200;
			display: flex;
			align-items: center;
			justify-content: center;
			background: rgba(0, 0, 0, 0.5);
		}

		.call-overlay-card {
			background: var(--bg-panel);
			border: 1px solid var(--border-color);
			border-radius: 12px;
			padding: 28px 32px;
			min-width: 260px;
			text-align: center;
			box-shadow: 0 8px 30px var(--shadow-color);
		}

		.call-overlay-name {
			font-size: 18px;
			font-weight: bold;
			color: var(--text-strong);
			margin-bottom: 6px;
		}

		.call-overlay-status {
			font-size: 13px;
			color: var(--text-muted);
			margin-bottom: 20px;
		}

		.call-overlay-actions {
			display: flex;
			gap: 12px;
			justify-content: center;
		}

		.call-overlay-actions button {
			padding: 8px 20px;
			border-radius: 999px;
			border: none;
			font-weight: bold;
			cursor: pointer;
		}

		.call-accept-btn {
			background: var(--presence-online);
			color: #fff;
		}

		.call-decline-btn {
			background: var(--danger-strong);
			color: #fff;
		}

		.call-history-message {
			text-align: center;
			color: var(--text-muted);
			font-size: 13px;
			font-style: italic;
			padding: 6px 0;
		}

		.pin-notice-message {
			padding: 4px 0;
		}

		.pin-notice-text {
			font-size: 13px;
			color: var(--text-muted);
		}

		.pin-notice-time {
			font-size: 11px;
		}

		.pin-notice-message .reply-quote {
			margin-top: 4px;
			margin-bottom: 0;
		}

		.message-jump-highlight {
			animation: message-jump-flash 2.2s ease-out;
			border-radius: 8px;
		}

		@keyframes message-jump-flash {
			0% { box-shadow: 0 0 0 3px var(--accent); }
			65% { box-shadow: 0 0 0 3px var(--accent); }
			100% { box-shadow: 0 0 0 3px transparent; }
		}

		#composer {
			padding: 12px;
			border-top: 1px solid var(--border-color);
			background: var(--bg-panel);
		}

		#messageForm {
			display: flex;
			flex-direction: column;
			gap: 8px;
			min-width: 0;
			width: 100%;
		}

		#messageInput {
			flex: 1 1 auto;
			width: auto;
			min-width: 0;
			padding: 10px;
			font-size: 16px;
		}

		#sendBtn {
			padding: 10px 14px;
			font-size: 14px;
			cursor: pointer;
			min-height: 42px;
			flex: 0 0 auto;
			white-space: nowrap;
		}

		.server-btn,
		.channel-btn {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 8px;
			width: 100%;
			text-align: left;
			margin-bottom: 8px;
			padding: 10px 12px;
			cursor: pointer;
			min-height: 42px;
		}

		.channel-btn-label {
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			min-width: 0;
		}

		.server-btn-label {
			display: flex;
			align-items: center;
			gap: 8px;
			min-width: 0;
			overflow: hidden;
		}

		.server-btn-name {
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			min-width: 0;
		}

		.channel-btn.channel-unread .channel-btn-label {
			font-weight: bold;
		}

		.channel-mention-badge {
			flex: 0 0 auto;
			background: var(--danger-strong);
			color: #fff;
			font-size: 11px;
			font-weight: bold;
			line-height: 1;
			padding: 3px 6px;
			border-radius: 999px;
			min-width: 10px;
			text-align: center;
		}

		.active {
			font-weight: bold;
			outline: 2px solid var(--active-outline);
			background: var(--active-bg);
		}

		.nav-badge {
			display: inline-block;
			margin-left: 6px;
			background: var(--danger-strong);
			color: #fff;
			font-size: 11px;
			font-weight: bold;
			line-height: 1;
			padding: 3px 6px;
			border-radius: 999px;
			min-width: 10px;
			text-align: center;
		}

		#serverActions,
		#channelActions {
			display: flex;
			flex-direction: column;
			gap: 8px;
			margin-bottom: 12px;
		}

		#serverActions button,
		#channelActions button {
			padding: 10px 12px;
			cursor: pointer;
			min-height: 42px;
			width: 100%;
		}

		.paneHeader {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 8px;
			gap: 8px;
		}

		.paneHeader h3 {
			margin: 0;
			min-width: 0;
			word-break: break-word;
		}

		.menuBtn {
			padding: 6px 10px;
			font-size: 18px;
			line-height: 1;
			cursor: pointer;
			min-height: 40px;
			flex: 0 0 auto;
		}

		.menu {
			display: none;
			flex-direction: column;
			gap: 8px;
			margin-bottom: 12px;
		}

		.menu.show {
			display: flex;
		}

		.menu .danger {
			color: var(--danger);
		}

		.channel-row,
		.server-row {
			display: flex;
			align-items: center;
			gap: 8px;
			margin-bottom: 8px;
			min-width: 0;
		}

		.channel-row .channel-btn,
		.server-row .server-btn {
			flex: 1 1 auto;
			margin-bottom: 0;
			min-width: 0;
		}

		.voice-call-timer {
			flex: 0 0 auto;
			font-size: 11px;
			font-variant-numeric: tabular-nums;
			color: var(--text-muted);
			white-space: nowrap;
		}

		.voice-channel-block {
			margin-bottom: 8px;
		}

		.voice-channel-members {
			padding-left: 18px;
			margin-top: -2px;
			margin-bottom: 8px;
		}

		.voice-channel-member {
			font-size: 13px;
			color: var(--text-tertiary);
			margin-bottom: 4px;
			word-break: break-word;
			display: flex;
			align-items: center;
			gap: 6px;
			flex-wrap: wrap;
		}

		.voice-channel-member.you {
			font-weight: bold;
			color: var(--text-strong);
		}

		.voice-live-badge {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			padding: 1px 7px;
			border-radius: 999px;
			background: #d91414;
			color: #fff;
			font-size: 11px;
			font-weight: 700;
			letter-spacing: 0.4px;
			line-height: 1.4;
			text-transform: uppercase;
			animation:  livePulse 1.6s infinite;
		}

		@keyframes livePulse {
			0% { box-shadow: 0 0 0 0 rgba(217,20,20,0.7); }
			70% { box-shadow: 0 0 0 6px rgba(217,20,20,0); }
			100% { box-shadow: 0 0 0 0 rgba(217,20,20,0); }
		}

		.message-content a {
			color: var(--accent);
			text-decoration: underline;
			word-break: break-all;
		}

		.link-preview {
			display: flex;
			gap: 10px;
			margin-top: 8px;
			padding: 10px;
			border: 1px solid var(--border-color);
			border-radius: 8px;
			text-decoration: none;
			color: inherit;
			max-width: 520px;
			width: 100%;
			background: var(--bg-panel-alt);
			min-width: 0;
		}

		.link-preview:hover {
			background: var(--bg-hover);
		}

		.link-preview-thumb {
			width: 120px;
			height: 68px;
			object-fit: cover;
			border-radius: 6px;
			flex-shrink: 0;
			background: var(--bg-subtle);
		}

		.link-preview-body {
			min-width: 0;
			flex: 1;
		}

		.link-preview-site {
			font-size: 12px;
			color: var(--text-muted);
			margin-bottom: 4px;
			word-break: break-word;
		}

		.link-preview-title {
			font-weight: bold;
			margin-bottom: 4px;
			word-break: break-word;
		}

		.link-preview-desc {
			font-size: 13px;
			color: var(--text-secondary);
			word-break: break-word;
			display: -webkit-box;
			-webkit-line-clamp: 3;
			line-clamp: 3;
			-webkit-box-orient: vertical;
			overflow: hidden;
		}

		#voicePanel {
			min-width: 0;
		}

		#voicePanel input[type="range"] {
			width: 100%;
			max-width: 180px;
		}

		#layout,
		#chatPane,
		#messages,
		#serversPane,
		#channelsPane,
		#membersPane {
			overflow-x: hidden;
		}

		#chatPane > * {
			min-width: 0;
			max-width: 100%;
		}

		.message,
		.message-meta,
		.message-content,
		.link-preview,
		.channel-row,
		.server-row,
		.voice-channel-block,
		.voice-channel-members {
			min-width: 0;
			max-width: 100%;
		}

		.server-btn,
		.channel-btn,
		.channel-actions-popover-list button,
		.category-header-btn {
			min-width: 0;
			max-width: 100%;
			overflow: hidden;
		}

		.server-btn,
		.channel-btn {
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		#composer {
			position: relative;
		}

		.mention-menu {
			display: none;
			position: absolute;
			left: 12px;
			right: 12px;
			bottom: 60px;
			max-height: 220px;
			overflow-y: auto;
			background: var(--bg-panel);
			border: 1px solid var(--border-color);
			border-radius: 10px;
			box-shadow: 0 8px 20px var(--shadow-soft);
			z-index: 50;
		}

		.mention-menu.show {
			display: block;
		}

		.mention-item {
			padding: 10px 12px;
			cursor: pointer;
			border-bottom: 1px solid var(--border-color-faint);
		}

		.mention-item:last-child {
			border-bottom: none;
		}

		.mention-item:hover,
		.mention-item.active {
			background: var(--accent-bg-soft);
		}

		.mention-item-name {
			font-weight: bold;
		}

		.mention-item-sub {
			font-size: 12px;
			color: var(--text-muted);
			margin-top: 2px;
		}

		.emoji-autocomplete-item {
			display: flex;
			align-items: center;
			gap: 10px;
		}

		.emoji-autocomplete-item-glyph {
			font-size: 22px;
			line-height: 1;
			flex: 0 0 auto;
		}

		.emoji-autocomplete-item-name {
			font-weight: bold;
		}

		.mention {
			display: inline-block;
			padding: 1px 6px;
			border-radius: 999px;
			background: var(--mention-bg);
			color: var(--mention-color);
			font-weight: 600;
			cursor: pointer;
		}

		.mention:hover {
			filter: brightness(1.12);
			text-decoration: underline;
		}

		.mention-self {
			display: inline-block;
			padding: 1px 6px;
			border-radius: 999px;
			background: var(--mention-self-bg);
			color: var(--mention-self-color);
			font-weight: 700;
			box-shadow: inset 0 0 0 1px rgba(122, 75, 0, 0.18);
			cursor: pointer;
		}

		.mention-self:hover {
			filter: brightness(1.1);
			text-decoration: underline;
		}

		.message-mentioned-me {
			background: var(--mentioned-msg-bg);
			border: 1px solid var(--mentioned-msg-border);
			padding: 10px;
			border-radius: 8px;
		}

		.channel-item,
		.voice-channel-block,
		.category-item {
			cursor: grab;
		}

		.channel-item.dragging,
		.voice-channel-block.dragging,
		.category-item.dragging {
			opacity: 0.5;
		}

		.channel-drop-zone {
			min-height: 8px;
		}

		.channel-item.drag-over,
		.voice-channel-block.drag-over,
		.category-item.drag-over {
			outline: 2px dashed var(--text-muted);
			border-radius: 6px;
		}

		.channel-items-container:empty {
			min-height: 8px;
		}

		.channel-items-container.container-drag-over {
			outline: 2px dashed var(--text-muted);
			border-radius: 6px;
		}

		.category-item {
			margin-bottom: 10px;
		}

		.category-header {
			display: flex;
			align-items: center;
			gap: 8px;
			margin-bottom: 4px;
		}

		.category-header-btn {
			flex: 1 1 auto;
			display: flex;
			align-items: center;
			gap: 6px;
			min-width: 0;
			padding: 4px 2px;
			cursor: pointer;
			font-size: 13px;
			font-weight: bold;
			color: var(--text-tertiary);
			text-align: left;
		}

		.category-toggle {
			flex: 0 0 auto;
			font-size: 10px;
		}

		.category-label {
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			min-width: 0;
		}

		.category-children {
			padding-left: 10px;
			border-left: 2px solid var(--border-color);
			margin-left: 4px;
		}

		.category-empty-hint {
			font-size: 12px;
			color: var(--text-muted);
			padding: 2px 2px 6px;
			font-style: italic;
		}

		.channel-actions-popover {
			width: 200px;
			padding: 6px;
		}

		.channel-actions-popover-list {
			display: flex;
			flex-direction: column;
			gap: 2px;
		}

		.channel-actions-popover-list button {
			padding: 8px 10px;
			cursor: pointer;
			min-height: 40px;
			text-align: left;
			border-radius: 6px;
		}

		.channel-actions-popover-list .danger {
			color: var(--danger);
		}

		.channel-actions-popover-divider {
			height: 1px;
			margin: 4px 2px;
			background: var(--border-color-soft);
		}

		.channel-actions-popover-label {
			font-size: 11px;
			font-weight: bold;
			text-transform: uppercase;
			color: var(--text-tertiary);
			padding: 6px 10px 2px;
		}

		/* Mobile: one screen at a time instead of every pane squeezed side by
		   side. Default state is the server rail + channel list, full-screen.
		   #layout.mobile-content-active (set by setMainView() whenever a
		   channel/DM/voice room is opened, cleared by #mobileBackToListBtn)
		   swaps to showing #chatPane full-screen instead - see app-core.js. */
		@media (max-width: 900px) {
			#layout {
				position: relative;
				overflow: hidden;
			}

			#serversPane,
			#channelsPane,
			#chatPane {
				position: absolute;
				left: 0;
				right: 0;
				max-width: none;
				/* Base (non-media) rule sets a fixed width: 220px on the first
				   two - clear it so left+right (below) actually take effect
				   instead of over-constraining the box. */
				width: auto;
			}

			/* Stacked full-width, not side by side: unlike real Discord, this
			   app's server list is a text-labeled list (icon + name, "Create
			   Server", "Join Server", ...), not an icon-only rail, so it needs
			   real width - full-width-and-stacked instead of squeezed into a
			   narrow side column. Scoped under #layout (not just the pane's
			   own id) so this beats the desktop-only .collapsed width even if
			   that state carried over from localStorage - collapse/expand
			   isn't a mobile concept, every mobile view should look the same. */
			#layout #serversPane {
				top: 0;
				height: 34%;
				border-bottom: 1px solid var(--border-color);
				border-right: none;
				z-index: 1;
			}

			#layout #channelsPane {
				top: 34%;
				bottom: 0;
				border-right: none;
				z-index: 1;
			}

			#chatPane {
				top: 0;
				bottom: 0;
				z-index: 0;
				visibility: hidden;
			}

			#layout.mobile-content-active #serversPane,
			#layout.mobile-content-active #channelsPane {
				visibility: hidden;
			}

			#layout.mobile-content-active #chatPane {
				z-index: 1;
				visibility: visible;
			}

			#mobileBackToListBtn {
				display: none;
			}

			#layout.mobile-content-active #mobileBackToListBtn {
				display: inline-flex;
				align-items: center;
				justify-content: center;
			}

			#membersPane {
				display: none;
			}

			.link-preview {
				max-width: 100%;
			}
		}

		@media (max-width: 640px) {
			#topbar {
				padding: 10px 12px;
			}

			.topbar-desktop {
				display: block;
			}

			.topbar-left,
			.topbar-center,
			.topbar-right {
				display: block;
			}

			#brandName {
				margin: 0 0 8px 0;
				font-size: 28px;
				white-space: normal;
			}

			#status {
				margin: 0 0 8px 0;
				white-space: normal;
				overflow: visible;
				text-overflow: initial;
			}

			.topbar-right {
				display: block;
			}

			#topbar button {
				margin: 4px 6px 0 0;
			}

			#authArea {
				padding: 12px;
			}

			#serversPane,
			#channelsPane,
			#messages,
			#composer,
			#chatHeader {
				padding: 10px;
			}

			#messageForm {
				flex-direction: column;
				align-items: stretch;
			}

			.composer-row {
				flex-direction: row;
				align-items: center;
				width: 100%;
			}

			#messageInput {
				flex: 1 1 auto;
				min-width: 0;
			}

			#sendBtn {
				width: auto;
			}

			.link-preview {
				flex-direction: column;
			}

			.link-preview-thumb {
				width: 100%;
				height: auto;
				aspect-ratio: 16 / 9;
			}

			.voice-member {
				flex-wrap: wrap;
			}

			.menuBtn {
				padding: 8px 10px;
			}
		}

		.composer-row {
			display: flex;
			gap: 8px;
			align-items: center;
			min-width: 0;
			width: 100%;
		}

		.attach-btn {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: 42px;
			height: 42px;
			border: 1px solid var(--border-color);
			border-radius: 8px;
			cursor: pointer;
			background: var(--bg-panel);
			font-size: 24px;
			line-height: 1;
			flex: 0 0 42px;
			user-select: none;
		}

		.attach-btn:hover {
			background: var(--bg-hover-soft);
		}

		.selected-files {
			display: flex;
			flex-wrap: wrap;
			gap: 8px;
			margin-bottom: 8px;
		}

		.selected-file-chip {
			display: inline-flex;
			align-items: center;
			gap: 6px;
			padding: 6px 10px;
			border: 1px solid var(--border-color);
			border-radius: 999px;
			background: var(--bg-chip);
			max-width: 100%;
		}

		.selected-file-name {
			max-width: 220px;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			font-size: 13px;
		}

		.selected-file-remove {
			border: none;
			background: transparent;
			cursor: pointer;
			font-size: 16px;
			line-height: 1;
			padding: 0;
			color: var(--text-muted);
		}

		.message-attachments {
			margin-top: 8px;
			display: flex;
			flex-direction: column;
			gap: 10px;
			max-width: 520px;
		}

		.attachment-card {
			border: 1px solid var(--border-color-soft);
			border-radius: 10px;
			padding: 8px;
			background: var(--bg-panel-alt);
			min-width: 0;
		}

		.attachment-image,
		.attachment-video {
			display: block;
			max-width: 100%;
			border-radius: 8px;
		}

		.attachment-image {
			max-height: 420px;
			object-fit: contain;
			cursor: pointer;
		}

		.attachment-video {
			width: 100%;
			max-height: 420px;
			background: #000;
		}

		.attachment-file-link {
			display: inline-block;
			word-break: break-word;
			color: var(--accent);
			text-decoration: underline;
		}

		.attachment-meta {
			margin-top: 6px;
			font-size: 12px;
			color: var(--text-muted);
			word-break: break-word;
		}

		@media (max-width: 640px) {
			.composer-row {
				flex-direction: row;
				align-items: stretch;
			}

			.attach-btn {
				width: 42px;
				min-width: 42px;
			}

			.selected-file-name {
				max-width: 160px;
			}
		}

		.drop-active {
			outline: 2px dashed var(--accent);
			outline-offset: -4px;
			background: var(--accent-bg-drop);
		}

		#composer.drop-active {
			background: var(--accent-bg-drop);
		}

		#messages.drop-active {
			background: var(--accent-bg-drop2);
		}

		.drop-hint {
			position: absolute;
			inset: 12px;
			display: none;
			align-items: center;
			justify-content: center;
			text-align: center;
			padding: 16px;
			border: 2px dashed var(--accent);
			border-radius: 12px;
			background: var(--bg-overlay);
			color: var(--accent);
			font-weight: bold;
			pointer-events: none;
			z-index: 40;
		}

		#composer.drop-active .drop-hint,
		#messages.drop-active .drop-hint {
			display: flex;
		}

		#messages,
		#composer {
			position: relative;
		}

		.voice-stream-badge {
			display: inline-flex;
			align-items: center;
			padding: 2px 8px;
			border-radius: 999px;
			background: var(--mention-bg);
			color: var(--mention-color);
			font-size: 12px;
			font-weight: bold;
		}

		.voice-watch-btn {
			padding: 4px 8px;
			min-height: 30px;
			font-size: 12px;
			cursor: pointer;
		}

		#streamViewer {
			display: none;
			padding: 12px;
			border-bottom: 1px solid var(--border-color);
			background: var(--bg-panel-alt);
		}

		#streamViewer.show {
			display: block;
		}

		#streamViewerHeader {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 8px;
			margin-bottom: 8px;
		}

		#streamViewerVideo {
			display: block;
			width: 100%;
			max-height: 60vh;
			background: #000;
			border-radius: 10px;
		}

		.local-preview-note {
			font-size: 12px;
			color: var(--text-muted);
			margin-top: 6px;
		}

		.voice-room-grid {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
			gap: 12px;
			align-items: stretch;
		}

		.voice-tile {
			display: flex;
			flex-direction: column;
			min-height: 220px;
			background: var(--bg-panel);
			border: 1px solid var(--border-color-soft);
			border-radius: 16px;
			overflow: hidden;
			box-shadow: 0 6px 18px var(--shadow-tile);
		}

		.voice-tile-header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 8px;
			padding: 10px 12px;
			border-bottom: 1px solid var(--border-color-faint);
			background: var(--bg-tile-header);
		}

		.voice-tile-name {
			font-weight: 700;
			font-size: 14px;
			min-width: 0;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		.voice-tile-badges {
			display: flex;
			align-items: center;
			gap: 6px;
			flex-wrap: wrap;
			justify-content: flex-end;
		}

		.voice-tile-badge {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			padding: 2px 8px;
			border-radius: 999px;
			font-size: 11px;
			font-weight: 700;
			text-transform: uppercase;
			background: var(--tile-badge-bg);
			color: var(--tile-badge-color);
		}

		.voice-tile-badge.live {
			background: #d91414;
			color: #fff;
		}

		.voice-tile-media {
			position: relative;
			flex: 0 1 auto;
			min-height: 160px;
			max-height: 420px;
			background: #111827;
			display: flex;
			align-items: center;
			justify-content: center;
			/* Sane default until JS sets this to the actual stream's aspect
			   ratio (see matchAspectRatio in renderVoiceRoomView) — without
			   that, a box shaped for landscape content forces object-fit to
			   either crop a portrait phone-camera feed or letterbox it with a
			   lot of dead space. */
			aspect-ratio: 16 / 9;
		}

		.voice-tile-video {
			width: 100%;
			height: 100%;
			object-fit: contain;
			display: block;
			background: #000;
		}

		.voice-tile-placeholder {
			padding: 18px;
			text-align: center;
			color: #cbd5e1;
			font-size: 14px;
		}

		.voice-tile-footer {
			padding: 10px 12px;
			border-top: 1px solid var(--border-color-faint);
			background: var(--bg-panel);
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 8px;
			flex-wrap: wrap;
		}

		.voice-tile-actions {
			display: flex;
			gap: 8px;
			flex-wrap: wrap;
		}

		.voice-tile-btn {
			padding: 6px 10px;
			min-height: 32px;
			font-size: 12px;
			cursor: pointer;
		}

		.voice-tile-volume {
			display: flex;
			align-items: center;
			gap: 6px;
			font-size: 12px;
			color: var(--text-tertiary);
		}

		.voice-tile-volume input[type="range"] {
			width: 100px;
		}

		.voice-room-active #messages,
		.voice-room-active #composer {
			display: none;
		}

		.voice-room-active #voiceRoomView {
			display: block;
		}

		@media (max-width: 640px) {
			.voice-room-grid {
				grid-template-columns: 1fr;
			}
		}

		#toastStack {
			position: fixed;
			bottom: 16px;
			right: 16px;
			z-index: 1000;
			display: flex;
			flex-direction: column;
			gap: 8px;
			max-width: 320px;
		}

		.toast {
			background: #23272a;
			color: #fff;
			padding: 8px 12px;
			border-radius: 6px;
			font-size: 13px;
			box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
			opacity: 0;
			transform: translateY(6px);
			transition: opacity 0.15s ease, transform 0.15s ease;
		}

		.toast.show {
			opacity: 1;
			transform: translateY(0);
		}

		.toast.toast-leave {
			background: #3a3f44;
		}

		.settings-overlay {
			position: fixed;
			inset: 0;
			z-index: 300;
			display: none;
			align-items: center;
			justify-content: center;
			background: rgba(0, 0, 0, 0.5);
		}

		.settings-overlay.show {
			display: flex;
		}

		.settings-card {
			display: flex;
			width: 100%;
			max-width: 900px;
			height: 100%;
			max-height: 640px;
			margin: 20px;
			background: var(--bg-panel);
			border: 1px solid var(--border-color);
			border-radius: 12px;
			box-shadow: 0 8px 30px var(--shadow-color);
			overflow: hidden;
		}

		.settings-tabs {
			flex: 0 0 190px;
			background: var(--bg-panel-alt);
			border-right: 1px solid var(--border-color);
			padding: 16px 8px;
			display: flex;
			flex-direction: column;
			gap: 2px;
			overflow-y: auto;
		}

		.settings-tabs button {
			text-align: left;
			border: none;
			background: transparent;
			padding: 10px 12px;
			border-radius: 6px;
			cursor: pointer;
		}

		.settings-tabs button:hover {
			background: var(--bg-hover);
		}

		.settings-tabs button.active {
			background: var(--accent-bg-soft);
			font-weight: bold;
		}

		.settings-tabs .settings-close-btn {
			margin-top: auto;
			color: var(--danger);
		}

		.settings-content {
			flex: 1 1 auto;
			padding: 24px;
			overflow-y: auto;
			min-width: 0;
		}

		.settings-content h2 {
			margin: 0 0 16px;
		}

		.settings-field {
			display: flex;
			flex-direction: column;
			gap: 4px;
			margin-bottom: 16px;
		}

		.settings-field label {
			font-size: 12px;
			color: var(--text-muted);
			font-weight: bold;
			text-transform: uppercase;
		}

		.settings-field input[type="text"],
		.settings-field textarea {
			padding: 8px 10px;
			border-radius: 6px;
			width: 100%;
		}

		.settings-two-col {
			display: flex;
			gap: 20px;
			min-height: 0;
			height: 100%;
		}

		.account-settings-card,
		.avatar-crop-card {
			flex-direction: column;
			max-width: 440px;
			height: auto;
			max-height: 90vh;
		}

		.account-settings-header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 16px 24px;
			border-bottom: 1px solid var(--border-color-faint);
		}

		.account-settings-header h2 {
			margin: 0;
		}

		.account-settings-header .settings-close-btn {
			color: var(--danger);
		}

		.account-avatar-row {
			display: flex;
			align-items: center;
			gap: 16px;
			margin-bottom: 20px;
		}

		.account-avatar-actions {
			display: flex;
			flex-direction: column;
			gap: 8px;
			align-items: flex-start;
		}

		.account-avatar-actions label.friend-action-btn {
			display: inline-block;
			cursor: pointer;
		}

		.account-bio-counter {
			font-size: 11px;
			color: var(--text-muted);
			text-align: right;
		}

		.account-settings-status {
			display: inline-block;
			margin-left: 10px;
			font-size: 12px;
			color: var(--text-muted);
		}

		.avatar-crop-content {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 14px;
		}

		.avatar-crop-viewport {
			width: 320px;
			height: 320px;
			max-width: 100%;
			border-radius: 50%;
			overflow: hidden;
			background: #000;
			touch-action: none;
			cursor: grab;
		}

		.avatar-crop-viewport.dragging {
			cursor: grabbing;
		}

		/* Server icons crop to a rounded square instead of a circle, matching
		   how they're actually displayed (renderServerIconHtml/.avatar-rounded-square) —
		   otherwise the crop preview would lie about what the corners keep. */
		.avatar-crop-viewport.square-crop {
			border-radius: 30%;
		}

		.avatar-crop-viewport canvas {
			display: block;
			width: 100%;
			height: 100%;
		}

		#avatarCropZoom {
			width: 100%;
			max-width: 320px;
		}

		.settings-list {
			flex: 0 0 220px;
			overflow-y: auto;
			border-right: 1px solid var(--border-color-faint);
			padding-right: 12px;
		}

		.settings-detail {
			flex: 1 1 auto;
			min-width: 0;
			overflow-y: auto;
		}

		.role-row {
			display: flex;
			align-items: center;
			gap: 8px;
			padding: 8px;
			border-radius: 6px;
			cursor: pointer;
			margin-bottom: 4px;
		}

		.role-row:hover,
		.role-row.active {
			background: var(--bg-hover);
		}

		.role-row .role-color-dot {
			width: 10px;
			height: 10px;
			border-radius: 50%;
			flex: 0 0 auto;
			background: var(--text-muted);
		}

		.role-row .role-name {
			flex: 1 1 auto;
			min-width: 0;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		.role-row .role-reorder-btns {
			display: flex;
			gap: 2px;
		}

		.role-row .role-reorder-btns button {
			padding: 2px 6px;
			min-height: auto;
			font-size: 11px;
		}

		.perm-checkbox-row {
			display: flex;
			align-items: flex-start;
			gap: 8px;
			padding: 8px 0;
			border-bottom: 1px solid var(--border-color-faint);
		}

		.perm-checkbox-row .perm-info {
			flex: 1 1 auto;
			min-width: 0;
		}

		.perm-checkbox-row .perm-name {
			font-weight: bold;
		}

		.perm-checkbox-row .perm-desc {
			font-size: 12px;
			color: var(--text-muted);
		}

		.member-row-settings {
			display: flex;
			flex-direction: column;
			gap: 6px;
			padding: 10px;
			border-radius: 6px;
			border: 1px solid var(--border-color-faint);
			margin-bottom: 8px;
		}

		.member-row-settings .member-row-top {
			display: flex;
			align-items: center;
			gap: 8px;
		}

		.member-row-settings .member-name {
			font-weight: bold;
			flex: 1 1 auto;
			min-width: 0;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		.role-chip {
			display: inline-flex;
			align-items: center;
			gap: 4px;
			font-size: 11px;
			padding: 2px 8px;
			border-radius: 999px;
			background: var(--bg-chip);
			border: 1px solid var(--border-color-faint);
		}

		.role-chip .role-color-dot {
			width: 8px;
			height: 8px;
			border-radius: 50%;
		}

		.role-checkbox-list {
			display: flex;
			flex-wrap: wrap;
			gap: 6px;
		}

		.role-checkbox-list label {
			display: inline-flex;
			align-items: center;
			gap: 4px;
			font-size: 12px;
			padding: 4px 8px;
			border-radius: 6px;
			background: var(--bg-chip);
			cursor: pointer;
		}

		.role-members-list {
			display: flex;
			flex-direction: column;
			gap: 4px;
			max-height: 220px;
			overflow-y: auto;
		}

		.role-member-row {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 8px;
			padding: 6px 8px;
			border-radius: 6px;
			background: var(--bg-chip);
		}

		.role-member-row button {
			padding: 2px 8px;
			min-height: auto;
			font-size: 11px;
		}

		.role-member-search-results {
			display: flex;
			flex-direction: column;
			gap: 2px;
			margin-top: 4px;
			max-height: 220px;
			overflow-y: auto;
		}

		.role-member-search-item {
			display: flex;
			align-items: baseline;
			gap: 6px;
			padding: 6px 8px;
			border-radius: 6px;
			cursor: pointer;
		}

		.role-member-search-item:hover {
			background: var(--bg-hover);
		}

		.role-member-search-sub {
			font-size: 11px;
			color: var(--text-muted);
		}

		.member-row-settings .member-actions {
			display: flex;
			gap: 8px;
		}

		.member-row-settings .member-actions button {
			padding: 4px 10px;
			font-size: 12px;
			min-height: auto;
		}

		.ban-row {
			display: flex;
			align-items: center;
			gap: 10px;
			padding: 8px;
			border-radius: 6px;
			border: 1px solid var(--border-color-faint);
			margin-bottom: 6px;
		}

		.ban-row .ban-info {
			flex: 1 1 auto;
			min-width: 0;
		}

		.ban-row .ban-reason {
			font-size: 12px;
			color: var(--text-muted);
		}

		.dm-profile-avatar-row {
			display: flex;
			justify-content: center;
			margin-bottom: 10px;
		}

		.dm-profile-name {
			text-align: center;
			font-weight: 600;
			font-size: 16px;
		}

		.dm-profile-username {
			text-align: center;
			font-size: 12px;
			color: var(--text-muted);
			margin-bottom: 8px;
		}

		.dm-profile-bio {
			font-size: 13px;
			color: var(--text-secondary);
			white-space: pre-wrap;
			word-break: break-word;
			padding: 8px;
			background: var(--bg-panel-alt);
			border-radius: 6px;
			margin-bottom: 14px;
		}

		.dm-profile-section {
			margin-bottom: 16px;
		}

		.dm-profile-section-label {
			font-size: 11px;
			text-transform: uppercase;
			font-weight: bold;
			color: var(--text-muted);
			margin-bottom: 6px;
		}

		.dm-profile-join-date {
			font-size: 13px;
		}

		.dm-profile-hint {
			font-size: 12px;
			color: var(--text-muted);
		}

		.dm-profile-mutual-friend,
		.dm-profile-mutual-server {
			cursor: pointer;
		}

		.member-invited-by {
			font-size: 11px;
			color: var(--text-muted);
			margin: 2px 0 4px;
		}

		.audit-log-row {
			padding: 8px;
			border-radius: 6px;
			border: 1px solid var(--border-color-faint);
			margin-bottom: 6px;
		}

		.audit-log-line {
			font-size: 13px;
		}

		.audit-log-reason,
		.audit-log-time {
			font-size: 12px;
			color: var(--text-muted);
			margin-top: 2px;
		}

		#auditLogLoadMoreBtn {
			width: 100%;
			margin-top: 6px;
		}