This commit makes minor style improvemens to make discuss a bit more enjoying to use:

- less start spacing on non-compact discuss sidebar items
- discuss sidebar item outline style when self in call is improved (better lines, more visible)
- discuss sidebar item when there's a call is improved: outline color matches border, background colors are more pleasing, spacing of participants and icons feels more right
- discuss app header buttons are less distracting (reduced opacity when not hovered, active color is more suble in dark theme)
- member panel is narrower in width by default (default value was too large most of the time)
- member panel categories (online / offline) are smaller and reduced opacity, so that they are less distracting
- hover effect on offline members is less intense (opacity on hover is reduced)
- member names have slightly reduced opacity (was more catchy than messages with white color)
- call status in systray is `.fa-volume-up.text-danger` rather than `text-warning` blinking dot. Also blinking animation duration is 6 seconds rather than infinite.
- call status in systray has style matching discuss sidebar, with outline around the button. The spacing is reduced so it looks like a cohesive button (previously looked like 2 different systray items).
- call status of active participant in compact sidebar is in a more natural position (was top left, now it's bottom right).
- "start a meeting" and "Invite a user" buttons have slightly less distracting icons (reduced opacity). "Invite a user" button has slightly less horizontal margin
- search panel icon was missing (had typo `.oi-serch`)
- call view user names is less distracting (muted name, background has less vertical padding)
- call card background color matches the dark theme better.
- chat window mobile buttons look better (rounded-circle instead of square, some margin around, and border opacity is reduced so click area is visible but absolutely not distracting)
- threads panel (sub-threads) has search input start aligned with thread items (was slightly misaligned)

Before
<img width="2560" alt="before" src="https://github.com/user-attachments/assets/9f7025fa-26f5-4381-bc7d-195fda480626" />

After
<img width="2560" alt="Screenshot 2024-12-24 at 22 55 20" src="https://github.com/user-attachments/assets/dde1698e-ba75-48a7-b453-82ea5e82f120" />

Since [1], a fix was introduced to display the actual value of a relational field instead of its ID. However, another issue occurs when a form is inside a tab (Tabs snippet) and a new tab is added. During this process, the currently active tab is cloned, including its field IDs. Although a method exists to update the IDs after cloning, the form rendering is triggered beforehand.

This causes the labels property of input elements—which is expected to return a NodeList of associated <label> elements—to fail because the cloned input IDs are not unique.

This commit resolves the issue by using querySelector to target the associated label elements directly.

Steps to reproduce:

- Open the Website editor.
- Drag & Drop a Tabs snippet.
- In the first tab, drag & Drop a Form snippet.
- Set the first field as a radio buttons.
- Make the second field's visibility depend on the first field.
- Add a new tab by clicking the "+" icon in the right panel.
- Observe that a traceback occurs.

A second issue related to [1] has been resolved for cases where there is
only a single checkbox. In this scenario, the value displayed in the
visibility condition dropdown menu should be "Yes".

opw-4345340

[1]: https://github.com/odoo/odoo/commit/4b37f22cece5424d6992c6bafe619c9a457d184b

Forward-Port-Of: odoo/odoo#191709
Forward-Port-Of: odoo/odoo#190460