/* Look settings: the sizes, gaps, corners and colors the UI uses. Edit here, or live with the Tune panel (localhost only). */
:root {
	/* == Colors == */
	--ink: #ffffff; /* Text */
	--muted: #e0e0e0; /* Quiet text (hints, times, connection info) */
	--accent-hi: #e6e9ee; /* Bright silver (your name, links, download ring) */
	--accent: #b9c0c9; /* Silver (focus rings, sliders, drop zone outline) */
	--ok: #80db8c; /* Green (connected, speaking, done) */
	--warn: #eda831; /* Yellow (warnings) */
	--err: #ef261f; /* Red text and icons (errors, muted mic) */
	--invalid: #dd3731; /* Focus ring on a name that can't be used */
	--invalid-border: #c93631; /* Border on a name that can't be used */
	/* == Text == */
	--font-size: 14px; /* Normal text size [10-22] */
	--text-title: 22px; /* Home page title size [12-40] */
	--text-heading: 15px; /* Panel heading size (settings, chat) [10-24] */
	--text-label: 13px; /* Label text size (names, window labels) [9-20] */
	--text-small: 12px; /* Small text size (small buttons, file sizes) [8-18] */
	--text-tiny: 12px; /* Tiny text size (times, badges) [7-16] */
	--button-weight: 600; /* Button text boldness [100-900] */
	/* == Panels == */
	--panel-radius: 12px; /* Panel corners (top bar, dock, home card, empty-room hint) [0-40] */
	/* == Buttons == */
	--button-pad-y: 8px; /* Button padding, top and bottom [0-24] */
	--button-pad-x: 16px; /* Button padding, left and right [0-40] */
	--button-radius: 10px; /* Button corners [0-30] */
	--big-button-pad-y: 12px; /* Big button padding, top and bottom [0-30] */
	--big-button-pad-x: 20px; /* Big button padding, left and right [0-50] */
	--big-button-radius: 14px; /* Big button corners [0-30] */
	--big-button-text: 16px; /* Big button text size [10-28] */
	--small-button-pad-y: 4px; /* Small button padding, top and bottom [0-16] */
	--small-button-pad-x: 11px; /* Small button padding, left and right [0-30] */
	--small-button-radius: 9px; /* Small button corners (also mute/deafen buttons) [0-24] */
	--icon-size: 18px; /* Button icon size [10-32] */
	--slider-track: 7px; /* Slider bar thickness [2-20] */
	--slider-thumb: 18px; /* Slider knob size [8-36] */
	/* == Top bar == */
	--page-margin: 10px; /* Gap between screen edge and top bar, dock, settings [0-40] */
	--bar-gap: 12px; /* Gap between status text and buttons [0-40] */
	--bar-pad-y: 7px; /* Top bar padding, top and bottom [0-24] */
	--bar-pad-right: 8px; /* Top bar padding, right [0-30] */
	--bar-pad-left: 16px; /* Top bar padding, left [0-40] */
	--bar-button-gap: 8px; /* Gap between top bar buttons [0-24] */
	/* == Dock & people == */
	--dock-space: 6px; /* Dock padding and gap between people [0-24] */
	--chip-pad: 5px; /* Person padding around the avatar [0-16] */
	--chip-radius: 13px; /* Person corners [0-30] */
	--avatar-size: 28px; /* Avatar size (dock and chat) [16-64] */
	--voice-icon-size: 16px; /* Mute/deafen icon size [10-28] */
	--badge-size: 19px; /* Unread chat badge size [12-32] */
	/* == Voice popover == */
	--popover-width: 220px; /* Voice volume popup width [140-400] */
	--popover-pad-y: 12px; /* Voice volume popup padding, top and bottom [0-30] */
	--popover-pad-x: 14px; /* Voice volume popup padding, left and right [0-30] */
	/* == Stream windows == */
	--win-radius: 14px; /* Stream window corners [0-40] */
	--overlay-inset: 6px; /* Gap between window edge and its label/buttons [0-30] */
	--label-pad-y: 4px; /* Window name label padding, top and bottom [0-16] */
	--label-pad-x: 10px; /* Window name label padding, left and right [0-24] */
	--overlay-radius: 5px; /* Window name label and stats corners [0-24] */
	--controls-radius: 12px; /* Window button strip corners [0-30] */
	--volume-width: 100px; /* Window volume slider width [60-240] */
	/* == Grips == */
	--grip-length: 56px; /* Edge grip length [0-120] */
	--grip-thickness: 5px; /* Edge grip thickness [1-12] */
	--corner-grip-size: 48px; /* Corner grip size [12-96] */
	--corner-grip-thickness: 4px; /* Corner grip thickness [1-12] */
	--grip-color: rgb(255 255 255 / 0.85); /* Grip color */
	/* == Settings window == */
	--settings-nav-width: 180px; /* Settings category list width [100-320] */
	--settings-control-width: 240px; /* Settings control column width [140-400] */
	--settings-pad-y: 14px; /* Settings page padding, top and bottom [0-40] */
	--settings-pad-x: 18px; /* Settings page padding, left and right [0-40] */
	--settings-row-gap: 14px; /* Space between settings [0-40] */
	/* == Chat & settings window == */
	--chat-radius: 15px; /* Chat and settings window corners [0-40] */
	--chat-pad-x: 8px; /* Chat and settings window frame, left and right [0-24] */
	--chat-pad-bottom: 10px; /* Chat and settings window frame, bottom [0-30] */
	--chat-well-radius: 10px; /* Message area and settings page corners [0-30] */
	/* == Recessed areas (chat messages, settings page) == */
	--chat-well-bg: rgb(0 0 0 / 0.4); /* Recessed area background (darker = deeper) */
	--well-shadow-y: 1px; /* Inner shadow reach down from the top edge [0-20] */
	--well-shadow-blur: 6px; /* Inner shadow softness [0-40] */
	--well-shadow-spread: 0px; /* Inner shadow reach in from all edges [0-20] */
	--well-shadow-strength: 0.65; /* Inner shadow darkness [0-1] */
	--well-rim-strength: 0.55; /* Dark outline around the recessed area [0-1] */
	--well-highlight-strength: 0.07; /* Light edge just below the recessed area [0-0.5] */
	/* == Chat messages == */
	--msg-avatar-gap: 12px; /* Gap between avatar and message [0-24] */
	--msg-gap: 10px; /* Space above each new message group [0-24] */
	--attach-radius: 10px; /* Attached image and file corners [0-30] */
	--file-icon-size: 42px; /* File badge size [24-80] */
	/* == Chat composer == */
	--composer-radius: 10px; /* Message box and send button corners [0-24] */
	--composer-pad-y: 8px; /* Message box padding, top and bottom [0-20] */
	--composer-pad-x: 12px; /* Message box padding, left and right [0-24] */
	--send-button-size: 38px; /* Attach and send button size [24-56] */
	/* == Home card == */
	--card-width: 440px; /* Home card width [240-700] */
	--card-pad: 28px; /* Home card padding [0-60] */
	--card-gap: 14px; /* Space between home card lines [0-40] */
	/* == Dialogs & lightbox == */
	--dialog-radius: 12px; /* File drop zone and send-files card corners [0-30] */
	--dialog-width: 300px; /* Send-files card width [200-500] */
	--lightbox-radius: 10px; /* Enlarged image corners [0-30] */
	/* == Phones == */
	--phone-margin: 8px; /* Gap around the top bar on phones [0-24] */
	--phone-bar-pad: 6px; /* Top bar padding on phones (top, right, bottom) [0-20] */
	--phone-bar-pad-left: 12px; /* Top bar padding on phones, left [0-30] */
	--phone-bar-gap: 8px; /* Gap between status and buttons on phones [0-24] */
	--phone-button-gap: 6px; /* Gap between top bar buttons on phones [0-20] */
	--phone-button-pad: 8px; /* Top bar button padding on phones [0-20] */
	--phone-icon-size: 20px; /* Top bar icon size on phones [12-32] */
	/* == Gradients == */
	--page-bg: radial-gradient(ellipse at 30% 20%, #1d1e21 0%, #0b0c0e 70%); /* Page background behind everything */
	--surface: linear-gradient(180deg, #2e2f33 0%, #2a2c30 52%, #212226 100%); /* Button face (granite) */
	--primary-face: linear-gradient(180deg, #1a1b1e 0%, #18181b 100%); /* Main button face (polished black) */
	--danger-face: linear-gradient(180deg, #ce4a46 0%, #df302a 55%, #df3530 100%); /* Red button face (Stop, Leave) */
	--panel-face: linear-gradient(180deg, #232325 0%, #1b1c1d 100%); /* Panel face (top bar, dock, home card, empty-room hint, voice volume popover) */
	--chat-face: linear-gradient(180deg, #222326 0%, #2a2c30 45%, #222428 100%); /* Chat and settings window frame face */
	--live-face: linear-gradient(180deg, #ea3a34 0%, #c3302b 100%); /* LIVE tag face */
	--badge-face: linear-gradient(180deg, #f2645f 0%, #c3302b 100%); /* Unread chat badge face */
	--slider-knob: radial-gradient(circle at 35% 30%, #ffffff 0%, #c9c4bc 100%); /* Slider knob face */
	--slider-empty: rgb(0 0 0 / 0.45); /* Slider bar, empty part */
	--overlay-bg: rgb(16 17 19 / 0.72); /* Window name label and button strip background */
	--stats-bg: rgb(16 17 19 / 0.78); /* Stats overlay background */
	--composer-bg: rgb(0 0 0 / 0.35); /* Message box background */
	--drop-zone-bg: rgb(14 15 17 / 0.88); /* Chat background while dropping files */
	--confirm-backdrop: rgb(10 11 13 / 0.72); /* Chat dimming behind the send-files card */
	--lightbox-backdrop: rgb(0 0 0 / 0.82); /* Screen dimming behind an enlarged image */
	--snap-preview-bg: rgb(185 192 201 / 0.1); /* Fill of the snap target outline */
	/* == Glows == */
	--hover-brightness: 1.13; /* Button brightness under the mouse [0.5-2] */
	--press-brightness: 0.93; /* Button brightness while pressed [0.5-2] */
	--status-glow: 0px 0px 8px 0px rgb(95 191 106 / 0.7); /* Glow around the green connected dot */
	--speaking-ring-gap: #0d0f12; /* Dark gap between avatar and speaking ring */
	--speaking-ring-gap-width: 2px; /* Width of that dark gap [0-8] */
	--speaking-ring-color: #8fc796; /* Speaking ring color */
	--speaking-ring-width: 2px; /* Speaking ring thickness [0-8] */
	--speaking-glow: 0px 0px 12px 2px rgb(95 191 106 / 0.55); /* Soft glow around the speaking ring (not on phones) */
	--live-glow: inset 0px 1px 0px 0px rgb(255 255 255 / 0.3), 0px 0px 10px -2px rgb(233 34 28 / 0.45); /* LIVE tag shine and red glow */
	--done-ring: 0px 0px 0px 2px #8fc796; /* Green ring on a button that just worked (link copied) */
	--ring-glow: 0px 0px 3px rgb(230 233 238 / 0.6); /* Glow on the download progress ring */
	--snap-preview-border: rgb(230 233 238 / 0.7); /* Snap target outline color */
	--snap-preview-glow: inset 0px 0px 40px 0px rgb(185 192 201 / 0.18); /* Inner glow of the snap target */
	/* == Shadows == */
	--raised: inset 0px 1px 0px 0px rgb(255 255 255 / 0.14), inset 0px -2px 0px 0px rgb(0 0 0 / 0), 0px 1px 1px 0px rgb(0 0 0 / 0.28), 0px 6px 14px -6px rgb(0 0 0 / 0.2); /* Raised button shadow */
	--pressed: inset 0px 2px 5px 0px rgb(0 0 0 / 0.6), inset 0px -1px 0px 0px rgb(255 255 255 / 0.05), 0px 1px 0px 0px rgb(255 255 255 / 0.05); /* Pressed-in button shadow (also muted mic/deafen) */
	--button-text-shadow: 0px 1px 0px rgb(0 0 0 / 0.6); /* Button text shadow */
	--primary-text-shadow: 0px -1px 0px rgb(0 0 0 / 0.7); /* Main button text shadow */
	--danger-text-shadow: 0px 1px 0px rgb(0 0 0 / 0.45); /* Red button text shadow */
	--icon-shadow: 0px 1px 0px rgb(0 0 0 / 0.6); /* Shadow under button icons */
	--slider-track-shadow: inset 0px 1px 2px 0px rgb(0 0 0 / 0.6), 0px 1px 0px 0px rgb(255 255 255 / 0.06); /* Slider bar groove */
	--slider-knob-shadow: 0px 2px 4px 0px rgb(0 0 0 / 0.6); /* Shadow under the slider knob */
	--panel-edge: inset 0px 1px 0px 0px rgb(255 255 255 / 0.08); /* Light top edge on panels */
	--panel-shadow: 0px 14px 34px -12px rgb(0 0 0 / 0.75); /* Panel drop shadow */
	--empty-hint-shadow: inset 0px 1px 0px 0px rgb(255 255 255 / 0.08); /* Top edge of the empty-room hint */
	--status-dot-shadow: inset 0px 1px 1px 0px rgb(255 255 255 / 0.4); /* Shine on the status dot */
	--chip-shadow: inset 0px 1px 0px 0px rgb(255 255 255 / 0.05); /* Top edge of a person with a window open */
	--rename-shadow: inset 0px 1px 2px 0px rgb(0 0 0 / 0.35); /* Inner shadow of the rename box */
	--avatar-shadow: inset 0px 1px 1px 0px rgb(255 255 255 / 0.17), inset -9px -2px 3px 0px rgb(0 0 0 / 0), 0px 2px 5px 0px rgb(0 0 0 / 0); /* Avatar shine and shadow */
	--avatar-text-shadow: 0px 1px 1px rgb(0 0 0 / 0.5); /* Avatar letter shadow */
	--win-rim: 0px 0px 0px 1px rgb(255 255 255 / 0.08); /* Thin light outline around stream windows */
	--win-shadow: 0px 24px 50px -18px rgb(0 0 0 / 0.85), 0px 8px 18px -8px rgb(0 0 0 / 0.6); /* Window drop shadow (streams and chat) */
	--win-lift-shadow: 0px 0px 0px 1px rgb(230 233 238 / 0.22), 0px 28px 58px -20px rgb(0 0 0 / 0.85), 0px 10px 22px -10px rgb(0 0 0 / 0.6); /* Window shadow while dragging (streams and chat) */
	--overlay-edge: inset 0px 1px 0px 0px rgb(255 255 255 / 0.07); /* Top edge of window name label and button strip */
	--grip-shadow: 0px 1px 2px rgb(0 0 0 / 0.8); /* Shadow under resize grips */
	--chat-edges: inset 0px 1px 0px 0px rgb(255 255 255 / 0.16), inset 0px -2px 0px 0px rgb(0 0 0 / 0.35); /* Chat and settings frame top light and bottom shade */
	--chat-side-edges: inset 1px 0px 0px 0px rgb(255 255 255 / 0.04), inset -1px 0px 0px 0px rgb(255 255 255 / 0.04); /* Chat and settings frame side edges (not while dragging) */
	--heading-text-shadow: 0px 1px 0px rgb(0 0 0 / 0.6); /* Chat and settings title text shadow */
	--badge-ring: 0px 0px 0px 2px #1d1e21; /* Dark ring around the unread badge */
	--attach-shadow: 0px 0px 0px 1px rgb(255 255 255 / 0.08); /* Thin outline around attached images */
	--attach-cta-shadow: inset 0px 1px 0px 0px rgb(255 255 255 / 0.1); /* Top edge of the download button on images */
	--attach-file-shadow: inset 0px 1px 0px 0px rgb(255 255 255 / 0.05); /* Top edge of attached files */
	--file-icon-shadow: inset 0px 1px 0px 0px rgb(255 255 255 / 0.35), inset 0px -2px 3px 0px rgb(0 0 0 / 0.3), 0px 3px 8px 0px rgb(0 0 0 / 0.45); /* File badge shine and shadow */
	--file-icon-text-shadow: 0px 1px 1px rgb(0 0 0 / 0.45); /* File badge text shadow */
	--file-done-ring: 0px 0px 0px 2px #232428; /* Dark ring around the downloaded check mark */
	--composer-shadow: inset 0px 2px 4px 0px rgb(0 0 0 / 0.08), 0px 1px 0px 0px rgb(255 255 255 / 0.05); /* Message box recess */
	--confirm-shadow: inset 0px 1px 0px 0px rgb(255 255 255 / 0.14), 0px 18px 40px -14px rgb(0 0 0 / 0.85); /* Send-files card edge and shadow */
	--thumb-shadow: 0px 0px 0px 1px rgb(0 0 0 / 0.6); /* Outline around send-files thumbnails */
	--lightbox-shadow: 0px 20px 60px 0px rgb(0 0 0 / 0.8); /* Shadow under an enlarged image */
	/* == Noise & background == */
	--noise-opacity: 0; /* Grain over the background, strength [0-0.4] */
	--noise-fineness: 0.85; /* Grain over the background, fineness (higher = finer) [0.1-3] */
	--grain-opacity: 0.035; /* Grain on buttons and panels, strength [0-0.2] */
	--grain-fineness: 0.85; /* Grain on buttons and panels, fineness (higher = finer) [0.1-3] */
	--bg-dark: #070708; /* Background stone, darkest color */
	--bg-light: #1a191a; /* Background stone, lightest color */
	--bg-scale: 2.4; /* Background stone pattern zoom (higher = smaller pattern) [0.5-8] */
	--bg-steps: 5; /* Background stone terraces (number of levels) [1-12] */
	--bg-lighting: 0.32; /* Background stone light and shade strength [0-1] */
	--bg-shadow: 0.35; /* Background stone shadow depth under each terrace [0-1] */
	--bg-vignette: 1.1; /* Background darkening toward the screen edges [0-3] */
	--bg-speed: 1; /* Background drift speed (0 = still) [0-5] */
	/* == Tab icon == */
	--favicon-face: linear-gradient(180deg, #282929 0%, #18191b 100%); /* Tab icon disc face */
	--favicon-shine: rgb(255 255 255 / 0); /* Light rim along the top of the tab icon */
	--favicon-outline: rgb(0 0 0 / 0); /* Dark edge around the tab icon */
	--favicon-size: 25; /* Tab icon disc radius (the icon is 64 across) [8-32] */
	--favicon-halo-inset: -7; /* Halo distance in from the disc edge (0 = on the disc's edge, below 0 = outside it with a gap) [-12-12] */
	--favicon-halo-width: 4; /* Halo thickness [1-8] */
	--favicon-halo-glow: 0.6; /* Soft glow around the halo [0-1] */
	--favicon-muted: #f31912; /* Halo while your mic is muted or you're deafened */
	--favicon-talking: #35c047; /* Halo while you talk */
}