Refactor Message component and update Scoreboard styles for improved layout and functionality

- Updated video element in Message component to disable controls, enable autoplay, and mute audio for better user experience.
- Simplified conditional rendering for media types in Message component.
- Removed min-height from Scoreboard styles to enhance layout flexibility.
- Adjusted default layout settings for header positioning and dimensions in AdminPanel types.

Author: RXDCODX

src/components/OBS_Components/ChatVertical/Message.tsx

@@ -140,7 +140,9 @@ export function Message({ message, onRemove }: Props) {
                     <video
                       key={part.id}
                       src={part.content}
-                      controls
+                      controls={false}
+                      autoPlay
+                      muted
                       style={{
                         maxWidth: "180px",
                         maxHeight: "120px",
@@ -172,35 +174,11 @@ export function Message({ message, onRemove }: Props) {
                     </span>
                   );
                 }
-                if (part.type === "image") {
-                  return (
-                    <img
-                      key={part.id}
-                      src={part.content}
-                      alt="image"
-                      style={{
-                        maxWidth: "120px",
-                        maxHeight: "120px",
-                        margin: "0 4px",
-                      }}
-                    />
-                  );
-                }
-                if (part.type === "video") {
-                  return (
-                    <video
-                      key={part.id}
-                      src={part.content}
-                      controls
-                      style={{
-                        maxWidth: "180px",
-                        maxHeight: "120px",
-                        margin: "0 4px",
-                      }}
-                    />
-                  );
-                }
-                if (part.type === "link") {
+                if (
+                  part.type === "link" ||
+                  part.type === "video" ||
+                  part.type === "image"
+                ) {
                   return (
                     <span key={part.id} className={styles.linkStub}>
                       ссылка

src/components/OBS_Components/PNGTuber/AvatarWithFire.tsx

@@ -0,0 +1,47 @@
+import EBALO4Url from "@/components/OBS_Components/PNGTuber/png/EBALO4.png";
+
+import { FireOutlineCanvas } from "./FireShader";
+
+// Демо-компонент: PNG-картинка + огненная обводка поверх. Параметры заметности
+export const AvatarWithFire = () => {
+  const size = 512;
+  const radius = Math.floor(size * 0.14);
+  const intensity = 1.6;
+  const speed = 1.35;
+
+  return (
+    <div
+      style={{
+        width: size,
+        height: size,
+        position: "relative",
+        background: "#000",
+      }}
+    >
+      <img
+        alt="avatar-mask"
+        src={EBALO4Url}
+        style={{
+          width: "100%",
+          height: "100%",
+          objectFit: "contain",
+          display: "block",
+          userSelect: "none",
+          pointerEvents: "none",
+          position: "absolute",
+          inset: 0,
+          zIndex: 0,
+        }}
+      />
+      <FireOutlineCanvas
+        width={size}
+        height={size}
+        maskUrl={EBALO4Url}
+        radiusPx={radius}
+        intensity={intensity}
+        speed={speed}
+        style={{ position: "absolute", inset: 0 }}
+      />
+    </div>
+  );
+};

src/components/OBS_Components/PNGTuber/AvatarWithFireSvg.tsx

@@ -0,0 +1,65 @@
+import { FireOutlineCanvas } from "./FireShader";
+
+// Демо: в качестве маски используется SVG (data URL), вокруг него рисуем огонь
+export const AvatarWithFireSvg = () => {
+  const size = 512;
+  const radius = Math.floor(size * 0.5);
+  const intensity = 3.0;
+  const speed = 1.35;
+
+  // Простой SVG-силуэт (блоб) на прозрачном фоне
+  const svg = `
+<svg xmlns='http://www.w3.org/2000/svg' width='${size}' height='${size}' viewBox='0 0 ${size} ${size}'>
+  <defs>
+    <radialGradient id='g' cx='50%' cy='45%' r='50%'>
+      <stop offset='0%' stop-color='#ffffff' />
+      <stop offset='100%' stop-color='#dddddd' />
+    </radialGradient>
+  </defs>
+  <rect width='100%' height='100%' fill='transparent'/>
+  <path fill='url(#g)' d='
+    M ${size * 0.2} ${size * 0.45}
+    C ${size * 0.2} ${size * 0.25}, ${size * 0.35} ${size * 0.1}, ${size * 0.5} ${size * 0.1}
+    C ${size * 0.72} ${size * 0.1}, ${size * 0.8} ${size * 0.28}, ${size * 0.8} ${size * 0.45}
+    C ${size * 0.8} ${size * 0.72}, ${size * 0.64} ${size * 0.88}, ${size * 0.5} ${size * 0.9}
+    C ${size * 0.35} ${size * 0.88}, ${size * 0.2} ${size * 0.7}, ${size * 0.2} ${size * 0.45}
+    Z' />
+</svg>`;
+  const svgUrl = `data:image/svg+xml;utf8,${encodeURIComponent(svg)}`;
+
+  return (
+    <div
+      style={{
+        width: size,
+        height: size,
+        position: "relative",
+        background: "#000",
+      }}
+    >
+      <img
+        alt="svg-mask"
+        src={svgUrl}
+        style={{
+          width: "100%",
+          height: "100%",
+          objectFit: "contain",
+          display: "block",
+          userSelect: "none",
+          pointerEvents: "none",
+          position: "absolute",
+          inset: 0,
+          zIndex: 0,
+        }}
+      />
+      <FireOutlineCanvas
+        width={size}
+        height={size}
+        maskUrl={svgUrl}
+        radiusPx={radius}
+        intensity={intensity}
+        speed={speed}
+        style={{ position: "absolute", inset: 0 }}
+      />
+    </div>
+  );
+};