fix: unverified device warning — rounded corners, left accent border

Replaced full-width sharp-cornered flat block with a compact rounded
notice: R300 border-radius, 3px amber left border accent, slight side
margins (S300) and bottom gap (S100) so it sits naturally above the
composer without looking jarring.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/app/features/room/RoomInput.tsx

@@ -854,16 +854,19 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
             alignItems="Center"
             gap="200"
             style={{
-              padding: `${config.space.S100} ${config.space.S300}`,
+              margin: `0 ${config.space.S300} ${config.space.S100}`,
+              padding: `${config.space.S100} ${config.space.S200}`,
+              borderRadius: config.radii.R300,
               background: color.Warning.Container,
+              borderLeft: `3px solid ${color.Warning.Main}`,
             }}
           >
             <Icon
               size="100"
               src={Icons.Shield}
-              style={{ color: color.Warning.OnContainer, flexShrink: 0 }}
+              style={{ color: color.Warning.OnContainer, opacity: 0.8, flexShrink: 0 }}
             />
-            <Text size="T200" style={{ color: color.Warning.OnContainer }}>
+            <Text size="T200" style={{ color: color.Warning.OnContainer, opacity: 0.9 }}>
               {roomUnverifiedDeviceCount}{' '}
               {roomUnverifiedDeviceCount === 1 ? 'unverified device' : 'unverified devices'} in this
               room